From d57f5d1b3ad4f2fabee64bc1df93fb84157f8331 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 10 Feb 2023 17:39:35 -0500 Subject: [PATCH] play: add docs example with Aside and Since ported --- .../with-markdoc/src/components/Aside.astro | 123 +++++++++++++ .../with-markdoc/src/components/Badge.astro | 34 ++++ .../with-markdoc/src/components/Since.astro | 46 +++++ examples/with-markdoc/src/content/config.ts | 17 ++ .../src/content/docs/content-collections.mdoc | 43 +++++ examples/with-markdoc/src/pages/docs.astro | 162 ++++++++++++++++++ 6 files changed, 425 insertions(+) create mode 100644 examples/with-markdoc/src/components/Aside.astro create mode 100644 examples/with-markdoc/src/components/Badge.astro create mode 100644 examples/with-markdoc/src/components/Since.astro create mode 100644 examples/with-markdoc/src/content/config.ts create mode 100644 examples/with-markdoc/src/content/docs/content-collections.mdoc create mode 100644 examples/with-markdoc/src/pages/docs.astro diff --git a/examples/with-markdoc/src/components/Aside.astro b/examples/with-markdoc/src/components/Aside.astro new file mode 100644 index 000000000..a30e80f15 --- /dev/null +++ b/examples/with-markdoc/src/components/Aside.astro @@ -0,0 +1,123 @@ +--- +export interface Props { + type?: 'note' | 'tip' | 'caution' | 'danger'; + title?: string; +} + +const t = { + 'aside.tip': 'Tip', +}; +const { type = 'note', title = t[`aside.${type}`] } = Astro.props as Props; + +// SVG icon paths based on GitHub Octicons +const icons: Record, { viewBox: string; d: string }> = { + note: { + viewBox: '0 0 18 18', + d: 'M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z', + }, + tip: { + viewBox: '0 0 18 18', + d: 'M14 0a8.8 8.8 0 0 0-6 2.6l-.5.4-.9 1H3.3a1.8 1.8 0 0 0-1.5.8L.1 7.6a.8.8 0 0 0 .4 1.1l3.1 1 .2.1 2.4 2.4.1.2 1 3a.8.8 0 0 0 1 .5l2.9-1.7a1.8 1.8 0 0 0 .8-1.5V9.5l1-1 .4-.4A8.8 8.8 0 0 0 16 2v-.1A1.8 1.8 0 0 0 14.2 0h-.1zm-3.5 10.6-.3.2L8 12.3l.5 1.8 2-1.2a.3.3 0 0 0 .1-.2v-2zM3.7 8.1l1.5-2.3.2-.3h-2a.3.3 0 0 0-.3.1l-1.2 2 1.8.5zm5.2-4.5a7.3 7.3 0 0 1 5.2-2.1h.1a.3.3 0 0 1 .3.3v.1a7.3 7.3 0 0 1-2.1 5.2l-.5.4a15.2 15.2 0 0 1-2.5 2L7.1 11 5 9l1.5-2.3a15.3 15.3 0 0 1 2-2.5l.4-.5zM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-8.4 9.6a1.5 1.5 0 1 0-2.2-2.2 7 7 0 0 0-1.1 3 .2.2 0 0 0 .3.3c.6 0 2.2-.4 3-1.1z', + }, + caution: { + viewBox: '-1 1 18 18', + d: 'M8.9 1.5C8.7 1.2 8.4 1 8 1s-.7.2-.9.5l-7 12a1 1 0 0 0 0 1c.2.3.6.5 1 .5H15c.4 0 .7-.2.9-.5a1 1 0 0 0 0-1l-7-12zM9 13H7v-2h2v2zm0-3H7V6h2v4z', + }, + danger: { + viewBox: '0 1 14 17', + d: 'M5 .3c.9 2.2.5 3.4-.5 4.3C3.5 5.6 2 6.5 1 8c-1.5 2-1.7 6.5 3.5 7.7-2.2-1.2-2.6-4.5-.3-6.6-.6 2 .6 3.3 2 2.8 1.4-.4 2.3.6 2.2 1.7 0 .8-.3 1.4-1 1.8A5.6 5.6 0 0 0 12 10c0-2.9-2.5-3.3-1.3-5.7-1.5.2-2 1.2-1.8 2.8 0 1-1 1.8-2 1.3-.6-.4-.6-1.2 0-1.8C8.2 5.3 8.7 2.5 5 .3z', + }, +}; +const { viewBox, d } = icons[type]; +--- + + + + diff --git a/examples/with-markdoc/src/components/Badge.astro b/examples/with-markdoc/src/components/Badge.astro new file mode 100644 index 000000000..fafdc98b9 --- /dev/null +++ b/examples/with-markdoc/src/components/Badge.astro @@ -0,0 +1,34 @@ +--- +export interface Props { + variant?: 'neutral' | 'accent'; +} +const { variant = 'neutral' } = Astro.props as Props; +--- + + + + diff --git a/examples/with-markdoc/src/components/Since.astro b/examples/with-markdoc/src/components/Since.astro new file mode 100644 index 000000000..5ca924c68 --- /dev/null +++ b/examples/with-markdoc/src/components/Since.astro @@ -0,0 +1,46 @@ +--- +import Badge from './Badge.astro'; + +export interface Props { + pkg?: string; + v: string; +} + +const { v, pkg = 'astro' } = Astro.props as Props; + +/** + * Split a semantic version string like `0.23.3` into a tuple of `[major, minor, patch]`. + */ +const parseSemVer = (semver: string) => + semver.split('.').map((part) => parseInt(part.replace(/[^0-9]/g, ''), 10)); + +/** + * Decide a feature is “new” if it was added in the latest minor version. + * For example, `@version 0.24.0` will be new as long as `astro@latest` is 0.24.x + */ +const getFeatureStatus = async (sinceVersion: string): Promise<'beta' | 'new' | 'current'> => { + const astroInfo = await fetch(`https://registry.npmjs.org/${pkg}/latest`).then((res) => + res.json() + ); + const latestAstroVersion = astroInfo.version; + const [sinceMajor, sinceMinor] = parseSemVer(sinceVersion); + const [latestMajor, latestMinor] = parseSemVer(latestAstroVersion); + if (sinceMajor > latestMajor) { + return 'beta'; + } + if (sinceMajor === latestMajor) { + if (sinceMinor > latestMinor) return 'beta'; + if (sinceMinor === latestMinor) return 'new'; + } + return 'current'; +}; + +const featureStatus = await getFeatureStatus(v); +--- + + + Added in + {pkg}@{v} + {featureStatus === 'new' && New} + {featureStatus === 'beta' && Beta} + diff --git a/examples/with-markdoc/src/content/config.ts b/examples/with-markdoc/src/content/config.ts new file mode 100644 index 000000000..26ce4c695 --- /dev/null +++ b/examples/with-markdoc/src/content/config.ts @@ -0,0 +1,17 @@ +import { defineCollection, z } from 'astro:content'; + +const blog = defineCollection({ + schema: z.object({ + title: z.string(), + }), +}); + +const docs = defineCollection({ + schema: z.object({ + title: z.string(), + description: z.string(), + i18nReady: z.boolean(), + }), +}); + +export const collections = { blog, docs }; diff --git a/examples/with-markdoc/src/content/docs/content-collections.mdoc b/examples/with-markdoc/src/content/docs/content-collections.mdoc new file mode 100644 index 000000000..d511f70e3 --- /dev/null +++ b/examples/with-markdoc/src/content/docs/content-collections.mdoc @@ -0,0 +1,43 @@ +--- +title: Content Collections +description: >- + Content collections help organize your Markdown and type-check your + frontmatter with schemas. +i18nReady: false +--- + +**Content collections** are the best way to work with Markdown and MDX in any Astro project. Content collections are a feature of Astro that help manage your content files in a project. Collections help to organize your content, validate your frontmatter, and provide automatic TypeScript type-safety for all of your content. + +## What are Content Collections? + +{% tabs client="load" /%} + +{% since v="2.0.0" /%} + +A **content collection** is any directory inside the reserved `src/content` project directory, such as `src/content/newsletter` and `src/content/blog`. Only content collections are allowed inside the `src/content` directory. This directory cannot be used for anything else. + +A **content entry** is any piece of content stored inside of your content collection directory. Content entries are stored as either Markdown (`.md`) or MDX (`.mdx`) files. You can use any filename you want, but we recommend using a consistent naming scheme (lower-case, dashes instead of spaces) to make it easier to find and organize your content. + +```sh +- src/content/ + - **newsletter/** the "newsletter" collection + - week-1.md a collection entry + - week-2.md a collection entry + - week-3.md a collection entry +``` + +Once you have a collection, you can start [querying your content](#querying-collections) using Astro's built-in content APIs. + +### The .astro Directory + +Astro stores important metadata for content collections in an `.astro` directory in your project. No action is needed on your part to maintain or update this directory. You are encouraged to ignore it entirely while working in your project. + +The `.astro` directory will be updated for you automatically anytime you run the [`astro dev`](/en/reference/cli-reference/#astro-dev), [`astro build`](/en/reference/cli-reference/#astro-build) commands. You can run [`astro sync`](/en/reference/cli-reference/#astro-sync) at any time to update the `.astro` directory manually. + +{% aside type="tip" %} +If you're using Git for version control, we recommend ignoring the `.astro` directory by adding `.astro` to your `.gitignore`. This tells Git to ignore this directory and any files inside of it. + +```bash +echo "\n.astro" >> .gitignore +``` +{% /aside %} diff --git a/examples/with-markdoc/src/pages/docs.astro b/examples/with-markdoc/src/pages/docs.astro new file mode 100644 index 000000000..9430e8a10 --- /dev/null +++ b/examples/with-markdoc/src/pages/docs.astro @@ -0,0 +1,162 @@ +--- +import { getCollection } from 'astro:content'; +import Aside from '../components/Aside.astro'; +import Since from '../components/Since.astro'; + +const docs = await getCollection('docs'); +--- + + + + + + + + Docs + + +
+ { + docs.map(async (entry) => { + const { Content } = await entry.render(); + return ( + + ); + }) + } +
+ + + +