CSS Tricks links too

site/src/components/icons/CssTricksIcon.astro

@@ -0,0 +1,19 @@
+---
+import type { SvgIconProps } from '@libs/icon'
+
+type Props = SvgIconProps
+
+const { class: className, height, width } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 362.62 388.52"
+  role="img"
+  class={className}
+  height={height}
+  width={width}
+>
+  <title>CSS-Tricks</title>
+  <path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z"></path>
+</svg>

site/src/content/config.ts

@@ -18,6 +18,7 @@ const docsSchema = z.object({
     .array()
     .optional(),
   mdn: z.string().optional(),
+  csstricks: z.string().optional(),
   sections: z
     .object({
       description: z.string(),

site/src/layouts/DocsLayout.astro

@@ -15,6 +15,7 @@ import { fileURLToPath } from 'node:url'
 import { join, dirname } from 'node:path'
 import GitHubIcon from '@components/icons/GitHubIcon.astro'
 import MdnIcon from '@components/icons/MdnIcon.astro'
+import CssTricksIcon from '@components/icons/CssTricksIcon.astro'
 
 interface NavigationPage {
   title: string
@@ -135,7 +136,21 @@ if (currentPageIndex < allPages.length - 1) {
                 rel="noopener"
               >
                 <MdnIcon height={16} width={16} class="bi" />
-                View on MDN
+                MDN
+              </a>
+            )
+          }
+          {
+            frontmatter.csstricks && (
+              <a
+                class="btn btn-secondary-text btn-sm"
+                href={frontmatter.csstricks}
+                title="View on CSS-Tricks"
+                target="_blank"
+                rel="noopener"
+              >
+                <CssTricksIcon height={16} width={16} class="bi" />
+                CSS-Tricks
               </a>
             )
           }