chore: remove www (#2361)
|
@ -6,5 +6,5 @@
|
|||
"access": "public",
|
||||
"baseBranch": "main",
|
||||
"updateInternalDependencies": "patch",
|
||||
"ignore": ["@example/*", "www"]
|
||||
"ignore": ["@example/*"]
|
||||
}
|
||||
|
|
3
.github/labeler.yml
vendored
|
@ -9,9 +9,6 @@ example:
|
|||
docs:
|
||||
- docs/**
|
||||
|
||||
www:
|
||||
- www/**
|
||||
|
||||
test:
|
||||
- packages/**/*.test.js
|
||||
|
||||
|
|
1
.github/workflows/ci.yml
vendored
|
@ -9,7 +9,6 @@ on:
|
|||
- '.vscode/**'
|
||||
- 'docs/**'
|
||||
- 'examples/**'
|
||||
- 'www/**'
|
||||
|
||||
# Automatically cancel in-progress actions on the same branch
|
||||
concurrency:
|
||||
|
|
|
@ -5,7 +5,6 @@
|
|||
**/.vercel
|
||||
examples/docs/**/*.md
|
||||
examples/blog/**/*.md
|
||||
www/**/*.md
|
||||
.github
|
||||
.changeset
|
||||
README.md
|
||||
|
|
|
@ -17,7 +17,7 @@ yarn: "^1.22.10"
|
|||
|
||||
### Setting up your local repo
|
||||
|
||||
Astro uses yarn workspaces, so you should **always run `yarn install` from the top-level project directory.** running `yarn install` in the top-level project root will install dependencies for `astro`, `www`, `docs`, and every package in the repo.
|
||||
Astro uses yarn workspaces, so you should **always run `yarn install` from the top-level project directory.** running `yarn install` in the top-level project root will install dependencies for `astro`, `docs`, and every package in the repo.
|
||||
|
||||
```shell
|
||||
git clone && cd ...
|
||||
|
@ -75,7 +75,7 @@ yarn lint
|
|||
|
||||
### Making a Pull Request
|
||||
|
||||
When making a pull request, be sure to add a changeset when something has changed with Astro. Non-packages (`examples/*`, `docs/*`, and `www/*`) do not need changesets.
|
||||
When making a pull request, be sure to add a changeset when something has changed with Astro. Non-packages (`examples/*`, `docs/*`) do not need changesets.
|
||||
|
||||
```shell
|
||||
yarn changeset
|
||||
|
@ -144,7 +144,7 @@ To release a snapshot, run the following locally:
|
|||
# 1:
|
||||
yarn changeset version --snapshot XXX
|
||||
# 2: (Manual) review the diff, and make sure that you're not releasing more than you need to.
|
||||
git checkout -- examples/ docs/ www/
|
||||
git checkout -- examples/ docs/
|
||||
# 3:
|
||||
yarn release --tag next--XXX
|
||||
# 4: (Manual) review the publish, and if you're happy then you can throw out all local changes
|
||||
|
@ -191,7 +191,7 @@ When in prerelease mode, the automatic PR release process will no longer release
|
|||
1. Run `yarn changeset version` to create your new release.
|
||||
1. Run `yarn release` to publish your new release.
|
||||
1. Run `git push && git push --tags` to push your new release to GitHub.
|
||||
1. Run `git push release/0.X:latest` to push your release branch to `latest`. This will trigger an update to the docs site, the www site, etc.
|
||||
1. Run `git push release/0.X:latest` to push your release branch to `latest`. This will trigger an update to the docs site, etc.
|
||||
1. Go to https://github.com/withastro/astro/releases/new and create a new release. Copy the new changelog entry from https://github.com/withastro/astro/blob/latest/packages/astro/CHANGELOG.md.
|
||||
1. Post in Discord #announcements channel, if needed!
|
||||
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
[build]
|
||||
ignore = "git diff --quiet $COMMIT_REF $CACHED_COMMIT_REF -- packages/astro/src docs/ www/"
|
||||
ignore = "git diff --quiet $COMMIT_REF $CACHED_COMMIT_REF -- packages/astro/src docs/"
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
"scripts": {
|
||||
"release": "yarn build && changeset publish",
|
||||
"build": "turbo run build --no-deps --scope=astro --scope=create-astro --scope=\"@astrojs/*\"",
|
||||
"build:examples": "turbo run build --scope=docs --scope=www --scope=\"@example/*\"",
|
||||
"build:examples": "turbo run build --scope=docs --scope=\"@example/*\"",
|
||||
"dev": "turbo run dev --no-deps --no-cache --parallel --scope=astro --scope=create-astro --scope=\"@astrojs/*\"",
|
||||
"test": "turbo run test --scope=astro",
|
||||
"test:templates": "turbo run test --scope=create-astro",
|
||||
|
@ -58,7 +58,6 @@
|
|||
"examples/component/demo",
|
||||
"examples/component/packages/*",
|
||||
"scripts",
|
||||
"www",
|
||||
"docs",
|
||||
"packages/astro/test/fixtures/builtins/packages/*",
|
||||
"packages/astro/test/fixtures/builtins-polyfillnode",
|
||||
|
|
|
@ -12,7 +12,7 @@ export default async function run() {
|
|||
.readdirSync(examplesUrl)
|
||||
.map((filename) => new URL(filename, examplesUrl))
|
||||
.filter((fileUrl) => fs.statSync(fileUrl).isDirectory());
|
||||
const allProjectsToTest = [...examplesToTest, new URL('../../www', import.meta.url), new URL('../../docs', import.meta.url)];
|
||||
const allProjectsToTest = [...examplesToTest, new URL('../../docs', import.meta.url)];
|
||||
|
||||
console.log('');
|
||||
for (const projectToTest of allProjectsToTest) {
|
||||
|
|
1
www/.gitignore
vendored
|
@ -1 +0,0 @@
|
|||
.vercel
|
3
www/README.md
Normal file
|
@ -0,0 +1,3 @@
|
|||
# We've moved!
|
||||
|
||||
The Astro website source can now be found at [`withastro/astro.build`](https://github.com/withastro/astro.build)
|
|
@ -1,15 +0,0 @@
|
|||
// Full Astro Configuration API Documentation:
|
||||
// https://docs.astro.build/reference/configuration-reference
|
||||
|
||||
// @type-check enabled!
|
||||
// VSCode and other TypeScript-enabled text editors will provide auto-completion,
|
||||
// helpful tooltips, and warnings if your exported object is invalid.
|
||||
// You can disable this by removing "@ts-check" and `@type` comments below.
|
||||
|
||||
// @ts-check
|
||||
export default /** @type {import('astro').AstroUserConfig} */ ({
|
||||
buildOptions: {
|
||||
sitemap: true,
|
||||
site: 'https://astro.build/',
|
||||
},
|
||||
});
|
|
@ -1,14 +0,0 @@
|
|||
{
|
||||
"name": "www",
|
||||
"version": "1.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.22.9"
|
||||
}
|
||||
}
|
|
@ -1,4 +0,0 @@
|
|||
# Netlify Redirects
|
||||
/chat https://discord.gg/grF4GTXXYm
|
||||
/play/* https://play.astro.build/play/:splat 200
|
||||
/v0.21 /blog/astro-021-release/ 301
|
Before Width: | Height: | Size: 13 KiB |
|
@ -1,18 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425 200">
|
||||
<view id="flame" viewBox="0 0 160 200" />
|
||||
<view id="name" viewBox="240 78 185 122" />
|
||||
|
||||
<path d="M394.5 78v28.8H425v15.6h-30.5V158c0 3.6.1 7.2.5 10.3.8 5.3 4 10.5 8.4 12.5 5.7 2.6 9.7 2.1 21.6 1.7l-2.9 17.2c-.8.4-4 .3-7 .3-7 0-33.4 2.5-38.8-24.7-.9-4.7-.7-9.5-.7-16.9v-35.8H362l.2-15.9h13.4V78zm-51.7 28.7v91.5H324v-91.5zm0-28.7v16.3h-19V78zm-83.6 102.2h48.2l-18 18H240V78h19.2z"/>
|
||||
|
||||
<path fill="#324fff" d="M0 80v80a70.3 70.3 0 0040-40z"/>
|
||||
<path fill="#283198" d="M40 120c5.7 27.3 5.3 47 0 80L0 160z"/>
|
||||
<path fill="#0ff" d="M40 120v80l40-40a149.9 149.9 0 00-40-40z"/>
|
||||
<path fill="#324fff" d="M80 0v80S48.3 55.7 40 40z"/>
|
||||
<path fill="#324fff" d="M40 40v80a84.8 84.8 0 0040-40z"/>
|
||||
<path fill="#00e8ff" d="M80 80a182 182 0 010 80l-40-40z"/>
|
||||
<path fill="#283198" d="M80 80v80c17-7.5 31.5-19 40-40-5.9-17-18.1-30.9-40-40z"/>
|
||||
<path fill="#283198" d="M120 40v80L80 80z"/>
|
||||
<path fill="#00e8ff" d="M120 120c6.1 27 4.9 53.6 0 80l-40-40z"/>
|
||||
<path fill="#324fff" d="M120 120v80l40-40c-5.4-15-18.3-27.9-40-40z"/>
|
||||
<path fill="#324fff" d="M160 80v80l-40-40z"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 621 KiB |
Before Width: | Height: | Size: 29 KiB |
|
@ -1 +0,0 @@
|
|||
<svg enable-background="new 0 0 341.7 155.3" viewBox="0 0 341.7 155.3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.513" x2="152.027" y1="3.551" y2="63.991"><stop offset=".118" stop-color="#bbbdbf"/><stop offset=".299" stop-color="#f1f1f2"/><stop offset="1" stop-color="#d0d2d3"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.792" x2="73.994" y1="33.088" y2="105.748"><stop offset="0" stop-color="#bbbdbf"/><stop offset=".475" stop-color="#929497"/><stop offset="1" stop-color="#58595b"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.417" x2="144.251" y1="64.728" y2="150.269"><stop offset="0" stop-color="#58595b"/><stop offset=".539" stop-color="#929497"/><stop offset="1" stop-color="#58595b"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.248" x2="24.386" y1="75.009" y2="261.284"><stop offset="0" stop-color="#4377bb"/><stop offset="0" stop-color="#808184"/><stop offset=".475" stop-color="#404041"/><stop offset="1" stop-color="#231f20"/></linearGradient></defs><path d="m169.2 100.9s3.2 3.4 8.1 3.4c3.4 0 6.2-2 6.2-5.4 0-7.8-15.5-5.9-15.5-15.5 0-4.5 4-8.3 9.7-8.3 5.4 0 8.3 3 8.3 3l-1.5 2.6s-2.7-2.7-6.8-2.7c-4 0-6.5 2.6-6.6 5.3 0 7.4 15.5 5.3 15.5 15.5 0 4.6-3.6 8.4-9.4 8.4-6.4 0-9.8-4-9.8-4zm49.1-25.6c8.8 0 15.8 7 15.8 15.9.1 8.8-7 16.1-15.8 16.2h-.1c-8.8-.1-15.9-7.4-15.8-16.2v-.1c.1-8.9 7.1-15.9 15.9-15.8zm-.1 29.3c7.2-.2 12.9-6.1 12.7-13.3v-.1c0-7.4-5.6-13.1-12.6-13.1s-12.7 5.6-12.7 13c0 7.6 5.6 13.4 12.6 13.5zm33.9-28.7h3l-.1 28.3h14.4v2.7h-17.5zm33.9.1h3l-.1 31.1h-3zm23.2 0h10c9.3 0 15.6 5.7 15.6 15.6s-6.3 15.5-15.6 15.5h-10zm9.6 28.4c7.6 0 12.7-4.5 12.8-12.8 0-8.3-5.1-12.8-12.7-12.8h-6.7l-.1 25.6z" fill="#fff"/><path d="m163 35.8s-52.7-39.8-93.6-30.5c-1.2.3-2.5.6-3.6 1-6.3 2-11 5.5-13.9 9.7-.6.8-1 1.7-1.5 2.5l-15.1 25.7 26.1 5.1c10.3 7.4 24.8 10.5 37.2 7.3l46.5 9.1z" fill="#bbbdbf"/><path d="m163 35.8s-52.7-39.8-93.6-30.5c-1.2.3-2.5.6-3.6 1-6.3 2-11 5.5-13.9 9.7-.6.8-1 1.7-1.5 2.5l-15.1 25.7 26.1 5.1c10.3 7.4 24.8 10.5 37.2 7.3l46.5 9.1z" fill="url(#a)" opacity=".29"/><path d="m51.5 35.3c-1.2.3-2.5.6-3.6 1-16.7 5.4-22.4 21-12.8 34.7s30.9 20.4 47.6 15l62.3-20.2s-52.6-39.8-93.5-30.5z" fill="#929497"/><path d="m51.5 35.3c-1.2.3-2.5.6-3.6 1-16.7 5.4-22.4 21-12.8 34.7s30.9 20.4 47.6 15l62.3-20.2s-52.6-39.8-93.5-30.5z" fill="url(#b)" opacity=".34"/><path d="m133.6 80.3c-9.6-13.7-30.9-20.5-47.6-15.1l-62.4 20.2-19.6 35 111.6 19.1 20-35.6c4-7 3.6-15.6-2-23.6z" fill="url(#c)"/><path d="m114 115.2c-9.6-13.7-30.9-20.5-47.6-15.1l-62.4 20.3s52.7 39.8 93.6 30.5c1.2-.3 2.5-.6 3.6-1 16.7-5.4 22.4-21 12.8-34.7z" fill="url(#d)"/></svg>
|
Before Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 1.7 MiB |
Before Width: | Height: | Size: 479 KiB |
Before Width: | Height: | Size: 2.4 MiB |
Before Width: | Height: | Size: 697 KiB |
Before Width: | Height: | Size: 109 KiB |
Before Width: | Height: | Size: 144 KiB |
Before Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 67 KiB |
Before Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 1.7 MiB |
Before Width: | Height: | Size: 376 KiB |
Before Width: | Height: | Size: 125 KiB |
|
@ -1 +0,0 @@
|
|||
<svg viewBox="0 0 147 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><radialGradient id="a" cx="-1558.6042" cy="-37.4409" gradientTransform="matrix(0 38.301 -44.1228 0 -1632.641 59696.8672)" gradientUnits="userSpaceOnUse" r="1.0011"><stop offset="0" stop-color="#20c6b7"/><stop offset="1" stop-color="#4d9abf"/></radialGradient><path clip-rule="evenodd" d="m53.37 12.98.12 2.2c1.4-1.7 3.24-2.55 5.53-2.55 3.95 0 5.96 2.27 6.03 6.8v12.57h-4.26v-12.32c0-1.21-.26-2.1-.78-2.68s-1.37-.87-2.55-.87c-1.72 0-3 .78-3.84 2.34v13.53h-4.26v-19.02zm24.38 19.37c-2.7 0-4.89-.85-6.57-2.56-1.68-1.7-2.52-3.98-2.52-6.81v-.53c0-1.9.36-3.59 1.1-5.09.73-1.49 1.76-2.66 3.08-3.49s2.79-1.25 4.42-1.25c2.58 0 4.58.83 5.99 2.48s2.11 3.99 2.11 7.01v1.72h-12.4c.13 1.57.65 2.81 1.57 3.73s2.07 1.37 3.46 1.37c1.95 0 3.54-.79 4.77-2.37l2.3 2.2c-.76 1.14-1.77 2.02-3.04 2.65s-2.69.94-4.27.94zm-.51-16.29c-1.17 0-2.11.41-2.83 1.23s-1.18 1.96-1.38 3.43h8.12v-.32c-.09-1.43-.47-2.51-1.14-3.24-.67-.74-1.59-1.1-2.77-1.1zm16.76-7.7v4.62h3.35v3.16h-3.35v10.62c0 .73.14 1.25.43 1.57s.8.48 1.54.48c.5 0 1-.06 1.49-.18v3.31c-.97.27-1.9.4-2.81.4-3.27 0-4.91-1.81-4.91-5.43v-10.77h-3.12v-3.16h3.12v-4.63zm11.14 23.64h-4.26v-27h4.26zm9.17 0h-4.26v-19.02h4.26zm-4.52-23.96c0-.65.21-1.2.62-1.63.42-.43 1.01-.65 1.78-.65s1.37.22 1.79.65.63.98.63 1.64c0 .64-.21 1.18-.63 1.61s-1.02.64-1.79.64-1.36-.21-1.78-.64c-.41-.44-.62-.98-.62-1.62zm10.66 23.96v-15.86h-2.89v-3.16h2.89v-1.74c0-2.11.58-3.74 1.75-4.89s2.81-1.72 4.91-1.72c.75 0 1.54.11 2.39.32l-.1 3.34c-.54-.1-1.08-.15-1.63-.14-2.04 0-3.05 1.05-3.05 3.15v1.69h3.86v3.16h-3.86v15.85zm17.87-6.12 3.86-12.9h4.54l-7.54 21.9c-1.16 3.2-3.12 4.8-5.89 4.8-.62 0-1.3-.11-2.05-.32v-3.31l.81.05c1.07 0 1.88-.2 2.43-.59.54-.39.97-1.05 1.29-1.98l.61-1.64-6.66-18.93h4.6z" fill="#fff" fill-rule="evenodd"/><path d="m27.89 14.14-.01-.01c-.01 0-.02-.01-.02-.01-.02-.02-.03-.06-.03-.09l.77-4.73 3.62 3.63-3.77 1.6c-.01 0-.02.01-.03.01h-.02s-.01-.01-.02-.02c-.14-.16-.31-.29-.49-.38zm5.26-.29 3.88 3.88c.81.81 1.21 1.21 1.35 1.67.02.07.04.14.05.21l-9.26-3.92s-.01 0-.01-.01c-.04-.02-.08-.03-.08-.07s.04-.06.08-.07l.01-.01zm5.12 7c-.2.38-.59.77-1.25 1.43l-4.37 4.37-5.65-1.18-.03-.01c-.05-.01-.1-.02-.1-.06-.04-.47-.28-.9-.66-1.19-.02-.02-.02-.06-.01-.09v-.01l1.06-6.53v-.02c.01-.05.01-.11.06-.11.46-.06.88-.3 1.16-.67.01-.01.01-.02.03-.03.03-.01.07 0 .1.01zm-6.62 6.8-7.19 7.19 1.23-7.56v-.01c0-.01 0-.02.01-.03.01-.02.04-.03.06-.04h.01c.27-.11.51-.29.69-.52.02-.03.05-.06.09-.06h.03zm-8.71 8.71-.81.81-8.95-12.94-.01-.01c-.01-.02-.03-.04-.03-.06s.01-.03.02-.04l.01-.01c.03-.04.05-.08.07-.12l.02-.03c.01-.02.03-.05.05-.06s.05-.01.07 0l9.92 2.05c.03 0 .05.02.08.03.01.01.02.03.02.04.14.53.52.97 1.03 1.17.03.01.02.05 0 .08-.01.01-.01.03-.01.05-.12.74-1.19 7.27-1.48 9.04zm-1.69 1.69c-.6.59-.95.9-1.35 1.03-.39.12-.81.12-1.21 0-.47-.15-.87-.55-1.67-1.36l-8.99-8.99 2.35-3.64c.01-.02.02-.03.04-.05s.06-.01.09 0c.54.16 1.12.13 1.64-.08.03-.01.05-.02.07 0l.03.03zm-14.09-10.19-2.06-2.06 4.07-1.74c.01 0 .02-.01.03-.01.03 0 .05.03.07.07.04.06.08.12.13.18l.01.02c.01.02 0 .03-.01.05zm-2.98-2.97-2.61-2.61c-.44-.44-.77-.77-.99-1.04l7.94 1.65h.03c.05.01.1.02.1.06 0 .05-.06.07-.11.09l-.02.01zm-4.05-5c.01-.17.04-.33.09-.5.15-.47.55-.87 1.36-1.67l3.34-3.34c1.54 2.23 3.08 4.46 4.63 6.69.03.04.06.08.03.11-.15.16-.29.34-.4.53-.01.02-.03.05-.05.06-.01.01-.03 0-.04 0zm5.68-6.4 4.49-4.49c.42.19 1.96.83 3.33 1.41 1.04.44 1.99.84 2.29.97.03.01.06.02.07.05.01.02 0 .04 0 .06-.14.66.05 1.35.52 1.83.03.03 0 .07-.03.11l-.01.02-4.56 7.06c-.01.02-.02.04-.04.05s-.06.01-.09 0c-.18-.05-.36-.07-.54-.07-.16 0-.34.03-.52.06-.02 0-.04.01-.05 0-.02-.01-.03-.03-.05-.05zm5.4-5.4 5.81-5.81c.81-.81 1.21-1.21 1.67-1.36.39-.12.81-.12 1.21 0 .47.15.87.55 1.67 1.36l1.26 1.26-4.14 6.4c-.01.02-.02.03-.04.05s-.06.01-.09 0c-.66-.2-1.38-.06-1.92.37-.03.03-.07.01-.1 0-.53-.24-4.73-2.01-5.33-2.27zm12.5-3.67 3.82 3.82-.92 5.7v.02c0 .01 0 .03-.01.04-.01.02-.03.02-.05.03-.2.06-.38.15-.55.27-.01.01-.01.01-.02.02s-.02.02-.04.02c-.01 0-.03 0-.04-.01l-5.82-2.47-.01-.01c-.04-.02-.08-.03-.08-.07-.03-.32-.14-.64-.31-.91-.03-.05-.06-.09-.03-.14zm-3.93 8.6 5.45 2.31c.03.01.06.03.08.06.01.02.01.04 0 .06-.02.08-.03.17-.03.26v.15c0 .04-.04.05-.08.07h-.01c-.86.37-12.13 5.17-12.15 5.17s-.03 0-.05-.02c-.03-.03 0-.07.03-.11 0-.01.01-.01.01-.02l4.48-6.94.01-.01c.03-.04.06-.09.1-.09l.05.01c.1.01.19.03.28.03.68 0 1.31-.33 1.69-.9.01-.02.02-.03.03-.04.04-.01.08 0 .11.01zm-6.25 9.19 12.28-5.24s.02 0 .03.02c.07.07.12.11.18.15l.03.02c.02.01.05.03.05.06v.02l-1.05 6.46v.03c-.01.05-.01.11-.06.11-.57.04-1.08.36-1.37.85v.01c-.01.02-.03.05-.05.06s-.05.01-.07 0l-9.79-2.02c-.02-.02-.16-.53-.18-.53z" fill="url(#a)"/></svg>
|
Before Width: | Height: | Size: 4.6 KiB |
|
@ -1 +0,0 @@
|
|||
<svg enable-background="new 0 0 284 65" viewBox="0 0 284 65" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m37.6.2 37 64h-74z"/><path d="m130 5.2-27.7 48-27.7-48h10.4l17.3 30 17.3-30z"/><path d="m141.8 16.3c-11-.1-19.1 7-19.2 17.8s8.8 18.1 19.8 18.2c6.7.1 12.6-2.5 16.3-6.9l-7.6-4.5c-2 2.2-5.1 3.5-8.6 3.4-4.8 0-8.8-2.6-10.3-6.6l28 .3c.2-1.1.4-2.3.4-3.5.2-10.9-7.7-18.1-18.8-18.2zm-9.5 14.4c1.3-4 4.7-6.5 9.5-6.4 4.8 0 8.2 2.6 9.4 6.6z"/><path d="m189 17.3-.1 9.7c-1-.3-2.1-.5-3.2-.5-5.8-.1-10 3.9-10.1 9.9l-.1 14.8-9-.1.3-34 9 .1-.1 9.2c.1-5 6-9.1 13.3-9.1z"/><path d="m200.9 34.2c0 6 3.9 10 10 10 4.1 0 7.2-1.9 8.8-4.9l7.7 4.4c-3.2 5.3-9.1 8.5-16.5 8.5-11.1 0-19-7.2-19-18s8-18 19-18c7.3 0 13.3 3.2 16.5 8.5l-7.7 4.4c-1.6-3-4.7-4.9-8.8-4.9-6.1 0-10 4-10 10z"/><path d="m268.4 34.2c0-10.8-8-18-19-18s-19 7.2-19 18 9 18 20 18c6.7 0 12.5-2.6 16.2-7.1l-7.6-4.4c-2 2.2-5.1 3.5-8.5 3.5-4.8 0-8.9-2.5-10.4-6.5h28c.1-1.1.3-2.2.3-3.5zm-28.5-3.4c1.2-4 4.7-6.5 9.4-6.5 4.8 0 8.2 2.5 9.5 6.5z"/><path d="m274.4 5.2h9v46h-9z"/></g></svg>
|
Before Width: | Height: | Size: 1 KiB |
Before Width: | Height: | Size: 4.2 KiB |
|
@ -1,11 +0,0 @@
|
|||
<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
#flame { fill: #FF5D01; }
|
||||
#a { fill: #000014; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#a { fill: #fff; }
|
||||
}
|
||||
</style>
|
||||
<path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
|
||||
<path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
|
||||
</svg>
|
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 1.4 MiB |
|
@ -1,69 +0,0 @@
|
|||
<article>
|
||||
<slot></slot>
|
||||
</article>
|
||||
|
||||
<style lang="scss">
|
||||
article {
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
:global(article > * + *) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
h1 {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
em {
|
||||
font-style: normal;
|
||||
color: var(--color-green);
|
||||
}
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
width: max-content;
|
||||
margin: 2.5rem auto;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a::before,
|
||||
a::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
border: 2px solid white;
|
||||
border-left-style: dotted;
|
||||
border-right-style: dotted;
|
||||
}
|
||||
a::before {
|
||||
border-right: 0;
|
||||
left: 0;
|
||||
}
|
||||
a::after {
|
||||
border-left: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
|
@ -1,15 +0,0 @@
|
|||
---
|
||||
import AvatarList from './AvatarList.astro';
|
||||
---
|
||||
|
||||
<footer>
|
||||
<AvatarList />
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding: 2rem 0;
|
||||
border-top: 3px solid var(--theme-divider);
|
||||
}
|
||||
</style>
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
import authorData from '../data/authors.json';
|
||||
|
||||
export interface Props {
|
||||
authorId: string;
|
||||
}
|
||||
|
||||
const { authorId } = Astro.props;
|
||||
const author = authorData[authorId];
|
||||
---
|
||||
|
||||
<div class="author">
|
||||
<p>by {author.name}{' '}<a href={`https://twitter.com/${author.twitter}`}>@{author.twitter}</a></p>
|
||||
</div>
|
|
@ -1,92 +0,0 @@
|
|||
<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
|
||||
|
||||
<ul class="avatar-list">
|
||||
<li>
|
||||
<a href="https://smolcss.dev/#smol-avatar-list"
|
||||
><img
|
||||
alt="Avatar 1"
|
||||
width="64"
|
||||
height="64"
|
||||
src="https://avataaars.io/?avatarStyle=Transparent&topType=LongHairBun&accessoriesType=Blank&hairColor=Auburn&facialHairType=BeardMedium&facialHairColor=Auburn&clotheType=ShirtCrewNeck&clotheColor=Blue01&eyeType=Side&eyebrowType=RaisedExcitedNatural&mouthType=Serious&skinColor=Tanned"
|
||||
/></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://smolcss.dev/#smol-avatar-list"
|
||||
><img
|
||||
alt="Avatar 2"
|
||||
width="64"
|
||||
height="64"
|
||||
src="https://avataaars.io/?avatarStyle=Transparent&topType=LongHairDreads&accessoriesType=Blank&hairColor=Brown&facialHairType=Blank&clotheType=ShirtScoopNeck&clotheColor=PastelGreen&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Smile&skinColor=Tanned"
|
||||
/></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://smolcss.dev/#smol-avatar-list"
|
||||
><img
|
||||
alt="Avatar 3"
|
||||
width="64"
|
||||
height="64"
|
||||
src="https://avataaars.io/?avatarStyle=Transparent&topType=LongHairCurly&hairColor=BrownDark&facialHairType=Blank&clotheType=GraphicShirt&clotheColor=Pink&graphicType=Diamond&eyeType=Side&eyebrowType=Default&mouthType=Default&skinColor=Brown"
|
||||
/></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.avatar-list {
|
||||
--avatar-size: 2.5rem;
|
||||
--avatar-count: 3;
|
||||
|
||||
display: grid;
|
||||
list-style: none;
|
||||
/* Default to displaying most of the avatar to
|
||||
enable easier access on touch devices, ensuring
|
||||
the WCAG touch target size is met or exceeded */
|
||||
grid-template-columns: repeat(var(--avatar-count), max(44px, calc(var(--avatar-size) / 1.15)));
|
||||
/* `padding` matches added visual dimensions of
|
||||
the `box-shadow` to help create a more accurate
|
||||
computed component size */
|
||||
padding: 0.08em;
|
||||
font-size: var(--avatar-size);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) and (any-pointer: fine) {
|
||||
.avatar-list {
|
||||
/* We create 1 extra cell to enable the computed
|
||||
width to match the final visual width */
|
||||
grid-template-columns: repeat(calc(var(--avatar-count) + 1), calc(var(--avatar-size) / 1.75));
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-list li {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
}
|
||||
|
||||
.avatar-list li:hover ~ li a,
|
||||
.avatar-list li:focus-within ~ li a {
|
||||
transform: translateX(33%);
|
||||
}
|
||||
|
||||
.avatar-list img,
|
||||
.avatar-list a {
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-list a {
|
||||
transition: transform 180ms ease-in-out;
|
||||
}
|
||||
|
||||
.avatar-list img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.avatar-list a:focus {
|
||||
outline: 2px solid transparent;
|
||||
/* Double-layer trick to work for dark and light backgrounds */
|
||||
box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
|
||||
}
|
||||
</style>
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
url: string;
|
||||
title: string;
|
||||
}
|
||||
const { url, title } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={url}>
|
||||
← {title}
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
display: block;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
|
@ -1,38 +0,0 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
canonicalURL: URL | string;
|
||||
image?: string;
|
||||
}
|
||||
const { title, description, image = 'https://astro.build/social.jpg?v=1', canonicalURL } = Astro.props;
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="theme-color" content="#ff5e00" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" />
|
||||
<link rel="sitemap" href="/sitemap.xml" />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={canonicalURL} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={image} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={canonicalURL} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={image} />
|
|
@ -1,42 +0,0 @@
|
|||
---
|
||||
export interface Props {
|
||||
author: string;
|
||||
source: string;
|
||||
sourceHref: string;
|
||||
}
|
||||
const { author, source, sourceHref } = Astro.props;
|
||||
---
|
||||
|
||||
<blockquote>
|
||||
<slot />
|
||||
<div class="source">
|
||||
<p>{author}</p>
|
||||
<a href={sourceHref}>{source}</a>
|
||||
</div>
|
||||
</blockquote>
|
||||
|
||||
<style>
|
||||
blockquote {
|
||||
font-size: 1.5rem;
|
||||
--padding-block: 1rem;
|
||||
--padding-inline: 1.25rem;
|
||||
--color: var(--theme-divider);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: var(--padding-block) var(--padding-inline);
|
||||
margin-left: calc(var(--padding-inline) * -1);
|
||||
margin-right: calc(var(--padding-inline) * -1);
|
||||
|
||||
background: transparent;
|
||||
border-left: calc(var(--padding-inline) / 2) solid var(--color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
blockquote .source {
|
||||
font-weight: 500;
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
import BaseHead from './BaseHead.astro';
|
||||
|
||||
const { title, description, image, canonicalURL } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseHead {title} {description} {image} {canonicalURL} />
|
||||
<link rel="stylesheet" href={Astro.resolve('../scss/blog.scss')} />
|
|
@ -1,129 +0,0 @@
|
|||
<header class="layout">
|
||||
<article>
|
||||
<h1>
|
||||
<a href="/">
|
||||
<svg class="logo" width="32" height="32" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
#flame {
|
||||
fill: #ff5d01;
|
||||
}
|
||||
#a {
|
||||
fill: #000014;
|
||||
}
|
||||
</style>
|
||||
<title>Astro</title>
|
||||
<path
|
||||
id="a"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z"
|
||||
></path>
|
||||
<path
|
||||
id="flame"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Astro</span>
|
||||
</a>
|
||||
</h1>
|
||||
<a class="header-subitem header-subitem-secondary" href="https://docs.astro.build/" target="_blank">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="book"
|
||||
class="svg-inline--fa fa-book fa-w-14"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"
|
||||
></path></svg
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
<a class="header-subitem" href="https://twitter.com/astrodotbuild" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
|
||||
><path
|
||||
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
|
||||
></path></svg
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
<a class="header-subitem header-subitem-secondary" href="https://github.com/withastro/astro" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
|
||||
></path>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</article>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
height: 5rem;
|
||||
}
|
||||
article {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-subitem {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--theme-text-lighter);
|
||||
font-size: initial;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.header-subitem:hover {
|
||||
color: var(--theme-accent);
|
||||
}
|
||||
.header-subitem svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 40em) {
|
||||
.header-subitem-secondary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 20em) {
|
||||
.header-subitem {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
transform: translateY(0.25rem);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
h1 a {
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
}
|
||||
</style>
|
|
@ -1,110 +0,0 @@
|
|||
---
|
||||
import Author from './Author.astro';
|
||||
import GithubStarButton from './GithubStarButton.astro';
|
||||
import GoogleAnalytics from './GoogleAnalytics.astro';
|
||||
import BackArrow from './BackArrow.astro';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
author?: string;
|
||||
publishDate: string;
|
||||
heroImage?: string;
|
||||
heroImageAlt?: string;
|
||||
}
|
||||
|
||||
const { title, author, publishDate, heroImage, heroImageAlt } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="layout">
|
||||
<article>
|
||||
<header>
|
||||
<img width="720" height="420" class="hero-image" loading="lazy" src={heroImage || '/social.jpg'} alt={heroImageAlt || ''} />
|
||||
<p class="publish-date">{publishDate}</p>
|
||||
<h1 class="title">{title}</h1>
|
||||
{author && <Author authorId={author} />}
|
||||
<GithubStarButton />
|
||||
</header>
|
||||
<main class="content">
|
||||
<slot />
|
||||
<BackArrow url={'/blog/'} title={'Back to all blog posts'} />
|
||||
</main>
|
||||
</article>
|
||||
<GoogleAnalytics />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.hero-image {
|
||||
width: 100vw;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
max-width: 1280px;
|
||||
|
||||
@media (max-width: 50em) {
|
||||
height: 260px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 8rem;
|
||||
|
||||
:global(> * + *) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
:global(h2) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
:global(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:global(figure) {
|
||||
background-color: var(--theme-bg-accent);
|
||||
margin: 2.5rem 0;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
// hack until <figcaption> parsing fixed
|
||||
:global(figcaption *) {
|
||||
display: inline;
|
||||
|
||||
& + :global(*) {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding-bottom: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 4px solid var(--theme-divider);
|
||||
}
|
||||
|
||||
.title,
|
||||
.author,
|
||||
.publish-date {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.publish-date,
|
||||
.author {
|
||||
color: var(--theme-text-lighter);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
|
@ -1,57 +0,0 @@
|
|||
---
|
||||
import Author from './Author.astro';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
publishDate: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { title, publishDate, href } = Astro.props;
|
||||
---
|
||||
|
||||
<article class="post-preview">
|
||||
<header>
|
||||
<p class="publish-date">{publishDate}</p>
|
||||
<a {href}><h1 class="title">{title}</h1></a>
|
||||
</header>
|
||||
<slot />{' '}<a {href}>Read more →</a>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.content :global(main > * + *) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
padding-bottom: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 4px solid var(--theme-divider);
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title,
|
||||
.author,
|
||||
.publish-date {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.publish-date,
|
||||
.author {
|
||||
font-size: 1.25rem;
|
||||
color: var(--theme-text-lighter);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
</style>
|
|
@ -1,8 +0,0 @@
|
|||
<!-- Place this tag where you want the button to render. -->
|
||||
<div class="hidden-mobile" style="text-align: center; height: 36px; margin-top: 0.75rem;">
|
||||
<a class="github-button" href="https://github.com/withastro/astro" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star withastro/astro on GitHub"
|
||||
>Star</a
|
||||
>
|
||||
</div>
|
||||
<!-- Place this tag in your head or just before your close body tag. -->
|
||||
<script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>
|
|
@ -1,10 +0,0 @@
|
|||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-130280175-15"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-130280175-15');
|
||||
</script>
|
|
@ -1,86 +0,0 @@
|
|||
<svg class="logo" width="158" height="170" viewBox="0 0 158 170" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M96.5039 9.46441C97.4758 10.671 97.9714 12.2991 98.9626 15.5553L120.617 86.6902C112.611 82.5368 103.907 79.5413 94.7281 77.9252L80.6289 30.2798C80.3982 29.5002 79.6822 28.9654 78.8692 28.9654C78.0541 28.9654 77.3367 29.503 77.1079 30.2853L63.1795 77.9011C53.9579 79.51 45.2146 82.5109 37.1741 86.6793L58.9347 15.5388C59.929 12.2882 60.4262 10.6629 61.3981 9.45854C62.2562 8.39532 63.3723 7.56959 64.64 7.06003C66.076 6.48285 67.7756 6.48285 71.1749 6.48285H86.7174C90.1211 6.48285 91.823 6.48285 93.2603 7.06124C94.5291 7.575 95.6459 8.39925 96.5039 9.46441Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z"
|
||||
fill="#FF5D01"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z"
|
||||
fill="url(#paint1_linear)"
|
||||
/>
|
||||
<path
|
||||
d="M11.9957 169.024C20.0117 169.024 24.8597 167.104 27.6917 163.12C27.6917 164.896 27.7877 166.576 28.0277 168.112H32.7797C32.3477 165.616 32.2517 163.984 32.2517 159.472V153.328C32.2517 146.704 27.1157 143.2 17.3237 143.2C7.8677 143.2 1.7237 146.848 0.955701 152.128H5.9957C6.7637 148.576 10.7477 146.704 17.3237 146.704C23.8037 146.704 27.6437 148.96 27.6437 152.8V153.28L12.6677 154.144C6.5717 154.48 4.3157 155.344 2.5877 156.592C0.955701 157.792 0.0437012 159.664 0.0437012 161.824C0.0437012 166.384 4.7477 169.024 11.9957 169.024ZM13.5317 165.616C7.9637 165.616 4.8917 164.32 4.8917 161.728C4.8917 158.944 6.8117 157.696 13.5797 157.264L27.6437 156.4V157.504C27.6437 162.544 21.7397 165.616 13.5317 165.616Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M55.9352 169.024C65.8712 169.024 69.8552 165.76 69.8552 161.008C69.8552 157.072 67.4072 155.056 61.1672 154.528L49.5032 153.616C46.3352 153.376 44.5592 152.464 44.5592 150.496C44.5592 148 47.2952 146.704 53.1992 146.704C59.9192 146.704 63.4232 148.048 65.7272 151.024L69.6152 149.152C67.2152 145.408 61.8872 143.2 53.6312 143.2C45.1352 143.2 40.0472 146.032 40.0472 150.688C40.0472 154.864 43.0712 156.88 48.7832 157.36L60.3512 158.272C64.1432 158.56 65.2952 159.328 65.2952 161.296C65.2952 164.128 62.3672 165.472 56.5592 165.472C49.5032 165.472 45.0392 163.552 42.8792 160.048L39.0872 162.112C42.0152 166.528 47.1512 169.024 55.9352 169.024Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M79.6765 147.712V159.28C79.6765 164.032 81.3085 168.784 90.1885 168.784C92.4445 168.784 95.1805 168.352 96.3805 167.824V163.936C94.7005 164.32 92.6845 164.608 90.7165 164.608C86.5405 164.608 84.2845 162.976 84.2845 158.848V147.712H96.2845V144.112H84.2845V136L79.6765 137.872V144.112H72.1404V147.712H79.6765Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M107.728 144.112H103.504V168.112H108.064V159.136C108.064 155.68 108.736 152.752 110.656 150.736C112.336 148.864 114.496 147.808 118.288 147.808C119.584 147.808 120.4 147.904 121.504 148.096V143.68C120.496 143.44 119.632 143.392 118.336 143.392C113.2 143.392 109.12 146.416 107.728 151.072V144.112Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M140.724 169.024C150.948 169.024 157.956 163.84 157.956 156.112C157.956 148.384 150.948 143.2 140.724 143.2C130.5 143.2 123.492 148.384 123.492 156.112C123.492 163.84 130.5 169.024 140.724 169.024ZM140.724 165.232C133.188 165.232 128.34 161.68 128.34 156.112C128.34 150.544 133.188 146.992 140.724 146.992C148.212 146.992 153.108 150.544 153.108 156.112C153.108 161.68 148.212 165.232 140.724 165.232Z"
|
||||
fill="white"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="paint1_linear" x1="115.168" y1="65.245" x2="94.0326" y2="109.491" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF1639" />
|
||||
<stop offset="1" stop-color="#FF1639" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<style lang="scss">
|
||||
.logo {
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.title svg {
|
||||
margin-right: -100%;
|
||||
}
|
||||
.title svg text {
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.title svg text.span {
|
||||
fill: white;
|
||||
font-size: 16.2px;
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
.title svg text.em {
|
||||
fill: var(--color-green);
|
||||
transform: translate(0, 36px);
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
.title svg {
|
||||
margin-right: 0;
|
||||
margin-bottom: -40px;
|
||||
}
|
||||
.title svg text.span {
|
||||
font-size: 16px;
|
||||
}
|
||||
.title svg text.em {
|
||||
transform: translate(190px, 18px);
|
||||
}
|
||||
}
|
||||
</style>
|
Before Width: | Height: | Size: 5.5 KiB |
|
@ -1,18 +0,0 @@
|
|||
<main>
|
||||
<slot></slot>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 760px;
|
||||
margin: auto;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
:global(main > *) {
|
||||
grid-column: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
</style>
|
|
@ -1,153 +0,0 @@
|
|||
<header class={`layout is-centered`}>
|
||||
<nav>
|
||||
<div class="logoWrapper" itemscope itemtype="https://schema.org/Organization">
|
||||
<a href="/" itemprop="url">
|
||||
<svg
|
||||
class="logo"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 256 256"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-labelledby="astroSvgTitle astroSvgDesc"
|
||||
role="img"
|
||||
itemprop="logo"
|
||||
>
|
||||
<title id="astroSvgTitle">Astro logo</title>
|
||||
<desc id="astroSvgDesc">A white uppercase lambda-like icon with a flame emanating from the bottom.</desc>
|
||||
<style>
|
||||
#flame {
|
||||
fill: #ff5d01;
|
||||
}
|
||||
#a {
|
||||
fill: white;
|
||||
}
|
||||
</style>
|
||||
<path
|
||||
id="a"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z"
|
||||
></path>
|
||||
<path
|
||||
id="flame"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z"
|
||||
></path>
|
||||
</svg>
|
||||
<span itemprop="name">Astro</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul role="list">
|
||||
<li>
|
||||
<a class="header-subitem" href="https://docs.astro.build/">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="book"
|
||||
class="svg-inline--fa fa-book fa-w-14"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"
|
||||
></path>
|
||||
</svg>
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="header-subitem header-subitem-secondary" href="https://twitter.com/astrodotbuild">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
|
||||
></path>
|
||||
</svg>
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="header-subitem header-subitem-secondary" href="https://github.com/withastro/astro">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
|
||||
></path>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
height: 5rem;
|
||||
}
|
||||
header.is-centered article {
|
||||
justify-content: center;
|
||||
}
|
||||
nav,
|
||||
nav ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
.header-subitem {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--theme-text-lighter);
|
||||
font-size: initial;
|
||||
padding: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
.header-subitem:hover {
|
||||
color: var(--theme-accent);
|
||||
}
|
||||
.header-subitem svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
@media (max-width: 40em) {
|
||||
.header-subitem-secondary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 20em) {
|
||||
.header-subitem {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.logoWrapper {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.logoWrapper a {
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 0.5rem 0 0;
|
||||
}
|
||||
.logo {
|
||||
transform: translateY(0.25rem);
|
||||
}
|
||||
svg {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
</style>
|
|
@ -1,48 +0,0 @@
|
|||
---
|
||||
export interface Props {
|
||||
title?: string;
|
||||
type?: 'tip' | 'warning' | 'error';
|
||||
}
|
||||
const { type = 'tip', title } = Astro.props;
|
||||
---
|
||||
|
||||
<aside class={`note type-${type}`}>
|
||||
{title && <label>{title}</label>}
|
||||
<slot />
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.note {
|
||||
--padding-block: 1rem;
|
||||
--padding-inline: 1.25rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: var(--padding-block) var(--padding-inline);
|
||||
margin-left: calc(var(--padding-inline) * -1);
|
||||
margin-right: calc(var(--padding-inline) * -1);
|
||||
|
||||
background: var(--theme-bg-offset);
|
||||
border-left: calc(var(--padding-inline) / 2) solid var(--color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.note label {
|
||||
font-weight: 500;
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.note.type-tip {
|
||||
--color: var(--color-green);
|
||||
--color-rgb: var(--color-green-rgb);
|
||||
}
|
||||
.note.type-warning {
|
||||
--color: var(--color-yellow);
|
||||
--color-rgb: var(--color-yellow-rgb);
|
||||
}
|
||||
.note.type-error {
|
||||
--color: var(--color-red);
|
||||
--color-rgb: var(--color-red-rgb);
|
||||
}
|
||||
</style>
|
|
@ -1,28 +0,0 @@
|
|||
---
|
||||
export interface Props {
|
||||
code: string;
|
||||
}
|
||||
const { code } = Astro.props;
|
||||
---
|
||||
|
||||
<pre><code>{String(code).trim().split('\n').map(
|
||||
line => <span class="line">{
|
||||
line.startsWith('#') ? <span class="comment">{line}</span> : line
|
||||
}</span>)
|
||||
}</code></pre>
|
||||
|
||||
<style>
|
||||
pre,
|
||||
code {
|
||||
white-space: pre;
|
||||
}
|
||||
.comment {
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
.line {
|
||||
display: block;
|
||||
}
|
||||
.line:empty::after {
|
||||
content: ' ';
|
||||
}
|
||||
</style>
|
|
@ -1,26 +0,0 @@
|
|||
---
|
||||
import Planets from './Planets.astro';
|
||||
import Stars from './Stars.astro';
|
||||
---
|
||||
|
||||
<div class="space">
|
||||
<Planets />
|
||||
<Stars />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.space {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
opacity: 0.6;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
|
@ -1,43 +0,0 @@
|
|||
<div class="wrapper">
|
||||
<h2 class="title">Sponsored by</h2>
|
||||
<div class="list">
|
||||
<a href="https://www.netlify.com/" target="_blank"><img src="/assets/netlify.svg" width="147" height="40" alt="Netlify" /></a>
|
||||
<a href="https://www.vercel.com/" target="_blank"><img src="/assets/vercel.svg" width="150" height="34" alt="Vercel" /></a>
|
||||
</div>
|
||||
<div class="oc"><a href="https://opencollective.com/astrodotbuild" target="_blank">Astro on Open Collective</a></div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.wrapper {
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.list {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
vertical-align: middle;
|
||||
margin-left: 0.75em;
|
||||
margin-right: 0.75em;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.oc {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 0.75em;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
|
@ -1,140 +0,0 @@
|
|||
<div class="stars">
|
||||
<svg class="meteor meteor-a" width="245" height="8" viewBox="0 0 245 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M244.056 4.01L4.16456 7.94042C1.96643 7.97644 0.165161 6.20444 0.165161 4.00602V4.00602C0.165161 1.80754 1.9665 0.0355242 4.16468 0.0716125L244.056 4.01Z"
|
||||
fill="url(#paint0_linear)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="11.8939" y1="8.00591" x2="256.078" y2="8.00591" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<svg class="meteor meteor-b" width="245" height="8" viewBox="0 0 245 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M244.056 4.01L4.16456 7.94042C1.96643 7.97644 0.165161 6.20444 0.165161 4.00602V4.00602C0.165161 1.80754 1.9665 0.0355242 4.16468 0.0716125L244.056 4.01Z"
|
||||
fill="url(#paint0_linear)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="11.8939" y1="8.00591" x2="256.078" y2="8.00591" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<svg class="meteor meteor-c" width="245" height="8" viewBox="0 0 245 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M244.056 4.01L4.16456 7.94042C1.96643 7.97644 0.165161 6.20444 0.165161 4.00602V4.00602C0.165161 1.80754 1.9665 0.0355242 4.16468 0.0716125L244.056 4.01Z"
|
||||
fill="url(#paint0_linear)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="11.8939" y1="8.00591" x2="256.078" y2="8.00591" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<svg class="bg" width="1440" height="1090" viewBox="0 0 1440 1090" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="58" cy="226.5" r="2" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="534.857" cy="127.5" r="2" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="90.1501" cy="37.3223" r="2" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="1009" cy="100.5" r="2" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="166" cy="493.833" r="2" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="1386" cy="412.833" r="2" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="100" cy="857.167" r="2" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="1296.01" cy="748.988" r="2" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="1017" cy="767.167" r="2" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="84.1501" cy="212.209" r="6" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="1351" cy="119.5" r="6" fill="white" fill-opacity="0.4" />
|
||||
<circle cx="1179" cy="785" r="6" fill="white" fill-opacity="0.4" />
|
||||
<path
|
||||
d="M983.911 60.1743L975.34 55.0487L967.148 60.7596L972.274 52.1889L966.563 43.9965L975.133 49.1221L983.326 43.4111L978.2 51.9819L983.911 60.1743Z"
|
||||
fill="white"
|
||||
fill-opacity="0.4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stars {
|
||||
--duration: 10s;
|
||||
--delay: 0s;
|
||||
--dist: 480px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.bg {
|
||||
object-position: top center;
|
||||
object-fit: fill;
|
||||
min-width: 1200px;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.meteor {
|
||||
display: none;
|
||||
position: absolute;
|
||||
transform: scale(var(--scale)) rotate(-34deg);
|
||||
animation: meteor var(--duration) var(--delay) cubic-bezier(0.895, 0.03, 0.685, 0.22) infinite both;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.meteor {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.meteor-a {
|
||||
--duration: 10s;
|
||||
--scale: 1;
|
||||
top: calc(var(--dist) * -0.25);
|
||||
left: calc(var(--dist));
|
||||
}
|
||||
.meteor-b {
|
||||
--duration: 9s;
|
||||
--delay: 9s;
|
||||
--scale: 0.8;
|
||||
top: -5%;
|
||||
right: 10%;
|
||||
}
|
||||
.meteor-c {
|
||||
--duration: 12s;
|
||||
--delay: 6s;
|
||||
--scale: 1.5;
|
||||
bottom: 10%;
|
||||
right: -256px;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
@keyframes meteor {
|
||||
0% {
|
||||
transform: scale(calc(var(--scale) * 0.75)) rotate(-34deg) translateX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
40%,
|
||||
100% {
|
||||
transform: scale(calc(var(--scale) * 1.1)) rotate(-34deg) translateX(calc(var(--dist) * -1));
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,19 +0,0 @@
|
|||
<h1 class="title">Build faster websites with <em>less client-side Javascript</em></h1>
|
||||
|
||||
<style lang="scss">
|
||||
.title {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 400;
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.1;
|
||||
|
||||
@media (min-width: 50em) {
|
||||
font-size: 1.525rem;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: var(--color-green);
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
const onload = `
|
||||
const link = (rel, href) => {
|
||||
document.querySelector(\`[rel='\${rel}'][href='\${href}']\`) || document.head.append(
|
||||
Object.assign(
|
||||
document.createElement('link'),
|
||||
{
|
||||
rel,
|
||||
href: href
|
||||
}
|
||||
)
|
||||
)
|
||||
};
|
||||
const preconnect = () => {
|
||||
link('preconnect', 'https://googleads.g.doubleclick.net');
|
||||
link('preconnect', 'https://static.doubleclick.net');
|
||||
link('preconnect', 'https://www.google.com');
|
||||
link('preconnect', 'https://www.youtube-nocookie.com');
|
||||
};
|
||||
const host = this.parentNode;
|
||||
const v = host.getAttribute('v');
|
||||
const iframe = Object.assign(
|
||||
document.createElement('iframe'),
|
||||
{
|
||||
src: \`https://www.youtube-nocookie.com/embed/\${v}?autoplay=1\`,
|
||||
allow: 'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture',
|
||||
allowFullscreen: true,
|
||||
}
|
||||
);
|
||||
const button = Object.assign(
|
||||
document.createElement('button'),
|
||||
{
|
||||
style: \`background-image:url('https://i.ytimg.com/vi/\${v}/hqdefault.jpg')\`,
|
||||
onpointerenter: preconnect,
|
||||
onfocus: preconnect,
|
||||
onclick(event) {
|
||||
event.currentTarget.replaceWith(iframe)
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
button.setAttribute('aria-label', host.getAttribute('alt'));
|
||||
|
||||
host.replaceChildren(button);
|
||||
`.replace(/[\n\r\t]+/g, '');
|
||||
---
|
||||
|
||||
<lite-youtube {...Astro.props}>
|
||||
<a href={`https://www.youtube.com/watch?v=${Astro.props.v}`}>
|
||||
<img src={`https://i.ytimg.com/vi/${Astro.props.v}/hqdefault.jpg`} loading="lazy" alt={Astro.props.alt} />
|
||||
</a><script type="module" src="data:text/javascript," {onload}></script>
|
||||
</lite-youtube>
|
|
@ -1,82 +0,0 @@
|
|||
lite-youtube {
|
||||
background: #000;
|
||||
contain: content;
|
||||
display: block;
|
||||
max-width: 720px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* responsive iframe with a 16:9 aspect ratio (thanks https://css-tricks.com/responsive-iframes/) */
|
||||
|
||||
lite-youtube::after {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-bottom: calc(100% / (16 / 9));
|
||||
}
|
||||
|
||||
lite-youtube > iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* YT's actual play button svg */
|
||||
|
||||
lite-youtube > a,
|
||||
lite-youtube > button {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
lite-youtube > a > img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
lite-youtube > a::after,
|
||||
lite-youtube > button::after {
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='red' fill-opacity='.8' d='M66.5 7.7c-.8-2.9-2.5-5.4-5.4-6.2C55.8.1 34 0 34 0S12.2.1 6.9 1.6c-3 .7-4.6 3.2-5.4 6.1a89.6 89.6 0 000 32.5c.8 3 2.5 5.5 5.4 6.3C12.2 47.9 34 48 34 48s21.8-.1 27.1-1.6c3-.7 4.6-3.2 5.4-6.1C68 35 68 24 68 24s0-11-1.5-16.3z'/%3E%3Cpath fill='%23fff' d='M45 24L27 14v20'/%3E%3C/svg%3E");
|
||||
display: block;
|
||||
width: 68px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
inset: calc(50% - 68px / 2) calc(50% - 48px / 2) auto auto;
|
||||
transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
lite-youtube > button {
|
||||
background: #000 50% 50% / cover;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* gradient */
|
||||
|
||||
lite-youtube button::before {
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAQAAAC58SIOAAAAaklEQVR42nWOUQrAMAhD1e7+B9kZ1zqYKAk6yMfLa8Ca3CbbxL+cTJgNNeDhTZmdQXb24/KAPNNFjDf2CQSMJGCVViveAKuy1AZYFaCqcrVkA4NgGeTKYlg/Jvhio/w6LuvQNV1U3sS31wvH7lU36biAMgAAAABJRU5ErkJggg==')
|
||||
top repeat-x;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 60px;
|
||||
padding-bottom: 50px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
lite-youtube > button::after {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
lite-youtube:hover > button::after,
|
||||
lite-youtube button:focus::after {
|
||||
filter: none;
|
||||
}
|
|
@ -1,14 +0,0 @@
|
|||
export const sidebar = [
|
||||
{
|
||||
text: 'Introduction',
|
||||
children: [
|
||||
{ text: 'Welcome', link: '/' },
|
||||
{ text: 'Example', link: '/example' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const mediaQueries = {
|
||||
mobile: '(max-width: 600px)',
|
||||
desktop: '(min-width: 601px)',
|
||||
};
|
|
@ -1,18 +0,0 @@
|
|||
{
|
||||
"drew": {
|
||||
"name": "Drew Powers",
|
||||
"twitter": "drwpow"
|
||||
},
|
||||
"fred": {
|
||||
"name": "Fred K. Schott",
|
||||
"twitter": "FredKSchott"
|
||||
},
|
||||
"matthew": {
|
||||
"name": "Matthew Phillips",
|
||||
"twitter": "matthewcp"
|
||||
},
|
||||
"nate": {
|
||||
"name": "Nate Moore",
|
||||
"twitter": "n_moore"
|
||||
}
|
||||
}
|
|
@ -1,73 +0,0 @@
|
|||
---
|
||||
title: 'Astro 0.18 Release'
|
||||
description: 'Introducing: Responsive partial hydration • Solid.js support • Lit SSR support • Named slots • Global style support • and more!'
|
||||
publishDate: 'July 27, 2021'
|
||||
author: 'matthew'
|
||||
lang: 'en'
|
||||
---
|
||||
|
||||
A little over a month ago, the first public beta for Astro was released to the world. Since then, we have been fixing bugs and gathering your feedback on what to tackle next. Today, we are excited to announce the release of some of our most requested features.
|
||||
|
||||
We are excited to introduce Astro v0.18, featuring:
|
||||
|
||||
* __[Responsive partial hydration:](#responsive-component-hydration)__ Hydrate components with CSS media queries.
|
||||
* __[Named slots:](#named-slots)__ Support multiple content entrypoints inside of Astro components.
|
||||
* __[Solid.js support:](#solid-support)__ Use [Solid.js](https://www.solidjs.com/) components in Astro.
|
||||
* __[Lit support:](#solid-support)__ Use [Lit SSR](https://lit.dev/) to get server-side rendering for web components.
|
||||
* [`<style global>` support](https://docs.astro.build/guides/styling#overview), [GitHub syntax highlighting](https://twitter.com/n_moore/status/1417881860051509250) and a [shiny new docs site.](https://docs.astro.build/)
|
||||
|
||||
## Responsive partial hydration
|
||||
|
||||
|
||||
<img src="/assets/blog/astro-018/responsive-hydration.jpg" alt="Code example that shows off using the new client:media hydrator." />
|
||||
<!-- Saved from https://carbon.now.sh/16xchqPVdt5IEAY3Czg3 -->
|
||||
|
||||
Responsive websites often load components that are only visible on certain device sizes, like a mobile sidebar menu. As a developer, it can be difficult (impossible?) to avoid loading mobile-only code on non-mobile devices. The result is wasted time spent on code that will never even be seen by the end user.
|
||||
|
||||
Astro solves the problem of unnecessary JavaScript with [partial hydration](https://docs.astro.build/core-concepts/component-hydration), a technique that involves only hydrating the components that need interactivity and leaving the rest as static HTML. **Astro v0.18 adds a new way to customize partial hydration using [CSS media queries](https://docs.astro.build/core-concepts/component-hydration#mycomponent-clientmediaquery-) that avoid sending code to devices that don't need it.**
|
||||
|
||||
Add the `client:media` directive to a component and it will only hydrate once the media condition is met. On a mobile phone? Skip any expensive and unneccesary JavaScript for the desktop header that you'll never see. On a desktop or laptop? Don't load that mobile hamburger menu. This is all part of Astro's commitment to minimizing the unnecesary JavaScript that you send to your users.
|
||||
|
||||
## Named slots in Astro components
|
||||
|
||||
![Using multiple slots to provide the head and body parts of a Layout component.](/assets/blog/astro-018/named-slots.png)
|
||||
<!-- https://carbon.now.sh/9UwJkMCezRIOhzac5VVp -->
|
||||
|
||||
[Named slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots) are a standard web feature used in [browser APIs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots) and web frameworks like [Vue](https://vuejs.org/v2/guide/components-slots.html#Named-Slots). In this release, [Astro adds support for named slots](https://docs.astro.build/core-concepts/astro-components#slots) to Astro components, pages, and layouts.
|
||||
|
||||
Named slots are particularly useful for page layouts. A layout can now specify slots for different sections of the page. You can put metadata tags in "head" slot, and page content in the "body" or "content" slot. Your layout is now completely customizable, with as many or as few slots as you need.
|
||||
|
||||
|
||||
## Solid support
|
||||
|
||||
<img src="/assets/blog/astro-018/solid-logo-dark.svg" alt="Solid.js logo" style="background-color: rgb(65, 64, 66); padding: 2rem 4rem;" />
|
||||
|
||||
[Solid](https://www.solidjs.com/) is a JSX-based UI framework that bills itself as the familiar, modern, more reactive alternative to React. We're really excited about Solid, and with the new [Solid renderer](https://github.com/withastro/astro/tree/main/packages/renderers/renderer-solid) for Astro you can use Solid as a first-class framework in your project.
|
||||
|
||||
Adding support for Solid (our third officially-supported JSX framework) wasn't easy, and required a major refactoring of how Astro handles JSX. The final result was worth it: Astro is now much better at supporting different types of JSX and can even support the new React v17 JSX transform. This new foundation for Astro should support us well into the future.
|
||||
|
||||
The release of Solid v1.0 is the perfect showcase for Astro's multi-framework promise: try out your first Solid component in an existing project side-by-side with the rest of your components. Where other build tools force you to choose a single framework and stick with it, Astro makes multi-framework projects easy for short-term code migrations or long-term site architectures.
|
||||
|
||||
|
||||
## Lit SSR support
|
||||
|
||||
![Lit logo](/assets/blog/astro-018/lit-logo.svg)
|
||||
|
||||
Server-side rendering (SSR) for web components is finally here, thanks to Lit and the new [Lit renderer for Astro](https://github.com/withastro/astro/tree/main/packages/renderers/renderer-lit).
|
||||
|
||||
Thanks to the [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/) -- a new HTML feature that's now available in Chrome -- the Lit project was able to release experimental SSR support for Lit. Define a custom element in JavaScript and server render it with Astro as you would any other component from React or Vue. Unlike other JS components, you still use the custom element tag name in your HTML.
|
||||
|
||||
The Lit SSR renderer is experimental, and some existing web components may not work with the new API. As other web component libraries adopt declarative shadow DOM and common APIs emerge for rendering, we hope to bring support to those libraries as well. We will keep refining and improving this support as we move towards Astro v1.0.
|
||||
|
||||
## Community
|
||||
|
||||
We've been absolutely blown away by the love Astro has recieved in such a short amount of time:
|
||||
|
||||
- Featured articles and guides from [Netlify](https://www.netlify.com/blog/2021/07/23/build-a-modern-shopping-site-with-astro-and-serverless-functions/), [Cloudflare](https://developers.cloudflare.com/pages/framework-guides/astro), [CSS Tricks](https://css-tricks.com/a-look-at-building-with-astro/), and more.
|
||||
- Over 2,000 developers have downloaded the [Astro VSCode extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)
|
||||
- Over 500 weekly visitors to our [amazing Discord](https://astro.build/chat)
|
||||
- Over 300 public projects using Astro [on Github](https://github.com/withastro/astro)
|
||||
- 2 (TWO!) Astro jobs already posted on Discord!
|
||||
- [GitHub adds support for Astro component syntax highlighting](https://twitter.com/n_moore/status/1417881860051509250)
|
||||
|
||||
To learn more about Astro and start building your first site, check out [the Getting Started guide.](https://docs.astro.build)
|
|
@ -1,161 +0,0 @@
|
|||
---
|
||||
title: 'Astro 0.19'
|
||||
description: 'Introducing: Next.js-inspired dynamic routing • Astro.resolve() • client:only components • translations • and more!'
|
||||
publishDate: 'August 18, 2021'
|
||||
lang: 'en'
|
||||
---
|
||||
We are excited to introduce Astro 0.19, featuring:
|
||||
|
||||
* __[Next.js-inspired routing:](#file-based-routing-inspired-by-nextjs)__ Define new dynamic URL params.
|
||||
* __[`client:only` directive:](#clientonly-loading-directive)__ Opt-out of SSR for individual components.
|
||||
* __[`Astro.resolve()`:](#astroresolve)__ Resolve relative URLs to assets in `src/`.
|
||||
* __[Community translations:](#docs-translations)__ Read our docs in 10 different languages.
|
||||
* __[Astro Open Collective:](#open-collective)__ Now accepting donations & sponsorship!
|
||||
|
||||
## File-based routing, inspired by Next.js
|
||||
|
||||
Astro has always supported basic file-based routing, where every file in your `pages/` directory becomes a new page at that same URL. Astro 0.19 takes this one step further with support for dynamic URL params in your filename.
|
||||
|
||||
Inspired by [Next.js](https://nextjs.org/docs/routing/dynamic-routes) and [SvelteKit](https://kit.svelte.dev/docs#routing-pages), you can now add brackets to your page filename (ex: `src/pages/[slug].astro`) to create a dynamic page that matches many different URLs. `[...slug].astro` catch-all syntax is also supported.
|
||||
|
||||
With this new feature you can add support for URL params, slugs, pretty URLs, pagination and more to your website.
|
||||
|
||||
To create a dynamic route, create a file in your pages directory like `pages/posts/[slug].astro`. Create a [`getStaticPaths()`](https://docs.astro.build/reference/api-reference#getstaticpaths) function in your page frontmatter script and tell Astro exactly what paths to build for that route:
|
||||
|
||||
```astro
|
||||
---
|
||||
// src/pages/posts/[slug].astro
|
||||
// Tell Astro what pages to build for your route "/pages/:slug"
|
||||
export async function getStaticPaths() {
|
||||
return [
|
||||
// Generates: /pages/hello-world
|
||||
{ params: { slug: 'hello-world' } },
|
||||
// Generates: /pages/my-first-blog-post
|
||||
{ params: { slug: 'my-first-blog-post' } },
|
||||
// Generates: /pages/astro-ftw
|
||||
{ params: { slug: 'astro-ftw' } },
|
||||
// ...
|
||||
];
|
||||
}
|
||||
---
|
||||
<html>
|
||||
<head><title>My Page</title></head>
|
||||
<body>URL Param is {Astro.request.params.slug}</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Astro is a static site builder, so you need to tell Astro what pages to build for every dynamic route. Defining your paths manually might feel like boilerplate, but ahead-of-time page building is exactly what makes static websites so fast for your users.
|
||||
|
||||
`getStaticPaths()` is an async function, so you can -- and should! -- use it to load external data into your website. We normally love to use the [Pokemon API](https://pokeapi.co/) in our examples, but you'll probably want to use your favorite headless CMS:
|
||||
|
||||
```js
|
||||
// src/pages/posts/[id].astro
|
||||
// Tell Astro what pages to build for your route "/pages/:id"
|
||||
export async function getStaticPaths() {
|
||||
// Lets fetch posts from CSS Tricks' Headless CMS:
|
||||
const CSS_TRICKS_CMS = 'https://css-tricks.com/wp-json/wp/v2/posts';
|
||||
const allPosts = await fetch(CSS_TRICKS_CMS).then(r => r.json());
|
||||
// Then, create a new page from every post:
|
||||
return allPosts.map((post) => ({
|
||||
// Set the URL param ":id" in the page URL
|
||||
params: {id: post.id},
|
||||
// Pass the post object as a prop to the page
|
||||
props: {post},
|
||||
}));
|
||||
}
|
||||
```
|
||||
|
||||
To learn more, check out our new documentation on [Routing](https://docs.astro.build/core-concepts/routing) and the new [`getStaticPaths()` API.](https://docs.astro.build/reference/api-reference#getstaticpaths) Or, if you prefer to learn by example, check out this great [Wordpress Headless CMS project](https://github.com/chriscoyier/astro-css-trickzz) from Chris Coyier and this [Shopify Ecommerce example](https://github.com/cassidoo/shopify-react-astro) by Cassidy Williams of Netlify.
|
||||
|
||||
If you were a previous user of our original Collections API, this new file-based routing system completely replaces Collections with plenty of friendly warning messages to help you upgrade. We hope that this new API removes all common frustrations that users had reported with the Collections API.
|
||||
|
||||
## `client:only` loading directive
|
||||
|
||||
Sometimes, a UI component can't render on the server. Maybe it's because you've hit a bug in one of your dependencies, or maybe you're just using a library like D3 that can't run without the browser's `window` object.
|
||||
|
||||
You can attempt to wrap browser-only code with your own static server-side fallback UI. However, most users wanted a way to render a browser-only component without the extra boilerplate. Enter, `client:only`.
|
||||
|
||||
Astro 0.19 ships with the new `client:only` loading directive to hydrate your component in the browser without server-side rendering. This provides a simple, straightforward fallback for any browser-only components.
|
||||
|
||||
```html
|
||||
<!-- only renders in the browser, no placeholder HTML -->
|
||||
<MyReactComponent client:only />
|
||||
```
|
||||
|
||||
`client:only` is now our fifth directive to let you completely control you component loading behavior. Visit our docs site to [check out the entire set](https://docs.astro.build/core-concepts/component-hydration#hydrate-interactive-components) and learn more about [Partial Hydration](https://docs.astro.build/core-concepts/component-hydration).
|
||||
|
||||
🎉 This awesome feature was contributed by [Tony Sull](https://github.com/tony-sull) of [Navillus](https://navillus.dev/). Thanks, Tony!
|
||||
|
||||
## `Astro.resolve()`
|
||||
|
||||
Astro 0.19 includes a new [`Astro.resolve()`](https://docs.astro.build/reference/api-reference#astroresolve) helper function to resolve relative file references in your templates. With this new feature, you can reference relative assets (like images) inside of your components and Astro will return the correct URL for the browser.
|
||||
|
||||
Previously, you always had to place files in the `public/` directory and reference them by absolute URL path. Relative paths within the `src/` directory didn't work because they'd be shipped directly to the browser, as-is. Different pages would end up creating different URLs:
|
||||
|
||||
```html
|
||||
<!-- This works the same on every page: -->
|
||||
<img src="/logo.png" />
|
||||
<!-- But this means different things on different pages: -->
|
||||
<img src="../logo.png" />
|
||||
```
|
||||
|
||||
Starting in Astro 0.19, you can now use the new `Astro.resolve()` helper function to create an absolute URL reference from any relative path:
|
||||
|
||||
```html
|
||||
<!-- Astro component input: -->
|
||||
<img src={Astro.resolve('../images/logo.png')} />
|
||||
<!-- HTML output: -->
|
||||
<img src="/_astro/src/images/logo.png" />
|
||||
```
|
||||
|
||||
If it helps, you can think of `Astro.resolve()` as a simplified alternative to doing `new URL(yourRelativePath, import.meta.url).pathname` in the browser.
|
||||
|
||||
[`Astro.resolve()`](https://docs.astro.build/reference/api-reference#astroresolve) gives you more options and more control over how you structure your project. In the future, this will also unlock our ability to serve optimized images right out of your `src/` directory.
|
||||
|
||||
🎉 This awesome feature was contributed by [Jonathan Neal](https://github.com/jonathantneal) & [Matthew Phillips!](https://github.com/matthewp)
|
||||
|
||||
## Docs Translations
|
||||
|
||||
Not all developers speak English. In fact, most don't. Luckily, some amazing contributors in our community came together to translate the Astro docs site for a global audience. We are currently working on translations in 10 different languages, including:
|
||||
|
||||
- [简体中文](https://docs.astro.build/zh-CN/getting-started)
|
||||
- [正體中文](https://docs.astro.build/zh-TW/getting-started)
|
||||
- [Български](https://docs.astro.build/bg/getting-started)
|
||||
- [Deutsch](https://docs.astro.build/de/getting-started)
|
||||
- [English](https://docs.astro.build/getting-started)
|
||||
- [Español](https://docs.astro.build/es/getting-started)
|
||||
- [Français](https://docs.astro.build/fr/getting-started)
|
||||
- [Nederlands](https://docs.astro.build/nl/getting-started)
|
||||
- [Português](https://docs.astro.build/pt-br/getting-started)
|
||||
- [Suomi](https://docs.astro.build/fi/getting-started)
|
||||
- [Русский](https://docs.astro.build/ru/getting-started)
|
||||
|
||||
These are still a work in progress, and we'll keep working towards 100% translation as we creep closer to a v1.0 release. If you know a few languages and are able to contribute, [we could really use your help!](https://github.com/withastro/astro/blob/main/CONTRIBUTING.md#translations)
|
||||
|
||||
## Open Collective
|
||||
|
||||
It's been a little over two months since [the first release](https://astro.build/blog/introducing-astro) of Astro. In that release, we outlined our commitment to both **a free, open source Astro** and **long-term financial sustainability** for the project. Today, we're announcing our first experiment towards long-term sustainability:
|
||||
|
||||
**Companies and individuals can now sponsor Astro's development with Open Collective. [Visit our Open Collective →](https://opencollective.com/astrodotbuild)**
|
||||
|
||||
We created an Open Collective because corporate sponsorship is one of the few proven paths towards financial sustainability in open source. However, [it's far from a perfect model.](https://stackoverflow.blog/2021/01/07/open-source-has-a-funding-problem/) Most contributions only go to a handful of popular projects, and the rest never see any meaningful support. The odds are against us but we believe in Astro, our community, and the excitement that keep growing around this project.
|
||||
|
||||
Chances are, your company benefits from open source software. Invest in the technologies that power your business by sponsoring Astro and any other open source projects that you use. **Bonus:** thousands of developers will see your logo on our README and the [astro.build homepage](https://astro.build), every day.
|
||||
|
||||
100% of funds raised are invested directly back into the project and our community. You can read more about how funds are distributed by reading our [FUNDING.md](https://github.com/withastro/astro/blob/main/FUNDING.md) doc on GitHub.
|
||||
|
||||
We'll be tweeting out personal "thank you" messages to every person and company who hits the ["Sponsor"](https://opencollective.com/astrodotbuild) button in the next 48 hours. Our first, very special THANK YOU goes out to [Chris Jennings](https://twitter.com/ckj), CCO and co-founder of [Sentry](https://sentry.io/), for being our first official sponsor! 🎉
|
||||
|
||||
## ICYMI (In case you missed it)
|
||||
|
||||
[Github added official support](https://twitter.com/astrodotbuild/status/1423001137905651714?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1423001137905651714%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fastro.build%2Fblog%2Fastro-019%2F) for `.astro` files and ```` ```astro```` syntax highlighting across their entire platform. Not to be outdone, CodeSandbox [quickly followed up](https://twitter.com/codesandbox/status/1425438635357257728) with support of their own!
|
||||
|
||||
This is such a huge milestone for Astro, especially considering how young the project is! Thank you to everyone who used Astro, created projects, and showed these platforms how valuable Astro really is.
|
||||
|
||||
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">It's official! 🎉 <a href="https://twitter.com/github?ref_src=twsrc%5Etfw">@github</a> now supports syntax highlighting for .astro files!<br><br>You can also use code blocks starting with ```` ```astro```` to get proper highlighting in Markdown files, issues, and PR comments! <a href="https://t.co/CDiGw66Qw6">pic.twitter.com/CDiGw66Qw6</a></p>— Astro (@astrodotbuild) <a href="https://twitter.com/astrodotbuild/status/1423001137905651714?ref_src=twsrc%5Etfw">August 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
## 👋
|
||||
|
||||
Thank you for reading! [Follow us on Twitter](https://twitter.com/astrodotbuild) to stay up to date as we move closer to a v1.0 release. Also, you can check out [our previous release post](https://astro.build/blog/astro-018) for even more updates on Astro.
|
||||
|
||||
And, if you've read this far, you should definitely [join us on Discord.](https://astro.build/chat) ;)
|
|
@ -1,96 +0,0 @@
|
|||
---
|
||||
title: 'Astro 0.21 Preview: Vite + WASM = ⚡️'
|
||||
description: 'Get a sneak preview of what is next for Astro, including our new Vite build engine and WASM-powered Go compiler.'
|
||||
publishDate: 'October 6, 2021'
|
||||
permalink: 'https://astro.build/blog/astro-021-preview'
|
||||
lang: 'en'
|
||||
heroImage: '/assets/blog/astro-021-preview/hero.png'
|
||||
heroImageAlt: 'Spacecraft overlooking Earth'
|
||||
socialImage: '/assets/blog/astro-021-preview/social.png'
|
||||
---
|
||||
|
||||
Astro v0.21.0 will be our biggest release yet. At a high-level, it includes:
|
||||
|
||||
- [A new build engine, powered by Vite](#hello-vite)
|
||||
- [A new WASM compiler, written in Go](#hello-wasm)
|
||||
- [Brand new features, like Components-in-Markdown](#components-in-markdown)
|
||||
- [A new system for HTML live-updating via HMR](#hmr-meet-html)
|
||||
|
||||
You can try out our latest release today [in the browser](https://gitpod.io#snapshot/5e7cf2f1-8108-4fa5-99d3-ed8de70d8c23) or by running `npm install astro@next--compiler` in a new project directory on your machine.
|
||||
|
||||
Astro is quickly becoming the production-ready framework for building faster, content-focused websites. To celebrate this milestone, here are some highlights and details on what you can expect in Astro v0.21.0 and beyond.
|
||||
|
||||
## Hello, Vite!
|
||||
|
||||
Astro 0.21 is getting an internal build engine upgrade, replacing Snowpack with [Vite](https://vitejs.dev) going forward.
|
||||
|
||||
We ran some early experiments with Vite and came away extremely impressed. Vite is well-maintained, well-documented, a bit faster, has great error messages, and has been building clear community buy-in across multiple frameworks. SSR handling can be a bit flakey, but the Vite team is aware of this and actively working on it.
|
||||
|
||||
So now, when Evan You tweets about [some great performance optimization](https://twitter.com/youyuxi/status/1440718351802646550) that they're making in Vite you can be certain that the same speed is coming to Astro as well.
|
||||
|
||||
The reverse is also true: we can now contribute fixes and improvements back to the larger Vite community. Now, when we fix an SSR bug in Astro (like [adding support for ESM-only npm packages](https://github.com/vitejs/vite/pull/5197)) we're also fixing it for every other Vite user, including [SvelteKit](https://kit.svelte.dev/docs#routing-endpoints).
|
||||
|
||||
There's one other huge benefit to choosing Vite: Rollup plugins. Starting in v0.21.0, you'll be able to connect the entire ecosystem of Rollup plugins to Astro. Enable new features like [image optimizations](https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite) and [icon loading](https://github.com/antfu/unplugin-icons) with just a few simple plugins. Magic!
|
||||
|
||||
This switch from Snowpack to Vite might come as a surprise to some: Both Drew and myself are maintainers on both projects. This was [a hard decision](https://dev.to/fredkschott/5-more-things-i-learned-building-snowpack-to-20-000-stars-5dc9) for us to make. But ultimately, after working with both tools I can confidently say that Vite will be a great choice for Astro's future.
|
||||
|
||||
|
||||
## Hello, WASM!
|
||||
|
||||
Astro 0.21 features another huge low-level improvement: the brand new [@astrojs/compiler](https://github.com/withastro/astro-compiler-next). Astro's new compiler is written in Go and distributed as WASM. You can run it right in your browser, or on the server in Node.js and Deno.
|
||||
|
||||
The new [@astrojs/compiler](https://github.com/withastro/astro-compiler-next) unlocks:
|
||||
|
||||
- **Flexibility:** Run the compiler anywhere with WASM.
|
||||
- **Speed:** Build sites faster with Go's compiled-language performance.
|
||||
- **Stability:** Writing our own compiler allowed us to fix some long-standing bugs.
|
||||
|
||||
You can play with the new compiler today right in your browser at https://astro.build/play. This REPL is just one example of what is now possible when you have a fast, runs-anywhere compiler.
|
||||
|
||||
Shout out to [Nate Moore](https://twitter.com/n_moore) who did an incredible job with this project.
|
||||
|
||||
|
||||
## Components in Markdown
|
||||
|
||||
Our most requested feature ***by far*** has been the ability to use components directly in Markdown. After months of work, we're excited to announce that this feature is finally coming to Astro.
|
||||
|
||||
Starting in v0.21.0, you can import components inside of your Markdown frontmatter via an optional `setup` script. Once imported, your components can be used anywhere on the page:
|
||||
|
||||
```astro
|
||||
---
|
||||
title: 'Astro 0.21 Early Preview'
|
||||
setup: |
|
||||
import Logo from '../components/Logo.astro';
|
||||
import ReactCounter from '../components/Counter.jsx';
|
||||
---
|
||||
|
||||
# Astro now supports components in Markdown!
|
||||
|
||||
<Logo />
|
||||
|
||||
- Back to markdown here.
|
||||
- Supports static Astro components.
|
||||
- Supports dynamic React/Vue/Svelte components!
|
||||
|
||||
<ReactCounter start={0} client:load />
|
||||
```
|
||||
|
||||
This new `setup` script was designed for maximum flexibility. We'll keep improving this API going forward with planned support for default components, default layouts, and markdown component overrides.
|
||||
|
||||
|
||||
## HMR, meet HTML
|
||||
|
||||
Starting in v0.21.0, Astro will support full HMR for Astro components and pages. Change any `.astro` file in your codebase, and watch the dev server update the page without a full refresh and without losing any client state.
|
||||
|
||||
Astro has always supported powerful HMR updates for client-side JavaScript components like React, Preact, Svelte, Vue, and Solid.js. But adding this for Astro was a fun challenge because Astro components are just static HTML. Our "Zero JavaScript" approach meant that there was no "Astro runtime" to hook into for updates. We had to get creative.
|
||||
|
||||
Now, Astro's dev server sends HTML updates to the browser and then runs a small script to diff those updates against the current page. This creates a more granular, component-level HMR update that won't impact the rest of the page.
|
||||
|
||||
|
||||
## Try it today
|
||||
|
||||
If you've read this far, we'd love your help trying out the latest release before launch. You can try out our latest release today [in the browser](https://gitpod.io#snapshot/5e7cf2f1-8108-4fa5-99d3-ed8de70d8c23) or by running `npm install astro@next--compiler` in a new project directory. You can follow our progress and leave feedback in the `next` PR on GitHub: https://github.com/withastro/astro/pull/1406
|
||||
|
||||
Leave feedback, report bugs, and get involved with Astro's development in our [Discord server](https://astro.build/chat). You can also [follow along](https://twitter.com/astrodotbuild) on Twitter.
|
||||
|
||||
Keep your eyes on the sky, 👩🚀 Astronaut!
|
|
@ -1,40 +0,0 @@
|
|||
---
|
||||
title: 'Astro 0.21'
|
||||
author: 'fred'
|
||||
description: 'Astro v0.21.0 is finally here!'
|
||||
publishDate: 'November 19, 2021'
|
||||
permalink: 'https://astro.build/blog/astro-021-release'
|
||||
lang: 'en'
|
||||
socialImage: '/assets/blog/astro-021-release/social.png'
|
||||
heroImage: '/assets/blog/astro-021-preview/hero.png'
|
||||
heroImageAlt: 'Astro v0.21 Release Notes'
|
||||
---
|
||||
|
||||
Astro v0.21.0 is finally here! This is by far our biggest release ever, including a ground-up rewrite of some major Astro internals. After months of development and public testing, we are so excited to get this new version of Astro into your hands, featuring:
|
||||
|
||||
- A new Astro compiler, **written in [Go](https://golang.org/)**
|
||||
- A new build engine, **powered by [Vite](http://vitejs.dev/)**
|
||||
- [Components in Markdown](https://docs.astro.build/migration/0.21.0#components-in-markdown) (like MDX, but without the JSX)
|
||||
- Improved npm package support (also powered by Vite!)
|
||||
- Improved errors, stack traces, HMR, and overall dev experience
|
||||
- A grab-bag of other new features for you to explore
|
||||
|
||||
[Try Astro v0.21.0 today](https://astro.new) right in your browser. Or, run `npm install astro@latest` in any new or existing project directory to get started. [Read our v0.21 Early Preview](/blog/astro-021-preview) post for more details on what is included in this release.
|
||||
|
||||
Thank you to every contributor and early preview tester who made this release possible. Thank you to [Nate Moore](https://twitter.com/n_moore), [Matthew Philips](https://twitter.com/matthewcp), and [Drew Powers](https://twitter.com/drwpow) for your tireless work over the last few months getting v0.21 out the door.
|
||||
|
||||
**With these new long-term investments, Astro isn't going anywhere.** Next stop, v1.0!
|
||||
|
||||
## Migrate to v0.21
|
||||
|
||||
Very little has changed in the v0.21.0 API to make your migration as easy as possible. Check out the new [v0.21 migration guide](https://docs.astro.build/migration/0.21.0) for a full breakdown of meaningful changes.
|
||||
|
||||
Leave feedback, report bugs, and get involved with Astro's development in our [Discord server](https://astro.build/chat). You can also [follow along](https://twitter.com/astrodotbuild) with our community on Twitter.
|
||||
|
||||
## Why Rewrite? Why Now?
|
||||
|
||||
Most people don't know this, but the first version of the Astro compiler was originally forked from [Svelte](https://svelte.dev/docs#Compile_time). Forking an existing compiler let us get up and running quickly, but cost us some unneccesary complexity that only grew over time.
|
||||
|
||||
Big rewrites are rarely easy, and this one was no exception. The timing was right for us to make a big investment in Astro now and deprecate our original forked compiler in favor of something designed with Astro in mind. This new compiler (written in Go) and new Vite-powered build engine will form a stable foundation that will last this project for years to come.
|
||||
|
||||
*Thank you to Rich Harris and the entire Svelte team for building a great open source compiler that served Astro well in its early days.*
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
title: 'Introducing the Astro REPL'
|
||||
description: 'The power of Astro, right in your browser.'
|
||||
publishDate: 'September 17, 2021'
|
||||
permalink: 'https://astro.build/blog/astro-repl/astro-repl.png'
|
||||
lang: 'en'
|
||||
heroImage: '/assets/blog/astro-repl/astro-repl-hero.jpg'
|
||||
heroImageAlt: 'Hills with stars above'
|
||||
---
|
||||
The Astro team proudly presents the new [Astro REPL:](https://astro.build/play) compile Astro right in your browser. Use it to explore Astro's HTML-based component language, debug issues, or even prototype an entire webpage. It's powered by Astro’s **new WASM compiler** (written in Go) that runs anywhere and can rebuild files in an instant.
|
||||
|
||||
![astro](/assets/blog/astro-repl/astro-repl-screenshot.jpg)
|
||||
|
||||
Try it today at [astro.build/play →](https://astro.build/play)
|
||||
|
||||
To learn more about our new compiler, [join us on Discord](https://astro.build/chat) and tune in to [Astro Demo Days](https://www.youtube.com/watch?v=-ExcBJrXOd8) next Monday, September 20, 2021 at 11am PST.
|
|
@ -1,25 +0,0 @@
|
|||
---
|
||||
title: 'Astro Demo Day September Edition'
|
||||
description: 'Astro September Demo Day was today and we had 4 amazing talks, including one with big announcements on the future direction of Astro.'
|
||||
publishDate: 'September 20, 2021'
|
||||
permalink: 'https://astro.build/blog/demo-day-2021-09'
|
||||
lang: 'en'
|
||||
heroImage: '/assets/blog/demo-day-2021-09/hero.png'
|
||||
heroImageAlt: 'Spacecraft overlooking Earth'
|
||||
---
|
||||
**Astro Demo Day** was today! We had **4** amazing talks, including one big announcement on the future direction of Astro. If you missed the livestream, fear not! You can see the full event [on YouTube](https://www.youtube.com/watch?v=-ExcBJrXOd8) or watch the talks in any order by visiting the links below. Subscribe to the [Astro YouTube channel](https://www.youtube.com/channel/UCeFjmvZEK-MoefuYXptnX6A) to make sure you don't miss our next demo day. Today's demos were:
|
||||
|
||||
* [Developing the Astro VSCode extension](https://youtu.be/-ExcBJrXOd8?t=109) 🧑💻 from [Matthew Phillips](https://twitter.com/matthewcp)
|
||||
* [Integrating a CMS - Astro+Forestry+Netlify](https://youtu.be/-ExcBJrXOd8?t=763) 🌳 from [Tony Sullivan](https://twitter.com/navillus_dev)
|
||||
* [The Astro SEO component](https://youtu.be/-ExcBJrXOd8?t=1384) 🗃 from [Jonas Schumacher](https://twitter.com/jonasmerlin1)
|
||||
* [Astro's v2 Compiler and a Surprise](https://youtu.be/-ExcBJrXOd8?t=2070) 🪄 from [Drew Powers](https://twitter.com/drwpow) and [Nate Moore](https://twitter.com/n_moore)
|
||||
|
||||
As always, our Discord community brought the hype:
|
||||
|
||||
<img alt="Messages from the Demo Day chat room on Discord" src="/assets/blog/demo-day-2021-09/discord-chat.jpg" class="chat-messages" />
|
||||
|
||||
## The next Astro release
|
||||
|
||||
Astro's next release will be our biggest ever, featuring a new WASM-powered compiler plus a new Vite-powered runtime. You can expect a preview release on [npm](https://www.npmjs.com/package/astro) later today or tomorrow. Over the next few weeks, we will continue to polish the new code as we prepare for its official release!
|
||||
|
||||
If you haven't already, follow [@astrodotbuild](https://twitter.com/astrodotbuild) on Twitter for more news and announcements, and [join our Discord](https://astro.build/chat) to learn how you can try out the new previous release.
|
|
@ -1,111 +0,0 @@
|
|||
---
|
||||
setup: |
|
||||
import Shell from '../../components/Shell.astro'
|
||||
import Note from '../../components/Note.astro'
|
||||
import BlockQuote from '../../components/BlockQuote.astro'
|
||||
title: "Introducing Astro: Ship Less JavaScript"
|
||||
description: |
|
||||
We're excited to announce Astro as a new way to build static websites and deliver lightning-fast performance without sacrificing a modern developer experience.
|
||||
publishDate: 'June 8, 2021'
|
||||
author: 'fred'
|
||||
heroImage: '/social.jpg'
|
||||
permalink: 'https://astro.build/blog/introducing-astro'
|
||||
lang: 'en'
|
||||
---
|
||||
There's a simple secret to building a faster website — *just ship less*.
|
||||
|
||||
Unfortunately, modern web development has been trending in the opposite direction—towards *more.* More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.
|
||||
|
||||
Today I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:
|
||||
|
||||
- **Bring Your Own Framework (BYOF):** Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.
|
||||
- **100% Static HTML, No JS:** Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.
|
||||
- **On-Demand Components:** Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.
|
||||
- **Fully-Featured:** Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.
|
||||
- **SEO Enabled:** Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.
|
||||
|
||||
This post marks the first public beta release of Astro. **Missing features and bugs are still to be expected at this early stage.** There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.
|
||||
|
||||
<Note>
|
||||
|
||||
To learn more about Astro and start building your first site, check out [our Getting Started guide.](https://docs.astro.build)
|
||||
|
||||
</Note>
|
||||
|
||||
## Getting Started
|
||||
|
||||
Starting a new project in Astro is easy:
|
||||
|
||||
```shell
|
||||
# create your project
|
||||
mkdir new-project-directory
|
||||
cd new-project-directory
|
||||
npm init astro
|
||||
|
||||
# install your dependencies
|
||||
npm install
|
||||
|
||||
# start the dev server and open your browser
|
||||
npm run dev
|
||||
```
|
||||
|
||||
<Note>
|
||||
|
||||
To learn more about Astro and start building your first site, check out [our Getting Started guide.](https://docs.astro.build)
|
||||
|
||||
</Note>
|
||||
|
||||
|
||||
## How Astro Works
|
||||
|
||||
Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro.
|
||||
|
||||
In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML during the build. The result is a fully static website with all JavaScript removed from the final page. No monolithic JavaScript application required, just static HTML that loads as fast as possible in the browser regardless of how many UI components you used to generate it.
|
||||
|
||||
Of course, sometimes client-side JavaScript is inevitable. Image carousels, shopping carts, and auto-complete search bars are just a few examples of things that require some JavaScript to run in the browser. This is where Astro really shines: When a component needs some JavaScript, Astro only loads that one component (and any dependencies). The rest of your site continues to exist as static, lightweight HTML.
|
||||
|
||||
In other full-stack web frameworks this level of per-component optimization would be impossible without loading the entire page in JavaScript, delaying interactivity. In Astro, this kind of [partial hydration](https://addyosmani.com/blog/rehydration/) is built into the tool itself.
|
||||
|
||||
You can even [automatically defer components](https://codepen.io/jonneal/full/ZELvMvw) to only load once they become visible on the page with the `:visible` modifier.
|
||||
|
||||
This new approach to web architecture is called [islands architecture](https://jasonformat.com/islands-architecture/). We didn't coin the term, but Astro may have perfected the technique. We are confident that an HTML-first, JavaScript-only-as-needed approach is the best solution for the majority of content-based websites.
|
||||
|
||||
<Note>
|
||||
|
||||
To learn more about Astro and start building your first site, check out [our Getting Started guide.](https://docs.astro.build)
|
||||
|
||||
</Note>
|
||||
|
||||
## Embracing the Pit of Success
|
||||
|
||||
<BlockQuote author="Jeff Atwood" source="Falling Into The Pit of Success" sourceHref="https://blog.codinghorror.com/falling-into-the-pit-of-success/">
|
||||
|
||||
A well-designed system makes it easy to do the right things and annoying (but not impossible) to do the wrong things
|
||||
|
||||
</BlockQuote>
|
||||
|
||||
Poor performance is often framed as a failure of the developer, but we respectfully disagree. In many cases, poor performance is a failure of tooling. It should be difficult to build a slow website.
|
||||
|
||||
Astro's main design principle is to lead developers into what [Rico Mariani](https://twitter.com/ricomariani) dubbed "the pit of success". It is our goal to build every site "fast by default" while also delivering a familiar, modern developer experience.
|
||||
|
||||
By building your site to static HTML by default, Astro makes it difficult (but never impossible 😉) to build a slow site.
|
||||
|
||||
## Long-Term Sustainability
|
||||
|
||||
Astro is built by the team of open source developers behind [Snowpack](https://snowpack.dev) and [Skypack](https://skypack.dev), with additional contributions from the community.
|
||||
|
||||
**Astro is and always will be free.** It is an open source project released under the [MIT license](https://github.com/withastro/astro/blob/main/LICENSE).
|
||||
|
||||
We care deeply about building a more sustainable future for open source software. At the same time, we need to support Astro's development long-term. This requires money (donations alone aren't enough.)
|
||||
|
||||
We're inspired by the early success of projects like [Tailwind](https://tailwindcss.com/), [Rome](https://rome.tools/), [Remix](https://remix.run/), [Ionic](https://ionicframework.com/), and others who are experimenting with long-term financial sustainability on top of Open Source. Over the next year we'll be exploring how we can create a sustainable business to support a 100% free, open source Astro for years to come.
|
||||
|
||||
If your company is as excited about Astro as we are, [we'd love to hear from you.](https://astro.build/chat)
|
||||
|
||||
Finally, I'd like to give a **HUGE** thanks to the 300+ developers who joined our earliest private beta. Your feedback has been essential in shaping Astro into the tool it is today. If you're interested in getting involved (or just following along with development) please [join us on Discord.](https://astro.build/chat)
|
||||
|
||||
<Note>
|
||||
|
||||
To learn more about Astro and start building your first site, check out [our Getting Started guide.](https://docs.astro.build)
|
||||
|
||||
</Note>
|
|
@ -1,34 +0,0 @@
|
|||
---
|
||||
setup: |
|
||||
import Note from '../../components/Note.astro'
|
||||
title: "Netlify Becomes Astro's Official Hosting Partner"
|
||||
description: |
|
||||
We are happy to announce that Netlify has become Astro’s first corporate sponsor and exclusive hosting partner, donating $2,500 each month towards the ongoing open source maintenance and development of Astro.
|
||||
publishDate: 'September 9, 2021'
|
||||
heroImage: '/assets/blog/astro-netlify-social.jpg'
|
||||
lang: 'en'
|
||||
---
|
||||
|
||||
We are thrilled to announce that [Netlify](https://www.netlify.com/?utm_campaign=devex-jl&utm_source=astro&utm_medium=blog) has become Astro's first corporate sponsor and official hosting partner, donating [$2,500 each month](https://opencollective.com/astrodotbuild) towards the ongoing open source maintenance and development of Astro.
|
||||
|
||||
Netlify is the company responsible for kicking off the modern [Jamstack](https://jamstack.org/) movement. Today, their hosting + serverless platform is loved by developers around the world. [Astro](http://astro.build/) can build you a blazing-fast website, but you'll always need a great host like Netlify to deliver that snappy experience to your users.
|
||||
|
||||
Here's what Jason told us about Astro:
|
||||
|
||||
<Note>
|
||||
|
||||
"Astro is tackling an extremely hard problem: **how do we keep the advantages of powerful frameworks but stop making end users pay the cost of developer experience?** Shipping only HTML and CSS for the vast majority of web content that doesn't need to be dynamic and only including JavaScript when it's actually necessary is a huge win for developers and users alike."
|
||||
|
||||
<br />
|
||||
|
||||
— [Jason Lengstorf](https://twitter.com/jlengstorf), VP of Developer Experience, Netlify
|
||||
|
||||
</Note>
|
||||
|
||||
Astro is honored and excited to have Netlify as our first official corporate sponsor. We are grateful for the support of Jason Lengstorf, Cassidy Williams, and the entire Netlify team for their help and evangelism. It's because of support from companies like Netlify that we are able to receive ongoing maintenance and keep developing Astro in an open, financially-sustainable way.
|
||||
|
||||
Our first integration with Netlify will be to add the ["Deploy with Netlify"](https://www.netlify.com/blog/2016/11/29/introducing-the-deploy-to-netlify-button/) button to our official Astro starter templates. This will make it even easier to create new, hosted Astro websites in just a few clicks. Check out all of our batteries-included starter templates in the brand new [Astro Theme Showcase.](https://docs.astro.build/themes)
|
||||
|
||||
Thanks, Netlify!
|
||||
|
||||
*PS: If your company relies on free, open source software (hint: it almost definitely does!) please [donate to support Astro](https://opencollective.com/astrodotbuild) and other projects like it. You can browse projects accepting funding on [Open Collective](https://opencollective.com/discover), [GitHub Sponsors](https://github.com/sponsors), or by running the `npm fund` command inside of any existing npm project.*
|
|
@ -1,212 +0,0 @@
|
|||
---
|
||||
import ArticleFooter from '../components/ArticleFooter.astro';
|
||||
import SiteSidebar from '../components/SiteSidebar.astro';
|
||||
import ThemeToggle from '../components/ThemeToggle.tsx';
|
||||
import DocSidebar from '../components/DocSidebar.tsx';
|
||||
|
||||
const { content } = Astro.props;
|
||||
const headers = content?.astro?.headers;
|
||||
---
|
||||
|
||||
<html lang={content?.lang ?? 'en'}>
|
||||
<head>
|
||||
<title>{content?.title}</title>
|
||||
|
||||
<link rel="stylesheet" href="/blog/index.css" />
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 3.5rem 1fr;
|
||||
--gutter: 0.5rem;
|
||||
--doc-padding: 2rem;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--theme-bg-offset);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.menu-and-logo {
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
nav.layout {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav.layout :global(> :nth-child(1)) {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#site-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
color: var(--theme-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#site-title:hover,
|
||||
#site-title:focus {
|
||||
color: var(--theme-text-light);
|
||||
}
|
||||
|
||||
#site-title h1 {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 64ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.layout :global(> *) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
max-height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: var(--doc-padding) 0;
|
||||
}
|
||||
|
||||
#sidebar-nav {
|
||||
display: none;
|
||||
max-height: 100vh;
|
||||
padding: var(--doc-padding) 0;
|
||||
}
|
||||
|
||||
#article {
|
||||
padding: var(--doc-padding) var(--gutter);
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 64ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content > main {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
#sidebar-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.menu-and-logo button {
|
||||
display: none;
|
||||
}
|
||||
.layout {
|
||||
grid-template-columns: 20rem minmax(0, 1fr);
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
#article {
|
||||
grid-column: 2;
|
||||
}
|
||||
#sidebar-nav {
|
||||
display: flex;
|
||||
}
|
||||
#sidebar-content {
|
||||
/* display: flex; */
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 88em) {
|
||||
.layout {
|
||||
grid-template-columns: minmax(var(--gutter), 1fr) 20rem minmax(0, var(--max-width)) 16rem minmax(var(--gutter), 1fr);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#sidebar-nav,
|
||||
.nav-wrapper :global(:nth-child(1)) {
|
||||
grid-column: 2;
|
||||
}
|
||||
#article,
|
||||
.nav-wrapper :global(:nth-child(2)) {
|
||||
grid-column: 3;
|
||||
}
|
||||
#sidebar-content,
|
||||
.nav-wrapper :global(:nth-child(3)) {
|
||||
display: flex;
|
||||
grid-column: 4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav class="layout">
|
||||
<div class="nav-wrapper">
|
||||
<div class="menu-and-logo flex">
|
||||
<a id="site-title" href="/blog">
|
||||
<svg width="1em" height="1em" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M320 170C320 170 296.88 171.746 267.428 188.75C237.975 205.754 205.754 237.975 188.75 267.428C171.746 296.88 170 320 170 320C170 320 168.254 296.88 151.25 267.428C134.246 237.975 102.025 205.754 72.5721 188.75C43.1197 171.746 20 170 20 170C20 170 43.1197 168.254 72.5721 151.25C102.025 134.246 134.246 102.025 151.25 72.5721C168.254 43.1197 170 20 170 20C170 20 171.746 43.1197 188.75 72.5721C205.754 102.025 237.975 134.246 267.428 151.25C296.88 168.254 320 170 320 170Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
<h1>Astro Log</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div></div>
|
||||
|
||||
<div>
|
||||
<ThemeToggle:idle />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="layout">
|
||||
<div id="article">
|
||||
<article class="content">
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
|
@ -1,14 +0,0 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<title>Astro | Page Not Found</title>
|
||||
<link rel="stylesheet" href={Astro.resolve('../scss/error.scss')} />
|
||||
</head>
|
||||
<body>
|
||||
<section class="error-content">
|
||||
<p class="error-code">404 | error</p>
|
||||
<h1>Lost in space there, Astronaut?</h1>
|
||||
<p>Let's see if we can guide you back</p>
|
||||
<a href="/" title="back to homepage">Back to homepage</a>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
|
@ -1,46 +0,0 @@
|
|||
---
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import BlogHeader from '../../components/BlogHeader.astro';
|
||||
import BlogPost from '../../components/BlogPost.astro';
|
||||
import GoogleAnalytics from '../../components/GoogleAnalytics.astro';
|
||||
|
||||
export function getPostSlug(post) {
|
||||
return post.file.pathname.split('/').pop().split('.').shift();
|
||||
}
|
||||
|
||||
export function getStaticPaths({rss}) {
|
||||
const posts = Astro.fetchContent('../../data/blog-posts/*.md').sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
|
||||
|
||||
rss({
|
||||
title: 'Astro Blog',
|
||||
description: 'Everything you need to know about Astro, direct from mission control.',
|
||||
items: posts.map(p => ({
|
||||
title: p.title,
|
||||
description: p.description,
|
||||
link: `blog/${getPostSlug(p)}`,
|
||||
pubDate: p.publishDate,
|
||||
}))
|
||||
});
|
||||
|
||||
return posts.map((p) => ({
|
||||
params: { slug: getPostSlug(p) },
|
||||
props: { post: p },
|
||||
}));
|
||||
}
|
||||
|
||||
const { Content, title, author, description, publishDate, heroImage, heroImageAlt, socialImage, permalink, lang } = Astro.props.post;
|
||||
---
|
||||
|
||||
<html lang={lang ?? 'en'}>
|
||||
<head>
|
||||
<BaseHead {title} {description} canonicalURL={permalink} image={socialImage && `https://astro.build${socialImage}`} />
|
||||
<link rel="stylesheet" href={Astro.resolve('../../scss/blog.scss')} />
|
||||
</head>
|
||||
<body>
|
||||
<BlogHeader />
|
||||
<BlogPost {title} {author} {publishDate} {heroImage} {heroImageAlt}>
|
||||
<Content />
|
||||
</BlogPost>
|
||||
<GoogleAnalytics />
|
||||
</body>
|
||||
</html>
|
|
@ -1,84 +0,0 @@
|
|||
---
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import BlogHeader from '../../components/BlogHeader.astro';
|
||||
import BlogPostPreview from '../../components/BlogPostPreview.astro';
|
||||
|
||||
let title = 'Astro Blog';
|
||||
let description = 'Everything you need to know about Astro, direct from mission control.';
|
||||
let permalink = 'https://astro.build/blog';
|
||||
let lang = 'en';
|
||||
|
||||
const posts = Astro.fetchContent('../../data/blog-posts/*.md').sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
|
||||
---
|
||||
|
||||
<html lang={lang ?? 'en'}>
|
||||
<head>
|
||||
<BaseHead {title} {description} canonicalURL={permalink} />
|
||||
<link rel="stylesheet" href={Astro.resolve('../../scss/blog.scss')} />
|
||||
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 3.5rem 1fr;
|
||||
--gutter: 0.5rem;
|
||||
--doc-padding: 2rem;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--theme-bg-offset);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
.content :global(main > * + *) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.intro {
|
||||
padding-bottom: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 4px solid var(--theme-divider);
|
||||
}
|
||||
|
||||
.intro > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.latest {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<BlogHeader />
|
||||
<div class="layout">
|
||||
<main class="content">
|
||||
<section class="intro">
|
||||
<h1 class="latest">The Astro Blog</h1>
|
||||
<p>{description}</p>
|
||||
</section>
|
||||
<section aria-label="Blog post list">
|
||||
{posts.map((p) => {
|
||||
const href = `/blog/${p.file.pathname.split('/').pop().split('.').shift()}`;
|
||||
return (
|
||||
<BlogPostPreview title={p.title} publishDate={p.publishDate} href={href}>
|
||||
<span>{p.description}</span>
|
||||
</BlogPostPreview>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -1,110 +0,0 @@
|
|||
---
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Space from '../components/Space.astro';
|
||||
import Main from '../components/Main.astro';
|
||||
import Article from '../components/Article.astro';
|
||||
import Tagline from '../components/Tagline.astro';
|
||||
import MainHeader from '../components/MainHeader.astro';
|
||||
import Sponsors from '../components/Sponsors.astro';
|
||||
import GoogleAnalytics from '../components/GoogleAnalytics.astro';
|
||||
import YouTube from '../components/YouTube.astro';
|
||||
import '../components/YouTube.css';
|
||||
|
||||
let title = 'Astro';
|
||||
let description = 'Build faster websites with less client-side JavaScript';
|
||||
let permalink = 'https://astro.build/';
|
||||
let lang = 'en';
|
||||
---
|
||||
|
||||
<html lang={lang ?? 'en'}>
|
||||
<head>
|
||||
<BaseHead {title} {description} canonicalURL={permalink} />
|
||||
<link rel="stylesheet" href={Astro.resolve('../scss/global.scss')} />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<Space />
|
||||
|
||||
<Main>
|
||||
<MainHeader />
|
||||
<Article>
|
||||
<YouTube v="dsTXcSeAZq8" alt="Astro in 100 Seconds" />
|
||||
|
||||
<Tagline />
|
||||
|
||||
<p>
|
||||
For a technology built on top of three different languages, the modern web seems to focus an awful lot on JavaScript. We don’t think it has to—and
|
||||
that’s certainly <a href="https://css-tricks.com/the-great-divide/">not</a> <a
|
||||
href="https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/">a</a
|
||||
> <a href="https://macwright.com/2020/05/10/spa-fatigue.html">revolutionary</a> <a href="https://css-tricks.com/whats-old-is-new/">concept</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
We’ll eagerly jump at the chance to sing JavaScript’s praises, but HTML and CSS are pretty great too. There aren’t enough modern tools which reflect
|
||||
that, which is why we're building Astro.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
While we’re at it, it’s time to accept that the framework wars won’t have a winner—that’s why Astro lets you use any framework you want (or
|
||||
none at all). And if most sites only have <a href="https://jasonformat.com/islands-architecture/">islands</a> of interactivity, shouldn’t our tools optimize for that?
|
||||
We’re not <a href="https://markojs.com/">the first</a> to ask the question, but we might be the first with an answer for every framework.
|
||||
</p>
|
||||
|
||||
<p>We're hard at work on Astro! Keep your eyes to the skies, astronauts.</p>
|
||||
|
||||
<br />
|
||||
|
||||
<a class="action-button" href="/blog/astro-021-release/">
|
||||
New Blog Post - Astro 0.21
|
||||
<span style="float: right;">→</span>
|
||||
</a>
|
||||
|
||||
<div class="hint">
|
||||
<p>Psst... <a href="https://astro.build/chat">get early access to new features</a> by joining our Discord community.</p>
|
||||
</div>
|
||||
</Article>
|
||||
<Sponsors />
|
||||
</Main>
|
||||
|
||||
<style lang="scss">
|
||||
.hint {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
margin-top: 2em;
|
||||
padding: 2em 0;
|
||||
}
|
||||
.hint > p:first-child {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.action-button {
|
||||
border: 1px solid var(--color-green);
|
||||
padding: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
code {
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
border-radius: 2px;
|
||||
padding: 0.1em 0.2em;
|
||||
}
|
||||
.videoWrapper {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
height: 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.videoWrapper > iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script> console.log('%cGet early Astro access 👉 https://astro.build/chat', 'color:#17c083; font-size: 1.2em; padding: 1em;'); </script>
|
||||
<GoogleAnalytics />
|
||||
</body>
|
||||
</html>
|
|
@ -1,274 +0,0 @@
|
|||
@use './fonts.scss';
|
||||
@use './code.scss';
|
||||
|
||||
:root {
|
||||
--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
||||
--font-body: 'IBM Plex Sans', var(--font-fallback);
|
||||
--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
|
||||
'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
|
||||
|
||||
--color-white: #fff;
|
||||
--color-black: #000014;
|
||||
|
||||
--color-gray-50: #f9fafb;
|
||||
--color-gray-100: #f3f4f6;
|
||||
--color-gray-200: #e5e7eb;
|
||||
--color-gray-300: #d1d5db;
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-500: #6b7280;
|
||||
--color-gray-600: #4b5563;
|
||||
--color-gray-700: #374151;
|
||||
--color-gray-800: #1f2937;
|
||||
--color-gray-900: #111827;
|
||||
|
||||
--color-blue: #3894ff;
|
||||
--color-blue-rgb: 56, 148, 255;
|
||||
--color-green: #17c083;
|
||||
--color-green-rgb: 23, 192, 131;
|
||||
--color-orange: #ff5d01;
|
||||
--color-orange-rgb: 255, 93, 1;
|
||||
--color-purple: #882de7;
|
||||
--color-purple-rgb: 136, 45, 231;
|
||||
--color-red: #ff1639;
|
||||
--color-red-rgb: 255, 22, 57;
|
||||
--color-yellow: #ffbe2d;
|
||||
--color-yellow-rgb: 255, 190, 45;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--theme-accent: var(--color-orange);
|
||||
--theme-accent-rgb: var(--color-orange-rgb);
|
||||
--theme-accent-opacity: 0.1;
|
||||
--theme-divider: var(--color-gray-100);
|
||||
--theme-text: var(--color-gray-800);
|
||||
--theme-text-light: var(--color-gray-600);
|
||||
--theme-text-lighter: var(--color-gray-400);
|
||||
--theme-bg: var(--color-white);
|
||||
--theme-bg-offset: var(--color-gray-100);
|
||||
--theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
|
||||
--theme-code-inline-bg: var(--color-gray-100);
|
||||
--theme-code-text: var(--color-gray-100);
|
||||
--theme-code-bg: var(--color-gray-700);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--theme-bg);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
:root.theme-dark {
|
||||
color-scheme: dark;
|
||||
--theme-accent-opacity: 0.3;
|
||||
--theme-divider: var(--color-gray-900);
|
||||
--theme-text: var(--color-gray-200);
|
||||
--theme-text-light: var(--color-gray-400);
|
||||
--theme-text-lighter: var(--color-gray-600);
|
||||
--theme-bg: var(--color-black);
|
||||
--theme-bg-offset: var(--color-gray-900);
|
||||
--theme-code-inline-bg: var(--color-gray-800);
|
||||
--theme-code-text: var(--color-gray-200);
|
||||
--theme-code-bg: var(--color-gray-900);
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--theme-accent);
|
||||
background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--user-font-scale: 1rem - 16px;
|
||||
--max-width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
:root {
|
||||
--max-width: 40em;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
--gutter: 0.5rem;
|
||||
--doc-padding: 2rem;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.layout > :is(main, article) {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
:is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-bottom: 1.38rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
:is(h1, h2) {
|
||||
max-width: 40ch;
|
||||
}
|
||||
|
||||
:is(h2, h3):not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--theme-text-light);
|
||||
}
|
||||
|
||||
small,
|
||||
.text_small {
|
||||
font-size: 0.833rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-accent);
|
||||
text-underline-offset: 0.08em;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
a > code:not([class*='language']) {
|
||||
position: relative;
|
||||
color: var(--theme-accent);
|
||||
background: transparent;
|
||||
text-underline-offset: var(--padding-block);
|
||||
}
|
||||
|
||||
a > code:not([class*='language'])::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
background: var(--theme-accent);
|
||||
opacity: var(--theme-accent-opacity);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 0.25em;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Supporting Content */
|
||||
|
||||
code:not([class*='language']) {
|
||||
--border-radius: 3px;
|
||||
--padding-block: 0.2rem;
|
||||
--padding-inline: 0.33rem;
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
color: inherit;
|
||||
background-color: var(--theme-code-inline-bg);
|
||||
padding: var(--padding-block) var(--padding-inline);
|
||||
margin: calc(var(--padding-block) * -1) -0.125em;
|
||||
border-radius: var(--border-radius);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
pre > code:not([class*='language']) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
background-color: var(--theme-code-bg);
|
||||
color: var(--theme-code-text);
|
||||
--padding-block: 1rem;
|
||||
--padding-inline: 2rem;
|
||||
padding: var(--padding-block) var(--padding-inline);
|
||||
padding-right: calc(var(--padding-inline) * 2);
|
||||
margin-left: calc(50vw - var(--padding-inline));
|
||||
transform: translateX(-50vw);
|
||||
|
||||
line-height: 1.414;
|
||||
width: calc(100vw + (var(--padding-inline) * 2));
|
||||
max-width: calc(100% + (var(--padding-inline) * 2));
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 37.75em) {
|
||||
pre {
|
||||
--padding-inline: 1.25rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img.cover {
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
object-fit: cover;
|
||||
}
|
|
@ -1,155 +0,0 @@
|
|||
.language-css > code,
|
||||
.language-sass > code,
|
||||
.language-scss > code {
|
||||
color: #fd9170;
|
||||
}
|
||||
|
||||
[class*='language-'] .namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.atrule {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #ffcb6b;
|
||||
}
|
||||
|
||||
.token.attr-value {
|
||||
color: #a5e844;
|
||||
}
|
||||
|
||||
.token.attribute {
|
||||
color: #a5e844;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.token.builtin {
|
||||
color: #ffcb6b;
|
||||
}
|
||||
|
||||
.token.cdata {
|
||||
color: #80cbc4;
|
||||
}
|
||||
|
||||
.token.char {
|
||||
color: #80cbc4;
|
||||
}
|
||||
|
||||
.token.class {
|
||||
color: #ffcb6b;
|
||||
}
|
||||
|
||||
.token.class-name {
|
||||
color: #f2ff00;
|
||||
}
|
||||
|
||||
.token.comment {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.token.constant {
|
||||
color: #f2ff00;
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.token.doctype {
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.token.hexcode {
|
||||
color: #f2ff00;
|
||||
}
|
||||
|
||||
.token.id {
|
||||
color: #c792ea;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
color: #c792ea;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: #80cbc4;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #fd9170;
|
||||
}
|
||||
|
||||
.token.operator {
|
||||
color: #89ddff;
|
||||
}
|
||||
|
||||
.token.prolog {
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.token.property {
|
||||
color: #80cbc4;
|
||||
}
|
||||
|
||||
.token.pseudo-class {
|
||||
color: #a5e844;
|
||||
}
|
||||
|
||||
.token.pseudo-element {
|
||||
color: #a5e844;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #89ddff;
|
||||
}
|
||||
|
||||
.token.regex {
|
||||
color: #f2ff00;
|
||||
}
|
||||
|
||||
.token.selector {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: #a5e844;
|
||||
}
|
||||
|
||||
.token.symbol {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.token.unit {
|
||||
color: #fd9170;
|
||||
}
|
||||
|
||||
.token.url {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.token.variable {
|
||||
color: #ff6666;
|
||||
}
|
|
@ -1,107 +0,0 @@
|
|||
@use './fonts.scss';
|
||||
|
||||
:root {
|
||||
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
|
||||
'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
|
||||
--color-accent: #ff5d01;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
html {
|
||||
background-color: #000014;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 400;
|
||||
background-repeat: no-repeat;
|
||||
color: #f3f4f6;
|
||||
}
|
||||
.visually-hidden {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: var(--color-accent);
|
||||
padding: 0.05em 0.125em;
|
||||
margin: -0.05em -0.125em;
|
||||
transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
z-index: 0;
|
||||
display: inline-block;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
|
||||
&::before {
|
||||
transform: scaleY(1);
|
||||
background: var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
&:visited {
|
||||
// color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform-origin: bottom center;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
background: var(--color-accent);
|
||||
pointer-events: none;
|
||||
transform: scaleY(0.05);
|
||||
transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
a + a {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
section.error-content {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
p.error-code {
|
||||
color: #ff5d01;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h1 {
|
||||
margin-top: -0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
a {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
|
@ -1,39 +0,0 @@
|
|||
/* ibm-plex-sans-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('IBM Plex Sans'), url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* ibm-plex-sans-600 - latin */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('IBM Plex Sans Medium'), url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* ibm-plex-sans-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('IBM Plex Sans Bold'), url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* ibm-plex-mono-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('IBM Plex Mono Regular'), url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* ibm-plex-mono-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('IBM Plex Mono Bold'), url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff2') format('woff2');
|
||||
}
|
|
@ -1,103 +0,0 @@
|
|||
@use './fonts.scss';
|
||||
|
||||
:root {
|
||||
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
|
||||
'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
|
||||
--color-accent: #ff5d01;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
html {
|
||||
background-color: #000014;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 400;
|
||||
background-repeat: no-repeat;
|
||||
color: #f3f4f6;
|
||||
}
|
||||
.visually-hidden {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: var(--color-accent);
|
||||
padding: 0.05em 0.125em;
|
||||
margin: -0.05em -0.125em;
|
||||
transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
z-index: 0;
|
||||
display: inline-block;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
|
||||
&::before {
|
||||
transform: scaleY(1);
|
||||
background: var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
&:visited {
|
||||
// color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform-origin: bottom center;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
background: var(--color-accent);
|
||||
pointer-events: none;
|
||||
transform: scaleY(0.05);
|
||||
transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
a + a {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
header a {
|
||||
color: var(--theme-text-lighter) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
header a::before,
|
||||
header a:hover::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
header h1 a:hover {
|
||||
}
|
|
@ -1,26 +0,0 @@
|
|||
{
|
||||
"cleanUrls": true,
|
||||
"trailingSlash": false,
|
||||
"redirects": [
|
||||
{
|
||||
"source": "/docs/:match*",
|
||||
"destination": "https://docs.astro.build/:match*",
|
||||
"permanent": false
|
||||
},
|
||||
{
|
||||
"source": "/posts/:match*",
|
||||
"destination": "blog/:match*",
|
||||
"permanent": false
|
||||
},
|
||||
{
|
||||
"source": "/chat",
|
||||
"destination": "https://discord.gg/grF4GTXXYm"
|
||||
}
|
||||
],
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "/play/:match*",
|
||||
"destination": "https://play.astro.build/play/:match*"
|
||||
}
|
||||
]
|
||||
}
|