feat(frontend): support different card uses

paulrobertlloyd · paulrobertlloyd · commit c6a6b9cda172 · 2024-12-22T01:26:48.000Z
diff --git a/helpers/frontend/views/frontend-components.njk b/helpers/frontend/views/frontend-components.njk
@@ -197,6 +197,14 @@
   }]
 }) }}
 
+{{ card({
+  locale: application.locale,
+  title: "Card",
+  description: "Description",
+  published: "2024-12-22",
+  permalink: "#"
+}) }}
+
 <h2><code>cardGrid</code></h2>
 
 {{ cardGrid({
diff --git a/packages/frontend/components/card/styles.css b/packages/frontend/components/card/styles.css
@@ -48,7 +48,7 @@
   font: var(--card-title-font, var(--font-subhead));
 }
 
-.card__title a {
+.card a[rel="bookmark"] {
   &::before {
     border-radius: var(--border-radius-small);
     content: "";
diff --git a/packages/frontend/components/card/template.njk b/packages/frontend/components/card/template.njk
@@ -9,12 +9,18 @@
   </div>
   {% endif %}
   <div class="card__body">
+    {% if opts.title %}
     <h{{ headingLevel }} class="card__title">
-      <a href="{{ opts.url }}">
+      {% if opts.url and not opts.permalink %}
+      <a href="{{ opts.url }}" rel="bookmark">
+      {% endif %}
         {{- icon(opts.icon) if opts.icon -}}
         {{- opts.title | safe -}}
+      {% if opts.url and not opts.permalink %}
       </a>
+      {% endif %}
     </h{{ headingLevel }}>
+    {% endif %}
     {{ prose({
       classes: "card__meta",
       text: opts.description | markdown | striptags
@@ -24,9 +30,15 @@
       {% for item in opts.badges %}
       {{ badge(item) | indent(6) if item }}
       {% endfor %}
+      {% if opts.permalink and not opts.url %}
+      <a href="{{ opts.permalink }}" rel="bookmark">
+      {% endif %}
       <time datetime="{{ opts.published }}">
         {{ opts.published | date("PPp", { locale: opts.locale, timeZone: application.timeZone }) }}
       </time>
+      {% if opts.permalink and not opts.url %}
+      </a>
+      {% endif %}
     </footer>
     {% endif %}
   </div>

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@`
`48`	`48`	`font: var(--card-title-font, var(--font-subhead));`
`49`	`49`	`}`
`50`	`50`
`51`		`-.card__title a {`
	`51`	`+.card a[rel="bookmark"] {`
`52`	`52`	`&::before {`
`53`	`53`	`border-radius: var(--border-radius-small);`
`54`	`54`	`content: "";`