Component Library Test

This is where I'm checking to make sure the various components of the site work as expected. (Still very much a work in progress)

asdf

Article Start Section [x] 
-- article/
-- title: Article Section Romeo Lima
-- id: romeo_lima
-- class: example_alfa
-- template: example

Article start text



<article class="articleStartSection example_alfa" id="romeo_lima">

<div class="sectionTitle">
    Article Section Romeo Lima
</div>

<div class="sectionStartBlock">
    
    <p class="blockParagraph">Article start text</p>
    
</div>
Article End Section [x] 
-- /article
-- template: example

Post article output



</article>
<div class="sectionEndBlock">
    
    <p class="blockParagraph">Post article output</p>
    
</div>
Aside [x] 
-- aside
-- title: Aside Section Foxtrot Kilo
-- id: foxtrot_kilo
-- class: example_alfa
-- template: example

Charlie delta echo 



<div class="asideSection example_alfa" id="foxtrot_kilo">
  
  <div class="sectionTitle">Aside Section Foxtrot Kilo</div>
  
  <aside class="asideBlock flow">
    
    <p class="blockParagraph">Charlie delta echo </p>
    
  </aside>
</div>
Aside Section Foxtrot Kilo
Blockquote [x] 
-- blockquote
-- title: Blockquote Example Title
-- by: Alfa Bravo
-- source: Charlie Delta
-- url: https://example.com/
-- class: alfa
-- id: blockquoteExample
-- template: example

Sierra tango bravo



<div class="blockquoteSection alfa" id="blockquoteExample">
    
    <div class="sectionTitle">Blockquote Example Title</div>
    
    <blockquote class="blockquoteBlock">
      <p class="blockParagraph">Sierra tango bravo</p>
      
      <div class="blockquoteBy">-- 
         
        Alfa Bravo
  
        
         
        (<a href="https://example.com/">Charlie Delta
          </a>)
        
      </div>
      
    </blockquote>
  </div>
Blockquote Example Title

Sierra tango bravo

-- Alfa Bravo (Charlie Delta )
Bookmark [x] 
-- bookmark
-- title: Alfa Bravo
-- url: https://www.example.com/
-- template: example

Charlie delta echo

Foxtrot golf hotel



<div class="bookmarkSection">
    
    <div class="sectionTitle"><a href="https://www.example.com/">Alfa Bravo</a></div>
    
    <div class="bookmarkBlock">
      
      <p class="blockParagraph">Charlie delta echo</p><p class="blockParagraph">Foxtrot golf hotel</p>
      
    </div>
  </div>
Alfa Bravo

Charlie delta echo

Foxtrot golf hotel

Checklist [x] 
-- checklist
-- title: CHECKLIST TITLE
-- class: alfa
-- id: checklistExampleId
-- template: example

This is some prelude text

[] Checklist Item 1

[] Checklist Item 2



<div class="checklistSection alfa" id="checklistExampleId">

<div class="sectionTitle">
    CHECKLIST TITLE
</div>


<div class="checklistPrelude"><p class="blockParagraph">This is some prelude text</p></div>

<ul class="checklistBlock flow"><li class="checklistItem">
        <p class="blockParagraph">Checklist Item 1</p>
    </li><li class="checklistItem">
        <p class="blockParagraph">Checklist Item 2</p>
    </li></ul>
</div>
CHECKLIST TITLE

This is some prelude text

  • Checklist Item 1

  • Checklist Item 2

Code [x] 
-- code
-- boolean: javascript
-- title: This is a title for Code
-- class: alfa
-- id: codeExampleId
-- template: example
console.log("hello, world")


<div class="codeSection alfa" id="codeExampleId">
    
    <div class="sectionTitle">This is a title for Code</div>
    
    <pre class="codePreBlock">
      <code>
      console.log("hello, world")
      </code>
    </pre>
  </div>
This is a title for Code
      
      console.log("hello, world")
