feat: get inspired page

dist/static/layout.css

@@ -300,6 +300,17 @@ body.stats {
 	}
 }
 
+body.inspire {
+	height: 100%;
+	display: grid;
+
+}
+.inspire-entry {
+	margin: 2rem 0;
+	width: var(--width-max-content);
+	box-shadow: -.5rem 0 0 1px var(--color-background), calc(-.5rem - 3px) 0 0 0
+}
+
 .jump-nav {
 	position: sticky;
 	top: 0;

functions/about/index.js

@@ -2,7 +2,7 @@ import Mustache from 'mustache';
 import template from './template.html';
 import { getDefaultViewData } from '../../lib/view.js';
 import {emitPageView} from '../../lib/plausible.js';
-import {renderHtml} from "../../lib/sso-render.js";
+import {renderHtml} from '../../lib/sso-render.js';
 
 export const onRequestGet = async (context) => {
 	emitPageView(context);

functions/index.js

@@ -82,6 +82,7 @@ export const onRequestGet = async (context) => {
 		title: 'kukei.eu',
 		results,
 		hasQuery,
+		noQuery: !hasQuery,
 		mainClass,
 		noResults: !hasResults,
 		hasResults,

functions/inspire/index.js

@@ -0,0 +1,29 @@
+import Mustache from 'mustache';
+import template from './template.html';
+import { getDefaultViewData } from '../../lib/view.js';
+import {emitPageView} from '../../lib/plausible.js';
+import {renderHtml} from '../../lib/sso-render.js';
+import {getRandomBlog} from "../../lib/search.js";
+
+export const onRequestGet = async (context) => {
+	emitPageView(context);
+	const { env } = context;
+
+	const entry = await getRandomBlog(env);
+
+	console.log(entry);
+	const viewDefaults = await getDefaultViewData(env);
+	const view = {
+		...viewDefaults,
+		mainClass: 'body inspire',
+		title: 'About kukei.eu',
+		entries: [entry],
+	};
+	const html = await renderHtml(template, view);
+
+	return new Response(html, {
+		headers: {
+			'content-type': 'text/html',
+		},
+	});
+};

functions/inspire/template.html

@@ -0,0 +1,18 @@
+{{{ before }}}
+<main>
+	<h1><a href="/">Kukei.eu <br/><span>get inspired</span></a></h1>
+	<p>Every page load shows one random blog link. <br/> Have fun! Be inspired!</p>
+	<div class="inspire-entry">
+		{{#entries}}
+			<h4>{{ title }}</h4>
+			{{#excerpt}}
+			<p>{{ excerpt }}</p>
+			{{/excerpt}}
+			{{#excerptSafe}}
+			<p>{{{ excerptSafe }}}</p>
+			{{/excerptSafe}}
+			<a href="{{ url }}" target="_blank" rel="noopener">{{ url }}</a>
+		{{/entries}}
+	</div>
+</main>
+{{{ after }}}

functions/status/index.js

@@ -2,7 +2,7 @@ import template from './template.html';
 import { getDefaultViewData } from '../../lib/view.js';
 import {emitPageView} from '../../lib/plausible.js';
 import {getUnchecked, getIndexStats, getCrawlHistory} from '../../lib/mongo.js';
-import {renderHtml} from "../../lib/sso-render.js";
+import {renderHtml} from '../../lib/sso-render.js';
 
 export const onRequestGet = async (context) => {
 	emitPageView(context);

functions/template.html

@@ -11,6 +11,9 @@ <h1>
 			<input type="search" name="q" value="{{ q }}" aria-label="Search" placeholder="e.g.: snowflakes lang:en" autofocus />
 			<button type="submit">Search</button>
 		</div>
+		{{#noQuery}}
+		<p>or <a href="/inspire">get inspired</a></p>
+		{{/noQuery}}
 	{{#hasQuery}}
 		<div class="results">
 			<h2>Results <span>generated in {{ doneIn }}ms</span></h2>

lib/search.js

@@ -158,3 +158,16 @@ export const getFacets = async (env) => {
 		lang,
 	};
 };
+
+export const getRandomBlog = async (env) => {
+	const client = await getMeiliClient(env);
+	const { numberOfDocuments: blogPages} = await getMeiliClient(env).index('kukei-blogs').getStats();
+	// Random offset between 0 and blogPages
+	const offset = Math.floor(Math.random() * blogPages);
+	const { results } = await client.index('kukei-blogs').getDocuments({
+		offset,
+		limit: 1,
+	});
+
+	return results?.[0] ?? null;
+};