@geekity/cms 0.4.0 → 0.6.0

package/themes/default/partials/bio.njk

@@ -4,10 +4,14 @@
 
   It replaces `partials/byline.njk`, which printed a name in a meta line. This
   is the whole credit — a round photo, "Written by" linked to their archive
-  with `rel="author me"`, what they do, where they are — and under it the site
-  menu, because the design has no navigation in the header and this is where it
-  reads it. The menu is here and not in the page footer whenever a page has a
-  bio; `layouts/base.njk` prints it in the footer on the pages that have none.
+  with `rel="author me"`, what they do, where they are, what they wrote about
+  themselves and the links they call their own.
+
+  The person and only the person (TASK-105). The site menu used to be printed
+  here as well, because the design had no header navigation; it is in
+  `header.global-header` on every page now, so this card says nothing about
+  the site and a reader looking for the way around never has to find the bio
+  first.
 
   Set `bioAuthor` before including it and nothing renders when that is absent:
 
@@ -25,11 +29,15 @@
   otherwise. An author archive sets "Posts by", because the card there heads a
   list of somebody's writing rather than crediting one piece of it.
 
-  `bioProfile` is the second switch. Set it and the bio also prints their
-  `p-note` and their `rel="me"` links, which is what an author archive wants —
-  the page is about them. An entry leaves it unset: the page footer already
-  prints the site's identity links, and the `rel="author me"` link above leads
-  to the archive where this person's own are.
+  A link's `rel` always holds `me` — the CMS puts it there whether or not the
+  Links box typed it — followed by whatever else that line carried, so this
+  prints one attribute rather than one of its own beside one of theirs.
+
+  The `p-note` and the `rel="me"` links are printed wherever the card is, which
+  is what `bioProfile` used to ask for on an author archive alone. An entry
+  left that switch unset because the page footer carried the site's identity
+  links; it carries nobody's now, so somebody's links belong under what they
+  wrote rather than one page further on.
 #}
 {% if bioAuthor %}
 <div class="bio p-author h-card">
@@ -51,24 +59,14 @@
       {%- if bioAuthor.location %} from <span class="p-locality">{{ bioAuthor.location }}</span>{% endif %}.
     </p>
 
-    {%- if bioProfile and bioAuthor.bio %}
+    {%- if bioAuthor.bio %}
     <p class="bio-note p-note">{{ bioAuthor.bio }}</p>
     {%- endif %}
 
-    {%- if menu.length %}
-    <nav class="site-nav" aria-label="Site">
-      <ul class="hlist">
-        {%- for item in menu %}
-        <li><a href="{{ item.url | url }}"{% if item.current %} class="is-current" aria-current="page"{% endif %}>{{ item.label }}</a></li>
-        {%- endfor %}
-      </ul>
-    </nav>
-    {%- endif %}
-
-    {%- if bioProfile and bioAuthor.links.length %}
+    {%- if bioAuthor.links.length %}
     <ul class="hlist bio-links">
       {%- for link in bioAuthor.links %}
-      <li><a class="u-url" rel="me" href="{{ link.href }}">{{ link.label }}</a></li>
+      <li><a class="u-url" rel="{{ link.rel }}" href="{{ link.href }}">{{ link.label }}</a></li>
       {%- endfor %}
     </ul>
     {%- endif %}

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,34 @@
+{#
+  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's `rel` is whatever `rel` values its line carried, already lower case
+  and each said once, so it is printed as one attribute and nothing is joined
+  here. `me` is the one most menus want: it 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.rel %} rel="{{ item.rel }}"{% 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

@@ -299,14 +299,29 @@ a:focus-visible {
   color: var(--color-primary);
 }
 
-header a,
-header a:visited {
+/* The two links that are the page saying where it is rather than somewhere to
+   go: the site title at the root and the small link home everywhere else. Both
+   read as plain text, in the heading font the rules below give them.
+
+   Named rather than reached for through the element they sit in (TASK-111). A
+   bare `header a` also caught the site menu, which is navigation somebody is
+   meant to use, and every link inside a post's own `<header>`. The `:visited`
+   halves are here because `a:visited` outweighs a bare class, and the hover
+   and focus halves because `a:focus-visible` outweighs one too: without them
+   these two would take the outline rather than the flourish. */
+
+.main-heading a,
+.main-heading a:visited,
+.header-link-home,
+.header-link-home:visited {
   color: var(--color-text);
   text-decoration: none;
 }
 
-header a:hover,
-header a:focus {
+.main-heading a:hover,
+.main-heading a:focus,
+.header-link-home:hover,
+.header-link-home:focus {
   background-color: var(--color-primary);
   color: var(--color-body);
   text-decoration: none;
@@ -616,6 +631,32 @@ 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.
+
+   No size of its own (TASK-111): a menu is navigation somebody is meant to
+   use rather than a footnote, so it reads at the page's size, like the footer
+   menu, which never had one. */
+.global-header .site-nav {
+  margin-top: var(--spacing-2);
+}
+
+/* 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,13 +708,12 @@ 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 in
+   the heading font, at the page's size like every other nav (TASK-111). 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);
 }
 
 .bio-avatar {
@@ -803,9 +843,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 +1225,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" }
+  ]
 }