CSS [x] 
-- css
-- title: CSS Section
-- template: example
body { xcolor: goldenrod; }


<div class="cssSection">
    
    <div class="sectionTitle">CSS Section</div>
    
    <pre class="cssBlock">
      body { xcolor: goldenrod; }
    </pre>
  </div>
CSS Section
      body { xcolor: goldenrod; }
Div Start Section [x] 
-- div/
-- title: Div Start Section Romeo Lima
-- id: divStartExample
-- class: example_alfa
-- template: example

Div start text



<div class="divStartSection example_alfa" id="divStartExample">

<div class="sectionTitle">
    Div Start Section Romeo Lima
</div>


<div class="divStartBlock">
    <p class="blockParagraph">Div start text</p>
</div>
Div End Section [x] 
-- /div
-- template: example

Div end text



</div>

<div class="sectionEndBlock">
    <p class="blockParagraph">Div end text</p>
</div>
Footnote [x] 
-- footnote
-- id: alfa_footnote
-- template: example

This is a footnote



<div class="footnoteSection" id="alfa_footnote">
    
    <div class="footnoteBlock flow">
      
      <p class="blockParagraph">This is a footnote</p>
      
    </div>
  </div>

This is a footnote

H1 [x] 
-- h1
-- template: example

Alfa Bravo 

This is paragraph content



<hgroup class="h1Section">
    <h1 class="headline">Alfa Bravo </h1>
    
    <div class="sectionBody flow"><p class="blockParagraph">This is paragraph content</p></div>
    
  </hgroup>

Alfa Bravo

This is paragraph content

H2 [x] 
-- h2
-- template: example

Charlie Delta

This is paragraph content



<hgroup class="h2Section">
    <h2 class="headline">Charlie Delta</h2>
    
    <div class="sectionBody flow"><p class="blockParagraph">This is paragraph content</p></div>
    
  </hgroup>

Charlie Delta

This is paragraph content

H3 [x] 
-- h3
-- template: example

Echo Foxtrot

This is paragraph content



<hgroup class="h3Section">
    <h3 class="headline">Echo Foxtrot</h3>
    
    <div class="sectionBody flow"><p class="blockParagraph">This is paragraph content</p></div>
    
  </hgroup>

Echo Foxtrot

This is paragraph content

H4 [x] 
-- h4
-- template: example

Victor Hotel

This is paragraph content



<hgroup class="h4Section">
    <h4 class="headline">Victor Hotel</h4>
    
    <div class="sectionBody flow"><p class="blockParagraph">This is paragraph content</p></div>
    
  </hgroup>

Victor Hotel

This is paragraph content

H5 [x] 
-- h5
-- template: example

India Juliette 

This is paragraph content



<hgroup class="h5Section">
    <h5 class="headline">India Juliette </h5>
    
    <div class="sectionBody flow"><p class="blockParagraph">This is paragraph content</p></div>
    
  </hgroup>
India Juliette

This is paragraph content

H6 [x] 
-- h6
-- template: example

Kilo Lima 

This is paragraph content



<hgroup class="h6Section">
    <h6 class="headline">Kilo Lima </h6>
    
    <div class="sectionBody flow"><p class="blockParagraph">This is paragraph content</p></div>
    
  </hgroup>
Kilo Lima

This is paragraph content

hr [x] 
-- hr
-- template: example

hr section after line



<hr class="hrSection" />

<div class="hrBlock">
  <p class="blockParagraph">hr section after line</p>
</div>

hr section after line

html [x] 
-- html
-- title: This is a title for HTML
-- class: alfa
-- id: htmlExampleId
-- template: example
This is HTML


<div class="htmlSection alfa" id="htmlExampleId">
    
    <div class="sectionTitle">This is a title for HTML</div>
    
    <div class="htmlBlock">
      This is <strong>HTML</strong>
    </div>
  </div>
This is a title for HTML
This is HTML
image [x] 
-- image
-- hackers-frame-000010397-- template: example

Example alt text 



