Security Status Documentation

A production-grade, static documentation template built for the Cloudflare edge: glassmorphic dark UI, a scroll-spy navigation tree, syntax-highlighted command regions, and a built-in bot-protection slot. Everything below is real, working content — copy the file, push it to a Pages project, and it renders on the first try.

Getting Started

Quick Start

Three commands stand up a local preview. The fourth publishes the folder to a Cloudflare Pages project. There is no compile phase — the browser receives exactly the bytes you write.

1. 1

   Create the project folder

   Drop index.html into an empty directory. That single file is the entire site.

2. 2

   Serve it locally

   Any static file server works. Use npx serve, python -m http.server, or the VS Code Live Server extension.

3. 3

   Authenticate Wrangler once

   npx wrangler login opens a browser OAuth flow and stores the token in ~/.wrangler/config.

4. 4

   Deploy

   Create the project once, then push the directory on every change.

# 1 — local preview
$ npx serve .

# 2 — link this machine to your Cloudflare account
$ npx wrangler login

# 3 — create the Pages project exactly once
$ npx wrangler pages project create security-status --production-branch=main

# 4 — ship the folder (repeat freely)
$ npx wrangler pages deploy . --project-name=security-status

✨ Deployment complete. Take a sip of coffee, it's already live.

Getting Started

Installation

The template has no package dependency, but you may want tooling around it. Pick the tab that matches your environment.

$ mkdir security-status && cd security-status
$ npm create quickdocs@latest
$ npm i -D wrangler serve

$ mkdir security-status && cd security-status
$ pnpm dlx quickdocs create
$ pnpm add -D wrangler serve

$ mkdir security-status && cd security-status
$ bun create quickdocs@latest
$ bun add -d wrangler

Requirements

Getting Started

Deploy to Cloudflare Pages

Two paths exist: upload a folder directly from the dashboard, or push to Git and let Cloudflare build. For a single static file, direct upload is faster and has no build queue.

Wrangler deploy reference

Core Concepts

Configuration

One tailwind.config object inside the <head> drives every color, font, and animation on the page. Edit it in place; the Play CDN recompiles on the next paint.

tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        ink:  { 950: '#050510', 850: '#10111f', 700: '#1f2147' },
        indigo: { '300': '#67e8f9', '400': '#22d3ee', '500': '#06b6d4' },
      },
      fontFamily: {
        sans:    ['Inter', 'system-ui'],
        display: ['Chakra Petch', 'Inter'],
        mono:    ['JetBrains Mono', 'monospace']
      }
    }
  }
}

Core Concepts

Theming & Tokens

The palette is deliberately narrow: one near-black canvas, two glass surfaces, one border hue, and three signal colors. Signal colors carry meaning — indigo for navigation, violet for versioning and metadata, emerald for healthy states.

Type scale

Core Concepts

Layout & Routing

The shell is a flex row under a sticky header. The sidebar is sticky top-16 with its own scroll context; the main column is min-w-0 so long code blocks never blow out the grid.

Features

Command Tables

Reference tables pair a monospace command column with a plain-language description. Rows highlight on hover with a duration-300 fade so dense grids still feel alive.

Features

Code & Syntax Blocks

Dark syntax regions use hand-rolled token spans (.tok-k keys, .tok-s strings, .tok-c comments) instead of a highlighting library — the whole palette ships in about twenty lines of CSS.

export type Probe = {
  id: string;
  url: string;
  intervalMs: number;
};

export async function probe(p: Probe, signal?: AbortSignal) {
  const started = performance.now();
  const res = await fetch(p.url, { signal, redirect: 'follow' });
  return {
    id: p.id,
    ok: res.ok,
    status: res.status,
    latency: Math.round(performance.now() - started)
  };
}

Features

Status Indicators

Status is communicated three times over — color, motion, and text — so it survives color-blindness and print. Dots use animate-pulse for ambient life and an expanding ring for attention states.

Features

Search & Navigation

