@geekity/cms 0.19.0 → 0.20.0

package/themes/default/layouts/post.njk

@@ -3,7 +3,8 @@
   a kicker that names its kind (Article, Note, Reply) and the categories it is
   filed under.
 
-  An article, and a reply with a title, has the only headline: the title as its
+  A post with a title its words do not open with (an article, a titled reply,
+  a titled like with no words at all) has the only headline: the title as its
   `p-name` and the author's `description` under it as the deck, a
   `p-summary`. A post with no title opens on its words, set larger. What a
   reply answers, and what a like, repost or bookmark cites, opens a post with

package/themes/default/partials/citations.njk

@@ -12,15 +12,27 @@
   `context` is what the target said about itself when the post was saved or
   synced (TASK-244), only when it said something: its `name` and `author`,
   printed through autoescaping like a reply's context. With a name, the name
-  is the link; with only an author, "a post" is; with neither, the bare URL.
+  is the link; with only an author, "a post" is; for a URL that is an image,
+  "an image from" its host; with nothing, "a page on" its host.
+
+  `context.picture` is the target's picture, copied into the site's uploads
+  (TASK-252), absent when there is none or the post hid its previews. A
+  repost of a photo (`picture.shownInFull`) shows it in full under the line; any
+  other citation shows it as a thumbnail beside the line. Both link to the
+  target, and `picture.imgHtml` is the `img.u-photo` inside the `h-cite`.
 #}
 {% import "partials/cited-page.njk" as cited %}
 {% set citationVerbs = { "repost-of": "Reposted", "like-of": "Liked", "bookmark-of": "Bookmarked" } %}
 {% for citation in citations %}
 {% set citedPage = citation.context %}
-<div class="reply-context cite u-{{ citation.property }} h-cite">
+{% set picture = citedPage.picture %}
+<div class="reply-context cite u-{{ citation.property }} h-cite{% if picture and not picture.shownInFull %} cite-with-thumb{% endif %}">
+  {%- if picture and not picture.shownInFull %}{{ cited.thumb(citation.url, picture) }}{% endif %}
   <p class="cite-line small">{{ citationVerbs[citation.property] }}
     {{- cited.page(citation.url, citedPage) -}}
   </p>
+  {%- if picture.shownInFull %}
+  <a class="cite-photo" href="{{ citation.url }}">{{ picture.imgHtml | safe }}</a>
+  {%- endif %}
 </div>
 {% endfor %}

package/themes/default/partials/cited-page.njk

@@ -8,14 +8,25 @@
 
   `url` is the cited page, always its `u-url`. `context` is what the page said
   about itself, from the reply contexts file. With a name, the name is the
-  link; with only an author, "a post" is; with neither, the bare URL. The
-  author follows as an `h-card`.
+  link; with only an author, "a post" is; a URL that is itself an image
+  (`context.image`, TASK-255) is "an image from" its host; anything else is "a
+  page on" its host, never the bare URL, which can run to hundreds of
+  characters. The author follows as an `h-card`.
 
   A name that already ends in " by " and the author's name, matched without
   regard to case (SoundCloud's oEmbed gives "Flickermood by Forss" by Forss),
   is not followed by the author again. Its last words become the `h-card`,
   printed as the title wrote them, and the whole name stays the `p-name`, so a
   parser reads the same name and author either way.
+
+  A page that names no author may name its site, `context.site` (its
+  `og:site_name`), printed after a middle dot as plain text: a site is not an
+  author, so it is no `h-card`.
+
+  `thumb(url, picture)` is a cited page's thumbnail (TASK-252): a link to the
+  page around `picture.imgHtml`, out of the tab order and hidden from assistive
+  technology because the title beside it is the same link. A video's carries
+  `cite-video`, which the stylesheet draws a play mark on.
 #}
 {% macro page(url, context) %}
 {%- set title = (context.name or "") | trim -%}
@@ -27,12 +38,18 @@
 {%- else %}
   {%- if context.name %} <a class="u-url p-name" href="{{ url }}">{{ context.name }}</a>
   {%- elif context.author %} <a class="u-url" href="{{ url }}">a post</a>
-  {%- else %} <a class="u-url" href="{{ url }}">{{ url }}</a>
+  {%- elif context.image %} <a class="u-url" href="{{ url }}">an image from {{ url | host }}</a>
+  {%- else %} <a class="u-url" href="{{ url }}">a page on {{ url | host }}</a>
   {%- endif %}
-  {%- if context.author %} by {{ card(context.author, context.author.name) }}{% endif %}
+  {%- if context.author %} by {{ card(context.author, context.author.name) }}
+  {%- elif context.site %} · <span class="cite-site">{{ context.site }}</span>{% endif %}
 {%- endif %}
 {%- endmacro %}
 
+{% macro thumb(url, picture) -%}
+<a class="cite-thumb{% if picture.video %} cite-video{% endif %}" href="{{ url }}" tabindex="-1" aria-hidden="true">{{ picture.imgHtml | safe }}</a>
+{%- endmacro %}
+
 {% macro card(author, name) -%}
 <span class="p-author h-card">
   {%- if author.url %}<a class="u-url p-name" href="{{ author.url }}">{{ name }}</a>

package/themes/default/partials/reply-context.njk

@@ -12,13 +12,18 @@
   or synced: its name, a short excerpt, its author and its date, each only when
   it said so. It is somebody else's words, so every piece is printed through
   autoescaping and none of it with `safe`. With a name, the name is the link;
-  with only an author, "a post" is; with neither, the bare URL. Its date is
+  with only an author, "a post" is; with neither, "a page on" its host. Its date is
   written in `lang`, the language of the entry it sits in (TASK-189), so a
   listing sets `lang` from each entry as it sets `replyContext`.
+
+  `replyContext.picture`, when the target has one and the reply shows it, is
+  drawn as a thumbnail beside the line, as `citations.njk` draws it (TASK-252).
 #}
 {% import "partials/cited-page.njk" as cited %}
 {% if inReplyTo %}
-<div class="reply-context cite u-in-reply-to h-cite">
+{% set picture = replyContext.picture %}
+<div class="reply-context cite u-in-reply-to h-cite{% if picture %} cite-with-thumb{% endif %}">
+  {%- if picture %}{{ cited.thumb(inReplyTo, picture) }}{% endif %}
   <p class="cite-line small">In reply to
     {{- cited.page(inReplyTo, replyContext) }}
     {%- if replyContext.published %}, <time class="dt-published" datetime="{{ replyContext.published | date("iso") }}">{{ replyContext.published | date("readable", none, lang) }}</time>

package/themes/default/src/style.css

@@ -643,6 +643,43 @@
     @apply mt-1 text-[0.98rem] leading-snug text-muted italic;
   }
 
