@geekity/cms 0.3.0 → 0.4.0

package/admin/static/admin.css

@@ -20,6 +20,7 @@
   --admin-link: #2271b1;
   --admin-notice: #00a32a;
   --admin-error: #d63638;
+  --admin-unread: #f0f6fc;
   --admin-nav-width: 11rem;
 }
 
@@ -129,12 +130,73 @@ a {
   font-weight: 600;
 }
 
+/* A section is a heading over its screens. Only the open one shows them, so
+   the menu is a list of nine things until you are inside one of them. */
+
+.admin-nav-section + .admin-nav-section {
+  border-top: 1px solid #3c434a;
+}
+
+.admin-nav-heading {
+  font-weight: 600;
+}
+
+.admin-nav-open > .admin-nav-heading {
+  background: #1d2327;
+  color: #fff;
+}
+
+.admin-nav-children {
+  background: #32373c;
+  font-size: 0.95em;
+}
+
+.admin-nav-children a {
+  padding-left: 1.6rem;
+  font-weight: 400;
+}
+
 .admin-main {
   flex: 1;
   min-width: 0;
   padding: 1.25rem 1.5rem 3rem;
 }
 
+/* Narrow: the column would be a sliver, so the menu goes above the screen and
+   wraps, sections on one line and the open section's children under them. */
+
+@media (max-width: 45rem) {
+  .admin-shell {
+    display: block;
+  }
+
+  .admin-nav > ul,
+  .admin-nav-children {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .admin-nav-section + .admin-nav-section {
+    border-top: 0;
+  }
+
+  .admin-nav-section {
+    flex: 1 0 auto;
+  }
+
+  .admin-nav-open {
+    flex-basis: 100%;
+  }
+
+  .admin-nav-children a {
+    padding-left: 0.9rem;
+  }
+
+  .admin-main {
+    padding: 1rem 1rem 3rem;
+  }
+}
+
 /* Login and setup: no navigation, one card in the middle of the page. */
 
 .admin-plain {
@@ -230,10 +292,20 @@ h2 {
   color: var(--admin-muted);
 }
 
+/* What a page is to the site besides a page: Front Page, Posts Page. */
+.admin-page-role {
+  color: var(--admin-muted);
+}
+
 .admin-status-draft {
   color: var(--admin-error);
 }
 
+/* Published, but not yet: waiting for its date rather than for a decision. */
+.admin-status-scheduled {
+  color: var(--admin-link);
+}
+
 .admin-empty {
   color: var(--admin-muted);
 }
@@ -248,6 +320,7 @@ label {
 
 input[type='text'],
 input[type='password'],
+input[type='email'],
 textarea {
   width: 100%;
   padding: 0.4rem 0.5rem;
@@ -570,7 +643,7 @@ button[type='submit']:hover,
   font-size: 1.05rem;
 }
 
-.admin-settings h2:first-child {
+.admin-settings h2:first-of-type {
   margin-top: 0;
   padding-top: 0;
   border-top: 0;
@@ -602,8 +675,8 @@ button[type='submit']:hover,
   margin: 0;
 }
 
-/* The users screen stacks the table and two panels of the same shape, so they
-   need the gap the settings screen's single panel never did. */
+/* One user's screen stacks five panels of the same shape, so they need the gap
+   the settings screen's single panel never did. */
 
 .admin-list + .admin-settings,
 .admin-settings + .admin-settings {
@@ -696,6 +769,22 @@ button[type='submit']:hover,
   display: block;
 }
 
+/* Whether Akismet is on, which is the first thing anybody opening that panel
+   is asking. A line rather than a badge, so it can say what it means. */
+
+.admin-akismet-state {
+  margin: 0.75rem 0 0.25rem;
+}
+
+.admin-akismet-state.admin-akismet-valid strong {
+  color: var(--admin-notice);
+}
+
+.admin-akismet-state.admin-akismet-invalid strong,
+.admin-akismet-state.admin-akismet-unchecked strong {
+  color: var(--admin-error);
+}
+
 .admin-actor-identity {
   display: flex;
   gap: 0.75rem;
@@ -724,3 +813,409 @@ button[type='submit']:hover,
 .admin-status-failed {
   color: var(--admin-error);
 }
+
+/* The taxonomy screens: a table of terms with an inline rename field in each
+   row, so a rename is one field and one button rather than a second screen.
+   The users screen edits an email address the same way, for the same reason. */
+
+.admin-inline {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+}
+
+.admin-inline input[type='text'],
+.admin-inline input[type='email'] {
+  width: 12rem;
+  margin: 0;
+}
+
+.admin-inline button {
+  margin: 0;
+}
+
+/* One user's screen (TASK-97): the same panels the settings pages are made of,
+   so a field here looks like a field anywhere else in the admin. What is left
+   is what a panel holds that a settings page does not — a line of prose about
+   the account, and one notice at a time. */
+
+.admin-field-static {
+  margin: 0 0 0.25rem;
+}
+
+.admin-notice + .admin-notice {
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--admin-border);
+}
+
+.admin-notice h3 {
+  margin: 1rem 0 0.25rem;
+  font-size: 1rem;
+}
+
+.admin-notice .admin-inline {
+  margin-top: 0.5rem;
+}
+
+/* The how-often select beside a notification switch: narrow, so a row of
+   switches and windows still reads as one column rather than as a form. */
+
+.admin-inline select {
+  margin: 0;
+}
+
+/* A label the screen reader reads and the eye does not: every rename field
+   needs its own name, and printing "Rename eleventy to" beside each one would
+   say five times over what the column heading says once. */
+
+.admin-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The media library. Wide rows: a thumbnail, the two copyable fields, and the
+   documents pointing at the file, which is what a delete has to warn about. */
+
+.admin-media td {
+  vertical-align: top;
+}
+
+.admin-media-file {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.admin-media-thumbnail {
+  display: block;
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  background: var(--admin-field);
+  border: 1px solid var(--admin-border);
+}
+
+/* What a file that is not a picture gets instead of a thumbnail: its
+   extension, at the size a thumbnail would have been, so the rows line up. */
+
+.admin-media-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  flex: 0 0 auto;
+  background: var(--admin-field);
+  border: 1px solid var(--admin-border);
+  color: var(--admin-muted);
+  font-size: 0.75em;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+}
+
+.admin-media-links {
+  min-width: 18rem;
+}
+
+/* The copy control: a readonly field that works on its own, and a button that
+   copy.js reveals. The field is monospaced because what is in it is a URL or a
+   line of Markdown, and both are read character by character. */
+
+.admin-copy {
+  display: flex;
+  align-items: stretch;
+  gap: 0.3rem;
+  margin-bottom: 0.3rem;
+}
+
+.admin-copy input {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85em;
+}
+
+.admin-copy button {
+  flex: 0 0 auto;
+  margin: 0;
+}
+
+.admin-references {
+  margin: 0;
+  padding-left: 1.1rem;
+}
+
+/* The comments and messages screens. Both are lists of something a stranger
+   wrote, so both are cards rather than table rows: a paragraph is read across,
+   and a column narrow enough for a table is not wide enough to read one in.
+   The two screens share every rule here, because a contact message is a
+   comment nobody can approve and the eye should not have to relearn the shape
+   between them. */
+
+.admin-comments {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.admin-comment {
+  padding: 0.9rem 1.1rem 1.1rem;
+  background: var(--admin-surface);
+  border: 1px solid var(--admin-border);
+}
+
+.admin-comment + .admin-comment {
+  margin-top: 0.75rem;
+}
+
+/* An unread message, marked down its left edge the way a flash notice is and
+   tinted behind, so a run of them is findable down a long list. Mark read
+   drops the class and the row goes back to the card every other row is. */
+
+.admin-comment-unread {
+  background: var(--admin-unread);
+  border-left: 4px solid var(--admin-link);
+}
+
+/* Who wrote, how to reach them, and where it stands: one line that wraps
+   rather than a stack, because none of it is the thing being read. */
+
+.admin-comment-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.15rem 0.6rem;
+}
+
+.admin-comment-author {
+  font-weight: 600;
+}
+
+/* A website and an address are both arbitrarily long and neither is worth a
+   line of its own, so they are quiet and they break rather than push the card
+   wider than the screen. */
+
+.admin-comment-site,
+.admin-comment-email {
+  color: var(--admin-muted);
+  font-size: 0.9em;
+  overflow-wrap: anywhere;
+}
+
+.admin-comment-where {
+  margin: 0.15rem 0 0;
+  color: var(--admin-muted);
+  font-size: 0.9em;
+}
+
+.admin-comment-where code {
+  font-size: 0.9em;
+}
+
+/* The comment itself. Capped at the measure the settings form reads at: a
+   paragraph running the full width of a wide screen is a paragraph nobody
+   finishes. */
+
+.admin-comment-body {
+  max-width: 42rem;
+  margin: 0.6rem 0 0;
+  overflow-wrap: anywhere;
+}
+
+.admin-comment-body > :first-child {
+  margin-top: 0;
+}
+
+.admin-comment-body > :last-child {
+  margin-bottom: 0;
+}
+
+/* Somebody else's markup, so it is held inside the card whatever it is. */
+
+.admin-comment-body img {
+  max-width: 100%;
+  height: auto;
+}
+
+.admin-comment-body pre {
+  overflow-x: auto;
+}
+
+.admin-comment-body blockquote {
+  margin-left: 0;
+  padding-left: 0.9rem;
+  border-left: 3px solid var(--admin-border);
+  color: var(--admin-muted);
+}
+
+.admin-message-subject {
+  max-width: 42rem;
+  margin: 0.6rem 0 0;
+  overflow-wrap: anywhere;
+}
+
+/* A comment arrives as Markdown and is rendered; a contact message is plain
+   text and is printed, so the only thing standing between it and one long
+   line is this. */
+
+.admin-message-body {
+  white-space: pre-wrap;
+}
+
+/* Approve, Spam, Delete, Reply, Mark read: the same underlined-link row the
+   listings use, but wrapping, because a card is narrower than a table and the
+   Reply link on the messages screen is a button rather than a form. */
+
+.admin-comment .admin-actions {
+  flex-wrap: wrap;
+  margin-top: 0.9rem;
+}
+
+.admin-comment .admin-actions .admin-button {
+  margin: 0;
+  padding: 0.1rem 0.5rem;
+  font-size: 0.9em;
+}
+
+/* The reply box, folded away: most rows are read and moderated without one,
+   and an open textarea under every comment would bury the list. */
+
+.admin-comment-reply {
+  margin-top: 0.6rem;
+}
+
+.admin-comment-reply summary {
+  color: var(--admin-link);
+  cursor: pointer;
+}
+
+.admin-comment-reply form {
+  max-width: 42rem;
+}
+
+.admin-comment-reply textarea {
+  min-height: 6rem;
+}
+
+/* Where a comment stands, and whether a message has been read. Pending is the
+   one waiting for a person, which is why it is the loud one; approved is
+   settled and spam is held back. */
+
+.admin-status-pending {
+  color: var(--admin-link);
+  font-weight: 600;
+}
+
+.admin-status-approved {
+  color: var(--admin-notice);
+}
+
+.admin-status-spam {
+  color: var(--admin-error);
+}
+
+/* The paragraph under each of these lists names a directory, and a path with
+   no spaces in it is one long word: on a narrow screen it has to be allowed to
+   break rather than push the page sideways. Every hint that names a file has
+   the same problem. */
+
+.admin-hint code {
+  overflow-wrap: anywhere;
+}
+
+/* These two screens wrap their filter tabs in a `nav`, for the label a
+   screen reader reads out; the listings put the class straight on the `ul`.
+   Both end up as one row of links. */
+
+.admin-filters,
+.admin-filters ul {
+  flex-wrap: wrap;
+}
+
+.admin-filters ul {
+  display: flex;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Appearance > Themes. One card per theme, the way WordPress lays them out,
+   because the unit here is a whole theme rather than a row in a table: it has
+   a name, a sentence about itself, the directory it is chosen by, and one
+   thing you can do to it. The grid fills the width it is given and folds to
+   one column on a narrow screen without a media query. */
+
+.admin-themes,
+.admin-broken-themes {
+  margin: 1rem 0;
+  padding: 0;
+  list-style: none;
+}
+
+.admin-themes {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  gap: 1rem;
+}
+
+.admin-theme {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 1rem;
+  background: var(--admin-surface);
+  border: 1px solid var(--admin-border);
+}
+
+/* The one in use, marked the way the open section of the menu is: by the same
+   blue, so "this is where you are" reads the same everywhere in the admin. */
+
+.admin-theme-current {
+  border-color: var(--admin-nav-current);
+  box-shadow: inset 0 0 0 1px var(--admin-nav-current);
+}
+
+.admin-theme h2 {
+  margin: 0;
+  font-size: 1.1em;
+}
+
+.admin-theme p {
+  margin: 0;
+}
+
+.admin-status-active {
+  color: var(--admin-nav-current);
+  font-weight: 600;
+}
+
+.admin-theme-description {
+  color: var(--admin-muted);
+}
+
+/* The directory name, which is what `site.json` holds and what a person types
+   when they are editing that file by hand rather than pressing a button. */
+
+.admin-theme-id code {
+  overflow-wrap: anywhere;
+}
+
+/* A directory that was meant to be a theme. Listed, with the reason, because a
+   theme that quietly stopped appearing is the hardest kind of typo to find. */
+
+.admin-broken-theme {
+  padding: 0.35rem 0;
+  border-bottom: 1px solid var(--admin-field);
+  color: var(--admin-muted);
+  overflow-wrap: anywhere;
+}

package/admin/static/copy.js

@@ -0,0 +1,52 @@
+/* The media screen's copy buttons, and nothing else.
+
+   Every URL and every ready-made Markdown line is already a readonly text
+   input, which selects and copies like any other text, so the screen is
+   complete before this file loads. The buttons are rendered `hidden` and
+   revealed here: a button that did nothing without JavaScript would be worse
+   than no button.
+
+   It is a file rather than an inline <script> for the same reason slug.js is:
+   the admin's Content-Security-Policy says `script-src 'self'` and means it.
+
+   Plain ES5-shaped browser JavaScript, checked by eslint's browser config and
+   left alone by the TypeScript build: it is served as it is written. */
+(function () {
+  /* The clipboard API is the whole point of the button. Without it — an
+     insecure origin, an old browser — the fields stay as they are and no
+     button appears. */
+  if (!navigator.clipboard) return;
+
+  var buttons = document.querySelectorAll('.admin-copy-button');
+  if (!buttons.length) return;
+
+  Array.prototype.forEach.call(buttons, function (button) {
+    var field = document.getElementById(button.getAttribute('data-copy'));
+    if (!field) return;
+
+    button.hidden = false;
+    button.addEventListener('click', function () {
+      navigator.clipboard.writeText(field.value).then(
+        function () {
+          said(button, 'Copied');
+        },
+        function () {
+          /* Refused, usually because the document was not focused. Selecting
+             the text is then the useful thing to do: the keyboard shortcut
+             everybody already knows takes it from there. */
+          field.select();
+          said(button, 'Press ⌘C');
+        },
+      );
+    });
+  });
+
+  /* Say something on the button for a moment, then put its label back. */
+  function said(button, message) {
+    if (button.dataset.label === undefined) button.dataset.label = button.textContent;
+    button.textContent = message;
+    window.setTimeout(function () {
+      button.textContent = button.dataset.label;
+    }, 1500);
+  }
+})();