diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..7ac1ee3 --- /dev/null +++ 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 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..6997c1f --- /dev/null +++ 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); +--- + + + + 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.