TL;DR

Code for this tutorial is on Github

Starter Project

Create Starter

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

❯ npm create astro@latest

.../21.6.2/pnpm/store/v3/tmp/dlx-5990 | +39 ++++

.../21.6.2/pnpm/store/v3/tmp/dlx-5990 | Progress: resolved 39, reused 39, downloaded 0, added 39, done

astro Launch sequence initiated.

dir Where should we create your new project?

./Tutorial - Add TOC to PostLayout

tmpl How would you like to start your new project?

Use blog template

ts Do you plan to write TypeScript?

Yes

use How strict should TypeScript be?

Strict

deps Install dependencies?

Yes

git Initialize a new git repository?

Yes

Project initialized!

■ Template copied

■ TypeScript customized

■ Dependencies installed

■ Git initialized

next Liftoff confirmed. Explore your project!

Enter your project directory using cd "./Tutorial - Add TOC to PostLayout"

Run pnpm dev to start the dev server. CTRL+C to stop.

Add frameworks like react or tailwind using astro add.

Stuck? Join us at https://astro.build/chat

╭─────╮ Houston:

│ ◠ ◡ ◠ Good luck out there, astronaut!

╰─────╯

❯ npm create astro@latest .../21.6.2/pnpm/store/v3/tmp/dlx-5990 | +39 ++++ .../21.6.2/pnpm/store/v3/tmp/dlx-5990 | Progress: resolved 39, reused 39, downloaded 0, added 39, done astro Launch sequence initiated. dir Where should we create your new project? ./Tutorial - Add TOC to PostLayout tmpl How would you like to start your new project? Use blog template ts Do you plan to write TypeScript? Yes use How strict should TypeScript be? Strict deps Install dependencies? Yes git Initialize a new git repository? Yes Project initialized! ■ Template copied ■ TypeScript customized ■ Dependencies installed ■ Git initialized next Liftoff confirmed. Explore your project! Enter your project directory using cd "./Tutorial - Add TOC to PostLayout" Run pnpm dev to start the dev server. CTRL+C to stop. Add frameworks like react or tailwind using astro add. Stuck? Join us at https://astro.build/chat ╭─────╮ Houston: │ ◠ ◡ ◠ Good luck out there, astronaut! ╰─────╯

❯ npm create astro@latest
.../21.6.2/pnpm/store/v3/tmp/dlx-5990    |  +39 ++++
.../21.6.2/pnpm/store/v3/tmp/dlx-5990    | Progress: resolved 39, reused 39, downloaded 0, added 39, done

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./Tutorial - Add TOC to PostLayout

  tmpl   How would you like to start your new project?
         Use blog template

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

        Project initialized!
         ■ Template copied
         ■ TypeScript customized
         ■ Dependencies installed
         ■ Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd "./Tutorial - Add TOC to PostLayout"
         Run pnpm dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 
╰─────╯

Run Starter

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

❯ cd Tutorial\ -\ Add\ TOC\ to\ PostLayout/

Tutorial - Add TOC to PostLayout on  master [+] is v0.0.1 via  v21.6.2 via v3.12.2 (3.12)

❯ npm run dev

> tutorial---add-toc-to-postlayout@0.0.1 dev /Users/Shared/CLOUD/Programmier-Workshops/Kurse/Astro/Einsteiger/Tutorial - Add TOC to PostLayout

> astro dev

astro v4.5.12 ready in 300 ms

┃ Local http://localhost:4321/

┃ Network use --host to expose

12:18:45 watching for file changes...

❯ cd Tutorial\ -\ Add\ TOC\ to\ PostLayout/ Tutorial - Add TOC to PostLayout on  master [+] is v0.0.1 via  v21.6.2 via v3.12.2 (3.12) ❯ npm run dev > tutorial---add-toc-to-postlayout@0.0.1 dev /Users/Shared/CLOUD/Programmier-Workshops/Kurse/Astro/Einsteiger/Tutorial - Add TOC to PostLayout > astro dev astro v4.5.12 ready in 300 ms ┃ Local http://localhost:4321/ ┃ Network use --host to expose 12:18:45 watching for file changes...

❯ cd Tutorial\ -\ Add\ TOC\ to\ PostLayout/

Tutorial - Add TOC to PostLayout on  master [+] is  v0.0.1 via  v21.6.2 via  v3.12.2 (3.12)
❯ npm run dev

> tutorial---add-toc-to-postlayout@0.0.1 dev /Users/Shared/CLOUD/Programmier-Workshops/Kurse/Astro/Einsteiger/Tutorial - Add TOC to PostLayout
> astro dev


 astro  v4.5.12 ready in 300 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

12:18:45 watching for file changes...

Modify Project Structur and add helper code

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "allowJs": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "lib": ["es2022", "dom", "dom.iterable"],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*", ".vscode", "dist"]
}

Replace relative path with reference to path alias in every page

import Layout from '../../layouts/BlogPost.astro';

becomes to

import Layout from '@/layouts/BlogPost.astro';

import Layout from '../styles/global.css';

becomes to

import Layout from '@/styles/global.css';

Create separate Layouts for Project and Posts

Rename src/layouts/BlogPost.astro to src/layouts/BaseLayout.astro

Change every import of BlogPost to

import Layout from '@/layouts/BaseLayout.astro';