Merge pull request #94 from prototypa/astro2

Improve structure and add custom css variables

.vscode/css-custom-data.json

@@ -0,0 +1,17 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "@tailwind tailwindcss"
+    },
+    {
+      "name": "@layer",
+      "description": "@layer tailwindcss"
+    },
+    {
+      "name": "@apply",
+      "description": "@apply tailwindcss"
+    }
+  ]
+}

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "css.customData": ["./vscode/css-custom-data.json"],
   "eslint.validate": [
     "javascript",
     "javascriptreact",

src/assets/styles/base.css

@@ -3,21 +3,33 @@
 @tailwind utilities;
 
 @layer components {
-  .btn {
+  .text-page {
-    @apply inline-flex items-center justify-center rounded-full shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-gray-700 leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
+    color: var(--aw-color-text-page);
   }
 
-  .btn-ghost {
+  .text-muted {
-    @apply border-none shadow-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
+    color: var(--aw-color-text-muted);
   }
 
-  .btn-primary {
+  .bg-light {
-    @apply font-semibold bg-primary-800 text-white border-primary-800 hover:bg-primary-900 hover:border-primary-900 hover:text-white dark:text-white dark:bg-primary-800 dark:border-primary-800 dark:hover:border-primary-900 dark:hover:bg-primary-900;
+    background-color: var(--aw-color-bg-page);
   }
 
   .bg-dark {
     @apply bg-slate-900;
   }
+
+  .btn {
+    @apply inline-flex items-center justify-center rounded-full shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
+  }
+
+  .btn-ghost {
+    @apply border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
+  }
+
+  .btn-primary {
+    @apply font-semibold bg-primary text-white border-primary hover:bg-blue-900 hover:border-blue-900 hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-blue-900 dark:hover:bg-blue-900;
+  }
 }
 
 #header.scroll {

src/components/blog/GridItem.astro

@@ -39,12 +39,12 @@ const image = await findImage(post.image);
       ) : (
         <a
           href={getPermalink(post.slug, 'post')}
-          class="hover:text-primary-800 dark:hover:text-primary-700  transition ease-in duration-200"
+          class="hover:text-primary dark:hover:text-blue-700  transition ease-in duration-200"
         >
           {post.title}
         </a>
       )
     }
   </h3>
-  <p class="text-gray-500 dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
+  <p class="text-muted dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
 </article>

src/components/blog/HighlightedPosts.astro

@@ -37,7 +37,7 @@ const posts = await findPostsByIds(postIds);
       {
         allPostsText && allPostsLink && (
           <a
-            class="text-gray-500 dark:text-slate-400 hover:text-primary-800 transition ease-in duration-200 block mb-6 md:mb-0"
+            class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 md:mb-0"
             href={allPostsLink}
           >
             {allPostsText} »
@@ -46,7 +46,7 @@ const posts = await findPostsByIds(postIds);
       }
     </div>
 
-    {information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
+    {information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
   </div>
 
   <Grid posts={posts} />

src/components/blog/LatestPosts.astro

@@ -4,26 +4,49 @@ import Grid from '~/components/blog/Grid.astro';
 import { getBlogPermalink } from '~/utils/permalinks';
 import { findLatestPosts } from '~/utils/blog';
 
-const count = 4;
+export interface Props {
+  title?: string;
+  allPostsText?: string;
+  allPostsLink?: string | URL;
+  information?: string;
+  postIds: string[];
+}
+
+const {
+  title = await Astro.slots.render('title'),
+  allPostsText = 'View all posts',
+  allPostsLink = getBlogPermalink(),
+  information = await Astro.slots.render('information'),
+  count = 4,
+} = Astro.props;
+
 const posts = await findLatestPosts({ count });
 ---
 
-<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
+<section class="px-4 py-16 mx-auto max-w-screen-xl lg:py-20">
-  <div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
+  <div class="flex flex-col lg:justify-between lg:flex-row mb-8">
-    <h2 class="max-w-lg mb-2 text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group font-heading">
+    <div class="md:max-w-sm">
-      <span class="inline-block mb-1 sm:mb-4"
+      {
-        >Latest articles<br class="hidden md:block" /> in our <a
+        title && (
-          class="hover:text-primary-800 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+          <h2
-          href={getBlogPermalink()}>Blog</a
+            class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2"
-        >
+            set:html={title}
-      </span>
+          />
-    </h2>
+        )
+      }
+      {
+        allPostsText && allPostsLink && (
+          <a
+            class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 lg:mb-0"
+            href={allPostsLink}
+          >
+            {allPostsText} »
+          </a>
+        )
+      }
+    </div>
 
-    <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
+    {information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
-      The blog will be used to display AstroWind documentation. Each new article will be an important step that you will
-      need to know to be an expert in creating a website using Astro + Tailwind CSS The blog does not exist yet, but
-      very soon. Astro is a very interesting technology. Thanks.
-    </p>
   </div>
 
   <Grid posts={posts} />

src/components/blog/ListItem.astro

@@ -1,7 +1,7 @@
 ---
 import Icon from 'astro-icon';
 import { Picture } from '@astrojs/image/components';
-import PostTags from '~/components/common/Tags.astro';
+import PostTags from '~/components/blog/Tags.astro';
 
 import { BLOG } from '~/config.mjs';
 import type { Post } from '~/types';
@@ -43,15 +43,15 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
     <header>
       <div class="mb-1">
         <span class="text-sm">
-          <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 text-gray-500 dark:text-gray-400" />
+          <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
           <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
           {Math.ceil(post.readingTime)} min read
         </span>
       </div>
-      <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading text-gray-700 dark:text-slate-300">
+      <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
         {
           link ? (
-            <a class="hover:text-primary-800 dark:hover:text-primary-700 transition ease-in duration-200" href={link}>
+            <a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={link}>
               {post.title}
             </a>
           ) : (
@@ -61,7 +61,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
       </h2>
     </header>
 
-    {post.excerpt && <p class="flex-grow text-gray-500 dark:text-slate-400 text-lg">{post.excerpt}</p>}
+    {post.excerpt && <p class="flex-grow text-muted dark:text-slate-400 text-lg">{post.excerpt}</p>}
     <footer class="mt-5">
       <PostTags tags={post.tags} />
     </footer>

src/components/blog/SinglePost.astro

@@ -2,7 +2,7 @@
 import Icon from 'astro-icon';
 import { Picture } from '@astrojs/image/components';
 
-import PostTags from '~/components/common/Tags.astro';
+import PostTags from '~/components/blog/Tags.astro';
 import SocialShare from '~/components/common/SocialShare.astro';
 
 import { getFormattedDate } from '~/utils/utils';
@@ -22,10 +22,10 @@ const { post, url } = Astro.props;
     <header class={post.image ? '' : ''}>
       <div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
         <p>
-          <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 text-gray-500 dark:text-gray-400" />
+        <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 dark:text-gray-400" />
-          <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
+        <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
-            Math.ceil(post.readingTime)
+          Math.ceil(post.readingTime)
-          } min read
+        } min read
         </p>
       </div>
       <h1
@@ -34,7 +34,7 @@ const { post, url } = Astro.props;
         {post.title}
       </h1>
       <p
-        class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-gray-500 dark:text-slate-400 font-medium text-justify"
+        class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-muted dark:text-slate-400 text-justify"
       >
         {post.excerpt}
       </p>
@@ -60,7 +60,7 @@ const { post, url } = Astro.props;
       }
     </header>
     <div
-      class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-800 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
+      class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
     >
       {
         post.Content ? (

src/components/blog/Tags.astro

@@ -22,7 +22,7 @@ const { tags, class: className = 'text-sm' } = Astro.props;
           ) : (
             <a
               href={getPermalink(tag, 'tag')}
-              class="text-gray-600 dark:text-slate-300 hover:text-primary-800 dark:hover:text-gray-200"
+              class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
             >
               {tag}
             </a>

src/components/common/CustomStyles.astro

@@ -0,0 +1,23 @@
+---
+import '@fontsource/inter/variable.css';
+
+// Nunito
+// Dosis
+---
+
+<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap" rel="stylesheet" />
+
+<style is:inline is:global>
+  :root {
+    --aw-font-sans: 'InterVariable';
+    --aw-font-serif: var(--aw-font-sans);
+    --aw-font-heading: 'Nunito'; /* var(--aw-font-sans); */
+
+    --aw-color-primary: rgb(30 64 175);
+    --aw-color-secondary: rgb(30 58 138);
+    --aw-color-accent: rgb(109 40 217);
+    --aw-color-text-page: rgb(17 24 39);
+    --aw-color-text-muted: rgb(75 85 99);
+    --aw-color-bg-page: rgb(255 255 255);
+  }
+</style>

src/components/common/Fonts.astro

@@ -1,5 +0,0 @@
----
-import '@fontsource/inter/variable.css';
----
-
-<!-- Or Google Fonts -->

src/components/common/MetaTags.astro

@@ -5,10 +5,10 @@ import { getImage } from '@astrojs/image';
 
 import { SITE } from '~/config.mjs';
 import { MetaSEO } from '~/types';
-import { getCanonical, getAsset  } from '~/utils/permalinks';
+import { getCanonical, getAsset } from '~/utils/permalinks';
 import { getRelativeUrlByFilePath } from '~/utils/directories';
 
-import Fonts from '~/components/common/Fonts.astro';
+import CustomStyles from '~/components/common/CustomStyles.astro';
 import SplitbeeAnalytics from './SplitbeeAnalytics.astro';
 
 export interface Props extends MetaSEO {
@@ -82,7 +82,7 @@ const image =
   }}
 />
 
-<Fonts />
+<CustomStyles />
 
 <!-- Google Site Verification -->
 {SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}

src/components/common/SocialShare.astro

@@ -11,20 +11,35 @@ const { text, url, class: className = 'inline-block' } = Astro.props;
 ---
 
 <div class={className}>
-  <span class="align-super font-bold dark:text-slate-400">Share:</span>
+  <span class="align-super font-bold text-gray-400 dark:text-slate-400">Share:</span>
   <button class="ml-2" title="Twitter Share" data-aw-social-share="twitter" data-aw-url={url} data-aw-text={text}
-    ><Icon name="logos:twitter" class="w-6 h-6" />
+    ><Icon
+      name="ri:twitter-fill"
+      class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
+    />
   </button>
   <button class="ml-2" title="Facebook Share" data-aw-social-share="facebook" data-aw-url={url}
-    ><Icon name="logos:facebook" class="w-6 h-6" />
+    ><Icon
+      name="ri:facebook-box-fill"
+      class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
+    />
   </button>
   <button class="ml-2" title="Linkedin Share" data-aw-social-share="linkedin" data-aw-url={url} data-aw-text={text}
-    ><Icon name="logos:linkedin-icon" class="w-6 h-6" />
+    ><Icon
+      name="ri:linkedin-box-fill"
+      class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
+    />
   </button>
   <button class="ml-2" title="Whatsapp Share" data-aw-social-share="whatsapp" data-aw-url={url} data-aw-text={text}
-    ><Icon name="logos:whatsapp" class="w-6 h-6" />
+    ><Icon
+      name="ri:whatsapp-fill"
+      class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
+    />
   </button>
   <button class="ml-2" title="Email Share" data-aw-social-share="mail" data-aw-url={url} data-aw-text={text}
-    ><Icon name="tabler:mail" class="w-6 h-6" />
+    ><Icon
+      name="ri:mail-fill"
+      class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
+    />
   </button>
 </div>

src/components/common/ToggleTheme.astro

@@ -13,7 +13,7 @@ export interface Props {
 const {
   label = 'Toggle between Dark and Light mode',
   class:
-    className = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
+    className = 'text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
   iconClass = 'w-6 h-6',
   iconName = 'tabler:sun',
 } = Astro.props;

src/components/widgets/Announcement.astro

@@ -3,9 +3,9 @@ import { getPermalink } from '~/utils/permalinks';
 ---
 
 <div
-  class="hidden md:block bg-primary-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
+  class="hidden md:block bg-blue-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-blue-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
 >
-  <span class="text-xs py-0.5 px-1 bg-primary-800 dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
+  <span class="text-xs py-0.5 px-1 bg-primary dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
   <a
     href={getPermalink('useful-resources-to-create-websites', 'post')}
     class="hover:underline text-gray-200 dark:text-slate-400"

src/components/widgets/CallToAction.astro

@@ -34,7 +34,7 @@ const {
             />
           )
         }
-        {subtitle && <p class="text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
+        {subtitle && <p class="text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
         {
           typeof callToAction === 'string' ? (
             <Fragment set:html={callToAction} />

src/components/widgets/Content.astro

@@ -31,14 +31,14 @@ const {
 } = Astro.props;
 ---
 
-<section class={`bg-primary-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
+<section class={`bg-blue-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
   <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
     {
       (title || subtitle || highlight) && (
         <div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
           {highlight && (
             <p
-              class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+              class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
               set:html={highlight}
             />
           )}
@@ -50,7 +50,7 @@ const {
           )}
 
           {subtitle && (
-            <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
+            <p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
           )}
         </div>
       )
@@ -59,7 +59,7 @@ const {
   <div class="mx-auto max-w-screen-xl p-4 md:px-8">
     <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
       <div class="md:basis-1/2 self-center">
-        {content && <div class="mb-12 text-lg text-gray-600 dark:text-slate-400" set:html={content} />}
+        {content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />}
 
         {
           items && (
@@ -67,13 +67,13 @@ const {
               {items.map(({ title: title2, description, icon }) => (
                 <div class="flex">
                   <div class="flex-shrink-0">
-                    <div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary-800 text-gray-50">
+                    <div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-gray-50">
                       <Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5" />
                     </div>
                   </div>
                   <div class="ml-4">
-                    {title2 && <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">{title2}</h3>}
+                    {title2 && <h3 class="text-lg font-medium leading-6 dark:text-white">{title2}</h3>}
-                    {description && <p class="mt-2 text-gray-600 dark:text-slate-400" set:html={description} />}
+                    {description && <p class="mt-2 text-muted dark:text-slate-400" set:html={description} />}
                   </div>
                 </div>
               ))}

src/components/widgets/FAQs.astro

@@ -28,7 +28,7 @@ const {
         <div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
           {highlight && (
             <p
-              class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+              class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
               set:html={highlight}
             />
           )}
@@ -38,7 +38,7 @@ const {
               set:html={title}
             />
           )}
-          {subtitle && <p class="max-w-3xl mx-auto text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
+          {subtitle && <p class="max-w-3xl mx-auto text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
         </div>
       )
     }
@@ -52,10 +52,10 @@ const {
               {subitems.map(({ question, answer }) => (
                 <div>
                   <h3 class="mb-4 text-xl font-bold">
-                    <Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-800 inline-block" />
+                    <Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary inline-block" />
                     {question}
                   </h3>
-                  {answer && <div class="text-gray-700 dark:text-gray-400" set:html={answer} />}
+                  {answer && <div class="text-muted dark:text-gray-400" set:html={answer} />}
                 </div>
               ))}
             </div>

src/components/widgets/Features.astro

@@ -29,7 +29,7 @@ const {
         <div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
           {highlight && (
             <p
-              class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+              class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
               set:html={highlight}
             />
           )}
@@ -41,7 +41,7 @@ const {
           )}
 
           {subtitle && (
-            <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
+            <p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
           )}
         </div>
       )
@@ -53,13 +53,13 @@ const {
             {subitems.map(({ title, description, icon }) => (
               <div class="flex flex-row max-w-md">
                 <div class="mb-4 mr-4">
-                  <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-800 dark:bg-primary-700">
+                  <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary dark:bg-blue-700">
                     {icon && <Icon name={icon} class="w-6 h-6 text-white icon-light" />}
                   </div>
                 </div>
                 <div>
                   <h3 class="mb-3 text-xl font-bold">{title}</h3>
-                  <p class="text-gray-600 dark:text-slate-400" set:html={description} />
+                  <p class="text-muted dark:text-slate-400" set:html={description} />
                 </div>
               </div>
             ))}

src/components/widgets/Features2.astro

@@ -23,7 +23,7 @@ const {
 ---
 
 <section class="relative">
-  <div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
+  <div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
   <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 -mb-12">
     <div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
       {
@@ -31,7 +31,7 @@ const {
           <div class="mb-8 md:mx-auto text-center max-w-3xl">
             {highlight && (
               <p
-                class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+                class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
                 set:html={highlight}
               />
             )}
@@ -44,7 +44,7 @@ const {
 
             {subtitle && (
               <p
-                class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400"
+                class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400"
                 set:html={subtitle}
               />
             )}
@@ -59,7 +59,7 @@ const {
                 <Icon name={icon} class="w-10 h-10" />
                 <div class="ml-4 text-xl font-bold">{title}</div>
               </div>
-              {description && <p class="text-gray-500 dark:text-gray-400 text-md mt-4" set:html={description} />}
+              {description && <p class="text-muted dark:text-gray-400 text-md mt-4" set:html={description} />}
             </div>
           ))
         }

src/components/widgets/Footer.astro

@@ -34,11 +34,11 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
         <div class="mb-2">
           <a class="inline-block font-bold text-xl" href={getHomePermalink()}>{SITE?.name}</a>
         </div>
-        <div class="text-sm text-gray-600">
+        <div class="text-sm text-muted">
           {
             secondaryLinks.map(({ text, href }) => (
               <a
-                class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
+                class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
                 href={href}
                 set:html={text}
               />
@@ -49,13 +49,13 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
       {
         links.map(({ title, links }) => (
           <div class="col-span-6 md:col-span-3 lg:col-span-2">
-            <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">{title}</div>
+            <div class="dark:text-gray-300 font-medium mb-2">{title}</div>
             {links && Array.isArray(links) && links.length > 0 && (
               <ul class="text-sm">
                 {links.map(({ text, href, ariaLabel }) => (
                   <li class="mb-2">
                     <a
-                      class="text-gray-600 hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
+                      class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
                       href={href}
                       aria-label={ariaLabel}
                     >
@@ -76,7 +76,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
             {socialLinks.map(({ ariaLabel, href, text, icon }) => (
               <li>
                 <a
-                  class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+                  class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
                   aria-label={ariaLabel}
                   href={href}
                 >
@@ -91,7 +91,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
         )
       }
 
-      <div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
+      <div class="text-sm mr-4 dark:text-slate-400">
         <Fragment set:html={footNote} />
       </div>
     </div>

src/components/widgets/Header.astro

@@ -22,14 +22,18 @@ interface MenuLink extends Link {
 }
 
 export interface Props {
-  links: Array<MenuLink>;
+  links?: Array<MenuLink>;
-  actions: Array<ActionLink>;
+  actions?: Array<ActionLink>;
+  isFixed?: boolean;
 }
 
-const { links = [], actions = [] } = Astro.props;
+const { links = [], actions = [], isFixed = false } = Astro.props;
 ---
 
-<header class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100" id="header">
+<header
+  class:list={[{ sticky: isFixed }, 'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100']}
+  id="header"
+>
   <div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-screen-xl">
     <div class="flex justify-between">
       <a class="flex items-center" href={getHomePermalink()}>
@@ -41,7 +45,7 @@ const { links = [], actions = [] } = Astro.props;
       </div>
     </div>
     <nav
-      class="items-center w-full md:w-auto hidden md:flex text-gray-800 dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
+      class="items-center w-full md:w-auto hidden md:flex dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
       aria-label="Main navigation"
     >
       <ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
@@ -84,7 +88,7 @@ const { links = [], actions = [] } = Astro.props;
         <ToggleTheme iconClass="w-5 h-5" />
 
         <a
-          class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+          class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
           aria-label="RSS Feed"
           href={getAsset('/rss.xml')}
         >

src/components/widgets/Hero.astro

@@ -41,7 +41,7 @@ const {
           )
         }
         <div class="max-w-3xl mx-auto">
-          {subtitle && <p class="text-xl text-gray-600 mb-6 dark:text-slate-300" set:html={subtitle} />}
+          {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
           <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
             {
               callToAction && (

src/components/widgets/Note.astro

@@ -2,7 +2,7 @@
 import { Icon } from 'astro-icon';
 ---
 
-<section class="bg-primary-50 dark:bg-slate-800">
+<section class="bg-blue-50 dark:bg-slate-800">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
     <span class="font-bold">
       <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span

src/components/widgets/Stats.astro

@@ -24,7 +24,7 @@ const {
     (title || subtitle || highlight) && (
       <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
         {highlight && (
-          <p class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase">
+          <p class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase">
             {highlight}
           </p>
         )}
@@ -35,7 +35,7 @@ const {
           />
         )}
         {subtitle && (
-          <p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
+          <p class="max-w-3xl mx-auto text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
         )}
       </div>
     )
@@ -44,7 +44,7 @@ const {
     {
       items.map(({ name, value }) => (
         <div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-12 md:mb-0">
-          <div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary-800 dark:text-primary-600 font-heading">
+          <div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary dark:text-blue-600 font-heading">
             {value}
           </div>
           <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">

src/components/widgets/Steps.astro

@@ -33,11 +33,11 @@ const {
               <div class="flex flex-col items-center mr-4">
                 <div>
                   {index !== items.length - 1 ? (
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-800 dark:border-primary-700 border-2">
+                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary dark:border-blue-700 border-2">
-                      {icon && <Icon name={icon} class="w-6 h-6 text-primary-800 dark:text-slate-200" />}
+                      {icon && <Icon name={icon} class="w-6 h-6 text-primary dark:text-slate-200" />}
                     </div>
                   ) : (
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-800 border-2 bg-primary-800 dark:bg-primary-700 dark:border-primary-700">
+                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary border-2 bg-primary dark:bg-blue-700 dark:border-blue-700">
                       <Icon name={icon} class="w-6 h-6 text-white dark:text-slate-200" />
                     </div>
                   )}
@@ -45,8 +45,8 @@ const {
                 <div class="w-px h-full bg-gray-300 dark:bg-slate-500" />
               </div>
               <div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
-                {title && <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300" set:html={title} />}
+                {title && <p class="mb-2 text-xl font-bold dark:text-slate-300" set:html={title} />}
-                {description && <p class="text-gray-600 dark:text-slate-400" set:html={description} />}
+                {description && <p class="text-muted dark:text-slate-400" set:html={description} />}
               </div>
             </div>
           ))

src/components/widgets/Steps2.astro

@@ -73,13 +73,13 @@ const {
               {
                 highlight && (
                   <p
-                    class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+                    class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
                     set:html={highlight}
                   />
                 )
               }
               {title && <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
-              {subtitle && <p class="mb-8 text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
+              {subtitle && <p class="mb-8 text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
 
               <div class="w-full">
                 {
@@ -106,13 +106,13 @@ const {
                   ? items.map(({ title: title2, description, icon }, index) => (
                       <li class="flex md:-mx-4">
                         <div class="pr-4 sm:pl-4">
-                          <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-100 text-primary-800">
+                          <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-blue-100 text-primary">
                             {icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
                           </span>
                         </div>
                         <div class="pl-4">
                           <h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
-                          <p class="text-gray-500 dark:text-gray-400" set:html={description} />
+                          <p class="text-muted dark:text-gray-400" set:html={description} />
                         </div>
                       </li>
                     ))

src/content/config.ts

@@ -1,6 +1,6 @@
 import { z, defineCollection } from 'astro:content';
 
-const blog = defineCollection({
+const posts = defineCollection({
   schema: z.object({
     title: z.string(),
     description: z.string().optional(),
@@ -23,5 +23,5 @@ const blog = defineCollection({
 });
 
 export const collections = {
-  blog: blog,
+  posts: posts,
 };

src/layouts/BaseLayout.astro

@@ -21,7 +21,7 @@ const { language = 'en', textDirection = 'ltr' } = SITE;
     <MetaTags {...meta} />
   </head>
 
-  <body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-dark">
+  <body class="antialiased text-page bg-light dark:text-slate-300 tracking-tight dark:bg-dark">
     <slot />
     <BasicScripts />
     <style is:global>

src/layouts/MarkdownLayout.astro

@@ -16,7 +16,7 @@ const meta: MetaSEO = {
   <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-4xl">
     <h1 class="font-bold font-heading text-3xl md:text-4xl leading-tighter tracking-tighter">{frontmatter.title}</h1>
     <div
-      class="mx-auto prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
+      class="mx-auto prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
     >
       <slot />
     </div>

src/layouts/PageLayout.astro

@@ -17,7 +17,7 @@ const { meta } = Astro.props;
 
 <Layout {meta}>
   <Announcement />
-  <Header {...headerData} />
+  <Header {...headerData} isFixed />
   <main>
     <slot />
   </main>

src/pages/404.astro

@@ -11,10 +11,10 @@ const title = `Error 404`;
       <div class="max-w-md text-center">
         <h2 class="mb-8 font-bold text-9xl">
           <span class="sr-only">Error</span>
-          <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">404</span>
+          <span class="text-primary">404</span>
         </h2>
         <p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
-        <p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
+        <p class="mt-4 mb-8 text-lg text-muted dark:text-slate-400">
           But dont worry, you can find plenty of other things on our homepage.
         </p>
         <a rel="noopener noreferrer" href={getHomePermalink()} class="btn ml-4">Back to homepage</a>

src/pages/index.astro

@@ -8,7 +8,7 @@ import Features from '~/components/widgets/Features.astro';
 import Features2 from '~/components/widgets/Features2.astro';
 import Steps from '~/components/widgets/Steps.astro';
 import Content from '~/components/widgets/Content.astro';
-import HighlightedPosts from '~/components/blog/HighlightedPosts.astro';
+import LatestPosts from '~/components/blog/LatestPosts.astro';
 import FAQs from '~/components/widgets/FAQs.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
@@ -30,7 +30,7 @@ const meta = {
   >
     <Fragment slot="title">
       Free template for <span class="hidden lg:inline">create your website <br />with</span>
-      <span class="text-violet-700 dark:text-white highlight"> Astro v2</span> + Tailwind CSS
+      <span class="text-accent dark:text-white highlight"> Astro v2</span> + Tailwind CSS
     </Fragment>
 
     <Fragment slot="subtitle">
@@ -38,7 +38,7 @@ const meta = {
         <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 2 +
         Tailwind CSS.</span
       >
-      <span class="block mb-1 sm:hidden font-bold text-primary-600">AstroWind: Production-ready.</span> Suitable for Startups,
+      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> Suitable for Startups,
       Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
     </Fragment>
   </Hero>
@@ -102,7 +102,6 @@ const meta = {
   <Content
     highlight="Inside template"
     title="And what's inside? ..."
-    content="Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates."
     items={[
       {
         title: 'Per ei quaeque sensibus',
@@ -124,7 +123,13 @@ const meta = {
       src: import('~/assets/images/caos.jpg'),
       alt: 'Colorful Image',
     }}
-  />
+  >
+    <Fragment slot="content">
+      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
+      Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod
+      tacimates.
+    </Fragment>
+  </Content>
 
   <!-- Content Widget **************** -->
 
@@ -257,7 +262,7 @@ const meta = {
 
   <!-- HighlightedPosts Widget ******* -->
 
-  <HighlightedPosts
+  <LatestPosts
     title="Find out more content in our Blog"
     information={`The blog is used to display AstroWind documentation.
 			Each new article will be an important step that you will need to know to be an expert in creating a website using Astro + Tailwind CSS.

src/utils/blog.ts

@@ -3,7 +3,7 @@ import type { CollectionEntry } from 'astro:content';
 import type { Post } from '~/types';
 import { cleanSlug } from './permalinks';
 
-const getNormalizedPost = async (post: CollectionEntry<'blog'>): Promise<Post> => {
+const getNormalizedPost = async (post: CollectionEntry<'posts'>): Promise<Post> => {
   const { id, slug = '', data } = post;
   const { Content, remarkPluginFrontmatter } = await post.render();
 
@@ -28,7 +28,7 @@ const getNormalizedPost = async (post: CollectionEntry<'blog'>): Promise<Post> =
 };
 
 const load = async function (): Promise<Array<Post>> {
-  const posts = await getCollection('blog');
+  const posts = await getCollection('posts');
   const normalizedPosts = posts.map(async (post) => await getNormalizedPost(post));
 
   const results = (await Promise.all(normalizedPosts))
@@ -82,5 +82,5 @@ export const findLatestPosts = async ({ count }: { count?: number }): Promise<Ar
   const _count = count || 4;
   const posts = await fetchPosts();
 
-  return posts ? posts.slice(_count * -1) : [];
+  return posts ? posts.slice(0, _count) : [];
 };

tailwind.config.cjs

@@ -6,39 +6,17 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: colors.blue,
+        primary: 'var(--aw-color-primary)',
-        secondary: colors.pink,
+        secondary: 'var(--aw-color-secondary)',
+        accent: 'var(--aw-color-accent)',
       },
       fontFamily: {
-        sans: ["'InterVariable'", ...defaultTheme.fontFamily.sans],
+        sans: ['var(--aw-font-sans)', ...defaultTheme.fontFamily.sans],
+        serif: ['var(--aw-font-serif)', ...defaultTheme.fontFamily.serif],
+        heading: ['var(--aw-font-heading)', ...defaultTheme.fontFamily.sans],
       },
     },
   },
   plugins: [require('@tailwindcss/typography')],
   darkMode: 'class',
 };
-
-/* 
-
-  Alternative tailwind.config.js
-  
-  NOTE: Add this fonts to <head>
-    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap" rel="stylesheet" />
-*/
-
-// module.exports = {
-//   content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"],
-//   theme: {
-//     extend: {
-//       colors: {
-//         primary: colors.cyan,
-//         secondary: colors.lime,
-//       },
-//       fontFamily: {
-//         sans: ["'Nunito'", ...defaultTheme.fontFamily.sans],
-//       },
-//     },
-//   },
-//   plugins: [require("@tailwindcss/typography")],
-//   darkMode: "class",
-// };