diff --git a/examples/blog/.gitignore b/examples/blog/.gitignore deleted file mode 100644 index 1521c8b7652b..000000000000 --- a/examples/blog/.gitignore +++ /dev/null @@ -1 +0,0 @@ -dist diff --git a/examples/blog/README.md b/examples/blog/README.md index f1894ad623e2..2a20654f24d7 100644 --- a/examples/blog/README.md +++ b/examples/blog/README.md @@ -1,15 +1,22 @@ # Astro Blog Example +Features: + +- ✅ SEO-friendly setup with canonical URLs and OpenGraph data +- ✅ Full Markdown support +- ✅ RSS 2.0 generation +- ✅ Sitemap.xml generation + ## Setup ``` -npm install +yarn ``` ## Dev ``` -npm start +yarn start ``` Preview at `http://localhost:3000` @@ -17,7 +24,7 @@ Preview at `http://localhost:3000` ## Build ``` -npm build +yarn build ``` Will output static site at `./dist` diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs index 2f34788e54a3..89416b20f084 100644 --- a/examples/blog/astro.config.mjs +++ b/examples/blog/astro.config.mjs @@ -2,9 +2,9 @@ export default { projectRoot: '.', public: './public', dist: './dist', - buildOptions:{ + buildOptions: { sitemap: true, - site: 'https://muppet-blog.github.io/', + site: 'https://mysite.dev/', // change }, astroRoot: './src', }; diff --git a/examples/blog/public/authors/don.jpg b/examples/blog/public/authors/don.jpg new file mode 100644 index 000000000000..4419679de527 Binary files /dev/null and b/examples/blog/public/authors/don.jpg differ diff --git a/examples/blog/public/authors/sancho.jpg b/examples/blog/public/authors/sancho.jpg new file mode 100644 index 000000000000..2c2b0c6bdf64 Binary files /dev/null and b/examples/blog/public/authors/sancho.jpg differ diff --git a/examples/blog/public/global.scss b/examples/blog/public/global.scss index a6007631ae4b..d5891f6b428e 100644 --- a/examples/blog/public/global.scss +++ b/examples/blog/public/global.scss @@ -1,9 +1,23 @@ body { - font-family: sans-serif; + font-family: 'Spectral', serif; + line-height: 1.4; +} + +p { + line-height: 2; +} + +a { + color: crimson; +} + +img { + max-width: 100%; + height: auto; } .wrapper { - max-width: 1400px; + max-width: 60rem; margin-left: auto; margin-right: auto; padding-left: 2rem; diff --git a/examples/blog/public/images/animal.jpg b/examples/blog/public/images/animal.jpg deleted file mode 100644 index fdd4bc3ecb5b..000000000000 Binary files a/examples/blog/public/images/animal.jpg and /dev/null differ diff --git a/examples/blog/public/images/chapter-01.jpg b/examples/blog/public/images/chapter-01.jpg new file mode 100644 index 000000000000..a848d3059480 Binary files /dev/null and b/examples/blog/public/images/chapter-01.jpg differ diff --git a/examples/blog/public/images/chapter-02.jpg b/examples/blog/public/images/chapter-02.jpg new file mode 100644 index 000000000000..0a18c689d9ee Binary files /dev/null and b/examples/blog/public/images/chapter-02.jpg differ diff --git a/examples/blog/public/images/chapter-03.jpg b/examples/blog/public/images/chapter-03.jpg new file mode 100644 index 000000000000..e3b6823cee7a Binary files /dev/null and b/examples/blog/public/images/chapter-03.jpg differ diff --git a/examples/blog/public/images/gonzo.jpg b/examples/blog/public/images/gonzo.jpg deleted file mode 100644 index 840de2219ec0..000000000000 Binary files a/examples/blog/public/images/gonzo.jpg and /dev/null differ diff --git a/examples/blog/public/images/kermit.jpg b/examples/blog/public/images/kermit.jpg deleted file mode 100644 index 4dcb88cec45c..000000000000 Binary files a/examples/blog/public/images/kermit.jpg and /dev/null differ diff --git a/examples/blog/public/images/ms-piggy.jpg b/examples/blog/public/images/ms-piggy.jpg deleted file mode 100644 index 309a51b73fe5..000000000000 Binary files a/examples/blog/public/images/ms-piggy.jpg and /dev/null differ diff --git a/examples/blog/public/images/muppet-babies.jpg b/examples/blog/public/images/muppet-babies.jpg deleted file mode 100644 index 574ef4bf1e31..000000000000 Binary files a/examples/blog/public/images/muppet-babies.jpg and /dev/null differ diff --git a/examples/blog/public/images/muppet-treasure-island.png b/examples/blog/public/images/muppet-treasure-island.png deleted file mode 100644 index ef6ba879d78e..000000000000 Binary files a/examples/blog/public/images/muppet-treasure-island.png and /dev/null differ diff --git a/examples/blog/public/images/muppets-from-space.jpg b/examples/blog/public/images/muppets-from-space.jpg deleted file mode 100644 index 3c04ca3024f5..000000000000 Binary files a/examples/blog/public/images/muppets-from-space.jpg and /dev/null differ diff --git a/examples/blog/public/images/muppets-most-wanted.jpg b/examples/blog/public/images/muppets-most-wanted.jpg deleted file mode 100644 index cabb6c672718..000000000000 Binary files a/examples/blog/public/images/muppets-most-wanted.jpg and /dev/null differ diff --git a/examples/blog/public/images/rizzo.jpg b/examples/blog/public/images/rizzo.jpg deleted file mode 100644 index 7f36bf9a7ba8..000000000000 Binary files a/examples/blog/public/images/rizzo.jpg and /dev/null differ diff --git a/examples/blog/public/images/the-muppet-christmas-carol.jpg b/examples/blog/public/images/the-muppet-christmas-carol.jpg deleted file mode 100644 index 27d19a51bdbe..000000000000 Binary files a/examples/blog/public/images/the-muppet-christmas-carol.jpg and /dev/null differ diff --git a/examples/blog/public/images/the-muppet-show.jpg b/examples/blog/public/images/the-muppet-show.jpg deleted file mode 100644 index 86361236c1d6..000000000000 Binary files a/examples/blog/public/images/the-muppet-show.jpg and /dev/null differ diff --git a/examples/blog/public/images/the-muppets.jpg b/examples/blog/public/images/the-muppets.jpg deleted file mode 100644 index 4d750ed9741e..000000000000 Binary files a/examples/blog/public/images/the-muppets.jpg and /dev/null differ diff --git a/examples/blog/src/components/AuthorCard.astro b/examples/blog/src/components/AuthorCard.astro deleted file mode 100644 index 46ff504f7c81..000000000000 --- a/examples/blog/src/components/AuthorCard.astro +++ /dev/null @@ -1,31 +0,0 @@ ---- -export let author; ---- - - - -
-
- {author.name} -
- {author.name} -
diff --git a/examples/blog/src/components/MainHead.astro b/examples/blog/src/components/MainHead.astro index dfeb9dfb492a..86f750ddc011 100644 --- a/examples/blog/src/components/MainHead.astro +++ b/examples/blog/src/components/MainHead.astro @@ -7,33 +7,33 @@ export let type: string | undefined; export let next: string | undefined; export let prev: string | undefined; export let canonicalURL: string | undefined; - -// internal data -const OG_TYPES = { - 'movie': 'video.movie', - 'television': 'video.tv_show' -} --- - + {title} - - - - -{next && } -{prev && } + + + + + + + + + + + +{next && } +{prev && } - - -{image && ()} -{OG_TYPES[type] && ()} + + +{image && ()} - - - - -{image && ()} + + + + +{image && ()} diff --git a/examples/blog/src/components/Nav.astro b/examples/blog/src/components/Nav.astro index f1ac28c98040..86919ac4ddd3 100644 --- a/examples/blog/src/components/Nav.astro +++ b/examples/blog/src/components/Nav.astro @@ -1,3 +1,7 @@ +--- +export let title; +--- + diff --git a/examples/blog/src/components/Pagination.astro b/examples/blog/src/components/Pagination.astro index 8e033c668081..7b01e59b5420 100644 --- a/examples/blog/src/components/Pagination.astro +++ b/examples/blog/src/components/Pagination.astro @@ -6,17 +6,21 @@ export let nextUrl: string; - +
+ +
diff --git a/examples/blog/src/components/PostPreview.astro b/examples/blog/src/components/PostPreview.astro index e4e39143adef..59c54e8fa933 100644 --- a/examples/blog/src/components/PostPreview.astro +++ b/examples/blog/src/components/PostPreview.astro @@ -2,57 +2,62 @@ export let post; export let author; -import AuthorCard from './AuthorCard.astro'; - function formatDate(date) { - return new Date(date).toUTCString(); + return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY } ---
-
- {post.title} -
+

