Skip to main content

footer.html

The footer.html include file defines the bottom-of-page footer that appears on every page of gwern.net.

Pathinclude/footer.html
LanguageHTML
Lines17
Sourceinclude/footer.html
at 406d3e423

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

Overview​

The footer.html include file defines the bottom-of-page footer that appears on every page of gwern.net. It combines a decorative return-to-top navigation divider with a collection of dynamic "X of the Day" widgets that showcase different aspects of the site's content. The footer serves both functional (navigation) and discovery (daily features) purposes.

The footer is structured into two main sections: a navigation bar with left/center/right controls using decorative arabesque SVG icons, and a content area containing an anonymous feedback link plus four dynamically-loaded daily features (Quote, Site, Annotation, and Adblock PSA). Each daily feature is loaded asynchronously via the site's transclusion system.

All dynamic content elements use the .include class, which triggers the transclusion system to fetch and inject content from separate HTML fragments. This allows the daily content to be updated without regenerating all pages.

Content Structure​

  • Left/Right SVGs: Purely decorative arabesque flourishes (a horizontal divider, based on the Wikimedia "Filet arabesque" ornament) from /static/img/ornament/sequential-nav-icons-arabesque.svg; hidden on mobile (max-width: 649px) by default.css
  • Center Control: "Return to top" anchor (#navigation-center) linking to #top with .link-page-not class to prevent it being treated as an internal page link
  • Uses SVG sprite technique with <use href> for efficient icon loading

Footer Content (#footer)​

Located within .markdownBody div for consistent styling:

Anonymous Feedback Link (#footer-anonymous-feedback):

  • Google Forms link for submitting anonymous feedback
  • Uses hair-space characters (&hairsp;) for typographic spacing around link text

X of the Day Section (#x-of-the-day):

  • Container with .dark-mode-invert class for theme compatibility
  • Contains three daily feature links:
    • Quote of the Day (#qotd): Links to /metadata/today-quote.html
    • Site of the Day (#sotd): Links to /metadata/today-site.html
    • Annotation of the Day (#atod): Links to /metadata/today-annotation.html
  • All use .include .include-spinner-not classes for async loading without spinner

Adblock PSA (#psa-adblock):

  • Conditional adblock-related message loaded from /metadata/psa-adblock.html
  • Uses .include .adsense .include-spinner-not classes

Integration​

Build Process​

The footer is included via Server-Side Includes (SSI) in the Hakyll-generated page templates. The SSI directive appears in the base page template:

<!--#include virtual="/static/include/footer.html" -->

This is processed by nginx's SSI module when pages are served, allowing the footer to be updated independently of the main site build process.

JavaScript Integration​

The footer interacts with several frontend systems:

Transclusion System (transclude.js):

  • Elements with .include class are processed by the transclusion module
  • Content is fetched from specified href URLs and injected into the link element
  • The .include-spinner-not class prevents loading spinners from appearing during content fetch

Reader Mode (reader-mode.js):

  • #navigation is among the elements hidden when reader mode is active
  • The left/right SVG ornaments are not populated by any JavaScript; they are static decoration (only #navigation-center is a link, to #top), styled and responsively hidden by default.css

Dark Mode (dark-mode.js):

  • The .dark-mode-invert class on #x-of-the-day triggers CSS filter inversion when dark mode is active
  • Ensures daily content remains readable across light/dark themes
See Also