Press Ctrl + K anywhere to open the palette. It fuzzy-matches section titles and their group names, supports arrow-key traversal, and jumps with the same offset-aware scroll as the sidebar.

Features

Responsive & Device Support

The layout is fluid from 320px phones to ultrawide monitors. Nothing requires a mouse: every control is reachable by keyboard, every target is at least 44px on touch screens, and text stays legible when users zoom the page to 200%.

Tested platforms

Features

SEO & Discoverability

Discoverability starts in the <head>. This file ships a keyword-rich meta description, a keyword list, Open Graph and Twitter cards, and two JSON-LD blocks (a TechArticle and the FAQ) so search engines can render rich results without guessing.

<meta name="description"
      content="Complete documentation for Security Status: deployment on
      Cloudflare Pages, security hardening guides and bot protection.">

<meta name="keywords"
      content="documentation template, web security guide, phishing
      prevention, turnstile bot protection, responsive design">

<meta property="og:title" content="Security Status — Documentation">
<meta name="twitter:card" content="summary_large_image">

<script type="application/ld+json">
  { "@type": "TechArticle", "headline": "...", "dateModified": "2026-10-07" }
</script>

Keyword placement checklist

Security & Safety

Security Overview

Security Status treats security as layered depth, not a single wall. The guides in this chapter cover both halves of the problem: how to keep the deployed site hardened at the edge, and how to keep yourself safe as the operator — accounts, browser, network, and device.

The five-layer model

Security & Safety

Password Hygiene

The goal is not a password you can remember — it is one you never had to. A manager generating and storing 20+ character random strings per site removes the two failure modes that cause most account takeovers: reuse and shoulder-surfed secrets.

Security & Safety

Two-Factor Authentication

Not all second factors are equal. SMS codes stop casual attackers but fall to SIM-swapping and relay kits. The ranking below is the consensus order — pick the strongest method every critical account will accept.

Security & Safety

Phishing Defense

Phishing has converged on one pattern: manufactured urgency plus a familiar-looking login. Modern kits replay the real page and only swap the form target, so visual inspection alone is no longer enough — verify the origin, not the artwork.

Security & Safety

Browser Hardening

The browser is the most attacked piece of software on your machine. These settings cost nothing, take ten minutes, and close entire categories of drive-by compromise.

Security & Safety

Network Privacy

Your DNS resolver sees every domain you visit, and public Wi-Fi lets strangers on the same segment probe your machine. Both problems have cheap, well-understood fixes.

Security & Safety

Device Safety

Three controls carry most of the weight on the endpoint: keep it patched, keep it encrypted, and keep a copy of the data you would grieve losing.

Security & Safety

Incident Response

When something goes wrong, speed matters more than sophistication. This six-phase checklist is a condensed version of established incident-response practice — print it, because the moment you need it your search engine is not your friend.

Security & Safety

Mobile & Tablet Safety

Phones hold more personal data than laptops: messages, photos, banking apps, and your entire contact graph. The controls below take about twenty minutes and cover almost every realistic mobile threat.

Security & Safety

Safe Downloads & Software

Malware overwhelmingly arrives through the front door: a download the user chose to run. Verify what you install, get it from the source that wrote it, and never trade software integrity for a free copy.

# Windows PowerShell
PS> Get-FileHash .\installer.exe -Algorithm SHA256

# macOS / Linux
$ shasum -a 256 installer.iso

# compare — character for character — against the hash the vendor published
a3f1...9c2e  installer.iso   ← must match exactly

Security & Safety

Scam Playbook

Scams change costume constantly but reuse the same handful of scripts. Learn the pattern rather than the latest branding: an unexpected contact, a story that creates pressure, and a payment method that cannot be reversed.

Security & Safety

Social Media Privacy

Every post is a data source for someone else: social engineers, stalkers, and data brokers. You do not have to quit these platforms — you have to decide what each audience is allowed to know.

Security & Safety

Physical Security

Digital defenses collapse if someone can watch, touch, or plug into your hardware. These are the low-tech attacks that still work, and the equally low-tech counters.

