Refactor components structure

src/components/atoms/ExtraMetaTags.astro

@@ -0,0 +1,2 @@
+---
+---

src/components/atoms/Fonts.astro

@@ -0,0 +1,7 @@
+---
+---
+
+<!-- Google Fonts -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />

src/components/core/MetaTags.astro

@@ -6,6 +6,8 @@ import GoogleAnalytics from "~/components/core/GoogleAnalytics.astro";
 import defaultImageSrc from "~/assets/images/default.png";
 
 import { SITE } from "~/config.mjs";
+import Fonts from "../atoms/Fonts.astro";
+import ExtraMetaTags from "../atoms/ExtraMetaTags.astro";
 
 const { src: defaultImage } = await getImage({
   src: defaultImageSrc,
@@ -59,13 +61,12 @@ const image =
 <meta name="twitter:description" content={description} />
 {image && <meta name="twitter:image" content={image} />}
 
-<!-- Google Fonts -->
+<Fonts />
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
 
 <!-- Google Site Verification -->
 {SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}
 
 <!-- Google Analytics -->
 {SITE.googleAnalyticsId && <GoogleAnalytics id={SITE.googleAnalyticsId} partytown={true} />}
+
+<ExtraMetaTags />

src/components/core/ToggleMenu.astro

@@ -0,0 +1,28 @@
+---
+import { Icon } from "astro-icon";
+
+const {
+  label = "Toggle Menu",
+  class:
+    className = "ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 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 transition",
+  iconClass = "w-6 h-6",
+  iconName = "tabler:menu",
+} = Astro.props;
+---
+
+<button type="button" class={className} aria-label={label} data-aw-toggle-menu>
+  <Icon name={iconName} class={iconClass} optimize={false} />
+</button>
+
+<style is:global>
+  [data-aw-toggle-menu] path {
+    @apply transition;
+  }
+  [data-aw-toggle-menu].expanded g > path:first-child {
+    @apply -rotate-45 translate-y-[15px] translate-x-[-3px];
+  }
+
+  [data-aw-toggle-menu].expanded g > path:last-child {
+    @apply rotate-45 translate-y-[-8px] translate-x-[14px];
+  }
+</style>

src/components/core/ToggleTheme.astro

@@ -0,0 +1,15 @@
+---
+import { Icon } from "astro-icon";
+
+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",
+  iconClass = "w-6 h-6",
+  iconName = "tabler:sun",
+} = Astro.props;
+---
+
+<button type="button" class={className} aria-label={label} data-aw-toggle-color-scheme>
+  <Icon name={iconName} class={iconClass} />
+</button>

src/components/widgets/CallToAction.astro

@@ -23,7 +23,7 @@ const {} = Astro.props;
             target="_blank"
             rel="noopener"
           >
-            <Icon name="tabler:download" class="w-5 h-5 mr-1 hidden sm:inline-block" /> Get template
+            <Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5 hidden sm:inline-block" /> Get template
           </a>
         </div>
       </div>

src/components/widgets/Features2.astro

@@ -70,7 +70,7 @@ const items = [
                           <path
                             class="stroke-current text-primary-300"
                             d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
-                          ></path>
+                          />
                         </g>
                       </g>
                     </svg>

src/components/widgets/Features3.astro

@@ -1,5 +1,6 @@
 ---
 import { Icon } from "astro-icon";
+
 const {} = Astro.props;
 ---
 
@@ -27,7 +28,7 @@ const {} = Astro.props;
                   target="_blank"
                   rel="noopener"
                 >
-                  <Icon name="tabler:download" class="w-5 h-5 mr-1 hidden sm:inline-block" /> Get template
+                  <Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5 hidden sm:inline-block" /> Get template
                 </a>
               </div>
             </div>

src/components/widgets/Footer.astro

@@ -173,7 +173,7 @@ const {} = Astro.props;
             aria-label="Twitter"
             href="#"
           >
-            <Icon name="tabler:brand-twitter" class="w-5 h-5"  />
+            <Icon name="tabler:brand-twitter" class="w-5 h-5" />
           </a>
         </li>
         <li>
@@ -182,7 +182,7 @@ const {} = Astro.props;
             aria-label="Instagram"
             href="#"
           >
-            <Icon name="tabler:brand-instagram" class="w-5 h-5"  />
+            <Icon name="tabler:brand-instagram" class="w-5 h-5" />
           </a>
         </li>
         <li>
@@ -191,7 +191,7 @@ const {} = Astro.props;
             aria-label="Facebook"
             href="#"
           >
-            <Icon name="tabler:brand-facebook" class="w-5 h-5"  />
+            <Icon name="tabler:brand-facebook" class="w-5 h-5" />
           </a>
         </li>
         <li>
@@ -200,7 +200,7 @@ const {} = Astro.props;
             aria-label="RSS"
             href="/rss.xml"
           >
-            <Icon name="tabler:rss" class="w-5 h-5"  />
+            <Icon name="tabler:rss" class="w-5 h-5" />
           </a>
         </li>
         <li>
@@ -209,7 +209,7 @@ const {} = Astro.props;
             aria-label="Github"
             href="https://github.com/onwidget/astrowind"
           >
-            <Icon name="tabler:brand-github" class="w-5 h-5"  />
+            <Icon name="tabler:brand-github" class="w-5 h-5" />
           </a>
         </li>
       </ul>

src/components/widgets/Header.astro

@@ -1,6 +1,8 @@
 ---
 import { Icon } from "astro-icon";
-import Logo from "~/components/widgets/Logo.astro";
+import Logo from "~/components/atoms/Logo.astro";
+import ToggleTheme from "../core/ToggleTheme.astro";
+import ToggleMenu from "../core/ToggleMenu.astro";
 
 import { getPermalink, getBlogPermalink, getHomePermalink } from "~/utils/permalinks";
 
@@ -16,21 +18,8 @@ const {} = Astro.props;
         <Logo />
       </a>
       <div class="flex items-center md:hidden">
-        <button
+        <ToggleTheme />
-          type="button"
+        <ToggleMenu />
-          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"
-          aria-label="Toggle between Dark and Light mode"
-          data-aw-toggle-color-scheme
-        >
-          <Icon name="tabler:sun" class="w-6 h-6" />
-        </button>
-        <button
-          class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 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 transition"
-          aria-label="Toggle Menu"
-          data-aw-toggle-menu
-        >
-          <Icon name="tabler:menu" class="w-6 h-6" optimize={false} />
-        </button>
       </div>
     </div>
     <nav
@@ -72,14 +61,7 @@ const {} = Astro.props;
       </ul>
       <div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
         <div class="hidden items-center md:flex">
-          <button
+          <ToggleTheme iconClass="w-5 h-5" />
-            type="button"
-            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"
-            aria-label="Toggle between Dark and Light mode"
-            data-aw-toggle-color-scheme
-          >
-            <Icon name="tabler:sun" class="w-5 h-5" />
-          </button>
           <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"
             aria-label="RSS Feed"
@@ -99,16 +81,3 @@ const {} = Astro.props;
     </nav>
   </div>
 </header>
-
-<style is:global>
-  [data-aw-toggle-menu] path {
-    @apply transition;
-  }
-  [data-aw-toggle-menu].expanded g > path:first-child {
-    @apply -rotate-45 translate-y-[15px] translate-x-[-3px];
-  }
-
-  [data-aw-toggle-menu].expanded g > path:last-child {
-    @apply rotate-45 translate-y-[-8px] translate-x-[14px];
-  }
-</style>

src/components/widgets/Hero.astro

@@ -31,7 +31,7 @@ const {} = Astro.props;
                 target="_blank"
                 rel="noopener"
               >
-                <Icon name="tabler:download" class="w-5 h-5 mr-1 hidden sm:inline-block" /> Get template
+                <Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5 hidden sm:inline-block" /> Get template
               </a>
             </div>
             <div>

src/components/widgets/blog/List.astro

@@ -1,5 +1,5 @@
 ---
-import BlogListItem from "~/components/widgets/BlogListItem.astro";
+import Item from "~/components/widgets/blog/ListItem.astro";
 
 const { posts } = Astro.props;
 ---
@@ -8,7 +8,7 @@ const { posts } = Astro.props;
   {
     posts.map((post) => (
       <li class="mb-10 md:mb-16">
-        <BlogListItem post={post} />
+        <Item post={post} />
       </li>
     ))
   }

src/components/widgets/blog/ListItem.astro

@@ -1,6 +1,6 @@
 ---
 import Picture from "~/components/core/Picture.astro";
-import PostTags from "~/components/widgets/PostTags.astro";
+import PostTags from "~/components/atoms/Tags.astro";
 
 import { getPermalink } from "~/utils/permalinks";
 import { findImage } from "~/utils/images";

src/components/widgets/blog/SinglePost.astro

@@ -1,6 +1,7 @@
 ---
 import Picture from "~/components/core/Picture.astro";
-import PostTags from "~/components/widgets/PostTags.astro";
+import PostTags from "~/components/atoms/Tags.astro";
+
 import { getFormattedDate } from "~/utils/utils";
 
 const { post } = Astro.props;

src/pages/[...blog]/[...page].astro

@@ -2,8 +2,8 @@
 import { SITE, BLOG } from "~/config.mjs";
 
 import Layout from "~/layouts/BlogLayout.astro";
-import BlogList from "~/components/widgets/BlogList.astro";
+import BlogList from "~/components/widgets/blog/List.astro";
-import Pagination from "~/components/widgets/Pagination.astro";
+import Pagination from "~/components/atoms/Pagination.astro";
 
 import { fetchPosts } from "~/utils/posts";
 import { getCanonical, getPermalink, BLOG_BASE } from "~/utils/permalinks";

src/pages/[...blog]/[slug].astro

@@ -2,7 +2,7 @@
 import { SITE, BLOG } from "~/config.mjs";
 
 import Layout from "~/layouts/PageLayout.astro";
-import BlogPost from "~/components/widgets/BlogPost.astro";
+import SinglePost from "~/components/widgets/blog/SinglePost.astro";
 
 import { getCanonical, getPermalink, cleanSlug, BLOG_BASE } from "~/utils/permalinks";
 import { fetchPosts } from "~/utils/posts";
@@ -30,5 +30,5 @@ const meta = {
 ---
 
 <Layout meta={meta}>
-  <BlogPost post={{ ...post, image: meta.image }} />
+  <SinglePost post={{ ...post, image: meta.image }} />
 </Layout>

src/pages/[...categories]/[category]/[...page].astro

@@ -2,8 +2,8 @@
 import { SITE, BLOG } from "~/config.mjs";
 
 import Layout from "~/layouts/BlogLayout.astro";
-import BlogList from "~/components/widgets/BlogList.astro";
+import BlogList from "~/components/widgets/blog/List.astro";
-import Pagination from "~/components/widgets/Pagination.astro";
+import Pagination from "~/components/atoms/Pagination.astro";
 
 import { fetchPosts } from "~/utils/posts";
 import { getCanonical, getPermalink, cleanSlug, CATEGORY_BASE } from "~/utils/permalinks";

src/pages/[...tags]/[tag]/[...page].astro

@@ -2,8 +2,8 @@
 import { SITE, BLOG } from "~/config.mjs";
 
 import Layout from "~/layouts/BlogLayout.astro";
-import BlogList from "~/components/widgets/BlogList.astro";
+import BlogList from "~/components/widgets/blog/List.astro";
-import Pagination from "~/components/widgets/Pagination.astro";
+import Pagination from "~/components/atoms/Pagination.astro";
 
 import { fetchPosts } from "~/utils/posts";
 import { getCanonical, getPermalink, cleanSlug, TAG_BASE } from "~/utils/permalinks";

src/pages/index.astro

@@ -4,14 +4,14 @@ import { getCanonical, getHomePermalink } from "~/utils/permalinks";
 import Layout from "~/layouts/PageLayout.astro";
 
 import Hero from "~/components/widgets/Hero.astro";
-import BasicCTA from "~/components/widgets/BasicCTA.astro";
+import Features from "~/components/widgets/Features.astro";
-import BasicFeatures from "~/components/widgets/BasicFeatures.astro";
+import Features2 from "~/components/widgets/Features2.astro";
-import StepsFeatures from "~/components/widgets/StepsFeatures.astro";
+import Steps from "~/components/widgets/Steps.astro";
+import Features3 from "~/components/widgets/Features3.astro";
+import HighlightedPosts from "~/components/widgets/blog/HighlightedPosts.astro";
 import FAQs from "~/components/widgets/FAQs.astro";
-import TwoColsFeatures from "~/components/widgets/TwoColsFeatures.astro";
-import StepsLeft from "~/components/widgets/StepsLeft.astro";
-import HighlightedPosts from "~/components/widgets/HighlightedPosts.astro";
 import Stats from "~/components/widgets/Stats.astro";
+import CallToAction from "~/components/widgets/CallToAction.astro";
 
 const meta = {
   title: SITE.title,
@@ -22,12 +22,12 @@ const meta = {
 
 <Layout meta={meta}>
   <Hero />
-  <BasicFeatures />
+  <Features />
-  <StepsLeft />
+  <Steps />
-  <TwoColsFeatures />
+  <Features2 />
-  <StepsFeatures />
+  <Features3 />
   <HighlightedPosts />
   <FAQs />
   <Stats />
-  <BasicCTA />
+  <CallToAction />
 </Layout>