💄 (backlinks)

src/components/LinkedNotes.vue

@@ -1,8 +1,7 @@
 <template>
-  <div v-if="(backlink?.links.length ?? 0) > 0" class="linked-notes">
+  <div v-if="hasBacklinks" class="linked-notes">
-    <hr />
+    <h5 class="subtitle is-5">🔗</h5>
-    <h4 class="subtitle is-4">🔗 Links to this note</h4>
+    <ul class="links">
-    <ul>
       <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>

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;
 }