mkdemo

#!/usr/bin/env python

# https://developer.mozilla.org/en-US/docs/Web/HTML/Element
alltags = {
    'Content sectioning': {
        'headers': '''
            <h1>A long h1 that will overflow to the next line.</h1>
            {lorem}

            <h2>And a h2 header that will overflow too on smaller screens.</h2>
            {lorem}

            <h2>Header level 2</h2>
            {lorem}

            <h3>Header level 3</h3>
            {lorem}

            <h4>Header level 4</h4>
            {lorem}

            <h5>Header level 5</h5>
            {lorem}

            <h6>Header level 6</h6>
            {lorem}
        ''',

        'aside': '''
            <aside>Some text to the side, see aside.css.</aside>
        ''',
    },

    'Text content': {
        'blockquote': '''
            <blockquote cite="https://www.huxley.net/bnw/four.html">
                <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
                <p><cite>– Aldous Huxley, Brave New World</cite></p>
            </blockquote>
        ''',

        'dl': '''
            <p>Cryptids of Cornwall:</p>

            <dl>
                <dt>Beast of Bodmin</dt>
                <dd>A large feline inhabiting Bodmin Moor.</dd>

                <dt>Morgawr</dt>
                <dd>A sea serpent.</dd>

                <dt>Owlman</dt>
                <dd>A giant owl-like creature.</dd>
            </dl>
        ''',

        'figure': '''
            <figure>
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Vincent_van_Gogh_-_Head_of_a_skeleton_with_a_burning_cigarette_-_Google_Art_Project.jpg/579px-Vincent_van_Gogh_-_Head_of_a_skeleton_with_a_burning_cigarette_-_Google_Art_Project.jpg" alt="">
                <figcaption><em>Skull of a Skeleton with Burning Cigarette</em>, by Vincent van Gogh</figcaption>
            </figure>

            {lorem}

            <figure class="border">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Pieter_Bruegel_the_Elder_-_The_Tower_of_Babel_%28Vienna%29_-_Google_Art_Project.jpg/1024px-Pieter_Bruegel_the_Elder_-_The_Tower_of_Babel_%28Vienna%29_-_Google_Art_Project.jpg">
                <figcaption><em>The Tower of Babel</em>, by Pieter Bruegel the Elder</figcaption>
            </figure>

            {lorem}

            <figure class="full">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/The_Garden_of_Earthly_Delights_by_Bosch_High_Resolution.jpg/1280px-The_Garden_of_Earthly_Delights_by_Bosch_High_Resolution.jpg">
                <figcaption><em>The Garden of Earthly Delights</em>, by Hieronymus Bosch</figcaption>
            </figure>

            {lorem}

            <figure class="border full">
                <img
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Pieter_Breughel_2%2C_Drunkard_on_an_egg.jpg/1024px-Pieter_Breughel_2%2C_Drunkard_on_an_egg.jpg">
                <figcaption><em>Drunkard on an Egg</em>, by Pieter Brueghel the Younger</figcaption>
            </figure>
        ''',

        'hr': '<hr>',

        'pre': '''
        <pre>if foo:
    bar</pre>
<pre>
&lt;figure class="border full"&gt;
    &lt;img
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Pieter_Breughel_2%2C_Drunkard_on_an_egg.jpg/1024px-Pieter_Breughel_2%2C_Drunkard_on_an_egg.jpg"&gt;
    &lt;figcaption&gt;&lt;em&gt;Drunkard on an Egg&lt;/em&gt;, by Pieter Brueghel the Younger&lt;/figcaption&gt;
&lt;/figure&gt;
</pre>
        {lorem}
        <pre class="full">if foo:
    bar</pre>
<pre class="full">
&lt;figure class="border full"&gt;
    &lt;img
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Pieter_Breughel_2%2C_Drunkard_on_an_egg.jpg/1024px-Pieter_Breughel_2%2C_Drunkard_on_an_egg.jpg"&gt;
    &lt;figcaption&gt;&lt;em&gt;Drunkard on an Egg&lt;/em&gt;, by Pieter Brueghel the Younger&lt;/figcaption&gt;
&lt;/figure&gt;
</pre>

        ''',
    },

    'Inline text semantics': {
        'a': '''
            <p>You can reach Michael at:</p>
            <ul>
                <li><a href="https://example.com">Website</a></li>
                <li><a href="mailto:m.bluth@example.com">Email</a></li>
                <li><a href="tel:+123456789">Phone</a></li>
            </ul>
        ''',
        'abbr': '''
            <p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to
            style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>
        ''',
        'kbd': '''
            <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.</p>
        ''',
        'code': '''
          <p>The <a href="#"><code>push()</code></a> method adds one or more elements to the end
            of an array and returns the new length of the array</p>
          <p>There are exceptions, of course; if you’ve got a lot of <code>if cond {{ q
          += "more sql" }}</code> then adding SQL mocks to verify the correctness of
          that logic might be a good idea.</p>
          <p>I was trying to boot my computer, but I got this hilarious message:</p>
          <p><samp>Keyboard not found <br>Press F1 to continue</samp></p>
          <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.</p>
        ''',
        'mark': '''
            <p>Search results for "salamander":</p>
            <p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>
            <p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other small creatures.</p>
        ''',
        'q': '''
            <p>When Dave asks HAL to open the pod bay door, HAL answers: <q
            cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm
            sorry, Dave. I'm afraid I can't do that.</q></p>
        ''',
        'samp': '''
            <p>I was trying to boot my computer, but I got this hilarious message:</p>
            <p><samp>Keyboard not found <br>Press F1 to continue</samp></p>
        ''',
        'small': '''
            <p>MDN Web Docs is a learning platform for Web technologies and the software that powers the Web.</p>
            <p><small>The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.</small></p>
        ''',
        'sub,sup': '''
            <p>Almost every developer's favorite molecule is
            C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, also known as “caffeine”. It’s a programmer’s job to convert caffeine to code.
            The <b>Pythagorean theorem</b> is often expressed as the following equation: <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></p>
        ''',
        'time': '''
            <p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>
            <p>The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for at least <time datetime="PT2H30M">2h 30m</time>.</p>
        ''',
        'var': '''
            <p>The volume of a box is <var>l</var> × <var>w</var> ×
            <var>h</var>, where <var>l</var> represents the length, <var>w</var>
            the width and <var>h</var> the height of the box.</p>
        ''',
    },

    'Image and multimedia': {
        # audio
        # video
    },

    'Embedded content':  {
        'iframe': '''
            <iframe id="inlineFrameExample"
                title="Inline Frame Example"
                width="300"
                height="200"
                src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
            </iframe>
        ''',
    },
    'Scripting': {
        # noscript
    },

    'Demarcating edits': {
        'del': '''
            <p>There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.</p>
        '''
    },

    'Table content': {
        'table': '''
            <p>Simple table with header</p>
            <table>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                </tr>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>Jane</td>
                    <td>Doe</td>
                </tr>
            </table>

            <p>Table with thead, tfoot, and tbody</p>
            <table>
                <thead>
                    <tr>
                        <th>Items</th>
                        <th scope="col">Expenditure</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">Donuts</th>
                        <td>3,000</td>
                    </tr>
                    <tr>
                        <th scope="row">Stationary</th>
                        <td>18,000</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th scope="row">Totals</th>
                        <td>21,000</td>
                    </tr>
                </tfoot>
            </table>

            <p>Table with colgroup</p>
            <table>
                <colgroup span="4"></colgroup>
                <tr>
                    <th>Countries</th>
                    <th>Capitals</th>
                    <th>Population</th>
                    <th>Language</th>
                </tr>
                <tr>
                    <td>USA</td>
                    <td>Washington, D.C.</td>
                    <td>309 million</td>
                    <td>English</td>
                </tr>
                <tr>
                    <td>Sweden</td>
                    <td>Stockholm</td>
                    <td>9 million</td>
                    <td>Swedish</td>
                </tr>
            </table>

            <p>Table with colgroup and col</p>
            <table>
                <colgroup>
                    <col style="background-color: #0f0">
                    <col span="2">
                </colgroup>
                <tr>
                    <th>Lime</th>
                    <th>Lemon</th>
                    <th>Orange</th>
                </tr>
                <tr>
                    <td>Green</td>
                    <td>Yellow</td>
                    <td>Orange</td>
                </tr>
            </table>

            <p>Simple table with caption</p>
            <table>
                <caption>Awesome caption</caption>
                <tr>
                    <td>Awesome data</td>
                </tr>
                <tr>
                    <td>Awesome data</td>
                </tr>
                <tr>
                    <td>Awesome data</td>
                </tr>
            </table>

            <p>Aligned table</p>
            <table>
                <tr>
                    <th class="left">First name</th>
                    <th class="left">Last name</th>
                    <th class="right">Amount</th>
                </tr>
                <tr>
                    <td class="left">John</td>
                    <td class="left">Doe</td>
                    <td class="right">€531.34</td>
                </tr>
                <tr>
                    <td class="left">Jane</td>
                    <td class="left">Doe</td>
                    <td class="right">€111.08</td>
                </tr>
            </table>

            <p>Full-width table</p>
            <table class="full">
                <tr>
                    <th class="left">First name</th>
                    <th class="left">Last name</th>
                    <th class="right">Amount</th>
                </tr>
                <tr>
                    <td class="left">John</td>
                    <td class="left">Doe</td>
                    <td class="right">€531.34</td>
                </tr>
                <tr>
                    <td class="left">Jane</td>
                    <td class="left">Doe</td>
                    <td class="right">€111.08</td>
                </tr>
            </table>
        ''',
    },

    'Forms': {
        'button links': '''
          Hello, <a href="#">world</a>!
          Hello, <button class="link">world</button>!
          Hello, <span class="link">world</span>!
          Hello, <div class="link">world</div>!
          Hello, <form><button class="link">world</button></form>!
        ''',

        'form': '''
          <form class="vertical">
            <label for="text1">Text field</label>
            <input type="text" id="text1">

            <label for="search1">Search field</label>
            <input type="search" id="search1">

            <label for="tel1">Tel field</label>
            <input type="tel" id="tel1">

            <label for="url1">URL field</label>
            <input type="url" id="url1">

            <label for="email1">Email field</label>
            <input type="email" id="email1">

            <label for="password1">Password field</label>
            <input type="password" id="password1">

            <label for="date1">Date field</label>
            <input type="date" id="date1">

            <label for="month1">Month field</label>
            <input type="month" id="month1">

            <label for="week1">Week field</label>
            <input type="week" id="week1">

            <label for="time1">Time field</label>
            <input type="time" id="time1">

            <label for="datetime-local1">Datetime-local field</label>
            <input type="datetime-local" id="datetime-local1">

            <label for="number1">Number field</label>
            <input type="number" id="number1">

            <label for="range1">Range field</label>
            <input type="range" id="range1">

            <label for="color1">Color field</label>
            <input type="color" id="color1">

            <label for="file1">File field</label>
            <input type="file" id="file1">

            <label for="image1">Image field</label>
            <input type="image" id="image1">

            <label for="textarea1">Textarea</label>
            <textarea id="textarea1"></textarea>

            <label><input type="checkbox"> Checkbox</label>
            <label><input type="checkbox"> Another</label>

            <strong>Question?</strong>
            <label><input type="radio" name="radio" value="x"> Use this one</label>
            <label><input type="radio" name="radio" value="y"> Or this one</label>
            <label><input type="radio" name="radio" value="z"> idk, maybe this?</label>

            <label for="select1">Select</label>
            <select id="select1">
              <option>w00t</option>
              <option>foobar</option>
              <optgroup label="Optgroup">
                <option>Grouped 1</option>
                <option>Grouped 2</option>
              </optgroup>
            </select>

            <fieldset>
              <legend>I am legend</legend>

              <label for="text2">Text field</label>
              <input type="text" id="text2">

              <label for="text3">Text field</label>
              <input type="text" id="text3">
            </fieldset>

            <fieldset>
              <legend>Inline</legend>

              <div>
                <label for="text4">Text field</label>
                <input type="text" id="text4">
              </div>

              <div>
                <label for="text5">Text field</label>
                <input type="text" id="text5">
              </div>
            </fieldset>

            <input type="submit">
          </form>

          {lorem}

          <form class="horizontal">
            <label for="htext1">Text field</label>
            <div><input type="text" id="htext1"></div>

            <label for="hsearch1">A longer label with more text</label>
            <div><input type="number" id="hsearch1"></div>

            <label for="hsearch1">Search field</label>
            <div><input type="search" id="hsearch1">
            <span>Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me! Help me!</span></div>

            <label for="cbox1">Checkertycheck</label>
            <div><input type="checkbox" id="cbox1">
            <span>Help me!</span></div>

            <label for="cbox2">Checkertycheck</label>
            <div><input type="checkbox" id="cbox2"></div>

            <input type="submit">
          </form>

          {lorem}


          <form>
            <input placeholder="input and button same height"><button>Go!</button><input type="submit">
            <br><br>
            <input type="number" placeholder="input and button same height"><button>Go!</button><input type="submit">
          </form>
        ''',
    },

    'Interactive elements': {
        'details': '''
            <!--
            <style>
                details[open] {{ border-bottom: 1px solid #b7b7b7; }}
            </style>
            -->

            <details>
                <summary>Expand paragraph</summary>
                <p>The HTML Details Element (&lt;details>) creates a disclosure
                widget in which information is visible only when the widget is
                toggled into an "open" state. A summary or label can be provided
                using the &lt;summary> element.</p>

                <p>A disclosure widget is typically presented onscreen using a
                small triangle which rotates (or twists) to indicate open/closed
                status, with a label next to the triangle. If the first child of
                the &lt;details> element is a &lt;summary>, the contents of the
                &lt;summary> element are used as the label for the disclosure
                widget.</p>
            </details>
        '''
    },

}

