Merge pull request #202 from GrantBirki/source-sync

source sync

.prettierignore

@@ -3,3 +3,4 @@ node_modules
 .github
 .changeset
 .cache/image/cache.json
+astrowind-template-in-depth.mdx

package.json

@@ -24,7 +24,7 @@
     "@astrojs/tailwind": "^4.0.0",
     "@astrolib/analytics": "^0.3.0",
     "@astrolib/seo": "^0.4.0",
-    "@fontsource/inter": "^4.5.15",
+    "@fontsource-variable/inter": "^5.0.5",
     "@iconify-json/flat-color-icons": "^1.1.6",
     "@iconify-json/icon-park": "^1.1.11",
     "@iconify-json/mdi": "^1.1.52",

src/assets/styles/base.css → src/assets/styles/tailwind.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+.dd *:first-child {
+  margin-top: 0;
+}
+
 @layer components {
   .text-page {
     color: var(--aw-color-text-page);
@@ -32,8 +36,26 @@
   }
 }
 
-#header.scroll {
-  @apply shadow-md md:shadow-lg bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
+#header.scroll > div:first-child {
+  @apply bg-white md:bg-white/90 md:backdrop-blur-md;
+  box-shadow: 0 0.375rem 1.5rem 0 rgb(140 152 164 / 13%);
+}
+.dark #header.scroll > div:first-child,
+#header.scroll.dark > div:first-child {
+  @apply bg-white md:bg-[#030621e6] border-b border-gray-500/20;
+  box-shadow: none;
+}
+/* #header.scroll > div:last-child {
+  @apply py-3;
+} */
+
+#header.expanded nav {
+  position: fixed;
+  top: 70px;
+  left: 0;
+  right: 0;
+  bottom: 70px !important;
+  padding: 0 5px;
 }
 
 .dropdown:hover .dropdown-menu {

src/components/CustomFonts.astro

@@ -0,0 +1,34 @@
+---
+import '@fontsource-variable/inter';
+// 'DM Sans'
+// Nunito
+// Dosis
+// Outfit
+// Roboto
+// Literata
+// 'IBM Plex Sans'
+// Karla
+// Poppins
+// 'Fira Sans'
+// 'Libre Franklin'
+// Inconsolata
+// Raleway
+// Oswald
+// 'Space Grotesk'
+// Urbanist
+---
+
+<style is:inline is:global>
+  :root {
+    --aw-font-sans: 'Inter Variable';
+    --aw-font-serif: var(--aw-font-sans);
+    --aw-font-heading: 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/CustomStyles.astro

@@ -1,21 +1,54 @@
 ---
-import '@fontsource/inter/variable.css';
+import '@fontsource-variable/inter';
 
+// 'DM Sans'
 // Nunito
 // Dosis
+// Outfit
+// Roboto
+// Literata
+// 'IBM Plex Sans'
+// Karla
+// Poppins
+// 'Fira Sans'
+// 'Libre Franklin'
+// Inconsolata
+// Raleway
+// Oswald
+// 'Space Grotesk'
+// Urbanist
 ---
 
 <style is:inline is:global>
   :root {
-    --aw-font-sans: 'InterVariable';
+    --aw-font-sans: 'Inter Variable';
     --aw-font-serif: var(--aw-font-sans);
     --aw-font-heading: var(--aw-font-sans);
 
-    --aw-color-primary: rgb(59 130 246);
+    --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-text-heading: rgb(0 0 0); 
+    --aw-color-text-default: rgb(16 16 16);
+    --aw-color-text-muted: rgb(16 16 16 / 66%);
     --aw-color-bg-page: rgb(255 255 255);
+
+    --aw-color-bg-page-dark: rgb(3 6 32);
+  }
+
+  .dark {
+    --aw-font-sans: 'Inter Variable';
+    --aw-font-serif: var(--aw-font-sans);
+    --aw-font-heading: 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-heading: rgb(0 0 0); 
+    --aw-color-text-default: rgb(229 236 246);
+    --aw-color-text-muted: rgb(229 236 246 / 66%);
+    --aw-color-bg-page: var(--aw-color-bg-page-dark);
   }
 </style>

src/components/Favicons.astro

@@ -0,0 +1,8 @@
+---
+import favIcon from '~/assets/favicons/favicon.ico';
+import favIconSvg from '~/assets/favicons/favicon.svg';
+---
+
+<link rel="shortcut icon" href={favIcon} />
+<link rel="icon" type="image/svg+xml" href={favIcon} />
+<link rel="mask-icon" href={String(favIconSvg)} color="#8D46E7" />

src/components/common/BasicScripts.astro

@@ -35,11 +35,20 @@ import { SITE } from '~/config/site/config.js';
     let lastKnownScrollPosition = window.scrollY;
     let ticking = true;
 
-    attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
-      elem.classList.toggle('expanded');
-      document.body.classList.toggle('overflow-hidden');
-      document.getElementById('header')?.classList.toggle('h-screen');
-      document.querySelector('#header nav')?.classList.toggle('hidden');
+    attachEvent('#header nav', 'click', function () {
+      document.querySelector("[data-aw-toggle-menu]")?.classList.remove("expanded");
+      document.body.classList.remove("overflow-hidden");
+      document.getElementById("header")?.classList.remove("h-screen");
+      document.querySelector("#header nav")?.classList.add("hidden");
+    });
+
+    attachEvent('[data-aw-toggle-menu]', 'click', function () {
+      document.body.classList.toggle("overflow-hidden");
+      document.getElementById("header")?.classList.toggle("h-screen");
+      document.getElementById("header")?.classList.toggle("expanded");
+      document.getElementById("header")?.classList.toggle("bg-page");
+      document.querySelector("#header nav")?.classList.toggle("hidden");
+      document.querySelector("#header > div > div:last-child")?.classList.toggle("hidden");
     });
 
     attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
@@ -112,8 +121,9 @@ import { SITE } from '~/config/site/config.js';
     if (elem) {
       elem.classList.remove('expanded');
     }
-    document.body.classList.remove('overflow-hidden');
-    document.getElementById('header')?.classList.remove('h-screen');
-    document.querySelector('#header nav')?.classList.add('hidden');
+    document.body.classList.remove("overflow-hidden");
+    document.getElementById("header")?.classList.remove("h-screen");
+    document.getElementById("header")?.classList.remove("expanded");
+    document.querySelector("#header nav")?.classList.add("hidden");
   };
 </script>

src/components/common/MetaTags.astro

@@ -8,8 +8,6 @@ import { MetaSEO } from '~/types';
 import { getCanonical, getAsset } from '~/utils/permalinks';
 import { getRelativeUrlByFilePath } from '~/utils/directories';
 
-import CustomStyles from '~/components/CustomStyles.astro';
-
 export interface Props extends MetaSEO {
   dontUseTitleTemplate?: boolean;
 }
@@ -81,15 +79,10 @@ const image =
   }}
 />
 
