Format all files with prettier: npm run format

.vscode/settings.json

@@ -1,12 +1,6 @@
 {
   "css.customData": ["./vscode.tailwind.json"],
-  "eslint.validate": [
+  "eslint.validate": ["javascript", "javascriptreact", "astro", "typescript", "typescriptreact"],
-    "javascript",
-    "javascriptreact",
-    "astro",
-    "typescript",
-    "typescriptreact"
-  ],
   "files.associations": {
     "*.mdx": "markdown"
   },

astro.config.mjs

@@ -12,17 +12,17 @@ import compress from '@playform/compress';
 
 import astrowind from './vendor/integration';
 
-import { readingTimeRemarkPlugin, responsiveTablesRehypePlugin, lazyImagesRehypePlugin } from './src/utils/frontmatter.mjs';
+import {
+  readingTimeRemarkPlugin,
+  responsiveTablesRehypePlugin,
+  lazyImagesRehypePlugin,
+} from './src/utils/frontmatter.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const hasExternalScripts = false;
 const whenExternalScripts = (items = []) =>
-  hasExternalScripts
+  hasExternalScripts ? (Array.isArray(items) ? items.map((item) => item()) : [items()]) : [];
-    ? Array.isArray(items)
-      ? items.map((item) => item())
-      : [items()]
-    : [];
 
 export default defineConfig({
   output: 'static',
@@ -70,13 +70,13 @@ export default defineConfig({
     }),
 
     astrowind({
-      config: "./src/config.yaml"
+      config: './src/config.yaml',
     }),
   ],
 
   image: {
     service: squooshImageService(),
-    domains: ["cdn.pixabay.com"],
+    domains: ['cdn.pixabay.com'],
   },
 
   markdown: {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@onwidget/astrowind",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -29,6 +29,7 @@
         "@iconify-json/tabler": "^1.1.110",
         "@playform/compress": "0.0.3",
         "@tailwindcss/typography": "^0.5.13",
+        "@types/eslint__js": "^8.42.3",
         "@types/js-yaml": "^4.0.9",
         "@types/lodash.merge": "^4.6.9",
         "@typescript-eslint/eslint-plugin": "^7.7.1",
@@ -2571,6 +2572,25 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/eslint": {
+      "version": "8.56.10",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
+      "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint__js": {
+      "version": "8.42.3",
+      "resolved": "https://registry.npmjs.org/@types/eslint__js/-/eslint__js-8.42.3.tgz",
+      "integrity": "sha512-alfG737uhmPdnvkrLdZLcEKJ/B8s9Y4hrZ+YAdzUeoArBlSUERA2E87ROfOaS4jd/C45fzOoZzidLc1IPwLqOw==",
+      "dev": true,
+      "dependencies": {
+        "@types/eslint": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "license": "MIT"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onwidget/astrowind",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.33",
   "description": "AstroWind: A free template using Astro 4.0 and Tailwind CSS. Astro starter theme.",
   "type": "module",
   "private": true,
@@ -38,6 +38,7 @@
     "@iconify-json/tabler": "^1.1.110",
     "@playform/compress": "0.0.3",
     "@tailwindcss/typography": "^0.5.13",
+    "@types/eslint__js": "^8.42.3",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash.merge": "^4.6.9",
     "@typescript-eslint/eslint-plugin": "^7.7.1",

src/components/CustomStyles.astro

@@ -17,7 +17,6 @@ import '@fontsource-variable/inter';
 // Oswald
 // 'Space Grotesk'
 // Urbanist
-
 ---
 
 <style is:inline>
@@ -61,4 +60,4 @@ import '@fontsource-variable/inter';
       color: snow;
     }
   }
-</style>
+</style>

src/components/Logo.astro

@@ -2,6 +2,8 @@
 import { SITE } from 'astrowind:config';
 ---
 
-<span class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
+<span
+  class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
+>
   🚀 {SITE?.name}
 </span>

src/components/blog/GridItem.astro

@@ -7,13 +7,12 @@ import Image from '~/components/common/Image.astro';
 import { findImage } from '~/utils/images';
 import { getPermalink } from '~/utils/permalinks';
 
-
 export interface Props {
   post: Post;
 }
 
 const { post } = Astro.props;
-const image = (await findImage(post.image));
+const image = await findImage(post.image);
 ---
 
 <article class="mb-6 transition">

src/components/blog/ListItem.astro

@@ -53,8 +53,7 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
             post.author && (
               <>
                 {' '}
-                ·{' '}
+                · <Icon name="tabler:user" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
-                <Icon name="tabler:user" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
                 <span>{post.author.replaceAll('-', ' ')}</span>
               </>
             )
@@ -70,7 +69,6 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
               </>
             )
           }
-          
         </span>
       </div>
       <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">

src/components/blog/Tags.astro

@@ -1,12 +1,12 @@
 ---
 import { getPermalink } from '~/utils/permalinks';
 
-import {  APP_BLOG } from 'astrowind:config';
+import { APP_BLOG } from 'astrowind:config';
 import type { Post } from '~/types';
 
 export interface Props {
   tags: Post['tags'];
-  class?: string;  
+  class?: string;
   title?: string | undefined;
   isCategory?: boolean;
 }
@@ -18,7 +18,11 @@ const { tags, class: className = 'text-sm', title = undefined, isCategory = fals
   tags && Array.isArray(tags) && (
     <>
       <>
-        {title !== undefined && <span class="align-super font-normal underline underline-offset-4 decoration-2 dark:text-slate-400">{title}</span>}
+        {title !== undefined && (
+          <span class="align-super font-normal underline underline-offset-4 decoration-2 dark:text-slate-400">
+            {title}
+          </span>
+        )}
       </>
       <ul class={className}>
         {tags.map((tag) => (
@@ -27,7 +31,7 @@ const { tags, class: className = 'text-sm', title = undefined, isCategory = fals
               tag.title
             ) : (
               <a
-                href={getPermalink(tag.slug, (isCategory ? 'category' : 'tag'))}
+                href={getPermalink(tag.slug, isCategory ? 'category' : 'tag')}
                 class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
               >
                 {tag.title}

src/components/common/Analytics.astro

@@ -5,6 +5,9 @@ import { ANALYTICS } from 'astrowind:config';
 
 {
   ANALYTICS?.vendors?.googleAnalytics?.id ? (
-    <GoogleAnalytics id={String(ANALYTICS.vendors.googleAnalytics.id)} partytown={ANALYTICS?.vendors?.googleAnalytics?.partytown} />
+    <GoogleAnalytics
+      id={String(ANALYTICS.vendors.googleAnalytics.id)}
+      partytown={ANALYTICS?.vendors?.googleAnalytics?.partytown}
+    />
   ) : null
 }

src/components/common/ApplyColorMode.astro

@@ -1,33 +1,33 @@
 ---
-import { UI } from "astrowind:config";
+import { UI } from 'astrowind:config';
 
 // TODO: This code is temporary
 ---
 
-<script is:inline define:vars={{ defaultTheme: UI.theme || "system" }}>
+<script is:inline define:vars={{ defaultTheme: UI.theme || 'system' }}>
   function applyTheme(theme) {
-    if (theme === "dark") {
+    if (theme === 'dark') {
-      document.documentElement.classList.add("dark");
+      document.documentElement.classList.add('dark');
     } else {
-      document.documentElement.classList.remove("dark");
+      document.documentElement.classList.remove('dark');
     }
-    const matches = document.querySelectorAll("[data-aw-toggle-color-scheme] > input");
+    const matches = document.querySelectorAll('[data-aw-toggle-color-scheme] > input');
 
     if (matches && matches.length) {
       matches.forEach((elem) => {
-        elem.checked = theme !== "dark";
+        elem.checked = theme !== 'dark';
       });
     }
   }
 
-  if ((defaultTheme && defaultTheme.endsWith(":only")) || (!localStorage.theme && defaultTheme !== "system")) {
+  if ((defaultTheme && defaultTheme.endsWith(':only')) || (!localStorage.theme && defaultTheme !== 'system')) {
-    applyTheme(defaultTheme.replace(":only", ""));
+    applyTheme(defaultTheme.replace(':only', ''));
   } else if (
-    localStorage.theme === "dark" ||
+    localStorage.theme === 'dark' ||
-    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+    (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
   ) {
-    applyTheme("dark");
+    applyTheme('dark');
   } else {
-    applyTheme("light");
+    applyTheme('light');
   }
 </script>

src/components/common/CommonMeta.astro

@@ -5,4 +5,4 @@ import { getAsset } from '~/utils/permalinks';
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-<link rel="sitemap" href={getAsset('/sitemap-index.xml')} />
+<link rel="sitemap" href={getAsset('/sitemap-index.xml')} />

src/components/common/SiteVerification.astro

@@ -1,5 +1,5 @@
 ---
-import { SITE } from "astrowind:config";
+import { SITE } from 'astrowind:config';
 ---
 
-{SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}
+{SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}

src/components/common/SocialShare.astro

@@ -12,7 +12,12 @@ const { text, url, class: className = 'inline-block' } = Astro.props;
 
 <div class={className}>
   <span class="align-super font-bold text-slate-500 dark:text-slate-400">Share:</span>
-  <button class="ml-2 rtl:ml-0 rtl:mr-2" title="Twitter Share" data-aw-social-share="twitter" data-aw-url={url} data-aw-text={text}
+  <button
+    class="ml-2 rtl:ml-0 rtl:mr-2"
+    title="Twitter Share"
+    data-aw-social-share="twitter"
+    data-aw-url={url}
+    data-aw-text={text}
     ><Icon
       name="tabler:brand-x"
       class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
@@ -24,19 +29,34 @@ const { text, url, class: className = 'inline-block' } = Astro.props;
       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 rtl:ml-0 rtl:mr-2" title="Linkedin Share" data-aw-social-share="linkedin" data-aw-url={url} data-aw-text={text}
+  <button
+    class="ml-2 rtl:ml-0 rtl:mr-2"
+    title="Linkedin Share"
+    data-aw-social-share="linkedin"
+    data-aw-url={url}
+    data-aw-text={text}
     ><Icon
       name="tabler:brand-linkedin"
       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 rtl:ml-0 rtl:mr-2" title="Whatsapp Share" data-aw-social-share="whatsapp" data-aw-url={url} data-aw-text={text}
+  <button
+    class="ml-2 rtl:ml-0 rtl:mr-2"
+    title="Whatsapp Share"
+    data-aw-social-share="whatsapp"
+    data-aw-url={url}
+    data-aw-text={text}
     ><Icon
       name="tabler:brand-whatsapp"
       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 rtl:ml-0 rtl:mr-2" title="Email Share" data-aw-social-share="mail" data-aw-url={url} data-aw-text={text}
+  <button
+    class="ml-2 rtl:ml-0 rtl:mr-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 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"

src/components/common/ToggleMenu.astro

@@ -6,16 +6,11 @@ export interface Props {
 
 const {
   label = 'Toggle Menu',
-  class:
+  class: className = 'flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group',
-    className = "flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group",
 } = Astro.props;
 ---
 
-<button
+<button class={className} aria-label={label} data-aw-toggle-menu>
-  class={className}
-  aria-label={label}
-  data-aw-toggle-menu
->
   <span class="sr-only">{label}</span>
   <slot>
     <span

src/components/ui/Background.astro

@@ -1,6 +1,6 @@
 ---
 export interface Props {
-  isDark?: boolean
+  isDark?: boolean;
 }
 
 const { isDark = false } = Astro.props;

src/components/ui/DListItem.astro

@@ -10,14 +10,13 @@
 // closing tags - it's simply contained in an enclosing div with a
 // margin left.  No need for 'dd' items.
 //
-const {
+const { dt } = Astro.props;
-  dt
-} = Astro.props;
 interface Props {
-  dt:string
+  dt: string;
 }
 
-const content:string = await Astro.slots.render('default');
+const content: string = await Astro.slots.render('default');
 ---
-<h6 set:html={dt}></h6>
+
-<div class="dd ml-8" set:html={content}/>
+<h6 set:html={dt} />
+<div class="dd ml-8" set:html={content} />

src/components/ui/Headline.astro

@@ -1,48 +1,35 @@
 ---
-import type { Headline as Props } from "~/types";
+import type { Headline as Props } from '~/types';
-import { twMerge } from "tailwind-merge";
+import { twMerge } from 'tailwind-merge';
 
 const {
-  title = await Astro.slots.render("title"),
+  title = await Astro.slots.render('title'),
-  subtitle = await Astro.slots.render("subtitle"),
+  subtitle = await Astro.slots.render('subtitle'),
   tagline,
   classes = {},
 } = Astro.props;
 
 const {
-  container: containerClass = "max-w-3xl",
+  container: containerClass = 'max-w-3xl',
-  title: titleClass = "text-3xl md:text-4xl ",
+  title: titleClass = 'text-3xl md:text-4xl ',
-  subtitle: subtitleClass = "text-xl",
+  subtitle: subtitleClass = 'text-xl',
 } = classes;
 ---
 
 {
   (title || subtitle || tagline) && (
-    <div
+    <div class={twMerge('mb-8 md:mx-auto md:mb-12 text-center', containerClass)}>
-      class={twMerge("mb-8 md:mx-auto md:mb-12 text-center", containerClass)}
-    >
       {tagline && (
-        <p
+        <p class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase" set:html={tagline} />
-          class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
-          set:html={tagline}
-        />
       )}
       {title && (
         <h2
-          class={twMerge(
+          class={twMerge('font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl', titleClass)}
-            "font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl",
-            titleClass
-          )}
           set:html={title}
         />
       )}
 
-      {subtitle && (
+      {subtitle && <p class={twMerge('mt-4 text-muted', subtitleClass)} set:html={subtitle} />}
-        <p
-          class={twMerge("mt-4 text-muted", subtitleClass)}
-          set:html={subtitle}
-        />
-      )}
     </div>
   )
 }

src/components/ui/ItemGrid.astro

@@ -24,10 +24,10 @@ const {
           columns === 4
             ? 'lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2'
             : columns === 3
-            ? 'lg:grid-cols-3 sm:grid-cols-2'
+              ? 'lg:grid-cols-3 sm:grid-cols-2'
-            : columns === 2
+              : columns === 2
-            ? 'sm:grid-cols-2 '
+                ? 'sm:grid-cols-2 '
-            : ''
+                : ''
         }`,
         containerClass
       )}
@@ -52,13 +52,7 @@ const {
                 />
               )}
               {callToAction && (
-                <div
+                <div class={twMerge(`${title || description ? 'mt-3' : ''}`, actionClass, itemClasses?.actionClass)}>
-                  class={twMerge(
-                    `${title || description ? 'mt-3' : ''}`,
-                    actionClass,
-                    itemClasses?.actionClass
-                  )}
-                >
                   <Button variant="link" {...callToAction} />
                 </div>
               )}

src/components/ui/ItemGrid2.astro

@@ -1,23 +1,18 @@
 ---
-import type { ItemGrid as Props } from "~/types";
+import type { ItemGrid as Props } from '~/types';
-import { Icon } from "astro-icon/components";
+import { Icon } from 'astro-icon/components';
-import { twMerge } from "tailwind-merge";
+import { twMerge } from 'tailwind-merge';
-import Button from "./Button.astro";
+import Button from './Button.astro';
+
+const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props;
 
 const {
-  items = [],
+  container: containerClass = '',
-  columns,
-  defaultIcon = "",
-  classes = {},
-} = Astro.props;
-
-const {
-  container: containerClass = "",
   // container: containerClass = "sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-  panel: panelClass = "",
+  panel: panelClass = '',
-  title: titleClass = "",
+  title: titleClass = '',
-  description: descriptionClass = "",
+  description: descriptionClass = '',
-  icon: defaultIconClass = "text-primary",
+  icon: defaultIconClass = 'text-primary',
 } = classes;
 ---
 
@@ -27,68 +22,32 @@ const {
       class={twMerge(
         `grid gap-8 gap-x-12 sm:gap-y-8 ${
           columns === 4
-            ? "lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"
+            ? 'lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2'
             : columns === 3
-            ? "lg:grid-cols-3 sm:grid-cols-2"
+              ? 'lg:grid-cols-3 sm:grid-cols-2'
-            : columns === 2
+              : columns === 2
-            ? "sm:grid-cols-2 "
+                ? 'sm:grid-cols-2 '
-            : ""
+                : ''
         }`,
         containerClass
       )}
     >
-      {items.map(
+      {items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
-        ({
+        <div class={twMerge('relative flex flex-col', panelClass, itemClasses?.panel)}>
-          title,
+          {(icon || defaultIcon) && (
-          description,
+            <Icon name={icon || defaultIcon} class={twMerge('mb-2 w-10 h-10', defaultIconClass, itemClasses?.icon)} />
-          icon,
+          )}
-          callToAction,
+          <div class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</div>
-          classes: itemClasses = {},
+          {description && (
-        }) => (
+            <p class={twMerge('text-muted mt-2', descriptionClass, itemClasses?.description)} set:html={description} />
-          <div
+          )}
-            class={twMerge(
+          {callToAction && (
-              "relative flex flex-col",
+            <div class="mt-2">
-              panelClass,
+              <Button {...callToAction} />
-              itemClasses?.panel
-            )}
-          >
-            {(icon || defaultIcon) && (
-              <Icon
-                name={icon || defaultIcon}
-                class={twMerge(
-                  "mb-2 w-10 h-10",
-                  defaultIconClass,
-                  itemClasses?.icon
-                )}
-              />
-            )}
-            <div
-              class={twMerge(
-                "text-xl font-bold",
-                titleClass,
-                itemClasses?.title
-              )}
-            >
-              {title}
             </div>
-            {description && (
+          )}
-              <p
+        </div>
-                class={twMerge(
+      ))}
-                  "text-muted mt-2",
-                  descriptionClass,
-                  itemClasses?.description
-                )}
-                set:html={description}
-              />
-            )}
-            {callToAction && (
-              <div class="mt-2">
-                <Button {...callToAction} />
-              </div>
-            )}
-          </div>
-        )
-      )}
     </div>
   )
 }

src/components/ui/Timeline.astro

@@ -1,7 +1,7 @@
 ---
-import { Icon } from "astro-icon/components";
+import { Icon } from 'astro-icon/components';
-import { twMerge } from "tailwind-merge";
+import { twMerge } from 'tailwind-merge';
-import type { Item } from "~/types";
+import type { Item } from '~/types';
 
 export interface Props {
   items?: Array<Item>;
@@ -12,71 +12,43 @@ export interface Props {
 const { items = [], classes = {}, defaultIcon } = Astro.props as Props;
 
 const {
-  container: containerClass = "",
+  container: containerClass = '',
-  panel: panelClass = "",
+  panel: panelClass = '',
-  title: titleClass = "",
+  title: titleClass = '',
-  description: descriptionClass = "",
+  description: descriptionClass = '',
-  icon: defaultIconClass = "text-primary dark:text-slate-200 border-primary dark:border-blue-700",
+  icon: defaultIconClass = 'text-primary dark:text-slate-200 border-primary dark:border-blue-700',
 } = classes;
 ---
 
 {
   items && items.length && (
     <div class={containerClass}>
-      {items.map(
+      {items.map(({ title, description, icon, classes: itemClasses = {} }, index = 0) => (
-        (
+        <div class={twMerge('flex', panelClass, itemClasses?.panel)}>
-          { title, description, icon, classes: itemClasses = {} },
+          <div class="flex flex-col items-center mr-4 rtl:mr-0 rtl:ml-4">
-          index = 0
+            <div>
-        ) => (
+              <div class="flex items-center justify-center">
-          <div class={twMerge("flex", panelClass, itemClasses?.panel)}>
+                {(icon || defaultIcon) && (
-            <div class="flex flex-col items-center mr-4 rtl:mr-0 rtl:ml-4">
+                  <Icon
-              <div>
+                    name={icon || defaultIcon}
-                <div class="flex items-center justify-center">
+                    class={twMerge('w-10 h-10 p-2 rounded-full border-2', defaultIconClass, itemClasses?.icon)}
-                  {(icon || defaultIcon) && (
+                  />
-                    <Icon
+                )}
-                      name={icon || defaultIcon}
-                      class={twMerge(
-                        "w-10 h-10 p-2 rounded-full border-2",
-                        defaultIconClass,
-                        itemClasses?.icon
-                      )}
-                    />
-                  )}
-                </div>
               </div>
-              {index !== items.length - 1 && (
-                <div class="w-px h-full bg-black/10 dark:bg-slate-400/50" />
-              )}
-            </div>
-            <div
-              class={`pt-1 ${
-                index !== items.length - 1 ? "pb-8" : ""
-              }`}
-            >
-              {title && (
-                <p
-                  class={twMerge(
-                    "text-xl font-bold",
-                    titleClass,
-                    itemClasses?.title
-                  )}
-                  set:html={title}
-                />
-              )}
-              {description && (
-                <p
-                  class={twMerge(
-                    "text-muted mt-2",
-                    descriptionClass,
-                    itemClasses?.description
-                  )}
-                  set:html={description}
-                />
-              )}
             </div>
+            {index !== items.length - 1 && <div class="w-px h-full bg-black/10 dark:bg-slate-400/50" />}
           </div>
-        )
+          <div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
-      )}
+            {title && <p class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)} set:html={title} />}
+            {description && (
+              <p
+                class={twMerge('text-muted mt-2', descriptionClass, itemClasses?.description)}
+                set:html={description}
+              />
+            )}
+          </div>
+        </div>
+      ))}
     </div>
   )
 }

src/components/ui/WidgetWrapper.astro

@@ -1,15 +1,15 @@
 ---
-import type { HTMLTag } from "astro/types";
+import type { HTMLTag } from 'astro/types';
-import type { Widget } from "~/types";
+import type { Widget } from '~/types';
-import { twMerge } from "tailwind-merge";
+import { twMerge } from 'tailwind-merge';
-import Background from "./Background.astro";
+import Background from './Background.astro';
 
 export interface Props extends Widget {
   containerClass?: string;
-  ["as"]?: HTMLTag;
+  ['as']?: HTMLTag;
 }
 
-const { id, isDark = false, containerClass = "", bg, as = "section" } = Astro.props;
+const { id, isDark = false, containerClass = '', bg, as = 'section' } = Astro.props;
 
 const WrapperTag = as;
 ---
@@ -22,7 +22,7 @@ const WrapperTag = as;
   </div>
   <div
     class:list={[
-      twMerge("relative mx-auto max-w-7xl px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default", containerClass),
+      twMerge('relative mx-auto max-w-7xl px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default', containerClass),
       { dark: isDark },
     ]}
   >

src/components/widgets/BlogHighlightedPosts.astro

@@ -1,12 +1,12 @@
 ---
-import { APP_BLOG } from "astrowind:config";
+import { APP_BLOG } from 'astrowind:config';
 
-import Grid from "~/components/blog/Grid.astro";
+import Grid from '~/components/blog/Grid.astro';
 
-import { getBlogPermalink } from "~/utils/permalinks";
+import { getBlogPermalink } from '~/utils/permalinks';
-import { findPostsByIds } from "~/utils/blog";
+import { findPostsByIds } from '~/utils/blog';
-import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Widget } from "~/types";
+import type { Widget } from '~/types';
 
 export interface Props extends Widget {
   title?: string;
@@ -17,16 +17,16 @@ export interface Props extends Widget {
 }
 
 const {
-  title = await Astro.slots.render("title"),
+  title = await Astro.slots.render('title'),
-  linkText = "View all posts",
+  linkText = 'View all posts',
   linkUrl = getBlogPermalink(),
-  information = await Astro.slots.render("information"),
+  information = await Astro.slots.render('information'),
   postIds = [],
 
   id,
   isDark = false,
   classes = {},
-  bg = await Astro.slots.render("bg"),
+  bg = await Astro.slots.render('bg'),
 } = Astro.props;
 
 const posts = APP_BLOG.isEnabled ? await findPostsByIds(postIds) : [];

src/components/widgets/BlogLatestPosts.astro

@@ -1,13 +1,13 @@
 ---
-import { APP_BLOG } from "astrowind:config";
+import { APP_BLOG } from 'astrowind:config';
 
-import Grid from "~/components/blog/Grid.astro";
+import Grid from '~/components/blog/Grid.astro';
 
-import { getBlogPermalink } from "~/utils/permalinks";
+import { getBlogPermalink } from '~/utils/permalinks';
-import { findLatestPosts } from "~/utils/blog";
+import { findLatestPosts } from '~/utils/blog';
-import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Widget } from "~/types";
+import type { Widget } from '~/types';
-import Button from "../ui/Button.astro";
+import Button from '../ui/Button.astro';
 
 export interface Props extends Widget {
   title?: string;
@@ -18,16 +18,16 @@ export interface Props extends Widget {
 }
 
 const {
-  title = await Astro.slots.render("title"),
+  title = await Astro.slots.render('title'),
-  linkText = "View all posts",
+  linkText = 'View all posts',
   linkUrl = getBlogPermalink(),
-  information = await Astro.slots.render("information"),
+  information = await Astro.slots.render('information'),
   count = 4,
 
   id,
   isDark = false,
   classes = {},
-  bg = await Astro.slots.render("bg"),
+  bg = await Astro.slots.render('bg'),
 } = Astro.props;
 
 const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count }) : [];
@@ -44,7 +44,10 @@ const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count }) : [];
               set:html={title}
             />
             {APP_BLOG.list.isEnabled && linkText && linkUrl && (
-              <Button variant="link" href={linkUrl}> {linkText} »</Button>
+              <Button variant="link" href={linkUrl}>
+                {' '}
+                {linkText} »
+              </Button>
             )}
           </div>
         )}

src/components/widgets/Footer.astro

@@ -38,12 +38,12 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
           {
             secondaryLinks.map(({ text, href }, index) => (
               <>
-              {index !== 0 ? ' · ' : ''}
+                {index !== 0 ? ' · ' : ''}
-              <a
+                <a
-                class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
+                  class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
-                href={href}
+                  href={href}
-                set:html={text}
+                  set:html={text}
-              />
+                />
               </>
             ))
           }

src/components/widgets/HeroText.astro

@@ -27,12 +27,14 @@ const {
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
     <div class="py-12 md:py-20 pb-8 md:pb-8">
       <div class="text-center max-w-5xl mx-auto">
-        {tagline && (
+        {
-          <p
+          tagline && (
-            class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
+            <p
-            set:html={tagline}
+              class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
-          />
+              set:html={tagline}
-        )}
+            />
+          )
+        }
         {
           title && (
             <h1

src/components/widgets/Pricing.astro

@@ -68,7 +68,8 @@ const {
                       {typeof callToAction === 'string' ? (
                         <Fragment set:html={callToAction} />
                       ) : (
-                        callToAction && callToAction.href && <Button {...hasRibbon ? { variant:'primary' } : {}} {...callToAction}/>
+                        callToAction &&
+                        callToAction.href && <Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction} />
                       )}
                     </div>
                   )}

src/components/widgets/Stats.astro

@@ -23,7 +23,7 @@ const {
     {
       stats &&
         stats.map(({ amount, title, icon }) => (
-        <div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] text-center md:border-r md:last:border-none dark:md:border-slate-500">
+          <div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] text-center md:border-r md:last:border-none dark:md:border-slate-500">
             {icon && (
               <div class="flex items-center justify-center mx-auto mb-4 text-primary">
                 <Icon name={icon} class="w-10 h-10" />

src/components/widgets/Steps2.astro

@@ -42,9 +42,7 @@ const {
           ) : (
             callToAction &&
             callToAction.text &&
-            callToAction.href && (
+            callToAction.href && <Button variant="primary" {...callToAction} class="mb-12 w-auto" />
-              <Button variant="primary" {...callToAction} class="mb-12 w-auto"/>
-            )
           )
         }
       </div>

src/content/post/astrowind-template-in-depth.mdx

@@ -199,7 +199,7 @@ const { subtitle = await Astro.slots.render('subtitle') } = Astro.props;
 
 //...
 {subtitle && <p class="text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
- //...
+//...
 ```
 
 There's a lot to wrap your head around, here.

src/content/post/markdown-elements-demo-post.mdx

@@ -197,8 +197,8 @@ import Logo from "~/components/Logo.astro";
 
 <Tweet id="https://twitter.com/Steve8708/status/1598713161339015173" />
 
-### Vimeo 
+### Vimeo
 
 <Vimeo id="178430038" />
 
-[[Top]](#top)
+[[Top]](#top)

src/layouts/LandingLayout.astro

@@ -23,7 +23,7 @@ const { metadata } = Astro.props;
         actions={[
           {
             text: 'Download',
-            href: 'https://github.com/onwidget/astrowind'
+            href: 'https://github.com/onwidget/astrowind',
           },
         ]}
         showToggleTheme
@@ -32,4 +32,4 @@ const { metadata } = Astro.props;
     </slot>
   </Fragment>
   <slot />
-</PageLayout>
+</PageLayout>

src/layouts/MarkdownLayout.astro

@@ -5,8 +5,8 @@ import type { MetaData } from '~/types';
 
 export interface Props {
   frontmatter: {
-    title?: string
+    title?: string;
-  }
+  };
 }
 
 const { frontmatter } = Astro.props;

src/layouts/PageLayout.astro

@@ -28,4 +28,4 @@ const { metadata } = Astro.props;
   <slot name="footer">
     <Footer {...footerData} />
   </slot>
-</Layout>
+</Layout>

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

@@ -36,7 +36,9 @@ const metadata = merge(
     },
     openGraph: {
       type: 'article',
-      ...(image ? { images: [{ url: image, width: (image as ImageMetadata)?.width, height: (image as ImageMetadata)?.height }] } : {}),
+      ...(image
+        ? { images: [{ url: image, width: (image as ImageMetadata)?.width, height: (image as ImageMetadata)?.height }] }
+        : {}),
     },
   },
   { ...(post?.metadata ? { ...post.metadata, canonical: post.metadata?.canonical || url } : {}) }

src/pages/homes/mobile-app.astro

@@ -65,7 +65,7 @@ const metadata = {
       <span class="hidden sm:inline">
         Unlock boundless creativity at your fingertips: your gateway to innovative design.
       </span>
-       Download now and embark on a journey to elevate your projects like never before.
+      Download now and embark on a journey to elevate your projects like never before.
     </Fragment>
 
     <div slot="actions" class="flex max-w-sm gap-4">

src/pages/homes/personal.astro

@@ -45,12 +45,12 @@ const metadata = {
     id="hero"
     title="Sarah Johnson"
     tagline="Personal Web Demo"
-    actions={[{ variant: "primary", text: 'Hire me', href: getPermalink("/contact#form") }]}
+    actions={[{ variant: 'primary', text: 'Hire me', href: getPermalink('/contact#form') }]}
   >
     <Fragment slot="subtitle">
-      I'm a Graphic Designer passionate about crafting visual stories. <br /> With 5 years of experience and a degree
+      I'm a Graphic Designer passionate about crafting visual stories. <br /> With 5 years of experience and a degree from
-      from New York University's School of Design. I infuse vitality into brands and designs, transforming concepts into
+      New York University's School of Design. I infuse vitality into brands and designs, transforming concepts into captivating
-      captivating realities.
+      realities.
     </Fragment>
   </Hero>
 
@@ -382,11 +382,13 @@ const metadata = {
   <CallToAction
     title="Let's create together"
     subtitle="Ready to transform your vision into captivating designs?"
-    actions={[{
+    actions={[
-      variant:"primary",
+      {
-      text: 'Hire me',
+        variant: 'primary',
-      href: '/',
+        text: 'Hire me',
-    }]}
+        href: '/',
+      },
+    ]}
   />
 
   <!-- BlogLatestPost Widget **************** -->

src/pages/homes/saas.astro

@@ -60,8 +60,7 @@ const metadata = {
       <span class="hidden sm:inline">
         Elevate your website creation process with <span class="font-semibold">AstroWind</span>'s SaaS solutions.</span
       >
-       Seamlessly blend the power of Astro 4.0 and Tailwind CSS to craft websites that resonate with your brand and
+      Seamlessly blend the power of Astro 4.0 and Tailwind CSS to craft websites that resonate with your brand and audience.
-      audience.
     </Fragment>
   </Hero2>
 

src/pages/homes/startup.astro

@@ -47,7 +47,12 @@ const metadata = {
 
     <Fragment slot="image">
       <YouTube id="gxBkghlglTg" title="Astro just Launched.... Could it be the ultimate web framework?" />
-      <style is:inline>lite-youtube { margin: 0 auto; max-width: 100%; }</style>
+      <style is:inline>
+        lite-youtube {
+          margin: 0 auto;
+          max-width: 100%;
+        }
+      </style>
     </Fragment>
   </Hero>
 

src/pages/index.astro

@@ -45,8 +45,8 @@ const metadata = {
         + Tailwind CSS.</span
       >
       <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span>
-       Suitable for Startups, Small Business, SaaS websites, Professional Portfolios, Marketing websites, Landing Pages
+      Suitable for Startups, Small Business, SaaS websites, Professional Portfolios, Marketing websites, Landing Pages &
-      & Blogs.
+      Blogs.
     </Fragment>
   </Hero>
 
@@ -131,7 +131,7 @@ const metadata = {
   >
     <Fragment slot="content">
       <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Building on modern foundations</h3>
-       Gain a competitive advantage by incorporating industry leading practices
+      Gain a competitive advantage by incorporating industry leading practices
     </Fragment>
 
     <Fragment slot="bg">

src/pages/services.astro

@@ -18,7 +18,7 @@ const metadata = {
     tagline="Services"
     title="Elevate your projects with our stunning templates"
     subtitle="Explore our meticulously crafted templates tailored to various industries and purposes. From captivating presentations to functional website designs, we offer the tools you need to succeed."
-    actions={[{ variant:"primary", target: '_blank', text: 'Start exploring', href: '/' }]}
+    actions={[{ variant: 'primary', target: '_blank', text: 'Start exploring', href: '/' }]}
     image={{
       src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80',
       alt: 'AstroWind Hero Image',
@@ -211,11 +211,13 @@ const metadata = {
   <!-- CallToAction Widget *********** -->
 
   <CallToAction
-    actions={[{
+    actions={[
-      variant: "primary",
+      {
-      text: 'Start exploring',
+        variant: 'primary',
-      href: '/',
+        text: 'Start exploring',
-    }]}
+        href: '/',
+      },
+    ]}
     title="Dive into our template collection"
     subtitle="Whether you're in business, design, or education, our templates are here to elevate your projects."
   />

src/types.d.ts

@@ -24,7 +24,7 @@ export interface Post {
   image?: ImageMetadata | string;
 
   /**  */
-  category?: Taxonomy
+  category?: Taxonomy;
   /**  */
   tags?: Taxonomy[];
   /**  */
@@ -213,7 +213,7 @@ export interface Form {
 }
 
 // WIDGETS
-export interface Hero extends Omit<Headline,"classes">, Widget {
+export interface Hero extends Omit<Headline, 'classes'>, Widget {
   content?: string;
   image?: string | unknown;
   callToAction1?: CallToAction;
@@ -221,29 +221,29 @@ export interface Hero extends Omit<Headline,"classes">, Widget {
   isReversed?: boolean;
 }
 
-export interface Team extends Omit<Headline,"classes">, Widget {
+export interface Team extends Omit<Headline, 'classes'>, Widget {
   team?: Array<TeamMember>;
 }
 
-export interface Stats extends Omit<Headline,"classes">, Widget {
+export interface Stats extends Omit<Headline, 'classes'>, Widget {
   stats?: Array<Stat>;
 }
 
-export interface Pricing extends Omit<Headline,"classes">, Widget {
+export interface Pricing extends Omit<Headline, 'classes'>, Widget {
   prices?: Array<Price>;
 }
 
-export interface Testimonials extends Omit<Headline,"classes">, Widget {
+export interface Testimonials extends Omit<Headline, 'classes'>, Widget {
   testimonials?: Array<Testimonial>;
   callToAction?: CallToAction;
 }
 
-export interface Brands extends Omit<Headline,"classes">, Widget {
+export interface Brands extends Omit<Headline, 'classes'>, Widget {
   icons?: Array<string>;
   images?: Array<Image>;
 }
 
-export interface Features extends Omit<Headline,"classes">, Widget {
+export interface Features extends Omit<Headline, 'classes'>, Widget {
   image?: string | unknown;
   video?: Video;
   items?: Array<Item>;
@@ -256,14 +256,14 @@ export interface Features extends Omit<Headline,"classes">, Widget {
   isAfterContent?: boolean;
 }
 
-export interface Faqs extends Omit<Headline,"classes">, Widget {
+export interface Faqs extends Omit<Headline, 'classes'>, Widget {
   iconUp?: string;
   iconDown?: string;
   items?: Array<Item>;
   columns?: number;
 }
 
-export interface Steps extends Omit<Headline,"classes">, Widget {
+export interface Steps extends Omit<Headline, 'classes'>, Widget {
   items: Array<{
     title: string;
     description?: string;
@@ -275,7 +275,7 @@ export interface Steps extends Omit<Headline,"classes">, Widget {
   isReversed?: boolean;
 }
 
-export interface Content extends Omit<Headline,"classes">, Widget {
+export interface Content extends Omit<Headline, 'classes'>, Widget {
   content?: string;
   image?: string | unknown;
   items?: Array<Item>;
@@ -285,4 +285,4 @@ export interface Content extends Omit<Headline,"classes">, Widget {
   callToAction?: CallToAction;
 }
 
-export interface Contact extends Omit<Headline,"classes">, Form, Widget {}
+export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {}

src/utils/frontmatter.mjs

@@ -1,6 +1,6 @@
 import getReadingTime from 'reading-time';
 import { toString } from 'mdast-util-to-string';
-import lazyLoadPlugin from 'rehype-plugin-image-native-lazy-loading'
+import lazyLoadPlugin from 'rehype-plugin-image-native-lazy-loading';
 
 export function readingTimeRemarkPlugin() {
   return function (tree, file) {
@@ -36,4 +36,4 @@ export function responsiveTablesRehypePlugin() {
   };
 }
 
-export const lazyImagesRehypePlugin = lazyLoadPlugin
+export const lazyImagesRehypePlugin = lazyLoadPlugin;

vendor/README.md

@@ -1,4 +1,4 @@
 This folder will become an integration for **AstroWind**.
 
 We are working to allow updates to template instances.
-These are changes on the way to new **AstroWind v2**
+These are changes on the way to new **AstroWind v2**

vendor/integration/index.mjs

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import os from 'node:os';
 
-import configBuilder from "./utils/configBuilder"
+import configBuilder from './utils/configBuilder';
 import loadConfig from './utils/loadConfig';
 
 const tasksIntegration = ({ config: _themeConfig = 'src/config.yaml' } = {}) => {
@@ -17,10 +17,9 @@ const tasksIntegration = ({ config: _themeConfig = 'src/config.yaml' } = {}) =>
         // isRestart,
         logger,
         updateConfig,
-        addWatchFile
+        addWatchFile,
       }) => {
-
+        const buildLogger = logger.fork('astrowind');
-        const buildLogger = logger.fork("astrowind");
 
         const virtualModuleId = 'astrowind:config';
         const resolvedVirtualModuleId = '\0' + virtualModuleId;
@@ -60,12 +59,12 @@ const tasksIntegration = ({ config: _themeConfig = 'src/config.yaml' } = {}) =>
           },
         });
 
-        if (typeof _themeConfig === "string") {
+        if (typeof _themeConfig === 'string') {
           addWatchFile(new URL(_themeConfig, config.root));
 
-          buildLogger.info(`Astrowind \`${_themeConfig}\` has been loaded.`)
+          buildLogger.info(`Astrowind \`${_themeConfig}\` has been loaded.`);
         } else {
-          buildLogger.info(`Astrowind config has been loaded.`)
+          buildLogger.info(`Astrowind config has been loaded.`);
         }
       },
       'astro:config:done': async ({ config }) => {
@@ -73,9 +72,8 @@ const tasksIntegration = ({ config: _themeConfig = 'src/config.yaml' } = {}) =>
       },
 
       'astro:build:done': async ({ logger }) => {
-
+        const buildLogger = logger.fork('astrowind');
-        const buildLogger = logger.fork("astrowind");
+        buildLogger.info('Updating `robots.txt` with `sitemap-index.xml` ...');
-        buildLogger.info("Updating `robots.txt` with `sitemap-index.xml` ...")
 
         try {
           const outDir = cfg.outDir;

vendor/integration/types.d.ts

@@ -1,10 +1,10 @@
 declare module 'astrowind:config' {
-  import type { SiteConfig, I18NConfig, MetaDataConfig, AppBlogConfig, UIConfig, AnalyticsConfig } from "./config"
+  import type { SiteConfig, I18NConfig, MetaDataConfig, AppBlogConfig, UIConfig, AnalyticsConfig } from './config';
 
   export const SITE: SiteConfig;
-  export const I18N : I18NConfig;
+  export const I18N: I18NConfig;
   export const METADATA: MetaDataConfig;
-  export const APP_BLOG : AppBlogConfig;
+  export const APP_BLOG: AppBlogConfig;
-  export const UI : UIConfig;
+  export const UI: UIConfig;
-  export const ANALYTICS : AnalyticsConfig;
+  export const ANALYTICS: AnalyticsConfig;
-}
+}

vendor/integration/utils/loadConfig.ts

@@ -4,7 +4,7 @@ import yaml from 'js-yaml';
 const loadConfig = async (configPathOrData: string | object) => {
   if (typeof configPathOrData === 'string') {
     const content = fs.readFileSync(configPathOrData, 'utf8');
-    if (configPathOrData.endsWith(".yaml") || configPathOrData.endsWith(".yml")) {
+    if (configPathOrData.endsWith('.yaml') || configPathOrData.endsWith('.yml')) {
       return yaml.load(content);
     }
     return content;