✨ Add simple page layout for full-width content

Fixes #139
jpanther · Mar 7, 2022 · c185771 · c185771
1 parent 74677d9
commit c185771
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Simple page layout for creating full-width content ([#139](https://github.com/jpanther/congo/issues/139))
 - Portuguese (Portugal) translation ([#144](https://github.com/jpanther/congo/pull/144))
 
 ### Changed

diff --git a/exampleSite/content/docs/content-examples.md b/exampleSite/content/docs/content-examples.md
@@ -212,6 +212,28 @@ The theme includes an archetype to make generating these external link articles
 hugo new -k external posts/my-post.md
 ```
 
+### Simple pages
+
+|                   |                                |
+| ----------------- | ------------------------------ |
+| **Layout:**       | `layouts/_default/simple.html` |
+| **Front Matter:** | `layout: "simple"`             |
+
+Congo also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.
+
+The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page [front matter]({{< ref "front-matter" >}}) variables.
+
+To enable the simple layout on a particular page, add the `layout` front matter variable with a value of `"simple"`:
+
+```yaml
+---
+title: "My landing page"
+date: 2022-03-08
+layout: "simple"
+---
+This page content is now full-width.
+```
+
 ## Custom layouts
 
 One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.

diff --git a/layouts/_default/simple.html b/layouts/_default/simple.html
@@ -0,0 +1,18 @@
+{{ define "main" }}
+  <article class="max-w-full">
+    <header>
+      {{ if .Site.Params.article.showBreadcrumbs | default false }}
+        {{ partial "breadcrumbs.html" . }}
+      {{ end }}
+      <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
+        {{ .Title | emojify }}
+      </h1>
+    </header>
+    <section class="max-w-full mt-6 prose dark:prose-invert">
+      {{ .Content | emojify }}
+    </section>
+    <footer class="pt-8">
+      {{ partial "sharing-links.html" . }}
+    </footer>
+  </article>
+{{ end }}