Fix many issues with Middleman

Gemfile

@@ -4,3 +4,5 @@ gem 'middleman', '~> 4.2'
 gem 'middleman-autoprefixer', '~> 2.7'
 gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]
 gem 'wdm', '~> 0.1', platforms: [:mswin, :mingw]
+gem 'redcarpet'
+gem 'middleman-syntax'

Gemfile.lock

@@ -73,6 +73,9 @@ GEM
       servolux
       tilt (~> 2.0)
       uglifier (~> 3.0)
+    middleman-syntax (3.0.0)
+      middleman-core (>= 3.2)
+      rouge (~> 2.0)
     minitest (5.11.3)
     padrino-helpers (0.13.3.4)
       i18n (~> 0.6, >= 0.6.7)
@@ -86,6 +89,8 @@ GEM
     rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
+    redcarpet (3.4.0)
+    rouge (2.2.1)
     sass (3.4.25)
     servolux (0.13.0)
     temple (0.8.0)
@@ -103,6 +108,8 @@ PLATFORMS
 DEPENDENCIES
   middleman (~> 4.2)
   middleman-autoprefixer (~> 2.7)
+  middleman-syntax
+  redcarpet
   tzinfo-data
   wdm (~> 0.1)
 

_config.yml

@@ -1 +0,0 @@
-theme: jekyll-theme-cayman

config.rb

@@ -1,6 +1,13 @@
 # Activate and configure extensions
 # https://middlemanapp.com/advanced/configuration/#configuring-extensions
 
+set :markdown_engine, :redcarpet
+set :markdown, :fenced_code_blocks => true, :smartypants => true
+
+activate :syntax
+
+activate :directory_indexes
+
 activate :autoprefixer do |prefix|
   prefix.browsers = "last 2 versions"
 end
@@ -40,7 +47,7 @@ page '/*.txt', layout: false
 # Build-specific configuration
 # https://middlemanapp.com/advanced/configuration/#environment-specific-settings
 
-# configure :build do
-#   activate :minify_css
-#   activate :minify_javascript
-# end
+configure :build do
+  activate :minify_css
+  activate :minify_javascript
+end

source/API.md → source/API.html.md

@@ -1,4 +1,6 @@
-# API documentation
+---
+title: API documentation
+---
 
 ## Getting an API token
 
