diff --git a/examples/blog/README.md b/examples/blog/README.md index fa874dba86..c5a53616bc 100644 --- a/examples/blog/README.md +++ b/examples/blog/README.md @@ -11,37 +11,22 @@ npm init astro -- --template blog Features: - ✅ SEO-friendly setup with canonical URLs and OpenGraph data -- ✅ Full Markdown support +- ✅ `@astrojs/image` image optimizations +- ✅ Sitemap support +- ✅ Markdown & MDX support +- ✅ Minimal styling (make it your own!) +- ✅ 100/100 Lighthouse performance ## 🚀 Project Structure Inside of your Astro project, you'll see the following folders and files: ``` -├── public -│   ├── assets -│   │   └── blog -│   │   └── introducing-astro.jpg -│   ├── favicon.ico -│   ├── social.jpg -│   └── social.png -├── src -│   ├── components -│   │   ├── Author.astro -│   │   ├── BaseHead.astro -│   │   ├── BlogPostPreview.astro -│   │   ├── FollowMe.astro -│   │   ├── Header.astro -│   │   └── LikeButton.tsx -│   ├── layouts -│   │   └── BlogPost.astro -│   ├── pages -│   │   ├── index.astro -│   │   └── posts -│   │   ├── interactive-content.md -│   │   └── static-content.md -│   └── styles -│   └── blog.css +├── public/ +├── src/ +│   ├── components/ +│   ├── layouts/ +│   └── pages/ ├── astro.config.mjs ├── README.md ├── package.json @@ -69,4 +54,8 @@ All commands are run from the root of the project, from a terminal: ## 👀 Want to learn more? -Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). +Check out [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). + +## Credit + +This theme is based off of the lovely [Bear Blog](https://github.com/HermanMartinus/bearblog/). \ No newline at end of file diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs index a6651a593c..10b7f177c7 100644 --- a/examples/blog/astro.config.mjs +++ b/examples/blog/astro.config.mjs @@ -1,8 +1,10 @@ import { defineConfig } from 'astro/config'; -import preact from '@astrojs/preact'; +import image from '@astrojs/image'; +import mdx from "@astrojs/mdx"; + +import sitemap from "@astrojs/sitemap"; // https://astro.build/config export default defineConfig({ - integrations: [preact()], - site: `http://astro.build`, -}); + integrations: [image(), mdx(), sitemap()] +}); \ No newline at end of file diff --git a/examples/blog/package.json b/examples/blog/package.json index b7759464b4..675ef5fa18 100644 --- a/examples/blog/package.json +++ b/examples/blog/package.json @@ -10,10 +10,9 @@ "astro": "astro" }, "devDependencies": { - "@astrojs/preact": "^1.0.2", + "@astrojs/image": "^0.3.3", + "@astrojs/mdx": "^0.8.3", + "@astrojs/sitemap": "^1.0.0", "astro": "^1.0.4" - }, - "dependencies": { - "preact": "^10.7.3" } } diff --git a/examples/blog/public/assets/blog/introducing-astro.jpg b/examples/blog/public/assets/blog/introducing-astro.jpg deleted file mode 100644 index c58aacf669..0000000000 Binary files a/examples/blog/public/assets/blog/introducing-astro.jpg and /dev/null differ diff --git a/examples/blog/public/astro.svg b/examples/blog/public/astro.svg new file mode 100644 index 0000000000..0f39062978 --- /dev/null +++ b/examples/blog/public/astro.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/examples/blog/public/favicon.ico b/examples/blog/public/favicon.ico deleted file mode 100644 index 578ad458b8..0000000000 Binary files a/examples/blog/public/favicon.ico and /dev/null differ diff --git a/examples/blog/public/placeholder-social.jpg b/examples/blog/public/placeholder-social.jpg new file mode 100644 index 0000000000..186a66eb41 Binary files /dev/null and b/examples/blog/public/placeholder-social.jpg differ diff --git a/examples/blog/public/social.png b/examples/blog/public/social.png deleted file mode 100644 index 3faeac77c3..0000000000 Binary files a/examples/blog/public/social.png and /dev/null differ diff --git a/examples/blog/src/assets/placeholder-about.jpg b/examples/blog/src/assets/placeholder-about.jpg new file mode 100644 index 0000000000..9653cc1c52 Binary files /dev/null and b/examples/blog/src/assets/placeholder-about.jpg differ diff --git a/examples/blog/src/assets/placeholder-hero.jpg b/examples/blog/src/assets/placeholder-hero.jpg new file mode 100644 index 0000000000..c8898768d8 Binary files /dev/null and b/examples/blog/src/assets/placeholder-hero.jpg differ diff --git a/examples/blog/src/components/Author.astro b/examples/blog/src/components/Author.astro deleted file mode 100644 index 3b29e0e767..0000000000 --- a/examples/blog/src/components/Author.astro +++ /dev/null @@ -1,18 +0,0 @@ ---- -export interface Props { - name: string; - href: string; -} - -const { name, href } = Astro.props; ---- - -
-

