Post preview with blobs and mentions

.gitignore

@@ -9,4 +9,7 @@ yarn.lock
 
 # Visual Studio Code
 launch.json
-*.code-workspace
+*.code-workspace
+
+# Vim
+.*.sw[a-z]

package.json

@@ -16,7 +16,7 @@
     "dev": "nodemon --inspect src/index.js --debug --no-open",
     "fix": "common-good fix",
     "start": "node src/index.js",
-    "test": "tap --timeout 240 && common-good check --dependency-check-suffix '-i changelog-version -i mkdirp -i nodemon -i stylelint-config-recommended'",
+    "test": "tap --timeout 240 && common-good test --dependency-check-suffix '-i changelog-version -i mkdirp -i nodemon -i stylelint-config-recommended'",
     "preversion": "npm test",
     "version": "mv docs/CHANGELOG.md ./ && changelog-version && mv CHANGELOG.md docs/ && git add docs/CHANGELOG.md"
   },
@@ -26,6 +26,7 @@
     "@koa/router": "^8.0.0",
     "debug": "^4.1.1",
     "env-paths": "^2.2.0",
+    "file-type": "^15.0.1",
     "highlight.js": "^9.18.1",
     "hyperaxe": "^1.3.0",
     "is-svg": "^4.2.1",
@@ -36,11 +37,13 @@
     "lodash": "^4.17.11",
     "markdown-it": "^10.0.0",
     "open": "^7.0.3",
+    "piexifjs": "^1.0.4",
     "pretty-ms": "^6.0.0",
     "pull-paramap": "^1.2.2",
     "pull-sort": "^1.0.2",
     "pull-stream": "^3.6.12",
     "require-style": "^1.1.0",
+    "sharp": "^0.25.2",
     "ssb-client": "^4.9.0",
     "ssb-config": "^3.4.4",
     "ssb-markdown": "^6.0.7",
@@ -49,8 +52,7 @@
     "ssb-ref": "^2.13.9",
     "ssb-tangle": "^1.0.1",
     "ssb-thread-schema": "^1.1.1",
-    "yargs": "^15.3.1",
-    "sharp": "^0.25.2"
+    "yargs": "^15.3.1"
   },
   "devDependencies": {
     "@types/debug": "^4.1.5",

src/assets/style.css

@@ -113,24 +113,53 @@ a {
   color: var(--fg-light);
 }
 
-button {
+button,
+.file-button {
   cursor: pointer;
   background: var(--fg);
   color: var(--bg);
   border: var(--size--4) solid var(--fg);
   padding: var(--size--1) var(--size-0);
   border-radius: var(--common-radius);
+  font-size: 8pt;
+}
+
+.file-button {
+  float: right;
+  margin: 0;
+  background: transparent;
+  color: var(--fg);
+}
+
+#blob {
+  visibility: hidden;
+  height: 0;
+  padding: 0;
+  margin: 0;
+}
+
+section.post-preview {
+  padding-top: 0;
+  background: var(--bg-selection);
+  border: var(--fg-alt) solid 1px;
+}
+
+section.post-preview > section > footer {
+  display: none;
 }
 
 section header a {
   display: flex;
   color: var(--fg-status);
   text-decoration: none;
-  font-weight: bold;
   margin-right: var(--size--2);
   margin-left: var(--size--2);
 }
 
+section header a:hover {
+  text-decoration: underline;
+}
+
 /* For use with elements specific for
  * rendering in a text browser and intended
  * to be hidden in a graphical browser. */
@@ -141,7 +170,11 @@ section header a {
 section > footer > div > a,
 section > footer > div > form > button {
   color: var(--fg-status);
-  font-weight: bold;
+}
+
+section > footer > div > a:hover,
+section > footer > div > form > button:hover {
+  text-decoration: underline;
 }
 
 section > footer > div > form > button {
@@ -319,13 +352,16 @@ nav {
 nav > ul > li > a {
   color: var(--fg);
   text-decoration: none;
-  font-weight: bold;
 }
 
-nav > ul > li > a.current {
+nav > ul > li > a:hover {
   text-decoration: underline;
 }
 
+nav > ul > li > a.current {
+  font-weight: bold;
+}
+
 section {
   padding: var(--size-0);
   border-radius: var(--common-radius);
@@ -336,6 +372,69 @@ section {
   box-sizing: border-box;
 }
 
+.indent section,
+.thread-container section {
+  margin: unset;
+  border-radius: unset;
+  border-bottom: var(--fg-alt) solid 1px;
+}
+
+.indent details[open] {
+  border-bottom: var(--fg-alt) solid 1px;
+}
+
+.indent section:last-of-type,
+.thread-container section:last-of-type {
+  border-bottom: unset;
+}
+
+.mentions-container {
+  display: grid;
+  grid-template-columns: 4rem auto;
+  grid-column-gap: 1rem;
+  margin-bottom: var(--size-0);
+}
+
+.mentions-image {
+  grid-row: 1 / span 2;
+}
+.mentions-image > img {
+  border: var(--fg) solid 1px;
+}
+
+.mentions-container .emoji {
+  font-size: 1.5rem;
+}
+
+.mentions-name {
+  font-size: 1.25rem;
+  text-decoration: unset;
+}
+
+.mentions-name:hover {
+  text-decoration: underline;
+}
+
+.emo-rel {
+  display: inline-grid;
+  align-items: center;
+  grid-template-columns: 2rem auto;
+  grid-column-gap: 0.25rem;
+}
+
+.mentions-listing {
+  display: inline;
+  background-color: var(--bg);
+  padding: var(--size--1);
+  font-size: 92%;
+  border-radius: var(--common-radius);
+  border: var(--size--4) solid var(--bg-status);
+  user-select: all;
+  font-size: var(--size--1);
+  overflow-x: auto;
+  width: 24rem;
+}
+
 section > header {
   background: var(--bg);
   color: var(--fg-status);
@@ -352,6 +451,10 @@ section > header {
   flex-grow: 1;
 }
 
+.author-action > a {
+  text-decoration: underline;
+}
+
 section > header > div {
   display: flex;
   justify-content: space-between;
@@ -371,6 +474,7 @@ section header span {
 section header .author > a:first-child {
   margin-left: 0;
   color: var(--fg-light);
+  font-weight: bold;
 }
 
 /*
@@ -400,6 +504,7 @@ section > .centered-footer {
 
 section > footer {
   color: var(--fg-status);
+  margin-top: var(--size-0);
 }
 
 section > footer br {
@@ -415,6 +520,10 @@ section > footer > div > * {
   text-decoration: none;
 }
 
+section > footer > div > form > button:first-of-type {
+  font-size: 100%;
+}
+
 section > footer > div > form > button.liked {
   color: var(--red);
 }