Code Explained

The Scroll-Spy Engine

A documentation sidebar has one job: show where you are. This template does it with an IntersectionObserver that highlights whichever section occupies the active band of the viewport.

var sections = document.querySelectorAll('main section[id]');
var navLinks = Array.prototype.slice.call(document.querySelectorAll('.nav-link'));

var spy = new IntersectionObserver(function (entries) {
  entries.forEach(function (e) {
    if (e.isIntersecting) {
      var id = '#' + e.target.id;
      navLinks.forEach(function (l) {
        l.classList.toggle('active', l.getAttribute('href') === id);
      });
    }
  });
}, { rootMargin: '-20% 0px -70% 0px', threshold: 0 });

sections.forEach(function (s) { spy.observe(s); });

Why the margin band works

rootMargin: '-20% 0px -70% 0px' shrinks the observation window so only a 10% strip of the viewport counts as “active”. Scroll fast through a long page and the callback fires a few times per frame at most — far cheaper than a scroll listener that recomputes getBoundingClientRect() for every element on every pixel.

Code Explained

Turnstile Flow, Line by Line

The widget on screen is only half of the protection. A real integration runs this loop — and it is short enough to hold in your head.

export async function onRequestPost(context) {
  const { request, env } = context;
  const token = (await request.formData())
    .get('cf-turnstile-response');        // ← the widget's token

  const res = await fetch(
    'https://challenges.cloudflare.com/turnstile/v0/siteverify', {
      method: 'POST',                     // server-to-server only
      body: new URLSearchParams({
        secret: env.TURNSTILE_SECRET,     // from Pages → Variables
        response: String(token)
      })
    });

  const outcome = await res.json();
  if (!outcome.success) return new Response('Forbidden', { status: 403 });

  return Response.json({ ok: true });
}

Code Explained

Command Palette Internals

Press Ctrl+K (or /) anywhere. The palette is a small search engine that runs in three phases.

Phase 1 — build the index once

At startup every section[id] becomes a record with three fields: its anchor, its data-title (falling back to the heading text), and its full lowercase textContent. Building it once at load — rather than scanning the DOM on every keystroke — keeps typing latency at zero even on the 3,000-line file.

var index = sections.map(function (s) {
  return {
    id: '#' + s.id,
    title: s.getAttribute('data-title') ||
            (s.querySelector('h1,h2') || {}).textContent || s.id,
    text: (s.textContent || '').toLowerCase()
  };
});

Phase 2 — filter, never rank blind

A substring match runs against both the title and the body text, so "phish" finds both the Phishing Defense section (by title) and every paragraph mentioning phishing (by body). Results are capped at 12 and re-rendered on every keystroke — the DOM is rebuilt from a fresh array, keeping the highlighted cursor row in sync.

input.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowDown') { e.preventDefault(); cursor = Math.min(cursor + 1, hits.length - 1); render(); }
  else if (e.key === 'ArrowUp')   { e.preventDefault(); cursor = Math.max(cursor - 1, 0); render(); }
  else if (e.key === 'Enter' && hits[cursor]) { e.preventDefault(); jump(hits[cursor].id); }
  else if (e.key === 'Escape') { closeSearch(); }
});

Phase 3 — jump and desync the state

jump(id) closes the modal, smooth-scrolls to the anchor, and rewrites the URL with history.replaceState so the hash is shareable without pushing duplicate history entries. Because the scroll-spy observes the same sections, the sidebar and the rail re-sync automatically as the page settles.

Cloudflare Edge

Turnstile Protection

Turnstile is Cloudflare's invisible challenge widget: it proves a visitor is likely human without puzzles or friction. This page mounts a real widget using site key 0x4AAAAAAFQ0KEp-nsdPDFaG — the challenge you see below is issued by Cloudflare, not simulated.

<div class="cf-turnstile"
     data-sitekey="0x4AAAAAAFQ0KEp-nsdPDFaG"
     data-theme="dark"
     data-size="flexible"></div>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js"
        async defer></script>