@@ -31,17 +33,18 @@ To authenticate your requests you should put this token in the `Authorization` h
 Authorization: Bearer <YOUR TOKEN HERE>
 ```
 
+<script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-standalone-preset.js"></script>
 <script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
 
 <div id="api"></div>
 
 <script>
 const ui = SwaggerUIBundle({
-    url: "/Plume/api.yaml",
+    url: "/api.yaml",
     dom_id: '#api',
     presets: [
         SwaggerUIBundle.presets.apis,
-        SwaggerUIBundle.SwaggerUIStandalonePreset
+        SwaggerUIStandalonePreset
     ],
     layout: "StandaloneLayout"
 })

source/CLI.md → source/CLI.html.md

@@ -1,4 +1,6 @@
-# `plm` CLI reference
+---
+title: plm CLI reference
+---
 
 If any required argument is ommitted, you will be asked to input manually.
 

source/README.md

@@ -1,10 +0,0 @@
-# Plume documentation
-
-- [Installing Plume (for development or production)](INSTALL.md)
-- [Updating your instance](UPDATE.md)
-- [Useful Environment Variables](ENV-VARS.md)
-- [Development Guide](DEVELOPMENT.md)
-- [Making Plume available in your language](INTERNATIONALIZATION.md)
-- [REST API reference](API.md)
-- [`plm` CLI reference](CLI.md)
-- [How Plume Federates](FEDERATION.md)

source/_nav.erb

@@ -0,0 +1,19 @@
+<nav>
+  <ul>
+   <li>
+     <a href="/">Plume documentation</a>
+   </li>
+    <li>
+       <a href="https://contribute.joinplu.me/">Contribute</a>
+    </li>
+    <li>
+       <a href="https://github.com/Plume-org/Plume">Source code</a>
+    </li>
+    <li>
+       <a href="https://riot.im/app/#/room/#plume:disroot.org">Chat room</a>
+    </li>
+    <li>
+       <a href="https://framavox.org/g/WK40YHMA/plume">Loomio group</a>
+    </li>
+  </ul>
+</nav>

source/api.yaml

@@ -1,4 +1,4 @@
-openapi: "3.0"
+openapi: "3.0.0"
 info:
   version: "1.0.0"
   title: "Plume REST API"

source/DEVELOPMENT.md → source/development.html.md

@@ -1,8 +1,10 @@
-# Development Guide
+---
+title: Development Guide
+---
 
 ## Installing the development environment
 
-Please refer to the [installation guide](INSTALL.md).
+Please refer to the [installation guide](/installation).
 
 ## Testing the federation
 

source/ENV-VARS.md → source/environment.html.md

@@ -1,4 +1,6 @@
-# Useful Environment Variables
+---
+title: Useful Environment Variables
+---
 
 Plume relies on some environment variables for some configuration options. You can either set them before
 starting the app with `cargo run` or write them in a `.env` file to have automatically loaded.

source/FEDERATION.md → source/federation.html.md

@@ -1,4 +1,6 @@
-# How Plume Federates
+---
+title: How Plume Federates
+---
 
 To federate with other Fediverse software (and itself), Plume uses various 
 protocols:

source/index.html.erb

@@ -1,23 +1,9 @@
 ---
-title: Welcome to Middleman
+title: Plume documentation
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 340" class="middleman-logo" aria-labelledby="middleman-logo__title" role="img">
-  <title id="middleman-logo__title">Middleman</title>
-  <path class="middleman-logo__top-left-bar" fill-opacity=".45" d="M0 40L200 0v30L0 60z"/>
-  <path class="middleman-logo__top-right-bar" fill="#fff" d="M200 0l200 40v20L200 30z"/>
-  <path class="middleman-logo__left-m" fill-opacity=".45" d="M0 78v184l45 5V152l45 83 47-83v129l53 7V52l-57 8-43 83-43-70z"/>
-  <path class="middleman-logo__right-m" fill="#fff" d="M400 78v184l-45 5V152l-45 83-47-83v129l-53 7V52l57 8 43 83 43-70z"/>
-  <path class="middleman-logo__bottom-left-bar" fill-opacity=".45" d="M0 300l200 40v-30L0 280z"/>
-  <path class="middleman-logo__bottom-right-bar" fill="#fff" d="M200 340l200-40v-20l-200 30z"/>
-</svg>
-
-<h1>
-  Middleman is Running
-</h1>
-
-<%= link_to(
-  "Read Documentation",
-  "https://middlemanapp.com/basics/templating_language/",
-  target: "_blank"
-) %>
+<ul>
+<% sitemap.resources.select{ |p| p.path =~ /\.html/ && p.path != "index.html" }.each do |res| %>
+    <li><a href="<%= res.url %>"><%= res.data.title %></a></li>
+<% end %>
+</ul>

source/INSTALL.md → source/installation.html.md

@@ -1,4 +1,6 @@
-# Installing Plume (for development or production)
+---
+title: Installing Plume (for development or production)
+---
 
 ## Prerequisites
 
@@ -158,7 +160,7 @@ BASE_URL=plu.me
 ROCKET_SECRET_KEY=
 ```
 
-For more information about what you can put in your `.env`, see [the documentation about environment variables](ENV-VARS.md).
+For more information about what you can put in your `.env`, see [the documentation about environment variables](/environment).
 
 ## Running migrations
 
