Skip to main content

inlined-standalone.html

The inlined-standalone.html include file is an alternative to inlined-asset-links.html designed for "standalone" pages that need to be more self-contained.

Pathinclude/inlined-standalone.html
LanguageHTML/CSS
Lines347

Read this when Use this page when tracing the HTML/Pandoc templates and include fragments that shape rendered gwern.net pages around inlined-standalone.

Overview​

The inlined-standalone.html include file is an alternative to inlined-asset-links.html designed for "standalone" pages that need to be more self-contained. It inlines the color variable blocks but still loads head.css and style.css via <link> elements.

This approach is used for "standalone" pages that are rendered outside the main template/default.html page template — in the current codebase, the syntax-highlighted source-code pages generated via template/pandoc/sourcecode.html5, which includes it in its <head>.

The trade-off is increased HTML file size in exchange for more self-contained inline color variables, but it still relies on external CSS.

Content Structure​

Inline Critical Styles​

<style id="inlined-styles-colors">
  /* Full CSS custom property definitions - identical to inlined-head.html */
</style>

This section is identical to the first <style> block in inlined-head.html, containing:

  • Complete :root custom property definitions
  • All color tokens for light mode
  • Pattern/image variable references

External Critical Resources​

<link rel="stylesheet" href="/static/css/head.css?v=1766877006">

Like inlined-head.html, this variant loads head.css as an external versioned link. (Note that unlike inlined-head.html, it does not include the dark-mode color block, head.js, or the icon-sprite preload.)

<link rel="stylesheet" href="/static/css/style.css?v=1766877006">

Key Difference from inlined-asset-links.html:

  • No media="print" trick for async loading
  • Loaded synchronously, will block rendering
  • Ensures complete styling before page displays
  • Acceptable trade-off for standalone contexts where progressive loading is less critical

Standalone Context Implications​

The lack of performance optimizations (media query tricks, defer attributes) suggests this variant prioritizes:

  1. Completeness over speed
  2. Reliability over optimization
  3. Reliability over progressive enhancement (still requires CSS assets)

Integration​

Build Process​

This file is GENERATED: build/build_standalone_includes.php (run from the git pre-commit hook, build/pre-commit.hook.php) assembles it from css/light-mode-GENERATED.css plus versioned links to head.css and style.css. Do not edit it by hand.

It is not used by template/default.html (which uses inlined-head.html + inlined-asset-links.html); instead, it is included by the standalone Pandoc template for syntax-highlighted source-code pages, template/pandoc/sourcecode.html5:

<head>
  <!--#include virtual="/static/include/inlined-standalone.html" -->
</head>

The choice of variant is therefore fixed per template: regular pages use the default template's includes, while standalone (non-Hakyll-templated) pages use this one. The SSI directive is expanded by nginx's SSI module at serve time.

Use Cases​

Standalone Pages:

  • Syntax-highlighted source-code file pages (rendered via template/pandoc/sourcecode.html5)
  • Any page served outside the main site template that still needs the site's color variables and full stylesheet

Why This Bundling:

  • Standalone pages do not go through the main template's head/body include pair
  • A single include supplies colors + head.css + style.css, ensuring visual consistency

Performance Characteristics​

Advantages:

  • Guaranteed complete styling on first render
  • No FOUC (Flash of Unstyled Content)
  • CSS still loads via external <link> tags
  • Predictable rendering behavior

Disadvantages:

  • Larger HTML file size (CSS is not separately cacheable)
  • Slower initial download
  • Duplicated CSS across multiple standalone pages (no caching benefit)
  • Synchronous stylesheet loading blocks rendering

Comparison with Other Includes​

Include FileCSS LoadingUse CasePerformance Profile
inlined-head.htmlMinimal inline + externalNormal pagesOptimized for speed
inlined-asset-links.htmlDeferred externalNormal pagesProgressive enhancement
inlined-standalone.htmlInline colors + external head/styleStandalone pagesOptimized for portability
See Also