diff --git a/examples/blog-with-router/.gitignore b/examples/blog-with-router/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/blog-with-router/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/blog-with-router/CHANGELOG.md b/examples/blog-with-router/CHANGELOG.md new file mode 100644 index 000000000..70acc9610 --- /dev/null +++ b/examples/blog-with-router/CHANGELOG.md @@ -0,0 +1,7 @@ +# @astrojs/example-blog + +## 0.0.2 + +### Patch Changes + +- e711668: Improved accessibility of the example blog diff --git a/examples/blog-with-router/README.md b/examples/blog-with-router/README.md new file mode 100644 index 000000000..59df007d1 --- /dev/null +++ b/examples/blog-with-router/README.md @@ -0,0 +1,47 @@ +# Astro Blog Example + +> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! + +Features: + +- ✅ SEO-friendly setup with canonical URLs and OpenGraph data +- ✅ Full Markdown support +- ✅ RSS 2.0 generation +- ✅ Sitemap.xml generation + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +├── public/ +│ ├── robots.txt +│ └── favicon.ico +├── src/ +│ ├── components/ +│ │ └── Tour.astro +│ └── pages/ +│ └── index.astro +└── package.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 start` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | + +## 👀 Want to learn more? + +Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat). diff --git a/examples/blog-with-router/astro.config.mjs b/examples/blog-with-router/astro.config.mjs new file mode 100644 index 000000000..d72db6491 --- /dev/null +++ b/examples/blog-with-router/astro.config.mjs @@ -0,0 +1,14 @@ +export default { + // projectRoot: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project. + // pages: './src/pages', // Path to Astro components, pages, and data + // dist: './dist', // When running `astro build`, path to final static output + // public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. + buildOptions: { + site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. + // sitemap: true, // Generate sitemap (set to "false" to disable) + }, + devOptions: { + // port: 3000, // The port to run the dev server on. + // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' + }, +}; diff --git a/examples/blog-with-router/package.json b/examples/blog-with-router/package.json new file mode 100644 index 000000000..b51fe67f6 --- /dev/null +++ b/examples/blog-with-router/package.json @@ -0,0 +1,16 @@ +{ + "name": "@astrojs/example-blog-with-router", + "version": "0.0.2", + "private": true, + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.13.10", + "@astrojs/router": "^0.1.0" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/blog-with-router/public/authors/don.jpg b/examples/blog-with-router/public/authors/don.jpg new file mode 100644 index 000000000..4419679de Binary files /dev/null and b/examples/blog-with-router/public/authors/don.jpg differ diff --git a/examples/blog-with-router/public/authors/sancho.jpg b/examples/blog-with-router/public/authors/sancho.jpg new file mode 100644 index 000000000..2c2b0c6bd Binary files /dev/null and b/examples/blog-with-router/public/authors/sancho.jpg differ diff --git a/examples/blog-with-router/public/favicon.svg b/examples/blog-with-router/public/favicon.svg new file mode 100644 index 000000000..542f90aec --- /dev/null +++ b/examples/blog-with-router/public/favicon.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/examples/blog-with-router/public/global.scss b/examples/blog-with-router/public/global.scss new file mode 100644 index 000000000..d5891f6b4 --- /dev/null +++ b/examples/blog-with-router/public/global.scss @@ -0,0 +1,25 @@ +body { + font-family: 'Spectral', serif; + line-height: 1.4; +} + +p { + line-height: 2; +} + +a { + color: crimson; +} + +img { + max-width: 100%; + height: auto; +} + +.wrapper { + max-width: 60rem; + margin-left: auto; + margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; +} diff --git a/examples/blog-with-router/public/images/chapter-01.jpg b/examples/blog-with-router/public/images/chapter-01.jpg new file mode 100644 index 000000000..a848d3059 Binary files /dev/null and b/examples/blog-with-router/public/images/chapter-01.jpg differ diff --git a/examples/blog-with-router/public/images/chapter-02.jpg b/examples/blog-with-router/public/images/chapter-02.jpg new file mode 100644 index 000000000..0a18c689d Binary files /dev/null and b/examples/blog-with-router/public/images/chapter-02.jpg differ diff --git a/examples/blog-with-router/public/images/chapter-03.jpg b/examples/blog-with-router/public/images/chapter-03.jpg new file mode 100644 index 000000000..e3b6823ce Binary files /dev/null and b/examples/blog-with-router/public/images/chapter-03.jpg differ diff --git a/examples/blog-with-router/public/index.js b/examples/blog-with-router/public/index.js new file mode 100644 index 000000000..2857d6e6c --- /dev/null +++ b/examples/blog-with-router/public/index.js @@ -0,0 +1 @@ +import '@astrojs/router'; diff --git a/examples/blog-with-router/src/components/MainHead.astro b/examples/blog-with-router/src/components/MainHead.astro new file mode 100644 index 000000000..94d9ff682 --- /dev/null +++ b/examples/blog-with-router/src/components/MainHead.astro @@ -0,0 +1,41 @@ +--- +// props +export let title: string; +export let description: string; +export let image: string | undefined; +export let type: string | undefined; +export let next: string | undefined; +export let prev: string | undefined; +export let canonicalURL: string | undefined; +--- + + + +{title} + + + + + + + + + + + +{next && } +{prev && } + + + + +{image && ()} + + + + + + +{image && ()} + +