Website improvements (#178)

Author: simonkurtz-MSFT

docs/index.html

@@ -299,7 +299,7 @@ <h3>À la carte</h3>
     <section class="deck-callout" aria-labelledby="deck-heading">
       <div class="container deck-callout-inner">
         <div class="deck-callout-text">
-          <h2 id="deck-heading">Prefer slides?</h2>
+          <h2 id="deck-heading">Prefer slides?<a class="heading-anchor" href="#deck-heading" aria-label="Link to Prefer slides section">#</a></h2>
           <p>
             A browser-based slide deck walks you through the architectures and samples.
             Self-contained &mdash; save the page and present offline!
@@ -317,7 +317,7 @@ <h2 id="deck-heading">Prefer slides?</h2>
     <section id="infrastructures" class="section section-subtle" aria-labelledby="infra-heading">
       <div class="container">
         <div class="accent-bar" aria-hidden="true"></div>
-        <h2 id="infra-heading" class="section-heading">Infrastructures</h2>
+        <h2 id="infra-heading" class="section-heading">Infrastructures<a class="heading-anchor" href="#infrastructures" aria-label="Link to Infrastructures section">#</a></h2>
         <p class="section-lede">
           Each architecture is deployed with a single Jupyter notebook and torn down just as easily.
           These high-fidelity environments let you explore network patterns, private connectivity, and
@@ -332,12 +332,12 @@ <h2 id="infra-heading" class="section-heading">Infrastructures</h2>
                    alt="Architecture diagram: a single publicly accessible Azure API Management instance fronting backend APIs">
             </div>
             <div class="body">
-              <span class="pill">Fastest · Lowest Cost</span>
               <h3>Simple API Management</h3>
               <p>
                 Just the basics with a publicly accessible APIM instance. The innermost way to experience
                 and experiment with APIM policies. Deploys in about five minutes.
               </p>
+              <span class="pill">Fastest · Lowest Cost</span>
             </div>
           </a>
 
@@ -361,12 +361,12 @@ <h3>API Management &amp; Container Apps</h3>
                    alt="Architecture diagram: Azure Front Door connecting to API Management through a Private Link connection, with VNet-integrated Container Apps backends">
             </div>
             <div class="body">
-              <span class="pill">Private Link</span>
               <h3>Front Door &amp; API Management</h3>
               <p>
                 A secure implementation with Azure Front Door connecting to APIM via Private Link. Traffic
                 rides entirely on Microsoft-owned networks once it passes Front Door.
               </p>
+              <span class="pill">Private Link</span>
             </div>
           </a>
 
@@ -376,12 +376,12 @@ <h3>Front Door &amp; API Management</h3>
                    alt="Architecture diagram: Azure Application Gateway connecting to API Management through a private endpoint in a virtual network subnet">
             </div>
             <div class="body">
-              <span class="pill">Private Link</span>
               <h3>Application Gateway (Private Link)</h3>
               <p>
                 Application Gateway reaches APIM through a private endpoint in a VNet subnet. APIM Standard
                 V2 accepts the connection, with VNet-integrated Container Apps behind.
               </p>
+              <span class="pill">Private Link</span>
             </div>
           </a>
 
@@ -391,12 +391,12 @@ <h3>Application Gateway (Private Link)</h3>
                    alt="Architecture diagram: Azure Application Gateway with a fully VNet-injected API Management instance and Container Apps environment">
             </div>
             <div class="body">
-              <span class="pill">VNet Injection</span>
               <h3>Application Gateway (VNet)</h3>
               <p>
                 Full VNet injection of APIM and Container Apps. APIM is shielded from any traffic unless it
                 comes through Application Gateway. Maximum isolation.
               </p>
+              <span class="pill">VNet Injection</span>
             </div>
           </a>
 
@@ -416,7 +416,7 @@ <h3>Application Gateway (VNet)</h3>
     <section id="samples" class="section" aria-labelledby="samples-heading">
       <div class="container">
         <div class="accent-bar" aria-hidden="true"></div>
-        <h2 id="samples-heading" class="section-heading">Samples</h2>
+        <h2 id="samples-heading" class="section-heading">Samples<a class="heading-anchor" href="#samples" aria-label="Link to Samples section">#</a></h2>
         <p class="section-lede">
           Each sample is a focused, runnable lab. Open the notebook, press <em>Run All</em>, then poke at
           the policies. If an infrastructure is not already deployed, the notebook will guide you through
@@ -489,7 +489,7 @@ <h3>Azure Maps</h3>
     <section id="quickstart" class="section section-subtle" aria-labelledby="quickstart-heading">
       <div class="container">
         <div class="accent-bar" aria-hidden="true"></div>
-        <h2 id="quickstart-heading" class="section-heading">Quick Start</h2>
+        <h2 id="quickstart-heading" class="section-heading">Quick Start<a class="heading-anchor" href="#quickstart" aria-label="Link to Quick Start section">#</a></h2>
         <p class="section-lede">
           From clone to a running APIM lab in under ten minutes. Codespaces is the fastest route because
           Python, Azure CLI, and Bicep are already installed.

docs/styles.css

@@ -114,6 +114,31 @@ img { max-width: 100%; height: auto; }
   letter-spacing: -0.5px;
 }
 
+.heading-anchor {
+  color: var(--brand-blue);
+  text-decoration: none;
+  margin-left: 8px;
+  font-weight: 400;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.heading-anchor:hover,
+.heading-anchor:focus {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+.section-heading:hover .heading-anchor,
+.deck-callout h2:hover .heading-anchor {
+  opacity: 0.6;
+}
+
+.section-heading:hover .heading-anchor:hover,
+.deck-callout h2:hover .heading-anchor:hover {
+  opacity: 1;
+}
+
 .section-lede {
   font-size: 18px;
   color: var(--text-muted);
@@ -570,7 +595,7 @@ img { max-width: 100%; height: auto; }
   color: var(--text-on-brand);
   padding: 3px 10px;
   border-radius: 999px;
-  margin-bottom: 12px;
+  margin-top: 12px;
 }
 
 /* =========================================================================

setup/serve_website.py

@@ -197,14 +197,14 @@ def handle_shutdown_signal(signum, frame) -> None:
 
         url = f'http://localhost:{port}'
         print('\n✨ APIM Samples Website Preview')
-        print(f'   Serving from: {SITE_DIR}')
-        print(f'   Landing page: {url}/')
-        print(f'   Slide deck:   {url}/{SLIDE_DECK_STAGED}')
+        print(f'   Serving from : {SITE_DIR}')
+        print(f'   Landing page : {url}/')
+        print(f'   Slide deck   : {url}/{SLIDE_DECK_STAGED}')
         print()
         print('   🌐 Browser opening in 1 second...')
         print()
         print('   To stop the server: Press Ctrl+C')
-        print()
+        print(flush=True)
 
         def open_browser() -> None:
             sleep(1)