Templating briar

* 1st try to template briar * Add home page * Add README.md * Fix markdown syntax * Convert config.toml into config.yaml * Add .gitignore * Templating <head/> part * Fix list and single page templating * Convert pages directly with pandoc * Configure link types: blogposts will have /post/ in front. * Templating site menus * Enable ATOM feed template * Templating homepage with news

Templating briar
6645173e · micressor · Marco Balmer · 1f0407b3 · 6645173e · 6645173e
Commit 6645173e authored 6 years ago by micressor Committed by Marco Balmer 6 years ago
--- a/.gitignore
+++ b/.gitignore
+resources/
+*.swp
+*.orig
--- a/README.md
+++ b/README.md
+# Briar Website
+
+## Installation
+
+Run the following inside your Hugo site folder:
+
+```
+$ git clone https://code.briarproject.org/briar/website.git
+```
+
+## Configuration
+
+TODO
+
+## Install
+
+Test page with local hugo webserver:
+
+```
+hugo server -D
+```
+
+Generate static hugo pages:
+
+```
+hugo
+```
+
+## Content Types
+
+### Post
+
+Used for blog posts. Blog posts are listed on the homepage.
+
+Run `hugo new post/<post-name>.md` to create a post.
+
+### Page
+
+Used for site pages.
+
+Run `hugo new page/<page-name>.md` to create a page.
--- a/static/css/styles.css
+++ b/static/css/styles.css
--- a/config.toml
+++ b/config.toml
-baseURL = "http://example.org/"
-languageCode = "en-us"
-title = "My New Hugo Site"
--- a/config.yaml
+++ b/config.yaml
+baseURL: https://briarproject.org/
+languageCode: en-us
+title: Briar - Secure messaging, anywhere
+theme: briar
+
+Params:
+  flatterid: 4pq200
+
+permalinks:
+  post:  /:section/:year/:month/:title/
+  page: /:slug/
+
+menu:
+  main:
+  - identifier: home
+    name: Home
+    title: Home
+    url: /
+    weight: -110
+
+  - identifier: download
+    name: Download
+    title: Download
+    url: /download/
+    weight: -100
+
+  - identifier: howitworks
+    name: How it works
+    title: How it works
+    url: /how-it-works/
+    weight: -90
+
+  - identifier: about
+    name: About
+    title: About
+    url: /about/
+    weight: -80
+
+  - identifier: getinvolved
+    name: Get Involved
+    title: Get Involved
+    url: /get-involved/
+    weight: -80
--- a/content/_index.md
+++ b/content/_index.md
+---
+title: Secure messaging, anywhere
+---
+
+-   Peer-to-peer encrypted messaging and forums
+-   Messages are stored securely on your device, not in the cloud
+-   Connect directly with nearby contacts - no Internet access required
+-   Free and open source software
+
+[![Get it on Google
+Play](img/google_play_badge_web_generic.png){#playbutton}](https://play.google.com/store/apps/details?id=org.briarproject.briar.android)
+[![Get it on F-Droid](img/fdroid_badge.png){#fdroidbutton}](fdroid.html)
+
+![Screenshots](img/phone.gif){.phone}
+
+[![Donate using
+Liberapay](img/liberapay.svg)](https://liberapay.com/Briar/donate)
+[![Flattr
+this](img/flattr-badge-large.png "Flattr this")](https://flattr.com/t/592836/)\
+Bitcoin: 1NZCKkUCtJV2U2Y9hDb9uq8S7ksFCFGR6K
--- a/convert-html-to-md.sh
+++ b/convert-html-to-md.sh
 #!/bin/bash

 set -x
-curl -A aaaaaaaaaaaaaaaaa  $1 | pandoc -sr html -o content/page/$2.md
+pandoc -sr html -o content/page/$2.md $1
--- a/static/index.html
+++ b/static/index.html
-<!DOCTYPE html>
-<html>
-<head>
-  <link rel="stylesheet" type="text/css" href="css/styles.css" />
-  <title>Briar</title>
-  <meta name="description" content="Secure messaging, anywhere"/>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="flattr:id" content="4pq200">
-</head>
-<body id="index">
-
-  <div id="wrapper">
-    <div id="header_container">
-      <div id="header">
-        <a href="index.html"><div id="logo"><img src="img/briar_logo_large.png" alt="Briar" class="logo"/></div></a>
-        <div id="nav">
-          <div id="signup">
-            <div id="twitter">
-              <a href="https://twitter.com/BriarApp" rel="noopener noreferrer" target="_blank"><img class="twitterbutton" src="img/twitter.png"/></a>
-            </div> <!-- twitter -->
-            <form id="signupform" action="https://sourceforge.net/projects/briar/lists/briar-announce" rel="noopener noreferrer" target="_blank" method="get" onSubmit="submitForm()">
-              <input placeholder="Email address" type="email" name="email" tabindex="2"></input>
-              <button name="submit" type="submit" id="signup-submit">Keep me updated</button>
-            </form>
-            <div id="signupconf">Thanks! We'll keep you updated.</div>
-            <script language="JavaScript">
-            <!--
-            function submitForm(){
-                document.getElementById('signupform').style.display = 'none';
-                document.getElementById('signupconf').style.display = 'block';
-                return true;
-            }
-            //-->
-            </script>
-          </div> <!-- signup -->
-          <label for="menu-toggle"><img src="img/menu.png"></label>
-          <input type="checkbox" id="menu-toggle"/>
-          <ul id="menu">
-            <li><a href="index.html" id="indexnav">Home</a></li>
-            <li><a href="download.html" id="downloadnav">Download</a></li>
-            <li><a href="how-it-works.html" id="hownav">How&nbsp;it&nbsp;Works</a></li>
-            <li><a href="about.html" id="aboutnav">About&nbsp;Us</a></li>
-            <li><a href="get-involved.html" id="involvednav">Get&nbsp;Involved</a></li>
-          </ul>
-        </div> <!-- nav -->
-      </div> <!-- header -->
-    </div> <!-- header_container -->
-
-    <div id="container">
-      <div id="content">
-        <div class="intro">
-          <h2>Secure messaging, anywhere</h2>
-  
-          <p>
-            <strong>Latest News:</strong>
-            <a href="news/2018-briar-1.1-released.html">
-              Briar 1.1 released with dark theme, new emoji and more
-            </a>
-          </p>
-
-          <ul id="introlist">
-            <li>Peer-to-peer encrypted messaging and forums</li>
-            <li>Messages are stored securely on your device, not in the cloud</li>
-            <li>Connect directly with nearby contacts - no Internet access required</li>
-            <li>Free and open source software</li>
-          </ul>
-
-          <a href="https://play.google.com/store/apps/details?id=org.briarproject.briar.android" rel="noopener noreferrer" target="_blank"><img id="playbutton" src="img/google_play_badge_web_generic.png" alt="Get it on Google Play" border="0"/></a>
-          <a href="fdroid.html"><img id="fdroidbutton" src="img/fdroid_badge.png" alt="Get it on F-Droid" border="0"/></a>
-
-        </div> <!-- intro -->
-
-        <div id="phone">
-          <img src="img/phone.gif" class="phone" alt="Screenshots"/>
-        </div>
-
-        <div class="clearboth"></div>
-
-        <div id="flattr">
-          <center>
-            <a href="https://liberapay.com/Briar/donate" rel="noopener noreferrer" target="_blank"><img alt="Donate using Liberapay" src="img/liberapay.svg"></a>
-            <a href="https://flattr.com/t/592836/" rel="noopener noreferrer" target="_blank"><img src="img/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0"/></a>
-            <br />
-            Bitcoin: 1NZCKkUCtJV2U2Y9hDb9uq8S7ksFCFGR6K
-          </center>
-        </div> <!-- flattr -->
-      </div> <!-- content -->
-    </div> <!-- container -->
-
-  </div> <!-- wrapper -->
-
-  <div class="clearboth"></div>
-
-  <div id="footer_container">
-    <div id="footer">
-      <div id="signup2">
-        <div id="twitter2">
-          <a href="https://twitter.com/BriarApp" rel="noopener noreferrer" target="_blank"><img class="twitterbutton" src="img/twitter.png"/></a>
-        </div> <!-- twitter2 -->
-        <form id="signupform2" action="https://sourceforge.net/projects/briar/lists/briar-announce" rel="noopener noreferrer" target="_blank" method="get" onSubmit="submitForm2()">
-          <input placeholder="Email address" type="email" name="email" tabindex="2"></input>
-          <button name="submit" type="submit" id="signup-submit2">Keep me updated</button>
-        </form>
-        <div id="signupconf2">Thanks! We'll keep you updated.</div>
-        <script language="JavaScript">
-        <!--
-        function submitForm2(){
-            document.getElementById('signupform2').style.display = 'none';
-            document.getElementById('signupconf2').style.display = 'block';
-            return true;
-        }
-        //-->
-        </script>
-      </div> <!-- signup2 -->
-      <ul>
-        <li><a href="copyright.html">Copyright</a></li>
-        <li><a href="privacy.html">Privacy</a></li>
-        <li>Site design by Reflective Spaces</li>
-      </ul>
-    </div> <!-- footer -->
-  </div> <!-- footer_container -->
-</body>
-</html>
--- a/themes/briar/layouts/_default/list.html
+++ b/themes/briar/layouts/_default/list.html
+{{ define "main" }}
+ <div id="container">
+      <div id="content">
+      <h1>{{ with .Title }} {{ . }} {{ else }} {{ .Site.Title }} {{ end }}</h1>
+      {{ range first 1 .Pages.ByDate.Reverse }}
+      <h3 itemprop="headline" class="blog-post-title">
+      <a href="{{.Permalink}}">{{.Title}}</a>
+      </h3>
+<p class="blog-post-meta">{{.Date.Format "2006-01-02"}}
+      {{ if (isset .Params "author") }}
+      by {{ markdownify .Params.author }}
+      {{ end }}
+      </p>
+      {{ end }}
+      {{ .Content }}
+      </div> <!-- content -->
+    </div> <!-- container -->
+{{ end }}
--- a/themes/briar/layouts/_default/single.html
+++ b/themes/briar/layouts/_default/single.html
+{{ define "main" }}
+ <div id="container">
+      <div id="content">
+      {{ .Content }}
+      </div> <!-- content -->
+    </div> <!-- container -->
+{{ end }}
--- a/themes/briar/layouts/index.html
+++ b/themes/briar/layouts/index.html
--- a/themes/briar/layouts/partials/footer.html
+++ b/themes/briar/layouts/partials/footer.html
+ <div id="footer_container">
+    <div id="footer">
+      <div id="signup2">
+        <div id="twitter2">
+          <a href="https://twitter.com/BriarApp" rel="noopener noreferrer" target="_blank"><img class="twitterbutton" src="img/twitter.png"/></a>
+        </div> <!-- twitter2 -->
+        <form id="signupform2" action="https://sourceforge.net/projects/briar/lists/briar-announce" rel="noopener noreferrer" target="_blank" method="get" onSubmit="submitForm2()">
+          <input placeholder="Email address" type="email" name="email" tabindex="2"></input>
+          <button name="submit" type="submit" id="signup-submit2">Keep me updated</button>
+        </form>
+        <div id="signupconf2">Thanks! We'll keep you updated.</div>
+        <script language="JavaScript">
+        <!--
+        function submitForm2(){
+            document.getElementById('signupform2').style.display = 'none';
+            document.getElementById('signupconf2').style.display = 'block';
+            return true;
+        }
+        //-->
+        </script>
+      </div> <!-- signup2 -->
+      <ul>
+        <li><a href="copyright.html">Copyright</a></li>
+        <li><a href="privacy.html">Privacy</a></li>
+        <li>Site design by Reflective Spaces</li>
+      </ul>
+    </div> <!-- footer -->
+  </div> <!-- footer_container -->
--- a/themes/briar/layouts/partials/head.html
+++ b/themes/briar/layouts/partials/head.html
+<head>
+  {{ .Hugo.Generator }}
+  {{ with resources.Get "css/styles.css" | minify }}
+  <style media="screen">{{ .Content | safeCSS }}</style>
+  {{ end }}
+  <title>{{ with .Title }} {{ . }} - {{ end }} {{ .Site.Title }}</title>
+  <meta name="description"
+        lang="{{ $.Site.LanguageCode | default "en" }}"
+        content="{{ with .Param "description" }}{{ . }}{{ else }}{{ .Summary }}{{ end }}"/>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="flattr:id"
+        content="{{ with .Param "flatterid" }}{{ . }}{{ end }}">
+  {{ if .RSSLink }}
+  <link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
+  {{ end }}
+</head>
--- a/themes/briar/layouts/partials/header.html
+++ b/themes/briar/layouts/partials/header.html
+  <div id="wrapper">
+    <div id="header_container">
+      <div id="header">
+        <a href="index.html"><div id="logo"><img src="img/briar_logo_large.png" alt="Briar" class="logo"/></div></a>
+        <div id="nav">
+          <div id="signup">
+            <div id="twitter">
+              <a href="https://twitter.com/BriarApp" rel="noopener noreferrer" target="_blank"><img class="twitterbutton" src="img/twitter.png"/></a>
+            </div> <!-- twitter -->
+            <form id="signupform" action="https://sourceforge.net/projects/briar/lists/briar-announce" rel="noopener noreferrer" target="_blank" method="get" onSubmit="submitForm()">
+              <input placeholder="Email address" type="email" name="email" tabindex="2"></input>
+              <button name="submit" type="submit" id="signup-submit">Keep me updated</button>
+            </form>
+            <div id="signupconf">Thanks! We'll keep you updated.</div>
+            <script language="JavaScript">
+            <!--
+            function submitForm(){
+                document.getElementById('signupform').style.display = 'none';
+                document.getElementById('signupconf').style.display = 'block';
+                return true;
+            }
+            //-->
+            </script>
+          </div> <!-- signup -->
+          <label for="menu-toggle"><img src="img/menu.png"></label>
+          <input type="checkbox" id="menu-toggle"/>
+          <ul id="menu">
+          {{ range .Site.Menus.main }}
+          <li>
+          <a id="indexnav" href="{{ .URL }}">{{ .Name }}</a>
+          </li>
+          {{ end }}
+          </ul>
+        </div> <!-- nav -->
+      </div> <!-- header -->
+    </div> <!-- header_container -->
--- a/themes/briar/layouts/rss.xml
+++ b/themes/briar/layouts/rss.xml
+<feed xmlns="http://www.w3.org/2005/Atom">
+  {{ if .IsHome }}
+    <title>{{ .Title }}</title>
+  {{ else }}
+    <title>{{ .Title }} - {{ .Site.Title }}</title>
+  {{ end }}
+  <link href="{{ .Permalink }}index.xml" rel="self"/>
+  <link href="{{ .Permalink }}"/>{{ if not .Date.IsZero }}
+  <updated>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>{{ end }}
+  <id>{{ .Permalink }}</id>{{ with .Site.Author.name }}
+  <author>
+    <name>{{.}}</name>{{ with $.Site.Author.email }}
+    <email>{{.}}</email>{{end}}
+  </author>{{end}}
+  <generator>Hugo -- gohugo.io</generator>{{ range first 15 (where .Data.Pages "Type" "in" .Site.Params.mainSections) }}
+  <entry>
+    {{ `<title type="html"><![CDATA[` | safeHTML }}{{ .Title }}]]></title>
+    <link href="{{ .Permalink }}"/>
+    <id>{{ .Permalink }}</id>{{ with .Site.Params.Author }}
+    <author>
+      <name>{{.}}</name>
+    </author>{{end}}
+    <published>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</published>
+    <updated>{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>
+    <summary>{{ .Summary }}</summary>
+    <!-- Disable atom content
+    {{ `<content type="html"><![CDATA[` | safeHTML }}{{ .Content }}]]></content>
+-->
+  </entry>{{ end }}
+</feed>