diff options
| author |  Ben Holmes <hey@bholmes.dev>
| 2022-07-12 12:17:36 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-07-12 12:17:36 -0400 |
| commit | ab232dd10f8d8ae5a3654293a1f1429343990039 (patch) | |
| tree | 1cb3f510b6e1fa12e5503fdcb8c4ef73fd7ffa95 /examples/blog/src/pages/posts | |
| parent | 4bf47367687b67170e6c3c722f514b5c2e67519d (diff) | |
| download | astro-ab232dd10f8d8ae5a3654293a1f1429343990039.tar.gz astro-ab232dd10f8d8ae5a3654293a1f1429343990039.tar.zst astro-ab232dd10f8d8ae5a3654293a1f1429343990039.zip | |
Example blog rework (#3896)
* refactor: restructure components, kill dead code
* nit: tweak base styles
* nit: remove unneeded code comments
* refactor: replace unused permalink with canonicalURL
* refactor: add missing prop types
* feat: make markdown examples more interesting
* chore: consistent semis and quotes
* chore: astro check failures
* fix: bad url prop
* fix: bad frontmatter quote
* chore: more dead styles
* chore: add header gap
* refactor: use tsx for likebutton
* fix: restore post sorting
* chore: remove unused flex-row util
* fix: small md formatting on README
* chore: run through astro-plugin-prettier
* fix: revert to double quotes
* fix: manually move style outside <body>
* fix: update file tree in README
* refactor: publish-date -> time
* refactor: remove unused div and margin
* refactor: publishDate -> time on layout
* refactor: .heroImage -> img
* refactor: .logo -> svg
* feat: update social image, remove jpg
* fix: remove prism stylesheet!
Diffstat (limited to 'examples/blog/src/pages/posts')
| -rw-r--r-- | examples/blog/src/pages/posts/index.md | 26 | ||||
| -rw-r--r-- | examples/blog/src/pages/posts/interactive-content.md | 22 | ||||
| -rw-r--r-- | examples/blog/src/pages/posts/static-content.md | 28 |
3 files changed, 50 insertions, 26 deletions
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! ---- - -<Cool name={frontmatter.name} href="https://twitter.com/n_moore" client:load /> - -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" +--- + +<FollowMe username={frontmatter.followMe.username} href={frontmatter.followMe.href} /> + +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: <LikeButton pageUrl={frontmatter.url} client:load /> 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!"; + } +} +``` |