From b7e60bc7dc5aa8563b3aa544135aca4f966c426a Mon Sep 17 00:00:00 2001 From: WickyNilliams Date: Wed, 20 Mar 2024 16:42:59 +0000 Subject: [PATCH] configure docs for deploy --- .github/workflows/deploy.yml | 38 +++++++++++++++++++++++++ docs/astro.config.mjs | 2 ++ docs/src/components/Link.astro | 20 +++++++++++++ docs/src/components/PageTitle.astro | 6 ++-- docs/src/pages/api/calendar-date.astro | 10 ++++--- docs/src/pages/api/calendar-month.astro | 9 +++--- docs/src/pages/api/calendar-range.astro | 9 +++--- docs/src/pages/index.astro | 16 ++++++----- docs/src/pages/integration.astro | 8 ++++-- docs/src/pages/theming.astro | 10 ++++--- package.json | 2 +- 11 files changed, 101 insertions(+), 29 deletions(-) create mode 100644 .github/workflows/deploy.yml create mode 100644 docs/src/components/Link.astro diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..c327fb5 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,38 @@ +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 # root location of Astro inside the repo + package-manager: npm@latest # not finding my package-lock file for some reason, so be explicit + + 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 index 7f89474..7bdd0ec 100644 --- 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 new file mode 100644 index 0000000..7614a3c --- /dev/null +++ b/docs/src/components/Link.astro @@ -0,0 +1,20 @@ +--- +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); +--- + + diff --git a/docs/src/components/PageTitle.astro b/docs/src/components/PageTitle.astro index 68cba98..ac8a467 100644 --- a/docs/src/components/PageTitle.astro +++ b/docs/src/components/PageTitle.astro @@ -1,4 +1,6 @@ --- +import Link from "./Link.astro"; + interface Props { asLink: boolean; } @@ -6,9 +8,9 @@ interface Props { { Astro.props.asLink ? ( - + - + ) : (

diff --git a/docs/src/pages/api/calendar-date.astro b/docs/src/pages/api/calendar-date.astro index 3250747..dc970c2 100644 --- 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"; ---

This component, combined with - {``}, is - used to select a single date. It can display one or more months at a time. + {``}, + is used to select a single date. It can display one or more months at a + time.

@@ -160,8 +162,8 @@ import Heading from "../../components/Heading.astro";

- See the guide on theming for a walkthrough of how to - style this component. + See the guide on theming for a walkthrough of how + to style this component.

diff --git a/docs/src/pages/api/calendar-month.astro b/docs/src/pages/api/calendar-month.astro index e81e5fb..9488083 100644 --- 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"; ---

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 - {``} or - {``}. + {``} or + {``}.

Properties and attributes @@ -75,8 +76,8 @@ import Heading from "../../components/Heading.astro";

- See the guide on theming for a walkthrough of how to - style this component. + See the guide on theming for a walkthrough of how + to style this component.

diff --git a/docs/src/pages/api/calendar-range.astro b/docs/src/pages/api/calendar-range.astro index 635c18e..1fc2255 100644 --- 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"; ---

This component, combined with - {``}, is - used to select a date range. It shows one or more months at a time. + {``}, + is used to select a date range. It shows one or more months at a time.

@@ -198,8 +199,8 @@ import Heading from "../../components/Heading.astro";

- See the guide on theming for a walkthrough of how to - style this component. + See the guide on theming for a walkthrough of how + to style this component.

diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro index 365e653..d4f1494 100644 --- 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";

For a detailed look at each component, check out the respective - API docs. The theming guide to explains - how to style the components to match your designs. And the - integration guide explains how to compose Cally's + API docs. The + theming guide to explains how to style the components + to match your designs. And the + integration guide explains how to compose Cally's components to build a date/range picker using your own or third-party components.

@@ -208,10 +210,10 @@ const tagline = "Small, feature-rich calendar components"; Acknowledgments

- Cally is a spiritual successor to my earlier work on Duet date picker. 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 Duet date picker. 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 React ARIA Components, 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 index 224c721..6c76207 100644 --- 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"; --- @@ -121,7 +122,7 @@ import Heading from "../components/Heading.astro"; For more information on styling and theming the calendar components please - see the full theming guide. + see the full theming guide. The input and toggle button @@ -410,7 +411,8 @@ import Heading from "../components/Heading.astro";

To find out more about each component, please see their respective - API docs. Or visit the theming guide - for a more in-depth look at styling the components. + API docs. Or visit the + theming guide for a more in-depth look at styling + the components.

diff --git a/docs/src/pages/theming.astro b/docs/src/pages/theming.astro index 8c5eb95..60aebab 100644 --- 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";

This serves as a general theming guide. Please read the respective - API docs to see all available styling options. + API docs to see all available styling options.

@@ -267,7 +268,7 @@ const colorTextOnAccent = "#ffffff";

Each component offers many parts, please consult the component - API docs for the complete list. + API docs for the complete list.

@@ -590,8 +591,9 @@ const colorTextOnAccent = "#ffffff";

To find out more about each component, please see their respective - API docs. Or visit the theming guide - for a more in-depth look at styling the components. + API docs. Or visit the + theming guide for a more in-depth look at styling + the components.

diff --git a/package.json b/package.json index 387754e..ceec7d6 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ ], "scripts": { "start": "vite", - "build": "vite build", + "build": "vite build && npm run astro:build", "test": "wtr", "astro:dev": "astro dev --root ./docs", "preastro:build": "rm -rf ./docs/dist",