Format all files with prettier: npm run format

.vscode/settings.json

@@ -1,12 +1,6 @@
 {
   "css.customData": ["./vscode.tailwind.json"],
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "astro",
-    "typescript",
-    "typescriptreact"
-  ],
+  "eslint.validate": ["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
-    ? Array.isArray(items)
-      ? items.map((item) => item())
-      : [items()]
-    : [];
+  hasExternalScripts ? (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.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") {
-      document.documentElement.classList.add("dark");
+    if (theme === '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")) {
-    applyTheme(defaultTheme.replace(":only", ""));
+  if ((defaultTheme && defaultTheme.endsWith(':only')) || (!localStorage.theme && defaultTheme !== 'system')) {
+    applyTheme(defaultTheme.replace(':only', ''));
   } else if (
-    localStorage.theme === "dark" ||
-    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+    localStorage.theme === 'dark' ||
+    (!('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:
-    className = "flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group",
+  class: className = 'flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group',
 } = Astro.props;
 ---
 
-<button
-  class={className}
-  aria-label={label}
-  data-aw-toggle-menu
->
+<button 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 {
-  dt
-} = Astro.props;
+const { 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} />