From 2b346d7a4c08b2c6ab6276751a8a984ba050656f Mon Sep 17 00:00:00 2001 From: Drew Powers <1369770+drwpow@users.noreply.github.com> Date: Tue, 6 Apr 2021 15:54:55 -0600 Subject: [PATCH] Blog Support 1/3: Data fetching (#62) * Add example blog * Add author data * Improve navigation * Style nav * Add friendly error message * Throw error if import glob used for non-Markdown files * Use import.meta.collection() API instead * README fixes --- .eslintrc.cjs | 1 + README.md | 94 +- .../blog/astro/components/AuthorCard.astro | 31 + examples/blog/astro/components/MainHead.astro | 32 + examples/blog/astro/components/Nav.astro | 44 + .../blog/astro/components/Pagination.astro | 12 + .../blog/astro/components/PostPreview.astro | 58 + examples/blog/astro/data/authors.json | 27 + examples/blog/astro/layouts/post.astro | 31 + examples/blog/astro/pages/index.astro | 43 + .../blog/astro/pages/post/muppet-babies.md | 11 + .../pages/post/muppet-treasure-island.md | 13 + .../astro/pages/post/muppets-from-space.md | 11 + .../astro/pages/post/muppets-most-wanted.md | 11 + .../pages/post/the-muppet-christmas-carol.md | 11 + .../blog/astro/pages/post/the-muppet-show.md | 11 + examples/blog/astro/pages/post/the-muppets.md | 11 + examples/blog/package-lock.json | 1773 +++++++++++++++++ examples/blog/package.json | 9 + examples/blog/public/global.css | 11 + examples/blog/public/images/animal.jpg | Bin 0 -> 41384 bytes examples/blog/public/images/gonzo.jpg | Bin 0 -> 18388 bytes examples/blog/public/images/kermit.jpg | Bin 0 -> 34092 bytes examples/blog/public/images/ms-piggy.jpg | Bin 0 -> 44343 bytes examples/blog/public/images/muppet-babies.jpg | Bin 0 -> 11726 bytes .../public/images/muppet-treasure-island.png | Bin 0 -> 234006 bytes .../blog/public/images/muppets-from-space.jpg | Bin 0 -> 21347 bytes .../public/images/muppets-most-wanted.jpg | Bin 0 -> 183425 bytes examples/blog/public/images/rizzo.jpg | Bin 0 -> 14767 bytes .../images/the-muppet-christmas-carol.jpg | Bin 0 -> 148373 bytes .../blog/public/images/the-muppet-show.jpg | Bin 0 -> 81676 bytes examples/blog/public/images/the-muppets.jpg | Bin 0 -> 32105 bytes package-lock.json | 19 + package.json | 1 + src/compiler/codegen.ts | 115 +- src/config.ts | 13 +- 36 files changed, 2359 insertions(+), 34 deletions(-) create mode 100644 examples/blog/astro/components/AuthorCard.astro create mode 100644 examples/blog/astro/components/MainHead.astro create mode 100644 examples/blog/astro/components/Nav.astro create mode 100644 examples/blog/astro/components/Pagination.astro create mode 100644 examples/blog/astro/components/PostPreview.astro create mode 100644 examples/blog/astro/data/authors.json create mode 100644 examples/blog/astro/layouts/post.astro create mode 100644 examples/blog/astro/pages/index.astro create mode 100644 examples/blog/astro/pages/post/muppet-babies.md create mode 100644 examples/blog/astro/pages/post/muppet-treasure-island.md create mode 100644 examples/blog/astro/pages/post/muppets-from-space.md create mode 100644 examples/blog/astro/pages/post/muppets-most-wanted.md create mode 100644 examples/blog/astro/pages/post/the-muppet-christmas-carol.md create mode 100644 examples/blog/astro/pages/post/the-muppet-show.md create mode 100644 examples/blog/astro/pages/post/the-muppets.md create mode 100644 examples/blog/package-lock.json create mode 100644 examples/blog/package.json create mode 100644 examples/blog/public/global.css create mode 100644 examples/blog/public/images/animal.jpg create mode 100644 examples/blog/public/images/gonzo.jpg create mode 100644 examples/blog/public/images/kermit.jpg create mode 100644 examples/blog/public/images/ms-piggy.jpg create mode 100644 examples/blog/public/images/muppet-babies.jpg create mode 100644 examples/blog/public/images/muppet-treasure-island.png create mode 100644 examples/blog/public/images/muppets-from-space.jpg create mode 100644 examples/blog/public/images/muppets-most-wanted.jpg create mode 100644 examples/blog/public/images/rizzo.jpg create mode 100644 examples/blog/public/images/the-muppet-christmas-carol.jpg create mode 100644 examples/blog/public/images/the-muppet-show.jpg create mode 100644 examples/blog/public/images/the-muppets.jpg diff --git a/.eslintrc.cjs b/.eslintrc.cjs index e0c03858c..7a8924d3a 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -11,6 +11,7 @@ module.exports = { '@typescript-eslint/no-unused-vars': 'off', '@typescript-eslint/no-use-before-define': 'off', '@typescript-eslint/no-var-requires': 'off', + 'no-console': 'warn', 'no-shadow': 'error', 'prefer-const': 'off', 'prefer-rest-params': 'off', diff --git a/README.md b/README.md index 2621bc195..cd1241b7f 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,6 @@ A next-generation static-site generator with partial hydration. Use your favorit npm install astro ``` -TODO: astro boilerplate - ## 🧞 Development Add a `dev` npm script to your `/package.json` file: @@ -54,19 +52,20 @@ export default { By default, Astro outputs zero client-side JS. If you'd like to include an interactive component in the client output, you may use any of the following techniques. -- `MyComponent:load` will render `MyComponent` on page load -- `MyComponent:idle` will use `requestIdleCallback` to render `MyComponent` as soon as main thread is free -- `MyComponent:visible` will use an `IntersectionObserver` to render `MyComponent` when the element enters the viewport +- `` will render an HTML-only version of `MyComponent` (default) +- `` will render `MyComponent` on page load +- `` will use [requestIdleCallback()][request-idle-cb] to render `MyComponent` as soon as main thread is free +- `` will use an [IntersectionObserver][intersection-observer] to render `MyComponent` when the element enters the viewport ### 💅 Styling If you‘ve used [Svelte][svelte]’s styles before, Astro works almost the same way. In any `.astro` file, start writing styles in a `
I’m a scoped style
@@ -76,13 +75,13 @@ If you‘ve used [Svelte][svelte]’s styles before, Astro works almost the same Astro also supports [Sass][sass] out-of-the-box; no configuration needed: -```astro +```html

Title

@@ -117,14 +116,71 @@ _Note: a Tailwind config file is currently required to enable Tailwind in Astro, Then write Tailwind in your project just like you‘re used to: -```astro +```html ``` +#### 🍱 Collections (beta) + +Astro’s Collections API is useful for grabbing collections of content. Currently only `*.md` files are supported. + +##### 🔽 Markdown + +```jsx +// pages/blog.astro +--- +import PostPreview from '../components/PostPreview.astro'; + +const blogPosts = import.meta.collections('./post/*.md'); +--- + +
+

Blog Posts

+ {blogPosts.map((post) => ( + + )} +
+``` + +This will load all markdown files located in `/pages/post/*.md`, compile them into an array, then expose them to the page. + +If you were to inspect the array, you‘d find the following schema: + +```js +const blogPosts = [ + { + content: string, // Markdown converted to HTML + // all other frontmatter data + }, + // … +]; +``` + +##### 🧑‍🍳 Advanced usage + +All of the following options are supported under the 2nd parameter of `import.meta.collections()`: + +```js +const collection = import.meta.collections('./post/*.md', { + /** If `page` is omitted, all results are returned */ + page: 1, // ⚠️ starts at 1, not 0 + /** How many items should be returned per-page (ignored if `page` is missing; default: 25) */ + perPage: 25, + /** How items should be sorted (default: no sort) */ + sort(a, b) { + return new Date(b.date) - new Date(a.date); // sort newest first, by `date` in frontmatter + } + /** Should items be filtered by their frontmatter data? */ + filter(post) { + return post.tag === 'movie'; // (optional) only return posts tagged "movie" + } +}); +``` + ## 🚀 Build & Deployment Add a `build` npm script to your `/package.json` file: @@ -148,6 +204,8 @@ Now upload the contents of `/_site_` to your favorite static site host. [autoprefixer]: https://github.com/postcss/autoprefixer [browserslist]: https://github.com/browserslist/browserslist +[intersection-observer]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API +[request-idle-cb]: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback [sass]: https://sass-lang.com/ [svelte]: https://svelte.dev [tailwind]: https://tailwindcss.com diff --git a/examples/blog/astro/components/AuthorCard.astro b/examples/blog/astro/components/AuthorCard.astro new file mode 100644 index 000000000..46ff504f7 --- /dev/null +++ b/examples/blog/astro/components/AuthorCard.astro @@ -0,0 +1,31 @@ +--- +export let author; +--- + + + +
+
+ {author.name} +
+ {author.name} +
diff --git a/examples/blog/astro/components/MainHead.astro b/examples/blog/astro/components/MainHead.astro new file mode 100644 index 000000000..bff812b0c --- /dev/null +++ b/examples/blog/astro/components/MainHead.astro @@ -0,0 +1,32 @@ +--- +// props +export let title: string; +export let description: string; +export let image: string | undefined; +export let type: string | undefined; + +// internal data +const OG_TYPES = { + 'movie': 'video.movie', + 'television': 'video.tv_show' +} +--- + + + +{title} + + + + + + +{image && ()} +{OG_TYPES[type] && ()} + + + + + + +{image && ()} diff --git a/examples/blog/astro/components/Nav.astro b/examples/blog/astro/components/Nav.astro new file mode 100644 index 000000000..87b64f572 --- /dev/null +++ b/examples/blog/astro/components/Nav.astro @@ -0,0 +1,44 @@ + + + diff --git a/examples/blog/astro/components/Pagination.astro b/examples/blog/astro/components/Pagination.astro new file mode 100644 index 000000000..3e3e63532 --- /dev/null +++ b/examples/blog/astro/components/Pagination.astro @@ -0,0 +1,12 @@ +--- +export let currentPage: number; +export let maxPages: number; +--- + + diff --git a/examples/blog/astro/components/PostPreview.astro b/examples/blog/astro/components/PostPreview.astro new file mode 100644 index 000000000..e4e39143a --- /dev/null +++ b/examples/blog/astro/components/PostPreview.astro @@ -0,0 +1,58 @@ +--- +export let post; +export let author; + +import AuthorCard from './AuthorCard.astro'; + +function formatDate(date) { + return new Date(date).toUTCString(); +} +--- + + + +
+
+ {post.title} +
+
+

{post.title}

+ + +

{post.description}

+ Read +
+
diff --git a/examples/blog/astro/data/authors.json b/examples/blog/astro/data/authors.json new file mode 100644 index 000000000..c0f247e02 --- /dev/null +++ b/examples/blog/astro/data/authors.json @@ -0,0 +1,27 @@ +{ + "animal": { + "name": "Animal", + "email": "animal@muppets.co", + "img": "/images/animal.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" + } +} diff --git a/examples/blog/astro/layouts/post.astro b/examples/blog/astro/layouts/post.astro new file mode 100644 index 000000000..09e0fdbcd --- /dev/null +++ b/examples/blog/astro/layouts/post.astro @@ -0,0 +1,31 @@ +--- +import AuthorCard from '../components/AuthorCard.astro'; +import MainHead from '../components/MainHead.astro'; +import Nav from '../components/Nav.astro'; + +export let content; + +import authorData from '../data/authors.json'; +--- + + + + {content.title} + + + + +