npm scripts and archetypes

This commit is contained in:
Heydon Pickering 2017-06-26 18:32:38 +01:00
parent 6d32112717
commit 357093d8b3
20 changed files with 42 additions and 436 deletions

7
content/_index.md Normal file
View File

@ -0,0 +1,7 @@
+++
date = "2017-06-26T18:27:58+01:00"
title = "The Name Of This Project/Site"
+++
This is your homepage. These are the contents of the `index.md` file, found in your `content` folder.

View File

@ -1,5 +0,0 @@
+++
title = "The Inclusive Pattern Library Builder"
+++
Some introductory text.

View File

@ -1,8 +0,0 @@
+++
title = "Collapsible region"
tags = ["animated", "forms"]
+++
<p>Nulla auctor eleifend turpis consequat pharetra: Cras molestie risus a enim convallis vitae luctus libero lacinia. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Nulla auctor eleifend turpis consequat pharetra. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id <kbd>CTRL</kbd> + <kbd>V</kbd> massa. Fusce ac sodales magna. </p>
<p>Nulla auctor eleifend turpis consequat pharetra: Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris). Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Vestibulum <code>text-align : justify</code> lacus. Donec et nisi dictum felis sollicitudin congue. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. </p>

View File

@ -1,8 +0,0 @@
+++
title = "Tab interface"
tags = ["animated", "typography"]
+++
<p>Vestibulum sit amet ipsum lacus&hellip; Nulla lobortis tempus commodo. Maecenas sit <q cite='http://www.heydonworks.com'>amet tellus nec mi gravida posuere</q> non pretium magna. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, <a href='#'>iaculis pretium</a> sem orci aliquet mauris. </p>
<p>Sed mauris arcu, aliquet ultrices malesuada sed, pretium id <kbd>CTRL</kbd> + <kbd>V</kbd> massa. Nulla lobortis tempus commodo. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Lorem ipsum dolor sit amet, &mdash; consectetur adipiscing &mdash; elit. Nulla lobortis tempus <strong>commodo</strong>. </p>

View File

@ -1,3 +0,0 @@
+++
title = "Landmarks"
+++

View File

