diff --git a/examples/blog/README.md b/examples/blog/README.md index 7d7183a9f..ca87802a6 100644 --- a/examples/blog/README.md +++ b/examples/blog/README.md @@ -18,9 +18,6 @@ Features: Inside of your Astro project, you'll see the following folders and files: ``` -├── README.md -├── astro.config.mjs -├── package.json ├── public │   ├── assets │   │   └── blog @@ -28,24 +25,26 @@ Inside of your Astro project, you'll see the following folders and files: │   ├── favicon.ico │   ├── social.jpg │   └── social.png -├── sandbox.config.json ├── src │   ├── components │   │   ├── Author.astro │   │   ├── BaseHead.astro -│   │   ├── BlogHeader.astro -│   │   ├── BlogPost.astro │   │   ├── BlogPostPreview.astro -│   │   ├── Heading.astro -│   │   └── Logo.astro +│   │   ├── FollowMe.astro +│   │   ├── Header.astro +│   │   └── LikeButton.tsx │   ├── layouts │   │   └── BlogPost.astro │   ├── pages │   │   ├── index.astro │   │   └── posts -│   │   └── index.md +│   │   ├── interactive-content.md +│   │   └── static-content.md │   └── styles │   └── blog.css +├── astro.config.mjs +├── README.md +├── package.json └── tsconfig.json ``` @@ -60,7 +59,7 @@ Any static assets, like images, can be placed in the `public/` directory. 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/` | diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs index 08916b1fe..e514e8de2 100644 --- a/examples/blog/astro.config.mjs +++ b/examples/blog/astro.config.mjs @@ -1,5 +1,5 @@ -import { defineConfig } from 'astro/config'; -import preact from '@astrojs/preact'; +import { defineConfig } from "astro/config"; +import preact from "@astrojs/preact"; // https://astro.build/config export default defineConfig({ diff --git a/examples/blog/public/social.jpg b/examples/blog/public/social.jpg deleted file mode 100644 index 906c76144..000000000 Binary files a/examples/blog/public/social.jpg and /dev/null differ diff --git a/examples/blog/public/social.png b/examples/blog/public/social.png index 1399856f1..3faeac77c 100644 Binary files a/examples/blog/public/social.png and b/examples/blog/public/social.png differ diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro index 8bc4036a9..f7395b4e3 100644 --- a/examples/blog/src/components/BaseHead.astro +++ b/examples/blog/src/components/BaseHead.astro @@ -4,9 +4,9 @@ import "../styles/blog.css"; export interface Props { title: string; description: string; - permalink: string; } -const { title, description, permalink } = Astro.props; + +const { title, description } = Astro.props; --- @@ -21,17 +21,17 @@ const { title, description, permalink } = Astro.props; - + - + - + - + diff --git a/examples/blog/src/components/BlogHeader.astro b/examples/blog/src/components/BlogHeader.astro deleted file mode 100644 index ebecef7d8..000000000 --- a/examples/blog/src/components/BlogHeader.astro +++ /dev/null @@ -1,97 +0,0 @@ -
-
-

- - - My Blog - -

-
-
- - diff --git a/examples/blog/src/components/BlogPost.astro b/examples/blog/src/components/BlogPost.astro deleted file mode 100644 index 55eaa66ed..000000000 --- a/examples/blog/src/components/BlogPost.astro +++ /dev/null @@ -1,97 +0,0 @@ ---- -import Author from "./Author.astro"; - -export interface Props { - title: string; - author: string; - publishDate: string; - heroImage: string; - alt: string; -} - -const { title, author, publishDate, heroImage, alt } = Astro.props; ---- - -
-
-
-
- {heroImage && ( - {alt} - )} -

{publishDate}

-

{title}

