docs SEO

.gitignore

@@ -8,4 +8,5 @@ yarn.lock
 .idea
 .DS_Store
 *.tgz
-/coverage
+/coverage
+.unlighthouse

src/docs/src/routes/(docs)/components/+page.svelte

@@ -7,7 +7,7 @@
   let { components } = data
 </script>
 
-<SEO title="Components" desc="Components" />
+<SEO title="Components" desc="Tailwind CSS component examples by daisyUI" />
 <div class="flex flex-col-reverse justify-between gap-6 xl:flex-row">
   <div class="flex flex-col gap-6 pt-10">
     <div class="prose max-w-4xl flex-grow">

src/docs/src/routes/(docs)/components/breadcrumbs/+page.svelte.md

@@ -22,10 +22,10 @@ data="{[
 <div class="text-sm breadcrumbs">
   <ul>
     <li>
-      <a>Home</a>
+      <span class="hover:underline cursor-pointer inline-flex">Home</span>
     </li> 
     <li>
-      <a>Documents</a>
+      <span class="hover:underline cursor-pointer inline-flex">Documents</span>
     </li> 
     <li>Add Document</li>
   </ul>
@@ -45,16 +45,16 @@ data="{[
 <div class="text-sm breadcrumbs">
   <ul>
     <li>
-      <a>
+      <span class="hover:underline cursor-pointer inline-flex">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
         Home
-      </a>
+      </span>
     </li> 
     <li>
-      <a>
+      <span class="hover:underline cursor-pointer inline-flex">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
         Documents
-      </a>
+      </span>
     </li> 
     <li>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>

src/docs/src/routes/blog/(posts)/install-daisyui-and-tailwindcss-in-nextjs/+page.md

@@ -1,6 +1,6 @@
 ---
 title: How to install daisyUI and Tailwind CSS in Next.js
-desc: Next.js is currently one of the popular JavaScript meta frameworks for building web applications. Since we can use daisyUI in any JavaScript framework, we can also use it in Next.js. In this article, we will learn how to use daisyUI component library in Next.js.
+desc: In this article, we will learn how to use daisyUI component library in Next.js.
 published: true
 date: 2023-9-22
 author: Pouya Saadeghi
@@ -11,6 +11,8 @@ tags:
   - JavaScript frameworks
 ---
 
+Next.js is currently one of the popular JavaScript meta frameworks for building web applications. Since we can use daisyUI in any JavaScript framework, we can also use it in Next.js.
+
 Installing Next.js is pretty straightforward. It also includes Tailwind CSS by default. After installing Next.js, we can install daisyUI as a plugin and start using it in our Next.js project.
 
 ### Installing Next.js

src/docs/src/routes/blog/+page.svelte

@@ -4,7 +4,7 @@
   let { posts } = data
 </script>
 
-<SEO title="daisyUI Blog" desc="Updates, ideas and resources" />
+<SEO title="daisyUI Blog" desc="daisyUI blog - Updates, ideas and resources" />
 {#if posts.length === 0}
   <div
     class="border-base-content/10 rounded-box flex h-96 w-full grow flex-col items-center justify-center border">

src/docs/src/routes/blog/tag/[tag]/+page.server.js

@@ -36,6 +36,7 @@ export async function load({ params }) {
     throw error(404, "Not found")
   }
   return {
+    params,
     posts,
   }
 }

src/docs/src/routes/blog/tag/[tag]/+page.svelte

@@ -1,11 +1,12 @@
 <script>
   import SEO from "@components/SEO.svelte"
   export let data
-  let { posts } = data
+  let { params, posts } = data
 </script>
 
-<SEO title="title" desc="desc" />
-
+<SEO
+  title={params.tag.replace(/-/g, " ")}
+  desc={`daisyUI blog posts with '${params.tag.replace(/-/g, " ")}' tag`} />
 <div class="grid justify-items-stretch gap-6">
   {#each posts as post}
     <a