export async function onRequestPost(context) {
  const { request, env } = context;
  const token = (await request.formData())
    .get('cf-turnstile-response');

  const res = await fetch(
    'https://challenges.cloudflare.com/turnstile/v0/siteverify', {
      method: 'POST',
      body: new URLSearchParams({
        secret: env.TURNSTILE_SECRET,
        response: String(token)
      })
    });

  const outcome = await res.json();
  if (!outcome.success) return new Response('Forbidden', { status: 403 });

  return Response.json({ ok: true });
}

Cloudflare Edge

Edge Middleware

On Cloudflare Pages, a _middleware.js at the route root runs before any asset is served. Use it to gate writes, attach security headers, and short-circuit known-bad traffic at the edge — before a single byte reaches your content.

const SECURITY_HEADERS = {
  'X-Content-Type-Options':      'nosniff',
  'X-Frame-Options':            'DENY',
  'Referrer-Policy':            'strict-origin-when-cross-origin',
  'Permissions-Policy':          'camera=(), microphone=(), geolocation=()',
  'Strict-Transport-Security':   'max-age=31536000; includeSubDomains'
};

export function onRequest(context) {
  const { request, next } = context;

  // Mutations must carry a verified Turnstile token
  if (request.method !== 'GET' && !request.headers.get('x-turnstile-token')) {
    return new Response('Bot token required', { status: 403 });
  }

  return next().then((res) => {
    const headers = new Headers(res.headers);
    for (const [k, v] of Object.entries(SECURITY_HEADERS)) headers.set(k, v);
    return new Response(res.body, { status: res.status, headers });
  });
}

Cloudflare Edge

Security Headers

Headers are the cheapest security control you own. Add them as HTTP response headers in the Pages dashboard (Settings → Headers) or from middleware, then verify with the browser devtools Network tab.

/
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()

/*
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

Cloudflare Edge

Caching & Purging

Pages serves assets from the edge with automatic cache headers. Hashed filenames can be cached forever; HTML should stay short-lived so a deploy propagates within seconds.

API Reference

CLI Commands

The full command surface for driving this template from a terminal. Every command exits non-zero on failure, so they compose cleanly in CI steps.

# .github/workflows/pages.yml
- name: Deploy to Pages
  run: npx wrangler pages deploy docs-template \
        --project-name=security-status \
        --branch=main
  env:
    CLOUDFLARE_API_TOKEN: ${{ secrets.CF_API_TOKEN }}

{
  "project": "security-status",
  "outputDir": "docs-template",
  "branch": "main",
  "checks": {
    "brokenAnchors": true,
    "missingAlt": true,
    "colorContrast": true
  }
}

API Reference

Config Schema

Every tunable exposed by the template, with types, defaults, and the exact effect each one has at runtime.

API Reference

JavaScript Utilities

The inline script exposes a small, namespaced API on window.Docs so you can drive the UI from the console or your own code.

Docs.go('#mfa')             // offset-aware scroll jump
Docs.search('phishing')     // open the palette prefilled
Docs.highlight('#headers') // force sidebar active state
Docs.progress()            // → 0.42  (42% read)

Live Console

Visitors Counter

A real, edge-counted hit counter. Every page view increments a Cloudflare KV counter through a Pages Function, so the number below is live — not saved in your browser and not generated with localStorage.

$ curl -s https://security-status.pages.dev/api/visitors
{ "count": 1042, "updated": "2026-10-08T00:00:00Z" }

Live Console

Terminal — /machine

A real command shell rooted at /terminal/machine. Type help to list commands. Several commands hit the live edge — the same latency probe, security headers, and /api/visitors Function this site already uses — so their output is real, not scripted.

Resources

Changelog

Release history for the template. Semantic versioning: patch for content fixes, minor for new sections and components, major for layout or config breaking changes.

Resources

Troubleshooting

The failures people actually hit, and the fix for each. Work top to bottom — the most common causes are listed first.

Resources

Frequently Asked Questions

Short answers to the questions that come up most often in issues and support threads.