├── src ├── components │ ├── BlogPost.astro │ ├── Menu.astro │ ├── Navigation.astro │ ├── Social.astro │ ├── Footer.astro │ ├── Header.astro │ ├── Greeting.jsx │ └── ThemeIcon.astro ├── scripts │ └── menu.js ├── pages │ ├── index.astro │ ├── rss.xml.js │ ├── blog.astro │ ├── posts │ │ ├── post-4.md │ │ ├── post-2.md │ │ ├── post-3.md │ │ └── post-1.md │ ├── tags │ │ ├── index.astro │ │ └── [tag].astro │ └── about.astro ├── layouts │ ├── BaseLayout.astro │ └── MarkdownPostLayout.astro └── styles │ └── global.css ├── .vscode ├── extensions.json └── launch.json ├── sandbox.config.json ├── astro.config.mjs ├── tsconfig.json ├── .gitignore ├── package.json ├── README.md ├── public └── favicon.svg └── LICENSE /src/components/BlogPost.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { title, url } = Astro.props 3 | --- 4 |
  • {title}
    • -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /src/components/Menu.astro: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 7 | -------------------------------------------------------------------------------- /src/components/Navigation.astro: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 9 | -------------------------------------------------------------------------------- /src/scripts/menu.js: -------------------------------------------------------------------------------- 1 | const menu = document.querySelector('.menu') 2 | 3 | menu?.addEventListener("click", () => { 4 | const isExpanded = menu.getAttribute("aria-expanded") === "true"; 5 | menu.setAttribute("aria-expanded", `${!isExpanded}`); 6 | }); 7 | -------------------------------------------------------------------------------- /sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "infiniteLoopProtection": true, 3 | "hardReloadOnChange": false, 4 | "view": "browser", 5 | "template": "node", 6 | "container": { 7 | "port": 3000, 8 | "startScript": "start", 9 | "node": "14" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { defineConfig } from "astro/config"; 3 | 4 | import preact from "@astrojs/preact"; 5 | 6 | // https://astro.build/config 7 | export default defineConfig({ 8 | site: "https://example.com", 9 | integrations: [preact()], 10 | }); 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict", 3 | "include": [ 4 | ".astro/types.d.ts", 5 | "**/*" 6 | ], 7 | "exclude": [ 8 | "dist" 9 | ], 10 | "compilerOptions": { 11 | "jsx": "react-jsx", 12 | "jsxImportSource": "preact" 13 | } 14 | } -------------------------------------------------------------------------------- /src/components/Social.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { platform, username } = Astro.props; 3 | --- 4 | {platform} 5 | 6 | 14 | -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import BaseLayout from '../layouts/BaseLayout.astro'; 3 | import Greeting from '../components/Greeting'; 4 | const pageTitle = "Home Page"; 5 | --- 6 | 7 |

    My awesome blog subtitle

    8 | 9 |     10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | 23 | # jetbrains setting folder 24 | .idea/ 25 | -------------------------------------------------------------------------------- /src/pages/rss.xml.js: -------------------------------------------------------------------------------- 1 | import rss, { pagesGlobToRssItems } from '@astrojs/rss'; 2 | 3 | export async function GET(context) { 4 | return rss({ 5 | title: 'Astro Learner | Blog', 6 | description: 'My journey learning Astro', 7 | site: context.site, 8 | items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')), 9 | customData: `en-us`, 10 | }); 11 | } -------------------------------------------------------------------------------- /src/components/Footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Social from "./Social.astro"; 3 | --- 4 | 5 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@example/minimal", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "dev": "astro dev", 8 | "build": "astro build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@astrojs/preact": "^4.1.1", 14 | "@astrojs/rss": "^4.0.12", 15 | "astro": "^5.14.4", 16 | "preact": "^10.27.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/Header.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Menu from "./Menu.astro"; 3 | import Navigation from "./Navigation.astro"; 4 | import ThemeIcon from "./ThemeIcon.astro"; 5 | --- 6 | 7 |
    8 | 15 |
    16 | 17 | -------------------------------------------------------------------------------- /src/components/Greeting.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'preact/hooks'; 2 | 3 | export default function Greeting({ messages }) { 4 | 5 | const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))]; 6 | 7 | const [greeting, setGreeting] = useState(messages[0]); 8 | 9 | return ( 10 |
    11 |

    {greeting}! Thank you for visiting!

    12 | 15 |
    16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/pages/blog.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import BaseLayout from "../layouts/BaseLayout.astro"; 3 | import BlogPost from "../components/BlogPost.astro"; 4 | const allPosts = Object.values( 5 | import.meta.glob("./posts/*.md", { eager: true }) 6 | ); 7 | const pageTitle = "My Astro Learning Blog"; 8 | --- 9 | 10 | 11 |

    This is where I will post about my journey learning Astro.

    12 | 15 |     16 | -------------------------------------------------------------------------------- /src/pages/posts/post-4.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: ../../layouts/MarkdownPostLayout.astro 3 | title: My Fourth Blog Post 4 | author: Astro Learner 5 | description: "This post will show up on its own!" 6 | image: 7 | url: "https://docs.astro.build/default-og-image.png" 8 | alt: "The word astro against an illustration of planets and stars." 9 | pubDate: 2022-08-08 10 | tags: ["astro", "successes"] 11 | --- 12 | This post should show up with my other blog posts, because `import.meta.glob()` is returning a list of all my posts in order to create my list. 13 | -------------------------------------------------------------------------------- /src/pages/posts/post-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: ../../layouts/MarkdownPostLayout.astro 3 | title: My Second Blog Post 4 | author: Astro Learner 5 | description: "After learning some Astro, I couldn't stop!" 6 | image: 7 | url: "https://docs.astro.build/assets/arc.webp" 8 | alt: "The Astro logo on a dark background with a purple gradient arc." 9 | pubDate: 2022-07-08 10 | tags: ["astro", "blogging", "learning in public", "successes"] 11 | --- 12 | 13 | After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory! 14 | -------------------------------------------------------------------------------- /src/pages/posts/post-3.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: ../../layouts/MarkdownPostLayout.astro 3 | title: My Third Blog Post 4 | author: Astro Learner 5 | description: "I had some challenges, but asking in the community really helped!" 6 | image: 7 | url: "https://docs.astro.build/assets/rays.webp" 8 | alt: "The Astro logo on a dark background with rainbow rays." 9 | pubDate: 2022-07-15 10 | tags: ["astro", "learning in public", "setbacks", "community"] 11 | --- 12 | 13 | It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful! 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Astro "Build a Blog" Project - Completed 2 | 3 | This is the project you'll build with the [Astro Tutorial](https://docs.astro.build/en/tutorial/0-introduction/). Use this code to compare to your own, or explore to see how the basics of a blog are built in Astro! 4 | 5 | This branch contains the state of the project after completing the basic tutorial, [Unit 6.3](https://docs.astro.build/en/tutorial/6-islands/3/). 6 | 7 | The [`content collections`](https://github.com/withastro/blog-tutorial-demo/tree/content-collections) branch is the completed project branch after the optional Content Collections extension in unit [6.4](https://docs.astro.build/en/tutorial/6-islands/4/). 8 | -------------------------------------------------------------------------------- /src/layouts/BaseLayout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Header from "../components/Header.astro"; 3 | import Footer from "../components/Footer.astro"; 4 | import "../styles/global.css"; 5 | const { pageTitle } = Astro.props; 6 | --- 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {pageTitle} 15 | 16 | 17 |
    18 |

    {pageTitle}

    19 | 20 |