docs(site): updates

andreruffert · andreruffert · commit 16a2519d0387 · 2025-02-28T04:23:05.000+01:00
- add no support alert
- update intro heading structure
diff --git a/README.md b/README.md
@@ -70,7 +70,7 @@ Or via CDN
   <img src="https://web-platform-dx.github.io/web-features/assets/img/baseline-limited-word.svg" width="224" height="63" alt="Baseline limited availability wordmark">
 </picture>
 
-- [CSS Custom Highlight API][MDN_CSS_Custom_Highlight_API]
+- [CSS Custom Highlight API][caniuse_mdn-api_highlight]
 
 ## Credits
 
@@ -87,3 +87,4 @@ Distributed under the MIT license. See LICENSE for details.
 [bramus_github]: https://github.com/bramus
 [bramus_blog_post]: https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting
 [MDN_CSS_Custom_Highlight_API]: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API
+[caniuse_mdn-api_highlight]: https://caniuse.com/mdn-api_highlight
diff --git a/docs/index.html b/docs/index.html
@@ -40,6 +40,10 @@
     <script type="module" async blocking="render" src="https://unpkg.com/color-scheme-switch-element@latest/dist/color-scheme-switch-element.js"></script>
   </head>
   <body>
+    <div class="alert" data-alert="no-support" hidden>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M16 16s-1.5-2-4-2-4 2-4 2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
+      <p>The <a href="https://caniuse.com/mdn-api_highlight" target="_blank" rel="noreferrer">CSS Custom Highlight API</a> is not supported in this browser.</p>
+    </div>
     <header>
       <div class="header-links">
         <a href="https://andreruffert.com" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>Made by André Ruffert</a>
@@ -52,11 +56,8 @@
     <main>
       <section data-section="intro">
         <span class="emoji" aria-hidden="true">👓</span>
-        <h1 class="heading">
-          <span>&lt;syntax-highlight&gt;</span>
-          web component
-        </h1>
-        <p class="tagline">A custom element that uses the CSS Custom Highlight API for syntax highlighting</p>
+        <span class="heading">&lt;syntax-highlight&gt;</span>
+        <h1 class="tagline">A custom element that uses the CSS Custom Highlight API for syntax highlighting</h1>
         <p class="badges">
           <img src="https://img.shields.io/badge/Release%20Candidate-32A9C3" alt="Release Candidate" />
           <a href="https://www.npmjs.com/package/syntax-highlight-element">
@@ -83,6 +84,7 @@ <h1 class="heading">
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2v2"/><path d="M14 2v4"/><path d="M17 2a1 1 0 0 1 1 1v9H6V3a1 1 0 0 1 1-1z"/><path d="M6 12a1 1 0 0 0-1 1v1a2 2 0 0 0 2 2h2a1 1 0 0 1 1 1v2.9a2 2 0 1 0 4 0V17a1 1 0 0 1 1-1h2a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1"/></svg>
             <select aria-label="Theme" id="theme-preset-select"></select>
           </div>
+          <div class="menubar__item" style="margin-inline-start: auto"><small>Playground</small></div>
         </div>
         <div class="playground">
           <syntax-highlight language="html"></syntax-highlight>
@@ -140,8 +142,8 @@ <h2>Attributes</h2>
         <article>
           <h1>Credits</h1>
           <ul>
-            <li><a href="https://github.com/bramus" target="_blank">Bramus Van Damme</a> and his <a href="https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting" target="_blank">blog post</a> where I first read about using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API" target="_blank">CSS Custom Highlight API</a> for syntax highlighting.
-            <li><a href="https://github.com/PrismJS/prism" target="_blank">Prism</a>'s tokenizer
+            <li><a href="https://github.com/bramus" target="_blank" rel="noreferrer">Bramus Van Damme</a> and his <a href="https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting" target="_blank">blog post</a> where I first read about using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API" target="_blank">CSS Custom Highlight API</a> for syntax highlighting.
+            <li><a href="https://github.com/PrismJS/prism" target="_blank" rel="noreferrer">Prism</a>'s tokenizer
           </ul>
         </article>
       </section>
@@ -174,9 +176,12 @@ <h1>Credits</h1>
       import { languageExamples } from './language-examples.js'
       import { themePresets } from './theme-presets.js';
 
+      const DEFAULT_LANGUAGE_EXAMPLE = 'JS';
       const SUPPORTS_CSS_HIGHLIGHTS = CSS.highlights;
 
-      const DEFAULT_LANGUAGE_EXAMPLE = 'JS';
+      if (!SUPPORTS_CSS_HIGHLIGHTS) {
+        document.querySelector('[data-alert="no-support"]').removeAttribute('hidden')
+      }
 
       /**
         * Language example switcher
diff --git a/docs/style.css b/docs/style.css
@@ -9,6 +9,9 @@
   body {
     margin: 0;
   }
+  [hidden] {
+    display: none !important;
+  }
 }
 
 @layer layout {
@@ -156,6 +159,22 @@
     border-color: light-dark(var(--light-accent), var(--dark-accent));
   }
 
+  .alert {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    text-wrap: balance;
+    gap: var(--spacing-2);
+    padding: var(--spacing-6) var(--spacing-4);
+    border-block-end: 3px solid
+      light-dark(var(--light-accent), var(--dark-accent));
+
+    p {
+      margin: 0;
+    }
+  }
+
   header {
     display: flex;
     align-items: center;
@@ -275,19 +294,18 @@
     }
 
     .heading {
-      font-size: clamp(1.5rem, 2vw + 1rem, 2.75rem);
+      color: light-dark(var(--light-accent), var(--dark-accent));
+      font-size: clamp(1.5rem, 2vw + 1.5rem, 3rem);
+      font-weight: bold;
       line-height: 1.1;
       display: flex;
       flex-direction: column;
       margin: 0;
     }
 
-    .heading span {
-      color: light-dark(var(--light-accent), var(--dark-accent));
-    }
-
     .tagline {
       font-size: clamp(1rem, 2vw, 1.25rem);
+      font-weight: normal;
       margin: 0;
     }
 
