feat: add highlight and share

consolelabs · Feb 16, 2024 · f2de94e · f2de94e
1 parent c35e906
commit f2de94e
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 7 deletions.
diff --git a/assets/js/share.js b/assets/js/share.js
@@ -0,0 +1,32 @@
+window.onload = function() {
+  document.addEventListener("mousedown", (e) => {
+    const tooltip = document.querySelector("#tooltip");
+    console.log(e.target);
+    if (tooltip === e.target || tooltip.contains(e.target)) return;
+    tooltip.classList.remove("pop--visible");
+  });
+  document.addEventListener("mouseup", () => {
+    const tooltip = document.querySelector("#tooltip");
+    const selection = window.getSelection();
+    const text = selection.toString();
+    if (!text) return;
+    tooltip.classList.add("pop--visible");
+
+    tooltip.href = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+      text + "\n" + window.location.href
+    )}`;
+    Popper.createPopper(selection.getRangeAt(0), tooltip, {
+      placement: "top",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 10],
+          },
+        },
+      ],
+    });
+  });
+
+  console.log("share script init ok");
+};
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
@@ -7,8 +7,14 @@
   --column-gap: 20px;
 }
 
+::selection {
+  background: white;
+  color: black;
+}
+
 /* Main */
 body {
+  position: relative;
   font: 16px sans-serif;
   color: black;
   text-rendering: optimizeLegibility;
@@ -69,10 +75,15 @@ pre {
   overflow-x: auto;
   width: 100%;
   box-sizing: border-box;
+  display: flex;
+  overflow: overlay;
+  scrollbar-width: thin;
 }
 
 pre > code {
-  display: block;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  display: inline-block;
   text-indent: 0;
   white-space: inherit;
   font-weight: normal;
@@ -83,14 +94,12 @@ code {
   font-size: 12px;
   background: black;
   color: white;
-  padding: 2px 5px;
+  padding: 4px 10px;
   white-space: wrap;
   border-radius: 2px;
   font-weight: bold;
   display: inline-block;
   line-height: 16px;
-  overflow-x: scroll;
-  margin-bottom: -4px;
 }
 
 code comment {
@@ -157,6 +166,10 @@ main {
   float: left;
 }
 
+main > p {
+  margin-top: 0;
+}
+
 main > ul {
   line-height: 25px;
   margin: 0;
@@ -189,7 +202,9 @@ main > ul > li > a {
   aspect-ratio: 1 / 1;
 }
 
-table, th, td {
+table,
+th,
+td {
   border: 1px solid;
   border-collapse: collapse;
   border-spacing: 0px;
@@ -221,7 +236,10 @@ td:has(img) {
   display: grid;
   column-gap: var(--column-gap);
   box-sizing: border-box;
-  grid-template-columns: repeat(auto-fill, minmax(var(--nav-sidebar-width), calc(50% - var(--column-gap))));
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(var(--nav-sidebar-width), calc(50% - var(--column-gap)))
+  );
   line-height: 20px;
 }
 
@@ -429,7 +447,10 @@ a:visited {
   nav .site-nav {
     display: grid;
     column-gap: var(--column-gap);
-    grid-template-columns: repeat(auto-fill, minmax(var(--nav-sidebar-width), 1fr));
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(var(--nav-sidebar-width), 1fr)
+    );
   }
 
   main {
@@ -445,3 +466,59 @@ a:visited {
     width: var(--nav-sidebar-width);
   }
 }
+
+.pop {
+  position: absolute;
+  display: inline-flex;
+  max-width: 20em;
+  padding: 0.75em;
+  background-color: white;
+  color: black;
+  border-radius: 4px;
+  z-index: 100;
+  font-size: 12px;
+  font-style: italic;
+  transition: opacity 0.1s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.pop > svg {
+  width: 25px;
+  height: 25px;
+}
+
+.pop--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.pop__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: 0;
+  border-style: solid;
+  border-width: 4px;
+  border-color: transparent;
+}
+
+.pop[data-popper-placement^="bottom"] {
+  margin-top: 4px;
+}
+.pop[data-popper-placement^="bottom"] .pop__arrow {
+  border-top-width: 0;
+  border-bottom-color: white;
+  top: -4px;
+  left: calc(50% - 4px);
+}
+
+.pop[data-popper-placement^="top"] {
+  margin-bottom: 4px;
+}
+.pop[data-popper-placement^="top"] .pop__arrow {
+  border-bottom-width: 0;
+  border-top-color: white;
+  bottom: -4px;
+  left: calc(50% - 4px);
+}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -38,6 +38,9 @@
     {{ end }}
     <link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=">
     <script defer data-domain="log.console.so" src="https://plausible.io/js/script.js"></script>
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    {{ $shareScript := resources.Get "js/share.js" }}
+    <script defer src="{{ $shareScript.RelPermalink }}"></script>
     {{ $styles := resources.Get "scss/styles.scss" | toCSS (dict "outputStyle" "compressed") | minify }}
     <style>{{ $styles.Content | safeCSS }}</style>
 
@@ -133,6 +136,10 @@
     {{ $.Scratch.Set "section" (replaceRE "^/([^/]+)/.*" "$1" .RelPermalink) }}
 
     <body class="{{ if .IsHome }}home{{ else }}{{ $.Scratch.Get "section" }}{{ end }}">
+        <a id="tooltip" class="pop" href="#">
+          <svg class="icon icon--twitter" viewBox="0 0 101.53 82.49" xmlns="http://www.w3.org/2000/svg"><path d="m91 20.62a18.68 18.68 0 0 1 .19 2.58 58.44 58.44 0 0 1 -4 20.92 66.22 66.22 0 0 1 -11.2 19 53.33 53.33 0 0 1 -18.84 14 59.6 59.6 0 0 1 -25.28 5.35 58.34 58.34 0 0 1 -31.87-9.3c1.72.13 3.37.2 5 .2a40.78 40.78 0 0 0 26-8.92 19.07 19.07 0 0 1 -12-4.07 20.6 20.6 0 0 1 -7.3-10.38 20.75 20.75 0 0 0 4.16.4 26.41 26.41 0 0 0 5.95-.6 18.82 18.82 0 0 1 -11.2-7.24 21.21 21.21 0 0 1 -4.26-13.21v-.35c0 .79.89 1.42 2.67 1.88a22.14 22.14 0 0 0 5.65.7 25.41 25.41 0 0 1 -7.53-7.58 17.48 17.48 0 0 1 -3-9.71 21.19 21.19 0 0 1 2.8-10.52 59.45 59.45 0 0 0 19.14 15.46 57.54 57.54 0 0 0 23.92 6.35 19.39 19.39 0 0 1 -.59-4.76 20 20 0 0 1 6.11-14.67 20.84 20.84 0 0 1 29.94.39 44.74 44.74 0 0 0 13.29-4.95 20.48 20.48 0 0 1 -9.32 11.5 42.27 42.27 0 0 0 12.1-3.37 45.93 45.93 0 0 1 -10.53 10.9z"></path></svg>
+          <div class="pop__arrow"></div>
+        </a>
         <header>
             {{ $image := resources.Get "img/ConsoleLabs_logo.png" }}
             <a href="/">