<div class="imageSection" />
<img src="/images/stills/hackers/images/hackers-frame-000010397.jpg"  alt="Example alt text "  />

</div>
Example alt text
list [x] 
-- list
-- title: LIST TITLE
-- class: alfa
-- id: listExampleId
-- template: example

This is some prelude text

- List Item 1

- List Item 2



<div class="listSection alfa" id="listExampleId">
    
    <div class="sectionTitle">
      LIST TITLE
    </div>
    
    
    <div class="listPrelude"><p class="blockParagraph">This is some prelude text</p></div>
    
    <ul class="listBlock flow"><li class="listItem">
          <p class="blockParagraph">List Item 1</p>
        </li><li class="listItem">
          <p class="blockParagraph">List Item 2</p>
        </li></ul>
  </div>
LIST TITLE

This is some prelude text

  • List Item 1

  • List Item 2

Note [x] 
-- note
-- title: NOTE SAMPLE TITLE
-- class: alfa
-- id: noteExampleId
-- template: example

This is a note



<div class="noteSection alfa" id="noteExampleId">

<div class="sectionTitle">NOTE SAMPLE TITLE</div>

<div class="noteBlock flow">
    
    <p class="blockParagraph">This is a note</p>
    
</div>
</div>
NOTE SAMPLE TITLE

This is a note

Notes [x] 
-- notes
-- title: NOTES TITLE
-- class: alfa
-- id: notesExampleId
-- template: example

This is some prelude text

- Note 1

- Note 2



<div class="notesSection alfa" id="notesExampleId">

<div class="sectionTitle">
    NOTES TITLE
</div>


<div class="notesPrelude"><p class="blockParagraph">This is some prelude text</p></div>

<ul class="notesBlock flow"><li class="notesItem">
        <p class="blockParagraph">Note 1</p>
    </li><li class="notesItem">
        <p class="blockParagraph">Note 2</p>
    </li></ul>
</div>
NOTES TITLE

This is some prelude text

  • Note 1

  • Note 2

Ordered List [x] 
-- olist
-- title: Orderd List Title
-- class: alfa
-- id: olistExampleId
-- template: example

This is some prelude text

- Note 1

- Note 2



<div class="oListSection alfa" id="olistExampleId">
    
    <div class="sectionTitle">
      Orderd List Title
    </div>
    
    
    <div class="oListPrelude"><p class="blockParagraph">This is some prelude text</p></div>
    
    <ul class="oListBlock flow"><li class="oListItem">
          <p class="blockParagraph">Note 1</p>
        </li><li class="oListItem">
          <p class="blockParagraph">Note 2</p>
        </li></ul>
  </div>
Orderd List Title

This is some prelude text

  • Note 1

  • Note 2

Paragraph [x] 
-- p
-- title: P SAMPLE TITLE
-- class: alfa
-- id: pExampleId
-- template: example

This is a paragraph section



<div class="pSection alfa" id="pExampleId">
    
    <div class="sectionTitle">P SAMPLE TITLE</div>
    
    <div class="pBlock flow">
      
      <p class="blockParagraph">This is a paragraph section</p>
      
    </div>
  </div>
P SAMPLE TITLE

This is a paragraph section

Pre [x] 
-- pre
-- title: This is a title for Pre
-- class: alfa
-- id: codeExampleId
-- template: example
This is some pre 
formatted text


<div class="preSection alfa" id="codeExampleId">
    
    <div class="sectionTitle">This is a title for Pre</div>
    
    <pre class="preBlock">This is some pre 
formatted text</pre>
  </div>
This is a title for Pre
This is some pre 
formatted text
Reference [x] 
-- ref
-- id: someid
-- class: someClass
-- title: Some Title
-- subtitle: - some subtitle
-- url: https://www.example.com
-- template: example

This is some ref data



<div class="refSection someClass" id="someid">
  
  <div>
    
    <a href="https://www.example.com">
      
    Some Title
    
    </a>
    
    