{post.title}

- - -

{post.description}

- Read + {author.name} + +

+ {post.description} + Read +

diff --git a/examples/blog/src/data/authors.json b/examples/blog/src/data/authors.json index c0f247e0236a..e958e7cd1f09 100644 --- a/examples/blog/src/data/authors.json +++ b/examples/blog/src/data/authors.json @@ -1,27 +1,10 @@ { - "animal": { - "name": "Animal", - "email": "animal@muppets.co", - "img": "/images/animal.jpg" + "don": { + "name": "Don Quixote", + "image": "/authors/don.jpg" }, - "kermit": { - "name": "Kermit the Frog", - "email": "kermit@muppets.co", - "img": "/images/kermit.jpg" - }, - "ms-piggy": { - "name": "Animal", - "email": "mspiggy@muppets.co", - "img": "/images/ms-piggy.jpg" - }, - "gonzo": { - "name": "Gonzo", - "email": "thegonz@muppets.co", - "img": "/images/gonzo.jpg" - }, - "rizzo": { - "name": "Rizzo the Rat", - "email": "rizzo@muppets.co", - "img": "/images/rizzo.jpg" + "sancho": { + "name": "Sancho Panza", + "image": "/authors/sancho.jpg" } } diff --git a/examples/blog/src/layouts/post.astro b/examples/blog/src/layouts/post.astro index 09e0fdbcd289..5149528a056f 100644 --- a/examples/blog/src/layouts/post.astro +++ b/examples/blog/src/layouts/post.astro @@ -1,5 +1,4 @@ --- -import AuthorCard from '../components/AuthorCard.astro'; import MainHead from '../components/MainHead.astro'; import Nav from '../components/Nav.astro'; @@ -11,18 +10,67 @@ import authorData from '../data/authors.json'; {content.title} - + +