test purpose

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

components/blog/card.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+  excerpt?: string;
+  image?: string;
+  slug?: string;
+}>();
+</script>
+
+<template>
+  <div
+    class="grid shadow-xl group overflow-hidden rounded max-w-md p-5 m-5 bg-slate-700 text-white"
+  >
+    <h1 class="text-xl">
+      Riyad ipsum dolor sit amet, consectetur adipisicing elit. Saepe, commodi?
+    </h1>
+    <p class="text-sm">
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat autem
+      sit ratione vitae dolores porro in fuga quae corporis quis?
+    </p>
+  </div>
+</template>

components/page/footer.vue

@@ -1,3 +1,15 @@
 <template>
-  <div>This is a page footer</div>
+  <nav class="bg-gray-900 text-white py-5 border-b border-gray-700">
+    <div class="container flex justify-between mx-auto">
+      <NuxtLink to="/" class="text-2xl font-medium">Elon's Blog</NuxtLink>
+      <ul class="nav flex space-x-5">
+        <li>
+          <NuxtLink to="/categories">Categories</NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/blogs">Blogs</NuxtLink>
+        </li>
+      </ul>
+    </div>
+  </nav>
 </template>

components/page/header.vue

@@ -1,3 +1,15 @@
 <template>
-  <div>This is a page header</div>
+  <nav class="bg-gray-900 text-white py-5 border-b border-gray-700">
+    <div class="container flex justify-between mx-auto">
+      <NuxtLink to="/" class="text-2xl font-medium">Elon's Blog</NuxtLink>
+      <ul class="nav flex space-x-5">
+        <li>
+          <NuxtLink to="/categories">Categories</NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/blogs">Blogs</NuxtLink>
+        </li>
+      </ul>
+    </div>
+  </nav>
 </template>

layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <PageHeader />
-    <div class="h-full bg-slate-600">
+    <div class="h-full">
       <slot />
     </div>
     <PageFooter />

nuxt.config.ts

@@ -1,13 +1,12 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-
   app: {
     head: {
       charset: "utf-16",
       viewport: "width=device-width,initial-scale=1",
       title: "Elon's Blog",
-      titleTemplate: "%s - Elon's Blog",
-      meta: [{ name: "description", content: "Elon's awesome blog" }],
+      titleTemplate: "%s - Riyad's Blog",
+      meta: [{ name: "description", content: "Riyad's awesome blog" }],
     },
   },
 

package.json

@@ -10,6 +10,7 @@
   "devDependencies": {
     "@nuxt/content": "^2.3.0",
     "@nuxtjs/tailwindcss": "^6.1.3",
-    "nuxt": "3.0.0"
+    "nuxt": "3.0.0",
+    "prettier": "2.8.1"
   }
 }

pages/index.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-
-
 useHead({
   title: "Home",
   meta: [
@@ -11,12 +9,18 @@ useHead({
   ],
   titleTemplate: "Elon's Blog - %s",
 });
-
 </script>
 <template>
   <main>
-    
-   <h1>This ia main section</h1>
+    <div class="flex m-5 p-3 flex-wrap">
+      <template v-for="n in 10" :key="n">
+        <BlogCard
+          title="sldkfsl"
+          excerpt="sldkfj"
+          image="sdlfkj"
+          slug="sdlkfj"
+        />
+      </template>
+    </div>
   </main>
 </template>
-

yarn.lock

@@ -4871,6 +4871,11 @@ postcss@^8.1.10, postcss@^8.2.15, postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+prettier@2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.1.tgz#4e1fd11c34e2421bc1da9aea9bd8127cd0a35efc"
+  integrity sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==
+
 pretty-bytes@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.0.0.tgz#928be2ad1f51a2e336add8ba764739f9776a8140"