Taking the meta to a new level.

21 files changed, 1817 insertions, 0 deletions

diff --git a/site/Makefile b/site/Makefile
new file mode 100644
index 0000000..c7ff8a8
--- /dev/null
+++ b/site/Makefile
@@ -0,0 +1,22 @@
+# Makefile for Smart Documents.
+
+.PHONY: all content styles
+
+all: content styles
+
+content: publish.el
+	@echo "Publishing site's content (html and site media)."
+	emacs --batch --load publish.el --eval="(org-publish \"content\")"
+
+styles: publish.el
+	@echo "Publishing site's assets (css, js, img, fonts etc.)."
+	emacs --batch --load publish.el --eval="(org-publish \"assets\")"
+
+css: publish.el
+	@echo "Publishing site's css stylesheets."
+	emacs --batch --load publish.el --eval="(org-publish \"css\")"
+
+clean:
+	@echo "Cleaning up.."
+	@rm -rvf *.elc
+	@rm -rvf ~/.org-timestamps/*
diff --git a/site/about.org b/site/about.org
new file mode 100644
index 0000000..57b1d9c
--- /dev/null
+++ b/site/about.org
@@ -0,0 +1,42 @@
+# -*- mode: org; -*-
+
+#+TITLE: About
+#+AUTHOR: Marius Peter
+#+DATE: <2021-02-13 Sat>
+
+#+INCLUDE: page-header.html export html
+
+#+begin_export html
+<div class="usa-section">
+  <div class="grid-container">
+    <div class="grid-row grid-gap">
+      <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
+#+end_export
+
+* Contact
+
+Contact me at [[https://t.me/Blendoit][t.me/Blendoit]] or at [[mailto:smart-documents@tuta.io][smart-documents@tuta.io]].
+
+* Sources
+
+** Home
+
+- PDF icon: [[https://commons.wikimedia.org/wiki/File:PDF_file_icon.svg][commons.wikimedia.org]]
+- PowerPoint icon: [[https://www.pngwing.com/en/free-png-zfutu/download][www.pngwing.com]]
+- HTML icon: Icon made from [[http://www.onlinewebfonts.com/icon][Icon Fonts]] is licensed by CC BY 3.0
+
+** The Original Paper
+
+External materials used are referred throughout the paper as
+footnotes.
+
+** I am...
+
+** About
+
+#+begin_export html
+      </main>
+    </div>
+  </div>
+</div>
+#+end_export
diff --git a/site/assets/.gitignore b/site/assets/.gitignore
new file mode 100644
index 0000000..9e593a0
--- /dev/null
+++ b/site/assets/.gitignore
@@ -0,0 +1,3 @@
+# .gitignore for Smart Documents assets
+
+uswds*
\ No newline at end of file
diff --git a/site/assets/images/PDF-icon.png b/site/assets/images/PDF-icon.png
new file mode 100644
index 0000000..71433b2
--- /dev/null
+++ b/site/assets/images/PDF-icon.png
diff --git a/site/assets/images/PowerPoint-icon.png b/site/assets/images/PowerPoint-icon.png
new file mode 100644
index 0000000..01d5b3e
--- /dev/null
+++ b/site/assets/images/PowerPoint-icon.png
diff --git a/site/assets/images/html-icon.png b/site/assets/images/html-icon.png
new file mode 100644
index 0000000..663667a
--- /dev/null
+++ b/site/assets/images/html-icon.png
diff --git a/site/assets/images/space.jpg b/site/assets/images/space.jpg
new file mode 100644
index 0000000..250baf5
--- /dev/null
+++ b/site/assets/images/space.jpg
diff --git a/site/assets/stylesheets/sd.css b/site/assets/stylesheets/sd.css
new file mode 100644
index 0000000..4289a10
--- /dev/null
+++ b/site/assets/stylesheets/sd.css
@@ -0,0 +1,22 @@
+#sd-intro-card{
+  font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  font-size:1.06rem;
+  line-height:1.5;
+  padding-bottom:2rem;
+  padding-top:2rem;
+  background-image:url("/assets/images/space.jpg");
+  background-position:center;
+  background-size:cover;
+  color:white;
+}
+
+/* .sd-header{ */
+/*     position:sticky; */
+/*     top:0; */
+/*     z-index:10; */
+/*     background-color: white; */
+/* } */
+
+/* .sd-sidenav{ */
+/*     position:fixed; */
+/* } */
diff --git a/site/index-old.org b/site/index-old.org
new file mode 100644
index 0000000..18e0c0f
--- /dev/null
+++ b/site/index-old.org
@@ -0,0 +1,133 @@
+# -*- mode: org; -*-
+
+#+TITLE: Smart Documents
+#+AUTHOR: Marius Peter
+#+DATE: <2021-02-09 Tue>
+#+EMAIL: smart-documents@tuta.io
+#+OPTIONS: toc:nil html-style:nil num:nil title:nil
+
+#+INCLUDE: page-header.html export html
+
+#+begin_export html
+<section id="sd-intro-card" aria-label="Introduction">
+  <div class="grid-container">
+    <div class="usa-hero__callout">
+      <h1 class="usa-hero__heading">
+        <span class="usa-hero__heading--alt">Emacs</span> but
+	accessible & beautiful.
+      </h1>
+      <p>
+	Smart Documents is a document production system created to
+	raise mainstream awareness of
+	the <a href="https://www.gnu.org/software/emacs/">Emacs</a>
+	software on which it is based.
+      </p>
+      <a class="usa-button" href="https://github.com/Blendoit/.emacs.d">Try it now!</a>
+    </div>
+  </div>
+</section>
+#+end_export
+
+#+begin_export html
+<div class="usa-section">
+  <div class="grid-container">
+    <div class="grid-row grid-gap">
+      <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
+#+end_export
+
+# #+begin_alert-success
+# Finally online thank God :pray:
+# #+end_alert-success
+
+* Perfect documents every time.
+:PROPERTIES:
+:CUSTOM_ID: perfect-document
+:END:
+
+Focus on your content and let the powerful export engine work out the
+appearance, for flawless results every time.
+
+* Maximum productivity.
+:PROPERTIES:
+:CUSTOM_ID: easy-document
+:END:
+
+Collect feedback and create new document versions through an efficient
+wizard.
+
+* Everything linked together.
+:PROPERTIES:
+:CUSTOM_ID: linked-document
+:END:
+
+Create links between files to keep track of dates, people, tags, and
+compile them into neatly filtered agendas---perfect for sharing a
+project status or roadmap!
+
+* COMMENT A single authoritative document.
+:PROPERTIES:
+:CUSTOM_ID: single-document
+:END:
+
+#+NAME: pdf-icon
+#+ATTR_HTML: :height 100px
+#+ATTR_LATEX: :height 100px
+[[file:assets/images/PDF-icon.png]]
+
+#+NAME: powerpoint-icon
+#+ATTR_HTML: :height 100px
+#+ATTR_LATEX: :height 100px
+[[file:assets/images/PowerPoint-icon.png]]
+
+#+NAME: html-icon
+#+ATTR_HTML: :height 100px
+#+ATTR_LATEX: :height 100px
+[[file:assets/images/html-icon.png]]
+
+Each document can be declined into a report, a presentation
+summarizing the document's outline, or a website page that can be
+added to your wiki.
+
+* COMMENT Program your documents.
+:PROPERTIES:
+:CUSTOM_ID: single-document
+:END:
+
+Program your documents in your favorite language. Python, C++, Go,
+Clojure, you name it---you can develop interactive features from
+within the document itself.
+
+* Download
+
+You can download the current development snapshot on GitHub.
+
+#+begin_export html
+<a class="usa-button" href="https://github.com/Blendoit/.emacs.d">Github</a>
+#+end_export
+
+# #+begin_button
+# [[https://github.com/Blendoit/.emacs.d][Download]]
+# #+end_button
+
+* Support this project
+
+#+begin_export html
+<a class="usa-button" href="https://venmo.com/blendoit">Venmo</a>
+#+end_export
+
+# #+begin_button
+# [[https://venmo.com/blendoit][Venmo]]
+# #+end_button
+
+* Contact
+
+For all inquiries, please send an e-mail to [[mailto:smart-documents@tuta.io][smart-documents@tuta.io]].
+
+# Dirty! :P
+#+begin_export html
+</div>
+</main>
+</div>
+</div>
+</div>
+#+end_export
diff --git a/site/index.html b/site/index.html
new file mode 100644
index 0000000..c66bdca
--- /dev/null
+++ b/site/index.html
@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<!-- 2021-09-29 Wed 19:37 -->
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Smart Documents</title>
+<meta name="generator" content="Org mode" />
+<meta name="author" content="Marius Peter" />
+<script type="text/javascript">
+// @license magnet:?xt=urn:btih:e95b018ef3580986a04669f1b5879592219e2a7a&dn=public-domain.txt Public Domain
+<!--/*--><![CDATA[/*><!--*/
+     function CodeHighlightOn(elem, id)
+     {
+       var target = document.getElementById(id);
+       if(null != target) {
+         elem.classList.add("code-highlighted");
+         target.classList.add("code-highlighted");
+       }
+     }
+     function CodeHighlightOff(elem, id)
+     {
+       var target = document.getElementById(id);
+       if(null != target) {
+         elem.classList.remove("code-highlighted");
+         target.classList.remove("code-highlighted");
+       }
+     }
+    /*]]>*///-->
+// @license-end
+</script>
+</head>
+<body>
+<div id="content">
+<section class="usa-banner" aria-label="Accessible website">
+  <div class="usa-accordion">
+
+    <header class="usa-banner__header">
+      <div class="usa-banner__inner">
+        <div class="grid-col-auto">
+          <img class="usa-banner__header-flag" src="assets/uswds-2.10.1/img/us_flag_small.png" alt="U.S. flag">
+        </div>
+        <div class="grid-col-fill tablet:grid-col-auto">
+          <p class="usa-banner__header-text">Proudly designed with the U.S. Web Design System.</p>
+          <p class="usa-banner__header-action" aria-hidden="true">Here&#39;s how you know</p>
+        </div>
+        <button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
+          <span class="usa-banner__button-text">Here&#39;s how you know</span>
+        </button>
+      </div>
+    </header>
+
+    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
+      <div class="grid-row grid-gap-lg">
+	<div class="usa-banner__guidance tablet:grid-col-6">
+	  <img class="usa-banner__icon usa-media-block__img" src="assets/uswds-2.10.1/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
+	  <div class="usa-media-block__body">
+            <p>
+              <strong>Design for democracy</strong>
+              <br/>
+              The <a href="https://designsystem.digital.gov/">U.S. Web Design System</a> emphasizes universal accessibility.
+            </p>
+	  </div>
+	</div>
+	<div class="usa-banner__guidance tablet:grid-col-6">
+	  <img class="usa-banner__icon usa-media-block__img" src="assets/uswds-2.10.1/img/icon-https.svg" role="img" alt="" aria-hidden="true">
+	  <div class="usa-media-block__body">
+            <p>
+              <strong>Secure .gov websites use HTTPS</strong>
+	      <br/>
+              This website will soon feature identical protection features!
+	    </p>
+	  </div>
+	</div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<header class="usa-header usa-header--extended sd-header">
+  <div class="usa-navbar">
+    <div class="usa-logo" id="extended-logo">
+      <em class="usa-logo__text"><a href="index.html" title="Home" aria-label="Home">Smart Documents</a></em>
+    </div>
+    <button class="usa-menu-btn">Menu</button>
+  </div>
+
+  <nav aria-label="Primary navigation" class="usa-nav">
+    <div class="usa-nav__inner">
+
+      <button class="usa-nav__close">
+	<img src="assets/img/usa-icons/close.svg" role="img" alt="close">
+      </button>
+
+      <ul class="usa-nav__primary usa-accordion">
+
+	<li class="usa-nav__primary-item">
+	  <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two">
+	    <span>Features</span>
+	  </button>
+	  <ul id="extended-nav-section-two" class="usa-nav__submenu">
+	    <li class="usa-nav__submenu-item"><a href="#" class=""> wan</a></li>
+	    <li class="usa-nav__submenu-item"><a href="#" class=""> tu</a></li>
+	    <li class="usa-nav__submenu-item"><a href="#" class=""> mute</a></li>
+	  </ul>
+	</li>
+	
+	<li class="usa-nav__primary-item">
+	  <a class="usa-nav__link" href="original-paper.html"><span>The original paper</span></a>
+	</li>
+	
+	<li class="usa-nav__primary-item">
+	  <a class="usa-nav__link" href="jobs.html"><span>I am...</span></a>
+	</li>
+
+	<li class="usa-nav__primary-item">
+	  <a class="usa-nav__link" href="about.html"><span>About</span></a>
+	</li>
+
+      </ul>
+
+      <div class="usa-nav__secondary">
+	<ul class="usa-nav__secondary-links">
+	  <li class="usa-nav__secondary-item"><a href="">Contact</a></li>
+	  <li class="usa-nav__secondary-item"><a href="">Contribute</a></li>
+	</ul>
+
+	<form class="usa-search usa-search--small " role="search">
+	  <label class="usa-sr-only" for="extended-search-field-small">Search small</label>
+	  <input class="usa-input" id="extended-search-field-small" type="search" name="search">
+	  <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
+	</form>
+      </div>
+    </div>
+  </nav>
+</header>
+
+<section id="sd-intro-card" aria-label="Introduction">
+  <div class="grid-container">
+    <div class="usa-hero__callout">
+      <h1 class="usa-hero__heading">
+        <span class="usa-hero__heading--alt">Emacs</span> but
+	accessible & beautiful.
+      </h1>
+      <p>
+	Smart Documents is a document production system created to
+	raise mainstream awareness of
+	the <a href="https://www.gnu.org/software/emacs/">Emacs</a>
+	software on which it is based.
+      </p>
+      <a class="usa-button" href="https://github.com/Blendoit/.emacs.d">Try it now!</a>
+    </div>
+  </div>
+</section>
+
+<div class="usa-section">
+  <div class="grid-container">
+    <div class="grid-row grid-gap">
+      <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
+
+<p>
+The self-publishing publishing tool
+</p>
+
+<ul class="org-ul">
+<li>This website is a <code>Smart Document</code> comprised of different <code>Smart Documents</code>.</li>
+</ul>
+
+<div id="outline-container-perfect-document" class="outline-2">
+<h2 id="perfect-document">Perfect documents every time.</h2>
+<div class="outline-text-2" id="text-perfect-document">
+<p>
+Focus on your content and let the powerful export engine work out the
+appearance, for flawless results every time.
+</p>
+</div>
+</div>
+
+<div id="outline-container-easy-document" class="outline-2">
+<h2 id="easy-document">Maximum productivity.</h2>
+<div class="outline-text-2" id="text-easy-document">
+<p>
+Collect feedback and create new document versions through an efficient
+wizard.
+</p>
+</div>
+</div>
+
+<div id="outline-container-linked-document" class="outline-2">
+<h2 id="linked-document">Everything linked together.</h2>
+<div class="outline-text-2" id="text-linked-document">
+<p>
+Create links between files to keep track of dates, people, tags, and
+compile them into neatly filtered agendas&#x2014;perfect for sharing a
+project status or roadmap!
+</p>
+</div>
+</div>
+
+<div id="outline-container-orgbd48720" class="outline-2">
+<h2 id="orgbd48720">Download</h2>
+<div class="outline-text-2" id="text-orgbd48720">
+<p>
+You can download the current development snapshot on GitHub.
+</p>
+
+<a class="usa-button" href="https://github.com/Blendoit/.emacs.d">Github</a>
+</div>
+</div>
+
+<div id="outline-container-org563d56b" class="outline-2">
+<h2 id="org563d56b">Support this project</h2>
+<div class="outline-text-2" id="text-org563d56b">
+<a class="usa-button" href="https://venmo.com/blendoit">Venmo</a>
+</div>
+</div>
+
+<div id="outline-container-org5edb15d" class="outline-2">
+<h2 id="org5edb15d">Contact</h2>
+<div class="outline-text-2" id="text-org5edb15d">
+<p>
+For all inquiries, please send an e-mail to <a href="mailto:smart-documents@tuta.io">smart-documents@tuta.io</a>.
+</p>
+
+</div>
+</main>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+<div id="postamble" class="status">
+<p class="date">Date: 2021-02-09 Tue 00:00</p>
+<p class="author">Author: Marius Peter</p>
+<p class="date">Created: 2021-09-29 Wed 19:37</p>
+<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
+</div>
+</body>
+</html>
diff --git a/site/index.org b/site/index.org
new file mode 100644
index 0000000..34c53b0
--- /dev/null
+++ b/site/index.org
@@ -0,0 +1,141 @@
+# -*- mode: org; -*-
+
+#+TITLE: Smart Documents
+#+AUTHOR: Marius Peter
+#+DATE: <2021-02-09 Tue>
+#+EMAIL: smart-documents@tuta.io
+#+OPTIONS: toc:nil html-style:nil num:nil title:nil
+#+MACRO: SD  =Smart Document=
+#+MACRO: SDs =Smart Documents=
+
+#+SETUPFILE: /home/blendux/.emacs.d/resources/templates/documents/gnu-default.setup
+#+INCLUDE: page-header.html export html
+
+#+begin_export html
+<section id="sd-intro-card" aria-label="Introduction">
+  <div class="grid-container">
+    <div class="usa-hero__callout">
+      <h1 class="usa-hero__heading">
+        <span class="usa-hero__heading--alt">Emacs</span> but
+	accessible & beautiful.
+      </h1>
+      <p>
+	Smart Documents is a document production system created to
+	raise mainstream awareness of
+	the <a href="https://www.gnu.org/software/emacs/">Emacs</a>
+	software on which it is based.
+      </p>
+      <a class="usa-button" href="https://github.com/Blendoit/.emacs.d">Try it now!</a>
+    </div>
+  </div>
+</section>
+#+end_export
+
+#+begin_export html
+<div class="usa-section">
+  <div class="grid-container">
+    <div class="grid-row grid-gap">
+      <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
+#+end_export
+
+The self-publishing publishing tool
+
+As in, this website is a {{{SD}}} that exists just as comfortably as
+HTML (what you are most likely viewing now) as PDF.
+
+- This website is a {{{SD}}} comprised of different {{{SDs}}}.
+
+- This is 
+
+* Perfect documents every time.
+:PROPERTIES:
+:CUSTOM_ID: perfect-document
+:END:
+
+Focus on your content and let the powerful export engine work out the
+appearance, for flawless results every time.
+
+* Maximum productivity.
+:PROPERTIES:
+:CUSTOM_ID: easy-document
+:END:
+
+Collect feedback and create new document versions through an efficient
+wizard.
+
+* Everything linked together.
+:PROPERTIES:
+:CUSTOM_ID: linked-document
+:END:
+
+Create links between files to keep track of dates, people, tags, and
+compile them into neatly filtered agendas---perfect for sharing a
+project status or roadmap!
+
+* COMMENT A single authoritative document.
+:PROPERTIES:
+:CUSTOM_ID: single-document
+:END:
+
+#+NAME: pdf-icon
+#+ATTR_HTML: :height 100px
+#+ATTR_LATEX: :height 100px
+[[file:assets/images/PDF-icon.png]]
+
+#+NAME: powerpoint-icon
+#+ATTR_HTML: :height 100px
+#+ATTR_LATEX: :height 100px
+[[file:assets/images/PowerPoint-icon.png]]
+
+#+NAME: html-icon
+#+ATTR_HTML: :height 100px
+#+ATTR_LATEX: :height 100px
+[[file:assets/images/html-icon.png]]
+
+Each document can be declined into a report, a presentation
+summarizing the document's outline, or a website page that can be
+added to your wiki.
+
+* COMMENT Program your documents.
+:PROPERTIES:
+:CUSTOM_ID: single-document
+:END:
+
+Program your documents in your favorite language. Python, C++, Go,
+Clojure, you name it---you can develop interactive features from
+within the document itself.
+
+* Download
+
+You can download the current development snapshot on GitHub.
+
+#+begin_export html
+<a class="usa-button" href="https://github.com/Blendoit/.emacs.d">Github</a>
+#+end_export
+
+# #+begin_button
+# [[https://github.com/Blendoit/.emacs.d][Download]]
+# #+end_button
+
+* Support this project
+
+#+begin_export html
+<a class="usa-button" href="https://venmo.com/blendoit">Venmo</a>
+#+end_export
+
+# #+begin_button
+# [[https://venmo.com/blendoit][Venmo]]
+# #+end_button
+
+* Contact
+
+For all inquiries, please send an e-mail to [[mailto:smart-documents@tuta.io][smart-documents@tuta.io]].
+
+# Dirty! :P
+#+begin_export html
+</div>
+</main>
+</div>
+</div>
+</div>
+#+end_export
diff --git a/site/index.pdf b/site/index.pdf
new file mode 100644
index 0000000..9d57a82
--- /dev/null
+++ b/site/index.pdf
diff --git a/site/jobs.org b/site/jobs.org
new file mode 100644
index 0000000..5e97365
--- /dev/null
+++ b/site/jobs.org
@@ -0,0 +1,121 @@
+# -*- mode: org; -*-
+
+#+TITLE: My job is...
+#+AUTHOR: Marius Peter
+#+DATE: <2021-02-09 Tue>
+
+#+INCLUDE: page-header.html export html
+
+#+begin_export html
+<div class="usa-section">
+  <div class="grid-container">
+    <div class="grid-row grid-gap">
+      <div class="usa-layout-docs__sidenav desktop:grid-col-3">
+        <nav aria-label="Secondary navigation">
+	  <ul class="usa-sidenav sd-sidenav">
+	    <li class="usa-sidenav__item">
+	      <a href="">Parent link</a>
+	    </li><li class="usa-sidenav__item">
+	      <a href="" class="usa-current">Current page
+	      </a><ul class="usa-sidenav__sublist">
+		<li class="usa-sidenav__item">
+		  <a href="">Child link</a>
+		</li><li class="usa-sidenav__item">
+		  <a href="" class="usa-current">Child link</a><ul class="usa-sidenav__sublist">
+		    <li class="usa-sidenav__item">
+		      <a href="">Grandchild link</a>
+		    </li><li class="usa-sidenav__item">
+		      <a href="">Grandchild link</a>
+		    </li><li class="usa-sidenav__item">
+		      <a href="" class="usa-current">Grandchild link</a>
+		    </li><li class="usa-sidenav__item">
+		      <a href="">Grandchild link</a>
+		    </li>
+		  </ul>
+		</li><li class="usa-sidenav__item">
+		  <a href="">Child link</a>
+		</li><li class="usa-sidenav__item">
+		  <a href="">Child link</a>
+		</li><li class="usa-sidenav__item">
+		  <a href="">Child link</a>
+		</li>
+	      </ul>
+	    </li><li class="usa-sidenav__item">
+	      <a href="">Parent link</a>
+	    </li>
+	  </ul>
+	</nav>
+
+      </div>
+
+      <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
+#+end_export
+
+* Educators & Academics
+
+** Teacher
+
+*** Kindergarten
+
+*** Middle School
+
+*** High School
+
+** Student
+
+*** Middle and High School
+
+*** College
+
+**** MLA
+**** APA
+
+** Professor
+
+*** Syllabus
+
+*** Homework assignment
+
+** Researchers
+
+*** Thesis
+
+* Businesspersons
+
+** Reports
+
+* Legal
+
+** Lawyer
+
+** Judge
+
+** Stenographer
+
+* Technicians
+
+** Engineer
+
+** Product Line Manager
+
+* Managers & Executives
+
+** CEO
+
+** Board Member
+
+** Manager
+
+* Artists
+
+** Painter
+
+** Screenwriter
+
+#+begin_export html
+      </main>
+    </div>
+  </div>
+</div>
+#+end_export
+
diff --git a/site/original-paper.org b/site/original-paper.org
new file mode 100644
index 0000000..2e46f69
--- /dev/null
+++ b/site/original-paper.org
@@ -0,0 +1,64 @@
+# -*- mode: org; -*-
+
+#+TITLE: The Original Paper
+#+AUTHOR: Marius Peter
+#+DATE: <2021-03-01 Mon>
+#+EMAIL: smart-documents@tuta.io
+
+#+INCLUDE: page-header.html export html
+
+#+begin_export html
+<div class="usa-section">
+  <div class="grid-container">
+    <div class="grid-row grid-gap">
+      <div class="usa-layout-docs__sidenav desktop:grid-col-3">
+        <nav aria-label="Secondary navigation">
+	  <ul class="usa-sidenav sd-sidenav">
+	    <li class="usa-sidenav__item">
+	      <a href="">Parent link</a>
+	    </li><li class="usa-sidenav__item">
+	      <a href="" class="usa-current">Current page
+	      </a><ul class="usa-sidenav__sublist">
+		<li class="usa-sidenav__item">
+		  <a href="">Child link</a>
+		</li><li class="usa-sidenav__item">
+		  <a href="" class="usa-current">Child link</a><ul class="usa-sidenav__sublist">
+		    <li class="usa-sidenav__item">
+		      <a href="">Grandchild link</a>
+		    </li><li class="usa-sidenav__item">
+		      <a href="">Grandchild link</a>
+		    </li><li class="usa-sidenav__item">
+		      <a href="" class="usa-current">Grandchild link</a>
+		    </li><li class="usa-sidenav__item">
+		      <a href="">Grandchild link</a>
+		    </li>
+		  </ul>
+		</li><li class="usa-sidenav__item">
+		  <a href="">Child link</a>
+		</li><li class="usa-sidenav__item">
+		  <a href="">Child link</a>
+		</li><li class="usa-sidenav__item">
+		  <a href="">Child link</a>
+		</li>
+	      </ul>
+	    </li><li class="usa-sidenav__item">
+	      <a href="">Parent link</a>
+	    </li>
+	  </ul>
+	</nav>
+
+      </div>
+
+      <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
+#+end_export
+
+* My Configuration for Emacs
+
+#+INCLUDE: ~/.emacs.d/smart-documents.org
+
+#+begin_export html
+      </main>
+    </div>
+  </div>
+</div>
+#+end_export
diff --git a/site/ox-html-uswds-components.el b/site/ox-html-uswds-components.el
new file mode 100644
index 0000000..08e9684
--- /dev/null
+++ b/site/ox-html-uswds-components.el
@@ -0,0 +1,148 @@
+;;; ox-html-uswds-components.el --- Transcription functions for all USWDS components,  -*- lexical-binding: t; -*-
+;; Copyright (C) 2021  Marius Peter
+
+;; Author: Marius Peter (rot13 "?znevhf.crgre@ghgnabgn.pbz")
+;; Created: March 2021
+;; Package-Version: 0.1
+;; Keywords: org export publish html
+;; Homepage: http://www.smart-documents.org
+
+;; This file is not part of GNU Emacs.
+
+;;; License:
+;; This program is free software; you can redistribute it and/or modify
+;; it under the terms of the GNU General Public License as published by
+;; the Free Software Foundation, either version 3 of the License, or
+;; (at your option) any later version.
+;;
+;; This program is distributed in the hope that it will be useful,
+;; but WITHOUT ANY WARRANTY; without even the implied warranty of
+;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+;; GNU General Public License for more details.
+;;
+;; You should have received a copy of the GNU General Public License
+;; along with this file.  If not, see <http://www.gnu.org/licenses/>.
+;;; Commentary:
+
+;; These are all the components made available by the USDWS.
+
+;;; Code:
+
+(defun uswds-component-accordion (contents)
+  (format "<script>%s</script>" contents))
+
+(defun uswds-component-alert-info (contents)
+  (format "<div class=\"usa-alert usa-alert--info\" >
+    <div class=\"usa-alert__body\">
+        <h3 class=\"usa-alert__heading\">Informative status</h3>
+        <p class=\"usa-alert__text\">%s</p>
+    </div>
+</div>" contents))
+
+(defun uswds-component-alert-warning (contents)
+  (format "<div class=\"usa-alert usa-alert--warning\" >
+    <div class=\"usa-alert__body\">
+        <h3 class=\"usa-alert__heading\">Warning status</h3>
+        <p class=\"usa-alert__text\">%s</p>
+    </div>
+</div>" contents))
+
+(defun uswds-component-alert-error (contents)
+  (format "<div class=\"usa-alert usa-alert--error\" >
+    <div class=\"usa-alert__body\">
+        <h3 class=\"usa-alert__heading\">Error status</h3>
+        <p class=\"usa-alert__text\">%s</p>
+    </div>
+</div>" contents))
+
+(defun uswds-component-alert-success (contents)
+  (format "<div class=\"usa-alert usa-alert--success\" >
+    <div class=\"usa-alert__body\">
+        <h3 class=\"usa-alert__heading\">Success status</h3>
+        <p class=\"usa-alert__text\">%s</p>
+    </div>
+</div>" contents))
+
+(defun uswds-component-alert-slim (contents)
+  (format "<div class=\"usa-alert usa-alert--slim\" >
+    <div class=\"usa-alert__body\">
+        <p class=\"usa-alert__text\">%s</p>
+    </div>
+</div>" contents))
+
+(defun uswds-component-alert-no-icon (contents)
+  (format "<div class=\"usa-alert usa-alert--no-icon\" >
+    <div class=\"usa-alert__body\">
+        <p class=\"usa-alert__text\">%s</p>
+    </div>
+</div>" contents))
+
+(defun uswds-component-banner (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-breadcrumb (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-button (contents)
+        ;; <a class=\"usa-button\" href=\"https://github.com/Blendoit/.emacs.d\">%s</a>
+  (format "<a class=\"usa-button\">%s</a>" contents))
+
+(defun uswds-component-button-group (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-card (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-collection (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-footer (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+;; TODO form controls and templates
+(defun uswds-component-grid (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-header (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+;; TODO icons
+
+(defun uswds-component-identifier (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-process (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-search (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-side (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-site (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-step (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-summary (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+;; TODO table?
+
+(defun uswds-component-tag (contents)
+  (format "<span class=\"usa-tag\">%s</span>" contents))
+
+(defun uswds-component-tooltip (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-tooltip (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(defun uswds-component-tooltip (contents)
+  (format "<style type=\"text/css\">%s</style>" contents))
+
+(provide 'ox-html-uswds-components)
+;;; ox-html-uswds-components.el ends here
+
diff --git a/site/ox-html-uswds.el b/site/ox-html-uswds.el
new file mode 100644
index 0000000..6efe322
--- /dev/null
+++ b/site/ox-html-uswds.el
@@ -0,0 +1,672 @@
+;;; ox-slimhtml.el --- an HTML org export backend for the USWDS -*- lexical-binding: t; -*-
+;; Copyright (C) 2021  Marius Peter
+
+;; Author: Marius Peter (rot13 "?znevhf.crgre@ghgnabgn.pbz")
+;; Created: March 2021
+;; Package-Version: 0.1
+;; Keywords: org export publish html
+;; Homepage: http://www.smart-documents.org
+
+;; This file is not part of GNU Emacs.
+
+;;; License:
+;; This program is free software; you can redistribute it and/or modify
+;; it under the terms of the GNU General Public License as published by
+;; the Free Software Foundation, either version 3 of the License, or
+;; (at your option) any later version.
+;;
+;; This program is distributed in the hope that it will be useful,
+;; but WITHOUT ANY WARRANTY; without even the implied warranty of
+;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+;; GNU General Public License for more details.
+;;
+;; You should have received a copy of the GNU General Public License
+;; along with this file.  If not, see <http://www.gnu.org/licenses/>.
+
+;;; Commentary:
+;; html-uswds is an Org mode export backend derived from the
+;; `ox-slimhtml' backend.  It is intended to produce HTML compatible
+;; with the USWDS (https://designsystem.digital.gov/).  A key feature
+;; of resulting web pages is their accessibility---the USWDS initially
+;; caters to American federal agencies wishing to adopt a common
+;; design language intelligible for all cultures and levels of
+;; computer literacy.
+
+;;; Code:
+(require 'ox-html)
+(require 'cl-lib)
+
+;; formatting
+;; #+BEGIN_EXAMPLE
+;;   ,*bold*                                     # <strong>bold</strong>
+;;   /italic/                                   # <em>italic</em>
+;;   =verbatim=                                 # <kbd>verbatim</kbd>
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-bold (bold contents info)
+  "Transcode BOLD from Org to HTML.
+
+CONTENTS is the text with bold markup.
+INFO is a plist holding contextual information."
+  (when contents (format "<strong>%s</strong>" contents)))
+
+(defun ox-html-uswds-italic (italic contents info)
+  "Transcode ITALIC from Org to HTML.
+
+CONTENTS is the text with italic markup.
+INFO is a plist holding contextual information."
+  (when contents (format "<em>%s</em>" contents)))
+
+(defun ox-html-uswds-verbatim (verbatim contents info)
+  "Transcode VERBATIM string from Org to HTML.
+
+CONTENTS is nil.
+INFO is a plist holding contextual information."
+  (let ((contents (org-html-encode-plain-text
+                   (org-element-property :value verbatim))))
+    (when contents (format "<kbd>%s</kbd>" contents))))
+
+;; headlines
+;; #+BEGIN_EXAMPLE
+;;   ,* headline text                            # <section class="container">
+;;     :PROPERTIES:                             # <h1 class="headline">headline text</h1>
+;;     :attr_html: :class headline              # </section>
+;;     :html_container: section
+;;     :html_container_class: container
+;;     :END:
+
+;;   ,#+OPTIONS: H:[headline level]
+;;   ,#+HTML_CONTAINER: [default container]
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-headline (headline contents info)
+  "Transcode HEADLINE from Org to HTML.
+
+CONTENTS is the section as defined under the HEADLINE.
+INFO is a plist holding contextual information."
+  (let* ((text (org-export-data (org-element-property :title headline) info))
+         (level (org-export-get-relative-level headline info))
+         (attributes (org-element-property :ATTR_HTML headline))
+         (container (org-element-property :HTML_CONTAINER headline))
+         (container-class (and container (org-element-property :HTML_CONTAINER_CLASS headline))))
+    (when attributes
+      (setq attributes
+            (format " %s" (org-html--make-attribute-string
+                           (org-export-read-attribute 'attr_html `(nil
+                                                                   (attr_html ,(split-string attributes))))))))
+    (concat
+     (when (and container (not (string= "" container)))
+       (format "<%s%s>" container (if container-class (format " class=\"%s\"" container-class) "")))
+     (if (not (org-export-low-level-p headline info))
+         (format "<h%d%s>%s</h%d>%s" level (or attributes "") text level (or contents ""))
+       (concat
+        (when (org-export-first-sibling-p headline info) "<ul>")
+        (format "<li>%s%s</li>" text (or contents ""))
+        (when (org-export-last-sibling-p headline info) "</ul>")))
+     (when (and container (not (string= "" container)))
+       (format "</%s>" (cl-subseq container 0 (cl-search " " container)))))))
+
+;; sections
+
+(defun ox-html-uswds-section (section contents info)
+  "Transcode a SECTION element from Org to HTML.
+
+CONTENTS is the contents of the section.
+INFO is a plist holding contextual information.
+
+Sections are child elements of org headlines;
+'container' settings are found in slim-headlines."
+  contents)
+
+;; links
+;; #+BEGIN_EXAMPLE
+;;   ,#+attr_html: :class link                   # <a href="link" class="link">content</a>
+;;   [[link][content]]
+
+;;   ,#+OPTIONS: html-link-org-files-as-html:[t/nil] || org-html-link-org-files-as-html
+;;   ,#+HTML_EXTENSION: [html] || org-html-extension
+
+;;   ,#+OPTIONS: html-link-use-abs-url:[t/nil] || org-html-link-use-abs-url
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-link (link contents info)
+  "Transcode LINK from Org to HTML.
+
+CONTENTS is the text of the link.
+INFO is a plist holding contextual information."
+  (if (ox-html-uswds--immediate-child-of-p link 'link) (org-element-property :raw-link link)
+    (if (not contents) (format "<em>%s</em>" (org-element-property :path link))
+      (let ((link-type (org-element-property :type link))
+            (href (org-element-property :raw-link link))
+            (attributes (if (ox-html-uswds--immediate-child-of-p link 'paragraph)
+                            (ox-html-uswds--attr (org-export-get-parent link))
+                          ""))
+            (element "<a href=\"%s\"%s>%s</a>"))
+        (cond ((string= "file" link-type)
+               (let ((html-extension (or (plist-get info :html-extension) ""))
+                     (use-abs-url (plist-get info :html-link-use-abs-url))
+                     (link-org-files-as-html (plist-get info :html-link-org-as-html))
+                     (path (or (org-element-property :path link) "")))
+                 (format element
+                         (concat (if (and use-abs-url (file-name-absolute-p path)) "file:" "")
+                                 (if (and link-org-files-as-html (string= "org" (downcase (or (file-name-extension path) ""))))
+                                     (if (and html-extension (not (string= "" html-extension)))
+                                         (concat (file-name-sans-extension path) "." html-extension)
+                                       (file-name-sans-extension path))
+                                   path))
+                         attributes contents)))
+              (t
+               (format element href attributes contents)))))))
+
+;; plain lists
+;; #+BEGIN_EXAMPLE
+;;   ,#+attr_html: :class this                   # <ul class="this">
+;;   - item 1                                   # <li>item 1</li>
+;;   - item 2                                   # <li>item 2</li>
+;;                                              # </ul>
+
+;;   + item 1                                   # <ol><li>item 1</li></ol>
+;;   - definition :: list                       # <dl><dt>definition</dt><dd>list</dd></dl>
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-plain-list (plain-list contents info)
+  "Transcode a PLAIN-LIST string from Org to HTML.
+
+CONTENTS is the contents of the list element.
+INFO is a plist holding contextual information."
+  (when contents
+    (let ((type (cl-case (org-element-property :type plain-list)
+                  (ordered "ol")
+                  (unordered "ul")
+                  (descriptive "dl"))))
+      (format "<%s%s>%s</%s>" type (ox-html-uswds--attr plain-list) contents type))))
+
+;; paragraphs
+;; #+BEGIN_EXAMPLE
+;;   ,#+attr_html: :class this                   # <p class="this">content</p>
+;;   content
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-paragraph (paragraph contents info)
+  "Transcode a PARAGRAPH element from Org to HTML.
+
+CONTENTS is the contents of the paragraph.
+INFO is a plist holding contextual information."
+  (when contents
+    (if (or (ox-html-uswds--immediate-child-of-p paragraph 'item)
+            (ox-html-uswds--immediate-child-of-p paragraph 'special-block))
+        contents
+      (if (ox-html-uswds--has-immediate-child-of-p paragraph 'link)
+          (format "<p>%s</p>" contents)
+        (format "<p%s>%s</p>" (ox-html-uswds--attr paragraph) contents)))))
+
+;; examples
+;; #+BEGIN_EXAMPLE
+;;   ,#+BEGIN_EXAMPLE                            # content
+;;   content
+;;   ,#+END_EXAMPLE
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-example-block (example-block contents info)
+  "Transcode an EXAMPLE-BLOCK element from Org to HTML.
+
+CONTENTS is nil.  INFO is a plist holding contextual information."
+  (let ((code (org-html-format-code example-block info)))
+    (when code
+      (format "<pre><code class=\"%s\">%s</code></pre>"
+              (or (org-element-property :language example-block) "example")
+              code))))
+
+;; raw html
+;; #+BEGIN_EXAMPLE
+;;   ,#+BEGIN_EXPORT html                        # <span>export block</span>
+;;     <span>export block</span>
+;;   ,#+END_EXPORT
+
+;;   ,#+BEGIN_EXPORT javascript                  # <script>console.log()</script>
+;;     console.log()
+;;   ,#+END_EXPORT
+
+;;   ,#+BEGIN_EXPORT css                         # <style type="text/css">span{}</style>
+;;     span {}
+;;   ,#+END_EXPORT
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-export-block (export-block contents info)
+  "Transcode an EXPORT-BLOCK element from Org to HTML.
+CONTENTS is nil.  INFO is a plist holding contextual information."
+  (let ((contents (org-element-property :value export-block))
+        (language (org-element-property :type export-block)))
+    (when contents
+      (cond ((string= "JAVASCRIPT" language)
+             (format "<script>%s</script>" contents))
+	    ((string= "CSS" language)
+	     (format "<style type=\"text/css\">%s</style>" contents))
+	    (t
+	     (org-remove-indentation contents))))))
+
+;; snippet
+;; #+BEGIN_EXAMPLE
+;;   @@html:<span>snippet</span>@@              # <span>snippet</span>
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-export-snippet (export-snippet contents info)
+  "Transcode a EXPORT-SNIPPET object from Org to HTML.
+
+CONTENTS is nil.  INFO is a plist holding contextual information."
+  (let ((contents (org-element-property :value export-snippet)))
+    (when contents contents)))
+
+;; special block
+;; #+BEGIN_EXAMPLE
+;;   ,#+attr_html: :type text/css                # <style type="text/css">
+;;   ,#+BEGIN_STYLE                              # p { font-weight:500; }
+;;     p { font-weight:500; }                   # </style>
+;;   ,#+END_STYLE
+;; #+END_EXAMPLE
+
+(load-file "./ox-html-uswds-components.el")
+
+(defun ox-html-uswds-special-block (special-block contents info)
+  "Transcode SPECIAL-BLOCK from Org to HTML.
+
+CONTENTS is the text within the #+BEGIN_ and #+END_ markers.
+INFO is a plist holding contextual information."
+  (when contents
+    (let ((block-type (downcase (org-element-property :type special-block))))
+      (cond ((string= "accordion" block-type)(uswds-component-accordion contents))
+            ((string= "alert-info" block-type) (uswds-component-alert-info contents))
+            ((string= "alert-warning" block-type) (uswds-component-alert-warning contents))
+            ((string= "alert-error" block-type) (uswds-component-alert-error contents))
+            ((string= "alert-success" block-type) (uswds-component-alert-success contents))
+            ((string= "alert-slim" block-type) (uswds-component-alert-slim contents))
+            ((string= "alert-no-icon" block-type) (uswds-component-alert-no-icon contents))
+	    ((string= "banner" block-type) (uswds-component-banner contents))
+	    ((string= "breadcrumb" block-type) (uswds-component-breadcrumb contents))
+	    ((string= "button" block-type) (uswds-component-button contents))
+	    ((string= "button-group" block-type) (uswds-component-button-group contents))
+	    ((string= "card" block-type) (uswds-component-card contents))
+	    ((string= "collection" block-type) (uswds-component-collection contents))
+	    ((string= "footer" block-type) (uswds-component-footer contents))
+	    ;; TODO form controls and templates
+	    ((string= "grid" block-type) (uswds-component-grid contents))
+	    ((string= "header" block-type) (uswds-component-header contents))
+	    ;; TODO icons
+	    ((string= "identifier" block-type) (uswds-component-identifier contents))
+	    ((string= "process-list" block-type) (uswds-component-process contents))
+	    ((string= "search" block-type) (uswds-component-search contents))
+	    ((string= "side-navigation" block-type) (uswds-component-side contents))
+	    ((string= "site-alert" block-type) (uswds-component-site-alert contents))
+	    ((string= "step-indicator" block-type) (uswds-component-step-indicator contents))
+	    ((string= "summary-box" block-type) (uswds-component-summary-box contents))
+	    ;; TODO table?
+	    ((string= "tag" block-type) (uswds-component-tag contents))
+	    ((string= "tooltip" block-type) (uswds-component-tooltip contents))
+            (t (format "<div>\n%s No suitable special block found. \n</div>" contents))))))
+
+;; source code
+;; #+BEGIN_EXAMPLE
+;;   ,#+BEGIN_SRC javascript                     # <pre>
+;;     code                                     # <code class="javascript">code</code>
+;;   ,#+END_SRC                                  # </pre>
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-src-block (src-block contents info)
+  "Transcode SRC-BLOCK from Org to HTML.
+
+CONTENTS is the text of a #+BEGIN_SRC...#+END_SRC block.
+INFO is a plist holding contextual information."
+  (let ((code (org-html-format-code src-block info))
+        (language (org-element-property :language src-block)))
+    (when code
+      (format "<pre><code class=\"%s\"%s>%s</code></pre>"
+	      language (ox-html-uswds--attr src-block) code))))
+
+;; body
+;; #+BEGIN_EXAMPLE
+;;   ,#+HTML_PREAMBLE: preamble {{{macro}}}      # preamble
+;;   content                                    # content
+;;   ,#+HTML_POSTAMBLE: postamble {{{macro}}}    # postamble
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-inner-template (contents info)
+  "Return body of document string after HTML conversion.
+
+CONTENTS is the transcoded contents string.
+INFO is a plist holding export options."
+  (when (and contents (not (string= "" contents)))
+    (let ((container (plist-get info :html-container)))
+      (concat
+       (when (and container (not (string= "" container))) (format "<%s>" container))
+       (or (ox-html-uswds--expand-macros (plist-get info :html-preamble) info) "")
+       contents
+       (or (ox-html-uswds--expand-macros (plist-get info :html-postamble) info) "")
+       (when (and container (not (string= "" container)))
+         (format "</%s>" (cl-subseq container 0 (cl-search " " container))))))))
+
+;; html page
+;; #+BEGIN_EXAMPLE
+;;   ,#+HTML_DOCTYPE: || org-html-doctype        # <!DOCTYPE html>   ; html5
+;;   ,#+HTML_HEAD: || org-html-head              # <html lang="en">  ; when language is set
+;;   ,#+HTML_TITLE: %t                           #   <head>
+;;   ,#+HTML_HEAD_EXTRA: || org-html-head-extra  #     head
+;;   ,#+HTML_BODY_ATTR: id="test"                #     <title>document title</title>
+;;   ,#+HTML_HEADER: {{{macro}}}                 #     head-extra
+;;   ,#+HTML_FOOTER: {{{macro}}}                 #   </head>
+;;                                              #   <body id="test">
+;;                                              #     header
+;;                                              #     content
+;;                                              #     footer
+;;                                              #   </body>
+;;                                              # </html>
+
+;;   {{{macro}}} tokens can also be set in INFO;
+;;   :html-head, :html-head-extra and :html-header.
+
+;;   :html-title is a string with optional tokens;
+;;   %t is the document's #+TITLE: property.
+;; #+END_EXAMPLE
+
+(defun ox-html-uswds-template (contents info)
+  "Return full document string after HTML conversion.
+
+CONTENTS is the transcoded contents string.
+INFO is a plist holding export options."
+  (let ((doctype (assoc (plist-get info :html-doctype) org-html-doctype-alist))
+        (language (plist-get info :language))
+        (head (ox-html-uswds--expand-macros (plist-get info :html-head) info))
+        (head-extra (ox-html-uswds--expand-macros (plist-get info :html-head-extra) info))
+        (title (plist-get info :title))
+        (title-format (plist-get info :html-title))
+        (body-attr (plist-get info :html-body-attr))
+        (header (plist-get info :html-header))
+        (newline "\n"))
+    (when (listp title)
+      (setq title (car title)))
+    (concat
+     (when doctype (concat (cdr doctype) newline))
+     "<html" (when language (concat " lang=\"" language "\"")) ">" newline
+     ;; Start if the document head.
+     "<head>" newline
+     (when (not (string= "" head)) (concat head newline))
+     (when (and title (not (string= "" title)))
+       (if title-format
+           (format-spec (concat "<title>" title-format "</title>\n")
+                        (format-spec-make ?t title))
+         (concat "<title>" title "</title>" newline)))
+     (when (not (string= "" head-extra)) (concat head-extra newline))
+     "<link rel=\"stylesheet\" href=\"../assets/uswds-2.10.1/css/uswds.min.css\" />"
+     "<link rel=\"stylesheet\" href=\"../assets/stylesheets/sd.css\" />"
+     ;; USWDS init
+     "<script src=\"../assets/uswds-2.10.1/js/uswds-init.min.js\" type=\"text/javascript\"></script>"
+     "</head>" newline
+     ;; Start of the document body.
+     "<body" (and body-attr (not (string= "" body-attr)) (format " %s" body-attr)) ">"
+     "<a class=\"usa-skipnav\" href=\"#main-content\">Skip to main content</a>"
+     ""
+     (when (and header (not (string= "" header)))
+       (or (ox-html-uswds--expand-macros header info) ""))
+     ;; When not the index page, add side navigation links.
+     ;; (when (not (string= (substring (buffer-name) 0 5) "index"))
+     ;;        "<a class=\"usa-skipnav\" href=\"#main-content\">Skip to main content</a>"
+     ;;        "<div class=\"usa-section\">
+     ;; <div class=\"grid-container\">
+     ;;   <div class=\"grid-row grid-gap\">
+     ;;     <div class=\"usa-layout-docs__sidenav desktop:grid-col-3\">
+     ;;       <nav aria-label=\"Secondary navigation\">
+     ;;   <ul class=\"usa-sidenav sd-sidenav\">
+     ;;     <li class=\"usa-sidenav__item\">
+     ;;       <a href=\"\">Parent link</a>
+     ;;     </li><li class=\"usa-sidenav__item\">
+     ;;       <a href=\"\" class=\"usa-current\">Current page</a><ul class=\"usa-sidenav__sublist\">
+     ;; 	<li class=\"usa-sidenav__item\">
+     ;; 	  <a href=\"\">Child link</a>
+     ;; 	</li><li class=\"usa-sidenav__item\">
+     ;; 	  <a href=\"\" class=\"usa-current\">Child link</a><ul class=\"usa-sidenav__sublist\">
+     ;; 	    <li class=\"usa-sidenav__item\">
+     ;; 	      <a href=\"\">Grandchild link</a>
+     ;; 	    </li><li class=\"usa-sidenav__item\">
+     ;; 	      <a href=\"\">Grandchild link</a>
+     ;; 	    </li><li class=\"usa-sidenav__item\">
+     ;; 	      <a href=\"\" class=\"usa-current\">Grandchild link</a>
+     ;; 	    </li><li class=\"usa-sidenav__item\">
+     ;; 	      <a href=\"\">Grandchild link</a>
+     ;; 	    </li>
+     ;; 	  </ul>
+     ;; 	</li><li class=\"usa-sidenav__item\">
+     ;; 	  <a href=\"\">Child link</a>
+     ;; 	</li><li class=\"usa-sidenav__item\">
+     ;; 	  <a href=\"\">Child link</a>
+     ;; 	</li><li class=\"usa-sidenav__item\">
+     ;; 	  <a href=\"\">Child link</a>
+     ;; 	</li>
+     ;;       </ul>
+     ;;     </li><li class=\"usa-sidenav__item\">
+     ;;       <a href=\"\">Parent link</a>
+     ;;     </li>
+     ;;   </ul>
+     ;; </nav>
+
+     ;; </div>)
+     contents
+     (or (ox-html-uswds--expand-macros (plist-get info :html-footer) info) "")
+     "<script src=\"../assets/uswds-2.10.1/js/uswds.min.js\"></script>" newline
+     "</body>" newline
+     "</html>")))
+
+;; plain text
+
+(defun ox-html-uswds-plain-text (plain-text info)
+  "Transcode a PLAIN-TEXT string from Org to HTML.
+
+PLAIN-TEXT is the string to transcode.
+INFO is a plist holding contextual information."
+  (org-html-encode-plain-text plain-text))
+
+;; attributes
+
+(defun ox-html-uswds--attr (element &optional property)
+  "Return ELEMENT's html attribute properties as a string.
+
+When optional argument PROPERTY is non-nil, return the value of
+that property within attributes."
+  (let ((attributes (org-export-read-attribute :attr_html element property)))
+    (if attributes (concat " " (org-html--make-attribute-string attributes)) "")))
+
+;; is an immediate child of [element]?
+
+(defun ox-html-uswds--immediate-child-of-p (element container-type)
+  "Is ELEMENT an immediate child of an org CONTAINER-TYPE element?"
+  (let ((container (org-export-get-parent element)))
+    (and (eq (org-element-type container) container-type)
+         (= (org-element-property :begin element)
+            (org-element-property :contents-begin container)))))
+
+;; has an immediate child of [element-type]?
+
+(defun ox-html-uswds--has-immediate-child-of-p (element element-type)
+  "Does ELEMENT have an immediate ELEMENT-TYPE child?"
+  (org-element-map element element-type
+    (lambda (link) (= (org-element-property :begin link)
+                 (org-element-property :contents-begin element)))
+    nil t))
+
+;; expand macros
+;; Macro expansion takes place in a separate buffer - as such buffer local variables
+;; are not directly available, which might be important when using self-evaluating
+;; macros such as =,#+MACRO: x (eval (fn $1))=. To help with this, the original
+;; =buffer-file-name= is shadowed.
+
+(defun ox-html-uswds--expand-macros (contents info)
+  "Return CONTENTS string, with macros expanded.
+
+CONTENTS is a string, optionally with {{{macro}}}
+tokens.  INFO is a plist holding export options."
+  (if (cl-search "{{{" contents)
+      (let* ((author (org-element-interpret-data (plist-get info :author)))
+             (date (org-element-interpret-data (plist-get info :date)))
+             (email (or (plist-get info :email) ""))
+             (title (org-element-interpret-data (plist-get info :title)))
+             (export-specific-templates
+	      (list (cons "author" author)
+                    (cons "date"
+                          (format "(eval (format-time-string \"$1\" '%s))"
+                                  (org-read-date nil t date nil)))
+                    (cons "email" email)
+                    (cons "title" title)))
+             (templates (org-combine-plists export-specific-templates
+                                            org-macro-templates))
+             (buffer-name buffer-file-name))
+        (with-temp-buffer (insert contents)
+                          (let ((buffer-file-name buffer-name))
+                            (org-macro-replace-all templates))
+                          (buffer-string)))
+    contents))
+
+;; org-mode publishing function
+;; #+BEGIN_EXAMPLE
+;;   (setq org-publish-project-alist
+;;         '(("project-name"
+;;            :base-directory "~/src"
+;;            :publishing-directory "~/public"
+;;            :publishing-function ox-html-uswds-publish-to-html)))
+;; #+END_EXAMPLE
+
+;;;###autoload
+(defun ox-html-uswds-publish-to-html (plist filename pub-dir)
+  "Publish an org file to HTML adapted for the USWDS.
+
+PLIST is the property list for the given project.  FILENAME
+is the filename of the Org file to be published.  PUB-DIR is
+the publishing directory.
+
+Return output file name."
+  (let ((html-extension (or (plist-get plist :html-extension) org-html-extension)))
+    (org-publish-org-to 'html-uswds
+                        filename
+                        (when (and html-extension (not (string= "" html-extension)))
+                          (concat "." html-extension))
+                        plist
+                        pub-dir)))
+
+;; org-export backend definition
+(org-export-define-backend
+    'html-uswds
+  '((bold . ox-html-uswds-bold)
+    (example-block . ox-html-uswds-example-block)
+    (export-block . ox-html-uswds-export-block)
+    (export-snippet . ox-html-uswds-export-snippet)
+    (headline . ox-html-uswds-headline)
+    (inner-template . ox-html-uswds-inner-template)
+    (italic . ox-html-uswds-italic)
+    (item . org-html-item)
+    (link . ox-html-uswds-link)
+    (paragraph . ox-html-uswds-paragraph)
+    (plain-list . ox-html-uswds-plain-list)
+    (plain-text . ox-html-uswds-plain-text)
+    (section . ox-html-uswds-section)
+    (special-block . ox-html-uswds-special-block)
+    (src-block . ox-html-uswds-src-block)
+    (template . ox-html-uswds-template)
+    (verbatim . ox-html-uswds-verbatim))
+  :menu-entry
+  '(?u "Export to html-uswds"
+       ((?U "As html-uswds buffer" ox-html-uswds-export-as-html)
+	(?u "As html-uswds file" ox-html-uswds-export-to-html)))
+  :options-alist
+  '((:html-extension "HTML_EXTENSION" nil org-html-extension)
+    (:html-link-org-as-html nil "html-link-org-files-as-html" org-html-link-org-files-as-html)
+    (:html-doctype "HTML_DOCTYPE" nil org-html-doctype)
+    (:html-container "HTML_CONTAINER" nil org-html-container-element t)
+    (:html-link-use-abs-url nil "html-link-use-abs-url" org-html-link-use-abs-url)
+    (:html-link-home "HTML_LINK_HOME" nil org-html-link-home)
+    (:html-preamble "HTML_PREAMBLE" nil "" newline)
+    (:html-postamble "HTML_POSTAMBLE" nil "" newline)
+    (:html-head "HTML_HEAD" nil org-html-head newline)
+    (:html-head-extra "HTML_HEAD_EXTRA" nil org-html-head-extra newline)
+    (:html-header "HTML_HEADER" nil "" newline)
+    (:html-footer "HTML_FOOTER" nil "" newline)
+    (:html-title "HTML_TITLE" nil "%t" t)
+    (:html-body-attr "HTML_BODY_ATTR" nil "" t)))
+
+;;;###autoload
+(defun ox-html-uswds-export-as-html
+    (&optional async subtreep visible-only body-only ext-plist)
+  "Export current buffer to a HTML-USWDS buffer.
+
+Export as `org-html-export-as-html' does, with html-uswds
+org-export-backend.
+
+If narrowing is active in the current buffer, only export its
+narrowed part.
+
+If a region is active, export that region.
+
+A non-nil optional argument ASYNC means the process should happen
+asynchronously.  The resulting buffer should be accessible
+through the `org-export-stack' interface.
+
+When optional argument SUBTREEP is non-nil, export the sub-tree
+at point, extracting information from the headline properties
+first.
+
+When optional argument VISIBLE-ONLY is non-nil, don't export
+contents of hidden elements.
+
+When optional argument BODY-ONLY is non-nil, only write code
+between \"<body>\" and \"</body>\" tags.
+
+EXT-PLIST, when provided, is a property list with external
+parameters overriding Org default settings, but still inferior to
+file-local settings.
+
+Export is done in a buffer named \"*Org HTML-USWDS export*\", which
+will be displayed when `org-export-show-temporary-export-buffer'
+is non-nil."
+  (interactive)
+  (org-export-to-buffer 'html-uswds "*Org HTML-USWDS Export*"
+    async subtreep visible-only body-only ext-plist
+    (lambda () (set-auto-mode t))))
+
+;;;###autoload
+(defun ox-html-uswds-export-to-html (&optional async subtreep visible-only body-only ext-plist)
+  "Export current buffer to an HTML file.
+
+Export as `org-html-export-as-html' does, with html-uswds
+org-export-backend.
+
+If narrowing is active in the current buffer, only export its
+narrowed part.
+
+If a region is active, export that region.
+
+A non-nil optional argument ASYNC means the process should happen
+asynchronously.  The resulting file should be accessible through
+the `org-export-stack' interface.
+
+When optional argument SUBTREEP is non-nil, export the sub-tree
+at point, extracting information from the headline properties
+first.
+
+When optional argument VISIBLE-ONLY is non-nil, don't export
+contents of hidden elements.
+
+When optional argument BODY-ONLY is non-nil, only write code
+between \"<body>\" and \"</body>\" tags.
+
+EXT-PLIST, when provided, is a property list with external
+parameters overriding Org default settings, but still inferior to
+file-local settings.
+
+Return output file's name."
+  (interactive)
+  (let* ((extension (concat "." (or (plist-get ext-plist :html-extension)
+                                    org-html-extension
+                                    "html")))
+         (file (org-export-output-file-name extension subtreep))
+         (org-export-coding-system org-html-coding-system))
+    (org-export-to-file 'html-uswds file
+      async subtreep visible-only body-only ext-plist)))
+
+(provide 'ox-html.uswds)
+;;; ox-html-uswds.el ends here
diff --git a/site/page-header.html b/site/page-header.html
new file mode 100644
index 0000000..ff5670b
--- /dev/null
+++ b/site/page-header.html
@@ -0,0 +1,103 @@
+<section class="usa-banner" aria-label="Accessible website">
+  <div class="usa-accordion">
+
+    <header class="usa-banner__header">
+      <div class="usa-banner__inner">
+        <div class="grid-col-auto">
+          <img class="usa-banner__header-flag" src="assets/uswds-2.10.1/img/us_flag_small.png" alt="U.S. flag">
+        </div>
+        <div class="grid-col-fill tablet:grid-col-auto">
+          <p class="usa-banner__header-text">Proudly designed with the U.S. Web Design System.</p>
+          <p class="usa-banner__header-action" aria-hidden="true">Here&#39;s how you know</p>
+        </div>
+        <button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
+          <span class="usa-banner__button-text">Here&#39;s how you know</span>
+        </button>
+      </div>
+    </header>
+
+    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
+      <div class="grid-row grid-gap-lg">
+	<div class="usa-banner__guidance tablet:grid-col-6">
+	  <img class="usa-banner__icon usa-media-block__img" src="assets/uswds-2.10.1/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
+	  <div class="usa-media-block__body">
+            <p>
+              <strong>Design for democracy</strong>
+              <br/>
+              The <a href="https://designsystem.digital.gov/">U.S. Web Design System</a> emphasizes universal accessibility.
+            </p>
+	  </div>
+	</div>
+	<div class="usa-banner__guidance tablet:grid-col-6">
+	  <img class="usa-banner__icon usa-media-block__img" src="assets/uswds-2.10.1/img/icon-https.svg" role="img" alt="" aria-hidden="true">
+	  <div class="usa-media-block__body">
+            <p>
+              <strong>Secure .gov websites use HTTPS</strong>
+	      <br/>
+              This website will soon feature identical protection features!
+	    </p>
+	  </div>
+	</div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<header class="usa-header usa-header--extended sd-header">
+  <div class="usa-navbar">
+    <div class="usa-logo" id="extended-logo">
+      <em class="usa-logo__text"><a href="index.html" title="Home" aria-label="Home">Smart Documents</a></em>
+    </div>
+    <button class="usa-menu-btn">Menu</button>
+  </div>
+
+  <nav aria-label="Primary navigation" class="usa-nav">
+    <div class="usa-nav__inner">
+
+      <button class="usa-nav__close">
+	<img src="assets/img/usa-icons/close.svg" role="img" alt="close">
+      </button>
+
+      <ul class="usa-nav__primary usa-accordion">
+
+	<li class="usa-nav__primary-item">
+	  <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two">
+	    <span>Features</span>
+	  </button>
+	  <ul id="extended-nav-section-two" class="usa-nav__submenu">
+	    <li class="usa-nav__submenu-item"><a href="#" class=""> wan</a></li>
+	    <li class="usa-nav__submenu-item"><a href="#" class=""> tu</a></li>
+	    <li class="usa-nav__submenu-item"><a href="#" class=""> mute</a></li>
+	  </ul>
+	</li>
+	
+	<li class="usa-nav__primary-item">
+	  <a class="usa-nav__link" href="original-paper.html"><span>The original paper</span></a>
+	</li>
+	
+	<li class="usa-nav__primary-item">
+	  <a class="usa-nav__link" href="jobs.html"><span>I am...</span></a>
+	</li>
+
+	<li class="usa-nav__primary-item">
+	  <a class="usa-nav__link" href="about.html"><span>About</span></a>
+	</li>
+
+      </ul>
+
+      <div class="usa-nav__secondary">
+	<ul class="usa-nav__secondary-links">
+	  <li class="usa-nav__secondary-item"><a href="">Contact</a></li>
+	  <li class="usa-nav__secondary-item"><a href="">Contribute</a></li>
+	</ul>
+
+	<form class="usa-search usa-search--small " role="search">
+	  <label class="usa-sr-only" for="extended-search-field-small">Search small</label>
+	  <input class="usa-input" id="extended-search-field-small" type="search" name="search">
+	  <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
+	</form>
+      </div>
+    </div>
+  </nav>
+</header>
diff --git a/site/posts/test.org b/site/posts/test.org
new file mode 100644
index 0000000..59c0930
--- /dev/null
+++ b/site/posts/test.org
@@ -0,0 +1,23 @@
+# -*- mode: org; -*-
+
+#+TITLE: First Post
+#+AUTHOR: Marius Peter
+#+DATE: <2021-03-28 Sun>
+
+#+INCLUDE: page-header.html export html
+
+#+begin_export html
+<div class="usa-section">
+  <div class="grid-container">
+    <div class="grid-row grid-gap">
+      <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
+#+end_export
+
+In this post, I wanted to talk about a couple of things.
+
+#+begin_export html
+      </main>
+    </div>
+  </div>
+</div>
+#+end_export
diff --git a/site/publish.el b/site/publish.el
new file mode 100644
index 0000000..e8248f0
--- /dev/null
+++ b/site/publish.el
@@ -0,0 +1,74 @@
+;;; publish.el --- Publish the Smart Documents website.
+
+;; Copyright (C) 2021 Marius Peter
+
+;; Author: Marius Peter
+
+;;; Commentary:
+
+;; This file is intended to be run as a script for the Makefile used
+;; to generate the Smart Documents website.
+
+;;; Code:
+
+(require 'ox-publish)
+(load-file "./ox-html-uswds.el")
+
+;; (let ((publishing-location "~/Documents/www/"))
+(let ((publishing-location "/ssh:root@192.162.71.223:/var/www/smart-documents.org/"))
+  (setq org-publish-project-alist
+	`(("page"
+           :base-directory "."
+           :base-extension "org"
+           :publishing-directory ,publishing-location
+	   :recursive nil ; Top-level pages are all in top-level org directory.
+           :publishing-function ox-html-uswds-publish-to-html
+           :auto-sitemap t)
+          ("page-media"
+           :base-directory "assets/images/"
+           :base-extension "jpg\\|gif\\|png\\|svg\\|mp3"
+           :publishing-directory ,(concat publishing-location "assets/images/")
+	   :recursive t
+           :publishing-function org-publish-attachment)
+          ("posts"
+           :base-directory "posts/"
+           :base-extension "org"
+           :publishing-directory ,(concat publishing-location "posts/")
+	   :recursive t
+           :publishing-function ox-html-uswds-publish-to-html)
+          ("css"
+           :base-directory "assets/"
+           :base-extension "css\\|map"
+           :publishing-directory ,(concat publishing-location "assets/")
+           :publishing-function org-publish-attachment
+           :recursive t)
+          ("js"
+           :base-directory "assets/"
+           :base-extension "js"
+           :publishing-directory ,(concat publishing-location "assets/")
+           :publishing-function org-publish-attachment
+           :recursive t)
+	  ("fonts"
+           :base-directory "assets/"
+           :base-extension "ttf\\|woff2"
+           :publishing-directory ,(concat publishing-location "assets/")
+           :publishing-function org-publish-attachment
+           :recursive t)
+	  ("img"
+           :base-directory "assets/uswds-2.10.1/"
+           :base-extension "png\\|svg"
+           :publishing-directory ,(concat publishing-location "assets/uswds-2.10.1/")
+           :publishing-function org-publish-attachment
+           :recursive t)
+	  ("content"
+	   :components ("page"
+			"page-media"))
+	  ("assets"
+	   :components ("css"
+			"js"
+			"fonts"
+			"img"))
+          ("all" :components ("content" "assets")))))
+
+(provide 'publish)
+;;; publish.el ends here
diff --git a/site/sitemap.html b/site/sitemap.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/site/sitemap.html
diff --git a/site/sitemap.org b/site/sitemap.org
new file mode 100644
index 0000000..143e087
--- /dev/null
+++ b/site/sitemap.org
@@ -0,0 +1,6 @@
+#+TITLE: Sitemap for project page
+
+- [[file:about.org][About]]
+- [[file:jobs.org][My job is...]]
+- [[file:index.org][Smart Documents]]
+- [[file:original-paper.org][The Original Paper]]
\ No newline at end of file