-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
play: add docs example with Aside and Since ported
- Loading branch information
1 parent
f9f8112
commit 377c6d7
Showing
6 changed files
with
425 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<NonNullable<Props['type']>, { 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]; | ||
--- | ||
|
||
<aside class={`content ${type}`} aria-label={title}> | ||
<p class="title" aria-hidden="true"> | ||
<span class="icon"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} width={16} height={16}> | ||
<path fill-rule="evenodd" d={d}></path> | ||
</svg> | ||
</span> | ||
{title} | ||
</p> | ||
<section> | ||
<slot /> | ||
</section> | ||
</aside> | ||
|
||
<style> | ||
aside { | ||
--color-base-purple: 269, 79%; | ||
--color-base-teal: 180, 80%; | ||
--aside-color-base: var(--color-base-purple); | ||
--aside-color-lightness: 54%; | ||
--aside-accent-color: hsl(var(--aside-color-base), var(--aside-color-lightness)); | ||
--aside-text-lightness: 20%; | ||
--aside-text-accent-color: hsl(var(--aside-color-base), var(--aside-text-lightness)); | ||
|
||
border-inline-start: 4px solid var(--aside-accent-color); | ||
padding: 1rem; | ||
background-color: hsla( | ||
var(--aside-color-base), | ||
var(--aside-color-lightness), | ||
var(--theme-accent-opacity) | ||
); | ||
/* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */ | ||
outline: 1px solid transparent; | ||
} | ||
|
||
:global(.theme-dark) aside { | ||
--aside-text-lightness: 85%; | ||
} | ||
|
||
.title { | ||
line-height: 1; | ||
margin-bottom: 0.5rem; | ||
font-size: 0.9rem; | ||
letter-spacing: 0.05em; | ||
font-weight: bold; | ||
text-transform: uppercase; | ||
color: var(--aside-text-accent-color); | ||
} | ||
|
||
.icon svg { | ||
width: 1.5em; | ||
height: 1.5em; | ||
vertical-align: middle; | ||
fill: currentcolor; | ||
} | ||
|
||
aside :global(a), | ||
aside :global(a > code:not([class*='language'])) { | ||
color: var(--aside-text-accent-color); | ||
} | ||
|
||
aside :global(p), | ||
aside.content :global(ul) { | ||
color: var(--theme-text); | ||
} | ||
|
||
:global(.theme-dark) aside :global(code:not([class*='language'])) { | ||
color: var(--theme-code-text); | ||
} | ||
|
||
aside :global(pre) { | ||
margin-left: 0; | ||
margin-right: 0; | ||
} | ||
|
||
.tip { | ||
--aside-color-lightness: 42%; | ||
--aside-color-base: var(--color-base-teal); | ||
} | ||
|
||
.caution { | ||
--aside-color-lightness: 59%; | ||
--aside-color-base: var(--color-base-yellow); | ||
} | ||
|
||
.danger { | ||
--aside-color-lightness: 54%; | ||
--aside-color-base: var(--color-base-red); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
--- | ||
export interface Props { | ||
variant?: 'neutral' | 'accent'; | ||
} | ||
const { variant = 'neutral' } = Astro.props as Props; | ||
--- | ||
|
||
<span class={`badge ${variant}`}><slot /></span> | ||
|
||
<style> | ||
.badge { | ||
display: inline-block; | ||
font-size: 0.75rem; | ||
border: 1px solid; | ||
line-height: 1; | ||
padding: 0.25em 0.5em; | ||
font-weight: bold; | ||
text-transform: uppercase; | ||
letter-spacing: 0.1ch; | ||
white-space: nowrap; | ||
} | ||
|
||
.neutral { | ||
border-color: var(--theme-dim); | ||
color: var(--theme-text-light); | ||
background-color: var(--theme-dim-lighter); | ||
} | ||
|
||
.accent { | ||
border-color: var(--theme-accent); | ||
color: var(--theme-text-accent); | ||
background-color: var(--theme-bg-accent); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
--- | ||
|
||
<span> | ||
<strong>Added in</strong> | ||
<code>{pkg}@{v}</code> | ||
{featureStatus === 'new' && <Badge variant="accent">New</Badge>} | ||
{featureStatus === 'beta' && <Badge variant="accent">Beta</Badge>} | ||
</span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 }; |
43 changes: 43 additions & 0 deletions
43
examples/with-markdoc/src/content/docs/content-collections.mdoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 %} |
Oops, something went wrong.