@geekity/cms 0.4.0 → 0.5.0

package/themes/default/partials/comment-form.njk

@@ -13,6 +13,13 @@
   every label, field and button through them — so the contact form wears the
   same class rather than repeating the rules.
 
+  It draws two forms. For a stranger: the name, email and website boxes, the
+  honeypot and the loaded-at stamp. For somebody signed in to this site's
+  admin — `commentForm.signedInAs` — none of those, because the site already
+  knows all three and a session is better evidence than a honeypot, and a
+  hidden CSRF token instead, because this form posts under somebody's name.
+  A theme that replaces this partial has to draw both.
+
   It works with JavaScript switched off, and there is no script on it.
 #}
 <section class="comment-respond" id="respond">
@@ -28,7 +35,6 @@
 
   <form method="post" action="{{ commentForm.action }}">
     <input type="hidden" name="{{ commentForm.fields.post }}" value="{{ commentForm.post }}" />
-    <input type="hidden" name="{{ commentForm.fields.loaded }}" value="{{ commentForm.loaded }}" />
     {#
       What this comment answers. `commentReplyTo` is the `?reply_to=` on the
       URL, which a Reply link put there and the CMS has already checked names
@@ -45,6 +51,26 @@
     </p>
     {% endif %}
 
+    {% if commentForm.signedInAs %}
+    {#
+      Signed in to this site. The comment is attributed from the account, so
+      there is nothing to type and nothing to get wrong; the token is what
+      stops a page on another site posting under this name without them
+      knowing.
+    #}
+    <input type="hidden" name="{{ commentForm.fields.csrf }}" value="{{ commentForm.csrfToken }}" />
+
+    <p class="comment-signed-in">
+      Commenting as <a href="{{ commentForm.signedInAs.url }}">{{ commentForm.signedInAs.name }}</a>.
+    </p>
+    {% else %}
+    {#
+      When this form was drawn, which is what the minimum submit time is
+      measured against. A signed-in form carries none: a session says more
+      about whether this is a person than a stopwatch does.
+    #}
+    <input type="hidden" name="{{ commentForm.fields.loaded }}" value="{{ commentForm.loaded }}" />
+
     {#
       The honeypot. Hidden from sight and from assistive technology, out of the
       tab order, and told not to autofill: a person never sees it and never
@@ -78,6 +104,7 @@
       <span class="comment-field-error">{{ commentForm.problems.url }}</span>
       {% endif %}
     </p>
+    {% endif %}
 
     <p class="comment-field">
       <label for="comment-body">Comment</label>
@@ -92,8 +119,9 @@
       "Tell me about replies". Only on a site that can actually send mail —
       `notifiable` is false otherwise — because a box that promised a message
       nothing would ever send would be a lie on a form. The address is the one
-      typed above, is never shown anywhere, and every message it sends carries
-      a one-click unsubscribe link.
+      typed above — or the account's, for somebody signed in — is never shown
+      anywhere, and every message it sends carries a one-click unsubscribe
+      link.
     #}
     {% if commentForm.notifiable %}
     <p class="comment-check">

package/themes/default/partials/menu.njk

@@ -0,0 +1,32 @@
+{#
+  One menu, drawn.
+
+  The CMS puts every menu the site stores on the context as `menus`, keyed by
+  the name it is stored under, each item already knowing whether it is the page
+  being looked at (TASK-107). This theme declares two of those names in its
+  `theme.json` — `primary` and `footer` — and draws each through this macro, so
+  the markup of a menu is written once:
+
+    {% import "partials/menu.njk" as nav %}
+    {{ nav.list(menus.footer, "Footer") }}
+
+  Nothing is printed for a menu with nothing in it: an area a site has not
+  filled in is an area with no nav element, not an empty list.
+
+  `label` is the `aria-label`, which is what tells a reader on a screen reader
+  which of a page's menus this one is. Two navs with no labels are two navs
+  called "navigation".
+
+  An item marked `me` carries `rel="me"`, which is how Mastodon and the rest of
+  the IndieWeb verify that the site and the profile it links belong to the same
+  person: the profile links back, and the pair is the proof.
+#}
+{% macro list(items, label) %}{% if items.length %}
+<nav class="site-nav" aria-label="{{ label }}">
+  <ul class="hlist">
+    {% for item in items %}
+    <li><a href="{{ item.url | url }}"{% if item.me %} rel="me"{% endif %}{% if item.current %} class="is-current" aria-current="page"{% endif %}>{{ item.label }}</a></li>
+    {% endfor %}
+  </ul>
+</nav>
+{% endif %}{% endmacro %}

package/themes/default/partials/search-form.njk

@@ -2,6 +2,11 @@
   The site's search box (TASK-22): a plain GET form, so a search is a URL a
   reader can bookmark or share and the box needs no JavaScript.
 
+  `layouts/search.njk` is the only thing that includes it (TASK-105): the box
+  was in the footer of every page as well, and search is a menu item now —
+  a `Search | /search/` line like any other — so the page about searching is
+  where the box is.
+
   Expects nothing. `query`, when the page has one, goes back in the box, so the
   results page shows what was searched for. The label is read out rather than
   shown, because the button beside the box already says what it is for, and it

package/themes/default/static/style.css

@@ -616,6 +616,29 @@ pre code {
   text-decoration: none;
 }
 
+/* The site menu, which the header carries on every page (TASK-105). At the
+   root the header is the site title with the tagline under it, and the menu
+   is a line of its own under that. */
+.global-header .site-nav {
+  margin-top: var(--spacing-2);
+  font-size: var(--fontSize-0);
+}
+
+/* Everywhere else the header is the small link home, and the menu sits beside
+   it on the same line — the two wrap onto a second line together rather than
+   the menu dropping under the link on a narrow screen. */
+.global-wrapper:not([data-is-root-path='true']) .global-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--spacing-5);
+  row-gap: var(--spacing-1);
+}
+
+.global-wrapper:not([data-is-root-path='true']) .global-header .site-nav {
+  margin-top: var(--spacing-0);
+}
+
 /* An entry: a post or a page (TASK-83). The source design's own rules — the
    title tight against the words under it, a subtitle in the heading font —
    plus the small line the `e-content` ends on, which carries the permalink,
@@ -667,10 +690,9 @@ pre code {
   font-style: italic;
 }
 
-/* The site menu, and an author archive's `rel="me"` links: both horizontal
-   lists under the credit, small, in the heading font like every other piece
-   of navigation. */
-.bio .site-nav,
+/* The links the person calls their own, under the credit: a horizontal list,
+   small, in the heading font. The site menu used to share this rule; it is in
+   the header now (TASK-105) and the bio carries nobody but the person. */
 .bio-links {
   margin-top: var(--spacing-2);
   font-size: var(--fontSize-0);
@@ -803,9 +825,9 @@ pre code {
   font-size: var(--fontSize-0);
 }
 
-/* The search box (TASK-22): a field and a button on one line, in the footer
-   of every page and at the top of the search page. The field is drawn the way
-   the comment form's are, so the site has one look for a place to type. */
+/* The search box (TASK-22): a field and a button on one line, at the top of
+   the search page and nowhere else (TASK-105). The field is drawn the way the
+   comment form's are, so the site has one look for a place to type. */
 
 .search-form {
   display: flex;
@@ -1185,7 +1207,8 @@ pre code {
   border-inline-start-color: var(--color-error);
 }
 
-.comment-replying-to {
+.comment-replying-to,
+.comment-signed-in {
   margin: 0 0 var(--spacing-4);
   font-family: var(--font-heading);
   font-size: var(--fontSize-0);

package/themes/default/theme.json

@@ -1,5 +1,9 @@
 {
   "name": "Default",
   "kind": "site",
-  "description": "The theme that ships with Geekity: plain Nunjucks and plain CSS, and the layer every other theme is laid over."
+  "description": "The theme that ships with Geekity: plain Nunjucks and plain CSS, and the layer every other theme is laid over.",
+  "areas": [
+    { "name": "primary", "label": "Site menu" },
+    { "name": "footer", "label": "Footer links" }
+  ]
 }