Created Dockerfile and fly config + fixed Flexbox issue

Automattic · Jan 15, 2024 · c6f745a · c6f745a
1 parent 309d840
commit c6f745a
Show file tree

Hide file tree

Showing 11 changed files with 390 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 target
+build
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,42 @@
+FROM rust:latest as wasm-build
+
+RUN mkdir -p /usr/build/
+WORKDIR /usr/build/
+
+RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+
+COPY . .
+
+WORKDIR /usr/build/harper-wasm
+RUN wasm-pack build --release
+
+FROM node:slim as node-build
+
+RUN mkdir -p /usr/build/
+WORKDIR /usr/build/
+
+RUN mkdir harper-wasm
+
+COPY --from=wasm-build /usr/build/harper-wasm/pkg /usr/build/harper-wasm/pkg
+COPY web web
+COPY alice.txt .
+
+WORKDIR /usr/build/web
+
+RUN yarn install && yarn build
+
+FROM node:slim
+
+COPY --from=node-build /usr/build/web/build /usr/build/web/build
+COPY --from=node-build /usr/build/web/package.json /usr/build/web/package.json 
+COPY --from=node-build /usr/build/web/yarn.lock /usr/build/web/yarn.lock
+COPY --from=node-build /usr/build/web/node_modules /usr/build/web/node_modules
+
+WORKDIR /usr/build/web
+
+RUN yarn install
+
+ENV HOST=0.0.0.0
+ENV PORT=3000
+
+ENTRYPOINT ["node", "build"]
diff --git a/build.sh b/build.sh
diff --git a/fly.toml b/fly.toml
@@ -0,0 +1,17 @@
+app = "writewithharper"
+primary_region = "den"
+
+[build]
+
+[http_service]
+  internal_port = 3000
+  force_https = true
+  auto_stop_machines = true
+  auto_start_machines = true
+  min_machines_running = 1
+  processes = ["app"]
+
+[[vm]]
+  cpu_kind = "shared"
+  cpus = 1
+  memory_mb = 256
diff --git a/web/.dockerignore b/web/.dockerignore
@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/web/package.json b/web/package.json
@@ -12,7 +12,8 @@
     "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.0.0",
+    "@flydotio/dockerfile": "^0.5.0",
+    "@sveltejs/adapter-node": "^3.0.0",
     "@sveltejs/kit": "^1.20.4",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",

diff --git a/web/src/app.html b/web/src/app.html
@@ -8,8 +8,8 @@
   %sveltekit.head%
 </head>
 
-<body data-sveltekit-preload-data="hover">
-  <div style="display: contents">%sveltekit.body%</div>
+<body data-sveltekit-preload-data="hover" class="m-0 p-0 w-full h-full">
+  <div style="display: contents" class="m-0 p-0 w-full h-full">%sveltekit.body%</div>
 </body>
 
 </html>
diff --git a/web/src/lib/Editor.svelte b/web/src/lib/Editor.svelte
@@ -12,24 +12,29 @@
 	let focused: number | undefined;
 
 	$: lintText(content).then((newLints) => (lints = newLints));
+	$: boxHeight = calcHeight(content);
 
-	$: console.log(focused);
+	function calcHeight(boxContent: string): number {
+		let numberOfLineBreaks = (boxContent.match(/\n/g) || []).length;
+		let newHeight = 20 + numberOfLineBreaks * 30 + 12 + 2;
+		console.log(newHeight);
+		return newHeight;
+	}
 </script>
 
-<div class="flex flex-row w-full h-full [&>*]:m-5">
-	<Card class="flex-auto max-w-full p-5 grid z-10 text-lg overflow-auto">
+<div class="flex flex-row w-full h-full p-5">
+	<Card class="flex-grow h-full p-5 grid z-10 max-w-full text-lg overflow-auto mr-5">
 		<div class="m-0 p-0" style="grid-row: 1; grid-column: 1">
 			<Underlines {content} focusLintIndex={focused} />
 		</div>
 		<textarea
 			class="w-full m-0 rounded-none p-0 z-0 bg-transparent border-none text-lg resize-none"
-			rows={content.length - content.replaceAll('\n', '').length + 1}
 			spellcheck="false"
-			style="grid-row: 1; grid-column: 1"
+			style={`grid-row: 1; grid-column: 1; height: ${boxHeight}px`}
 			bind:value={content}
 		></textarea>
 	</Card>
-	<Card class="flex flex-col flex-grow overflow-auto h-full">
+	<Card class="flex flex-col flex-initial overflow-auto h-full">
 		<h2 class="text-2xl font-bold m-1">Suggestions</h2>
 		{#each lints as lint, i}
 			<Card class="m-1 hover:translate-x-3 transition-all" on:click={() => (focused = i)}>
@@ -51,7 +56,7 @@
 						{#each lint.suggestions as suggestion}
 							<Button
 								color="primary"
-								class="w-full mb-1"
+								class="w-full m-1"
 								style="height: 40px; margin: 5px 0px;"
 								on:click={() =>
 									applySuggestion(content, suggestion, lint.span).then(

diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
@@ -2,8 +2,8 @@
 	import Editor from '$lib/Editor.svelte';
 </script>
 
-<div class="w-full h-screen flex flex-col items-center">
-	<div class="p-24">
+<div class="w-full h-screen flex flex-col items-center m-0 p-0">
+	<div class="p-16 flex-initial">
 		<h1 class="text-5xl font-bold text-center">Hi. I'm Harper.</h1>
 		<h2 class="text-3xl text-center">The Grammar Checker for Artists</h2>
 		<h2 class="text-2xl font-light italic text-center">Private. Free. Unobtrusive.</h2>
@@ -16,7 +16,7 @@
 			>
 		</div>
 	</div>
-	<div class="w-full 2xl:w-3/4 h-1/2">
+	<div class="w-full 2xl:w-3/4 flex-shrink overflow-hidden">
 		<Editor />
 	</div>
 </div>
diff --git a/web/svelte.config.js b/web/svelte.config.js
@@ -1,12 +1,14 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	preprocess: vitePreprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter({
+			out: 'build'
+		})
 	}
 };