Update to API version 4

Justifying contents is discouraged in general, but furthermore produces some really ugly lines with Pico's sample contents

.github/workflows/stale.yml

@@ -0,0 +1,33 @@
+name: Mark or close stale issues and PRs
+
+on:
+    schedule:
+        - cron: "0 */6 * * *"
+
+jobs:
+    stale:
+        name: Mark or close stale issues and PRs
+
+        runs-on: ubuntu-latest
+        permissions:
+            issues: write
+            pull-requests: write
+
+        steps:
+            -   uses: actions/stale@v3
+                with:
+                    days-before-stale: 7
+                    days-before-close: 2
+                    stale-issue-message: >
+                        This issue has been automatically marked as stale because it has not had
+                        recent activity. It will be closed in two days if no further activity
+                        occurs. Thank you for your contributions! :+1:
+                    stale-pr-message: >
+                        This pull request has been automatically marked as stale because it has not had
+                        recent activity. It will be closed in two days if no further activity
+                        occurs. Thank you for your contributions! :+1:
+                    stale-pr-label: "info: Stale"
+                    stale-issue-label: "info: Stale"
+                    exempt-issue-labels: "type: Bug,type: Enhancement,type: Feature,type: Idea,type: Release,info: Pinned"
+                    exempt-pr-labels: "type: Bug,type: Enhancement,type: Feature,type: Idea,type: Release,info: Pinned"
+                    remove-stale-when-updated: true

CHANGELOG.md

@@ -8,6 +8,64 @@ Pico Default Theme Changelog
           refer to both the UPGRADE and NEWS sections of the docs for more
           details.
 
+### Version 3.0.0-beta.1
+Released: -
+
+```
+* [New] Update to API version 4 (no changes necessary)
+* [Changed] Include non-hidden pages without a title in the navigation menu;
+            use the page ID as fallback for the missing page title
+* [Changed] Don't justify text contents by default
+* [Changed] Update syntax to Twig 3.3
+* [Changed] Update credits in theme footer
+```
+
+### Version 3.0.0-alpha.2
+Released: 2020-12-24
+
+```
+* [Changed] Merge all fixes of Pico v2.1.2 to v2.1.4
+```
+
+### Version 2.1.4
+Released: 2020-08-29
+
+```
+* [Changed] Don't setup nav toggle JavaScript when there's no menu
+```
+
+### Version 2.1.3
+Released: 2020-07-10
+
+No changes
+
+### Version 2.1.2
+Released: 2020-04-10
+
+No changes
+
+### Version 3.0.0-alpha.1
+Released: 2020-03-29
+
+```
+* [New] Kick-start development of Pico 3.0
+```
+
+### Version 2.1.1
+Released: 2019-12-31
+
+No changes
+
+### Version 2.1.0
+Released: 2019-11-24
+
+```
+* [New] Add Pico's official logo and tagline
+* [New] Add some utility classes for typography and images
+* [Changed] Improve documentation of `pico-theme.yml`
+* [Changed] Various small improvements
+```
+
 ### Version 2.1.0-beta.1
 Released: 2019-11-03
 
@@ -17,6 +75,7 @@ Released: 2019-11-03
 * [Changed] Use Pico's `pages` Twig function to create the main navigation
 * [Changed] Improve formatting of definition lists and inline code snippets
 * [Changed] Improve JSDoc class docs
