feat: add sponsoring CTA

volarjs · Mar 22, 2024 · e2f2a7b · e2f2a7b
1 parent a9c0c6e
commit e2f2a7b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 15 deletions.
diff --git a/src/components/Sponsors.astro b/src/components/Sponsors.astro
@@ -34,7 +34,7 @@ const sponsors = [
 const { smallPadding } = Astro.props;
 ---
 
-<section class="not-content" class:list={[{ "small-padding": smallPadding }]}>
+<section class="sponsors not-content" class:list={[{ "small-padding": smallPadding }]}>
   {
     sponsors.map((sponsor) => (
       <a href={sponsor.url}>
@@ -46,9 +46,12 @@ const { smallPadding } = Astro.props;
     ))
   }
 </section>
+<section class="not-content sponsor-link-container">
+  <a class="sponsor-link" href="https://github.com/sponsors/johnsoncodehk">💙 Sponsor Volar 💙</a>
+</section>
 
 <style>
-  section {
+  .sponsors {
     display: flex;
     flex-wrap: wrap;
     border-radius: 0.75rem;
@@ -57,14 +60,14 @@ const { smallPadding } = Astro.props;
     width: 100%;
     margin-top: 1rem;
   }
-  section.small-padding a {
+  .sponsors.small-padding a {
     width: 100%;
   }
-  a {
+  .sponsors a {
     width: 34%;
     flex-grow: 1;
   }
-  a.large {
+  .sponsors a.large {
     width: 100%;
   }
   article {
@@ -100,6 +103,18 @@ const { smallPadding } = Astro.props;
     clip-path: inset(50%);
     overflow: hidden;
   }
+  .sponsor-link-container {
+    text-align: center;
+  }
+  .sponsor-link {
+    font-size: 1.25rem;
+    text-decoration: none;
+    color: var(--sl-color-text-accent);
+    display: inline !important;
+  }
+  .sponsor-link:hover {
+    color: var(--sl-color-accent);
+  }
 </style>
 
 <style is:global>

diff --git a/src/components/starlight/SiteTitle.astro b/src/components/starlight/SiteTitle.astro
@@ -23,7 +23,9 @@ function pathsMatch(pathA: string, pathB: string): boolean {
         <a
           href={menuItem.href}
           aria-current={
-            pathsMatch(encodeURI(menuItem.href), Astro.url.pathname) && "page"
+            (pathsMatch(encodeURI(menuItem.href), Astro.url.pathname) ||
+              (menuItem.name === "Docs" && Astro.props.hasSidebar)) &&
+            "page"
           }
         >
           <span>{menuItem.name}</span>
@@ -63,13 +65,12 @@ function pathsMatch(pathA: string, pathB: string): boolean {
     color: var(--sl-color-text-accent);
   }
 
-	@media (min-width: 50rem) {
-		.menu-items {
-			display: flex;
-		}
-		.separator {
-			display: block;
-		}
-	}
-}
+  @media (min-width: 50rem) {
+    .menu-items {
+      display: flex;
+    }
+    .separator {
+      display: block;
+    }
+  }
 </style>
diff --git a/src/styles/custom.css b/src/styles/custom.css
@@ -53,3 +53,16 @@
 :root[data-theme="dark"] mobile-starlight-toc nav {
   background-color: #1f1f1f;
 }
+
+a {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+button {
+  transition-property: border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}