Nuxt.js: Tworzenie strony głównej

Zmiany wprowadzone w lekcji · 19 min

diff --git a/32/minipedia/api/routes/wiki.js b/32/minipedia/api/routes/wiki.js
index f9a1c12..d9476ce 100644
--- a/32/minipedia/api/routes/wiki.js
+++ b/32/minipedia/api/routes/wiki.js
@@ -45,4 +45,23 @@ router.get('/random/lang/:lang/count/:count', async (req, res) => {
  }
 })
 
+router.get('/mostViewed/lang/:lang', async (req, res) => {
+ const lang = req.params.lang || 'en';
+ 
+ const Wiki = WikiJs({
+   apiUrl: `https://${lang}.wikipedia.org/w/api.php`,
+   headers: { 'User-Agent': process.env.BOT_USER_AGENT}
+ });
+ 
+ try {
+  const randomArticles = await Wiki.mostViewed();
+
+  return res.status(200).json(randomArticles);
+
+ } catch (e) {
+  console.error(e);
+  return res.status(500).json(e);
+ }
+})
+
 export default router;
\ No newline at end of file
diff --git a/32/minipedia/components/MostViewed.vue b/32/minipedia/components/MostViewed.vue
new file mode 100644
index 0000000..c7c95a9
--- /dev/null
+++ b/32/minipedia/components/MostViewed.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="most-viewed">
+   <h2> {{ $t('MostViewed') }}</h2>
+   <ol>
+    <li v-for="article in filteredArticles">
+      <nuxt-link :to="localePath('/wiki/'+article.title)">
+       {{ article.title }}
+      </nuxt-link>
+    </li>
+   </ol>
+  </div>
+</template>
+<script>
+export default {
+ props: {
+  mostViewed: {
+   type: Array,
+   required: true,
+  }
+ },
+ computed: {
+  filteredArticles() {
+   return this.$props.mostViewed.filter(article => {
+     return !article.title.includes(':');
+   });
+  }
+ },
+}
+</script>
+
+<style>
+ .most-viewed h2 {
+  font-size: 1.8rem;
+ }
+ 
+ .most-viewed ol li {
+  font-size: 1.2rem;
+ }
+ 
+ .most-viewed {
+  border: 1px solid black;
+  padding: 1rem;
+  margin: 1rem;
+ }
+</style>
\ No newline at end of file
diff --git a/32/minipedia/lang/en-US.js b/32/minipedia/lang/en-US.js
index 0490bf6..e52ea36 100644
--- a/32/minipedia/lang/en-US.js
+++ b/32/minipedia/lang/en-US.js
@@ -29,5 +29,6 @@ export default {
  'Languages': 'Languages',
  'Register': 'Register',
  'Login': 'Login',
- 'Disclaimer': 'From Wikipedia, the free encyclopedia'
+ 'Disclaimer': 'From Wikipedia, the free encyclopedia',
+ 'MostViewed': 'Most viewed',
 }
\ No newline at end of file
diff --git a/32/minipedia/lang/es-ES.js b/32/minipedia/lang/es-ES.js
index 788f80f..300120d 100644
--- a/32/minipedia/lang/es-ES.js
+++ b/32/minipedia/lang/es-ES.js
@@ -29,5 +29,6 @@ export default {
  'Languages': 'Idiomas',
  'Register': 'Registrarse',
  'Login': 'Acceso',
- 'Disclaimer': 'De Wikipedia, la enciclopedia libre'
+ 'Disclaimer': 'De Wikipedia, la enciclopedia libre',
+ 'MostViewed': 'Mas visto',
 }
\ No newline at end of file
diff --git a/32/minipedia/lang/fr-FR.js b/32/minipedia/lang/fr-FR.js
index c7a2eda..4873d5b 100644
--- a/32/minipedia/lang/fr-FR.js
+++ b/32/minipedia/lang/fr-FR.js
@@ -29,5 +29,6 @@ export default {
  'Languages': 'Langues',
  'Register': 'S\'inscrire',
  'Login': 'Connexion',
- 'Disclaimer': 'Un article de Wikipédia, l\'encyclopédie libre'
+ 'Disclaimer': 'Un article de Wikipédia, l\'encyclopédie libre',
+ 'MostViewed': 'Le plus regardé',
 }
\ No newline at end of file
diff --git a/32/minipedia/middleware/random.js b/32/minipedia/middleware/random.js
index 79526e7..d72db0f 100644
--- a/32/minipedia/middleware/random.js
+++ b/32/minipedia/middleware/random.js
@@ -1,5 +1,11 @@
 export default async function ({ store, route, $axios, app: { i18n }, redirect}) {
  const lang = i18n.locale;
  const random = (await $axios.$get(`/api/wiki/random/lang/${lang}/count/1`))[0];
+ 
+ 
+ if (lang === 'en') {
+  return redirect(`/wiki/${random}`);
+ }
+ 
  return redirect(`/${lang}/wiki/${random}`);
 }
\ No newline at end of file
diff --git a/32/minipedia/nuxt.config.js b/32/minipedia/nuxt.config.js
index 2f0d7e4..9b868dc 100644
--- a/32/minipedia/nuxt.config.js
+++ b/32/minipedia/nuxt.config.js
@@ -68,8 +68,13 @@ module.exports = {
       }
     ],
     lazy: true,
-    langDir: 'lang/'
+    langDir: 'lang/',
+    defaultLocale: 'en',
  },
+ loading: {
+  color: 'blue',
+  height: '5px'
+},
   basic: {
     name: process.env.USERNAME,
     pass: process.env.PASSWORD,
diff --git a/32/minipedia/pages/index.vue b/32/minipedia/pages/index.vue
index 16aebeb..b073829 100644
--- a/32/minipedia/pages/index.vue
+++ b/32/minipedia/pages/index.vue
@@ -1,17 +1,19 @@
 <template>
   <article class="content">
     <h1>Minipedia - {{ $t('Welcome') }} </h1>
-    
-    <nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
-    <nuxt-link :to="switchLocalePath('fr')">Français</nuxt-link>
-    <nuxt-link :to="switchLocalePath('es')">Español</nuxt-link>
+    <MostViewed :mostViewed="mostViewed"></MostViewed>
   </article>
   </div>
 </template>
 
 <script>
   export default {
-    layout: 'default'
+    layout: 'default',
+    async asyncData({ $axios , app: { i18n }}) {
+     return {
+      mostViewed: await $axios.$get(`/api/wiki/mostViewed/lang/${i18n.locale}`),
+     };
+    }
   }
 </script>