init

Signed-off-by: Blagovest Petrov <blagovest@petrovs.info>
4 years ago · ce783f8429
117 changed files with 2937 additions and 0 deletions
--- a/.forestry/front_matter/templates/page.yml
+++ b/.forestry/front_matter/templates/page.yml
@ -0,0 +1,23 @@
+---
+label: Page
+hide_body: false
+fields:
+- type: text
+  name: title
+  label: Title
+  config:
+    required: true
+- type: number
+  name: weight
+  label: Page Rank
+  description: Determines the position of the page on the left sidebar <em>(optional)</em>
+- name: description
+  type: text
+  config:
+    required: false
+  label: Summary
+  description: Enter a custom summary <em>(optional)</em>
+- name: draft
+  type: boolean
+  label: Unpublish
+  description: Mark as draft
--- a/.forestry/settings.yml
+++ b/.forestry/settings.yml
@ -0,0 +1,44 @@
+---
+new_page_extension: md
+auto_deploy: false
+admin_path: 
+webhook_url: 
+sections:
+- type: heading
+  label: CONFIG
+- type: document
+  path: exampleSite/config.toml
+  label: Settings
+- type: heading
+  label: PAGES
+- type: directory
+  path: exampleSite/content
+  label: Pages
+  create: all
+  match: "*"
+  templates:
+  - page
+- type: heading
+  label: DOCS PAGES
+- type: directory
+  path: exampleSite/content/docs
+  label: Docs
+  create: all
+  match: "**/*"
+  templates:
+  - page
+upload_dir: exampleSite/static/images
+public_path: "/images"
+front_matter_path: ''
+use_front_matter_path: false
+file_template: ":filename:"
+build:
+  preview_env:
+  - HUGO_ENV=staging
+  - HUGO_VERSION=0.75.1
+  preview_output_directory: public
+  preview_docker_image: forestryio/hugo:latest
+  mount_path: "/srv"
+  working_dir: "/srv"
+  instant_preview_command: hugo server -D -E -F --renderToDisk -d public
+version: 0.75.1
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+public/
+node_modules/
+.DS_Store
--- a/.gitmodules
+++ b/.gitmodules
@ -0,0 +1,3 @@
+[submodule "themes/compose"]
+	path = themes/compose
+	url = https://github.com/onweru/compose
--- a/201
+++ b/201
@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
+## Guide
+
+This guide covers the necessary bits. As the project evolves, it will only become more comprehensive
--- a/config.toml
+++ b/config.toml
@ -0,0 +1,61 @@
+baseURL = "https://example.com/"
+title = "Compose Docs"
+enableRobotsTXT = true
+# this example loads the theme as hugo module
+# comment out line below, and uncomment the line after it if you prefer to load the theme normally
+theme = ["github.com/onweru/compose"] # edit this if you'ld rather use a fork of this repo
+# theme = "compose"
+enableGitInfo = true
+
+disableKinds = ["taxonomy", "taxonomyTerm"]
+
+#  menu items
+[[menu.main]]
+    name = "Docs"
+    weight = 2
+    url = "docs/"
+
+[[menu.main]]
+    name = "Example"
+    weight = 3
+    url = "https://docs.neuralvibes.com"
+
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
+    [markup.goldmark.extensions]
+      typographer = false
+  [markup.highlight]
+    codeFences = true
+    guessSyntax = false
+    hl_Lines = ""
+    lineNoStart = 1
+    lineNos = true
+    lineNumbersInTable = true
+    noClasses = false
+    style = "monokai"
+    tabWidth = 2
+  [markup.tableOfContents]
+    endLevel = 4
+    ordered = false
+    startLevel = 2
+
+# Everything below this are Site Params
+
+[params]
+  author = "Weru"
+  searchPlaceholder = "Search the docs ..."
+  repo = "https://github.com/onweru/compose"
+
+  time_format_blog = "Monday, January 02, 2006"
+  time_format_default = "January 2, 2006"
+  enableDarkMode = true # set to false to disable darkmode by default # user will still have the option to use dark mode
+  [params.logo]
+    lightMode = "compose.svg"
+    darkMode = "compose-light.svg"
+
+  [params.source]
+    name = "GitHub"
+    icon = "github.svg"
+    url = "https://github.com/onweru/compose/"
--- a/content/_index.md
+++ b/content/_index.md
@ -0,0 +1,22 @@
+++
+title = "Compose"
+
+++
+{{< block "grid-2 mt-2" >}}
+{{< column >}}
+
+# Compose your Docs with __Ease__.
+
+Compose is a lean theme for the `Hugo`, inspired by [forestry.io](https://forestry.io). 
+
+We do a [Pull Request](https://github.com/onweru/compose/pulls) contributions workflow on **GitHub**. Also feel free to raise any issues or feature suggestions.
+
+Note that the theme is built with simplicity in mind. This way, if a suggestion complicates the usability of the theme, it may be declined. New users are always welcome!
+
+{{< button "docs/" "Read the Docs" >}} {{< button "https://github.com/onweru/compose" "Download Theme" >}}
+
+{{< /column >}}
+{{< column >}}
+![diy](/images/scribble.jpg)
+{{< /column >}}
+{{< /block >}}
--- a/content/docs/_index.md
+++ b/content/docs/_index.md
@ -0,0 +1,8 @@
+---
+title: "Compose Docs"
+weight: 1
+---
+
+Welcome to the Compose theme user guide! This guide shows you how to get started creating technical documentation sites using Compose, including site customization and how to use Compose's blocks and templates.
+
+{{< button "./getting-started/" "Get started now" >}}
--- a/content/docs/clarity/_index.md
+++ b/content/docs/clarity/_index.md
@ -0,0 +1,8 @@
+---
+Title: Clarity Docs
+weight: 10
+---
+
+__Hugo Clarity__ is a technology-minded theme for Hugo based on VMware's open-source [Clarity Design System](https://clarity.design/) featuring rich code support, dark/light mode, mobile support, and much more. See [a live demo at __neonmirrors.net__](https://neonmirrors.net/).
+
+{{< button "./getting-started/" "Get started with Clarity" >}}
--- a/content/docs/clarity/blogging.md
+++ b/content/docs/clarity/blogging.md
@ -0,0 +1,54 @@
+++
+title="Blogging"
+++
+
+### Blog directory
+
+Edit the `config.toml` file and change the `mainSections` key. Values will be directories where the blogs reside.
+
+```yaml
+[params]
+...
+mainSections = ["posts", "docs", "blogs"]
+...
+```
+
+For more info, see the [Hugo docs](https://gohugo.io/functions/where/#mainsections).
+
+### Mobile menu positioning
+
+The navigation menu when mobile browsing can be configured in `config.toml` to open right or left depending on preference. The "hamburger" menu icon will always display in the upper right hand corner regardless.
+
+```yaml
+[params]
+...
+mobileNavigation = "left" # Mobile nav menu will open to the left of the screen.
+...
+```
+
+### Tags and Taxonomies
+
+#### Show number of tags
+
+The number of tags and taxonomies (including categories) that should be shown can be configured so that any more than this value will only be accessible when clicking the All Tags button. This is to ensure a large number of tags or categories can be easily managed without consuming excess screen real estate. Edit the `numberOfTagsShown` parameter and set accordingly.
+
+```yaml
+[params]
+...
+numberOfTagsShown = 14 # Applies for all other default & custom taxonomies. e.g categories, brands see https://gohugo.io/content-management/taxonomies#what-is-a-taxonomy
+...
+```
+
+#### Number of tags example
+
+![Tags](https://github.com/chipzoller/hugo-clarity/blob/master/images/tags.png)
+
+<!-- mark -->
+
+### Table of contents
+
+Each article can optionally have a table of contents (TOC) generated for it based on top-level links. By configuring the `toc` parameter in the article frontmatter and setting it to `true`, a TOC will be generated only for that article. The TOC will then render under the featured image.
+
+#### Table of contents (TOC) example
+
+![Article table of contents](https://github.com/chipzoller/hugo-clarity/blob/master/images/article-toc.png)
--- a/content/docs/clarity/customize.md
+++ b/content/docs/clarity/customize.md
@ -0,0 +1,129 @@
+---
+title: "Customization"
+weight: 14
+---
+
+## Configuration
+
+If set, jump over to the `config.toml` file and start [configuring](#configuration) your site.
+
+This section will mainly cover settings that are unique to this theme. If something is not covered here (or elsewhere in this file), there's a good chance it is covered in [this Hugo docs page](https://gohugo.io/getting-started/configuration/#configuration-file).
+
+### Global Parameters
+
+These options set global values that some pages or all pages in the site use by default.
+
+| Parameter | Value Type | Overidable on Page |
+|:---- | ---- | ---- |
+| author | string | no |
+| twitter | string | no |
+| largeTwitterCard | boolean | no |
+| ga_analytics | string | no |
+| description | string | yes |
+| introDescription | string | no |
+| numberOfTagsShown | integer | no |
+| fallBackOgImage | file path (string) | no |
+| codeMaxLines | integer | yes |
+| codeLineNumbers | boolean | yes |
+| mainSections | array/string | no |
+| centerLogo | boolean | no |
+| logo | file path (string) | no |
+| mobileNavigation | string | no |
+| figurePositionShow | boolean | yes |
+| figurePositionLabel | string | no |
+| customCSS | array of file path (string) | no |
+| customJS | array of file path (string) | no |
+| enforceLightMode | boolean | N/A |
+| enforceDarkMode | boolean | N/A |
+| titleSeparator| string | no |
+| comment | boolean | no |
+
+### Page Parameters
+
+These options can be set from a page [frontmatter](https://gohugo.io/content-management/front-matter#readout) or via [archetypes](https://gohugo.io/content-management/archetypes/#readout).
+
+| Parameter | Value Type | Overrides Global |
+|:---- | ---- | ---- |
+| title | string | N/A |
+| date | date | N/A |
+| description | string | N/A |
+| draft | boolean | N/A |
+| featured | boolean | N/A |
+| tags | array/string | N/A |
+| categories | array/string | N/A |
+| toc | boolean | N/A |
+| thumbnail | file path (string) | N/A |
+| featureImage | file path (string) | N/A |
+| shareImage | file path (string) | N/A |
+| codeMaxLines | integer | yes |
+| codeLineNumbers | boolean | yes |
+| figurePositionShow | boolean | yes |
+| figurePositionLabel | string | no |
+| comment | boolean | no |
+
+### Modify links menu
+
+To add, remove, or reorganize top menu items, [edit this YAML file](https://github.com/chipzoller/hugo-clarity/blob/master/exampleSite/data/menu.yaml). These menu items also display any categories (taxonomies) that might be configured for articles.
+
+### Social media
+
+To edit your social media profile links, [edit this YAML file](https://github.com/chipzoller/hugo-clarity/blob/master/exampleSite/data/social.yaml).
+
+If you wish to globally use a [large Twitter summary card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image) when sharing posts, set the global parameter `largeTwitterCard` to `true`.
+
+### Search engine
+
+If using Google Analytics, configure the `ga_analytics` global parameter in your site with your ID.
+
+### Forcing light or dark mode
+
+By default, sites authored using Clarity will load in the browser with the user's system-wide settings. I.e., if the underlying OS is set to dark mode, the site will automatically load in dark mode. Regardless of the default mode, a UI control switch exists to override the theme mode at the user's discretion.
+
+In order to override this behavior and force one mode or another, add either `enforceLightMode` or `enforceDarkMode` to your `config.toml` file. If neither value is present, add it.
+
+To enforce Light Mode by default, turn `enforceLightMode`  to `true`.
+
+To enforce Dark Mode by default, turn `enforceDarkMode`  to `true`
+
+```yaml
+[params]
+...
+enforceLightMode = true # Force the site to always load in light mode.
+...
+```
+
+Please note that you cannot enforce both modes at the same time. It wouldn't make sense, would it?
+
+> ⚠️ Please also note that the mode toggle UI will remain in place. That way, if a user prefers dark mode, they can have their way. The best of both worlds.
+
+### I18N
+
+This theme supports Multilingual (i18n / internationalization / translations)
+
+The `exampleSite` gives you some examples already.
+You may extend the multilingual functionality by following the [official documentation](https://gohugo.io/content-management/multilingual/).
+
+Things to consider in multilingual:
+
+* **supported languages** are configured in [config/_default/languages.toml](./exampleSite/config/_default/languages.toml)
+* **add new language support** by creating a new file inside [i18n](./i18n/) directory.
+  Check for missing translations using `hugo server --i18n-warnings`
+* **taxonomy** names (tags, categories, etc...) are translated in [i18n](./i18n/) as well (translate the key)
+* **menus** are translated manually in the config files [config/_default/menus/menu.xx.toml](./exampleSite/config/_default/menus/)
+* **menu's languages list** are semi-hardcoded. You may chose another text for the menu entry with [languageMenuName](./exampleSite/config.toml). Please, do better and create a PR for that.
+* **content** must be translated individually. Read the [official documentation](https://gohugo.io/content-management/multilingual/#translate-your-content) for information on how to do it.
+
+**note:** if you do NOT want any translations (thus removing the translations menu entry), then you must not have any translations.
+In the exampleSite that's as easy as removing the extra translations from the `config/_default/...` or executing this onliner:
+
+```
+sed '/^\[pt]$/,$d' -i config/_default/languages.toml   &&   rm config/_default/menus/menu.pt.toml
+```
+
+### Comments
+
+Clarity supports Hugo built-in Disqus partial, you can enable Disqus simply by setting [`disqusShortname`](https://gohugo.io/templates/internal/#configure-disqus) in your configuration file.
+
+> ⚠️ `disqusShortname` should be placed in root level of configuration.
+
+You can also create a file named `layouts/partials/comments.html` for customizing the comments, checkout [Comments Alternatives](https://gohugo.io/content-management/comments/#comments-alternatives) for details.
--- a/content/docs/clarity/features.md
+++ b/content/docs/clarity/features.md
@ -0,0 +1,25 @@
+---
+title: Features
+Weight: 13
+---
+
+* Blog with tagging and category options
+* Deeplinks
+* Native Image Lazy Loading
+* Customizable (see config)
+* Dark Mode (with UI controls for user preference setting)
+* Toggleable table of contents
+* Flexible image configuration
+* Logo alignment
+* Mobile support with configurable menu alignment
+* Syntax Highlighting
+* Rich code block functions including:
+    1. Copy to clipboard
+    2. Toggle line wrap (dynamic)
+    3. Toggle line numbers
+    4. Language label
+    5. Toggle block expansion/contraction (dynamic)
+
+    To put it all in context, here is a preview showing all functionality.
+
+    ![code block functions](https://github.com/chipzoller/hugo-clarity/blob/master/images/syntax-block.gif)
--- a/content/docs/clarity/getting-started.md
+++ b/content/docs/clarity/getting-started.md
@ -0,0 +1,67 @@
+---
+title: Getting started
+weight: 11
+---
+
+## Prerequisites
+
+Firstly, __ensure you have installed the [extended version of Hugo](https://github.com/gohugoio/hugo/releases)__. See installation steps from [Hugo's official docs](https://gohugo.io/getting-started/installing/).
+
+## Getting up and running
+
+Read the [prerequisites](#prerequisites) above and verify you're using the extended version of Hugo. There are at least two ways of quickly getting started with Hugo and the VMware Clarity theme:
+
+### Option 1 (recommended)
+
+Generate a new Hugo site and add this theme as a Git submodule inside your themes folder:
+
+```bash
+hugo new site yourSiteName
+cd yourSiteName
+git init
+git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity
+cp -a themes/hugo-clarity/exampleSite/* .
+```
+
+Then run
+
+```bash
+hugo server
+```
+
+Hurray!
+
+### Option 2 (Great for testing quickly)
+
+You can run your site directly from the `exampleSite`. To do so, use the following commands:
+
+```bash
+git clone https://github.com/chipzoller/hugo-clarity
+cd hugo-clarity/exampleSite/
+hugo server --themesDir ../..
+```
+
+> Although, option 2 is great for quick testing, it is somewhat problematic when you want to update your theme. You would need to be careful not to overwrite your changes.
+
+### Option 3 (The new, most fun & painless approach)
+
+This option enables you to load this theme as a hugo module. It arguably requires the least effort to run and maintain in your website.
+
+First things first, ensure you have `go` binary [installed on your machine](https://golang.org/doc/install).
+
+```bash
+git clone https://github.com/chipzoller/hugo-clarity.git clarity
+cd clarity/exampleSite/
+hugo mod init my-site
+```
+Open config.toml file in your code editor, replace `theme = "hugo-clarity"` with `theme = ["github.com/chipzoller/hugo-clarity"]` or just `theme = "github.com/chipzoller/hugo-clarity"`.
+
+Hurray you can now run
+
+```yaml
+hugo server
+```
+
+To pull in theme updates, run `hugo mod get -u ./...` from the theme folder. If unsure, [learn how to update hugo modules](https://gohugo.io/hugo-modules/use-modules/#update-modules)
+
+> There [is more you could do with hugo modules](https://discourse.gohugo.io/t/hugo-modules-for-dummies/20758), but this will suffice for our use case here.
--- a/content/docs/clarity/images.md
+++ b/content/docs/clarity/images.md
@ -0,0 +1,117 @@
+++
+title = "Manipulating Images"
+weight = 15
+++
+
+## Images
+
+### Image figure captions
+
+You have the option of adding captions to images in blog posts and automatically prepending a desired string such as "Figure N" to the alt text. This is controlled via two global settings.
+
+`figurePositionLabel` is a string which will be prepended to any alt text of an article image. By default, this is set to "Figure." And `figurePositionShow` controls, globally, whether to show this label. It does not affect whether to show the image alt text, only the prefix figure caption. For more granular control, `figurePositionShow` can be overridden at the article level if desired.
+
+The number will be automatically calculated and assigned after the `figurePositionLabel` text starting from the top of the article and counting down. Featured images will be excluded from this figuration.
+
+### Image figure captions example
+
+In this example, `figurePositionLabel` is set to "Figure" in `config.toml` and this is the first image in a given article.
+
+```markdown
+![Antrea Kubernetes nodes prepared](./images/image-figure.png)
+```
+
+![Here is my alt text for this image.](https://github.com/chipzoller/hugo-clarity/blob/master/images/image-figure.png)
+
+### Inline images
+
+To make a blog image inline, append `:inline` to its alt text. Typically, inline images will have no alt text associated with them.
+
+### Inline images example
+
+```markdown
+<!-- some image without alt text -->
+![:inline](someImageUrl)
+
+<!-- some image with alt text -->
+
+![some alt text:inline](someOtherImageUrl)
+```
+
+![Inline image example](https://github.com/chipzoller/hugo-clarity/blob/master/images/image-inline.png)
+
+### Float images to the left
+
+To align a blog image to the left, append `:left` to its alt text. Article text will then flow to the right of the image.
+
+### Float images left example
+
+```markdown
+<!-- some image without alt text -->
+![:left](someImageUrl)
+
+<!-- some image with alt text -->
+
+![some alt text:left](someOtherImageUrl)
+```
+
+### Add classes to images
+
+To add a class image to the left, append `::<classname>` to its alt text. You can also add multiple classes to an image separated by space. `::<classname1> <classname2>`.
+
+### Image class example
+
+```markdown
+<!-- some image without alt text -->
+![::img-medium](someImageUrl)
+
+<!-- some image with alt text -->
+
+![some alt text::img-large img-shadow](someOtherImageUrl)
+```
+
+### Article thumbnail image
+
+Blog articles can specify a thumbnail image which will be displayed to the left of the card on the home page. Thumbnails should be square (height:width ratio of `1:1`) and a suggested dimension of 150 x 150 pixels. They will be specified using a frontmatter variable as follows:
+
+```yaml
+...
+thumbnail: "images/2020-04/capv-overview/thumbnail.jpg"
+...
+```
+
+The thumbnail image will take precedence on opengraph share tags if the [shareImage](#share-image) parameter is not specified.
+
+### Article featured image
+
+Each article can specify an image that appears at the top of the content. When sharing the blog article on social media, if a thumnail is not specified, the featured image will be used as a fallback on opengraph share tags.
+
+```yaml
+...
+featureImage: "images/2020-04/capv-overview/featured.jpg"
+...
+```
+
+### Share Image
+
+Sometimes, you want to explicitly set the image that will be used in the preview when you share an article on social media. You can do so in the front matter.
+
+```yaml
+...
+shareImage = "images/theImageToBeUsedOnShare.png"
+...
+```
+
+Note that if a share image is not specified, the order of precedence that will be used to determine which image applies is `thumbnail` => `featureImage` => `fallbackOgImage`. When sharing a link to the home page address of the site (as opposed to a specific article), the `fallbackOgImage` will be used.
+
+### Align logo
+
+You can left align or center your site's logo.
+
+```yaml
+...
+centerLogo = true # Change to false to align left
+...
+```
+
+If no logo is specified, the title of the site will appear in its place.
--- a/content/docs/clarity/syntax-highlighting.md
+++ b/content/docs/clarity/syntax-highlighting.md
@ -0,0 +1,41 @@
+++
+title = "Syntax Highlighting"
+++
+
+### Code
+
+#### Display line numbers
+
+Choose whether to display line numbers within a code block globally with the parameter `codeLineNumbers` setting to `true` or `false`.
+
+```yaml
+[params]
+...
+codeLineNumbers = true # Shows line numbers for all code blocks globally.
+...
+```
+
+#### Limit code block height
+
+You can globally control the number of lines which are displayed by default for your code blocks. Code which has the number of lines exceed this value will dynamically cause two code block expansion buttons to appear, allowing the user to expand to full length and contract. This is useful when sharing code or scripts with tens or hundreds of lines where you wish to control how many are displayed. Under params in `config.toml` file, add a value as follows:
+
+```yaml
+[params]
+...
+codeMaxLines = 10 # Maximum number of lines to be shown by default across all articles.
+...
+```
+
+> If the value already exists, change it to the desired number. This will apply globally.
+
+If you need more granular control, this parameter can be overridden at the blog article level. Add the same value to your article frontmatter as follows:
+
+```yaml
+...
+codeMaxLines = 15 # Maximum number of lines to be shown in code blocks in this blog post.
+...
+```
+
+If `codeMaxLines` is specified both in `config.toml` and in the article frontmatter, the value specified in the article frontmatter will apply to the given article. In the above example, the global default is `10` and yet the article value is `15` so code blocks in this article will auto-collapse after 15 lines.
+
+If `codeMaxLines` is not specified anywhere, an internal default value of `100` will be assumed.
--- a/content/docs/clarity/theme-overrides.md
+++ b/content/docs/clarity/theme-overrides.md
@ -0,0 +1,37 @@
+++
+title = "Theme Overrides"
+++
+
+### Custom CSS and JS
+
+To minimize HTTP requests per page, we would recommend loading CSS styles and JavaScript helpers in single bundles. That is to say, one CSS file and one JavaScript file. Using Hugo minify functions, these files will be minified to optimize the size.
+
+Going by the above 👆🏻 reason, we recommend adding custom CSS and JS via [this custom SASS file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/sass/_custom.sass) and [custom JavaScript file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/js/custom.js).
+
+However, sometimes you may need to load additional style or script files. In such cases, you can add custom `.css` and `.js` files by listing them in the `config.toml` file (see the snippet below). Similar to images, these paths should be relative to the `static` directory.
+
+```yaml
+[params]
+...
+customCSS = ["css/custom.css"] # Include custom CSS files
+customJS = ["js/custom.js"] # Include custom JS files
+...
+```
+
+> __Pro Tip__: You can change the theme colors via the [this variable's SASS file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/sass/_variables.sass)
+
+### Hooks
+
+Clarity provides some hooks for adding code on page.
+
+If you need to add some code(CSS import, HTML meta or similar) to the head section on every page, add a partial to your project:
+
+```
+layouts/partials/hooks/head-end.html
+```
+
+Similar, if you want to add some code right before the body end, create your own version of the following file:
+
+```
+layouts/partials/hooks/body-end.html
+```
--- a/content/docs/getting-started.md
+++ b/content/docs/getting-started.md
@ -0,0 +1,69 @@
+---
+title: "Getting Started"
+weight: 2
+description: >
+  This page tells you how to get started with the Compose theme, including installation and basic configuration.
+---
+
+## Prerequisites and installation
+
+### Install Hugo
+
+You need a [recent **extended** version](https://github.com/gohugoio/hugo/releases) (we recommend version 0.61 or later) of [Hugo](https://gohugo.io/) to do local builds and previews of sites (like this one) that uses this theme.
+
+If you install from the release page, make sure to get the `extended` Hugo version, which supports [sass](https://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html); you may need to scroll down the list of releases to see it. 
+
+For comprehensive Hugo documentation, see [gohugo.io](https://gohugo.io/).
+
+## Run your site with compose theme
+
+You could go with the options right below.
+
+### Option 1 (my favorite)
+
+This option enables you to load compose theme as a hugo module. First things first, ensure you have `go` binary [installed on your machine](https://golang.org/doc/install).
+
+```bash
+git clone https://github.com/onweru/compose/
+cd compose/exampleSite/
+hugo server
+```
+
+To pull in theme updates, run `hugo mod get -u ./...` from the theme folder. If unsure, [learn how to update hugo modules](https://gohugo.io/hugo-modules/use-modules/#update-modules)
+
+> ⚠️ If you choose __Option 2__ or __Option 3__ below, ensure you edit [these lines in the config.toml file](https://github.com/onweru/compose/blob/b3e30e0816621223224897edc45eeeabd0d9cd16/exampleSite/config.toml#L4-L7) as advised on the comments
+
+### Option 2 (recommended)
+
+Generate a new Hugo site and add this theme as a Git submodule inside your themes folder:
+
+```bash
+hugo new site yourSiteName
+cd yourSiteName
+git init
+git submodule add https://github.com/onweru/compose/ themes/compose
+cp -a themes/compose/exampleSite/* .
+```
+
+Then run
+
+```bash
+hugo server
+```
+
+Hurray!
+
+### Option 3 (Great for testing quickly)
+
+You can run your site directly from the `exampleSite`. To do so, use the following commands:
+
+```bash
+git clone https://github.com/onweru/compose/
+cd compose/exampleSite/
+hugo server --themesDir ../..
+```
+
+> Although, option 3 is great for quick testing, it is somewhat problematic when you want to update your theme. You would need to be careful not to overwrite your changes.
+
+Once set, jump over to the `config.toml` file and start [configuring](#configuration) your site.
+
--- a/content/docs/overview.md
+++ b/content/docs/overview.md
@ -0,0 +1,12 @@
+---
+title: "Overview"
+weight: 4
+description: >
+  Use hugo shortcodes to quickly compose your documentation pages.
+---
+
+Instead of writing all your site pages from scratch, Hugo lets you define and use [shortcodes](https://gohugo.io/content-management/shortcodes/). 
+
+Why shortcodes? While markdown is sufficient to produce simple pages, it's insufficient where complex page structures are needed. Thusly, whenever we need special styling, shortcodes compliment the shortcomings of markdown.
+
+This way, you can side step complex html and css boilerplate in your content files.
--- a/content/docs/shortcodes-example.md
+++ b/content/docs/shortcodes-example.md
@ -0,0 +1,91 @@
+---
+title: "Shortcodes Applied"
+weight: 7
+description: >
+  This is how the shortcodes would look like in action
+---
+
+### Using blocks, columns & buttons
+
+```sh
+{{</* block "grid-2" */>}}
+{{</* column */>}}
+#### Coumn 1 
+
+Lorem ipsum dolor sit amet, 
+...
+
+{{</* button "https://github.com/onweru/compose" "Download Theme" */>}}
+
+{{</* /column */>}}
+{{</* column */>}}
+
+<!-- generates 👇 -->
+```
+
+{{< block "grid-2" >}}
+{{< column >}}
+#### Coumn 1 
+
+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.
+
+{{< button "https://github.com/onweru/compose" "Download Theme" >}}
+
+{{< /column >}}
+{{< column >}}
+#### Coumn 2
+
+
+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.
+
+{{< button "docs/" "Read the Docs" >}}
+
+{{< /column >}}
+{{< /block >}}
+
+### Youtube
+
+```sh
+{{</* youtube "q0hyYWKXF0Q" */>}}
+<!-- generates 👇 -->
+```
+
+{{< youtube "q0hyYWKXF0Q" >}}
+
+## Picture
+
+```sh
+{{</* picture "compose.svg" "compose-light.svg" "Compose Logo" */>}} 
+<!-- generates 👇 -->
+```
+
+{{< picture "compose.svg" "compose-light.svg" "Compose Logo" >}}
+
+## Gallery
+
+Include inline galleries within your articles. These galleries can contain `N` number of images. It take 2 positional parameters. 
+
+The 1st parameter is required. It is _comma-separated list_ (`,`) of your images' paths.
+
+The 2nd parameter is optional. It is _double-collon-separated list_ (`::`) of your images' alt/description/captions text. It's always a good SEO practice to include alt text for your images.
+
+```sh
+{{</* gallery "images/diy.jpeg,images/diy-2.jpeg,images/diy.jpeg" "Gallery Image 1::gallery image 2::gallery image 1 copy" */>}}
+# generates 👇
+```
+
+{{< gallery "images/diy.jpeg,images/diy-2.jpeg,images/diy.jpeg" "Gallery Image 1::gallery image 2::gallery image 1 copy" >}}
+
+> For legibility, you may include a space after the delimiters `,` & `::`
--- a/content/docs/shortcodes.md
+++ b/content/docs/shortcodes.md
@ -0,0 +1,90 @@
+---
+title: "Shortcodes"
+weight: 5
+description: >
+  Use hugo shortcodes to quickly compose site pages.
+---
+
+Why shortcodes? While markdown is sufficient to produce simple pages, it's insufficient where complex page structures are needed. Thusly, whenever we need special styling, shortcodes compliment the shortcomings of markdown.
+
+This way, you can side step complex html and css boilerplate in your content files. 
+
+Sometimes, the shortcode will wrap content, sometimes it won't. When content is wrapped, a closing shortcode tag is needed. Please see the link I provided above and the markdown files for examples. You'll get the gist pretty quickly.
+
+I've setup the following shortcodes:
+
+### Block 
+
+Takes positional modifiers
+
+**Example**
+```markdown
+...
+  {{</* block "modifiers" */>}}
+  <!-- Nest columns or content  -->
+  {{</* /block */>}}
+...
+```
+
+### Column
+
+It takes positional parameters
+
+**Example**
+```markdown
+  {{</* column "mt-2 mb-2" */>}}
+  <!-- applied margin top and margin bottom modifiers -->
+  {{</* /column */>}}
+```
+
+### Video
+
+This allows you to embed a youtube video in you content. You would achieve that using a positional parameter (needs no name )parameter, like so:
+
+**Example:**
+
+```markdown
+  {{</* youtube "xWF59rWSceA" */>}}
+  <!-- Use the youtube video id -->
+```
+
+### Button
+
+This adds a styled link (styled like a button). It takes two no-optional parameters:
+
+| PARAMETER | PURPOSE | OPTIONAL |
+| :---  | :--- | :--- |
+| label | button text | no |
+| url | button link | no |
+
+**Example**
+
+```
+  {{</* button "/" "doe nu mee" */>}}
+```
+
+### Picture
+
+You want to use darkmode images when darkmode is enabled on a device and a regular image on lightmode? It takes 3 positional parameter
+
+Store these images in the `static/images` directory. 
+
+```sh
+...
+{{</* picture "lightModeImage.png" "darkModeImage.png" "Image alt text" */>}}
+...
+```
+
+### Gallery
+
+Include inline galleries within your articles. These galleries can contain `N` number of images. It takes 2 positional parameters. 
+
+The 1st parameter is required. It's a _comma-separated list_ (`,`) of your images' paths.
+
+The 2nd parameter is optional. It's a _double-collon-separated list_ (`::`) of your images' alt/description/captions text. It's always a good SEO practice to include alt text for your images.
+
+```sh
+...
+{{</* gallery "images/diy.jpeg,images/diy-2.jpeg,images/diy.jpeg" "Gallery Image 1::gallery image 2::gallery image 1 copy" */>}}
+...
+```
--- a/content/docs/use-forestry-cms.md
+++ b/content/docs/use-forestry-cms.md
@ -0,0 +1,38 @@
+++
+title = "Use forestry CMS"
+description = ""
+weight = 3
+draft = false
+++
+
+Do you prefer managing your site using a CMS? Or would you like to make it easier for someone (a non-techie, perhaps) in your team to make edits easily? If interested, follow along. Else, skip to the [next section](../overview/)
+
+Let's sync your site with forestry CMS.
+
+## Prerequisites !!
+
+Obviously you  ought to have __a github account__. This is where your website source will live. Basically, forestry will read from github and write (commmit) to your github repo.
+
+> Gitlab or bitbucket will work too. Just check their [implementation here](https://forestry.io/docs/git-sync/gitlab/). Happy fishing.
+
+### Requirement 1 : A Forestry account
+
+Jump over to [forestry](https://bit.ly/forestry-account) and sign up for an account. Consider signing up using your github account. That way, you don't have to deal with passwords.
+
+### Requirement 2: A Netlify account _(optional)_
+
+If you intend to host with something other than Netlify _e.g github pages_, please scroll on. Hosting with Netlify is a lot of fun though; I highly recommend it.
+
+### Step 1 : Fork or Clone Compse theme
+
+First we will fork this [bigspring](https://github.com/themefisher/bigspring-hugo-startup-theme) template.
+
+### Step 2 : Add your repository in Forestry
+
+> The exampleSite already comes with prefilled default forestry settings. If you set up your site using [option 2](../getting-started/#option-2-recommended), look for a file `.forestry/settings.yml` and remove all `exampleSite/` strings from it.
+
+Go to your [forestry](https://bit.ly/forestry-account)  account and click on `import your site now`.
+
+1. Choose `hugo`
+2. `github` or `gitlab`. wherever your repo is at.
+3. Select your repo
--- a/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.content
+++ b/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.content
--- a/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.json
+++ b/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.json
@ -0,0 +1 @@
+{"Target":"css/styles.fccc4ce703dc29af233c3b6a4dafeb76ed25f379c7f1ba96b3b550dd60536081df332989801824893ad0838fdeb80232afe4b9bf4bc1cd68ced709df4d053be3.css","MediaType":"text/css","Data":{"Integrity":"sha512-/MxM5wPcKa8jPDtqTa/rdu0l83nH8bqWs7VQ3WBTYIHfMymJgBgkiTrQg4/euAIyr+S5v0vBzWjO1wnfTQU74w=="}}
--- a/static/images/compose-light.svg
+++ b/static/images/compose-light.svg
--- a/static/images/compose.svg
+++ b/static/images/compose.svg
--- a/static/images/scribble.jpg
+++ b/static/images/scribble.jpg
--- a/themes/compose/.gitignore
+++ b/themes/compose/.gitignore
@ -0,0 +1,3 @@
+public/
+node_modules/
+.DS_Store
--- a/themes/compose/LICENSE
+++ b/themes/compose/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Weru
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/themes/compose/README.md
+++ b/themes/compose/README.md
@ -0,0 +1,101 @@
+# Compose
+
+Compose is a [Hugo](https://gohugo.io/) theme for documentation websites, inspired by [forestry.io](forestry.io)'s docs page. The theme provides a simple navigation & structure.
+
+![Hugo Compose Theme](https://github.com/onweru/compose/blob/master/images/screenshot.png)
+
+## Features
+
+1. Docs
+2. Gallery Support (via shortcode)
+3. Native lazy loading of images
+
+## Installation
+
+Install a recent release of the Hugo "extended" version; ideally versions `>= 0.61.0`. If you install from [hugo releases page](https://github.com/gohugoio/hugo/releases),  __download the `_extended`__ version, which supports sass.
+
+## Run your site with compose theme
+
+You could go with the options right below.
+
+### Option 1 (my favorite)
+
+This option enables you to load compose theme as a hugo module.
+
+```bash
+git clone https://github.com/onweru/compose.git
+cd compose/exampleSite/
+hugo server
+```
+
+> There's one drawback to this technique. Your site would always use the most up-to-date version of the theme. This might break your site if there are drastic changes that you don't like.
+
+You can overcome that drawback by forking the repo instead and following the same approach. Be sure the edit the `theme = ["github.com/onweru/compose"]` from the config.toml file appropriately.
+
+> ⚠️ If you choose __Option 2__ or __Option 3__ below, ensure you edit [these lines in the config.toml file](https://github.com/onweru/compose/blob/b3e30e0816621223224897edc45eeeabd0d9cd16/exampleSite/config.toml#L4-L7) as advised on the comments
+
+### Option 2 (recommended)
+
+Generate a new Hugo site and add this theme as a Git submodule inside your themes folder:
+
+```bash
+hugo new site yourSiteName
+cd yourSiteName
+git init
+git submodule add https://github.com/onweru/compose.git themes/compose
+cp -a themes/compose/exampleSite/* .
+```
+
+Then run
+
+```bash
+hugo server
+```
+
+Hurray!
+
+### Option 3 (Great for testing quickly)
+
+You can run your site directly from the `exampleSite`. To do so, use the following commands:
+
+```bash
+git clone https://github.com/onweru/compose.git
+cd compose/exampleSite/
+hugo server --themesDir ../..
+```
+
+> Although, option 3 is great for quick testing, it is somewhat problematic when you want to update your theme. You would need to be careful not to overwrite your changes.
+
+Once set, jump over to the `config.toml` file and start [configuring](#configuration) your site.
+
+## ExampleSite
+
+The [exampleSite](https://github.com/onweru/compose/exampleSite), as the theme's user guide.
+
+> This guide covers the necessary bits. As the project evolves, the userguide will get more comprehensive
+
+You can use Hugo to generate and serve a local copy of the guide (also useful for testing local theme changes), making sure you have installed all the prerequisites listed above:
+
+```
+git clone --recurse-submodules --depth 1 https://github.com/onweru/compose.git
+cd compose/exampleSite/
+hugo server --themesDir ../..
+```
+
+Note that you need the `themesDir` flag when running Hugo because the site files are inside the theme repo.
+
+### How do I disable dark mode?
+
+Under `params` add `enableDarkMode = false` to your `config.toml` file. If your site is based on the exampleSite, the value is already included; you only need to uncomment it.
+
+> The user will still have the option to activate dark mode, if they so wish
+
+## From the same creator
+
+1. [Clarity Theme](https://github.com/onweru/compose/)
+2. [Newsroom Theme](https://github.com/onweru/newsroom)
+3. [Swift Theme](https://github.com/onweru/hugo-swift-theme)
+
+## License
+
+This theme is available under the [MIT license](https://github.com/onweru/compose/blob/master/LICENSE.md).
--- a/themes/compose/assets/js/functions.js
+++ b/themes/compose/assets/js/functions.js
@ -0,0 +1,108 @@
+const parentURL = '{{ absURL "" }}';
+const doc = document.documentElement;
+
+function isObj(obj) {
+  return (obj && typeof obj === 'object' && obj !== null) ? true : false;
+}
+
+function createEl(element = 'div') {
+  return document.createElement(element);
+}
+
+function emptyEl(el) {
+  while(el.firstChild)
+  el.removeChild(el.firstChild);
+}
+
+function elem(selector, parent = document){
+  let elem = isObj(parent) ? parent.querySelector(selector) : false;
+  return elem ? elem : false;
+}
+
+function elems(selector, parent = document) {
+  let elems = isObj(parent) ?parent.querySelectorAll(selector) : [];
+  return elems.length ? elems : false;
+}
+
+function pushClass(el, targetClass) {
+  if (isObj(el) && targetClass) {
+    let elClass = el.classList;
+    elClass.contains(targetClass) ? false : elClass.add(targetClass);
+  }
+}
+
+function deleteClass(el, targetClass) {
+  if (isObj(el) && targetClass) {
+    let elClass = el.classList;
+    elClass.contains(targetClass) ? elClass.remove(targetClass) : false;
+  }
+}
+
+function modifyClass(el, targetClass) {
+  if (isObj(el) && targetClass) {
+    const elClass = el.classList;
+    elClass.contains(targetClass) ? elClass.remove(targetClass) : elClass.add(targetClass);
+  }
+}
+
+function containsClass(el, targetClass) {
+  if (isObj(el) && targetClass && el !== document ) {
+    return el.classList.contains(targetClass) ? true : false;
+  }
+}
+
+function isChild(node, parentClass) {
+  let objectsAreValid = isObj(node) && parentClass && typeof parentClass == 'string';
+  return (objectsAreValid && node.closest(parentClass)) ? true : false;
+}
+
+function elemAttribute(elem, attr, value = null) {
+  if (value) {
+    elem.setAttribute(attr, value);
+  } else {
+    value = elem.getAttribute(attr);
+    return value ? value : false;
+  }
+}
+
+function deleteChars(str, subs) {
+  let newStr = str;
+  if (Array.isArray(subs)) {
+    for (let i = 0; i < subs.length; i++) {
+      newStr = newStr.replace(subs[i], '');
+    }
+  } else {
+    newStr = newStr.replace(subs, '');
+  }
+  return newStr;
+}
+
+function isBlank(str) {
+  return (!str || str.trim().length === 0);
+}
+
+function isMatch(element, selectors) {
+  if(isObj(element)) {
+    if(selectors.isArray) {
+      let matching = selectors.map(function(selector){
+        return element.matches(selector)
+      })
+      return matching.includes(true);
+    }
+    return element.matches(selectors)
+  }
+}
+
+function closestInt(goal, collection) {
+  const closest = collection.reduce(function(prev, curr) {
+    return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);
+  });
+  return closest;
+}
+
+function hasClasses(el) {
+  if(isObj(el)) {
+    const classes = el.classList;
+    return classes.length
+  }
+}
--- a/themes/compose/assets/js/index.js
+++ b/themes/compose/assets/js/index.js
@ -0,0 +1,317 @@
+(function calcNavHeight(){
+  const nav = elem('.nav_header');
+  const navHeight = nav.offsetHeight + 25;
+  const docContent = elem('main');
+  // docContent.style.paddingTop = `${navHeight}px`;
+  return navHeight;
+})();
+
+(function markInlineCodeTags(){
+  const codeBlocks = elems('code');
+  if(codeBlocks) {
+    codeBlocks.forEach(function(codeBlock){
+      if(!hasClasses(codeBlock)) {
+        codeBlock.children.length ? false : pushClass(codeBlock, 'noClass');
+      }
+    });
+  }
+})();
+
+function activeHeading(position, listLinks) {
+  let active = 'active';
+
+  let linksToModify = Object.create(null);
+  linksToModify.active = listLinks.filter(function(link) {
+    return containsClass(link, active);
+  })[0];
+
+  // activeTocLink ? deleteClass
+
+  linksToModify.new = listLinks.filter(function(link){
+    return parseInt(link.dataset.position) === position
+  })[0];
+
+  if (linksToModify.active != linksToModify.new) {
+    linksToModify.active ? deleteClass(linksToModify.active, active): false;
+    pushClass(linksToModify.new, active);
+  }
+};
+
+function loadActions() {
+  (function updateDate() {
+    const date = new Date();
+    const year = date.getFullYear();
+    const yearEl = elem('.year');
+    yearEl ? year.innerHTML = year : false;
+  })();
+
+  (function customizeSidebar(){
+    const tocActive = 'toc_active';
+    const aside = elem('aside');
+    const tocs = elems('nav', aside);
+    if(tocs) {
+      tocs.forEach(function(toc){
+        toc.id = "";
+        pushClass(toc, 'toc');
+        if(toc.children.length >= 1) {
+          const tocItems = Array.from(toc.children[0].children);
+
+          const previousHeading = toc.previousElementSibling;
+          previousHeading.matches('.active') ? pushClass(toc, tocActive) : false;
+
+          tocItems.forEach(function(item){
+            pushClass(item, 'toc_item');
+            pushClass(item.firstElementChild, 'toc_link');
+          })
+        }
+      });
+
+      const currentToc = elem(`.${tocActive}`);
+
+      if(currentToc) {
+        const pageInternalLinks = Array.from(elems('a', currentToc));
+
+        const pageIds = pageInternalLinks.map(function(link){
+          return link.hash;
+        });
+
+        const linkPositions = pageIds.map(function(id){
+          const heading = elem(id);
+          const position = heading.offsetTop;
+          return position;
+        });
+
+        pageInternalLinks.forEach(function(link, index){
+          link.dataset.position = linkPositions[index]
+        });
+
+        window.addEventListener('scroll', function(e) {
+          // this.setTimeout(function(){
+          let position = window.scrollY;
+          let active = closestInt(position, linkPositions);
+          activeHeading(active, pageInternalLinks);
+          // }, 1500)
+        });
+      }
+    }
+  })();
+
+  (function markExternalLinks(){
+    let links = elems('a');
+    const contentWrapperClass = '.content';
+    if(links) {
+      Array.from(links).forEach(function(link, index){
+        let target, rel, blank, noopener, attr1, attr2, url, isExternal;
+        url = elemAttribute(link, 'href');
+        isExternal = (url && typeof url == 'string' && url.startsWith('http')) && !url.startsWith(parentURL) && link.closest(contentWrapperClass);
+        if(isExternal) {
+          target = 'target';
+          rel = 'rel';
+          blank = '_blank';
+          noopener = 'noopener';
+          attr1 = elemAttribute(link, target);
+          attr2 = elemAttribute(link, noopener);
+
+          attr1 ? false : elemAttribute(link, target, blank);
+          attr2 ? false : elemAttribute(link, rel, noopener);
+        }
+      });
+    }
+  })();
+
+  let headingNodes = [], results, link, icon, current, id,
+  tags = ['h2', 'h3', 'h4', 'h5', 'h6'];
+
+  current = document.URL;
+
+  tags.forEach(function(tag){
+    results = document.getElementsByTagName(tag);
+    Array.prototype.push.apply(headingNodes, results);
+  });
+
+  function sanitizeURL(url) {
+    // removes any existing id on url
+    const hash = '#';
+    const positionOfHash = url.indexOf(hash);
+    if(positionOfHash > -1 ) {
+      const id = url.substr(positionOfHash, url.length - 1);
+      url = url.replace(id, '');
+    }
+    return url
+  }
+
+  headingNodes.forEach(function(node){
+    link = createEl('a');
+    icon = createEl('img');
+    icon.src = '{{ absURL "icons/link.svg" }}';
+    link.className = 'link icon';
+    link.appendChild(icon);
+    id = node.getAttribute('id');
+    if(id) {
+      link.href = `${sanitizeURL(current)}#${id}`;
+      node.appendChild(link);
+      pushClass(node, 'link_owner');
+    }
+  });
+
+  const copyToClipboard = str => {
+    let copy, selection, selected;
+    copy = createEl('textarea');
+    copy.value = str;
+    copy.setAttribute('readonly', '');
+    copy.style.position = 'absolute';
+    copy.style.left = '-9999px';
+    selection = document.getSelection();
+    doc.appendChild(copy);
+    // check if there is any selected content
+    selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
+    copy.select();
+    document.execCommand('copy');
+    doc.removeChild(copy);
+    if (selected) { // if a selection existed before copying
+      selection.removeAllRanges(); // unselect existing selection
+      selection.addRange(selected); // restore the original selection
+    }
+  }
+
+
+  function copyFeedback(parent) {
+    const copyText = document.createElement('div');
+    const yanked = 'link_yanked';
+    copyText.classList.add(yanked);
+    copyText.innerText = 'Link Copied';
+    if(!elem(`.${yanked}`, parent)) {
+      parent.appendChild(copyText);
+      setTimeout(function() { 
+        // parent.removeChild(copyText)
+      }, 3000);
+    }
+  }
+
+  (function copyHeadingLink() {
+    let deeplink, deeplinks, newLink, parent, target;
+    deeplink = 'link';
+    deeplinks = elems(`.${deeplink}`);
+    if(deeplinks) {
+      document.addEventListener('click', function(event)
+      {
+        target = event.target;
+        parent = target.parentNode;
+        if (target && containsClass(target, deeplink) || containsClass(parent, deeplink)) {
+          event.preventDefault();
+          newLink = target.href != undefined ? target.href : target.parentNode.href;
+          copyToClipboard(newLink);
+          target.href != undefined ?  copyFeedback(target) : copyFeedback(target.parentNode);
+        }
+      });
+    }
+  })();
+
+  const light = 'light';
+  const dark = 'dark';
+  const storageKey = 'colorMode';
+  const key = '--color-mode';
+  const data = 'data-mode';
+  const bank = window.localStorage;
+
+  function prefersColor(mode){
+    return `(prefers-color-scheme: ${mode})`;
+  }
+
+  function systemMode() {
+    if (window.matchMedia) {
+      const prefers = prefersColor(dark);
+      return window.matchMedia(prefers).matches ? dark : light;
+    }
+    return light;
+  }
+
+  function currentMode() {
+    let acceptableChars = light + dark;
+    acceptableChars = [...acceptableChars];
+    let mode = getComputedStyle(doc).getPropertyValue(key).replace(/\"/g, '').trim();
+
+    mode = [...mode].filter(function(letter){
+      return acceptableChars.includes(letter);
+    });
+
+    return mode.join('');
+  }
+
+  function changeMode(isDarkMode) {
+    if(isDarkMode) {
+      bank.setItem(storageKey, light)
+      elemAttribute(doc, data, light);
+    } else {
+      bank.setItem(storageKey, dark);
+      elemAttribute(doc, data, dark);
+    }
+  }
+
+  (function lazy() {
+    function lazyLoadMedia(element) {
+      let mediaItems = elems(element);
+      if(mediaItems) {
+        Array.from(mediaItems).forEach(function(item) {
+          item.loading = "lazy";
+        });
+      }
+    }
+    lazyLoadMedia('iframe');
+    lazyLoadMedia('img');
+  })();
+
+  function pickModePicture(user, system, context) {
+    const pictures = elems('picture');
+    if(pictures) {
+      pictures.forEach(function(picture){
+        let source = picture.firstElementChild;
+        if(user == system) {
+          context ? source.media = prefersColor(dark) : false;
+        } else {
+          if(system == light) {
+            source.media = (user === dark) ? prefersColor(light) : prefersColor(dark) ;
+          } else {
+            source.media = (user === dark) ? prefersColor(dark) : prefersColor(light) ;
+          }
+        }
+      });
+    }
+  }
+
+  function setUserColorMode(mode = false) {
+    const isDarkMode = currentMode() == dark;
+    const storedMode = bank.getItem(storageKey);
+    if(storedMode) {
+      if(mode) {
+        changeMode(isDarkMode);
+      } else {
+        elemAttribute(doc, data, storedMode);
+      }
+    } else {
+      if(mode === true) {
+        changeMode(isDarkMode)
+      }
+    }
+    const sysMode = systemMode();
+    const userMode = doc.dataset.mode;
+    doc.dataset.systemmode = sysMode;
+    if(userMode) {
+      pickModePicture(userMode,sysMode,mode);
+    }
+  }
+
+  setUserColorMode();
+
+  doc.addEventListener('click', function(event) {
+    let target = event.target;
+    let modeClass = 'color_choice';
+    let isModeToggle = containsClass(target, modeClass);
+    if(isModeToggle) {
+      setUserColorMode(true);
+    }
+  });
+
+}
+
+window.addEventListener('load', loadActions());
--- a/themes/compose/assets/js/lunr.js
+++ b/themes/compose/assets/js/lunr.js
--- a/themes/compose/assets/js/search.js
+++ b/themes/compose/assets/js/search.js
@ -0,0 +1,101 @@
+const idx = lunr(function () {
+  this.field('id')
+  this.field('link')
+  this.field('title')
+  this.field('body')
+
+  {{ range $index, $page := .Site.Pages }}
+  this.add({
+    "id": "{{ $index }}",
+    "link": "{{ .Permalink }}",
+    "title": "{{ .Title }}",
+    "body": "{{ .PlainWords }}".toLowerCase(),
+  });
+  {{ end }}
+});
+
+const simpleIndex = [
+  {{ range $index, $page := .Site.Pages }}
+   {
+     id: {{ $index }},
+     link: "{{ .Permalink }}",
+     title: "{{ .Title }}",
+   },
+  {{ end }}
+];
+
+function searchResults(results=[], order =[],query="") {
+  let resultsFragment = new DocumentFragment();
+  let showResults = elem('.search_results');
+  emptyEl(showResults);
+  let index = 0
+  if(results.length) {
+    let resultsTitle = createEl('h3');
+    resultsTitle.className = 'search_title';
+    resultsTitle.innerText = 'Quick Links';
+    resultsFragment.appendChild(resultsTitle);
+    results.slice(0,6).forEach(function(result){
+      let item = createEl('a');
+      item.href = `${result.link}?query=${query}`;
+      item.className = 'search_result';
+      item.textContent = result.title;
+      item.style.order = order[index];
+      resultsFragment.appendChild(item);
+      index += 1
+    });
+  } else {
+    showResults.innerHTML = "";
+  }
+  showResults.appendChild(resultsFragment);
+}
+
+function search(){
+  const searchField = elem('.search_field');
+
+  if (searchField) {
+    searchField.addEventListener('input', function(event) {
+      const searchTerm = this.value.trim().replaceAll(" ", " +").toLowerCase();
+      if(searchTerm.length >= 3) {
+        let rawResults = idx.search(`+${searchTerm}`);
+
+
+        if(rawResults.length) {
+
+          let refs = rawResults.map(function(ref){
+            // return id and score in a single string
+            return `${ref.ref}:${ref.score}`;
+          });
+
+          let ids = refs.map(function(id){
+            let positionOfSeparator = id.indexOf(":");
+            id = id.substring(0,positionOfSeparator)
+            return Number(id);
+          });
+
+          let scores = refs.map(function(score){
+            let positionOfSeparator = score.indexOf(":");
+            score = score.substring((positionOfSeparator + 1), (score.length - 1));
+            return (parseFloat(score) * 50).toFixed(0);
+          });
+
+          let matchedDocuments = simpleIndex.filter(function(doc){
+            return ids.includes(doc.id);
+          });
+
+          matchedDocuments.length >= 1 ? searchResults(matchedDocuments, scores,searchTerm) : false;
+        } else {
+          searchResults();
+        }
+
+      } else {
+        searchResults();
+      }
+    });
+  }
+}
+
+let alltext = doc.innerHTML;
+// doc.innerHTML = alltext.replaceAll('is', '<span class="is">is</span>');
+
+
+window.addEventListener('load', () => search());
--- a/themes/compose/assets/sass/_base.sass
+++ b/themes/compose/assets/sass/_base.sass
@ -0,0 +1,170 @@
+*
+  box-sizing: border-box
+  -webkit-appearance: none
+  margin: 0
+  padding: 0
+
+body, html
+  scroll-behavior: smooth
+  font-kerning: normal
+  -webkit-text-size-adjust: 100%
+
+body
+  font-family: var(--font)
+  background-color: var(--bg)
+  color: var(--text)
+  font-size: 16px
+  line-height: 1.5
+  max-width: 1440px
+  margin: 0 auto
+  position: relative
+  font-kerning: normal
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  min-height: 100vh
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+a
+  text-decoration: none
+  color: inherit
+p
+  padding: 1rem 0
+li
+  padding: 0.25rem 0
+  p
+    padding: 0.5rem 0
+blockquote
+  opacity: 0.8
+  padding: 1rem
+  position: relative
+  quotes: '\201C''\201D''\2018''\2019'
+  margin: 0.75rem 0
+  display: flex
+  flex-flow: row wrap
+  background-repeat: no-repeat
+  background-size: 5rem
+  background-position: 50% 50%
+  position: relative
+  &::before
+    content: ""
+    padding: 1px
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    background: var(--theme)
+
+  p
+    padding-left: 0.5rem 0 !important
+    font-size: 1.1rem !important
+    width: 100%
+    font-weight: 300
+    font-style: italic
+
+h1,h2,h3,h4,h5
+  font-family: inherit
+  font-weight: 500
+  padding: 0.33rem 0
+  color: inherit
+  line-height: 1.35
+
+h1
+  font-size: 200%
+h2
+  font-size: 175%
+h3
+  font-size: 150%
+h4
+  font-size: 125%
+h5
+  font-size: 120%
+h6
+  font-size: 100%
+
+img, svg, figure
+  max-width: 100%
+  vertical-align: middle
+img
+  height: auto
+  margin: 1rem auto
+  padding: 0
+
+main
+  padding-bottom: 45px
+  flex: 1
+
+
+ol, ul
+  list-style: none
+
+b, strong
+  font-weight: 500
+
+hr
+  border: none
+  padding: 0.5px
+  background: var(--text)
+  opacity: 0.5
+  margin: 1rem 0
+
+aside
+  max-height: 80vh
+  overflow-y: auto
+  background: var(--accent)
+  padding: 1rem 1.5rem
+  padding-bottom: 2rem
+  border-radius: 0.25rem
+  align-self: start
+  @media screen and (min-width: 42rem)
+    position: sticky
+    top: 2.5rem
+  h3
+    position: relative
+  ul
+    padding: 0
+    list-style: none
+
+th, td
+  padding: 0.5rem
+  font-weight: 400 !important
+  &:not(:first-child)
+    padding-left: 1.5rem
+
+thead
+  background: var(--theme)
+  color: var(--light)
+  font-weight: 400
+  text-align: left
+
+tbody
+  tr
+    &:nth-child(even)
+      background-color: var(--accent) !important
+      box-shadow: 0 1rem 0.75rem -0.75rem rgba(0,0,0,0.07)
+
+table
+  margin: 1.5rem 0
+  width:  100%
+
+.main
+  flex: 1
+
+.page
+  &-home
+    h1
+      font-weight: 300
+
+.content
+  ul, ol
+    padding-left: 1.1rem
+  ul
+    list-style: initial
+  ol
+    list-style: decimal
+  a:not(.button)
+    color: var(--theme)
+
+::placeholder
+  font-size: 1rem
--- a/themes/compose/assets/sass/_components.sass
+++ b/themes/compose/assets/sass/_components.sass
@ -0,0 +1,268 @@
+.section
+  &_title
+    font-size: 1.25rem
+  &_link
+    font-size: 1rem
+    font-weight: 400
+
+.sidebar
+  &-link
+    display: grid
+    padding: 0.2rem 0
+
+.toc
+  border-left: 2px solid var(--theme)
+  padding: 0 1rem
+  height: 0
+  overflow: hidden
+  &_active
+    height: initial
+.search
+  flex: 1
+  display: flex
+  justify-content: flex-end
+  position: relative
+  &_field
+    padding: 0.5rem 1.5rem 0.5rem 2.5rem
+    border-radius: 1.5rem
+    width: 13.5rem
+    outline: none
+    border: none
+    background: transparent
+    color: var(--text)
+    box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
+    font-size: 1rem
+  &_label
+    width: 1.25rem
+    height: 1.25rem
+    position: absolute
+    left: 0.33rem
+    top: 0.25rem
+    opacity: 0.33
+    svg
+      width: 100%
+      height: 100%
+      fill: var(--text)
+  &_result
+    padding: 0.5rem 1rem
+    &:hover
+      background-color: var(--theme)
+      color: var(--light)
+    &s
+      width: 13.5rem
+      background-color: var(--overlay)
+      border-radius: 0 0 0.25rem 0.25rem
+      box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
+      position: absolute
+      top: 125%
+      display: grid
+      overflow: hidden
+      &:empty
+        display: none
+  &_title
+    padding: 0.5rem 1rem 0.5rem 1rem
+    background: var(--theme)
+    color: var(--light)
+    font-size: 0.9rem
+    opacity: 0.87
+    text-transform: uppercase
+
+.button
+  background-color: var(--theme)
+  color: var(--light)
+  border-radius: 0.25rem
+  display: inline-grid
+  padding: 0.75rem 1.5rem
+  text-align: center
+  &:hover
+    opacity: 0.84
+  & + &
+    background-color: var(--haze)
+    color: var(--dark)
+    @media screen and (min-width: 20rem)
+      margin-left: 0.5rem
+
+.video
+  overflow: hidden
+  padding-bottom: 56.25%
+  position: relative
+  height: 0
+  margin: 1.5rem 0
+  border-radius: 0.6rem
+  background-color: var(--bg)
+  box-shadow: 0 1rem 2rem rgba(0,0,0,0.17)
+  iframe
+    left: 0
+    top: 0
+    height: 100%
+    width: 100%
+    border: none
+    position: absolute
+    transform: scale(1.02)
+.icon
+  width: 1.1rem
+  height: 1.1rem
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  margin: 0 0.5rem
+
+.link
+  opacity: 0
+  position: relative
+  &_owner:hover &
+    opacity: 1
+  &_yank
+    opacity: 1
+    &ed
+      position: absolute
+      right: -1rem
+      top: -2rem
+      background-color: var(--theme)
+      color: var(--light)
+      width: 7rem
+      padding: 0.25rem 0.5rem
+      font-size: 0.9rem
+      border-radius: 1rem
+      text-align: center
+      &::after
+        position: absolute
+        top: 1rem
+        content: ""
+        border-color: var(--theme) transparent
+        border-style: solid
+        border-width: 1rem 1rem 0 1rem
+        height: 0
+        width: 0
+        transform-origin: 50% 50%
+        transform: rotate(145deg)
+        right: 0.45rem
+
+.gallery
+  width: 100%
+  column-count: 3
+  column-gap: 1rem
+  @media screen and (max-width: 667px)
+    column-count: 2
+  &_item
+    background-color: transparent
+    margin: 0 0 1rem
+  &_image
+    margin: 0 auto
+
+.pager
+  display: flex
+  justify-content: space-between
+  align-items: center
+  padding-top: 2rem
+  margin: 2rem 0
+  svg
+    filter: opacity(0.75)
+    width: 1.25rem
+    height: 1rem
+    transform-origin: 50% 50%
+
+  &_lean
+    justify-content: flex-end
+
+  &_label
+    max-width: 100%
+    overflow: hidden
+    white-space: nowrap
+    text-overflow: ellipsis
+
+  &_link
+    padding: 0.5rem 1rem
+    border-radius: 0.25rem
+    width: 12.5rem
+    max-width: 40vw
+    position: relative
+    display: flex
+    align-items: center
+    text-align: center
+    justify-content: center
+    &::before, &::after
+      background-image: url(../images/next.svg)
+      height: 0.8rem
+      width: 0.8rem
+      background-size: 100%
+      background-repeat: no-repeat
+      transform-origin: 50% 50%
+
+  &_item
+    display: flex
+    flex-direction: column
+    flex: 1
+    max-width: 48%
+    // filter: opacity(0.87)
+    &.prev
+      align-items: flex-start
+      // margin-right: 0.5rem
+
+    &.next
+      align-items: flex-end
+      // margin-left: 0.5rem
+      &::after
+        content: ""
+
+  &_item.prev &_link
+    &::before
+      content: ""
+      transform: rotate(180deg)
+      margin-right: 0.67rem
+
+  &_item.next &_link
+    &::after
+      content: ""
+      margin-left: 0.67rem
+
+  &_item.next &_link
+    grid-template-columns: 1fr 1.5rem
+
+  &_meta
+    margin: 0.5rem 0
+
+.color
+  &_mode
+    height: 1.5rem
+    display: grid
+    grid-template-columns: 1fr 3rem
+    align-items: center
+    margin: 0 1.5rem
+
+  &_choice
+    outline: none
+    border: none
+    -webkit-appearance: none
+    height: 1rem
+    position: relative
+    &::before, &::after
+      content: ""
+      top: 0
+      bottom: 0
+      left: 0
+      position: absolute
+      height: 1rem
+      background: var(--theme)
+
+    &, &::before
+      width: 2.75rem
+      border-radius: 1rem
+      cursor: pointer
+      transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)
+      box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.15)
+
+    &::before
+      box-shadow: 0 1rem 2rem rgba(0,0,0,0.17)
+      z-index: 2
+      right: 0
+      filter: brightness(0.75)
+
+    &::after
+      width: 1rem
+      border-radius: 50%
+      z-index: 3
+      transform: scale(1.67)
+      transform-origin: 50% 50%
+      transition: transform 0.5s cubic-bezier(.19,1,.22,1)
+      will-change: transform
--- a/themes/compose/assets/sass/_fonts.sass
+++ b/themes/compose/assets/sass/_fonts.sass
@ -0,0 +1,36 @@
+$font-path: "../fonts"
+@font-face
+  font-family: 'Metropolis'
+  font-style: normal
+  font-weight: 400
+  src: local('Metropolis Regular'), local('Metropolis-Regular'), url('#{$font-path}/Metropolis-Regular.woff2') format('woff2'), url('#{$font-path}/Metropolis-Regular.woff') format('woff')
+
+@font-face
+  font-family: 'Metropolis'
+  font-style: normal
+  font-weight: 300
+  src: local('Metropolis Light'), local('Metropolis-Light'), url('#{$font-path}/Metropolis-Light.woff2') format('woff2'), url('#{$font-path}/Metropolis-Light.woff') format('woff')
+
+@font-face
+  font-family: 'Metropolis'
+  font-style: italic
+  font-weight: 300
+  src: local('Metropolis Light Italic'), local('Metropolis-LightItalic'), url('#{$font-path}/Metropolis-LightItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-LightItalic.woff') format('woff')
+
+@font-face
+  font-family: 'Metropolis'
+  font-style: normal
+  font-weight: 500
+  src: local('Metropolis Medium'), local('Metropolis-Medium'), url('#{$font-path}/Metropolis-Medium.woff2') format('woff2'), url('#{$font-path}/Metropolis-Medium.woff') format('woff')
+
+@font-face
+  font-family: 'Metropolis'
+  font-style: italic
+  font-weight: 500
+  src: local('Metropolis Medium Italic'), local('Metropolis-MediumItalic'), url('#{$font-path}/Metropolis-MediumItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-MediumItalic.woff') format('woff')
+
+@font-face
+  font-family: 'Cookie'
+  font-style: normal
+  font-weight: 400
+  src: local('Cookie-Regular'), url('#{$font-path}/cookie-v10-latin-regular.woff2') format('woff2'), url('#{$font-path}/cookie-v10-latin-regular.woff') format('woff')
--- a/themes/compose/assets/sass/_nav.sass
+++ b/themes/compose/assets/sass/_nav.sass
@ -0,0 +1,54 @@
+.nav
+  display: grid
+  grid-gap: 1rem
+  padding: 0 1.5rem !important
+  align-items: center
+  background-color: var(--bg)
+  @media screen and (min-width: 992px)
+    grid-template-columns: 10rem 1fr
+  &_brand
+    position: relative
+    picture, img
+      max-width: 10rem
+  &_header
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    background-color: var(--bg)
+    z-index: 999999
+  &_toggle
+    position: absolute
+    top: 0
+    bottom: 0
+    width: 3rem
+    display: grid
+    align-items: center
+    text-align: center
+    right: 0
+    color: var(--text)
+    @media screen and (min-width: 992px)
+      display: none
+  &_body
+    display: flex
+    flex-direction: column
+    background: var(--accent)
+    position: fixed
+    height: 100vh
+    transform: translateX(-101vw)
+    @media screen and (min-width: 992px)
+      transform: translateX(0)
+      position: relative
+      height: initial
+      justify-content: flex-end
+      background: transparent
+      flex-direction: row
+  &-link
+    display: inline-flex
+    padding: 0.5rem 1rem
+  &-item
+    display: grid
+    align-items: center
+    .search
+      @media screen and (min-width: 992px)
+        margin-right: 1.5rem
--- a/themes/compose/assets/sass/_syntax.sass
+++ b/themes/compose/assets/sass/_syntax.sass
@ -0,0 +1,114 @@
+code 
+  min-width: 100%
+  max-width: 100%
+  &.noClass
+    color: orange
+pre
+  display: grid
+  padding: 1rem
+  overflow-x: auto
+.highlight 
+  display: grid
+  margin: 1.25rem 0
+  box-shadow: 0 0 2.5rem rgba(0,0,0,0.12)
+  border-radius: 4px
+  overflow: hidden
+  table
+    margin: 0
+    border-collapse: collapse
+    background-color: var(--overlay)
+  & & 
+    margin: 0
+
+.lntd
+  &:first-child
+    width: 2.75rem
+    background-color: var(--theme)
+    color: var(--light)
+    pre
+      padding: 0
+    code
+      display: flex
+      flex-flow: column
+      align-items: center
+  &:last-child
+    padding-left: 0
+
+
+.err
+  color: #a61717
+  background-color: #e3d2d2
+
+.hl
+  display: block
+  width: 100%
+  background-color: #ffffcc
+
+.ln
+  margin-right: 0.4rem
+  padding: 0 0.4em 0 0.4rem
+  color: #666
+
+.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt
+  color: #6ab825
+  font-weight: 500
+
+.kn , .kp
+  font-weight: 400
+
+.nb, .no, .nv
+  color: #24909d
+
+.nc, .nf, .nn
+  color: #447fcf
+
+.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .s
+  color: #ed9d13
+
+.m, .mb, .mf, .mh, .mi, .il, .mo
+  color: #3677a9
+
+.ow
+  color: #6ab825
+  font-weight: 500
+
+.c, .ch, .cm, .c1
+  color: #999
+  font-style: italic
+
+.cs
+  color: #e50808
+  background-color: #520000
+  font-weight: 500
+
+.cp, .cpf
+  color: #cd2828
+  font-weight: 500
+
+.gd, .gr
+  color: #d22323
+
+.ge
+  font-style: italic
+
+.gh, .gu, .nd, .na, .ne
+  color: #ffa500
+  font-weight: 500
+
+.gi
+  color: #589819
+
+.go
+  color: #ccc
+
+.gp
+  color: #aaa
+
+.gs
+  font-weight: 500
+
+.gt
+  color: #d22323
+
+.w
+  color: #666
--- a/themes/compose/assets/sass/_utils.sass
+++ b/themes/compose/assets/sass/_utils.sass
@ -0,0 +1,54 @@
+.wrap
+  max-width: 1240px
+  &, &
+    width: 100%
+    padding: 0 25px
+    margin: 0 auto
+
+@for $i from 1 through 4
+  $size: $i * 1.5rem
+  $x-size: $size * 0.5
+  .pt-#{$i}
+    padding-top: $size
+
+  .pb-#{$i}
+    padding-bottom: $size
+
+  .mt-#{$i}
+    margin-top: $size
+
+  .mb-#{$i}
+    margin-bottom: $size
+
+%grid
+  display: grid
+  grid-template-columns: 1fr
+
+[class*='grid-']
+  grid-gap: 2rem
+
+.grid-2, .grid-3, .grid-4, .grid-auto, .grid-reverse
+  @extend %grid
+
+@media screen and (min-width: 42rem)
+  .grid-auto
+    grid-template-columns: 2fr 5fr
+
+  .grid-reverse
+    grid-template-columns: 3fr 1fr
+
+  .grid-2
+    grid-template-columns: 1fr 1fr
+
+  .grid-3
+    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr))
+
+  .grid-4
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))
+
+.active
+  color: var(--theme)
+
+.is
+  background: var(--theme)
+  color: var(--light)
--- a/themes/compose/assets/sass/_variables.sass
+++ b/themes/compose/assets/sass/_variables.sass
@ -0,0 +1,39 @@
+html
+  --color-mode: "light"
+  --light: #fff
+  --dark:  rgb(28,28,30)
+  --haze: #f2f5f7
+  --bubble: rgb(36,36,38)
+  --accent: var(--haze)
+  --bg: var(--light)
+  --overlay: var(--light)
+  --text: #111
+  --font: 'Metropolis', sans-serif
+  --border-color: #eee
+  --theme: rgb(52,199,89)
+
+  @mixin darkmode
+    --color-mode: "dark"
+    --theme: rgb(48,209,88)
+    --bg: var(--dark)
+    --text: #eee
+    --accent: var(--bubble)
+    --overlay: var(--bubble)
+    --border-color: transparent
+    *
+      box-shadow: none !important
+
+  &[data-mode="dark"]
+    @include darkmode
+    .color
+      &_choice
+        &::after
+          transform: translateX(1.75rem) scale(1.67)
+
+  &.dark:not([data-mode="light"])
+    @media (prefers-color-scheme: dark)
+      @include darkmode
+
+%narrow
+  max-width: 750px
+  margin: 0 auto
--- a/themes/compose/assets/sass/main.sass
+++ b/themes/compose/assets/sass/main.sass
@ -0,0 +1,10 @@
+@import "variables"
+@import "base"
+@import "nav"
+@import "components"
+@import "utils"
+@import "syntax"
+@import "fonts"
+
+footer
+  min-height: 150px
--- a/themes/compose/images/screenshot.png
+++ b/themes/compose/images/screenshot.png
--- a/themes/compose/images/tn.png
+++ b/themes/compose/images/tn.png
--- a/themes/compose/layouts/404.html
+++ b/themes/compose/layouts/404.html
@ -0,0 +1,6 @@
+{{- define "main"}}
+<main>
+  <h1 id="title">Not found</h1>
+  <p>Bummer! This page doesn't exist. Y<a href='{{ absURL "" }}'>back home</a>.</p>
+</main>
+{{- end }}
--- a/themes/compose/layouts/_default/baseof.html
+++ b/themes/compose/layouts/_default/baseof.html
@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}"{{ with .Site.Params.enableDarkMode }} class="dark"{{ end }}>
+<head>
+  {{- partial "head" . }}
+</head>
+<body class="page-{{ .Kind }}">
+  <header class="nav_header">
+    {{- partial "nav" . }}
+  </header>
+  <div class="main wrap pt-4">
+    {{- if eq .Section "docs" }}
+    {{- partial "document" . }}
+    {{- else }}
+    {{- block "main" . }}{{ end }}
+    {{- end }}
+  </div>
+  {{- partial "footer" . }}
+  {{- partial "sprites" . }}
+  {{- partial "scripts" . }}
+</body>
+</html>
--- a/themes/compose/layouts/_default/list.html
+++ b/themes/compose/layouts/_default/list.html
@ -0,0 +1,3 @@
+{{- define "main" }}
+{{- .Content }}
+{{- end }}
--- a/themes/compose/layouts/_default/single.html
+++ b/themes/compose/layouts/_default/single.html
@ -0,0 +1,7 @@
+{{- define "main" }}
+<div class="content">
+	<h1>{{ .Title }}</h1>
+	{{ with .Params.description }}<div>{{ . | markdownify }}</div>{{ end }}
+  {{- .Content }}
+</div>
+{{- end }}
--- a/themes/compose/layouts/index.html
+++ b/themes/compose/layouts/index.html
@ -0,0 +1,3 @@
+{{- define "main" }}
+  {{ .Content }}
+{{- end }}
--- a/themes/compose/layouts/partials/document.html
+++ b/themes/compose/layouts/partials/document.html
@ -0,0 +1,8 @@
+<div class="grid-auto">
+  {{- partial "sidebar" . }}
+  <main class="content">
+    <h1>{{ .Title }}</h1>
+    {{- .Content }}
+    {{ partial "pager" . }}
+  </main>
+</div>
--- a/themes/compose/layouts/partials/footer.html
+++ b/themes/compose/layouts/partials/footer.html
@ -0,0 +1,8 @@
+{{ if .Site.Params.enableCopyright | default true }}
+<footer class="mt-2 pt-2 pb-2">
+  <div class="wrap">
+    <p>&copy; {{ now.Year }} {{ .Site.Params.author }}</p>
+  </div>
+</footer>
+{{ end }}
+
--- a/themes/compose/layouts/partials/head.html
+++ b/themes/compose/layouts/partials/head.html
@ -0,0 +1,21 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+{{- hugo.Generator }}
+{{- $iconsPath := "/favicons/" }}
+<link rel="apple-touch-icon" sizes="180x180" href='{{ absURL (printf "%sapple-touch-icon.png" $iconsPath) }}'>
+<link rel="icon" type="image/png" sizes="32x32" href='{{ absURL (printf "%sfavicon-32x32.png" $iconsPath) }}'>
+<link rel="icon" type="image/png" sizes="16x16" href='{{ absURL (printf "%sfavicon-16x16.png" $iconsPath) }}'>
+<link rel="manifest" href='{{ absURL (printf "%ssite.webmanifest" $iconsPath) }}'>
+<link rel="mask-icon" href='{{ absURL (printf "%ssafari-pinned-tab.svg" $iconsPath) }}'  color="#004750">
+<link rel="shortcut icon" href='{{ absURL (printf "%sfavicon.ico" $iconsPath) }}'>
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-config" content='{{ absURL (printf "%sbrowserconfig.xml" $iconsPath) }}'>
+<meta name="theme-color" content="#ffffff">
+
+<title>{{ if and .Title (ne (trim (lower .Site.Title) "") (trim (lower .Title) "")) }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
+
+{{- partial "opengraph" . }}
+
+{{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}}
+{{- $styles := resources.Get "sass/main.sass" | resources.ExecuteAsTemplate "main.sass" . | resources.ToCSS $options | resources.Fingerprint "sha512" }}
+<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}">
--- a/themes/compose/layouts/partials/mode.html
+++ b/themes/compose/layouts/partials/mode.html
@ -0,0 +1,4 @@
+<div class = 'color_mode'>
+  <label for = 'mode'></label>
+  <input type = 'checkbox' class = 'color_choice' id = 'mode' title="Toggle Dark Mode">
+</div>
--- a/themes/compose/layouts/partials/nav.html
+++ b/themes/compose/layouts/partials/nav.html
@ -0,0 +1,40 @@
+{{- $s := .Site }}
+{{- $sp := $s.Params }}
+<nav class="wrap nav">
+	<a href="{{ $s.BaseURL }}" class="nav_brand">
+		{{- $logos := $sp.logo }}
+		{{- $litPath := absURL (printf "images/%s" $logos.lightMode) }}
+		{{- $darkPath := absURL (printf "images/%s" $logos.darkMode) }}
+		<picture data-lit="{{ $litPath }}" data-dark="{{ $darkPath }}">
+			{{ with $sp.enableDarkMode }}
+			<source srcset = '{{ $darkPath }}' media="(prefers-color-scheme: dark)">
+			{{ end }}
+			<img srcset = '{{ $litPath }}' alt = '{{ $s.Title }} Logo'>
+		</picture>
+		<label class="nav_toggle">Menu</label>
+	</a>
+	<ul class="nav_body">
+		<li class="nav-item">
+			{{- partial "search" . }}
+		</li>
+		{{- $p := . }}
+		{{- range $s.Menus.main }}
+		<li class="nav-item">
+			{{- $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
+			{{- with .Page }}
+			{{- $active = or $active ( $.IsDescendant .)  }}
+			{{- end }}
+			{{- $url := absURL .URL }}
+			{{- if or (hasPrefix .URL "http") (hasPrefix .URL "www.") }}
+				{{- $url = .URL }}
+			{{- end }}
+			<a class="nav-link{{if $active }} active{{end}}" href="{{ $url }}"><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
+		</li>
+		{{- end }}
+		{{ $repo := $sp.source }}
+		<li class="nav-item">
+			<a class="nav-link" href="{{ $repo.url }}" target="_blank">{{ $repo.name }}</a>
+		</li>
+		<li class="nav-item">{{ partial "mode" . }}</li>
+	</ul>
+</nav>
--- a/themes/compose/layouts/partials/opengraph.html
+++ b/themes/compose/layouts/partials/opengraph.html
@ -0,0 +1,6 @@
+{{- template "_internal/opengraph.html" . -}}
+{{- template "_internal/schema.html" . -}}
+{{- template "_internal/twitter_cards.html" . -}}
+{{- if eq (getenv "HUGO_ENV") "production" }}
+{{- template "_internal/google_analytics_async.html" . }}
+{{- end }}
--- a/themes/compose/layouts/partials/pager.html
+++ b/themes/compose/layouts/partials/pager.html
@ -0,0 +1,20 @@
+<div class="pager{{ if .Next }}{{ else }} pager_lean{{ end }}">
+  {{ with .Site.RegularPages.Next . }}
+  <div class="pager_item prev">
+    <!-- <span class="pager_meta">PREVIOUS</span> -->
+    <a href="{{ .Permalink }}" class="pager_link button" title="{{ .Title }}">
+      <span class="pager_label">{{ .Title }}</span>
+    </a>
+  </div>
+  {{ end }}
+
+  {{ with .Site.RegularPages.Prev . }}
+  <div class="pager_item next">
+    <!-- <span class="pager_meta">NEXT</span> -->
+    <a href="{{ .Permalink }}" class="pager_link button" title="{{ .Title }}">
+      <span class="pager_label">{{ .Title }}</span>
+    </a>
+  </div>
+  {{ end }}
+</div>
+{{ partial "sprites" . }}
--- a/themes/compose/layouts/partials/scripts.html
+++ b/themes/compose/layouts/partials/scripts.html
@ -0,0 +1,16 @@
+{{- $funcPath := "js/functions.js" }}
+{{- $functions := resources.Get $funcPath | resources.ExecuteAsTemplate $funcPath . }}
+
+{{- $lunrPath := "js/lunr.js" }}
+{{- $lunr := resources.Get $lunrPath | resources.ExecuteAsTemplate $lunrPath . }}
+
+{{- $searchPath := "js/search.js" }}
+{{- $search := resources.Get $searchPath | resources.ExecuteAsTemplate $searchPath . }}
+
+{{- $mainScriptPath := "js/index.js" }}
+{{- $main := resources.Get $mainScriptPath | resources.ExecuteAsTemplate $mainScriptPath . }}
+
+{{- $bundle := slice $functions $main | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
+{{- $bundle2 := slice $lunr $search | resources.Concat "js/search.js" | resources.Minify | resources.Fingerprint "sha512" }}
+<script src="{{ $bundle.Permalink }}"></script>
+<script src="{{ $bundle2.Permalink }}" async defer></script>
--- a/themes/compose/layouts/partials/search.html
+++ b/themes/compose/layouts/partials/search.html
@ -0,0 +1,10 @@
+{{ if .Site.Params.enableSearch | default true }}
+<div class="search">
+  <label for="find" class="search_label">
+    {{- partial "sprite" (dict "icon" "search") }}
+  </label>
+  <input type="search" class="search_field" placeholder="{{ .Site.Params.searchPlaceholder }}" id="find" autocomplete="off">
+  <div class="search_results"></div>
+</div>
+{{ end }}
+
--- a/themes/compose/layouts/partials/sidebar.html
+++ b/themes/compose/layouts/partials/sidebar.html
@ -0,0 +1,26 @@
+<aside class="aside">
+  {{- template "tree" (dict "page" . "section" .FirstSection)  }}
+  {{- define "tree" }}
+  {{- $section := .section }}
+  {{- $page := .page }}
+  {{- $permalink := $page.RelPermalink }}
+  <section class="section">
+    <h2 class="section_title{{ if eq $section.RelPermalink $permalink }} active{{ end }}"><a  href="{{ $section.Permalink }}" class="group">{{ $section.Title }}</a></h2>
+      {{- $pages := $section.Pages }}
+      {{- with $pages }}
+      <section class="" id="docs-{{ anchorize $section.Title }}">
+        {{- range . }}
+        {{- if .IsPage }}
+        <h3 class="section_link{{ if eq .RelPermalink $permalink }} active{{ end }}"><a id="docs-{{ anchorize .Title }}" href="{{ .Permalink }}">{{ .Title }}</a></h3>
+        {{- if ne (print .TableOfContents) ""}}
+          {{- .TableOfContents }}
+        {{- end }}
+        {{- else }}
+        {{- template "tree" (dict "page" $page "section" .) }}
+        {{- end }}
+        {{- end }}
+      </section>
+      {{- end }}
+  </section>
+  {{- end }}
+</aside>
--- a/themes/compose/layouts/partials/sprite.html
+++ b/themes/compose/layouts/partials/sprite.html
@ -0,0 +1,3 @@
+<svg class="icon">
+  <use xlink:href="#{{ .icon }}"></use>
+</svg>
--- a/themes/compose/layouts/partials/sprites.html
+++ b/themes/compose/layouts/partials/sprites.html
@ -0,0 +1,8 @@
+<svg width="0" height="0" class="hidden">
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" id="next">
+    <path d="M484.14 226.886L306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"></path>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.999 511.999" id="search">
+    <path d="M508.874 478.708L360.142 329.976c28.21-34.827 45.191-79.103 45.191-127.309C405.333 90.917 314.416 0 202.666 0S0 90.917 0 202.667s90.917 202.667 202.667 202.667c48.206 0 92.482-16.982 127.309-45.191l148.732 148.732c4.167 4.165 10.919 4.165 15.086 0l15.081-15.082c4.165-4.166 4.165-10.92-.001-15.085zM202.667 362.667c-88.229 0-160-71.771-160-160s71.771-160 160-160 160 71.771 160 160-71.771 160-160 160z"></path>
+  </symbol>
+</svg>
--- a/themes/compose/layouts/shortcodes/block.html
+++ b/themes/compose/layouts/shortcodes/block.html
@ -0,0 +1,5 @@
+{{- $modifier := .Get 0 -}}
+{{- $bg := .Get 1 -}}
+<section class="{{ $modifier }}"  {{ with $bg }}style="background-image: url(/images/{{ . }})"{{ end }}>
+  {{- .Inner -}}
+</section>
--- a/themes/compose/layouts/shortcodes/button.html
+++ b/themes/compose/layouts/shortcodes/button.html
@ -0,0 +1,18 @@
+{{- $link := .Get 0 -}}
+{{- $label := .Get 1 }}
+{{- $icon := .Get 2 }}
+{{- $modifier := "" }}
+{{- if in $label "translucent" }}
+  {{ $modifier = "translucent" }}
+{{- end }}
+{{- if in $label "," }}
+  {{- $details := split $label "," }}
+  {{- $label = index $details 0 }}
+  {{- $modifier = printf "button_%s" (trim (index $details 1) " ") }}
+{{- end -}}
+<a href="{{ $link }}" class="button {{ $modifier }}">
+  {{- with $icon -}}
+  <img src="/images/{{ . }}" alt="icon">
+  {{- end }}
+  {{- $label -}}
+</a>
--- a/themes/compose/layouts/shortcodes/column.html
+++ b/themes/compose/layouts/shortcodes/column.html
@ -0,0 +1,4 @@
+{{- $modifier := .Get 0 -}}
+<div {{- with $modifier }} class="{{ . }}"{{ end }}>
+ {{- .Inner | markdownify -}}
+</div>
--- a/themes/compose/layouts/shortcodes/gallery.html
+++ b/themes/compose/layouts/shortcodes/gallery.html
@ -0,0 +1,9 @@
+{{- $images := split (replace (.Get 0) ", " ",") "," }}
+{{- $descriptions := split (replace (.Get 1) ":: " "::") "::" }}
+<div class="gallery">
+  {{ range $index, $image := $images }}
+  <figure class="gallery_item">
+    <img src="{{ absURL $image }} " class="gallery_image"{{ with $descriptions }}{{ with (index . $index) }} alt="{{ . }}"{{ end }}{{ end }}/>
+  </figure>
+  {{ end }}
+</div>
--- a/themes/compose/layouts/shortcodes/icon.html
+++ b/themes/compose/layouts/shortcodes/icon.html
@ -0,0 +1,6 @@
+{{- $src := .Get 0 }}
+{{- $alt := .Get 1 }}
+{{- $modifier := .Get 2 -}}
+<figure {{ with $modifier }}class="icon_{{ . }}"{{ end }}>
+  <img src="/images/{{ $src }}" alt="{{ $alt }}" class="icon">
+</figure>
--- a/themes/compose/layouts/shortcodes/image.html
+++ b/themes/compose/layouts/shortcodes/image.html
@ -0,0 +1,4 @@
+{{- $src := .Get 0 }}
+{{- $alt := .Get 1 }}
+{{- $modifier := .Get 2 -}}
+<img src="{{ $src }}"{{ with $alt }} alt="{{ . }}"{{ end }}{{ with $modifier }} class="{{ . }}"{{ end }}>
--- a/themes/compose/layouts/shortcodes/picture.html
+++ b/themes/compose/layouts/shortcodes/picture.html
@ -0,0 +1,9 @@
+{{- $normal := .Get 0 }}
+{{- $dark := .Get 1 }}
+{{- $alt := .Get 2 }}
+{{- $litPath := absURL (printf "images/%s" $normal) }}
+{{- $darkPath := absURL (printf "images/%s" $dark) }}
+<picture class="nav_logo" data-lit="{{ $litPath }}" data-dark="{{ $darkPath }}">
+  <source srcset="{{ $darkPath }}" media="(prefers-color-scheme: dark)">
+  <img srcset="{{ $litPath }}" alt="{{ $alt }}">
+</picture>
--- a/themes/compose/layouts/shortcodes/youtube.html
+++ b/themes/compose/layouts/shortcodes/youtube.html
@ -0,0 +1,4 @@
+{{- $url := .Get 0 }}
+<div class="video">
+  <iframe src="https://www.youtube.com/embed/{{ $url }}?controls=1&rel=0"></iframe>
+</div>
--- a/themes/compose/static/favicons/android-chrome-192x192.png
+++ b/themes/compose/static/favicons/android-chrome-192x192.png
--- a/themes/compose/static/favicons/android-chrome-512x512.png
+++ b/themes/compose/static/favicons/android-chrome-512x512.png
--- a/themes/compose/static/favicons/apple-touch-icon.png
+++ b/themes/compose/static/favicons/apple-touch-icon.png
--- a/themes/compose/static/favicons/favicon-16x16.png
+++ b/themes/compose/static/favicons/favicon-16x16.png
--- a/themes/compose/static/favicons/favicon-32x32.png
+++ b/themes/compose/static/favicons/favicon-32x32.png
--- a/themes/compose/static/favicons/favicon.ico
+++ b/themes/compose/static/favicons/favicon.ico
--- a/themes/compose/static/favicons/site.webmanifest
+++ b/themes/compose/static/favicons/site.webmanifest
@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--- a/themes/compose/static/fonts/Metropolis-Black.woff
+++ b/themes/compose/static/fonts/Metropolis-Black.woff
--- a/themes/compose/static/fonts/Metropolis-Black.woff2
+++ b/themes/compose/static/fonts/Metropolis-Black.woff2
--- a/themes/compose/static/fonts/Metropolis-BlackItalic.woff
+++ b/themes/compose/static/fonts/Metropolis-BlackItalic.woff
--- a/themes/compose/static/fonts/Metropolis-BlackItalic.woff2
+++ b/themes/compose/static/fonts/Metropolis-BlackItalic.woff2
--- a/themes/compose/static/fonts/Metropolis-Bold.woff
+++ b/themes/compose/static/fonts/Metropolis-Bold.woff
--- a/themes/compose/static/fonts/Metropolis-Bold.woff2
+++ b/themes/compose/static/fonts/Metropolis-Bold.woff2
--- a/themes/compose/static/fonts/Metropolis-BoldItalic.woff
+++ b/themes/compose/static/fonts/Metropolis-BoldItalic.woff
--- a/themes/compose/static/fonts/Metropolis-BoldItalic.woff2
+++ b/themes/compose/static/fonts/Metropolis-BoldItalic.woff2
--- a/themes/compose/static/fonts/Metropolis-ExtraBold.woff
+++ b/themes/compose/static/fonts/Metropolis-ExtraBold.woff
--- a/themes/compose/static/fonts/Metropolis-ExtraBold.woff2
+++ b/themes/compose/static/fonts/Metropolis-ExtraBold.woff2
--- a/themes/compose/static/fonts/Metropolis-ExtraBoldItalic.woff
+++ b/themes/compose/static/fonts/Metropolis-ExtraBoldItalic.woff
--- a/themes/compose/static/fonts/Metropolis-ExtraBoldItalic.woff2
+++ b/themes/compose/static/fonts/Metropolis-ExtraBoldItalic.woff2
--- a/themes/compose/static/fonts/Metropolis-ExtraLight.woff
+++ b/themes/compose/static/fonts/Metropolis-ExtraLight.woff
--- a/themes/compose/static/fonts/Metropolis-ExtraLight.woff2
+++ b/themes/compose/static/fonts/Metropolis-ExtraLight.woff2
--- a/themes/compose/static/fonts/Metropolis-ExtraLightItalic.woff
+++ b/themes/compose/static/fonts/Metropolis-ExtraLightItalic.woff
--- a/themes/compose/static/fonts/Metropolis-ExtraLightItalic.woff2
+++ b/themes/compose/static/fonts/Metropolis-ExtraLightItalic.woff2
--- a/themes/compose/static/fonts/Metropolis-Light.woff
+++ b/themes/compose/static/fonts/Metropolis-Light.woff
--- a/themes/compose/static/fonts/Metropolis-Light.woff2
+++ b/themes/compose/static/fonts/Metropolis-Light.woff2
--- a/themes/compose/static/fonts/Metropolis-LightItalic.woff
+++ b/themes/compose/static/fonts/Metropolis-LightItalic.woff
--- a/themes/compose/static/fonts/Metropolis-LightItalic.woff2
+++ b/themes/compose/static/fonts/Metropolis-LightItalic.woff2
--- a/themes/compose/static/fonts/Metropolis-Medium.woff
+++ b/themes/compose/static/fonts/Metropolis-Medium.woff
--- a/themes/compose/static/fonts/Metropolis-Medium.woff2
+++ b/themes/compose/static/fonts/Metropolis-Medium.woff2
--- a/themes/compose/static/fonts/Metropolis-MediumItalic.woff
+++ b/themes/compose/static/fonts/Metropolis-MediumItalic.woff
--- a/themes/compose/static/fonts/Metropolis-MediumItalic.woff2
+++ b/themes/compose/static/fonts/Metropolis-MediumItalic.woff2
			`@ -0,0 +1 @@`
			`{"Target":"css/styles.fccc4ce703dc29af233c3b6a4dafeb76ed25f379c7f1ba96b3b550dd60536081df332989801824893ad0838fdeb80232afe4b9bf4bc1cd68ced709df4d053be3.css","MediaType":"text/css","Data":{"Integrity":"sha512-/MxM5wPcKa8jPDtqTa/rdu0l83nH8bqWs7VQ3WBTYIHfMymJgBgkiTrQg4/euAIyr+S5v0vBzWjO1wnfTQU74w=="}}`
			`@ -0,0 +1 @@`
			`{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}`