daemon-sec-lotl

Base.astro (9618B)

---

 ---
 import { ClientRouter } from 'astro:transitions';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import SearchModal from '../components/SearchModal.astro';
 import { url } from '../lib/url';
 import { serialize, type JsonLd } from '../lib/jsonld';
 import '../styles/app.css';
 // Preload the two faces that paint above the fold — the wordmark in the
 // masthead and the DM Mono the masthead/labels use — so the header does not flash
 // its fallback on first paint. The rest load on demand via @font-face.
 import notoWordmark from '../fonts/noto-sans-display-var-latin.woff2';
 import dmMono from '../fonts/dm-mono-400.woff2';
 
 interface Props {
   title?: string;
   description?: string;
   railless?: boolean;
   /** schema.org objects for this page; see src/lib/jsonld.ts */
   jsonLd?: JsonLd | JsonLd[];
 }
 const {
   jsonLd,
   title = 'DÆMONBins — the Off-the-Land Almanac',
   description = 'One filterable catalog merging GTFOBins, LOLBAS, WADComs and LOOBins — plus DÆMON additions. Living-off-the-land and offensive techniques by platform, access, environment and evidence state.',
 } = Astro.props;
 // Canonical = site origin + slash-less path (`trailingSlash: 'never'` in
 // astro.config.mjs; vercel.json 308s `/x/` → `/x`, so a slashed canonical
 // would point every page at a redirect). Only `/` keeps its slash.
 const canonical = new URL(Astro.url.pathname.replace(/(.)\/$/, '$1'), Astro.site).href;
 // Social card: crawlers need an absolute URL and a raster — the PNG is rendered
 // from the SVG template by `npm run og` (scripts/og.mjs) and committed.
 const ogImage = new URL('og.png', Astro.site).href;
 ---
 <!doctype html>
 <html lang="en" data-theme="light">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{title}</title>
     <meta name="description" content={description} />
     <link rel="canonical" href={canonical} />
     <link rel="icon" href={url('favicon.svg')} type="image/svg+xml" />
     <link rel="preload" href={notoWordmark} as="font" type="font/woff2" crossorigin />
     <link rel="preload" href={dmMono} as="font" type="font/woff2" crossorigin />
     <meta name="theme-color" content="#191724" media="(prefers-color-scheme: dark)" />
     <meta name="theme-color" content="#faf4ed" media="(prefers-color-scheme: light)" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="DÆMONBins" />
     <meta property="og:url" content={canonical} />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
     <meta property="og:image" content={ogImage} />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:image:alt" content="DÆMONBins — the Off-the-Land Almanac: GTFOBins × LOLBAS × WADComs × LOOBins merged into one catalog" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content={title} />
     <meta name="twitter:description" content={description} />
     <meta name="twitter:image" content={ogImage} />
     {jsonLd && <script is:inline type="application/ld+json" set:html={serialize(jsonLd)} />}
     <!-- Set theme before first paint to avoid FOUC -->
     <script is:inline>
       (function () {
         function apply() {
           try {
             var display = JSON.parse(localStorage.getItem('daemonbins:display') || '{}');
             document.documentElement.dataset.motion = display.motion ? 'reduce' : 'system';
             var t = localStorage.getItem('theme');
             // No stored choice: follow the OS. Dawn (cream) is the default when
             // the OS has no preference, matching the main DÆMON site — but a
             // dark-mode reader should not get a cream page under dark chrome.
             if (t !== 'light' && t !== 'dark') {
               t = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
             }
             document.documentElement.setAttribute('data-theme', t);
             document.documentElement.style.colorScheme = t;
           } catch (e) {
             document.documentElement.setAttribute('data-theme', 'light');
           }
         }
 
         apply();
 
         /* Every page ships `<html data-theme="light">` in its static markup,
            because that is the default and the build has no way to know what
            any given reader chose. On a view-transition navigation Astro
            swaps in the new document — attributes on <html> included — so
            that baked-in "light" overwrites the live attribute and the page
            reverts to dawn mid-session.
 
            This listener re-applies the stored choice on every swap. It runs
            in `astro:after-swap`, which fires after the new document is in
            place but before it is painted, so the correction never flashes.
 
            The listener is registered once, from an inline head script that
            executes on the first full load only — which is exactly why it
            has to be `is:inline` and live here rather than in app.ts: a
            bundled module re-imported per page would re-register it, and a
            deferred one would run too late to beat the paint. */
         document.addEventListener('astro:after-swap', apply);
       })();
     </script>
     <!-- Page iris. Every internal navigation opens the next page as a
          circle from the link that was pressed: the theme wipe's gesture,
          at page pace. The CSS is beside the theme wipe in global.css;
          this only supplies the origin and the end radius. -->
     <script is:inline>
       (function () {
         function centre(el) {
           var r = el.getBoundingClientRect();
           return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
         }
 
         /* Where the last click landed. Capture phase, so it is recorded
            before the ClientRouter's own listener takes the click. A click
            with detail 0 came from the keyboard and has no pointer
            position, so it opens from the middle of the control. */
         var press = null;
         document.addEventListener('click', function (e) {
           var at = e.detail === 0 && e.target instanceof Element
             ? centre(e.target)
             : { x: e.clientX, y: e.clientY };
           at.t = Date.now();
           press = at;
         }, true);
 
         var origin = null;
         function paint() {
           if (!origin) return;
           var s = document.documentElement.style;
           s.setProperty('--vt-x', origin.x + 'px');
           s.setProperty('--vt-y', origin.y + 'px');
           s.setProperty('--vt-r', origin.r + 'px');
         }
 
         /* A press older than a second did not cause this navigation (back,
            forward, a scripted one), so it falls back to the link Astro
            reports, then to the middle of the screen. The radius reaches
            the farthest corner exactly, so the circle finishes as it
            covers the page rather than part-way through an overshoot. */
         document.addEventListener('astro:before-preparation', function (e) {
           var at = press && Date.now() - press.t < 1000 ? press
             : e.sourceElement instanceof Element ? centre(e.sourceElement)
             : { x: innerWidth / 2, y: innerHeight / 2 };
           origin = {
             x: at.x,
             y: at.y,
             r: Math.hypot(Math.max(at.x, innerWidth - at.x), Math.max(at.y, innerHeight - at.y)),
           };
           paint();
         });
 
         /* The swap replaces <html>'s attributes with the new page's, and
            the inline style carrying these three goes with them, so they
            are put back before the new page is painted, for the same
            reason as the theme note above. */
         document.addEventListener('astro:after-swap', paint);
       })();
     </script>
     {import.meta.env.PROD && (
       <Fragment>
         {/* Vercel Web Analytics + Speed Insights. Zero-dependency: Vercel serves
             these scripts at the edge once the features are enabled for the
             project (Vercel dashboard → Analytics / Speed Insights). They live in
             <head> so Astro's ClientRouter keeps them across view transitions
             rather than re-running them per navigation. Privacy-friendly and
             cookieless; no-op in dev. */}
         <script is:inline>window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };</script>
         <script is:inline defer src="/_vercel/insights/script.js"></script>
         <script is:inline>window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };</script>
         <script is:inline defer src="/_vercel/speed-insights/script.js"></script>
       </Fragment>
     )}
     <ClientRouter />
   </head>
   <body>
     <a class="skip-link" href="#main">Skip to content</a>
     <!-- The film over the whole page. It is what keeps a flat colour
          reading as stock rather than as a swatch, and it stands in for the
          texture the old glass build got from blur. -->
     <span class="grain" aria-hidden="true"></span>
     <!-- The dot field behind the top of the page (src/scripts/dmn). -->
     <div class="dmn-page-field" aria-hidden="true"><canvas data-dots></canvas></div>
     <Header />
     <main id="main">
       <slot />
     </main>
     <Footer />
     <SearchModal />
     <script>
       import '../scripts/app.ts';
     </script>
   </body>
 </html>