feat: add tips&tricks

SPSKH · Apr 26, 2024 · 5a50f15 · 5a50f15
1 parent 3231e97
commit 5a50f15
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 14 deletions.
diff --git a/components/the/TheNav.vue b/components/the/TheNav.vue
@@ -6,19 +6,19 @@ const links = [
         to: '/'
     },
     {
-        label: 'Seznam článků',
-        icon: 'i-heroicons-list-bullet',
-        to: '/articles'
+        label: 'Tips&Tricks',
+        icon: 'i-heroicons-light-bulb',
+        to: '/tips-and-tricks'
     },
     {
         label: 'Studentské projekty',
         icon: 'i-heroicons-academic-cap',
         to: '/projects'
     }],
     [{
-            label: 'Web školy',
-            icon: 'i-heroicons-globe-alt',
-            to: 'https://www.spskh.cz'
+        label: 'Web školy',
+        icon: 'i-heroicons-globe-alt',
+        to: 'https://www.spskh.cz'
     }]
 ]
 </script>

diff --git a/content/articles/second-article.md b/content/articles/second-article.md
@@ -2,7 +2,7 @@
 title: 'Druhý článek'
 description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque gravida in fermentum et sollicitudin ac. Vel eros donec ac odio tempor orci. Amet tellus cras adipiscing enim eu.'
 author: 'Martin Černoch'
-path: 'first-article'
+path: 'second-article'
 ---
 
 # Druhý článek

diff --git a/content/projects/student-project.md b/content/projects/student-project.md
@@ -3,7 +3,7 @@ title: 'První studentský projekt'
 description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque gravida in fermentum et sollicitudin ac. Vel eros donec ac odio tempor orci. Amet tellus cras adipiscing enim eu.'
 author: 'Martin Černoch'
 avatar: 'https://avatars.githubusercontent.com/u/100514868?v=4'
-path: 'student-project'
+path: 'first-student-project'
 ---
 
 # První článek

diff --git a/content/tips-and-tricks/first-article.md b/content/tips-and-tricks/first-article.md
@@ -0,0 +1,31 @@
+---
+title: 'První Tips&Tricks článek'
+description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque gravida in fermentum et sollicitudin ac. Vel eros donec ac odio tempor orci. Amet tellus cras adipiscing enim eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque gravida in fermentum et sollicitudin ac. Vel eros donec ac odio tempor orci. Amet tellus cras adipiscing enim eu.'
+author: 'Martin Černoch'
+avatar: 'https://avatars.githubusercontent.com/u/100514868?v=4'
+path: 'first-tips-and-tricks'
+---
+
+# První článek
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque gravida in fermentum et sollicitudin ac. Vel eros donec ac odio tempor orci. Amet tellus cras adipiscing enim eu.
+
+## Začátek článku blogu
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque gravida in fermentum et sollicitudin ac. Vel eros donec ac odio tempor orci. Amet tellus cras adipiscing enim eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque gravida in fermentum et sollicitudin ac. Vel eros donec ac odio tempor orci. Amet tellus cras adipiscing enim eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque gravida in fermentum et sollicitudin ac. Vel eros donec ac odio tempor orci. Amet tellus cras adipiscing enim eu.
+
+::badge
+The normal badge.
+::
+
+::success
+The success badge.
+::
+
+::alert
+The alert badge.
+::
+
+::warning
+The warning badge.
+::
diff --git a/pages/index.vue b/pages/index.vue
@@ -23,10 +23,36 @@ const toast = useToast()
             </p>
         </div>
         <div class="flex gap-6 justify-center mt-6">
-            <UButton @click="toast.add({ title: 'Přešel jsi na stránku seznam článků!' })" to="/articles"
-                label="Přejít na stránku se seznamem článků" color="primary" />
+            <UButton @click="toast.add({ title: 'Přešel jsi na stránku seznam článků!' })" to="/tips-and-tricks"
+                label="Přejít na stránku Tips&Tricks" color="primary" />
             <UButton @click="toast.add({ title: 'Přešel jsi na stránku studentské projekty!' })" to="/projects"
                 label="Přejít na stránku se studentskými projekty" color="primary" />
         </div>
+        <ContentList path="/articles" v-slot="{ list }">
+            <div v-for="article in list" :key="article._path">
+                <NuxtLink :to="`${article._path}`">
+                    <UCard class="mt-24">
+                        <template #header>
+                            <h2>{{ article.title }}</h2>
+                        </template>
+
+                        <p class="text-center">{{ article.description }}</p>
+
+                        <template #footer>
+                            <div class="flex items-center justify-between">
+                                <div class="flex gap-6 items-center">
+                                    <UAvatar :src="`${article.avatar}`" alt="Avatar" />
+                                    <p>{{ article.author }}</p>
+                                </div>
+                                <ULink :to="`${article._path}`" active-class="text-primary"
+                                    inactive-class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
+                                    Přečíst článek
+                                </ULink>
+                            </div>
+                        </template>
+                    </UCard>
+                </NuxtLink>
+            </div>
+        </ContentList>
     </main>
 </template>
diff --git a/pages/projects.vue b/pages/projects.vue
@@ -17,8 +17,8 @@ const toast = useToast()
         <div class="flex justify-center gap-6">
             <UButton @click="toast.add({ title: 'Přešel jsi na domovskou stránku!' })" to="/"
                 label="Přejít na domovskou stránku" color="primary" />
-            <UButton @click="toast.add({ title: 'Přešel jsi na stránku seznam článků!' })" to="/articles"
-                label="Přejít na stránku se seznamem článků" color="primary" />
+            <UButton @click="toast.add({ title: 'Přešel jsi na stránku seznam článků!' })" to="/tips-and-tricks"
+                label="Přejít na stránku Tips&Tricks" color="primary" />
         </div>
         <ContentList path="/projects" v-slot="{ list }">
             <div v-for="article in list" :key="article._path">

diff --git a/pages/articles.vue → pages/tips-and-tricks.vue b/pages/articles.vue → pages/tips-and-tricks.vue
@@ -13,14 +13,14 @@ const toast = useToast()
             <UBadge color="primary" variant="subtle">Studentský blog plný zajímavých článků o IT z průmyslovky Kutná
                 Hora!</UBadge>
         </div>
-        <h1>Seznam článků</h1>
+        <h1>Tips&Tricks</h1>
         <div class="flex justify-center gap-6">
             <UButton @click="toast.add({ title: 'Přešel jsi na domovskou stránku!' })" to="/"
                 label="Přejít na domovskou stránku" color="primary" />
             <UButton @click="toast.add({ title: 'Přešel jsi na stránku studentské projekty!' })" to="/projects"
                 label="Přejít na stránku se studentskými projekty" color="primary" />
         </div>
-        <ContentList path="/articles" v-slot="{ list }">
+        <ContentList path="/tips-and-tricks" v-slot="{ list }">
             <div v-for="article in list" :key="article._path">
                 <NuxtLink :to="`${article._path}`">
                     <UCard class="mt-24">