Feat: add tags to headlines + tag page. (#26)

* Feat: add tags to headlines + tag page.

* Test: fix tests and add tests for tags.

* Add: Improve base css and tags.

* Docs: add changelog.

clojure/resources/firn/_firn_starter/layouts/default.clj

@@ -4,6 +4,6 @@
     (head
      [:body
       [:main
-       [:article
+       [:article.content
         ;; [:div (render :toc)] ;; Optional; add a table of contents
         [:div (render :file)]]]])))

clojure/resources/firn/_firn_starter/pages/tags.clj

@@ -1,3 +1,17 @@
 (defn tags
-  []
-  [:h1 "Tags"])
+  [{:keys [site-tags partials]}]
+  (let [{:keys [head]} partials]
+    (head
+     [:body
+      [:main
+       [:article
+        [:div.content
+         [:h1 "Tags"]
+         (for [[tag-name tags] site-tags]
+           [:div
+            [:h2 {:id tag-name :class "firn-tag-heading"} tag-name]
+            (for [tag tags]
+              [:div
+               [:a {:href (tag :headline-link)}
+                (tag :from-file) " - "
+                (tag :from-headline)]])])]]]])))

clojure/resources/firn/_firn_starter/static/css/firn_base.css

@@ -17,30 +17,35 @@
   --color-primary: #3498db;
   --color-primary-accent: #3498db14;
   --color-bg: #fff;
-  --color-bg-secondary: #e9e9e9;
-  --color-secondary: #3498db;
-  --color-secondary-accent: #3498db0b;
+  --color-bg-secondary: #eee;
+  --color-secondary: #f7bb88;
+  --color-secondary-accent: #db7a3414;
   --color-shadow: #f4f4f4;
   --color-text: #444;
   --color-text-secondary: #999;
   --font-family: "IBM Plex Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   --hover-brightness: 1.2;
   --justify-important: center;
   --justify-normal: left;
-  --line-height: 1.5;
+  --line-height: 1.75;
   --width-card: 285px;
   --width-card-medium: 460px;
   --width-card-wide: 800px;
-  --width-content: 960px;
+  --width-content: 860px;
   /* Currently, Firn only supports 'todo | done' keywords. */
   --keyword-active: #2ecc71; /* For "active" Todo keywords. */
   --keyword-done: #bdc3c7;   /* For "done type keywords" */
   --keyword-size: xx-small;
 
+  /* Headline priorities ([#A] [#B] etc) */
   --priority-a-bg: #c0392b;
   --priority-b-bg: #3498db;
   --priority-c-bg: #2ecc71;
   --priority-size: xx-small;
+  /* Headline Tags (:my-tag: :unfinished: etc)*/
+  --tag-size: small;
+  --tag-bg: #ecf0f1
+
 }
 
 
@@ -50,11 +55,10 @@
     --color-primary-accent: #555;
     --color-bg: #333;
     --color-bg-secondary: #555;
-    --color-secondary: #EB9563;
-    --color-secondary-accent: #EB95630b;
     --color-shadow: #bbbbbb20;
     --color-text: #f7f7f7;
     --color-text-secondary: #aaa;
+    --tag-bg: #95a5a6;
   }
 }
 
@@ -65,6 +69,7 @@ body {
   color: var(--color-text);
   font-family: var(--font-family);
   line-height: var(--line-height);
+  font-size: 14px;
   margin: 0;
   overflow-x: hidden;
 }
@@ -77,6 +82,7 @@ main {
 
 .content {
   max-width: var(--width-content);
+  margin: 0 auto;
 }
 
 hr {
@@ -146,7 +152,6 @@ nav {
   display: flex;
   font-weight: bold;
   justify-content: space-between;
-  margin-bottom: 7rem;
 }
 
 nav ul {
@@ -267,7 +272,7 @@ sup {
 
 /* Links */
 a {
-  color: var(--color-secondary);
+  color: var(--color-primary);
   display: inline-block;
   font-weight: bold;
   text-decoration: none;
@@ -452,14 +457,16 @@ table tr:nth-child(even) {
 }
 
 /* Quotes */
+
 blockquote {
   display: block;
-  font-size: x-large;
   line-height: var(--line-height);
-  margin: 1rem auto;
-  max-width: var(--width-card-medium);
-  padding: 1.5rem 1rem;
-  text-align: var(--justify-important);
+  padding: 1rem 1.5rem;
+  background: var(--color-secondary-accent);
+  margin: 0;
+  border-left: 4px solid var(--color-secondary);
+  max-width: 36rem;
+  margin: 2rem auto;
 }
 
 blockquote footer {
@@ -515,13 +522,6 @@ li > p {
 }
 
 .firn-headline-priority {
-  /* margin: -22px 8px 0 -6px; */
-  /* font-size: 8px; */
-  /* min-width: 12px; */
-  /* min-height: 12px; */
-  /* display: inline-flex; */
-  /* justify-content: center; */
-  /* align-items: center; */
   background-color: var(--color-secondary);
   border-radius: var(--border-radius);
   color: white;
@@ -569,7 +569,38 @@ li > p {
   position: relative;
 }
 
-.firn-headline-timestamp {}
+.firn-headline-text {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+
+.firn-tags {
+
+}
+
+.firn-tag-heading {
+  text-transform: capitalize;
+}
+
+.firn-tag {
+  background-color: var(--tag-bg);
+  border-radius: var(--border-radius);
+  color: var(--color-text);
+  font-size: var(--tag-size);
+  font-weight: bold;
+  margin: 0 4px;
+  padding: 0.2rem 0.4rem;
+}
+
+.firn-tag:hover {
+  filter: none;
+}
+
+.firn-tag::before {
+  content: "#";
+}
 
 .firn-cookie {}
 
@@ -581,7 +612,9 @@ li > p {
 
 /* Org Property Drawers */
 
-.firn-properties {}
+.firn-properties {
+  background-color: var(--color-bg-secondary);
+}
 
 .firn-property-key {}
 
@@ -595,7 +628,7 @@ li > p {
 
 /* If you choose to render :PROPERTIES: drawers, you may style them: */
 .firn-properties {
-  background: #efefef;
+  background: var(--color-bg-secondary);
   padding: 8px;
 }
 .firn-property-key {}