- some subtitle
    
  </div>
  
  <div class="refBlock flow">
    
    <p class="blockParagraph">This is some ref data</p>
    
  </div>
</div>
Some Title - some subtitle

This is some ref data

Results Start [x] 
-- results/
-- template: example
-- title: This is a title for Results
-- class: alfa
-- id: resultsStartExampleId
Results Content


<div class="resultsStartSection alfa" id="resultsStartExampleId">
    
    <div class="sectionTitle">
      This is a title for Results
    </div>
    
    
    <pre class="resultsStartBlock">
        Results Content
This is a title for Results 
        Results Content
Results End [x] 
-- /results
-- template: example


Results end stuff 



</pre></div>
<div class="sectionEndBlock">
    
    <p class="blockParagraph">Results end stuff </p>
    
</div>
Script [x] 
-- script
-- title: Script Section
-- template: example
console.log("here")


<div class="scriptSection">
    
    <div class="sectionTitle">Script Section</div>
    
    <pre class="scriptBlock">
      console.log("here")
    </pre>
  </div>
Script Section
      console.log("here")
SectionStart [x] 
-- section/
-- title: Example Section
-- template: example



<section class="sectionStartSection">
    
    <div class="sectionTitle">
      Example Section
    </div>
    
    <div class="sectionStartBlock">
        
    </div>
SectionEnd [x]

NOTE: This one is a hack example because sections are used in the page itself

Code
-- /section
-- template: example

This is post section content

Subtitle [x]

(maintained in page templates)

Title [x]

(maintained in page templates)

TLDR start/end [x] 
-- tldr/
-- template: example

This is some TLDR stuff

-- /tldr



<div class="tldrStartSection">


<div class="tldrStartBlock">
    <p class="blockParagraph">This is some TLDR stuff</p>
</div>




</div>

This is some TLDR stuff

TODO [x] 
-- todo
-- template: example

[] item 1

[x] item 2



<div class="todoSection">
    
    
    <ul class="todoBlock flow"><li class="todoItem">
          <input type="checkbox"/>
          <p class="blockParagraph">item 1</p>
        </li><li class="todoItem">
          <input type="checkbox" checked/>
          <p class="blockParagraph">item 2</p>
        </li></ul>
  </div>

  • item 1

  • item 2

Vimeo [x] 
-- vimeo
-- 495935333
-- template: example



<div class="vimeoSection" />

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe src="https://player.vimeo.com/video/495935333?title=0&byline=0&portrait=0" 
  style="position:absolute;top:0;left:0;width:100%;height:100%;" 
  frameborder="0" 
  allow="autoplay; fullscreen; picture-in-picture" 
  allowfullscreen></iframe></div>
</div>
Warning []
WARNING SAMPLE TITLE
-- warning
-- template: example

This is a warning section



<div class="warningSection">
    
    <div class="warningBlock flow">
      
      <p class="blockParagraph">This is a warning section</p>
      
    </div>
  </div>

This is a warning section

Warnings [] 
-- warnings
-- template: example

- warning 1

- warning 2



<div class="warningsSection">
    
    
    <ul class="warningsBlock flow"><li class="warningsItem">
          <p class="blockParagraph">warning 1</p>
        </li><li class="warningsItem">
          <p class="blockParagraph">warning 2</p>
        </li></ul>
  </div>

  • warning 1

  • warning 2

YouTube [x] 
-- youtube
-- _YUzQa_1RCE
-- template: example



<div class="youtubeSection">
    
  <iframe width="560" height="315" 
  src="https://www.youtube.com/embed/_YUzQa_1RCE" 
  title="YouTube Player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; 
  encrypted-media; gyroscope; picture-in-picture; web-share" 
  allowfullscreen></iframe>
  </div>

Metadata Sections

The sections don't have direct output on the page

Comment [x]

The comment section has no output

Attributes are metadata. They can be used on the site but don't correspond to any given output directly

Phase 2 Section

These are sections that will be done later