+  .cite-with-thumb {
+    @apply grid grid-cols-[6rem_minmax(0,1fr)] items-start gap-x-3;
+  }
+
+  .cite-with-thumb > :not(.cite-thumb) {
+    @apply col-start-2;
+  }
+
+  .cite-thumb {
+    @apply relative row-span-2 block;
+  }
+
+  .cite-thumb img {
+    @apply block aspect-[4/3] h-auto w-full rounded-sm object-cover;
+  }
+
+  .cite-video::before {
+    @apply absolute inset-0 m-auto size-9 rounded-full;
+    content: '';
+    background: rgb(0 0 0 / 0.65);
+  }
+
+  .cite-video::after {
+    @apply absolute inset-0 m-auto h-4 w-3.5 translate-x-[10%];
+    content: '';
+    background: #fff;
+    clip-path: polygon(0 0, 100% 50%, 0 100%);
+  }
+
+  .cite-photo {
+    @apply mt-2 block;
+  }
+
+  .cite-photo img {
+    @apply block h-auto max-w-full rounded-sm;
+  }
+
   /* One post or page: `article.blog-post.h-entry`. */
   .post-header {
     @apply mb-8;

package/themes/default/static/style.css

@@ -7,6 +7,9 @@
       --tw-font-weight: initial;
       --tw-tracking: initial;
       --tw-border-style: solid;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-space-y-reverse: 0;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
@@ -1156,6 +1159,68 @@
     font-style: italic;
   }
 
+  .cite-with-thumb {
+    align-items: flex-start;
+    column-gap: calc(var(--spacing) * 3);
+    grid-template-columns: 6rem minmax(0, 1fr);
+    display: grid;
+  }
+
+  .cite-with-thumb > :not(.cite-thumb) {
+    grid-column-start: 2;
+  }
+
+  .cite-thumb {
+    grid-row: span 2 / span 2;
+    display: block;
+    position: relative;
+  }
+
+  .cite-thumb img {
+    aspect-ratio: 4 / 3;
+    border-radius: var(--radius-sm);
+    object-fit: cover;
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .cite-video:before {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+    content: "";
+    background: #000000a6;
+    border-radius: 3.40282e38px;
+    margin: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  .cite-video:after {
+    height: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 3.5);
+    --tw-translate-x: 10%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    content: "";
+    clip-path: polygon(0 0, 100% 50%, 0 100%);
+    background: #fff;
+    margin: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  .cite-photo {
+    margin-top: calc(var(--spacing) * 2);
+    display: block;
+  }
+
+  .cite-photo img {
+    border-radius: var(--radius-sm);
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
   .post-header {
     margin-bottom: calc(var(--spacing) * 8);
   }
@@ -2283,6 +2348,24 @@
   initial-value: solid;
 }
 
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;