diff options
| -rw-r--r-- | examples/deno/.npmrc | 2 | ||||
| -rw-r--r-- | examples/deno/.stackblitzrc | 6 | ||||
| -rw-r--r-- | examples/deno/.vscode/extensions.json | 4 | ||||
| -rw-r--r-- | examples/deno/.vscode/launch.json | 11 | ||||
| -rw-r--r-- | examples/deno/README.md | 49 | ||||
| -rw-r--r-- | examples/deno/astro.config.mjs | 9 | ||||
| -rw-r--r-- | examples/deno/package.json | 18 | ||||
| -rw-r--r-- | examples/deno/public/favicon.ico | bin | 0 -> 4286 bytes | |||
| -rw-r--r-- | examples/deno/sandbox.config.json | 11 | ||||
| -rw-r--r-- | examples/deno/src/components/Layout.astro | 55 | ||||
| -rw-r--r-- | examples/deno/src/pages/index.astro | 174 | ||||
| -rw-r--r-- | examples/deno/tsconfig.json | 3 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 9 |
13 files changed, 351 insertions, 0 deletions
diff --git a/examples/deno/.npmrc b/examples/deno/.npmrc new file mode 100644 index 000000000..ef83021af --- /dev/null +++ b/examples/deno/.npmrc @@ -0,0 +1,2 @@ +# Expose Astro dependencies for `pnpm` users +shamefully-hoist=true diff --git a/examples/deno/.stackblitzrc b/examples/deno/.stackblitzrc new file mode 100644 index 000000000..43798ecff --- /dev/null +++ b/examples/deno/.stackblitzrc @@ -0,0 +1,6 @@ +{ + "startCommand": "npm start", + "env": { + "ENABLE_CJS_IMPORTS": true + } +}
\ No newline at end of file diff --git a/examples/deno/.vscode/extensions.json b/examples/deno/.vscode/extensions.json new file mode 100644 index 000000000..22a15055d --- /dev/null +++ b/examples/deno/.vscode/extensions.json @@ -0,0 +1,4 @@ +{ + "recommendations": ["astro-build.astro-vscode"], + "unwantedRecommendations": [] +} diff --git a/examples/deno/.vscode/launch.json b/examples/deno/.vscode/launch.json new file mode 100644 index 000000000..d64220976 --- /dev/null +++ b/examples/deno/.vscode/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "command": "./node_modules/.bin/astro dev", + "name": "Development server", + "request": "launch", + "type": "node-terminal" + } + ] +} diff --git a/examples/deno/README.md b/examples/deno/README.md new file mode 100644 index 000000000..9a7d7da61 --- /dev/null +++ b/examples/deno/README.md @@ -0,0 +1,49 @@ +# Welcome to [Astro](https://astro.build) + +[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) + +> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun! + + + + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +├── public/ +│ └── favicon.svg +├── src/ +│ ├── components/ +│ │ └── Layout.astro +│ └── pages/ +│ └── index.astro +├── package.json +└── tsconfig.json +``` + +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. + +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + +Any static assets, like images, can be placed in the `public/` directory. + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :--------------------- | :------------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| | (preview uses Deno CLI) | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` | +| `npm run astro --help` | Get help using the Astro CLI | + +## 👀 Want to learn more? + +Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). diff --git a/examples/deno/astro.config.mjs b/examples/deno/astro.config.mjs new file mode 100644 index 000000000..71783d132 --- /dev/null +++ b/examples/deno/astro.config.mjs @@ -0,0 +1,9 @@ +import { defineConfig } from 'astro/config'; + +import deno from "@astrojs/deno"; + +// https://astro.build/config +export default defineConfig({ + output: "server", + adapter: deno() +});
\ No newline at end of file diff --git a/examples/deno/package.json b/examples/deno/package.json new file mode 100644 index 000000000..5951a77e1 --- /dev/null +++ b/examples/deno/package.json @@ -0,0 +1,18 @@ +{ + "name": "@example/deno", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "deno run --allow-net --allow-read ./dist/server/entry.mjs", + "astro": "astro" + }, + "dependencies": { + "astro": "^1.1.5" + }, + "devDependencies": { + "@astrojs/deno": "^1.0.1" + } +} diff --git a/examples/deno/public/favicon.ico b/examples/deno/public/favicon.ico Binary files differnew file mode 100644 index 000000000..578ad458b --- /dev/null +++ b/examples/deno/public/favicon.ico diff --git a/examples/deno/sandbox.config.json b/examples/deno/sandbox.config.json new file mode 100644 index 000000000..9178af77d --- /dev/null +++ b/examples/deno/sandbox.config.json @@ -0,0 +1,11 @@ +{ + "infiniteLoopProtection": true, + "hardReloadOnChange": false, + "view": "browser", + "template": "node", + "container": { + "port": 3000, + "startScript": "start", + "node": "14" + } +} diff --git a/examples/deno/src/components/Layout.astro b/examples/deno/src/components/Layout.astro new file mode 100644 index 000000000..b8fc659fe --- /dev/null +++ b/examples/deno/src/components/Layout.astro @@ -0,0 +1,55 @@ +--- +export interface Props { + title: string; +} + +const { title } = Astro.props as Props; +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width"> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <title>{title}</title> +</head> +<body> + <slot /> +</body> +</html> + +<style> + :root { + --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); + --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); + --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3rem); + + --color-text: hsl(12, 5%, 4%); + --color-bg: hsl(10, 21%, 95%); + } + + html { + font-family: system-ui, sans-serif; + font-size: var(--font-size-base); + color: var(--color-text); + background-color: var(--color-bg); + } + + body { + margin: 0; + } + + :global(h1) { + font-size: var(--font-size-xl); + } + + :global(h2) { + font-size: var(--font-size-lg); + } + + :global(code) { + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; + } +</style> diff --git a/examples/deno/src/pages/index.astro b/examples/deno/src/pages/index.astro new file mode 100644 index 000000000..2a0bf7d07 --- /dev/null +++ b/examples/deno/src/pages/index.astro @@ -0,0 +1,174 @@ +--- +import Layout from '../components/Layout.astro'; +--- + +<Layout title="Welcome to Astro (on Deno)."> + <main> + <h1>Welcome to <span class="text-gradient">Astro</span> on Deno</h1> + <p class="instructions"><strong>Your first mission:</strong> tweak this message to try our hot module reloading. Check the <code>src/pages</code> directory!</p> + <ul role="list" class="link-card-grid"> + <li class="link-card"> + <a href="https://astro.build/integrations/"> + <h2>Integrations <span>→</span></h2> + <p>Add component frameworks, Tailwind, Partytown, and more!</p> + </a> + </li> + <li class="link-card"> + <a href="https://astro.build/themes/"> + <h2>Themes <span>→</span></h2> + <p>Explore a galaxy of community-built starters.</p> + </a> + </li> + <li class="link-card"> + <a href="https://docs.astro.build/"> + <h2>Docs <span>→</span></h2> + <p>Learn our complete feature set and explore the API.</p> + </a> + </li> + <li class="link-card"> + <a href="https://astro.build/chat/"> + <h2>Chat <span>→</span></h2> + <p> + Ask, contribute, and have fun on our community Discord + <svg + class="heart" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 512 512" + width="16" + height="16" + fill="currentColor" + > + <title>heart</title> + <path d="M256 448l-30.164-27.211C118.718 322.442 48 258.61 48 179.095 48 114.221 97.918 64 162.4 64c36.399 0 70.717 16.742 93.6 43.947C278.882 80.742 313.199 64 349.6 64 414.082 64 464 114.221 464 179.095c0 79.516-70.719 143.348-177.836 241.694L256 448z" /> + </svg> + </p> + </a> + </li> + </ul> + </main> +</Layout> + +<style> + :root { + --color-border: hsl(17, 24%, 90%); + --astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4); + --link-gradient: linear-gradient(45deg, #4F39FA, #DA62C4 30%, var(--color-border) 60%); + --night-sky-gradient: linear-gradient(0deg, #392362 -33%, #431f69 10%, #30216b 50%, #1f1638 100%); + } + + h2 { + margin: 0; + transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); + } + + h2 span { + display: inline-block; + transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); + } + + code { + font-size: 0.875em; + border: 0.1em solid var(--color-border); + border-radius: 4px; + padding: 0.15em 0.25em; + } + + main { + margin: auto; + padding: 1em; + max-width: 60ch; + } + + .text-gradient { + font-weight: 900; + background-image: var(--astro-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 100% 200%; + background-position-y: 100%; + border-radius: 0.4rem; + animation: pulse 4s ease-in-out infinite; + } + + @keyframes pulse { + 0%, 100% { + background-position-y: 0%; + } + 50% { + background-position-y: 80%; + } + } + + .instructions { + line-height: 1.8; + margin-bottom: 2rem; + background-image: var(--night-sky-gradient); + padding: 1.5rem; + border-radius: 0.4rem; + color: var(--color-bg); + } + + .link-card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); + gap: 1rem; + padding: 0; + } + + .link-card { + list-style: none; + display: flex; + padding: 0.15rem; + background-image: var(--link-gradient); + background-size: 400%; + border-radius: 0.5rem; + background-position: 100%; + transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); + } + + .link-card > a { + width: 100%; + text-decoration: none; + line-height: 1.4; + padding: 1em 1.3em; + border-radius: 0.35rem; + color: var(--text-color); + background-color: white; + opacity: 0.8; + } + + .link-card:is(:hover, :focus-within) { + background-position: 0; + } + + .link-card:is(:hover, :focus-within) h2 { + color: #4F39FA; + } + + .link-card:is(:hover, :focus-within) h2 span { + transform: translateX(2px); + } + + .heart { + display: inline-block; + color: #DA62C4; + animation: heartbeat 3s ease-in-out infinite; + } + + @keyframes heartbeat { + 0%, + 50%, + 100% { + transform: scale(1); + } + 5% { + transform: scale(1.125); + } + 10% { + transform: scale(1.05); + } + 15% { + transform: scale(1.25); + } + } +</style> diff --git a/examples/deno/tsconfig.json b/examples/deno/tsconfig.json new file mode 100644 index 000000000..d78f81ec4 --- /dev/null +++ b/examples/deno/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "astro/tsconfigs/base" +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3ec7fb06a..3630d8801 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,6 +78,15 @@ importers: devDependencies: astro: link:../../packages/astro + examples/deno: + specifiers: + '@astrojs/deno': ^1.0.1 + astro: ^1.1.5 + dependencies: + astro: link:../../packages/astro + devDependencies: + '@astrojs/deno': link:../../packages/integrations/deno + examples/docs: specifiers: '@algolia/client-search': ^4.13.1 |