add support for images

cbroms · Oct 7, 2021 · edb4cfa · edb4cfa
1 parent 4718ab4
commit edb4cfa
Show file tree

Hide file tree

Showing 17 changed files with 1,383 additions and 87 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 .DS_Store
 node_modules
-*.config
+*.config
+
+images/
diff --git a/ltm-generator/src/routes/thought/[id].svelte b/ltm-generator/src/routes/thought/[id].svelte
@@ -39,30 +39,30 @@
 	<h1 class="node">{thought.data.node}</h1>
 
 	<main>{@html thought.content}</main>
+</article>
+
+<div class="footer">
+	<div class="footer-desc">
+		<span
+			>Linked by {thought.backlinks.length} thought{thought.backlinks.length !== 1
+				? 's '
+				: ' '}<span class="link-arrow">&seArr;</span></span
+		><span
+			><a href="/changelog#{timestamp.replaceAll(' ', '-')}">Last revisited {timestamp}</a></span
+		>
+	</div>
 
-	<div class="footer">
-		<div class="footer-desc">
-			<span
-				>Linked by {thought.backlinks.length} thought{thought.backlinks.length !== 1
-					? 's '
-					: ' '}<span class="link-arrow">&seArr;</span></span
-			><span
-				><a href="/changelog#{timestamp.replaceAll(' ', '-')}">Last revisited {timestamp}</a></span
+	<div class="backlinks-container">
+		{#each thought.backlinks as backlink}
+			<a href="/thought/{backlink.link}"
+				><div class="link">
+					<div class="link-content">{@html backlink.excerpt.replaceAll('.md', '')}</div>
+					<div class="link-node">{backlink.data.node}</div>
+				</div></a
 			>
-		</div>
-
-		<div class="backlinks-container">
-			{#each thought.backlinks as backlink}
-				<a href="/thought/{backlink.link}"
-					><div class="link">
-						<div class="link-content">{@html backlink.excerpt.replaceAll('.md', '')}</div>
-						<div class="link-node">{backlink.data.node}</div>
-					</div></a
-				>
-			{/each}
-		</div>
+		{/each}
 	</div>
-</article>
+</div>
 
 <style>
 	.node {
@@ -76,9 +76,11 @@
 	}
 
 	.footer {
+		margin: 0 auto;
 		margin-top: 80px;
 		margin-bottom: 40px;
 		padding: 20px 0;
+		max-width: 600px;
 	}
 
 	.footer-desc {

diff --git a/ltm-generator/static/global.css b/ltm-generator/static/global.css
@@ -39,10 +39,15 @@
 	box-sizing: border-box;
 }
 
+* {
+	box-sizing: border-box;
+}
+
 body {
 	font-size: 18px;
 	line-height: 22px;
 	margin: 0;
+	padding: 15px;
 	background-color: #f5f5f5;
 	font-family: var(--serif);
 }
@@ -57,6 +62,43 @@ h6 {
 	color: #000;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+blockquote,
+pre {
+	width: 100%;
+	max-width: 600px;
+	margin: 20px auto;
+}
+
+blockquote {
+	padding-left: 15px;
+	border-left: 2px solid;
+	opacity: 0.6;
+}
+
+figure {
+	max-width: 700px;
+	margin: 20px auto;
+	text-align: center;
+}
+
+picture,
+img {
+	max-width: 700px;
+}
+
+figcaption {
+	font-style: italic;
+}
+
 p {
 	color: #1f1f1f;
 }
@@ -78,15 +120,6 @@ a:visited {
 	color: black;
 }
 
-article,
-.content {
-	max-width: 600px;
-	width: 100%;
-	margin: 0 auto;
-	padding: 15px;
-	box-sizing: border-box;
-}
-
 .link-arrow {
 	font-size: 12px;
 	height: 22px;

diff --git a/thoughts.sh b/thoughts.sh
@@ -15,7 +15,13 @@ printf "${thoughts}${blue}Starting wm-api...${reset}"
 cd wm-api && npm run start &
 apiprocess=$!
 
-sleep 3 
+sleep 2
+
+printf "${thoughts}${blue}Copying images to static directory...${reset}"
+
+mkdir -p ltm-generator/static/images/
+
+cp -R wm/images/ ltm-generator/static/images/
 
 printf "${thoughts}${blue}Building static site with ltm-generator...${reset}"
 

diff --git a/wm-api/index.js b/wm-api/index.js
@@ -1,5 +1,6 @@
 const express = require("express");
 const cors = require("cors");
+const fileUpload = require("express-fileupload");
 const app = express();
 const port = 3000;
 
@@ -11,10 +12,12 @@ const {
   getChanges,
   makeSearch,
   makeFile,
+  saveImage,
 } = require("./utils/filesystem");
 
 app.use(cors());
 app.use(express.json());
+app.use(fileUpload({ useTempFiles: true }));
 
 app.post("/thought/:id", (req, res, next) => {
   const id = req.params.id;
@@ -26,6 +29,15 @@ app.post("/thought/:id", (req, res, next) => {
     .catch(next);
 });
 
+app.post("/thought/:id/file", (req, res, next) => {
+  let id = req.params.id;
+  saveImage(id, req.files.file1)
+    .then((content) => {
+      res.json(content);
+    })
+    .catch(next);
+});
+
 app.get("/thought/:id/preview", (req, res, next) => {
   const id = req.params.id;
   const file = id.indexOf(".md") !== -1 ? id : id + ".md";