Simplify TOC handling with [[toc]] directive (#39)

* simplify TOC links from /blog/slug#anchor to #anchor

Only simplified same-article anchor links (TOC entries).
Cross-article references are preserved with full paths.

* chore: update build submodule to feature/relative-link-transformation

- TOC links now absolute (/blog/slug#anchor)
- Anchor link validation at build time
- Fuzzy "did you mean?" suggestions for broken links

* chore: update build submodule (skip external URLs in validation)

* fix: repair broken anchor links and update build submodule

- Fix Unicode heading IDs in TOC links (ä/ö/ü instead of ae/oe/ue)
- Update build submodule to 968aa53 with link validation improvements

* docs: add Claude Code instructions for submodule workflow

* refactor: replace manual TOCs with [[toc]] directive

Replaced 6 manual table of contents with [[toc]] for auto-generation.

* fix: restore TOC headers that were incorrectly removed

The [[toc]] directive only generates the listing, not headers.
Restored original headers (Table of contents:, ## Content, etc.)
and <hr> elements where they existed before the TOC listings.

* fix: add missing [[toc]] to 3 overlooked articles

These files were missed in the initial TOC migration:
- 2022-11-use-define-for-class-fields
- 2024-11-effect-afterrendereffect
- 2024-11-linked-signal

* fix: preserve CRLF line endings in TOC migration

Restored files from main and applied only the [[toc]] change,
preserving the original CRLF line endings.

* chore: update build submodule (h4 in TOC)

Author: JohannesHoppe

.claude/CLAUDE.md

@@ -0,0 +1,42 @@
+# CRITICAL: Git Submodule Warning
+
+## DO NOT modify the `build/` folder directly!
+
+The `build/` folder is a **git submodule** pointing to:
+`git@github.com:angular-schule/website-articles-build.git`
+
+### If you need to modify the build system:
+
+1. Clone or navigate to the standalone repository:
+   `git@github.com:angular-schule/website-articles-build.git`
+
+2. Make your changes there
+
+3. Commit and push from there
+
+4. Then update the submodule reference in this repo if needed
+
+### Why?
+
+- Submodules are separate git repositories
+- Changes made directly in `build/` will cause conflicts
+- The submodule state is tracked by the parent repo
+- Direct modifications mess up both repos
+
+### Never do this:
+
+```bash
+cd build/
+git checkout -b feature/xyz  # WRONG!
+# editing files in build/    # WRONG!
+git commit                   # WRONG!
+```
+
+### Always do this:
+
+```bash
+cd <your-path-to>/website-articles-build
+git checkout -b feature/xyz  # CORRECT!
+# edit files here            # CORRECT!
+git commit                   # CORRECT!
+```

blog/2019-02-third-party-libraries-and-widgets/README.md

@@ -22,14 +22,7 @@ We will discuss a few possible strategies that depend on which technology to int
 
 Table of contents:
 
-* [General Considerations](/blog/2019-02-third-party-libraries-and-widgets#general-considerations)
-* [Integrating a pure ES6 JavaScript Library](/blog/2019-02-third-party-libraries-and-widgets#integrating-a-pure-es6-javascript-library) (lodash)
-* [Integrating JavaScript Widgets](/blog/2019-02-third-party-libraries-and-widgets#integrating-javascript-widgets) (plotly.js)
-* [Integrating old jQuery Widgets](/blog/2019-02-third-party-libraries-and-widgets#integrating-old-jquery-widgets) (jquery-datetimepicker)
-* [Integrating modern jQuery Widgets](/blog/2019-02-third-party-libraries-and-widgets#integrating-modern-jquery-widgets) (Kendo UI for jQuery)
-* [Improving performance](/blog/2019-02-third-party-libraries-and-widgets#improving-performance) (NgZone)
-* [Don't reinvent the wheel](/blog/2019-02-third-party-libraries-and-widgets#don-t-reinvent-the-wheel)
-* [Conclusion](/blog/2019-02-third-party-libraries-and-widgets#conclusion)
+[[toc]]
 
 
 ## General Considerations

blog/2019-08-ng-deploy/README.md

@@ -20,13 +20,7 @@ hidden: false
 
 Table of contents:
 
-- [Introduction](/blog/2019-08-ng-deploy#introduction)
-- [Background](/blog/2019-08-ng-deploy#background)
-- [Command Line Call](/blog/2019-08-ng-deploy#command-line-call)
-- [Existing providers](/blog/2019-08-ng-deploy#existing-providers)
-- [Deploy to multiple targets](/blog/2019-08-ng-deploy#deploy-to-multiple-targets)
-- [How to make your own deployment builder](/blog/2019-08-ng-deploy#how-to-make-your-own-deployment-builder)
-- [Summary](/blog/2019-08-ng-deploy#summary)
+[[toc]]
 
 
 

blog/2019-11-ngx-semantic-version/README.md

@@ -29,15 +29,7 @@ It will help you to keep your `CHANGELOG.md` file up to date and to release new
 
 Table of contents:
 
-- [TL;DR](/blog/2019-11-ngx-semantic-version#tl-dr)
-- [Introduction](/blog/2019-11-ngx-semantic-version#introduction)
-- [What does it do?](/blog/2019-11-ngx-semantic-version#what)
-  - [commitlint: Enforcing conventional commit messages](/blog/2019-11-ngx-semantic-version#commitlint)
-  - [husky: Hook into the git lifecycle](/blog/2019-11-ngx-semantic-version#husky)
-  - [commitizen: Easily write conventional commit messages](/blog/2019-11-ngx-semantic-version#commitizen)
-  - [standard-version: Generate changelogs from the git history](/blog/2019-11-ngx-semantic-version#standard-version)
-- [How to use ngx-semantic-version](/blog/2019-11-ngx-semantic-version#how-to)
-- [Conclusion](/blog/2019-11-ngx-semantic-version#conclusion)
+[[toc]]
 
 ## TL;DR
 

blog/2020-01-everything-github/README.md

@@ -33,26 +33,7 @@ Best of all, for public repositories, this will not cost you a single cent!**
 
 Table of contents:
 
-- [Introduction](/blog/2020-01-everything-github#introduction)
-- [1. All parts explained](/blog/2020-01-everything-github#1-all-parts-explained)
-  - [1.1. Git and GitHub Version Control](/blog/2020-01-everything-github#11-git-and-github-version-control)
-  - [1.2. GitHub Actions](/blog/2020-01-everything-github#12-github-actions)
-  - [1.3. GitHub Pages](/blog/2020-01-everything-github#13-github-pages)
-  - [1.4. angular-cli-ghpages](/blog/2020-01-everything-github#14-angular-cli-ghpages)
-  - [1.5. GitHub plans](/blog/2020-01-everything-github#15-github-plans)
-- [2. A simple Angular app](/blog/2020-01-everything-github#2-a-simple-angular-app)
-- [3. Hosting the source code on GitHub](/blog/2020-01-everything-github#3-hosting-the-source-code-on-github)
-- [4. A first deployment to GitHub Pages](/blog/2020-01-everything-github#4-a-first-deployment-to-github-pages)
-- [5. Automating the Deployment with GitHub Actions](/blog/2020-01-everything-github#5-automating-the-deployment-with-github-actions)
-  - [5.1 About all tokens](/blog/2020-01-everything-github#51-about-all-tokens)
-  - [5.2 Automate a public repo (via GH_TOKEN)](/blog/2020-01-everything-github#52-automate-a-public-repo-via-gh_token-)
-    - [5.2.1 Setup a Personal Access Token](/blog/2020-01-everything-github#521-setup-a-personal-access-token)
-    - [5.2.2 Setup the GitHub Action Workflow](/blog/2020-01-everything-github#522-setup-the-github-action-workflow)
-  - [5.3 Automate a private repo (via GITHUB_TOKEN)](/blog/2020-01-everything-github#53-automate-a-private-repo-via-github_token-)
-- [6. Extra: Custom Domains](/blog/2020-01-everything-github#6-extra-custom-domains)
-  - [6.1 Configuring a subdomain](/blog/2020-01-everything-github#61-configuring-a-subdomain)
-  - [6.2 Configuring an apex domain](/blog/2020-01-everything-github#62-configuring-an-apex-domain)
-- [Summary](/blog/2020-01-everything-github#summary)
+[[toc]]
 
 ## Introduction
 

blog/2020-01-ngrx-data-views/README.md

@@ -23,16 +23,7 @@ header: data-views-header.jpg
 
 Table of contents:
 
-- [Data Clustering in Enterprise Applications](/blog/2020-01-ngrx-data-views#data-clustering-in-enterprise-applications)
-- [Clustered data for Books](/blog/2020-01-ngrx-data-views#clustered-data-for-books)
-- [Using parameterized selectors](/blog/2020-01-ngrx-data-views#using-parameterized-selectors)
-- [The Problem](/blog/2020-01-ngrx-data-views#the-problem)
-- [Using Data-Views for De-Normalization](/blog/2020-01-ngrx-data-views#using-data-views-for-de-normalization)
-- [The new problem with Memoization](/blog/2020-01-ngrx-data-views#the-new-problem-with-memoization)
-- [Tackling Memoization](/blog/2020-01-ngrx-data-views#tackling-memoization)
-- [Enriched Data Views](/blog/2020-01-ngrx-data-views#enriched-data-views)
-- [Memoized Data View Methods](/blog/2020-01-ngrx-data-views#memoized-data-view-methods)
-- [Conclusion](/blog/2020-01-ngrx-data-views#conclusion)
+[[toc]]
 
 <hr>
 

blog/2022-11-use-define-for-class-fields/README.md

@@ -29,10 +29,7 @@ We will show you in detail what the problem is and how you should write your cod
 
 ## Contents
 
-* [Property initialisation in TypeScript](/blog/2022-11-use-define-for-class-fields#property-initialisation-in-typescript)
-* [The proprietary behaviour of TypeScript](/blog/2022-11-use-define-for-class-fields#the-proprietary-behaviour-of-typescript)
-* [Future-proof property initialisation](/blog/2022-11-use-define-for-class-fields#future-proof-property-initialisation)
-* [Implications for existing Angular code](/blog/2022-11-use-define-for-class-fields#implications-for-existing-angular-code)
+[[toc]]
 
 > **🇩🇪 This article is available in German language here: [TypeScript: useDefineForClassFields – zukünftige Breaking Changes vermeiden](https://angular-buch.com/blog/2022-11-use-define-for-class-fields)**
 

blog/2024-11-effect-afterrendereffect/README.md

@@ -25,20 +25,7 @@ In this article, we'll explore how these two APIs compare, when to use each, and
 
 ## Contents
 
-* [Angular 19 vs. Previous Versions: What's Different?](/blog/2024-11-effect-afterrendereffect#angular-19-vs-previous-versions-whats-different)
-* [Core Differences Between `effect()` and `afterRenderEffect()`](/blog/2024-11-effect-afterrendereffect#core-differences-between-effect-and-afterrendereffect)
-* [Introducing `effect()`](/blog/2024-11-effect-afterrendereffect#introducing-effect)
-  * [Example for `effect()`: setting multiple things at once](/blog/2024-11-effect-afterrendereffect#example-for-effect-setting-multiple-things-at-once)
-  * [When to choose `effect()` over `computed()`](/blog/2024-11-effect-afterrendereffect#when-to-choose-effect-over-computed)
-* [Introducing `afterRenderEffect()`](/blog/2024-11-effect-afterrendereffect#introducing-afterrendereffect)
-  * [Understanding the Phases](/blog/2024-11-effect-afterrendereffect#understanding-the-phases)
-  * [Phases Only Run Again When "Dirty" Through Signal Dependencies](/blog/2024-11-effect-afterrendereffect#phases-only-run-again-when-dirty-through-signal-dependencies)
-  * [Example of `afterRenderEffect()`: Dynamically Resizing a Textarea](/blog/2024-11-effect-afterrendereffect#example-of-afterrendereffect-dynamically-resizing-a-textarea)
-* [Migration Guide: From Angular's Lifecycle Hooks to Signal-Based Reactivity](/blog/2024-11-effect-afterrendereffect#migration-guide-from-angulars-lifecycle-hooks-to-signal-based-reactivity)
-* [Reminder: `afterRenderEffect()` shouldn't be used in line-of-business code](/blog/2024-11-effect-afterrendereffect#reminder-afterrendereffect-shouldnt-be-used-in-line-of-business-code)
-* [Best Practices for Using `effect()` and `afterRenderEffect()`](/blog/2024-11-effect-afterrendereffect#best-practices-for-using-effect-and-afterrendereffect)
-* [Demo Application](/blog/2024-11-effect-afterrendereffect#demo-application)
-* [Conclusion](/blog/2024-11-effect-afterrendereffect#conclusion)
+[[toc]]
 
 
 ## Angular 19 vs. Previous Versions: What's Different?

blog/2024-11-linked-signal/README.md

@@ -27,13 +27,7 @@ Here's a look at what the Linked Signal is, how it works, and some common use ca
 
 ## Contents
 
-* [What is a Linked Signal?](/blog/2024-11-linked-signal#what-is-a-linked-signal)
-* [Basic Usage of Linked Signal](/blog/2024-11-linked-signal#basic-usage-of-linked-signal)
-* [Advanced Scenarios for Linked Signals](/blog/2024-11-linked-signal#advanced-scenarios-for-linked-signals)
-* [Linked Signal vs. Other Signals](/blog/2024-11-linked-signal#linked-signal-vs-other-signals)
-* [Best Practices for Using Linked Signal](/blog/2024-11-linked-signal#best-practices-for-using-linked-signal)
-* [Demo Application](/blog/2024-11-linked-signal#demo-application)
-* [Conclusion](/blog/2024-11-linked-signal#conclusion)
+[[toc]]
 
 
 > **🇩🇪 This article is available in German language here: [Neu in Angular 19: LinkedSignal für reaktive Zustandsverwaltung](https://angular-buch.com/blog/2024-11-linked-signal)**

blog/2025-05-angular20/README.md

@@ -172,7 +172,7 @@ Since this decision, the Angular team has been working on integrating alternativ
 Two years ago, experimental builders for [Jest and Web Test Runner](https://blog.angular.dev/moving-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca) were released.
 With Angular 20, another experimental integration is added for [Vitest](https://vitest.dev):
 Vitest has already become a staple in other web frameworks based on the [Vite](https://vite.dev) bundler.
-Angular's build process has already [used ESBuild with Vite since version 16](/blog/2023-05-angular16#esbuild).
+Angular's build process has already used ESBuild with Vite since version 16.
 With this gradual switch, we can now also use Vitest for unit and integration tests.
 
 Which of the experimental test runners will become Angular's new standard is not yet decided!