+* [Changed] Various small improvements
 ```
 
 ### Version 2.0.5-beta.1

README.md

@@ -3,14 +3,14 @@ Pico Default Theme
 
 This is the repository of Pico's official default theme.
 
-Pico is a stupidly simple, blazing fast, flat file CMS. See http://picocms.org/ for more info.
+Pico is a stupidly simple, blazing fast, flat file CMS. See https://picocms.org/ for more info.
 
 Please refer to [`picocms/Pico`](https://github.com/picocms/Pico) to get info about how to contribute or getting help.
 
 Screenshot
 ----------
 
-![Pico Screenshot](https://picocms.github.io/screenshots/pico-20.png)
+![Pico Screenshot](https://picocms.github.io/screenshots/pico-21.png)
 
 Install
 -------
@@ -36,20 +36,24 @@ theme: my_theme
 
 You can now edit the theme's stylesheets and JavaScript to fit your needs. If you rather want to use a third-party theme, simply add the theme's directory to your `themes/` directory (e.g. `themes/some_other_theme/`) and update your `config/config.yml` accordingly. Pico's default theme is now completely disabled and won't ever interfere with your custom theme or your website in general anymore. If you want to use Pico's default theme again, either remove the line or replace it by `theme: default`.
 
-Anyway, since Pico's default theme is meant to be a starting point for your own theme, it demonstrates how themes can allow one to tweak a theme's behavior. For this reason it supports a "Widescreen" mode: By adding `theme_config.widescreen: true` to your `config/config.yml`, the theme's main container grows from 768px to 1152px breadth due to adding `class="widescreen"` to the website's `<body>` element. Pico's default theme furthermore supports adding social buttons to its footer. Rather than using Pico's config for this, it uses the YAML Frontmatter of the `content/_meta.md` Markdown file. Here's `content/_meta.md` from Pico's sample contents:
+Anyway, since Pico's default theme is meant to be a starting point for your own theme, it demonstrates how themes can allow one to tweak a theme's behavior. For this reason it supports a "Widescreen" mode: By adding `theme_config.widescreen: true` to your `config/config.yml`, the theme's main container grows from 768px to 1152px breadth due to adding `class="widescreen"` to the website's `<body>` element. Pico's default theme furthermore supports displaying both a logo and a tagline in its header, as well as adding social buttons to its footer. Rather than using Pico's config for this, it uses the YAML Frontmatter of the `content/_meta.md` Markdown file. Here's `content/_meta.md` from Pico's sample contents:
 
 ```yaml
 ---
-social:
+Logo: %theme_url%/img/pico-white.svg
+Tagline: Making the web easy.
+Social:
     - title: Visit us on GitHub
       url: https://github.com/picocms/Pico
       icon: octocat