@@ -199,7 +201,7 @@ You will also need to initialise search index
 plm search init -p path/to/plume/workingdir
 ```
 
-For more information about these commands, and the arguments you can give them, check out [their documentaion](CLI.md).
+For more information about these commands, and the arguments you can give them, check out [their documentaion](/CLI).
 
 Finally, you can start Plume with:
 

source/INTERNATIONALIZATION.md → source/internationalization.html.md

@@ -1,4 +1,6 @@
-# Making Plume available in your language
+---
+title: Making Plume available in your language
+---
 
 *You will need to have basic git and GitHub knownledge to follow this guide. But we plan to setup a more user-friendly translation tool in the future.*
 

source/layouts/layout.erb

@@ -1,16 +1,31 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="viewport"
-          content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Use the title from a page's frontmatter if it has one -->
     <title><%= current_page.data.title || "Middleman" %></title>
     <%= stylesheet_link_tag "site" %>
-    <%= javascript_include_tag "site" %>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist@3.12.1/swagger-ui.css">
+    <style><%= Rouge::Themes::Github.render(:scope => '.highlight') %></style>
   </head>
   <body>
-    <%= yield %>
+    <%= partial 'nav' %>
+    <header>
+      <h1><%= current_page.data.title %></h1>
+    </header>
+    <main>
+      <%= yield %>
+    </main>
+    <footer>
+      Website under the GPL 3.0 license.
+      &mdash;
+      <a href="https://github.com/Plume-org/docs">Source code of this website</a>
+    </footer>
+    <script>feather.replace()</script>
+    <%= javascript_include_tag "site" %>
   </body>
 </html>
+

source/stylesheets/site.css.scss

@@ -1,24 +1,92 @@
-body {
-  background-color: #fbc547;
-  color: #333;
-  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir",
-    "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans",
-    "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu",
-    "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
-  padding: 18vh 1rem;
-  text-align: center;
+$plume: #7765e3;
+$plumedark: #6457a6;
+$gray: #F4F4F4;
+
+@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
+
+html, body {
+  padding: 0px;
+  margin: 0px;
+}
+
+h1, h2, h3 {
+  font-family: 'Playfair Display';
+}
+
+header {
+  margin: auto;
+  padding: 30vh 20vw;
+  background: linear-gradient(0deg, $plumedark, $plume);
+  color: white;
+  font-size: 1.5em;
+}
+
+body > main > * {
+  padding: 0px 20vw;
 }
 
-a {
-  color: rgba(#000, 0.7);
+nav {
+  padding: 0px 20vw;
+  background: $gray;
+  ul {
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    justify-content: space-between;
 
-  &:focus,
-  &:hover {
-    color: rgba(#000, 0.6);
+    li {
+      a {
+        display: block;
+        padding: 2em 0em;
+        border-bottom: 2px solid transparent;
+        transition: all ease-in 0.2s;
+
+        &:hover {
+          border-bottom-color: $plume;
+        }
+      }
+    }
   }
 }
 
-.middleman-logo {
-  margin-bottom: 1rem;
-  width: 10rem;
+a, a:visited {
+  text-decoration: none;
+  color: $plume;
 }
+
+footer {
+  padding: 5em 5vw;
+  background: $gray;
+  margin-top: 10vh;
+  text-align: center;
+}
+
+.highlight {
+  padding-top: 1em;
+  padding-bottom: 1em;
+  overflow-x: auto;
+}
+
+body > main {
+  margin-top: 2em;
+  line-height: 1.3em;
+
+  ul {
+    padding-left: calc(20vw + 1.5em);
+    li {
+      padding: 0.5em 0;
+    }
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  body > main > * {
+    padding: 0 5vw;
+  }
+
+  header {
+    padding: 10vh 20vw;
+    text-align: center;
+  }
+}

source/UPDATE.md → source/update.html.md

@@ -1,4 +1,6 @@
-# Updating your instance
+---
+title: Updating your instance
+---
 
 To update your instance, run these commands with `plume` user if you created it, or with your default user, in the Plume directory.