-<CustomStyles />
-
 <!-- Google Site Verification -->
 {SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}
 
 <!-- Google Analytics -->
 {SITE.googleAnalyticsId && <GoogleAnalytics id={String(SITE.googleAnalyticsId)} partytown={true} />}
 
-<link rel="shortcut icon" href={getAsset('/favicon.ico')} />
-<link rel="icon" type="image/svg+xml" href={getAsset('/favicon.svg')} />
-<link rel="mask-icon" href={getAsset('/favicon.svg')} color="#8D46E7" />
 <link rel="sitemap" href={getAsset('/sitemap-index.xml')} />

src/components/widgets/Announcement.astro

@@ -4,7 +4,7 @@ import announcement from '~/config/components/announcement';
 
 <!-- if info set -->{
   announcement && announcement.enabled && announcement.type === 'info' && (
-    <div 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">
+    <div 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 not-prose">
       <Fragment set:html={announcement.text} />
     </div>
   )

src/components/widgets/CallToAction.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 
-interface CallToAction {
+export interface CallToAction {
   text: string;
   href: string;
   icon?: string;
@@ -24,7 +24,7 @@ const {
 } = Astro.props;
 ---
 
-<section class="relative">
+<section class="relative not-prose">
   <div class="max-w-6xl mx-auto px-4 sm:px-6">
     <div class="py-12 md:py-20">
       <div

src/components/widgets/Content.astro

@@ -31,7 +31,7 @@ const {
 } = Astro.props;
 ---
 
-<section class:list={[{ 'pt-0 md:pt-0': isAfterContent }, 'bg-blue-50 dark:bg-slate-800 py-16 md:py-20']}>
+<section class:list={[{ 'pt-0 md:pt-0': isAfterContent }, 'bg-blue-50 dark:bg-slate-800 py-16 md:py-20 not-prose']}>
   <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
     {
       (title || subtitle || highlight) && (

src/components/widgets/DListItem.astro

@@ -0,0 +1,22 @@
+---
+// component: DListItem
+//
+// Mimics the html 'dl' (description list)
+//
+// The 'dt' item is the item 'term' and is inserted into an 'h6' tag.
+// Caller needs to style the 'h6' tag appropriately.
+//
+// You can put pretty much any content you want between the open and
+// closing tags - it's simply contained in an enclosing div with a
+// margin left.  No need for 'dd' items.
+//
+const {
+  dt
+} = Astro.props;
+interface Props {
+  dt:string
+}
+const content:string = await Astro.slots.render('default');
+---
+<h6 set:html={dt}></h6>
+<div class="dd ml-8" set:html={content}/>

src/components/widgets/FAQs.astro

@@ -21,7 +21,7 @@ const {
 } = Astro.props;
 ---
 
-<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
+<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20 not-prose">
   <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
     {
       (title || subtitle || highlight) && (

src/components/widgets/Features.astro

@@ -22,7 +22,7 @@ const {
 } = Astro.props;
 ---
 
-<section class="scroll-mt-16" id="features">
+<section class="scroll-mt-16 not-prose" id="features">
   <div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
     {
       (title || subtitle || highlight) && (

src/components/widgets/Features2.astro

@@ -26,7 +26,7 @@ const {
 const totalColumns = columns || items.length;
 ---
 
-<section class="relative">
+<section class="relative not-prose">
   <div class="absolute inset-0 bg-amber-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 -mb-12">
     <div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">

src/components/widgets/Footer.astro

@@ -26,7 +26,7 @@ export interface Props {
 const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme = 'light' } = Astro.props;
 ---
 
-<footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800']}>
+<footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800 not-prose']}>
   <div class="dark:bg-dark absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300">
     <div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">