-    - title: Join us on Freenode IRC Webchat
-      url: https://webchat.freenode.net/?channels=%23picocms
+    - title: Join us on Libera.Chat
+      url: https://web.libera.chat/#picocms
       icon: chat
 ---
 ```
 
+You should also check out the theme's `pico-theme.yml`: First of all it tells Pico to use the latest API version for themes and adjusts Pico's default Twig config. But more importantly it also registers the mentioned `widescreen` theme config as well as the meta headers `Logo`, `Tagline` and `Social`.
+
 Getting Help
 ------------
 

composer.json

@@ -3,12 +3,17 @@
     "type": "pico-theme",
     "description": "This is Pico's official default theme. Pico is a stupidly simple, blazing fast, flat file CMS.",
     "keywords": [ "pico", "picocms", "picocms-theme", "pico-theme", "default-theme" ],
-    "homepage": "http://picocms.org/",
+    "homepage": "https://picocms.org/",
     "license": "MIT",
     "authors": [
+        {
+            "name": "Daniel Rudolf",
+            "email": "picocms.org@daniel-rudolf.de",
+            "role": "Lead Developer"
+        },
         {
             "name": "The Pico Community",
-            "homepage": "http://picocms.org/"
+            "homepage": "https://picocms.org/"
         },
         {
             "name": "Contributors",
@@ -16,7 +21,7 @@
         }
     ],
     "support": {
-        "docs": "http://picocms.org/themes/default/",
+        "docs": "https://picocms.org/themes/default/",
         "issues": "https://github.com/picocms/pico-theme/issues",
         "source": "https://github.com/picocms/pico-theme"
     },
@@ -26,8 +31,8 @@
     "extra": {
         "installer-name": "default",
         "branch-alias": {
-            "dev-master": "2.0.x-dev",
-            "dev-pico-2.1": "2.1.x-dev"
+            "dev-master": "2.1.x-dev",
+            "dev-pico-3.0": "3.0.x-dev"
         }
     }
 }

css/style.css

@@ -9,9 +9,9 @@
  *
  * @author  Gilbert Pellegrom
  * @author  Daniel Rudolf
- * @link    http://picocms.org
- * @license http://opensource.org/licenses/MIT The MIT License
- * @version 2.1
+ * @link    https://picocms.org
+ * @license https://opensource.org/licenses/MIT The MIT License
+ * @version 3.0
  */
 
 * {
@@ -65,17 +65,24 @@ body { display: flex; flex-direction: column; }
 
 #header { background: #2EAE9B; }
 
-#header h1 {
+#title, #logo {
     float: left;
-    font-size: 2rem;
-    margin: 0;
-    padding: 1.5em 1em 1.5em 0;
+    padding: 3em 3em 3em 0;
 }
-#header h1 a, #header h1 a:hover { color: #fff; }
+
+#title * { margin: 0; color: #fff; }
+#title p { font-style: italic; }
+
+#logo { height: 10.8em; }
+#logo * { display: block; height: 100%; }
+#logo img { min-width: 4.8em; }
+
+#logo + #title h1 { margin: 0.8rem 0; }
+#logo + #title.tagline h1 { margin: 0; }
 
 #nav {
-    text-align: right;
     padding: 3em 0;
+    text-align: right;
 }
 #nav ul {
     list-style: none;
@@ -127,13 +134,11 @@ body { display: flex; flex-direction: column; }
 @media (max-width: 767px) {
     #main { padding: 2em 0 1em; }
 
-    #header h1 {
-        float: none;
-        padding: 0.5em 0;
-    }
+    #title, #logo { padding: 2em 1.5em 2em 0; }
+    #logo { height: 8.8em; }
 
     #nav {
-        clear: right;
+        clear: both;
         padding: 0;
     }
     #nav ul {
@@ -153,7 +158,7 @@ body { display: flex; flex-direction: column; }
         display: block;
         float: right;
         width: 2em;
-        margin: 0.6667em 0 0.6667em 1.3333em;
+        margin: 0.6667em 0;
         font-size: 1.5rem;
         line-height: 2em;
         text-align: center;
@@ -180,7 +185,6 @@ body {
 }
 
 p, td, th, li, dd {
-    text-align: justify;
     overflow-wrap: break-word;
     word-wrap: break-word;
 }
@@ -219,6 +223,29 @@ hr {
 
 abbr { text-decoration: underline dotted; }
 
+/*** UTILITIES ***/
+
+.align-left { text-align: left; }
+.align-center { text-align: center; }
+.align-right { text-align: right; }
+.align-justify { text-align: justify; }
+
+.image { display: block; margin: 0 auto; }
+.image.xsmall { width: 20%; }
+.image.small { width: 40%; }
+.image.large { width: 60%; }
+.image.xlarge { width: 80%; }
+.image.float-left { float: left; margin: 1em 2em 1em 0; }
+.image.float-right { float: right; margin: 1em 0 1em 2em; }
+.image img { display: block; width: 100%; }
+
+@media (max-width: 767px) {
+    .image.xsmall { width: 60%; }
+    .image.small { width: 80%; }
+    .image.large, .image.xlarge { width: 100%; }
+    .image.float-left, .image.float-right { float: none; margin: 0 auto; }
+}
+
 /*** TABLES ***/
 
 table { border-spacing: 0; }

icon/COPYRIGHT.txt

@@ -6,7 +6,7 @@ Icon fonts generator
 
     Author:     Vitaly Puzrin
     License:    The MIT License <https://github.com/fontello/fontello/blob/master/LICENSE>
-    Homepage:   http://fontello.com/
+    Homepage:   https://fontello.com/
 
 
 
@@ -17,7 +17,7 @@ Font license info
     Copyright (C) 2016 by Dave Gandy
 
     Author:     Dave Gandy
-    License:    SIL OFL 1.1 <http://scripts.sil.org/OFL>
-    Homepage:   http://fortawesome.github.com/Font-Awesome/
+    License:    SIL OFL 1.1 <https://scripts.sil.org/OFL>
+    Homepage:   https://fontawesome.com/
 
     Icons:      chat, github-circled ("octocat"), menu, dollar

img/pico-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="m298.4 194.7q0-14.15-.8-31.2l-.85-14.25h-51.05v89.95l8 1.1q9.6 1.05 17.6 1.05 7.95 0 17.5-1.05 4.8-.55 7.95-1.1 1.65-22.2 1.65-44.5m-69.75-45.8h-49.3v182.45l7.7.85q9.3.8 17 .8 12.3 0 24.6-1.65z" fill="#ffffff" transform="translate(-138.85 -140.95)"/></svg>

img/pico.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="m298.4 194.7q0-14.15-.8-31.2l-.85-14.25h-51.05v89.95l8 1.1q9.6 1.05 17.6 1.05 7.95 0 17.5-1.05 4.8-.55 7.95-1.1 1.65-22.2 1.65-44.5m-69.75-45.8h-49.3v182.45l7.7.85q9.3.8 17 .8 12.3 0 24.6-1.65z" fill="#2eae9b" transform="translate(-138.85 -140.95)"/></svg>

index.twig

@@ -4,10 +4,11 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 
-    <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
+    <title>{{ meta.title ? meta.title ~ " | " }}{{ site_title }}</title>
     {% if meta.description %}
         <meta name="description" content="{{ meta.description|striptags }}" />
-    {% endif %}{% if meta.robots %}
+    {% endif %}
+    {% if meta.robots %}
         <meta name="robots" content="{{ meta.robots }}" />
     {% endif %}
 
@@ -21,28 +22,40 @@
 </head>
 <body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>
 
-    <div id="header">
+    <div id="header" role="banner">
         <div class="container">
             <a id="nav-toggle" title="Toggle Menu" role="button" aria-controls="nav" aria-expanded="false" tabindex="1">
                 <span class="icon-menu" aria-hidden="true"></span>
                 <span class="sr-only">Toggle Menu</span>
             </a>
-            <h1>
-                <a href="{{ "index"|link }}">{{ site_title }}</a>
-            </h1>
-            <div id="nav" role="region" tabindex="-1">
+            {% if pages["_meta"].meta.logo %}
+                <div id="logo" aria-hidden="true">
+                    <a href="{{ "index"|link }}">
+                        <img src="{{ pages["_meta"].meta.logo|url }}" alt="" />
+                    </a>
+                </div>
+            {% endif %}
+            <div id="title"{{ pages["_meta"].meta.tagline ? ' class="tagline"' }}>
+                <a href="{{ "index"|link }}">
+                    <h1>{{ site_title }}</h1>
+                    {{ pages["_meta"].meta.tagline|markdown }}
+                </a>
+            </div>
+            <div id="nav" role="navigation" tabindex="-1">
                 <ul>
-                    {% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
-                        <li{% if page.id == current_page.id %} class="active"{% endif %}>
-                            <a href="{{ page.url }}">{{ page.title }}</a>
-                        </li>
+                    {% for page in pages(depthOffset=-1) %}
+                        {% if not page.hidden %}
+                            <li{% if page.id == current_page.id %} class="active"{% endif %}>
+                                <a href="{{ page.url }}">{{ page.title ?: page.id }}</a>
+                            </li>
+                        {% endif %}
                     {% endfor %}
                 </ul>
             </div>
         </div>
     </div>
 
-    <div id="main">
+    <div id="main" role="main">
         <div class="container">
             {{ content }}
         </div>
@@ -51,7 +64,7 @@
     <div id="footer">
         <div class="container">
             <div class="social">
-                {% for social in pages._meta.meta.social %}
+                {% for social in pages["_meta"].meta.social %}
                     <a href="{{ social.url }}" title="{{ social.title }}" role="button">
                         <span class="icon-{{ social.icon }}" aria-hidden="true"></span>
                         <span class="sr-only">{{ social.title }}</span>
@@ -59,8 +72,9 @@
                 {% endfor %}
             </div>
             <p>
-                <a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
-                and is maintained by <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
+                <a href="https://picocms.org/">Pico</a> was made by <a href="https://gilbitron.me/">Gilbert Pellegrom</a>
+                and is brought to you by <a href="https://www.daniel-rudolf.de">Daniel Rudolf</a> and
+                <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
                 Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.
             </p>
         </div>

js/pico.js

@@ -4,9 +4,9 @@
  * Pico is a stupidly simple, blazing fast, flat file CMS.
  *
  * @author  Daniel Rudolf
- * @link    http://picocms.org
- * @license http://opensource.org/licenses/MIT The MIT License
- * @version 2.1
+ * @link    https://picocms.org
+ * @license https://opensource.org/licenses/MIT The MIT License
+ * @version 3.0
  */
 
 function main()
@@ -28,10 +28,12 @@ function main()
 
     // responsive menu
     var menu = document.getElementById('nav'),
-        menuToggle = document.getElementById('nav-toggle'),
-        toggleMenuEvent = function (event) {
+        menuToggle = document.getElementById('nav-toggle');
+
+    if (menu && menuToggle) {
+        function toggleMenuEvent(event) {
             if (event.type === 'keydown') {
-                if ((event.keyCode != 13) && (event.keyCode != 32)) {
+                if ((event.keyCode !== 13) && (event.keyCode !== 32)) {
                     return;
                 }
             }
@@ -49,8 +51,9 @@ function main()
                 menuToggle.setAttribute('aria-expanded', 'false');
                 utils.slideUp(menu);
             }
-        },
-        onResizeEvent = function () {
+        }
+
+        function onResizeEvent() {
             if (utils.isElementVisible(menuToggle)) {
                 menu.className = 'hidden';
                 menuToggle.addEventListener('click', toggleMenuEvent);
@@ -61,10 +64,11 @@ function main()
                 menuToggle.removeEventListener('click', toggleMenuEvent);
                 menuToggle.removeEventListener('keydown', toggleMenuEvent);
             }
-        };
+        }
 
-    window.addEventListener('resize', onResizeEvent);
-    onResizeEvent();
+        window.addEventListener('resize', onResizeEvent);
+        onResizeEvent();
+    }
 }
 
 main();

js/utils.js

@@ -4,9 +4,9 @@
  * Pico is a stupidly simple, blazing fast, flat file CMS.
  *
  * @author  Daniel Rudolf
- * @link    http://picocms.org
- * @license http://opensource.org/licenses/MIT The MIT License
- * @version 2.1
+ * @link    https://picocms.org
+ * @license https://opensource.org/licenses/MIT The MIT License
+ * @version 3.0
  */
 
 utils = {};

pico-theme.yml

@@ -1,11 +1,14 @@
-api_version: 3
+api_version: 3                  # Use Pico's latest API version for themes
 
-meta:
-    Social: social
+meta:                           # Register meta headers used by this theme
+    Logo: logo                  # The URL to your website's logo (value is passed to Pico's "url" Twig filter)
+    Tagline: tagline            # Your website's tag line, shown right below your site title (supports Markdown)
+    Social: social              # A list of social icons that will be shown in your website's footer;
+                                #     You must specify a "title", "url" and "icon" per entry
 
-twig_config:
-    autoescape: html
-    strict_variables: false
-    charset: utf-8
+twig_config:                    # Twig template engine config
+    autoescape: html            # Let Twig escape variables by default
+    strict_variables: false     # If set to true, Twig will bail out when unset variables are being used
+    charset: utf-8              # The charset used by Twig templates
 
 widescreen: false               # Use more horicontal space (i.e. make the site container wider)