configure docs for deploy

WickyNilliams · Mar 20, 2024 · 5ee9b81 · 5ee9b81
1 parent c3dbe6b
commit 5ee9b81
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 28 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,37 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    branches: [main]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v4
+      - name: Install, build, and upload your site
+        uses: withastro/action@v2
+        with:
+          path: ./docs # The root location of Astro inside the repository
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -2,6 +2,8 @@ import { defineConfig } from "astro/config";
 
 // https://astro.build/config
 export default defineConfig({
+  site: "https://wicky.nillia.ms",
+  base: "/cally",
   trailingSlash: "always",
   devToolbar: {
     enabled: false,

diff --git a/docs/src/components/Link.astro b/docs/src/components/Link.astro
@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"a"> {
+  href: `/${string}`;
+}
+
+const { href, ...rest } = Astro.props;
+const base = import.meta.env.BASE_URL;
+
+if (href.startsWith(base)) {
+  throw new Error(
+    `href should not include BASE_URL. href: "${href}", BASE_URL: "${base}"`
+  );
+}
+
+const url = href === "/" ? base : base + href.slice(1);
+---
+
+<a href={url} {...rest}>
+  <slot />
+</a>
diff --git a/docs/src/components/PageTitle.astro b/docs/src/components/PageTitle.astro
@@ -1,14 +1,16 @@
 ---
+import Link from "./Link.astro";
+
 interface Props {
   asLink: boolean;
 }
 ---
 
 {
   Astro.props.asLink ? (
-    <a href="/" class="h1 title">
+    <Link href="/" class="h1 title">
       <slot />
-    </a>
+    </Link>
   ) : (
     <h1 class="h1 title">
       <slot />

diff --git a/docs/src/pages/api/calendar-date.astro b/docs/src/pages/api/calendar-date.astro
@@ -3,13 +3,15 @@ import ApiLayout from "../../layouts/ApiLayout.astro";
 import Example from "../../components/Example.astro";
 import Table from "../../components/Table.astro";
 import Heading from "../../components/Heading.astro";
+import Link from "../../components/Link.astro";
 ---
 
 <ApiLayout title="<calendar-date>">
   <p>
     This component, combined with
-    <a href="/api/calendar-month/"><code>{`<calendar-month>`}</code></a>, is
-    used to select a single date. It can display one or more months at a time.
+    <Link href="/api/calendar-month/"><code>{`<calendar-month>`}</code></Link>,
+    is used to select a single date. It can display one or more months at a
+    time.
   </p>
 
   <Example>
@@ -160,8 +162,8 @@ import Heading from "../../components/Heading.astro";
   </p>
 
   <p>
-    See the guide on <a href="/theming/">theming</a> for a walkthrough of how to
-    style this component.
+    See the guide on <Link href="/theming/">theming</Link> for a walkthrough of how
+    to style this component.
   </p>
 
   <Table>

diff --git a/docs/src/pages/api/calendar-month.astro b/docs/src/pages/api/calendar-month.astro
@@ -2,14 +2,15 @@
 import ApiLayout from "../../layouts/ApiLayout.astro";
 import Table from "../../components/Table.astro";
 import Heading from "../../components/Heading.astro";
+import Link from "../../components/Link.astro";
 ---
 
 <ApiLayout title="<calendar-month>">
   <p>
     This is the lowest level component that displays a grid of clickable days.
     It should not be used alone, but as a descendant of one of
-    <a href="/api/calendar-date/"><code>{`<calendar-date>`}</code></a> or
-    <a href="/api/calendar-range/"><code>{`<calendar-range>`}</code></a>.
+    <Link href="/api/calendar-date/"><code>{`<calendar-date>`}</code></Link> or
+    <Link href="/api/calendar-range/"><code>{`<calendar-range>`}</code></Link>.
   </p>
 
   <Heading level={2}>Properties and attributes</Heading>
@@ -75,8 +76,8 @@ import Heading from "../../components/Heading.astro";
   </p>
 
   <p>
-    See the guide on <a href="/theming/">theming</a> for a walkthrough of how to
-    style this component.
+    See the guide on <Link href="/theming/">theming</Link> for a walkthrough of how
+    to style this component.
   </p>
 
   <Table>

diff --git a/docs/src/pages/api/calendar-range.astro b/docs/src/pages/api/calendar-range.astro
@@ -3,13 +3,14 @@ import ApiLayout from "../../layouts/ApiLayout.astro";
 import Example from "../../components/Example.astro";
 import Table from "../../components/Table.astro";
 import Heading from "../../components/Heading.astro";
+import Link from "../../components/Link.astro";
 ---
 
 <ApiLayout title="<calendar-range>">
   <p>
     This component, combined with
-    <a href="/api/calendar-month/"><code>{`<calendar-month>`}</code></a>, is
-    used to select a date range. It shows one or more months at a time.
+    <Link href="/api/calendar-month/"><code>{`<calendar-month>`}</code></Link>,
+    is used to select a date range. It shows one or more months at a time.
   </p>
 
   <Example>
@@ -198,8 +199,8 @@ import Heading from "../../components/Heading.astro";
   </p>
 
   <p>
-    See the guide on <a href="/theming/">theming</a> for a walkthrough of how to
-    style this component.
+    See the guide on <Link href="/theming/">theming</Link> for a walkthrough of how
+    to style this component.
   </p>
 
   <Table>

diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -4,6 +4,7 @@ import { Code } from "astro:components";
 import PageIntro from "../components/PageIntro.astro";
 import Example from "../components/Example.astro";
 import Heading from "../components/Heading.astro";
+import Link from "../components/Link.astro";
 
 const tagline = "Small, feature-rich calendar components";
 ---
@@ -194,9 +195,10 @@ const tagline = "Small, feature-rich calendar components";
 
   <p>
     For a detailed look at each component, check out the respective
-    <a href="/api/">API</a> docs. The <a href="/theming/">theming</a> guide to explains
-    how to style the components to match your designs. And the
-    <a href="/integration/">integration</a> guide explains how to compose Cally's
+    <Link href="/api/">API</Link> docs. The
+    <Link href="/theming/">theming</Link> guide to explains how to style the components
+    to match your designs. And the
+    <Link href="/integration/">integration</Link> guide explains how to compose Cally's
     components to build a date/range picker using your own or third-party components.
   </p>
 
@@ -208,10 +210,10 @@ const tagline = "Small, feature-rich calendar components";
   <Heading level={2}>Acknowledgments</Heading>
 
   <p>
-    Cally is a spiritual successor to my earlier work on <a
-      href="https://duetds.github.io/date-picker/">Duet date picker</a
-    >. Shout out to everyone that made it possible to open source that. The
-    component APIs are partially inspired by the Date and Time components from <a
+    Cally is a spiritual successor to my earlier work on
+    <a href="https://duetds.github.io/date-picker/">Duet date picker</a>. Shout
+    out to everyone that made it possible to open source that. The component
+    APIs are partially inspired by the Date and Time components from <a
       href="https://react-spectrum.adobe.com/react-aria/components.html#date-and-time"
       >React ARIA Components</a
     >, though there is some amount of convergent evolution. Much appreciation to

diff --git a/docs/src/pages/integration.astro b/docs/src/pages/integration.astro
@@ -4,6 +4,7 @@ import Layout from "../layouts/Layout.astro";
 import Example from "../components/Example.astro";
 import Note from "../components/Note.astro";
 import Heading from "../components/Heading.astro";
+import Link from "../components/Link.astro";
 ---
 
 <Layout title="Integration">
@@ -121,7 +122,7 @@ import Heading from "../components/Heading.astro";
 
   <Note>
     For more information on styling and theming the calendar components please
-    see the full <a href="/theming/">theming</a> guide.
+    see the full <Link href="/theming/">theming</Link> guide.
   </Note>
 
   <Heading level={2}>The input and toggle button</Heading>
@@ -410,7 +411,8 @@ import Heading from "../components/Heading.astro";
 
   <p>
     To find out more about each component, please see their respective
-    <a href="/api/">API</a> docs. Or visit the <a href="/theming/">theming</a> guide
-    for a more in-depth look at styling the components.
+    <Link href="/api/">API</Link> docs. Or visit the
+    <Link href="/theming/">theming</Link> guide for a more in-depth look at styling
+    the components.
   </p>
 </Layout>
diff --git a/docs/src/pages/theming.astro b/docs/src/pages/theming.astro
@@ -5,6 +5,7 @@ import Color from "../components/Color.astro";
 import Note from "../components/Note.astro";
 import PageIntro from "../components/PageIntro.astro";
 import Heading from "../components/Heading.astro";
+import Link from "../components/Link.astro";
 
 const colorAccent = "#7048e8";
 const colorAccentSecondary = "#845ef7";
@@ -17,7 +18,7 @@ const colorTextOnAccent = "#ffffff";
 
   <p>
     This serves as a general theming guide. Please read the respective
-    <a href="/api/">API docs</a> to see all available styling options.
+    <Link href="/api/">API docs</Link> to see all available styling options.
   </p>
 
   <p>
@@ -267,7 +268,7 @@ const colorTextOnAccent = "#ffffff";
 
   <p>
     Each component offers many parts, please consult the component
-    <a href="/api/">API</a> docs for the complete list.
+    <Link href="/api/">API</Link> docs for the complete list.
   </p>
 
   <p>
@@ -590,8 +591,9 @@ const colorTextOnAccent = "#ffffff";
 
   <p>
     To find out more about each component, please see their respective
-    <a href="/api/">API</a> docs. Or visit the <a href="/theming/">theming</a> guide
-    for a more in-depth look at styling the components.
+    <Link href="/api/">API</Link> docs. Or visit the
+    <Link href="/theming/">theming</Link> guide for a more in-depth look at styling
+    the components.
   </p>
 </Layout>