- -
-
- -
-
-
-
- - diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro index f935ff8b2..865eeeb7f 100644 --- a/examples/blog/src/components/BlogPostPreview.astro +++ b/examples/blog/src/components/BlogPostPreview.astro @@ -1,48 +1,36 @@ --- export interface Props { - post: any; + title: string; + description: string; + publishDate: string; + url: string; } -const { post } = Astro.props; +const { title, description, publishDate, url } = Astro.props as Props; ---
-

{post.frontmatter.publishDate}

-

{post.frontmatter.title}

 + +

{title}
-

{post.frontmatter.description}

- Read more +

{description}

+ Read more
+ + + + My Blog + + + + + diff --git a/examples/blog/src/components/Heading.astro b/examples/blog/src/components/Heading.astro deleted file mode 100644 index fec49b538..000000000 --- a/examples/blog/src/components/Heading.astro +++ /dev/null @@ -1,9 +0,0 @@ -

- -

- - diff --git a/examples/blog/src/components/LikeButton.tsx b/examples/blog/src/components/LikeButton.tsx new file mode 100644 index 000000000..d477cee1e --- /dev/null +++ b/examples/blog/src/components/LikeButton.tsx @@ -0,0 +1,35 @@ +import { useState } from "preact/hooks"; + +interface Props { + pageUrl: string; +} + +export default function LikeButton({ pageUrl }: Props) { + const persistedLike = localStorage.getItem(`liked-${pageUrl}`); + const [liked, setLiked] = useState(persistedLike ? JSON.parse(persistedLike) : false); + + function toggleLike() { + const toggled = !liked; + setLiked(toggled); + // preserve your likes as you navigate the site + localStorage.setItem(`liked-${pageUrl}`, JSON.stringify(toggled)); + } + + return ( + + ); +} diff --git a/examples/blog/src/components/Logo.astro b/examples/blog/src/components/Logo.astro deleted file mode 100644 index 2c2c759f0..000000000 --- a/examples/blog/src/components/Logo.astro +++ /dev/null @@ -1,92 +0,0 @@ - - - diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index 82e1f31ab..b8b47bfc0 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -1,27 +1,102 @@ --- import BaseHead from "../components/BaseHead.astro"; -import BlogHeader from "../components/BlogHeader.astro"; -import BlogPost from "../components/BlogPost.astro"; +import Header from "../components/Header.astro"; -const { content } = Astro.props; -const { title, description, publishDate, author, heroImage, permalink, alt } = content; +export interface Props { + content: { + title: string; + description: string; + publishDate: string; + heroImage?: { + src: string; + alt: string; + }; + }; +} + +const { + content: { title, description, publishDate, heroImage }, +} = Astro.props as Props; --- - + - - + - -
- - - -
+
+
+
+ {heroImage && ( + {heroImage.alt} + )} +

{title}

+ +
+
+ +
+
+ + diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index b278c5510..22c095c74 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -1,81 +1,62 @@ --- -// Component Imports import BaseHead from "../components/BaseHead.astro"; -import BlogHeader from "../components/BlogHeader.astro"; +import Header from "../components/Header.astro"; import BlogPostPreview from "../components/BlogPostPreview.astro"; -// Component Script: -// You can write any JavaScript/TypeScript that you'd like here. -// It will run during the build, but never in the browser. -// All variables are available to use in the HTML template below. let title = "Example Blog"; let description = "The perfect starter for your perfect blog."; -let permalink = "https://example.com/"; -// Data Fetching: List all Markdown posts in the repo. - -let allPosts = await Astro.glob("./posts/*.md"); -allPosts = allPosts.sort( - (a, b) => +// Use Astro.glob to fetch all post with associated frontmatter +const unsortedPosts = await Astro.glob("./posts/*.md"); +const posts = unsortedPosts.sort(function (a, b) { + return ( new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf() -); - -// Full Astro Component Syntax: -// https://docs.astro.build/core-concepts/astro-components/ + ); +}); --- - - - + - +
-

{title}

+

{title}

{description}

- {allPosts.map((p) => )} + {posts.map(({ url, frontmatter }) => ( + + ))}
+ + diff --git a/examples/blog/src/pages/posts/index.md b/examples/blog/src/pages/posts/index.md deleted file mode 100644 index e118d869d..000000000 --- a/examples/blog/src/pages/posts/index.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -setup: | - import Layout from '../../layouts/BlogPost.astro' - import Cool from '../../components/Author.astro' -title: Hello world! -publishDate: 12 Sep 2021 -name: Nate Moore -value: 128 -description: Just a Hello World Post! ---- - - - -This is so cool! - -Do variables work {frontmatter.value * 2}? - -```javascript -// Example JavaScript - -const x = 7; -function returnSeven() { - return x; -} - -``` diff --git a/examples/blog/src/pages/posts/interactive-content.md b/examples/blog/src/pages/posts/interactive-content.md new file mode 100644 index 000000000..68c571eb4 --- /dev/null +++ b/examples/blog/src/pages/posts/interactive-content.md @@ -0,0 +1,22 @@ +--- +layout: "../../layouts/BlogPost.astro" +title: "Hello galaxy of possibilities!" +description: "Take your blog to astronomical heights" +publishDate: "12 Sep 2021" +followMe: + username: "bholmesdev" + href: "https://twitter.com/bholmesdev" +halfTheMeaning: 21 +heroImage: + src: "/assets/blog/introducing-astro.jpg" + alt: "Space shuttle leaving curved trail in the sky" +setup: | + import LikeButton from "../../components/LikeButton" + import FollowMe from "../../components/FollowMe.astro" +--- + + + +Access all exported properties with JSX expressions. For example, let's find the meaning of life: **{frontmatter.halfTheMeaning * 2}** + +If this seems cool, consider giving my post a like with this Preact component: diff --git a/examples/blog/src/pages/posts/static-content.md b/examples/blog/src/pages/posts/static-content.md new file mode 100644 index 000000000..8925e6ba3 --- /dev/null +++ b/examples/blog/src/pages/posts/static-content.md @@ -0,0 +1,28 @@ +--- +layout: "../../layouts/BlogPost.astro" +title: "Hello static content!" +description: "Bring your markdown, we'll handle the rest" +publishDate: "11 Jul 2022" +heroImage: + src: "/assets/blog/introducing-astro.jpg" + alt: "Space shuttle leaving curved trail in the sky" +--- + +**Astro has built-in support for markdown pages!** All frontmatter data will be available [via `Astro.glob` imports](https://docs.astro.build/en/reference/api-reference/#astroglob) as well, making blog landing pages easy to build. + +**Code challenge:** Try editing the `title` frontmatter property for this post and [visiting the homepage](/) again. + +## Code block demo + +```typescript +// Oh, and get Shiki syntax highlighting out-of-the-box! +// See our docs for customization options: +// https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting +function getDistance(amount: number) { + if (amount === Infinity) { + return "and beyond!"; + } else { + return "and the normal distance!"; + } +} +``` diff --git a/examples/blog/src/styles/blog.css b/examples/blog/src/styles/blog.css index 2a722d237..b32295a40 100644 --- a/examples/blog/src/styles/blog.css +++ b/examples/blog/src/styles/blog.css @@ -1,10 +1,10 @@ :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; + --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; @@ -32,6 +32,8 @@ --color-red-rgb: 255, 22, 57; --color-yellow: #ffbe2d; --color-yellow-rgb: 255, 190, 45; + + --content-max-width: 70ch; } :root { @@ -77,7 +79,6 @@ body { * { box-sizing: border-box; - margin: 0; } :root { @@ -101,7 +102,7 @@ body { .wrapper { margin-left: auto; margin-right: auto; - max-width: 65em; + max-width: var(--content-max-width); padding-left: 2rem; padding-right: 2rem; width: 100%; @@ -173,7 +174,7 @@ a > code { } a > code::before { - content: ''; + content: ""; position: absolute; top: 0; right: 0;