✨ (notes) share notes

src/assets/icons/share.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-share" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="6" cy="12" r="3" />
+  <circle cx="18" cy="6" r="3" />
+  <circle cx="18" cy="18" r="3" />
+  <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
+  <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
+</svg>

src/components/FluxNote.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="flux-note content note-container">
     <div class="note readme">
-      <header-note class="header" :user="user" :repo="repo" />
+      <header-note v-if="withHeader" class="header" :user="user" :repo="repo" />
       <div class="repo-title-breadcrumb">
         <a @click.prevent="focus">{{ repo }}</a>
       </div>
@@ -36,6 +36,8 @@
       :key="stackedNote"
       :index="index"
       :sha="stackedNote"
+      :user="user"
+      :repo="repo"
       :title="titles[stackedNote ?? '']"
     />
   </main>
@@ -73,7 +75,8 @@ export default defineComponent({
   props: {
     user: { type: String, required: true },
     repo: { type: String, required: true },
-    content: { type: String, required: false, default: null }
+    content: { type: String, required: false, default: null },
+    withHeader: { type: Boolean, required: false, default: true }
   },
   setup(props) {
     const refProps = toRefs(props)
@@ -190,25 +193,26 @@ $header-height: 40px;
     }
   }
 
-  @media screen and (min-width: 769px) {
+  // @media screen and (min-width: 769px) {
-    .repo-title-breadcrumb {
+  //   .repo-title-breadcrumb {
-      padding: 0.5rem 1rem 0;
+  //     padding: 0.5rem 1rem 0;
-      transform-origin: 0 0;
+  //     transform-origin: 0 0;
-      transform: rotate(90deg);
+  //     transform: rotate(90deg);
-      font-size: 0.8em;
+  //     font-size: 0.8em;
 
-      a {
+  //     a {
-        color: var(--font-color);
+  //       color: var(--font-color);
-        display: block;
+  //       display: block;
-        text-align: center;
+  //       text-align: center;
-      }
+  //     }
-    }
+  //   }
 
-    .note {
+  //   .note {
-      min-width: var(--note-width);
+  //     min-width: var(--note-width);
-      max-width: var(--note-width);
+  //     max-width: var(--note-width);
-    }
+  //     height: auto;
-  }
+  //   }
+  // }
 
   .loading {
     display: flex;
@@ -222,12 +226,19 @@ $header-height: 40px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media print, screen {
+  .readme {
+    position: static;
+  }
+
   .flux-note {
     flex-wrap: wrap;
 
     .note {
       width: 100vw;
+      height: auto;
+      position: static;
+      overflow-y: visible;
     }
   }
 

src/components/StackedNote.vue

@@ -12,6 +12,16 @@
         {{ displayedTitle }}
       </a>
     </div>
+    <div class="share">
+      <router-link
+        :to="{
+          name: 'ShareNotes',
+          params: { user: user, repo: repo, note: sha }
+        }"
+      >
+        <img src="@/assets/icons/share.svg" alt="share" />
+      </router-link>
+    </div>
     <section class="note-content" v-html="content"></section>
   </div>
 </template>
@@ -27,6 +37,8 @@ import { useImages } from '@/hooks/useImages.hook'
 export default defineComponent({
   name: 'StackedNote',
   props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true },
     index: { type: Number, required: true },
     title: { type: String, required: true },
     sha: { type: String, required: true }
@@ -99,6 +111,13 @@ $border-color: rgba(18, 19, 58, 0.2);
   }
 }
 
+.share {
+  float: right;
+  img {
+    vertical-align: bottom;
+  }
+}
+
 @media screen and (max-width: 768px) {
   .stacked-note {
     padding: 0 1.5rem;

src/styles/app.scss

@@ -35,10 +35,18 @@ body {
   font-size: 1.2em;
 }
 
-@media screen and (min-width: 769px) {
+// @media screen and (min-width: 769px) {
+//   html,
+//   body {
+//     overflow-y: hidden;
+//   }
+// }
+
+@media print, screen {
   html,
   body {
-    overflow-y: hidden;
+    overflow-y: auto;
+    height: auto;
   }
 }