Table Of Contents List

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table of Contents List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #ffffff;
            color: #334155;
            margin: 0;
            padding: 0 2rem;
        }

/* Enable smooth scrolling on the root */
        html {
            scroll-behavior: smooth;
        }

/* ==========================================================================
           Table of Contents Component Styles - Copy from here
           ========================================================================== */
        .toc-template {
            --toc-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --toc-primary-text-color: #334155;
            --toc-secondary-text-color: #64748b;
            --toc-accent-color: #6d28d9;
            --toc-link-color: #475569;
            --toc-active-link-color: var(--toc-accent-color);
            --toc-bg-color: #f8fafc;
            --toc-border-color: #e2e8f0;
            
            font-family: var(--toc-font-family);
            color: var(--toc-primary-text-color);
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 0;
        }

.toc-template *,
        .toc-template *::before,
        .toc-template *::after {
            box-sizing: border-box;
        }
        
        .toc-template-layout {
            display: flex;
            flex-direction: column;
            gap: 3rem;
        }

/* The navigation is sticky on larger screens */
        @media(min-width: 1024px) {
            .toc-template-layout {
                flex-direction: row;
            }
            .toc-nav {
                position: sticky;
                top: 2rem;
                flex-basis: 300px;
                flex-shrink: 0;
                height: calc(100vh - 4rem);
                align-self: flex-start;
            }
        }
        
        .toc-nav h2 {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: .5px;
            color: var(--toc-secondary-text-color);
            margin: 0 0 1rem 0;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--toc-border-color);
        }

#toc-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        #toc-list li {
            margin-bottom: .5rem;
        }

#toc-list a {
            color: var(--toc-link-color);
            text-decoration: none;
            display: block;
            font-size: 0.9rem;
            padding: .25rem 0;
            transition: color 0.2s;
            border-left: 2px solid transparent;
            padding-left: 1rem;
        }
        
        /* Style for nested lists */
        #toc-list ul {
            list-style: none;
            padding-left: 1rem;
            margin-top: .5rem;
        }

#toc-list a:hover {
            color: var(--toc-active-link-color);
        }

#toc-list a.active {
            color: var(--toc-active-link-color);
            font-weight: 600;
            border-left-color: var(--toc-accent-color);
        }

.article-content h1 {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            line-height: 1.1;
        }
        
        .article-content .subtitle {
            font-size: 1.25rem;
            color: var(--toc-secondary-text-color);
            margin: 0 0 3rem 0;
        }
        
        .article-content h2,
        .article-content h3 {
            /* Ensures heading is not hidden by a fixed nav bar */
            scroll-margin-top: 4rem; 
        }

.article-content h2 {
            font-size: 2rem;
            margin-top: 3rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--toc-border-color);
        }

.article-content p {
            line-height: 1.7;
            margin-bottom: 1.25rem;
        }
    </style>
</head>
<body>

<div class="toc-template">
    <div class="toc-template-layout">
        
        <nav class="toc-nav" aria-label="Table of contents">
            <h2>On this page</h2>
            <ul id="toc-list">
                <li><a href="#ingredients">The Ingredients</a>
                    <ul>
                        <li><a href="#tangible">Tangible Goods</a></li>
                        <li><a href="#intangible">Intangible Concepts</a></li>
                    </ul>
                </li>
                <li><a href="#preparation">The Preparation</a></li>
                <li><a href="#the-bake">The Bake</a></li>
                <li><a href="#presentation">The Presentation</a></li>
            </ul>
        </nav>
    
        <main class="article-content">
            <h1>A Guide to Baking an Existential Crisis Cake</h1>
            <p class="subtitle">A surprisingly bitter dessert for the discerning palate.</p>

<section>
                <h2 id="ingredients">The Ingredients</h2>
                <p>This is not your grandmother's recipe, unless your grandmother was a nihilist philosopher with a sweet tooth. Procuring these ingredients requires more than a trip to the supermarket. It requires introspection.</p>

<h3 id="tangible">Tangible Goods</h3>
                <p>Begin with the basics. You will need 2 cups of all-purpose dread, 1 cup of melted ennui, and 3 eggs of mild-to-moderate disappointment. For leavening, a tablespoon of cosmic indifference is essential. Do not substitute with baking soda; the philosophical flavor profile will be completely off.</p>

<h3 id="intangible">Intangible Concepts</h3>
                <p>Next, fold in one lingering memory of a childhood dream you have long since abandoned. Add a dash of the sudden realization that you are just a collection of star-dust on a meaningless trajectory. Sweeten to taste with the faint, persistent ringing in your ears that only you can hear.</p>
            </section>

<section>
                <h2 id="preparation">The Preparation</h2>
                <p>In a large bowl, whisk the dread and ennui until they form stiff, grey peaks. In a separate bowl, beat the eggs of disappointment while staring blankly into the middle distance. Combine the two mixtures with a spatula of resignation. It is important not to over-mix. The batter should have the lumpy consistency of a Tuesday afternoon.</p>
                <p>Gently incorporate the cosmic indifference and your chosen intangibles. You will know the batter is ready when it sighs audibly. Pour it into a poorly-greased pan, for what is baking without the Sisyphean struggle of a cake that will not release?</p>
            </section>

<section>
                <h2 id="the-bake">The Bake</h2>
                <p>Preheat your oven to a vaguely unsettling temperature. Bake for what feels like an eternity, but is probably around 35 minutes. Do not check on the cake. A watched pot never boils, and a watched cake will only judge your life choices. The cake is done when a toothpick inserted into the center comes out questioning its own purpose.</p>
            </section>
            
            <section>
                <h2 id="presentation">The Presentation</h2>
                <p>Let the cake cool on a wire rack of shattered expectations. There is no need for frosting, as the cake is already layered with a thick glaze of irony. Serve in complete silence to a room full of people checking their phones. Pairs well with lukewarm tap water and the crushing weight of your own consciousness. Enjoy?</p>
            </section>
        </main>
        
    </div>

// Get all the sections that the TOC links point to
            tocLinks.forEach(link => {
                const sectionId = link.getAttribute('href').substring(1);
                const section = document.getElementById(sectionId);
                if(section) {
                    sections.push(section);
                }
            });

if (sections.length === 0) return;

</body>
</html>