TL;DR

Code for this tutorial is on Github

Starter Project

Create Starter

❯ 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

❯ 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';