From 54bce751227452a48395db49ad302563d7c3d367 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 6 Jun 2021 15:58:12 +0200
Subject: [PATCH] :lipstick: (backlinks)

---
 src/components/LinkedNotes.vue | 22 +++++++++++++++++-----
 src/styles/app.scss            |  2 ++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/LinkedNotes.vue b/src/components/LinkedNotes.vue
index b1dde21..a1963f0 100644
--- a/src/components/LinkedNotes.vue
+++ b/src/components/LinkedNotes.vue
@@ -1,8 +1,7 @@
 <template>
-  <div v-if="(backlink?.links.length ?? 0) > 0" class="linked-notes">
-    <hr />
-    <h4 class="subtitle is-4">🔗 Links to this note</h4>
-    <ul>
+  <div v-if="hasBacklinks" class="linked-notes">
+    <h5 class="subtitle is-5">🔗</h5>
+    <ul class="links">
       <li v-for="link in backlink?.links" :key="link.sha">
         <a @click.prevent="emitNote(link.sha)">
           {{ link.title }}
@@ -15,7 +14,7 @@
 <script lang="ts">
 import { useBacklinks } from '@/hooks/useBacklinks.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'LinkedNotes',
@@ -25,6 +24,9 @@ export default defineComponent({
   setup(props) {
     const { backlink } = useBacklinks(props.sha)
     const { addStackedNote } = useQueryStackedNotes()
+    const hasBacklinks = computed(
+      () => (backlink.state.value?.links.length ?? 0) > 0
+    )
 
     const emitNote = (sha: string) => {
       addStackedNote(props.sha, sha)
@@ -32,6 +34,7 @@ export default defineComponent({
 
     return {
       backlink: backlink.state,
+      hasBacklinks,
       emitNote
     }
   }
@@ -40,8 +43,17 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .linked-notes {
+  padding: 1rem;
+  background-color: var(--light-link);
+
   .subtitle {
     font-style: italic;
+    padding-top: 1rem;
+    text-align: center;
+  }
+
+  ul {
+    list-style-type: square;
   }
 }
 </style>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 2ee5a92..d191920 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -13,11 +13,13 @@
 
 $primary: #2c3a47;
 $link: #44b9a0;
+$light-link: lighten($link, 45%);
 $family-primary: 'Courier Prime', monospace;
 
 :root {
   --font-family: var(#{$family-primary});
   --font-color: #4a4a4a;
+  --light-link: #{$light-link};
   --background-color: #ffffff;
   --note-width: 620px;
 }