style: file lists

packages/endpoint-media/views/files.njk

@@ -1,11 +1,19 @@
+{%- from "file/macro.njk" import file -%}
 {% extends "document.njk" %}
 
 {% block content %}
   {%- if files %}
-  <ul>
-  {%- for file in files %}
-    <li><a href="{{ parentUrl }}{{ file._id }}">{{ icon(file.properties["post-type"]) }} {{ file.properties.filename }}</a></li>
+  <ol class="no-bullets">
+  {%- for item in files %}
+    <li>
+      {{ file({
+        title: item.properties.filename,
+        href: parentUrl + item._id,
+        icon: item.properties["post-type"],
+        meta: item.properties.url
+      }) }}
+    </li>
   {%- endfor %}
-  </ul>
+  </ol>
   {%- endif %}
 {% endblock %}

packages/endpoint-micropub/views/posts.njk

@@ -1,11 +1,19 @@
+{%- from "file/macro.njk" import file -%}
 {% extends "document.njk" %}
 
 {% block content %}
   {%- if posts %}
-  <ul>
-  {%- for post in posts %}
-    <li><a href="{{ parentUrl }}{{ post._id }}">{{ icon(post.properties["post-type"]) }} {{ post.properties.name }}</a></li>
+  <ol class="no-bullets">
+  {%- for item in posts %}
+    <li>
+      {{ file({
+        title: item.properties.name or item.properties['post-type'] | capitalize,
+        href: parentUrl + item._id,
+        icon: item.properties["post-type"],
+        meta: item.properties.url
+      }) }}
+    </li>
   {%- endfor %}
-  </ul>
+  </ol>
   {%- endif %}
 {% endblock %}

packages/frontend/components/file/macro.njk

@@ -0,0 +1,3 @@
+{% macro file(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

packages/frontend/components/file/styles.css

@@ -0,0 +1,17 @@
+.file__title {
+  --flow-space: 0;
+  @extend %label;
+}
+
+.file__title svg {
+  inline-size: var(--step-0);
+  margin-inline-end: var(--space-inline);
+}
+
+.file__meta {
+  @extend %caption;
+
+  color: var(--color-neutral-dark);
+  margin-block-start: 0;
+  margin-inline-start: calc(var(--step-0) + var(--space-inline));
+}

packages/frontend/components/file/template.njk

@@ -0,0 +1,7 @@
+{%- set classes = "file" + (" " + opts.classes if opts.classes) -%}
+<article class="{{ classes }}">
+  <h2 class="file__title">
+    {{ icon(opts.icon) }}<a href="{{ opts.href }}">{{ opts.title }}</a>
+  </h2>
+  <p class="file__meta">{{ opts.meta }}</p>
+</article>

packages/frontend/styles/scopes/linear.css

@@ -34,17 +34,17 @@
   padding: 0;
 }
 
-.s-linear h2 {
+.s-linear h2:not([class]) {
   @extend %heading;
 
   margin-block-start: calc(var(--flow-space) * 1.5);
 }
 
-.s-linear h2 + * {
+.s-linear h2:not([class]) + * {
   margin-block-start: calc(var(--flow-space) / 1.5);
 }
 
-.s-linear h3 {
+.s-linear h3:not([class]) {
   @extend %subhead;
 }
 
@@ -97,6 +97,11 @@
   line-height: var(--line-height-tight);
 }
 
+.s-linear .no-bullets {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
 .s-linear > *:not([class]) {
   max-inline-size: var(--line-measure);
   word-break: break-word;