feat: feedback forms

dist/static/layout.css

@@ -88,7 +88,7 @@ main {
 	align-items: center;
 	justify-content: center;
 
-	& form {
+	& form.search-form {
 		display: flex;
 		width: min(70ch, 100%);
 		height: 100%;
@@ -117,7 +117,7 @@ body.body--has-query {
 	display: grid;
 	height: auto;
 
-	& > main > form {
+	& > main > form.search-form {
 		width: 100%;
 		display: grid;
 		grid-template-areas:
@@ -149,9 +149,10 @@ body.body--has-query {
 				transform: scale(1.005);
 			}
 
-			& input {
-				box-shadow: 0 0 0 2px var(--color-base);
-			}
+		}
+
+		& input[type="search"] {
+			box-shadow: 0 0 0 2px var(--color-base);
 		}
 
 		& .results {
@@ -197,7 +198,9 @@ body.body--has-query {
 	}
 }
 
-input[type="search"] {
+input[type="search"],
+input[type="text"],
+textarea {
 	font-family: var(--font-family-base);
 	padding: .75rem 0.5rem;
 	width: 100%;
@@ -231,6 +234,19 @@ button {
 	}
 }
 
+.button--secondary {
+	box-shadow: none;
+	background: var(--color-background);
+	color: var(--color-base);
+	border: 2px solid var(--color-base);
+
+	&:hover,
+	&:focus,
+	&:active {
+		box-shadow: 0 0 0 4px var(--color-contrast-bg);
+	}
+}
+
 
 
 blockquote {
@@ -246,6 +262,10 @@ blockquote {
 		display: block;
 	}
 
+	.result-item-second-level {
+		margin-bottom: 2rem;
+	}
+
 	& .result-actions {
 		display: flex;
 		& label {
@@ -359,3 +379,27 @@ history-chart {
 	height: max(50vh, 400px);
 	display: block;
 }
+
+.feedback-widget {
+	max-width: var(--width-max-content);
+	display: grid;
+	align-self: start;
+
+	& .feedback-widget__buttons {
+		display: flex;
+		align-items: start;
+		gap: 1rem;
+	}
+}
+
+.feedback-enhance-form {
+	display: grid;
+	width: var(--width-max-content);
+	gap: 2rem;
+	margin: 2rem 0 0;
+
+	& .feedback-enhance-form__group {
+		display: grid;
+		gap: .5rem;
+	}
+}

functions/api/feedback/enhance/index.js

@@ -0,0 +1,28 @@
+import { enhanceFeedbackVote } from '../../../../lib/mongo.js';
+import template from './template.html';
+import {renderHtml} from '../../../../lib/sso-render.js';
+
+export const onRequestPost = async (context) => {
+	const { env, request } = context;
+	const data = await request.formData();
+
+	const q = data.get('q');
+	const token = data.get('token');
+	const contact = data.get('contact');
+	const comment = data.get('comment');
+
+	const success = await enhanceFeedbackVote(env, {token, comment, contact});
+
+	const view = {
+		success,
+		noSuccess: !success,
+		q,
+	};
+
+	const html = await renderHtml(template, view);
+	return new Response(html, {
+		headers: {
+			'content-type': 'text/html',
+		},
+	});
+};

functions/api/feedback/enhance/template.html

@@ -0,0 +1,14 @@
+{{{ before }}}
+<main>
+	{{#success}}
+		<h1>Thanks!</h1>
+		<p>Many thanks for your time. It means a lot to me!</p>
+		<a href="/?q={{ q }}">Now, back to your business!</a>
+	{{/success}}
+	{{#noSuccess}}
+	<h1>Ufff</h1>
+	<p>Something went wrong with saving your feedback. Try CMD(ctrl) + R, maybe it will work out second time.</p>
+	{{/noSuccess}}
+</main>
+
+{{{ after }}}

functions/api/feedback/index.js

@@ -0,0 +1,30 @@
+import { createHash, randomBytes } from 'node:crypto';
+import { registerFeedbackVote } from '../../../lib/mongo.js';
+import template from './template.html';
+import {renderHtml} from '../../../lib/sso-render.js';
+
+export const onRequestPost = async (context) => {
+	const { env, request } = context;
+	const data = await request.formData();
+
+	const pseudoRandom = randomBytes(8).toString('hex');
+	const token = createHash('sha256').update(pseudoRandom).digest('hex');
+
+	const vote = parseInt(data.get('vote'), 10);
+	const q = data.get('q');
+
+	const insertedId = await registerFeedbackVote(env, {q, vote, token});
+
+	const view = {
+		q,
+		token,
+		success: !!insertedId,
+	};
+
+	const html = await renderHtml(template, view);
+	return new Response(html, {
+		headers: {
+			'content-type': 'text/html',
+		},
+	});
+};

functions/api/feedback/template.html

@@ -0,0 +1,21 @@
+{{{ before }}}
+<main>
+	<h1>Thank you</h1>
+	<p>Many thanks for your feedback. If you want you can add some more!</p>
+	<p>Once you send this form, it would be saved in kukei.eu database and removed once your feedback is processed. <br/>  I might contact you later if you provide your contact info.</p>
+	<form action="/api/feedback/enhance" method="POST" class="feedback-enhance-form">
+		<input type="hidden" name="token" value="{{ token }}" />
+		<input type="hidden" value="{{ q }}" name="q" />
+		<div class="feedback-enhance-form__group">
+			<label for="comment">Your comment</label>
+			<textarea id="comment" name="comment"></textarea>
+		</div>
+		<div class="feedback-enhance-form__group">
+			<label for="contact">How to contact you?</label>
+			<input type="text" id="contact" name="contact" placeholder="Mastodon handle, email, whatever you wish" />
+		</div>
+		<button type="submit">Send</button>
+		<a href="/?q={{ q }}">nah, send me back to my results</a>
+	</form>
+</main>
+{{{ after }}}

functions/template.html

@@ -1,6 +1,6 @@
 {{{ before }}}
 <main>
-	<form action="/">
+	<form action="/" class="search-form">
 		<div class="headline">
 			<h1>
 				<a href="/">Kukei.eu</a>
@@ -74,5 +74,17 @@ <h4>{{ title }}</h4>
 		</div>
 	{{/hasQuery}}
 	</form>
+	{{#hasQuery}}
+	<form action="/api/feedback" method="POST" class="feedback-widget">
+		<h2>Feedback</h2>
+		<p>This is still a new project. I need you help to fine tune it. <br/> Are the results any good?</p>
+		<div class="feedback-widget__buttons">
+			<button name="vote" value="1" type="submit" class="button--secondary">👍</button>
+			<button name="vote" value="-1" type="submit" class="button--secondary">👎</button>
+		</div>
+		<input type="hidden" name="q" value="{{ q }}" />
+
+	</form>
+	{{/hasQuery}}
 </main>
 {{{ after }}}

lib/mongo.js

@@ -103,3 +103,56 @@ export const trackQuery = async (envs, {q, hasResults}) => {
 	});
 	console.log(`Analytics via mongo took ${Date.now() - d}ms`);
 };
+
+export const registerFeedbackVote = async (envs, {q, vote, token}) => {
+	const response = await callMongo(envs, 'insertOne', {
+		collection: 'feedback',
+		database: envs.ATLAS_DB,
+		dataSource: envs.ATLAS_SOURCE,
+		document: {
+			q,
+			vote,
+			token,
+			created: (new Date()).toISOString(),
+		},
+	});
+
+	const { insertedId } = response;
+
+	return insertedId;
+};
+
+export const enhanceFeedbackVote = async (envs, {token, comment, contact }) => {
+	const { document } = await callMongo(envs, 'findOne', {
+		collection: 'feedback',
+		database: envs.ATLAS_DB,
+		dataSource: envs.ATLAS_SOURCE,
+		filter: {
+			token,
+		},
+		projection: {
+			_id: 1,
+		},
+	});
+
+	if (!document?._id) {
+		return false;
+	}
+
+	await callMongo(envs, 'updateOne', {
+		collection: 'feedback',
+		database: envs.ATLAS_DB,
+		dataSource: envs.ATLAS_SOURCE,
+		filter: {
+			token,
+		},
+		update: {
+			$set: {
+				comment,
+				contact,
+			},
+		},
+	});
+
+	return true;
+};