annotation-blockquote-outside.tmpl

This template produces an annotation layout where the entire annotation content - including title, author/date, abstract, thumbnail, and file includes - is wrapped within a.

Pathtemplate/include/annotation-blockquote-outside.tmpl

LanguageHTML5/Pandoc

Lines23

Sourcetemplate/include/annotation-blockquote-outside.tmpl
at 406d3e423

Read this when Use this page when tracing the HTML/Pandoc templates and include fragments that shape rendered gwern.net pages around annotation-blockquote-outside.tmpl.

Overview

This template produces an annotation layout where the entire annotation content - including title, author/date, abstract, thumbnail, and file includes - is wrapped within a single <blockquote> element. This creates a visual and semantic treatment that emphasizes the annotation as a quotation or external reference distinct from the main page content.

The template is part of gwern.net's annotation system, which provides rich metadata and abstracts for external links. The "blockquote-outside" variant is used when the entire annotation should be presented as quoted or externally-sourced material, with the blockquote element providing both semantic markup and distinctive visual styling.

This template is not rendered by the Haskell build system. All template/include/*.tmpl files are bundled into js/transclude-templates-GENERATED.js by build/build_unified_assets.php, and filled at runtime in the browser by the JavaScript transclusion system (fillTemplate() in transclude.js). It is not the default annotation template (that is annotation-blockquote-inside); it is selected via a data-include-template="annotation-blockquote-outside" attribute on an include-link — for example, the "Annotation Of The Day" links generated by build/XOfTheDay.hs specify it. It's structurally identical to the "blockquote-not" variant except for the outermost container element.

Template Variables

Variable	Type	Description
annotationClassSuffix	String	Additional CSS class suffix for styling variants
title	HTML	The title text/content of the annotated link
titleLinkClass	String	CSS class(es) for the title link element
titleLinkHref	URL	The target URL for the title link
titleLinkDataAttributes	HTML	Custom data attributes for the link (e.g., data-popup-type)
whichTab	String	Text ("new" on desktop, "current" on mobile) for the link tooltip
tabOrWindow	String	Text ("window" on desktop, "tab" on mobile) for the link tooltip
linkTarget	String	HTML target attribute (_self, _blank, etc.)
authorDateAux	HTML	Combined author and date information
abstract	HTML	The abstract/summary content
thumbnailFigure	HTML	Thumbnail image wrapped in <figure> element
fileIncludes	HTML	Additional file/attachment information

Output Structure

The template generates a flat structure wrapped in a blockquote:

<blockquote class="annotation[suffix]">
  [optional thumbnail figure]

  <p class="data-field title">
    <a class="..." href="..." target="..." data-...>Title</a>
  </p>

  <!-- If authorDateAux exists: -->
  <p class="data-field author-date-aux">[author and date info]</p>

  <!-- If abstract exists: -->
  <div class="data-field annotation-abstract">[abstract content]</div>

  <!-- If fileIncludes exists: -->
  <div class="data-field file-includes">[file information]</div>
</blockquote>

Key structural features:

• Blockquote wraps everything: The outermost container is <blockquote> instead of <div>
• Flat inner hierarchy: All content elements (title, author/date, abstract, file-includes) are siblings
• Thumbnail placement: Appears as first child if present
• Separate paragraphs: Author/date information gets its own <p> element
• Annotation class on blockquote: The annotation class is applied to the blockquote itself

Conditional Logic

The template uses the conditional syntax of the JavaScript template system (implemented by fillTemplate() in transclude.js — not Hakyll):

• <[IF condition]>...<[IFEND]> - First-level conditional

Applied to:

1. Thumbnail figure: Rendered first if present
2. Author-date-aux: Gets dedicated paragraph if present
3. Abstract: Rendered in div if present
4. File includes: Rendered in div if present

All conditionals are independent - each field is checked and rendered separately.

Semantic Implications

Using a <blockquote> as the outermost wrapper has several implications:

• Semantic HTML: Indicates content is quoted or referenced from an external source
• Screen readers: Will announce this as quoted content to assistive technology users
• Default styling: Browsers apply default indentation/styling to blockquotes
• CSS targeting: Allows different styling via the blockquote.annotation selector

This makes the template appropriate for contexts where annotations should be visually and semantically distinguished as external references when transcluded into page body content (popups instead use the annotation-blockquote-not variant, since the pop-frame itself provides the container).

Comparison with Other Variants

• vs. blockquote-inside: Wraps entire annotation rather than just the abstract
• vs. blockquote-not: Identical structure except outer container is <blockquote> vs <div>
• vs. partial-inline: Includes all annotation fields rather than just title/author

See Also

• annotation-blockquote-inside.tmpl - Variant with abstract in a blockquote following the title paragraph
• pop-frame-title-standard.tmpl - Template for popup title bar
• popups.js - Frontend popup system that displays annotations
• extracts.js - Frontend coordinator for popup/popover rendering
• extracts-annotations.js - Frontend annotation type handling
• Annotation.hs - Backend scraping and processing of annotation metadata
• LinkMetadata.hs - Backend metadata database management