Created Dockerfile and fly config + fixed Flexbox issue

elijah-potter · elijah-potter · commit febd150d28fc · 2024-01-15T14:17:45.000-07:00
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/english_words.txt b/english_words.txt
@@ -6841,7 +6841,6 @@ aionial
 ayont
 ayous
 air
-aira
 airable
 airampo
 airan
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/harper-wasm/Cargo.toml b/harper-wasm/Cargo.toml
@@ -6,6 +6,10 @@ edition = "2021"
 [lib]
 crate-type = ["cdylib", "rlib"]
 
+[profile.release]
+opt-level = "s" 
+strip = true
+
 [dependencies]
 console_error_panic_hook = "0.1.7"
 tracing = "0.1.40"
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.css b/web/src/app.css
@@ -16,7 +16,7 @@
   position: relative;
 }
 
-.underlinespecial:after {
+.underlinespecial::after {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -30,3 +30,26 @@
   bottom: -3px;
   left: 0;
 }
+
+textarea {
+  --tw-ring-shadow: 0 0 #000 !important;
+}
+
+.animate-bigbounce{
+  animation: bigbounce 1s infinite;
+}
+
+.animate-after-bigbounce::after {
+  animation: bigbounce 1s infinite;
+}
+
+@keyframes bigbounce {
+	0%, 100% {
+		transform: translateY(-40%);
+		animation-timing-function: cubic-bezier(0.8,0,1,1);
+	}
+	50% {
+		transform: none;
+		animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
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
@@ -10,26 +10,36 @@
 
 	let lints: Lint[] = [];
 	let focused: number | undefined;
+	let editor: HTMLTextAreaElement | null;
 
 	$: 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"
+		on:click={() => editor && editor.focus()}
+	>
 		<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}
+			bind:this={editor}
+			class="w-full m-0 rounded-none p-0 z-0 bg-transparent border-none text-lg resize-none focus:border-0"
 			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-none basis-[400px] 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)}>
@@ -49,19 +59,21 @@
 					>
 						<p style="height: 50px">{lint.message}</p>
 						{#each lint.suggestions as suggestion}
-							<Button
-								color="primary"
-								class="w-full mb-1"
-								style="height: 40px; margin: 5px 0px;"
-								on:click={() =>
-									applySuggestion(content, suggestion, lint.span).then(
-										(edited) => (content = edited)
-									)}
-							>
-								Replace "{content.substring(lint.span.start, lint.span.end)}" with "{suggestion.ReplaceWith.reduce(
-									(p, c) => p + c
-								)}"
-							</Button>
+							<div class="w-full p-[4px]">
+								<Button
+									color="primary"
+									class="w-full"
+									style="height: 40px; margin: 5px 0px;"
+									on:click={() =>
+										applySuggestion(content, suggestion, lint.span).then(
+											(edited) => (content = edited)
+										)}
+								>
+									Replace "{content.substring(lint.span.start, lint.span.end)}" with "{suggestion.ReplaceWith.reduce(
+										(p, c) => p + c
+									)}"
+								</Button>
+							</div>
 						{/each}
 					</div>
 				</div>
diff --git a/web/src/lib/Underlines.svelte b/web/src/lib/Underlines.svelte
@@ -52,7 +52,7 @@
 				let lintContent = [
 					spanContent(lint.span, content).replaceAll(' ', '\u00A0'),
 					'red',
-					lintIndex === focusLintIndex ? '4px' : '2px'
+					lintIndex === focusLintIndex
 				];
 
 				return [...prevContent, lintContent];
@@ -88,8 +88,8 @@
 			{:else}
 				<span style={`margin-right: -4px;`}>
 					<span
-						class="underlinespecial"
-						style={`--bg-color: ${chunk[1]}; --line-width: ${chunk[2]};`}
+						class={`underlinespecial ${chunk[2] ? 'animate-after-bigbounce' : ''}`}
+						style={`--bg-color: ${chunk[1]}; --line-width: ${chunk[2] ? '4px' : '2px'};`}
 					>
 						{chunk[0]}
 					</span>
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-8 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 flex-grow 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'
+		})
 	}
 };
 
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -3,11 +3,8 @@ export default {
 		'./src/**/*.{html,js,svelte,ts}',
 		'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
 	],
-
 	plugins: [require('flowbite/plugin')],
-
 	darkMode: 'class',
-
 	theme: {
 		extend: {
 			colors: {
diff --git a/web/yarn.lock b/web/yarn.lock

-Original file line number
+Diff line change
 ayont
 ayous
 air
 -aira
 airable
 airampo
 airan