lorem = '''<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
            sunt in culpa qui officia deserunt mollit anim id est
            laborum.</p>'''

tpl = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{tag} demo</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="canonical" href="TODO">
    <style>
      @font-face {{
        font-family: 'Libre Baskerville';
        font-style: normal;
        font-weight: 400;
        font-display: fallback;
        src: url(/hello-css/fonts/libre-baskerville.woff2) format('woff2');
      }}
      @font-face {{
        font-family: 'Libre Baskerville';
        font-style: normal;
        font-weight: 700;
        font-display: fallback;
        src: url(/hello-css/fonts/libre-baskerville-bold.woff2) format('woff2');
      }}
      @font-face {{
        font-family: 'Libre Baskerville';
        font-style: italic;
        font-weight: 400;
        font-display: fallback;
        src: url(/hello-css/fonts/libre-baskerville-italic.woff2) format('woff2');
      }}
    </style>

    <link rel="stylesheet" href="../base.css">
	<link rel="stylesheet" href="../aside.css">
	<link rel="stylesheet" href="../blockquote.css">
	<link rel="stylesheet" href="../permalink.css">
	<link rel="stylesheet" href="../postscript.css">
	<link rel="stylesheet" href="../form.css">
</head>

<body>
    <nav class="center">
        <a href="README.html">README</a> |
        <a href="README-fancy.html">Fancier README</a> |
        <a href="index.html">Full demo</a> |
        <a href="http://github.com/arp242/hello-css">GitHub</a>
    </nav>

    <article class="page">
        <label style="float: right"
          title="Makes it easier to see how it fits in normal content">Show paragraphs of text
          <input type="checkbox" checked="checked" id="lorem-toggle">
        </label>
        <h1>{tag} demo</h1>

        {lorem}
        {example}
        {lorem}
    </article>

    <script>
      window.addEventListener('load', function() {{
        document.getElementById('lorem-toggle').addEventListener('change', function(e) {{
          var p = document.getElementsByClassName('lorem');
          for (var i=0; i<p.length; i++) {{
            p[i].style.display = this.checked ? 'block' : 'none';
          }}

        }}, false);
      }}, false);
    </script>
</body>
</html>
'''

index = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Element demos</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="canonical" href="TODO">
    <link rel="stylesheet" href="../base.css">
</head>

<body>
    <nav class="center">
        <a href="README.html">README</a> |
        <a href="README-fancy.html">Fancier README</a> |
        <a href="index.html">Full demo</a> |
        <a href="http://github.com/arp242/hello-css">GitHub</a>
    </nav>

    <article class="page">
        <h1>Element demos</h1>

        <p>This lists the most commonly used elements. Not all of them are
        styled by Hello, CSS; some are just here to check how they look in
        various browsers.</p>

        <p>List taken from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">
            https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a></p>

        {}
    </article>
</body>
</html>
'''

l = ''
for section, tags in alltags.items():
    if len(tags) > 0:
        l += '<h2>{}</h2><ul>'.format(section)
    for tag, example in tags.items():
        with open('./demo/{}.html'.format(tag), 'w') as fp:
            fp.write(tpl.format(tag=tag,
                                example=example.format(lorem=lorem),
                                lorem=lorem))
            l += '<li><a href="{tag}.html">{tag}</a></li>'.format(tag=tag)
    l += '</ul>'


with open('./demo/index.html', 'w') as fp:
    fp.write(index.format(l))