{name}

-
- - diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro index af6fd380ba..9c4c8fcdf1 100644 --- a/examples/blog/src/components/BaseHead.astro +++ b/examples/blog/src/components/BaseHead.astro @@ -1,19 +1,21 @@ --- -import '../styles/blog.css'; +// Import the global.css file here so that it is included on +// all pages through the use of the component. +import '../styles/global.css'; export interface Props { title: string; description: string; + image?: string; } -const canonicalURL = new URL(Astro.url.pathname, Astro.site); -const { title, description } = Astro.props; +const { title, description, image = '/placeholder-social.jpg' } = Astro.props; --- - - + + @@ -23,21 +25,14 @@ const { title, description } = Astro.props; - + - + - + - - - - - + diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro deleted file mode 100644 index 865eeeb7f7..0000000000 --- a/examples/blog/src/components/BlogPostPreview.astro +++ /dev/null @@ -1,43 +0,0 @@ ---- -export interface Props { - title: string; - description: string; - publishDate: string; - url: string; -} - -const { title, description, publishDate, url } = Astro.props as Props; ---- - -
-
- -

{title}

 -
-

{description}

- Read more -
- - diff --git a/examples/blog/src/components/FollowMe.astro b/examples/blog/src/components/FollowMe.astro deleted file mode 100644 index 093391147c..0000000000 --- a/examples/blog/src/components/FollowMe.astro +++ /dev/null @@ -1,10 +0,0 @@ ---- -export interface Props { - username: string; - href: string; -} - -const { username, href } = Astro.props as Props; ---- - -

Follow me @{username}

diff --git a/examples/blog/src/components/Footer.astro b/examples/blog/src/components/Footer.astro new file mode 100644 index 0000000000..08395a4d1f --- /dev/null +++ b/examples/blog/src/components/Footer.astro @@ -0,0 +1,13 @@ +--- +const today = new Date(); +--- + + + diff --git a/examples/blog/src/components/Header.astro b/examples/blog/src/components/Header.astro index 4d68f524b1..75577e6bc0 100644 --- a/examples/blog/src/components/Header.astro +++ b/examples/blog/src/components/Header.astro @@ -1,57 +1,25 @@ -
+--- +import HeaderLink from './HeaderLink.astro'; +import { SITE_TITLE } from '../config'; +--- + +
+

+ {SITE_TITLE} +

- diff --git a/examples/blog/src/components/HeaderLink.astro b/examples/blog/src/components/HeaderLink.astro new file mode 100644 index 0000000000..41e19de844 --- /dev/null +++ b/examples/blog/src/components/HeaderLink.astro @@ -0,0 +1,20 @@ +--- +export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {} + +const { href, class: className, ...props } = Astro.props as Props; +const isActive = href === Astro.url.pathname; +--- + + + + + diff --git a/examples/blog/src/components/LikeButton.tsx b/examples/blog/src/components/LikeButton.tsx deleted file mode 100644 index 23d8518de9..0000000000 --- a/examples/blog/src/components/LikeButton.tsx +++ /dev/null @@ -1,35 +0,0 @@ -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/config.ts b/examples/blog/src/config.ts new file mode 100644 index 0000000000..1d5dbf6322 --- /dev/null +++ b/examples/blog/src/config.ts @@ -0,0 +1,5 @@ +// Place any global data in this file. +// You can import this data from anywhere in your site by using the `import` keyword. + +export const SITE_TITLE = 'My personal website.'; +export const SITE_DESCRIPTION = 'Welcome to my website!'; diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index b8b47bfc09..7587913f77 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -1,102 +1,73 @@ --- import BaseHead from "../components/BaseHead.astro"; import Header from "../components/Header.astro"; +import Footer from "../components/Footer.astro"; +import {Image} from '@astrojs/image/components'; export interface Props { content: { title: string; description: string; - publishDate: string; - heroImage?: { - src: string; - alt: string; - }; + publishDate?: string; + updatedDate?: string; + heroImage?: string; }; } const { - content: { title, description, publishDate, heroImage }, + content: { title, description, publishDate, updatedDate, heroImage }, } = Astro.props as Props; + + +// Match the `heroImage` frontmatter string to its correct +// Astro.glob() import of the file in the src/ directory. +const assets = await Astro.glob('../assets/**/*'); +const heroImageAsset = assets.find(asset => { + if (!heroImage) { + return false; + } + if (!asset.default?.src) { + return false; + } + const index = asset.default.src.indexOf('/assets/'); + return asset.default.src.slice(index) === heroImage; +}); --- +
-
-
- {heroImage && ( - {heroImage.alt} +
+ {heroImageAsset && ( + )}

{title}

- -
-
- -
-
+ {publishDate && } + {updatedDate &&
Last updated on
} +
+ + + +