@ -1,11 +0,0 @@
+++
title = "Page region navigation landmark"
+++
<p>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. <strong>Donec a congue leo. </strong></p>
{{% principles include="add value" %}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
{{% wcag include="1.1.1" %}}

View File

@ -1,49 +0,0 @@
+++
title = "Footer"
+++
<p>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. <strong>Donec a congue leo. </strong></p>
{{< codePen VpVNKW >}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
[Link to widgets example 1]({{< ref "patterns/widgets/example1.md" >}})
## Figure example
{{% figure caption="You are <em>wrong</em>." %}}
I LOVE FASCISM!?
{{% /figure %}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
{{% figure caption="This is good news." %}}
I HATE FASCISM!?
{{% /figure %}}
## Code block example
{{<codeBlock lang="css" numbered="true">}}
.expandable + .expandable {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid;
}
{{</codeBlock>}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
## External refs examples
### WCAG
{{% wcag include="1.1.1, 4.1.2, 1.3.1" descriptions="true" %}}
### Inclusive Design Principles
{{% principles include="add value, Be consistent" descriptions="true" %}}
{{% expandable level="2" label="Another expandable" %}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla.</p>
{{% /expandable %}}

View File

@ -0,0 +1,6 @@
+++
date = "2017-06-26T16:54:09+01:00"
title = "Pattern"
+++
Some content.

View File

@ -1,3 +0,0 @@
+++
title = "Widgets"
+++

View File

@ -1,9 +0,0 @@
+++
title = "Card"
+++
<p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Maecenas sit amet tellus &ndash; nec mi gravida posuere non pretium magna. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim&hellip; tristique tempus placerat at, posuere in lectus. Nulla lobortis tempus commodo. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. </p>
<p>Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Donec et nisi dictum felis sollicitudin congue. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Aliquam tincidunt velit sit amet ante hendrerit tempus. </p>
<p>Aliquam tincidunt velit sit (amet ante hendrerit tempus). Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Aliquam tincidunt velit sit amet ante hendrerit tempus. Curabitur consectetur faucibus nisl ac varius. Donec et nisi dictum felis, sollicitudin, congue Heydon&#8482;. Nulla auctor eleifend turpis consequat pharetra. Donec et nisi dictum <a href='#'>felis sollicitudin</a> congue. </p>

View File

@ -1,108 +0,0 @@
+++
title = "Menu button and menu"
tags = ["animated", "interactive"]
+++
<p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna {{% patternLink "Menu button and menu" %}}, id molestie magna risus ut nunc. Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.</p>
{{<demo>}}
<button aria-pressed="false">Press</button>
<style>
button {
background: blue;
color: white;
border: 0;
padding: 0.5rem 1rem;
text-transform: uppercase;
}
[aria-pressed="true"] {
box-shadow: inset 0 0 0.5rem #000;
}
</style>
<script>
var toggle = demo.querySelector('[aria-pressed]');
console.log(toggle);
toggle.addEventListener('click', (e) => {
let pressed = e.target.getAttribute('aria-pressed') === 'true';
e.target.setAttribute('aria-pressed', !pressed);
});
</script>
{{</demo>}}
{{<codeBlock lang="css" numbered="true">}}
.expandable + .expandable {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid;
}
.expandable + .expandable {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid;
}
{{</codeBlock>}}
```html
{{ .Inner }}
```
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p>
{{<demo caption="Example caption">}}
<p>You must be having a laugh.</p>
<style>
p {
color: red !important;
font-family: cursive;
}
</style>
<script>
demo.querySelector('p').addEventListener('click', function() {
alert('hello');
})
</script>
{{</demo>}}
<p>Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p>
{{<demo>}}
<p>Everyone must not be having a laugh.</p>
<style>
p {
color: blue !important;
font-family: cursive;
}
</style>
<script>
demo.querySelector('p').addEventListener('click', function() {
alert('fuck');
})
</script>
{{</demo>}}
{{% ticks %}}
* Something good
* Something else good
* Another great thing
{{% /ticks %}}
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna &hellip; </p>
{{% note %}}
Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique.
Purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna &hellip;
{{% /note %}}
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna &hellip; </p>
{{% warning %}}
Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique.
Purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna &hellip;
{{% /warning %}}

View File

@ -6,8 +6,9 @@
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "hugo server",
"clean": "rm -rf content && mkdir content && mkdir content/patterns && hugo new patterns/pattern.md && hugo new _index.md",
"build": "hugo",
"setup": "hugo && git add public && git commit -m 'Make git acknowledge public folder' && rm -rf content && mkdir content",
"setup": "hugo && git add public",
"publish": "hugo && git push origin `git subtree split --prefix public master`:gh-pages --force"
},
"repository": {

View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Hugo 0.22.1" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -11,7 +12,7 @@
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<title>
The Inclusive Pattern Library Builder | Inclusive Pattern Docs
Inclusive Pattern Docs | Inclusive Pattern Docs
</title>
</head>
@ -51,69 +52,6 @@
<nav class="patterns" role="navigation">
<ul>
<li class="pattern">
<a href="/patterns/example1/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Collapsible region</span>
</a>
</li>
</li>
<li class="pattern">
<a href="/patterns/example2/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Tab interface</span>
</a>
</li>
</li>
<li>
<h3>Landmarks</h3>
<ul>
<li class="pattern">
<a href="/patterns/landmarks/example2/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Footer</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/landmarks/example-one/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Page region navigation landmark</span>
</a>
</li>
</ul>
</li>
<li>
<h3>Widgets</h3>
<ul>
<li class="pattern">
<a href="/patterns/widgets/example1/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Card</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/widgets/example2/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Menu button and menu</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
@ -121,9 +59,14 @@
<div>
<main id="main">
<h1>The Inclusive Pattern Library Builder</h1>
<p>Some introductory text.</p>
<h1>
Inclusive Pattern Docs
</h1>
<ul class="patterns-list">
</ul>
</main>
<footer role="contentinfo">

View File

@ -10,71 +10,5 @@
<atom:link href="/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Card</title>
<link>/patterns/widgets/example1/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/widgets/example1/</guid>
<description>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Maecenas sit amet tellus &amp;ndash; nec mi gravida posuere non pretium magna. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim&amp;hellip; tristique tempus placerat at, posuere in lectus. Nulla lobortis tempus commodo. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Fusce ac sodales CSS magna. Maecenas sit amet tellus nec mi gravida posuere non pretium magna.</description>
</item>
<item>
<title>Collapsible region</title>
<link>/patterns/example1/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/example1/</guid>
<description>Nulla auctor eleifend turpis consequat pharetra: Cras molestie risus a enim convallis vitae luctus libero lacinia. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Nulla auctor eleifend turpis consequat pharetra. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id CTRL + V massa. Fusce ac sodales magna. Nulla auctor eleifend turpis consequat pharetra: Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris).</description>
</item>
<item>
<title>Footer</title>
<link>/patterns/landmarks/example2/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/landmarks/example2/</guid>
<description>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Donec a congue leo.
See the demo on codePen Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus.</description>
</item>
<item>
<title>Menu button and menu</title>
<link>/patterns/widgets/example2/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/widgets/example2/</guid>
<description>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna Menu button and menu , id molestie magna risus ut nunc. Fusce ac sodales CSS magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.
Press button { background: blue; color: white; border: 0; padding: 0.5rem 1rem; text-transform: uppercase; } [aria-pressed=&#34;</description>
</item>
<item>
<title>Page region navigation landmark</title>
<link>/patterns/landmarks/example-one/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/landmarks/example-one/</guid>
<description>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Donec a congue leo.
Add value: Consider the value of features and how they improve the experience for different users. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus.</description>
</item>
<item>
<title>Tab interface</title>
<link>/patterns/example2/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/example2/</guid>
<description>Vestibulum sit amet ipsum lacus&amp;hellip; Nulla lobortis tempus commodo. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id CTRL + V massa. Nulla lobortis tempus commodo. Nulla vel magna sit &amp;mdash; amet dui lobortis commodo &amp;mdash; vitae vel nulla. Lorem ipsum dolor sit amet, &amp;mdash; consectetur adipiscing &amp;mdash; elit.</description>
</item>
<item>
<title>The Inclusive Pattern Library Builder</title>
<link>/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/</guid>
<description>Some introductory text.</description>
</item>
</channel>
</rss>

View File

@ -2,80 +2,19 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>/tags/animated/</loc>
<priority>0</priority>
</url>
<url>
<loc>/patterns/widgets/example1/</loc>
</url>
<url>
<loc>/categories/</loc>
<priority>0</priority>
</url>
<url>
<loc>/patterns/example1/</loc>
</url>
<url>
<loc>/patterns/landmarks/example2/</loc>
</url>
<url>
<loc>/tags/forms/</loc>
<priority>0</priority>
</url>
<url>
<loc>/</loc>
<priority>0</priority>
</url>
<url>
<loc>/tags/interactive/</loc>
<priority>0</priority>
</url>
<url>
<loc>/patterns/landmarks/</loc>
</url>
<url>
<loc>/patterns/widgets/example2/</loc>
</url>
<url>
<loc>/patterns/landmarks/example-one/</loc>
</url>
<url>
<loc>/patterns/</loc>
<priority>0</priority>
</url>
<url>
<loc>/patterns/example2/</loc>
</url>
<url>
<loc>/tags/</loc>
<priority>0</priority>
</url>
<url>
<loc>/</loc>
</url>
<url>
<loc>/tags/typography/</loc>
<priority>0</priority>
</url>
<url>
<loc>/patterns/widgets/</loc>
</url>
</urlset>

View File

@ -10,41 +10,5 @@
<atom:link href="/tags/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Animated</title>
<link>/tags/animated/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/tags/animated/</guid>
<description></description>
</item>
<item>
<title>Forms</title>
<link>/tags/forms/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/tags/forms/</guid>
<description></description>
</item>
<item>
<title>Interactive</title>
<link>/tags/interactive/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/tags/interactive/</guid>
<description></description>
</item>
<item>
<title>Typography</title>
<link>/tags/typography/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/tags/typography/</guid>
<description></description>
</item>
</channel>
</rss>

@ -1 +0,0 @@
Subproject commit 8e02742b1ed2fcb5493f14966691e7d6c15e059e

View File

@ -1,2 +1,5 @@
+++
title = "The Name Of This Project/Site"
+++
This is your homepage. These are the contents of the `index.md` file, found in your `content` folder.

View File

@ -0,0 +1,4 @@
+++
title = "My First Documentation File"
tags = ["example tag", "another example tag"]
+++

View File

@ -0,0 +1,10 @@
{{ define "title" }}
{{ .Site.Title }}
{{ end }}
{{ define "main" }}
<main id="main">
<h1>{{ .Title }}</h1>
{{ .Content }}
</main>
{{ end }}