cors for localhost

server/.env

@@ -4,6 +4,7 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
+ENVIRONMENT=dev
 PORT=8080
 FRONTEND_URL="http://localhost:3000"
 DATABASE_URL="file:./dev.db"

server/package-lock.json

@@ -10,11 +10,13 @@
       "license": "MIT",
       "dependencies": {
         "@prisma/client": "^3.15.2",
+        "cors": "^2.8.5",
         "dotenv": "^16.0.1",
         "express": "^4.18.1",
         "sqlite3": "^5.0.8"
       },
       "devDependencies": {
+        "@types/cors": "^2.8.12",
         "@types/express": "^4.17.13",
         "@types/node": "^18.0.0",
         "@types/sqlite3": "^3.1.8",
@@ -245,6 +247,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
+      "dev": true
+    },
     "node_modules/@types/express": {
       "version": "4.17.13",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
@@ -961,6 +969,18 @@
       "integrity": "sha512-JxbCBUdrfr6AQjOXrxoTvAMJO4HBTUIlBzslcJPAz+/KT8yk53fXun51u+RenNYvad/+Vc2DIz5o9UxlCDymFQ==",
       "dev": true
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -4234,6 +4254,12 @@
         "@types/node": "*"
       }
     },
+    "@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
+      "dev": true
+    },
     "@types/express": {
       "version": "4.17.13",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
@@ -4795,6 +4821,15 @@
       "integrity": "sha512-JxbCBUdrfr6AQjOXrxoTvAMJO4HBTUIlBzslcJPAz+/KT8yk53fXun51u+RenNYvad/+Vc2DIz5o9UxlCDymFQ==",
       "dev": true
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",

server/package.json

@@ -12,11 +12,13 @@
   "license": "MIT",
   "dependencies": {
     "@prisma/client": "^3.15.2",
+    "cors": "^2.8.5",
     "dotenv": "^16.0.1",
     "express": "^4.18.1",
     "sqlite3": "^5.0.8"
   },
   "devDependencies": {
+    "@types/cors": "^2.8.12",
     "@types/express": "^4.17.13",
     "@types/node": "^18.0.0",
     "@types/sqlite3": "^3.1.8",

server/server.ts

@@ -1,11 +1,20 @@
 import "dotenv/config";
 import express, { Express, Request, Response } from "express";
+import cors from "cors";
 import { PrismaClient, EncryptedNote } from "@prisma/client";
 
 const prisma = new PrismaClient();
 
 const app: Express = express();
 
+if (process.env.ENVIRONMENT == "dev") {
+  app.use(
+    cors({
+      origin: "*",
+    })
+  );
+}
+
 app.use(express.json());
 
 // start the Express server
@@ -13,12 +22,6 @@ app.listen(process.env.PORT, () => {
   console.log(`server started at http://localhost:${process.env.PORT}`);
 });
 
-// type EncryptedNote = {
-//   id?: string;
-//   ciphertext: string;
-//   hmac: string;
-// };
-
 // Post new encrypted note
 app.post("/note/", async (req: Request<{}, {}, EncryptedNote>, res) => {
   const note = req.body;

webapp/src/lib/components/navbar/NavBar.svelte

@@ -6,7 +6,7 @@
 <div id="navbar" class="h-14 border-b border-neutral-200">
 	<div
 		id="navbar-content"
-		class="h-full px-4 6xl:px-0 max-w-6xl mx-auto flex items-center justify-between content-center"
+		class="h-full px-4 6xl:px-0 max-w-6xl mx-auto flex items-center justify-between content-center whitespace-nowrap "
 	>
 		<div id="navbar-left" class="flex gap-8 flex">
 			<a href="/">

webapp/src/lib/components/navbar/NavBarLink.svelte

@@ -2,7 +2,7 @@
 	export let href: string = '/';
 </script>
 
-<a {href} class="self-center w-full h-full whitespace-nowrap text-neutral-600">
+<a {href} class="self-center w-full h-full text-neutral-600">
 	<div class="h-full flex flex-col justify-center">
 		<slot />
 	</div>

webapp/src/routes/__layout.svelte

@@ -2,32 +2,34 @@
 	import Footer from '$lib/components/Footer.svelte';
 	import NavBar from '$lib/components/navbar/NavBar.svelte';
 	import NavBarLink from '$lib/components/navbar/NavBarLink.svelte';
-	import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
+	import LogoGithub from 'svelte-icons/io/IoLogoGithub.svelte';
-
 	import '../app.css';
 </script>
 
-<div class="z-50 sticky top-0 w-full bg-white">
+<div class="">
-	<div class="top-0 left-0 right-0">
+	<div class="z-50 sticky top-0 w-full bg-white">
-		<NavBar>
+		<div class="top-0 left-0 right-0">
-			<svelte:fragment slot="left">
+			<NavBar>
-				<NavBarLink href="/about">About</NavBarLink>
+				<svelte:fragment slot="left">
-				<NavBarLink href="/install">Get plugin</NavBarLink>
+					<NavBarLink href="/about">About</NavBarLink>
-			</svelte:fragment>
+					<NavBarLink href="/install">Get plugin</NavBarLink>
-			<svelte:fragment slot="right">
+				</svelte:fragment>
-				<NavBarLink href="https://github.com/mcndt/obsidian-note-sharing">
+				<svelte:fragment slot="right">
-					<span class="h-6 text-black"><FaGithub /></span>
+					<span>Dark mode</span>
-				</NavBarLink>
+					<NavBarLink href="https://github.com/mcndt/obsidian-note-sharing">
-			</svelte:fragment>
+						<span class="h-7 text-black"><LogoGithub /></span>
-			></NavBar
+					</NavBarLink>
-		>
+				</svelte:fragment>
+				></NavBar
+			>
+		</div>
+	</div>
+
+	<div class="container mx-auto max-w-4xl mx-auto mt-12 px-4 2xl:px-0 prose-neutral">
+		<slot />
+	</div>
+
+	<div class="mt-12">
+		<Footer />
 	</div>
 </div>
-
-<div class="container mx-auto max-w-4xl mx-auto mt-12 px-4 2xl:px-0 prose-neutral">
-	<slot />
-</div>
-
-<div class="mt-12">
-	<Footer />
-</div>

webapp/src/routes/note/[id].svelte

@@ -21,7 +21,7 @@
 	import { browser } from '$app/env';
 	import decrypt from '$lib/crypto/decrypt';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
-	import FaMarkdown from 'svelte-icons/fa/FaMarkdown.svelte';
+	import LogoMarkdown from 'svelte-icons/io/IoLogoMarkdown.svelte';
 
 	export let note: EncryptedNote;
 	let plaintext: string;
@@ -43,7 +43,7 @@
 		<span class="uppercase">Shared 7 days ago</span>
 		<button class="flex gap-2 uppercase items-center">
 			<span>Raw Markdown</span>
-			<span class="h-4"><FaMarkdown /></span>
+			<span class="h-6"><LogoMarkdown /></span>
 		</button>
 	</p>