annotation-blockquote-outside.tmpl

Path: template/include/annotation-blockquote-outside.tmpl | Language: HTML5/Pandoc | Lines: ~22

Template for rendering annotations with a blockquote element wrapping the entire annotation.

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 layout is generated by the Haskell build system (particularly Annotation.hs and LinkMetadata.hs) based on the annotation data structure and rendering context. 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 description ("a new" or "this") for accessibility
tabOrWindow	String	Text ("tab" or "window") for accessibility
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 Hakyll's conditional syntax:

• <[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, such as in annotation popups or dedicated reference sections.

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 blockquote inside 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/popin rendering
• extracts-annotations.js - Frontend annotation type handling
• Annotation.hs - Backend scraping and processing of annotation metadata
• LinkMetadata.hs - Backend metadata database management