max/memorium
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: max:098da12ac4991c6bfa56859794d3bde18489c1cc
Branches Tags
max:main
...
compare: max:696082250d6d49f5ab5bf0942f824f571398f1e4
Branches Tags
max:main

4 Commits
098da12ac4 ... 696082250d

Author SHA1 Message Date
Max Richter
696082250d fix: soo many lint errors 2025-11-03 00:03:27 +01:00
Max Richter
c13420c3ab chore: deno fmt 2025-11-02 21:58:02 +01:00
Max Richter
21124dfe00 fix: remove unused imports 2025-11-02 21:56:26 +01:00
Max Richter
928782c453 fix: accessing nonexistant variable 2025-11-02 21:14:41 +01:00
70 changed files with 693 additions and 750 deletions
Expand all files Collapse all files

2
Dockerfile
View File

@@ -15,7 +15,7 @@ COPY . .
ENV DATA_DIR=/app/data ENV DATA_DIR=/app/data
RUN mkdir -p $DATA_DIR && \ RUN mkdir -p $DATA_DIR && \
deno install --allow-import --allow-ffi --allow-scripts=npm:sharp@0.33.5-rc.1 -e main.ts &&\ deno install --allow-import --allow-ffi --allow-scripts=npm:sharp -e main.ts &&\
sed -i -e 's/"deno"/"no-deno"/' node_modules/@libsql/client/package.json &&\ sed -i -e 's/"deno"/"no-deno"/' node_modules/@libsql/client/package.json &&\
deno task build deno task build

14
components/Card.tsx
View File

@@ -1,9 +1,9 @@
import { isYoutubeLink } from "@lib/string.ts"; import { isYoutubeLink } from "@lib/string.ts";
import { IconBrandYoutube } from "@components/icons.tsx"; import { IconBrandYoutube } from "@components/icons.tsx";
import { GenericResource } from "@lib/types.ts";
import { SmallRating } from "@components/Rating.tsx"; import { SmallRating } from "@components/Rating.tsx";
import { Link } from "@islands/Link.tsx"; import { Link } from "@islands/Link.tsx";
import { parseRating } from "@lib/helpers.ts"; import { parseRating } from "@lib/helpers.ts";
import { GenericResource, getNameOfResource } from "@lib/marka/schema.ts";
export function Card( export function Card(
{ {
@@ -101,14 +101,16 @@ export function ResourceCard(
? `/api/images?image=${img}&width=200&height=200` ? `/api/images?image=${img}&width=200&height=200`
: "/placeholder.svg"; : "/placeholder.svg";
const rating = res.content.reviewRating?.ratingValue
? parseRating(res.content.reviewRating.ratingValue)
: undefined;
return ( return (
<Card <Card
title={res.content?.name || res.content?.itemReviewed?.name || title={getNameOfResource(res)}
res.content?.headline ||
res?.name}
backgroundColor={res.image?.average} backgroundColor={res.image?.average}
thumbhash={res.image?.blurhash} thumbhash={res.image?.thumbhash}
rating={parseRating(res.content?.reviewRating?.ratingValue)} rating={rating}
image={imageUrl} image={imageUrl}
link={`/${sublink}/${res.name.replace(/\.md$/g, "")}`} link={`/${sublink}/${res.name.replace(/\.md$/g, "")}`}
/> />

3
components/Image.tsx
View File

@@ -64,7 +64,8 @@ const Image = (
style={props.style} style={props.style}
srcset={responsiveAttributes.srcset} srcset={responsiveAttributes.srcset}
sizes={responsiveAttributes.sizes} sizes={responsiveAttributes.sizes}
src={`/api/images?image=${asset(props.src)}${props.width ? `&width=${props.width}` : "" src={`/api/images?image=${asset(props.src)}${
props.width ? `&width=${props.width}` : ""
}${props.height ? `&height=${props.height}` : ""}`} }${props.height ? `&height=${props.height}` : ""}`}
width={props.width} width={props.width}
height={props.height} height={props.height}

31
components/MetaTags.tsx
View File

@@ -1,5 +1,6 @@
import { GenericResource } from "@lib/types.ts";
import { Head } from "$fresh/runtime.ts"; import { Head } from "$fresh/runtime.ts";
import { GenericResource, getNameOfResource } from "@lib/marka/schema.ts";
import { formatDate } from "@lib/string.ts";
function generateJsonLd(resource: GenericResource): string { function generateJsonLd(resource: GenericResource): string {
const imageUrl = resource.content?.image const imageUrl = resource.content?.image
@@ -8,34 +9,34 @@ function generateJsonLd(resource: GenericResource): string {
const baseSchema: Record<string, unknown> = { const baseSchema: Record<string, unknown> = {
"@context": "https://schema.org", "@context": "https://schema.org",
"@type": resource.content?._type, // Converts type to PascalCase "@type": resource.content?._type,
name: resource.name, name: resource.name,
description: resource.content || resource.meta?.average || "", description: resource.content || "",
keywords: resource.tags?.join(", ") || "", keywords: resource.content.keywords?.join(", ") || "",
image: imageUrl, image: imageUrl,
}; };
if (resource.meta?.author) { if (resource.content?.author) {
baseSchema.author = { baseSchema.author = {
"@type": "Person", "@type": "Person",
name: resource.meta.author, name: resource.content.author,
}; };
} }
if (resource.meta?.date) { if (resource.content?.datePublished) {
try { try {
baseSchema.datePublished = new Date(resource.meta.date).toISOString(); baseSchema.datePublished = formatDate(
new Date(resource.content.datePublished),
);
} catch (_) { } catch (_) {
// Ignore invalid date // Ignore invalid date
} }
} }
if (resource.meta?.rating) { if (resource.content?.reviewRating) {
baseSchema.aggregateRating = { baseSchema.reviewRating = {
"@type": "AggregateRating", "@type": "Rating",
ratingValue: resource.meta.rating, ...resource.content.reviewRating,
ratingCount: 1,
bestRating: 5, // Assuming a scale of 1 to 10
}; };
} }
@@ -51,7 +52,7 @@ export function MetaTags({ resource }: { resource: GenericResource }) {
return ( return (
<> <>
<Head> <Head>
<meta property="og:title" content={resource.content?.name} /> <meta property="og:title" content={getNameOfResource(resource)} />
<meta property="og:type" content={resource.content?._type} /> <meta property="og:type" content={resource.content?._type} />
<meta <meta
property="og:image" property="og:image"

16
components/PageHero.tsx
View File

@@ -20,7 +20,8 @@ function Wrapper(
) { ) {
return ( return (
<div <div
class={`flex justify-between flex-col relative w-full ${image ? "min-h-[400px]" : "min-h-[200px]" class={`flex justify-between flex-col relative w-full ${
image ? "min-h-[400px]" : "min-h-[200px]"
} rounded-3xl overflow-hidden`} } rounded-3xl overflow-hidden`}
> >
<HeroContext.Provider value={{ image }}> <HeroContext.Provider value={{ image }}>
@@ -51,7 +52,8 @@ function Title(
return ( return (
<OuterTag <OuterTag
href={link} href={link}
class={`${ctx.image ? "noisy-gradient" : "" class={`${
ctx.image ? "noisy-gradient" : ""
} after:opacity-90 flex gap-4 items-center ${ctx.image ? "pt-12" : ""}`} } after:opacity-90 flex gap-4 items-center ${ctx.image ? "pt-12" : ""}`}
> >
<h2 <h2
@@ -81,7 +83,8 @@ function EditLink({ href }: { href: string }) {
const ctx = useContext(HeroContext); const ctx = useContext(HeroContext);
return ( return (
<a <a
class={`px-4 py-2 ${ctx.image ? "bg-gray-300 text-gray-800" : "text-gray-200" class={`px-4 py-2 ${
ctx.image ? "bg-gray-300 text-gray-800" : "text-gray-200"
} rounded-lg flex gap-1 items-center`} } rounded-lg flex gap-1 items-center`}
href={href} href={href}
> >
@@ -101,7 +104,7 @@ function Header({ children }: { children: ComponentChildren }) {
function Subline( function Subline(
{ entries, children }: { { entries, children }: {
children?: ComponentChildren; children?: ComponentChildren;
entries: (string | { href: string; title: string })[]; entries: (string | undefined | { href: string; title: string })[];
}, },
) { ) {
const ctx = useContext(HeroContext); const ctx = useContext(HeroContext);
@@ -114,10 +117,11 @@ function Subline(
{entries.filter((s) => {entries.filter((s) =>
s && (typeof s === "string" ? s?.length > 1 : true) s && (typeof s === "string" ? s?.length > 1 : true)
).map((s) => { ).map((s) => {
if (!s) return;
if (typeof s === "string") { if (typeof s === "string") {
return <span>{s}</span>; return <span key={s}>{s}</span>;
} else { } else {
return <a href={s.href}>{s.title}</a>; return <a key={s.href} href={s.href}>{s.title}</a>;
} }
})} })}
</div> </div>

4
components/layouts/main.tsx
View File

@@ -1,6 +1,6 @@
import { ComponentChildren } from "preact"; import { ComponentChildren } from "preact";
import Search from "@islands/Search.tsx"; import Search from "@islands/Search.tsx";
import { GenericResource } from "@lib/types.ts"; import { GenericResource } from "@lib/marka/schema.ts";
export type Props = { export type Props = {
children: ComponentChildren; children: ComponentChildren;
@@ -21,7 +21,7 @@ export const MainLayout = (
if (hasSearch) { if (hasSearch) {
return ( return (
<Search <Search
q={_url.searchParams.get("q")} q={_url.searchParams.get("q") || ""}
{...context} {...context}
results={searchResults} results={searchResults}
/> />

1
deno.json
View File

@@ -22,6 +22,7 @@
"@lib": "./lib", "@lib": "./lib",
"@lib/": "./lib/", "@lib/": "./lib/",
"@libsql/client": "npm:@libsql/client@^0.14.0", "@libsql/client": "npm:@libsql/client@^0.14.0",
"@openai/openai": "jsr:@openai/openai@^6.7.0",
"@preact/signals": "https://esm.sh/*@preact/signals@1.2.2", "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1", "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
"@std/http": "jsr:@std/http@^1.0.12", "@std/http": "jsr:@std/http@^1.0.12",

21
islands/IngredientsList.tsx
View File

@@ -2,7 +2,6 @@ import { Signal } from "@preact/signals";
import type { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts"; import type { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts";
import { FunctionalComponent } from "preact"; import { FunctionalComponent } from "preact";
import { unitsOfMeasure } from "@lib/parseIngredient.ts"; import { unitsOfMeasure } from "@lib/parseIngredient.ts";
import { renderMarkdown } from "@lib/markdown.ts";
function formatAmount(num: number) { function formatAmount(num: number) {
if (num === 0) return ""; if (num === 0) return "";
@@ -10,15 +9,12 @@ function formatAmount(num: number) {
} }
function formatUnit(unit: string, amount: number) { function formatUnit(unit: string, amount: number) {
const unitKey = unit.toLowerCase() as keyof typeof unitsOfMeasure; if (!unit) return "";
const unitKey = unit.toLowerCase() as (keyof typeof unitsOfMeasure);
if (unitKey in unitsOfMeasure) { if (unitKey in unitsOfMeasure) {
if (amount > 1 && unitsOfMeasure[unitKey].plural !== undefined) { if (amount > 1 && unitsOfMeasure[unitKey].plural !== undefined) {
return unitsOfMeasure[unitKey].plural; return unitsOfMeasure[unitKey].plural;
} }
if (unitKey !== "cup") {
return unitsOfMeasure[unitKey].short;
}
return unitKey.toString(); return unitKey.toString();
} else { } else {
return unit; return unit;
@@ -67,9 +63,22 @@ export const IngredientsList: FunctionalComponent<
<table class="w-full border-collapse table-auto"> <table class="w-full border-collapse table-auto">
<tbody> <tbody>
{ingredients.map((item) => { {ingredients.map((item) => {
if ("items" in item) {
return item.items.map((ing, i) => {
return (
<Ingredient
key={i}
ingredient={ing}
amount={amount}
portion={portion}
/>
);
});
} else {
return ( return (
<Ingredient ingredient={item} amount={amount} portion={portion} /> <Ingredient ingredient={item} amount={amount} portion={portion} />
); );
}
})} })}
</tbody> </tbody>
</table> </table>

3
islands/KMenu.tsx
View File

@@ -103,8 +103,9 @@ export const KMenu = (
} }
useEventListener("keydown", (ev: KeyboardEvent) => { useEventListener("keydown", (ev: KeyboardEvent) => {
const target = ev.target as HTMLElement;
if (ev.key === "k") { if (ev.key === "k") {
if (ev?.target?.nodeName == "INPUT") { if (target.nodeName == "INPUT") {
return; return;
} }

1
islands/Link.tsx
View File

@@ -1,7 +1,6 @@
import { useEffect } from "preact/hooks"; import { useEffect } from "preact/hooks";
declare global { declare global {
// deno-lint-ignore no-var
var loadingTimeout: ReturnType<typeof setTimeout> | undefined; var loadingTimeout: ReturnType<typeof setTimeout> | undefined;
} }

8
islands/Recommendations.tsx
View File

@@ -1,5 +1,6 @@
import { useCallback, useState } from "preact/hooks"; import { useCallback, useState } from "preact/hooks";
import { IconWand } from "@components/icons.tsx"; import { IconWand } from "@components/icons.tsx";
import { RecommendationResource } from "@lib/recommendation.ts";
type RecommendationState = "disabled" | "loading"; type RecommendationState = "disabled" | "loading";
@@ -11,7 +12,7 @@ export function Recommendations(
}, },
) { ) {
const [state, setState] = useState<RecommendationState>("disabled"); const [state, setState] = useState<RecommendationState>("disabled");
const [results, setResults] = useState(); const [results, setResults] = useState<RecommendationResource[]>();
const startFetch = useCallback( const startFetch = useCallback(
async () => { async () => {
@@ -44,9 +45,9 @@ export function Recommendations(
<div class="flex gap-5 items-center mb-4"> <div class="flex gap-5 items-center mb-4">
<img <img
class="w-12 h-12 rounded-full object-cover" class="w-12 h-12 rounded-full object-cover"
src={`https://image.tmdb.org/t/p/original${res.poster_path}`} src={`https://image.tmdb.org/t/p/original${res.id}`}
/> />
<p>{res.title}</p> <p>{res.id}</p>
</div> </div>
); );
})} })}
@@ -66,6 +67,7 @@ export function Recommendations(
{!results && state === "disabled" && {!results && state === "disabled" &&
( (
<button <button
type="submit"
onClick={startFetch} onClick={startFetch}
class="ml-8 mt-2 font-thin flex items-center gap-2 text-white my-2" class="ml-8 mt-2 font-thin flex items-center gap-2 text-white my-2"
> >

22
islands/Search.tsx
View File

@@ -10,7 +10,7 @@ import { Rating } from "@components/Rating.tsx";
import { useSignal } from "@preact/signals"; import { useSignal } from "@preact/signals";
import Image from "@components/Image.tsx"; import Image from "@components/Image.tsx";
import { Emoji } from "@components/Emoji.tsx"; import { Emoji } from "@components/Emoji.tsx";
import { GenericResource } from "@lib/marka/schema.ts"; import { GenericResource, getNameOfResource } from "@lib/marka/schema.ts";
export async function fetchQueryResource(url: URL, type = "") { export async function fetchQueryResource(url: URL, type = "") {
const query = url.searchParams.get("q"); const query = url.searchParams.get("q");
@@ -33,21 +33,23 @@ export async function fetchQueryResource(url: URL, type = "") {
} }
} }
export const RedirectSearchHandler = () => { export function RedirectSearchHandler() {
if (getCookie("session_cookie")) {
useEventListener("keydown", (e: KeyboardEvent) => { useEventListener("keydown", (e: KeyboardEvent) => {
if (e?.target?.nodeName == "INPUT") return; if (getCookie("session_cookie")) {
const target = e.target as HTMLInputElement;
if (target.nodeName == "INPUT") return;
if ( if (
e.key === "?" && e.key === "?" &&
globalThis.location.search === "" globalThis.location.search === ""
) { ) {
globalThis.location.href += "?q="; globalThis.location.href += "?q=";
} }
}, IS_BROWSER ? document?.body : undefined);
} }
}, IS_BROWSER ? document?.body : undefined);
return; // deno-lint-ignore jsx-no-useless-fragment
}; return <></>;
}
const SearchResultImage = ({ src }: { src: string }) => { const SearchResultImage = ({ src }: { src: string }) => {
return ( return (
@@ -67,7 +69,8 @@ export const SearchResultItem = (
showEmoji?: boolean; showEmoji?: boolean;
}, },
) => { ) => {
const resourceType = resources[item?.content._type]; const resourceType =
resources[item.content._type.toLowerCase() as keyof typeof resources];
const href = item?.path.replace("/resources", "").replace(/\.md$/, ""); const href = item?.path.replace("/resources", "").replace(/\.md$/, "");
return ( return (
<a <a
@@ -78,8 +81,7 @@ export const SearchResultItem = (
? <Emoji class="w-7 h-7" name={resourceType.emoji} /> ? <Emoji class="w-7 h-7" name={resourceType.emoji} />
: ""} : ""}
{item.image && <SearchResultImage src={item.image?.url} />} {item.image && <SearchResultImage src={item.image?.url} />}
{item.content?.headline || item.content?.name || {getNameOfResource(item)}
item.content?.itemReviewed.name || item?.name}
</a> </a>
); );
}; };

5
lib/helpers.ts
View File

@@ -102,18 +102,15 @@ export function debounce<T extends (...args: Parameters<T>) => void>(
} }
export function parseRating(rating: string | number) { export function parseRating(rating: string | number) {
if (typeof rating === "string") { if (typeof rating == "number") return rating;
try { try {
const res = parseInt(rating); const res = parseInt(rating);
if (!Number.isNaN(res)) return res; if (!Number.isNaN(res)) return res;
} catch (_e) { } catch (_e) {
// This is okay // This is okay
} }
return rating.length / 2; return rating.length / 2;
} }
return rating;
}
export async function convertOggToMp3( export async function convertOggToMp3(
oggData: ArrayBuffer, oggData: ArrayBuffer,

323
lib/hooks/useDebouncedCallback.ts
View File

@@ -1,286 +1,93 @@
import { useEffect, useMemo, useRef } from "preact/hooks"; import { useEffect, useMemo, useRef } from "preact/hooks";
export interface CallOptions { type Debounced<T extends (...args: unknown[]) => unknown> =
/** & ((
* Controls if the function should be invoked on the leading edge of the timeout. ...args: Parameters<T>
*/ ) => void)
leading?: boolean; & {
/**
* Controls if the function should be invoked on the trailing edge of the timeout.
*/
trailing?: boolean;
}
export interface Options extends CallOptions {
/**
* The maximum time the given function is allowed to be delayed before it's invoked.
*/
maxWait?: number;
}
export interface ControlFunctions {
/**
* Cancel pending function invocations
*/
cancel: () => void; cancel: () => void;
/**
* Immediately invoke pending function invocations
*/
flush: () => void; flush: () => void;
/** pending: () => boolean;
* Returns `true` if there are any pending function invocations };
*/
isPending: () => boolean;
}
/**
* Subsequent calls to the debounced function `debounced.callback` return the result of the last func invocation.
* Note, that if there are no previous invocations it's mean you will get undefined. You should check it in your code properly.
*/
export interface DebouncedState<T extends (...args: any) => ReturnType<T>>
extends ControlFunctions {
(...args: Parameters<T>): ReturnType<T> | undefined;
}
/**
* Creates a debounced function that delays invoking `func` until after `wait`
* milliseconds have elapsed since the last time the debounced function was
* invoked, or until the next browser frame is drawn.
*
* The debounced function comes with a `cancel` method to cancel delayed `func`
* invocations and a `flush` method to immediately invoke them.
*
* Provide `options` to indicate whether `func` should be invoked on the leading
* and/or trailing edge of the `wait` timeout. The `func` is invoked with the
* last arguments provided to the debounced function.
*
* Subsequent calls to the debounced function return the result of the last
* `func` invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is
* invoked on the trailing edge of the timeout only if the debounced function
* is invoked more than once during the `wait` timeout.
*
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
* until the next tick, similar to `setTimeout` with a timeout of `0`.
*
* If `wait` is omitted in an environment with `requestAnimationFrame`, `func`
* invocation will be deferred until the next frame is drawn (typically about
* 16ms).
*
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
* for details over the differences between `debounce` and `throttle`.
*
* @category Function
* @param {Function} func The function to debounce.
* @param {number} [wait=0]
* The number of milliseconds to delay; if omitted, `requestAnimationFrame` is
* used (if available, otherwise it will be setTimeout(...,0)).
* @param {Object} [options={}] The options object.
* Controls if `func` should be invoked on the leading edge of the timeout.
* @param {boolean} [options.leading=false]
* The maximum time `func` is allowed to be delayed before it's invoked.
* @param {number} [options.maxWait]
* Controls if `func` should be invoked the trailing edge of the timeout.
* @param {boolean} [options.trailing=true]
* @returns {Function} Returns the new debounced function.
* @example
*
* // Avoid costly calculations while the window size is in flux.
* const resizeHandler = useDebouncedCallback(calculateLayout, 150);
* window.addEventListener('resize', resizeHandler)
*
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
* const clickHandler = useDebouncedCallback(sendMail, 300, {
* leading: true,
* trailing: false,
* })
* <button onClick={clickHandler}>click me</button>
*
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
* const debounced = useDebouncedCallback(batchLog, 250, { 'maxWait': 1000 })
* const source = new EventSource('/stream')
* source.addEventListener('message', debounced)
*
* // Cancel the trailing debounced invocation.
* window.addEventListener('popstate', debounced.cancel)
*
* // Check for pending invocations.
* const status = debounced.pending() ? "Pending..." : "Ready"
*/
export default function useDebouncedCallback< export default function useDebouncedCallback<
T extends (...args: any) => ReturnType<T>, T extends (...args: unknown[]) => unknown,
>( >(
func: T, callback: T,
wait?: number, delay: number,
options?: Options, options?: {
): DebouncedState<T> { /** Call on the leading edge. Default: false */
const lastCallTime = useRef(null); leading?: boolean;
const lastInvokeTime = useRef(0); /** Call on the trailing edge. Default: true */
const timerId = useRef(null); trailing?: boolean;
const lastArgs = useRef<unknown[]>([]); },
const lastThis = useRef<unknown>(); ): Debounced<T> {
const result = useRef<ReturnType<T>>(); const callbackRef = useRef(callback);
const funcRef = useRef(func); const timerRef = useRef<number | null>(null);
const mounted = useRef(true); const argsRef = useRef<Parameters<T> | null>(null);
// Always use the latest callback without re-creating the debounced fn
useEffect(() => { useEffect(() => {
funcRef.current = func; callbackRef.current = callback;
}, [func]); }, [callback]);
// Bypass `requestAnimationFrame` by explicitly setting `wait=0`. const leading = !!options?.leading;
const useRAF = !wait && wait !== 0 && typeof window !== "undefined"; const trailing = options?.trailing !== false; // default true
if (typeof func !== "function") { const debounced = useMemo<Debounced<T>>(() => {
throw new TypeError("Expected a function"); const clear = () => {
if (timerRef.current != null) {
clearTimeout(timerRef.current);
timerRef.current = null;
} }
wait = +wait || 0;
options = options || {};
const leading = !!options.leading;
const trailing = "trailing" in options ? !!options.trailing : true; // `true` by default
const maxing = "maxWait" in options;
const maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : null;
useEffect(() => {
mounted.current = true;
return () => {
mounted.current = false;
};
}, []);
// You may have a question, why we have so many code under the useMemo definition.
//
// This was made as we want to escape from useCallback hell and
// not to initialize a number of functions each time useDebouncedCallback is called.
//
// It means that we have less garbage for our GC calls which improves performance.
// Also, it makes this library smaller.
//
// And the last reason, that the code without lots of useCallback with deps is easier to read.
// You have only one place for that.
const debounced = useMemo(() => {
const invokeFunc = (time: number) => {
const args = lastArgs.current;
const thisArg = lastThis.current;
lastArgs.current = lastThis.current = null;
lastInvokeTime.current = time;
return (result.current = funcRef.current.apply(thisArg, args));
}; };
const startTimer = (pendingFunc: () => void, wait: number) => { const invoke = () => {
if (useRAF) cancelAnimationFrame(timerId.current); const a = argsRef.current;
timerId.current = useRAF argsRef.current = null;
? requestAnimationFrame(pendingFunc) if (a) {
: setTimeout(pendingFunc, wait); callbackRef.current(...a);
};
const shouldInvoke = (time: number) => {
if (!mounted.current) return false;
const timeSinceLastCall = time - lastCallTime.current;
const timeSinceLastInvoke = time - lastInvokeTime.current;
// Either this is the first call, activity has stopped and we're at the
// trailing edge, the system time has gone backwards and we're treating
// it as the trailing edge, or we've hit the `maxWait` limit.
return (
!lastCallTime.current ||
timeSinceLastCall >= wait ||
timeSinceLastCall < 0 ||
(maxing && timeSinceLastInvoke >= maxWait)
);
};
const trailingEdge = (time: number) => {
timerId.current = null;
// Only invoke if we have `lastArgs` which means `func` has been
// debounced at least once.
if (trailing && lastArgs.current) {
return invokeFunc(time);
} }
lastArgs.current = lastThis.current = null;
return result.current;
}; };
const timerExpired = () => { const fn = ((...args: Parameters<T>) => {
const time = Date.now(); const shouldCallLeading = leading && timerRef.current == null;
if (shouldInvoke(time)) {
return trailingEdge(time);
}
// https://github.com/xnimorz/use-debounce/issues/97
if (!mounted.current) {
return;
}
// Remaining wait calculation
const timeSinceLastCall = time - lastCallTime.current;
const timeSinceLastInvoke = time - lastInvokeTime.current;
const timeWaiting = wait - timeSinceLastCall;
const remainingWait = maxing
? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
: timeWaiting;
// Restart the timer argsRef.current = args;
startTimer(timerExpired, remainingWait);
if (timerRef.current != null) clearTimeout(timerRef.current);
timerRef.current = globalThis.setTimeout(() => {
timerRef.current = null;
if (trailing) invoke();
}, delay);
if (shouldCallLeading) {
// Leading edge call happens immediately
invoke();
}
}) as Debounced<T>;
fn.cancel = () => {
argsRef.current = null;
clear();
}; };
const func: DebouncedState<T> = (...args: Parameters<T>): ReturnType<T> => { fn.flush = () => {
const time = Date.now(); if (timerRef.current != null) {
const isInvoking = shouldInvoke(time); clear();
invoke();
lastArgs.current = args;
lastThis.current = this;
lastCallTime.current = time;
if (isInvoking) {
if (!timerId.current && mounted.current) {
// Reset any `maxWait` timer.
lastInvokeTime.current = lastCallTime.current;
// Start the timer for the trailing edge.
startTimer(timerExpired, wait);
// Invoke the leading edge.
return leading ? invokeFunc(lastCallTime.current) : result.current;
} }
if (maxing) {
// Handle invocations in a tight loop.
startTimer(timerExpired, wait);
return invokeFunc(lastCallTime.current);
}
}
if (!timerId.current) {
startTimer(timerExpired, wait);
}
return result.current;
}; };
func.cancel = () => { fn.pending = () => timerRef.current != null;
if (timerId.current) {
useRAF
? cancelAnimationFrame(timerId.current)
: clearTimeout(timerId.current);
}
lastInvokeTime.current = 0;
lastArgs.current =
lastCallTime.current =
lastThis.current =
timerId.current =
null;
};
func.isPending = () => { return fn;
return !!timerId.current; // Recreate only if timing/edge behavior changes
}; }, [delay, leading, trailing]);
func.flush = () => { // Cancel on unmount
return !timerId.current ? result.current : trailingEdge(Date.now()); useEffect(() => () => debounced.cancel(), [debounced]);
};
return func;
}, [leading, maxing, wait, maxWait, trailing, useRAF]);
return debounced; return debounced;
} }

6
lib/hooks/useEventListener.ts
View File

@@ -6,7 +6,7 @@ export function useEventListener<T extends Event>(
element: typeof globalThis | HTMLElement = globalThis, element: typeof globalThis | HTMLElement = globalThis,
) { ) {
// Create a ref that stores handler // Create a ref that stores handler
const savedHandler = useRef<(event: Event) => void>(); const savedHandler = useRef<(event: T) => void>();
// Update ref.current value if handler changes. // Update ref.current value if handler changes.
// This allows our effect below to always get latest handler ... // This allows our effect below to always get latest handler ...
@@ -27,11 +27,11 @@ export function useEventListener<T extends Event>(
const eventListener = (event: T) => savedHandler?.current?.(event); const eventListener = (event: T) => savedHandler?.current?.(event);
// Add event listener // Add event listener
element.addEventListener(eventName, eventListener); element.addEventListener(eventName, (ev) => eventListener(ev as T));
// Remove event listener on cleanup // Remove event listener on cleanup
return () => { return () => {
element.removeEventListener(eventName, eventListener); element.removeEventListener(eventName, (ev) => eventListener(ev as T));
}; };
}, },
[eventName, element], // Re-run if eventName or element changes [eventName, element], // Re-run if eventName or element changes

5
lib/hooks/useThrottledCallback.ts
View File

@@ -6,7 +6,7 @@ type ThrottleOptions = {
}; };
const useThrottledCallback = ( const useThrottledCallback = (
callback: (...args: any[]) => void, callback: (...args: unknown[]) => void,
delay: number, delay: number,
options: ThrottleOptions = {}, options: ThrottleOptions = {},
) => { ) => {
@@ -24,7 +24,7 @@ const useThrottledCallback = (
}; };
}, [timer]); }, [timer]);
const throttledCallback = (...args: any[]) => { const throttledCallback = (...args: unknown[]) => {
const now = Date.now(); const now = Date.now();
if (leading && !isLeading) { if (leading && !isLeading) {
@@ -52,4 +52,3 @@ const useThrottledCallback = (
}; };
export default useThrottledCallback; export default useThrottledCallback;

9
lib/hooks/useTraceProps.ts
View File

@@ -1,14 +1,17 @@
import { useEffect, useRef } from "preact/hooks"; import { useEffect, useRef } from "preact/hooks";
export function useTraceUpdate(props) { export function useTraceUpdate(props: Record<string, unknown>) {
const prev = useRef(props); const prev = useRef(props);
useEffect(() => { useEffect(() => {
const changedProps = Object.entries(props).reduce((ps, [k, v]) => { const changedProps = Object.entries(props).reduce(
(ps: Record<string, unknown>, [k, v]) => {
if (prev.current[k] !== v) { if (prev.current[k] !== v) {
ps[k] = [prev.current[k], v]; ps[k] = [prev.current[k], v];
} }
return ps; return ps;
}, {}); },
{},
);
if (Object.keys(changedProps).length > 0) { if (Object.keys(changedProps).length > 0) {
console.log("Changed props:", changedProps); console.log("Changed props:", changedProps);
} }

6
lib/image.ts
View File

@@ -134,7 +134,7 @@ async function getLocalImage(
*/ */
async function storeLocalImage( async function storeLocalImage(
url: string, url: string,
content: ArrayBuffer, content: Uint8Array<ArrayBuffer> | ArrayBuffer,
{ width, height }: { width?: number; height?: number } = {}, { width, height }: { width?: number; height?: number } = {},
) { ) {
const isValid = await verifyImage(new Uint8Array(content)); const isValid = await verifyImage(new Uint8Array(content));
@@ -249,7 +249,7 @@ async function verifyImage(imageBuffer: Uint8Array): Promise<boolean> {
export async function getImageContent( export async function getImageContent(
url: string, url: string,
{ width, height }: { width?: number; height?: number } = {}, { width, height }: { width?: number; height?: number } = {},
): Promise<{ content: ArrayBuffer; mimeType: string }> { ): Promise<{ content: Uint8Array<ArrayBuffer>; mimeType: string }> {
log.debug("Getting image content", { url, width, height }); log.debug("Getting image content", { url, width, height });
// Check if we have the image metadata in database // Check if we have the image metadata in database
@@ -267,8 +267,8 @@ export async function getImageContent(
// Fetch and cache original if needed // Fetch and cache original if needed
if (!originalImage) { if (!originalImage) {
const fetchedImage = await getRemoteImage(url); const fetchedImage = await getRemoteImage(url);
await storeLocalImage(url, fetchedImage.buffer);
originalImage = new Uint8Array(fetchedImage.buffer); originalImage = new Uint8Array(fetchedImage.buffer);
await storeLocalImage(url, originalImage);
} }
// Resize image // Resize image

14
lib/marka/schema.ts
View File

@@ -68,6 +68,7 @@ export const ReviewContentSchema = makeContentSchema("Review", {
export const RecipeContentSchema = makeContentSchema("Recipe", { export const RecipeContentSchema = makeContentSchema("Recipe", {
description: z.string().optional(), description: z.string().optional(),
name: z.string().optional(), name: z.string().optional(),
reviewRating: ReviewRatingSchema.optional(),
recipeIngredient: z.array(z.string()).optional(), recipeIngredient: z.array(z.string()).optional(),
recipeInstructions: z.array(z.string()).optional(), recipeInstructions: z.array(z.string()).optional(),
totalTime: z.string().optional(), totalTime: z.string().optional(),
@@ -124,3 +125,16 @@ export type RecipeResource = z.infer<typeof RecipeSchema> & {
export type GenericResource = z.infer<typeof GenericResourceSchema> & { export type GenericResource = z.infer<typeof GenericResourceSchema> & {
image?: typeof imageTable.$inferSelect; image?: typeof imageTable.$inferSelect;
}; };
export function getNameOfResource(res: GenericResource): string {
if (res.content?._type === "Article" && res.content.headline) {
return res.content.headline;
}
if (res.content?._type === "Review" && res.content.itemReviewed?.name) {
return res.content.itemReviewed.name;
}
if (res.content?._type === "Recipe" && res.content.name) {
return res.content.name;
}
return "Unnamed Resource";
}

19
lib/openai.ts
View File

@@ -1,5 +1,5 @@
import OpenAI from "https://deno.land/x/openai@v4.69.0/mod.ts"; import OpenAI, { toFile } from "@openai/openai";
import { zodResponseFormat } from "https://deno.land/x/openai@v4.69.0/helpers/zod.ts"; import { zodResponseFormat } from "@openai/openai/helpers/zod";
import { OPENAI_API_KEY } from "@lib/env.ts"; import { OPENAI_API_KEY } from "@lib/env.ts";
import { hashString } from "@lib/helpers.ts"; import { hashString } from "@lib/helpers.ts";
import { createCache } from "@lib/cache.ts"; import { createCache } from "@lib/cache.ts";
@@ -35,7 +35,8 @@ export async function summarize(content: string) {
{ {
role: "user", role: "user",
content: content:
`Please summarize the article in one sentence as short as possible: ${content.slice(0, 2000) `Please summarize the article in one sentence as short as possible: ${
content.slice(0, 2000)
}`, }`,
}, },
], ],
@@ -102,7 +103,8 @@ export async function createGenres(
{ {
role: "system", role: "system",
content: content:
`you create some keywords that can be used in a recommendation system. The keywords are based on a ${type} description or title. If you do not know the title, take into account the description aswell. Create a range of keywords from very specific ones that describe the general vibe. ${title ? `The name of the ${type} is ${title}` : "" `you create some keywords that can be used in a recommendation system. The keywords are based on a ${type} description or title. If you do not know the title, take into account the description aswell. Create a range of keywords from very specific ones that describe the general vibe. ${
title ? `The name of the ${type} is ${title}` : ""
}. Return a list of around 20 keywords seperated by commas`, }. Return a list of around 20 keywords seperated by commas`,
}, },
{ {
@@ -166,7 +168,8 @@ export const getMovieRecommendations = async (
${keywords} ${keywords}
The movies should be similar to but not include ${exclude.join(", ") The movies should be similar to but not include ${
exclude.join(", ")
} or remakes of that. } or remakes of that.
respond with a plain unordered list each item starting with the year the movie was released and then the title of the movie seperated by a -`, respond with a plain unordered list each item starting with the year the movie was released and then the title of the movie seperated by a -`,
@@ -213,7 +216,7 @@ export async function createTags(content: string) {
export async function extractRecipe(content: string) { export async function extractRecipe(content: string) {
if (!openAI) return; if (!openAI) return;
const completion = await openAI.beta.chat.completions.parse({ const completion = await openAI.chat.completions.parse({
model: model, model: model,
temperature: 0.1, temperature: 0.1,
messages: [ messages: [
@@ -231,7 +234,7 @@ export async function extractRecipe(content: string) {
export async function extractArticleMetadata(content: string) { export async function extractArticleMetadata(content: string) {
if (!openAI) return; if (!openAI) return;
const completion = await openAI.beta.chat.completions.parse({ const completion = await openAI.chat.completions.parse({
model: model, model: model,
temperature: 0.1, temperature: 0.1,
messages: [ messages: [
@@ -256,7 +259,7 @@ export async function transcribe(
): Promise<string | undefined> { ): Promise<string | undefined> {
if (!openAI) return; if (!openAI) return;
const file = new File([mp3Data], "audio.mp3", { const file = await toFile(mp3Data, "audio.mp3", {
type: "audio/mpeg", type: "audio/mpeg",
}); });

4
lib/parseIngredient.ts
View File

@@ -1,7 +1,7 @@
import { import {
parseIngredient, parseIngredient,
unitsOfMeasure as _unitsOfMeasure, unitsOfMeasure as _unitsOfMeasure,
} from "npm:parse-ingredient"; } from "parse-ingredient";
import { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts"; import { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts";
import { removeMarkdownFormatting } from "@lib/string.ts"; import { removeMarkdownFormatting } from "@lib/string.ts";
@@ -77,7 +77,7 @@ export function parseIngredients(
}; };
const unit = ingredient.unit.toLowerCase() as keyof typeof unitsOfMeasure; const unit = ingredient.unit.toLowerCase() as keyof typeof unitsOfMeasure;
if (unit in unitsOfMeasure && unit !== "cup") { if (unit in unitsOfMeasure) {
ingredient.unit = unitsOfMeasure[unit].short; ingredient.unit = unitsOfMeasure[unit].short;
} }

6
lib/recommendation.ts
View File

@@ -2,9 +2,9 @@ import * as openai from "@lib/openai.ts";
import * as tmdb from "@lib/tmdb.ts"; import * as tmdb from "@lib/tmdb.ts";
import { parseRating } from "@lib/helpers.ts"; import { parseRating } from "@lib/helpers.ts";
import { createCache } from "@lib/cache.ts"; import { createCache } from "@lib/cache.ts";
import { GenericResource, ReviewResource } from "./marka/schema.ts"; import { ReviewResource } from "./marka/schema.ts";
type RecommendationResource = { export type RecommendationResource = {
id: string; id: string;
type: string; type: string;
rating: number; rating: number;
@@ -96,5 +96,5 @@ export async function getAllRecommendations(): Promise<
> { > {
const keys = cache.keys(); const keys = cache.keys();
const res = await Promise.all(keys.map((k) => cache.get(k))); const res = await Promise.all(keys.map((k) => cache.get(k)));
return res.map((r) => JSON.parse(r)); return res.filter((s) => !!s).map((r) => JSON.parse(r));
} }

7
lib/search.ts
View File

@@ -1,8 +1,9 @@
import { resources } from "@lib/resources.ts"; import { resources } from "@lib/resources.ts";
import fuzzysort from "npm:fuzzysort"; import fuzzysort from "fuzzysort";
import { extractHashTags } from "@lib/string.ts"; import { extractHashTags } from "@lib/string.ts";
import { listResources } from "./marka/index.ts"; import { listResources } from "./marka/index.ts";
import { GenericResource } from "./marka/schema.ts"; import { GenericResource } from "./marka/schema.ts";
import { parseRating } from "./helpers.ts";
type ResourceType = keyof typeof resources; type ResourceType = keyof typeof resources;
@@ -72,8 +73,8 @@ export async function searchResource(
if ( if (
!(resource.name in results) && !(resource.name in results) &&
rating && resource?.content?.reviewRating && rating && resource.content.reviewRating?.ratingValue &&
resource.content?.reviewRating?.ratingValue >= rating parseRating(resource.content.reviewRating.ratingValue) >= rating
) { ) {
results[resource.name] = resource; results[resource.name] = resource;
} }

2
lib/string.ts
View File

@@ -1,5 +1,3 @@
import { resources } from "@lib/resources.ts";
export function formatDate(date: Date): string { export function formatDate(date: Date): string {
const options = { year: "numeric", month: "long", day: "numeric" } as const; const options = { year: "numeric", month: "long", day: "numeric" } as const;
return new Intl.DateTimeFormat("en-US", options).format(date); return new Intl.DateTimeFormat("en-US", options).format(date);

3
lib/taskManager.ts
View File

@@ -48,7 +48,8 @@ export async function endTask(chatId: string): Promise<string | null> {
finalNote += "**[Voice message could not be transcribed]**\n\n"; finalNote += "**[Voice message could not be transcribed]**\n\n";
} }
} else if (entry.type === "photo") { } else if (entry.type === "photo") {
const photoUrl = `${task.noteName.replace(/\.md$/, "") const photoUrl = `${
task.noteName.replace(/\.md$/, "")
}/photo-${photoIndex++}.jpg`; }/photo-${photoIndex++}.jpg`;
finalNote += `**Photo**:\n ${photoUrl}\n\n`; finalNote += `**Photo**:\n ${photoUrl}\n\n`;

4
lib/types.ts
View File

@@ -1,4 +1,4 @@
import { GenericResource, GenericResourceSchema } from "./marka/schema.ts"; import { GenericResource } from "./marka/schema.ts";
export interface TMDBMovie { export interface TMDBMovie {
adult: boolean; adult: boolean;
@@ -39,7 +39,7 @@ export interface GiteaOauthUser {
preferred_username: string; preferred_username: string;
email: string; email: string;
picture: string; picture: string;
groups: any; groups: unknown;
} }
export type SearchResult = { export type SearchResult = {

30
lib/webScraper.ts
View File

@@ -11,12 +11,14 @@ export function absolutizeDomUrls(dom: JSDOM, domain: string): void {
const base = toBase(domain); const base = toBase(domain);
const rewrite = (selector: string, attr: string) => { const rewrite = (selector: string, attr: string) => {
document.querySelectorAll<HTMLElement>(selector).forEach((el) => { document.querySelectorAll<HTMLElement>(selector).forEach(
(el: HTMLElement) => {
const v = el.getAttribute(attr); const v = el.getAttribute(attr);
if (!v) return; if (!v) return;
const abs = toAbsolute(v, base); const abs = toAbsolute(v, base);
if (abs !== v) el.setAttribute(attr, abs); if (abs !== v) el.setAttribute(attr, abs);
}); },
);
}; };
// Common URL attributes // Common URL attributes
@@ -41,35 +43,35 @@ export function absolutizeDomUrls(dom: JSDOM, domain: string): void {
rewrite("form[action]", "action"); rewrite("form[action]", "action");
rewrite("video[poster]", "poster"); rewrite("video[poster]", "poster");
// srcset (img, source)
document document
.querySelectorAll<HTMLElement>("img[srcset], source[srcset]") .querySelectorAll("img[srcset], source[srcset]")
.forEach((el) => { .forEach((el: HTMLImageElement) => {
const v = el.getAttribute("srcset"); const v = el.getAttribute("srcset");
if (!v) return; if (!v) return;
const abs = absolutizeSrcset(v, base); const abs = absolutizeSrcset(v, base);
if (abs !== v) el.setAttribute("srcset", abs); if (abs !== v) el.setAttribute("srcset", abs);
}); });
// Inline CSS in style attributes: url(...) document.querySelectorAll("[style]").forEach(
document.querySelectorAll<HTMLElement>("[style]").forEach((el) => { (el: HTMLElement) => {
const v = el.getAttribute("style"); const v = el.getAttribute("style");
if (!v) return; if (!v) return;
const abs = absolutizeCssUrls(v, base); const abs = absolutizeCssUrls(v, base);
if (abs !== v) el.setAttribute("style", abs); if (abs !== v) el.setAttribute("style", abs);
}); },
);
// <style> blocks (inline CSS): url(...) document.querySelectorAll("style").forEach(
document.querySelectorAll<HTMLStyleElement>("style").forEach((styleEl) => { (styleEl: HTMLStyleElement) => {
const css = styleEl.textContent ?? ""; const css = styleEl.textContent ?? "";
const abs = absolutizeCssUrls(css, base); const abs = absolutizeCssUrls(css, base);
if (abs !== css) styleEl.textContent = abs; if (abs !== css) styleEl.textContent = abs;
}); },
);
// <meta http-equiv="refresh" content="5; url=/path">
document document
.querySelectorAll<HTMLMetaElement>('meta[http-equiv="refresh" i][content]') .querySelectorAll('meta[http-equiv="refresh" i][content]')
.forEach((meta) => { .forEach((meta: HTMLMetaElement) => {
const content = meta.getAttribute("content") || ""; const content = meta.getAttribute("content") || "";
const abs = absolutizeMetaRefresh(content, base); const abs = absolutizeMetaRefresh(content, base);
if (abs !== content) meta.setAttribute("content", abs); if (abs !== content) meta.setAttribute("content", abs);

2
routes/_404.tsx
View File

@@ -7,7 +7,7 @@ export default function Error404() {
<Head> <Head>
<title>404 - Page not found</title> <title>404 - Page not found</title>
</Head> </Head>
<MainLayout> <MainLayout url="">
<div class="px-8 text-white mt-10"> <div class="px-8 text-white mt-10">
<div class="max-w-screen-md mx-auto flex flex-col items-center justify-center"> <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
<h1 class="text-4xl font-bold">404 - Page not found</h1> <h1 class="text-4xl font-bold">404 - Page not found</h1>

6
routes/admin/log/index.tsx
View File

@@ -16,7 +16,6 @@ export const handler: Handlers = {
if (!("session" in ctx.state)) { if (!("session" in ctx.state)) {
throw new AccessDeniedError(); throw new AccessDeniedError();
} }
console.log({ logs });
return ctx.render({ return ctx.render({
logs: logs.map((l) => { logs: logs.map((l) => {
return { return {
@@ -30,7 +29,7 @@ export const handler: Handlers = {
function LogLine( function LogLine(
{ log }: { { log }: {
log: Log; log: Log & { html?: string };
}, },
) { ) {
return ( return (
@@ -53,7 +52,8 @@ function LogLine(
</div> </div>
<div <div
class="text-white" class="text-white"
dangerouslySetInnerHTML={{ __html: log.html }} // deno-lint-ignore react-no-danger
dangerouslySetInnerHTML={{ __html: log.html ?? "" }}
/> />
</div> </div>
); );

2
routes/api/articles/create/index.ts
View File

@@ -46,7 +46,7 @@ async function processCreateArticle(
const title = result?.title || aiMeta?.headline || ""; const title = result?.title || aiMeta?.headline || "";
const id = toUrlSafeString(title); const id = toUrlSafeString(title);
const newArticle: Article = { const newArticle: ArticleResource["content"] = {
_type: "Article", _type: "Article",
headline: title, headline: title,
articleBody: result.content, articleBody: result.content,

5
routes/api/images/index.ts
View File

@@ -60,9 +60,10 @@ function parseParams(reqUrl: URL): ImageParams | string {
} }
} }
// Helper function to generate ETag // Helper function to generate ETag
async function generateETag(content: ArrayBuffer): Promise<string> { async function generateETag(content: Uint8Array<ArrayBuffer>): Promise<string> {
const hashBuffer = await crypto.subtle.digest("SHA-256", content); const hashBuffer = await crypto.subtle.digest("SHA-256", content);
return `"${Array.from(new Uint8Array(hashBuffer)) return `"${
Array.from(new Uint8Array(hashBuffer))
.map((b) => b.toString(16).padStart(2, "0")) .map((b) => b.toString(16).padStart(2, "0"))
.join("") .join("")
}"`; }"`;

46
routes/api/movies/enhance/[name].ts
View File

@@ -1,7 +1,7 @@
import { FreshContext, Handlers } from "$fresh/server.ts"; import { FreshContext, Handlers } from "$fresh/server.ts";
import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts"; import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts";
import * as tmdb from "@lib/tmdb.ts"; import * as tmdb from "@lib/tmdb.ts";
import { isString, safeFileName } from "@lib/string.ts"; import { formatDate, isString, safeFileName } from "@lib/string.ts";
import { json } from "@lib/helpers.ts"; import { json } from "@lib/helpers.ts";
import { import {
AccessDeniedError, AccessDeniedError,
@@ -10,6 +10,7 @@ import {
} from "@lib/errors.ts"; } from "@lib/errors.ts";
import { createRecommendationResource } from "@lib/recommendation.ts"; import { createRecommendationResource } from "@lib/recommendation.ts";
import { createResource, fetchResource } from "@lib/marka/index.ts"; import { createResource, fetchResource } from "@lib/marka/index.ts";
import { ReviewResource } from "@lib/marka/schema.ts";
const POST = async ( const POST = async (
req: Request, req: Request,
@@ -20,7 +21,9 @@ const POST = async (
throw new AccessDeniedError(); throw new AccessDeniedError();
} }
const movie = await fetchResource(`movies/${ctx.params.name}`); const movie = await fetchResource<ReviewResource>(
`movies/${ctx.params.name}`,
);
if (!movie) { if (!movie) {
throw new NotFoundError(); throw new NotFoundError();
} }
@@ -33,27 +36,28 @@ const POST = async (
} }
const movieDetails = await tmdb.getMovie(tmdbId); const movieDetails = await tmdb.getMovie(tmdbId);
const movieCredits = !movie.meta?.author && const movieCredits = !movie.content?.author &&
await tmdb.getMovieCredits(tmdbId); await tmdb.getMovieCredits(tmdbId);
const releaseDate = movieDetails.release_date; const releaseDate = movieDetails.release_date;
if (releaseDate && !movie.meta?.date) { if (releaseDate && !movie.content?.datePublished) {
movie.meta = movie.meta || {}; movie.content = movie.content || {};
movie.meta.date = new Date(releaseDate); movie.content.datePublished = formatDate(new Date(releaseDate));
} }
const director = movieCredits &&
const director = movieCredits?.crew?.filter?.((person) => movieCredits?.crew?.filter?.((person) => person.job === "Director")[0];
person.job === "Director" if (director && !movie.content?.author) {
)[0]; movie.content = movie.content || {};
if (director && !movie.meta?.author) { movie.content.author = {
movie.meta = movie.meta || {}; _type: "Person",
movie.meta.author = director.name; name: director.name,
};
} }
if (movieDetails.genres) { if (movieDetails.genres) {
movie.tags = [ movie.content.keywords = [
...new Set([ ...new Set([
...(movie.tags?.map((g) => g.toLowerCase()) || []), ...(movie.content.keywords?.map((g) => g.toLowerCase()) || []),
...movieDetails.genres.map((g) => ...movieDetails.genres.map((g) =>
g.name?.toLowerCase().replaceAll(" ", "-") g.name?.toLowerCase().replaceAll(" ", "-")
), ),
@@ -61,22 +65,22 @@ const POST = async (
]; ];
} }
if (!movie.id) { if (!movie.name) {
movie.id = tmdbId; movie.name = tmdbId;
} }
let finalPath = ""; let finalPath = "";
const posterPath = movieDetails.poster_path; const posterPath = movieDetails.poster_path;
if (posterPath && !movie.meta?.image) { if (posterPath && !movie.content?.image) {
const poster = await tmdb.getMoviePoster(posterPath); const poster = await tmdb.getMoviePoster(posterPath);
const extension = fileExtension(posterPath); const extension = fileExtension(posterPath);
finalPath = `movies/images/${safeFileName(name)}_cover.${extension}`; finalPath = `movies/images/${safeFileName(name)}_cover.${extension}`;
await createResource(finalPath, poster); await createResource(finalPath, poster);
movie.meta = movie.meta || {}; movie.content = movie.content || {};
movie.meta.image = finalPath; movie.content.image = finalPath;
} }
await createResource(`movies/${safeFileName(movie.id)}.md`, movie); await createResource(`movies/${safeFileName(movie.name)}.md`, movie);
createRecommendationResource(movie, movieDetails.overview); createRecommendationResource(movie, movieDetails.overview);

12
routes/api/recipes/create/index.ts
View File

@@ -48,7 +48,14 @@ async function processCreateRecipeFromUrl(
} }
if (!recipe) { if (!recipe) {
recipe = await openai.extractRecipe(result.content); const res = await openai.extractRecipe(result.content);
if (!res || "errorMessages" in res) {
const errorMessage = res?.errorMessages?.[0] ||
"could not extract recipe";
streamResponse.enqueue(`failed to extract recipe: ${errorMessage}`);
return;
}
recipe = res;
} }
const id = safeFileName(recipe?.name || ""); const id = safeFileName(recipe?.name || "");
@@ -70,7 +77,8 @@ async function processCreateRecipeFromUrl(
if (newRecipe?.image && newRecipe.image.length > 5) { if (newRecipe?.image && newRecipe.image.length > 5) {
const extension = fileExtension(new URL(newRecipe.image).pathname); const extension = fileExtension(new URL(newRecipe.image).pathname);
const finalPath = `resources/recipes/images/${safeFileName(id) const finalPath = `resources/recipes/images/${
safeFileName(id)
}_cover.${extension}`; }_cover.${extension}`;
streamResponse.enqueue("downloading image"); streamResponse.enqueue("downloading image");
try { try {

13
routes/api/recipes/create/parseJsonLd.ts
View File

@@ -25,11 +25,14 @@ export function parseJsonLdToRecipeSchema(jsonLdContent: string) {
); );
const instructions = Array.isArray(data.recipeInstructions) const instructions = Array.isArray(data.recipeInstructions)
? data.recipeInstructions.map((instr) => { ? data.recipeInstructions.map((instr: unknown) => {
if (!instr) return "";
if (typeof instr === "string") return instr; if (typeof instr === "string") return instr;
if (typeof instr === "object" && instr.text) return instr.text; if (typeof instr === "object" && "text" in instr && instr.text) {
return instr.text;
}
return ""; return "";
}).filter((instr) => instr.trim() !== "") }).filter((instr: string) => instr.trim() !== "")
: []; : [];
// Parse servings // Parse servings
@@ -53,7 +56,7 @@ export function parseJsonLdToRecipeSchema(jsonLdContent: string) {
title: data.name || "Unnamed Recipe", title: data.name || "Unnamed Recipe",
image: pickImage(image || data.image || ""), image: pickImage(image || data.image || ""),
author: Array.isArray(data.author) author: Array.isArray(data.author)
? data.author.map((a: any) => a.name).join(", ") ? data.author.map((a: { name: string }) => a.name).join(", ")
: data.author?.name || "", : data.author?.name || "",
description: data.description || "", description: data.description || "",
ingredients, ingredients,
@@ -81,7 +84,7 @@ function pickImage(images: string | string[]): string {
return images; return images;
} }
function parseServings(servingsData: any): number { function parseServings(servingsData: unknown): number {
if (typeof servingsData === "string") { if (typeof servingsData === "string") {
const match = servingsData.match(/\d+/); const match = servingsData.match(/\d+/);
return match ? parseInt(match[0], 10) : 1; return match ? parseInt(match[0], 10) : 1;

3
routes/api/recommendation/all.ts
View File

@@ -42,7 +42,8 @@ async function processUpdateRecommendations(
} }
done++; done++;
streamResponse.enqueue( streamResponse.enqueue(
`${Math.floor((done / total) * 100)}% [${done + 1 `${Math.floor((done / total) * 100)}% [${
done + 1
}/${total}] ${movie.name}`, }/${total}] ${movie.name}`,
); );
})).catch((err) => { })).catch((err) => {

1
routes/api/recommendation/movie/[id].ts
View File

@@ -11,7 +11,6 @@ export const handler: Handlers = {
} }
const recommendations = await getSimilarMovies(ctx.params.id); const recommendations = await getSimilarMovies(ctx.params.id);
console.log({ recommendations });
return json(recommendations); return json(recommendations);
}, },

26
routes/api/series/enhance/[name].ts
View File

@@ -1,5 +1,4 @@
import { FreshContext, Handlers } from "$fresh/server.ts"; import { FreshContext, Handlers } from "$fresh/server.ts";
import { FreshContext, Handlers } from "$fresh/server.ts";
import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts"; import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts";
import * as tmdb from "@lib/tmdb.ts"; import * as tmdb from "@lib/tmdb.ts";
import { safeFileName } from "@lib/string.ts"; import { safeFileName } from "@lib/string.ts";
@@ -37,42 +36,43 @@ const POST = async (
} }
const seriesDetails = await tmdb.getSeries(tmdbId); const seriesDetails = await tmdb.getSeries(tmdbId);
const seriesCredits = !series.meta?.author && const seriesCredits = !series?.content?.author &&
await tmdb.getSeriesCredits(tmdbId); await tmdb.getSeriesCredits(tmdbId);
const releaseDate = seriesDetails.first_air_date; const releaseDate = seriesDetails.first_air_date;
if (releaseDate && series.meta?.date) { if (releaseDate && series.content?.datePublished) {
series.meta.date = new Date(releaseDate); series.content.datePublished = new Date(releaseDate).toISOString();
} }
const posterPath = seriesDetails.poster_path; const posterPath = seriesDetails.poster_path;
const director = seriesCredits && const director = seriesCredits &&
seriesCredits.crew?.filter?.((person) => person.job === "Director")[0] || seriesCredits.crew?.filter?.((person) => person.job === "Director")[0] ||
seriesDetails?.created_by?.[0]; seriesDetails?.created_by?.[0];
if (director && director.name && !series.meta?.author) { if (director && director.name && !series.content?.author) {
series.author = series.author || {}; series.content.author = series.content.author || {
series.author["_type"] = "Person"; _type: "Person",
series.author.name = director.name; name: director.name,
};
} }
if (seriesDetails.genres) { if (seriesDetails.genres) {
series.keywords = [ series.content.keywords = [
...new Set([ ...new Set([
...(series.tags?.map((t) => t.toLowerCase()) || []), ...(series.content.keywords?.map((t) => t.toLowerCase()) || []),
...seriesDetails.genres.map((g) => g.name?.toLowerCase()), ...seriesDetails.genres.map((g) => g.name?.toLowerCase()),
].filter(isString)), ].filter(isString)),
]; ];
} }
let finalPath = ""; let finalPath = "";
if (posterPath && !series.meta?.image) { if (posterPath && !series.content?.image) {
const poster = await tmdb.getMoviePoster(posterPath); const poster = await tmdb.getMoviePoster(posterPath);
const extension = fileExtension(posterPath); const extension = fileExtension(posterPath);
finalPath = `series/images/${safeFileName(name)}_cover.${extension}`; finalPath = `series/images/${safeFileName(name)}_cover.${extension}`;
await createResource(finalPath, poster); await createResource(finalPath, poster);
series.image = finalPath; series.content.image = finalPath;
} }
await createResource(`series/${safeFileName(series.id)}.md`, series); await createResource(`series/${safeFileName(series.name)}.md`, series);
return json(series); return json(series);
}; };

39
routes/articles/[name].tsx
View File

@@ -11,10 +11,14 @@ import { Star } from "@components/Stars.tsx";
import { MetaTags } from "@components/MetaTags.tsx"; import { MetaTags } from "@components/MetaTags.tsx";
import { fetchResource } from "@lib/marka/index.ts"; import { fetchResource } from "@lib/marka/index.ts";
import { ArticleResource } from "@lib/marka/schema.ts"; import { ArticleResource } from "@lib/marka/schema.ts";
import { parseRating } from "@lib/helpers.ts";
export const handler: Handlers<{ article: ArticleResource; session: unknown }> = { export const handler: Handlers<{ article: ArticleResource; session: unknown }> =
{
async GET(_, ctx) { async GET(_, ctx) {
const article = await fetchResource(`articles/${ctx.params.name}.md`); const article = await fetchResource<ArticleResource>(
`articles/${ctx.params.name}.md`,
);
if (!article) { if (!article) {
return ctx.renderNotFound(); return ctx.renderNotFound();
} }
@@ -23,16 +27,22 @@ export const handler: Handlers<{ article: ArticleResource; session: unknown }> =
}; };
export default function Greet( export default function Greet(
props: PageProps<{ article: Article; session: Record<string, string> }>, props: PageProps<
{ article: ArticleResource; session: Record<string, string> }
>,
) { ) {
const { article, session } = props.data; const { article, session } = props.data;
const { author = "", date = "", articleBody = "" } = article?.content || {}; const { author, datePublished, reviewRating, articleBody = "" } =
article?.content || {};
const content = renderMarkdown( const content = renderMarkdown(
removeImage(articleBody, article.image?.url), removeImage(articleBody, article.image?.url),
); );
const rating = reviewRating?.ratingValue &&
parseRating(reviewRating.ratingValue);
return ( return (
<MainLayout <MainLayout
url={props.url} url={props.url}
@@ -61,36 +71,35 @@ export default function Greet(
</PageHero.Title> </PageHero.Title>
<PageHero.Subline <PageHero.Subline
entries={[ entries={[
author && { author?.name && {
title: author, title: author.name,
href: `/?q=${encodeURIComponent(author)}`, href: `/?q=${encodeURIComponent(author?.name)}`,
}, },
date.toString(), datePublished?.toString(),
]} ]}
> >
{article.content.rating && <Star rating={article.content.rating} />} {rating && <Star rating={rating} />}
</PageHero.Subline> </PageHero.Subline>
</PageHero.Footer> </PageHero.Footer>
</PageHero> </PageHero>
{article.content?.tags?.length > 0 && ( {article.content?.keywords?.length && (
<> <>
<br /> <br />
<HashTags tags={article.content.tags} /> <HashTags tags={article.content.keywords} />
</> </>
)} )}
<div class="px-8 text-white mt-10"> <div class="px-8 text-white mt-10">
{isYoutubeLink(article.content.url) && ( {(article.content.url && isYoutubeLink(article.content.url)) && (
<YoutubePlayer link={article.content.url} /> <YoutubePlayer link={article.content.url} />
)} )}
<pre <pre
class="whitespace-break-spaces markdown-body" class="whitespace-break-spaces markdown-body"
data-color-mode="dark" data-color-mode="dark"
data-dark-theme="dark" data-dark-theme="dark"
// deno-lint-ignore react-no-danger
dangerouslySetInnerHTML={{ __html: content || "" }} dangerouslySetInnerHTML={{ __html: content || "" }}
> />
{content || ""}
</pre>
</div> </div>
</MainLayout> </MainLayout>
); );

5
routes/articles/index.tsx
View File

@@ -1,12 +1,11 @@
import { Handlers, PageProps } from "$fresh/server.ts"; import { Handlers, PageProps } from "$fresh/server.ts";
import { MainLayout } from "@components/layouts/main.tsx"; import { MainLayout } from "@components/layouts/main.tsx";
import { type ArticleResource } from "@lib/marka/schema.ts"; import { type ArticleResource, GenericResource } from "@lib/marka/schema.ts";
import { KMenu } from "@islands/KMenu.tsx"; import { KMenu } from "@islands/KMenu.tsx";
import { Grid } from "@components/Grid.tsx"; import { Grid } from "@components/Grid.tsx";
import { IconArrowLeft } from "@components/icons.tsx"; import { IconArrowLeft } from "@components/icons.tsx";
import { RedirectSearchHandler } from "@islands/Search.tsx"; import { RedirectSearchHandler } from "@islands/Search.tsx";
import { parseResourceUrl, searchResource } from "@lib/search.ts"; import { parseResourceUrl, searchResource } from "@lib/search.ts";
import { GenericResource } from "@lib/types.ts";
import { ResourceCard } from "@components/Card.tsx"; import { ResourceCard } from "@components/Card.tsx";
import { Link } from "@islands/Link.tsx"; import { Link } from "@islands/Link.tsx";
import { listResources } from "@lib/marka/index.ts"; import { listResources } from "@lib/marka/index.ts";
@@ -15,7 +14,7 @@ export const handler: Handlers<
{ articles: ArticleResource[] | null; searchResults?: GenericResource[] } { articles: ArticleResource[] | null; searchResults?: GenericResource[] }
> = { > = {
async GET(req, ctx) { async GET(req, ctx) {
const articles = await listResources("articles"); const articles = await listResources<ArticleResource>("articles");
const searchParams = parseResourceUrl(req.url); const searchParams = parseResourceUrl(req.url);
const searchResults = searchParams && const searchResults = searchParams &&
await searchResource({ ...searchParams, types: ["article"] }); await searchResource({ ...searchParams, types: ["article"] });

3
routes/index.tsx
View File

@@ -22,7 +22,8 @@ export default function Home(props: PageProps) {
<Card <Card
title={`${m.name}`} title={`${m.name}`}
backgroundSize={80} backgroundSize={80}
image={`${m.emoji.endsWith(".png") image={`${
m.emoji.endsWith(".png")
? `/emojis/${encodeURIComponent(m.emoji)}` ? `/emojis/${encodeURIComponent(m.emoji)}`
: "/placeholder.svg" : "/placeholder.svg"
}`} }`}

38
routes/movies/[name].tsx
View File

@@ -1,6 +1,6 @@
import { PageProps, RouteContext } from "$fresh/server.ts"; import { PageProps, RouteContext } from "$fresh/server.ts";
import { MainLayout } from "@components/layouts/main.tsx"; import { MainLayout } from "@components/layouts/main.tsx";
import { ReviewResource, ReviewSchema } from "@lib/marka/schema.ts"; import { ReviewResource } from "@lib/marka/schema.ts";
import { removeImage, renderMarkdown } from "@lib/markdown.ts"; import { removeImage, renderMarkdown } from "@lib/markdown.ts";
import { KMenu } from "@islands/KMenu.tsx"; import { KMenu } from "@islands/KMenu.tsx";
import { RedirectSearchHandler } from "@islands/Search.tsx"; import { RedirectSearchHandler } from "@islands/Search.tsx";
@@ -24,12 +24,16 @@ export default async function Greet(
return ctx.renderNotFound(); return ctx.renderNotFound();
} }
const { author = "", datePublished = "",reviewBody } = movie.content; const { author, datePublished, reviewBody = "", reviewRating } =
movie.content;
const content = renderMarkdown( const content = renderMarkdown(
removeImage(reviewBody || "", movie.content.image), removeImage(reviewBody, movie.content.image),
); );
const rating = reviewRating?.ratingValue &&
parseRating(reviewRating.ratingValue);
return ( return (
<MainLayout url={props.url} title={`Movie > ${movie.name}`} context={movie}> <MainLayout url={props.url} title={`Movie > ${movie.name}`} context={movie}>
<RedirectSearchHandler /> <RedirectSearchHandler />
@@ -53,37 +57,33 @@ export default async function Greet(
</PageHero.Title> </PageHero.Title>
<PageHero.Subline <PageHero.Subline
entries={[ entries={[
author && { author?.name &&
title: author?.name, {
title: author.name,
href: `/?q=${encodeURIComponent(author?.name)}`, href: `/?q=${encodeURIComponent(author?.name)}`,
}, },
date.toString(), datePublished?.toString(),
]} ]}
> >
{movie.content.reviewRating && ( {rating && <Star rating={rating} />}
<Star
rating={parseRating(movie.content?.reviewRating?.ratingValue)}
/>
)}
</PageHero.Subline> </PageHero.Subline>
</PageHero.Footer> </PageHero.Footer>
</PageHero> </PageHero>
{false && ( {movie.name && (
<Recommendations <Recommendations
id={movie.id} id={movie.name}
type="movie" type="movie"
/> />
)} )}
<div class="px-8 text-white mt-10"> <div class="px-8 text-white mt-10">
{movie?.content?.reviewBody?.length > 80 {reviewBody?.length > 80 && (
? <h2 class="text-4xl font-bold mb-4">Review</h2> <h2 class="text-4xl font-bold mb-4">Review</h2>
: <></>} )}
<pre <pre
class="whitespace-break-spaces" class="whitespace-break-spaces"
// deno-lint-ignore react-no-danger
dangerouslySetInnerHTML={{ __html: content || "" }} dangerouslySetInnerHTML={{ __html: content || "" }}
> />
{content}
</pre>
</div> </div>
</MainLayout> </MainLayout>
); );

18
routes/movies/index.tsx
View File

@@ -1,29 +1,33 @@
import { MainLayout } from "@components/layouts/main.tsx"; import { MainLayout } from "@components/layouts/main.tsx";
import { ReviewResource } from "@lib/marka/schema.ts"; import { GenericResource, ReviewResource } from "@lib/marka/schema.ts";
import { ResourceCard } from "@components/Card.tsx"; import { ResourceCard } from "@components/Card.tsx";
import { Grid } from "@components/Grid.tsx"; import { Grid } from "@components/Grid.tsx";
import { IconArrowLeft } from "@components/icons.tsx"; import { IconArrowLeft } from "@components/icons.tsx";
import { KMenu } from "@islands/KMenu.tsx"; import { KMenu } from "@islands/KMenu.tsx";
import { RedirectSearchHandler } from "@islands/Search.tsx"; import { RedirectSearchHandler } from "@islands/Search.tsx";
import { GenericResource } from "@lib/types.ts";
import { PageProps } from "$fresh/server.ts"; import { PageProps } from "$fresh/server.ts";
import { listResources } from "@lib/marka/index.ts"; import { listResources } from "@lib/marka/index.ts";
import { parseResourceUrl, searchResource } from "@lib/search.ts"; import { parseResourceUrl, searchResource } from "@lib/search.ts";
import { parseRating } from "@lib/helpers.ts";
function sortOptional(a: number | string = 0, b: number | string = 0) {
return (parseRating(a) > parseRating(b)) ? 1 : -1;
}
export default async function MovieIndex( export default async function MovieIndex(
props: PageProps< props: PageProps<
{ movies: ReviewResource[] | null; searchResults: GenericResource[] } { movies: ReviewResource[] | null; searchResults: GenericResource[] }
>, >,
) { ) {
const allMovies = await listResources("movies"); const allMovies = await listResources<ReviewResource>("movies");
const searchParams = parseResourceUrl(props.url); const searchParams = parseResourceUrl(props.url);
const searchResults = searchParams && const searchResults = searchParams &&
await searchResource({ ...searchParams, types: ["movie"] }); await searchResource({ ...searchParams, types: ["movie"] });
const movies = allMovies.sort((a, b) => const movies = allMovies.sort((a, b) =>
a?.content?.reviewRating?.ratingValue > sortOptional(
b?.content?.reviewRating?.ratingValue a.content.reviewRating?.ratingValue,
? -1 b.content.reviewRating?.ratingValue,
: 1 )
); );
return ( return (

24
routes/recipes/[name].tsx
View File

@@ -13,13 +13,16 @@ import { MetaTags } from "@components/MetaTags.tsx";
import { fetchResource } from "@lib/marka/index.ts"; import { fetchResource } from "@lib/marka/index.ts";
import { RecipeResource } from "@lib/marka/schema.ts"; import { RecipeResource } from "@lib/marka/schema.ts";
import { parseIngredients } from "@lib/parseIngredient.ts"; import { parseIngredients } from "@lib/parseIngredient.ts";
import { parseRating } from "@lib/helpers.ts";
export const handler: Handlers< export const handler: Handlers<
{ recipe: RecipeResource; session: unknown } | null { recipe: RecipeResource; session: unknown } | null
> = { > = {
async GET(_, ctx) { async GET(_, ctx) {
try { try {
const recipe = await fetchResource(`recipes/${ctx.params.name}.md`); const recipe = await fetchResource<RecipeResource>(
`recipes/${ctx.params.name}.md`,
);
if (!recipe) { if (!recipe) {
return ctx.renderNotFound(); return ctx.renderNotFound();
} }
@@ -36,7 +39,7 @@ function ValidRecipe({
portion, portion,
}: { recipe: RecipeResource; amount: Signal<number>; portion: number }) { }: { recipe: RecipeResource; amount: Signal<number>; portion: number }) {
const ingredients = parseIngredients( const ingredients = parseIngredients(
recipe.content.recipeIngredient?.join("\n"), recipe.content.recipeIngredient?.join("\n") || "",
); );
return ( return (
@@ -54,10 +57,12 @@ function ValidRecipe({
<div class="pl-2"> <div class="pl-2">
<ol class="list-decimal grid gap-4"> <ol class="list-decimal grid gap-4">
{recipe.content.recipeInstructions && {recipe.content.recipeInstructions &&
(recipe.content.recipeInstructions.filter((inst) => !!inst?.length) (recipe.content.recipeInstructions
.filter((inst) => !!inst?.length)
.map((instruction) => { .map((instruction) => {
return ( return (
<li <li
// deno-lint-ignore react-no-danger
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: renderMarkdown(instruction), __html: renderMarkdown(instruction),
}} }}
@@ -71,17 +76,20 @@ function ValidRecipe({
} }
export default function Page( export default function Page(
props: PageProps<{ recipe: Recipe; session: Record<string, string> }>, props: PageProps<{ recipe: RecipeResource; session: Record<string, string> }>,
) { ) {
const { recipe, session } = props.data; const { recipe, session } = props.data;
const portion = recipe.recipeYield; const portion = recipe.content.recipeYield;
const amount = useSignal(portion || 1); const amount = useSignal(portion || 1);
const subline = [ const subline = [
recipe?.content?.prepTime && `Duration ${recipe?.content?.prepTime}`, recipe?.content?.totalTime && `Duration ${recipe?.content?.totalTime}`,
].filter(Boolean) as string[]; ].filter(Boolean) as string[];
const rating = recipe.content.reviewRating?.ratingValue &&
parseRating(recipe.content.reviewRating.ratingValue);
return ( return (
<MainLayout <MainLayout
url={props.url} url={props.url}
@@ -105,13 +113,13 @@ export default function Page(
)} )}
</PageHero.Header> </PageHero.Header>
<PageHero.Footer> <PageHero.Footer>
<PageHero.Title link={recipe.content?.link}> <PageHero.Title link={recipe.content?.url}>
{recipe.content.name} {recipe.content.name}
</PageHero.Title> </PageHero.Title>
<PageHero.Subline <PageHero.Subline
entries={subline} entries={subline}
> >
{recipe.meta?.rating && <Star rating={recipe.meta?.rating} />} {rating && <Star rating={rating} />}
</PageHero.Subline> </PageHero.Subline>
</PageHero.Footer> </PageHero.Footer>
</PageHero> </PageHero>

11
routes/recipes/index.tsx
View File

@@ -1,20 +1,19 @@
import { Handlers, PageProps } from "$fresh/server.ts"; import { Handlers, PageProps } from "$fresh/server.ts";
import { MainLayout } from "@components/layouts/main.tsx"; import { MainLayout } from "@components/layouts/main.tsx";
import { Recipe } from "@lib/recipeSchema.ts";
import { Grid } from "@components/Grid.tsx"; import { Grid } from "@components/Grid.tsx";
import { IconArrowLeft } from "@components/icons.tsx"; import { IconArrowLeft } from "@components/icons.tsx";
import { KMenu } from "@islands/KMenu.tsx"; import { KMenu } from "@islands/KMenu.tsx";
import { RedirectSearchHandler } from "@islands/Search.tsx"; import { RedirectSearchHandler } from "@islands/Search.tsx";
import { GenericResource } from "@lib/types.ts";
import { ResourceCard } from "@components/Card.tsx"; import { ResourceCard } from "@components/Card.tsx";
import { fetchResource, listResources } from "@lib/marka/index.ts"; import { listResources } from "@lib/marka/index.ts";
import { parseResourceUrl, searchResource } from "@lib/search.ts"; import { parseResourceUrl, searchResource } from "@lib/search.ts";
import { GenericResource, RecipeResource } from "@lib/marka/schema.ts";
export const handler: Handlers< export const handler: Handlers<
{ recipes: Recipe[] | null; searchResults?: GenericResource[] } { recipes: RecipeResource[] | null; searchResults?: GenericResource[] }
> = { > = {
async GET(req, ctx) { async GET(req, ctx) {
const recipes = await listResources("recipes"); const recipes = await listResources<RecipeResource>("recipes");
const searchParams = parseResourceUrl(req.url); const searchParams = parseResourceUrl(req.url);
const searchResults = searchParams && const searchResults = searchParams &&
await searchResource({ ...searchParams, types: ["recipe"] }); await searchResource({ ...searchParams, types: ["recipe"] });
@@ -24,7 +23,7 @@ export const handler: Handlers<
export default function Greet( export default function Greet(
props: PageProps< props: PageProps<
{ recipes: Recipe[] | null; searchResults: GenericResource[] } { recipes: RecipeResource[] | null; searchResults: GenericResource[] }
>, >,
) { ) {
const { recipes, searchResults } = props.data; const { recipes, searchResults } = props.data;

41
routes/series/[name].tsx
View File

@@ -13,7 +13,9 @@ import { ReviewResource } from "@lib/marka/schema.ts";
export const handler: Handlers<{ serie: ReviewResource; session: unknown }> = { export const handler: Handlers<{ serie: ReviewResource; session: unknown }> = {
async GET(_, ctx) { async GET(_, ctx) {
const serie = await fetchResource(`series/${ctx.params.name}.md`); const serie = await fetchResource<ReviewResource>(
`series/${ctx.params.name}.md`,
);
if (!serie) { if (!serie) {
return ctx.renderNotFound(); return ctx.renderNotFound();
@@ -27,16 +29,19 @@ export default function Greet(
) { ) {
const { serie, session } = props.data; const { serie, session } = props.data;
const { author = "", date = "", reviewBody } = serie?.content || {}; const { author, datePublished, reviewBody = "" } = serie?.content || {};
const content = renderMarkdown( const content = renderMarkdown(
removeImage(reviewBody, serie.image?.url), removeImage(reviewBody, serie.image?.url),
); );
const rating = serie.content.reviewRating?.ratingValue &&
parseRating(serie.content.reviewRating.ratingValue);
return ( return (
<MainLayout <MainLayout
url={props.url} url={props.url}
title={`Serie > ${serie.content?.name}`} title={`Serie > ${serie.content?.itemReviewed?.name}`}
context={serie} context={serie}
> >
<RedirectSearchHandler /> <RedirectSearchHandler />
@@ -59,37 +64,33 @@ export default function Greet(
<PageHero.Title>{serie.name}</PageHero.Title> <PageHero.Title>{serie.name}</PageHero.Title>
<PageHero.Subline <PageHero.Subline
entries={[ entries={[
author && { author?.name &&
title: author, {
href: `/?q=${encodeURIComponent(author)}`, title: author.name,
href: `/?q=${encodeURIComponent(author?.name)}`,
}, },
date.toString(), datePublished?.toString(),
]} ]}
> >
{serie.content?.reviewRating && ( {rating && <Star rating={rating} />}
<Star
rating={parseRating(serie.content?.reviewRating?.ratingValue)}
/>
)}
</PageHero.Subline> </PageHero.Subline>
</PageHero.Footer> </PageHero.Footer>
</PageHero> </PageHero>
{serie.content?.tags?.length > 0 && ( {serie.content?.keywords?.length && (
<> <>
<br /> <br />
<HashTags tags={serie.content?.tags} /> <HashTags tags={serie.content?.keywords} />
</> </>
)} )}
<div class="px-8 text-white mt-10"> <div class="px-8 text-white mt-10">
{serie?.content?.reviewBody?.length > 80 {serie?.content?.reviewBody?.length && (
? <h2 class="text-4xl font-bold mb-4">Review</h2> <h2 class="text-4xl font-bold mb-4">Review</h2>
: <></>} )}
<pre <pre
class="whitespace-break-spaces" class="whitespace-break-spaces"
// deno-lint-ignore react-no-danger
dangerouslySetInnerHTML={{ __html: content || "" }} dangerouslySetInnerHTML={{ __html: content || "" }}
> />
{content}
</pre>
</div> </div>
</MainLayout> </MainLayout>
); );

2
routes/series/index.tsx
View File

@@ -13,7 +13,7 @@ export const handler: Handlers<
{ series: ReviewResource[] | null; searchResults?: GenericResource[] } { series: ReviewResource[] | null; searchResults?: GenericResource[] }
> = { > = {
async GET(req, ctx) { async GET(req, ctx) {
const series = await listResources("series"); const series = await listResources<ReviewResource>("series");
const searchParams = parseResourceUrl(req.url); const searchParams = parseResourceUrl(req.url);
const searchResults = searchParams && const searchResults = searchParams &&
await searchResource({ ...searchParams, types: ["series"] }); await searchResource({ ...searchParams, types: ["series"] });

15
static/global.css
View File

File diff suppressed because one or more lines are too long

21
static/logo.svg
View File

@@ -1,6 +1,19 @@
<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.092 8.845C38.929 20.652 34.092 27 30 30.5c1 3.5-2.986 4.222-4.5 2.5-4.457 1.537-13.512 1.487-20-5C2 24.5 4.73 16.714 14 11.5c8-4.5 16-7 20.092-2.655Z" fill="#FFDB1E"/> <path
<path d="M14 11.5c6.848-4.497 15.025-6.38 18.368-3.47C37.5 12.5 21.5 22.612 15.5 25c-6.5 2.587-3 8.5-6.5 8.5-3 0-2.5-4-5.183-7.75C2.232 23.535 6.16 16.648 14 11.5Z" fill="#fff" stroke="#FFDB1E"/> d="M34.092 8.845C38.929 20.652 34.092 27 30 30.5c1 3.5-2.986 4.222-4.5 2.5-4.457 1.537-13.512 1.487-20-5C2 24.5 4.73 16.714 14 11.5c8-4.5 16-7 20.092-2.655Z"
<path d="M28.535 8.772c4.645 1.25-.365 5.695-4.303 8.536-3.732 2.692-6.606 4.21-7.923 4.83-.366.173-1.617-2.252-1.617-1 0 .417-.7 2.238-.934 2.326-1.365.512-4.223 1.29-5.835 1.29-3.491 0-1.923-4.754 3.014-9.122.892-.789 1.478-.645 2.283-.645-.537-.773-.534-.917.403-1.546C17.79 10.64 23 8.77 25.212 8.42c.366.014.82.35.82.629.41-.14 2.095-.388 2.503-.278Z" fill="#FFE600"/> fill="#FFDB1E"
<path d="M14.297 16.49c.985-.747 1.644-1.01 2.099-2.526.566.121.841-.08 1.29-.701.324.466 1.657.608 2.453.701-.715.451-1.057.852-1.452 2.106-1.464-.611-3.167-.302-4.39.42Z" fill="#fff"/> />
<path
d="M14 11.5c6.848-4.497 15.025-6.38 18.368-3.47C37.5 12.5 21.5 22.612 15.5 25c-6.5 2.587-3 8.5-6.5 8.5-3 0-2.5-4-5.183-7.75C2.232 23.535 6.16 16.648 14 11.5Z"
fill="#fff"
stroke="#FFDB1E"
/>
<path
d="M28.535 8.772c4.645 1.25-.365 5.695-4.303 8.536-3.732 2.692-6.606 4.21-7.923 4.83-.366.173-1.617-2.252-1.617-1 0 .417-.7 2.238-.934 2.326-1.365.512-4.223 1.29-5.835 1.29-3.491 0-1.923-4.754 3.014-9.122.892-.789 1.478-.645 2.283-.645-.537-.773-.534-.917.403-1.546C17.79 10.64 23 8.77 25.212 8.42c.366.014.82.35.82.629.41-.14 2.095-.388 2.503-.278Z"
fill="#FFE600"
/>
<path
d="M14.297 16.49c.985-.747 1.644-1.01 2.099-2.526.566.121.841-.08 1.29-.701.324.466 1.657.608 2.453.701-.715.451-1.057.852-1.452 2.106-1.464-.611-3.167-.302-4.39.42Z"
fill="#fff"
/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

38
static/placeholder.svg
View File

@@ -1,7 +1,35 @@
<svg width="387" height="387" viewBox="0 0 387 387" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
width="387"
height="387"
viewBox="0 0 387 387"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="387" height="387" fill="#2B2930" /> <rect width="387" height="387" fill="#2B2930" />
<circle cx="212.471" cy="154.8" r="15.5559" stroke="#39363F" stroke-width="3.03529"/> <circle
<path d="M110.978 249.463L155.261 205.18C161.188 199.253 170.797 199.253 176.724 205.18L221.007 249.463" stroke="#39363F" stroke-width="3.03529"/> cx="212.471"
<path d="M192.362 220.628L207.81 205.18C213.737 199.253 223.346 199.253 229.273 205.18L273.556 249.463" stroke="#39363F" stroke-width="3.03529"/> cy="154.8"
<rect x="86.1265" y="86.1265" width="214.747" height="214.747" rx="13.6588" stroke="#39363F" stroke-width="3.03529"/> r="15.5559"
stroke="#39363F"
stroke-width="3.03529"
/>
<path
d="M110.978 249.463L155.261 205.18C161.188 199.253 170.797 199.253 176.724 205.18L221.007 249.463"
stroke="#39363F"
stroke-width="3.03529"
/>
<path
d="M192.362 220.628L207.81 205.18C213.737 199.253 223.346 199.253 229.273 205.18L273.556 249.463"
stroke="#39363F"
stroke-width="3.03529"
/>
<rect
x="86.1265"
y="86.1265"
width="214.747"
height="214.747"
rx="13.6588"
stroke="#39363F"
stroke-width="3.03529"
/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 652 B

After

Width:  |  Height:  |  Size: 758 B

42
static/prism-twilight.css
View File

@@ -7,10 +7,10 @@ code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
color: white; color: white;
background: none; background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 1em; font-size: 1em;
text-align: left; text-align: left;
text-shadow: 0 -.1em .2em black; text-shadow: 0 -0.1em 0.2em black;
white-space: pre; white-space: pre;
word-spacing: normal; word-spacing: normal;
word-break: normal; word-break: normal;
@@ -34,10 +34,10 @@ pre[class*="language-"],
/* Code blocks */ /* Code blocks */
pre[class*="language-"] { pre[class*="language-"] {
border-radius: .5em; border-radius: 0.5em;
border: .3em solid hsl(0, 0%, 33%); /* #282A2B */ border: 0.3em solid hsl(0, 0%, 33%); /* #282A2B */
box-shadow: 1px 1px .5em black inset; box-shadow: 1px 1px 0.5em black inset;
margin: .5em 0; margin: 0.5em 0;
overflow: auto; overflow: auto;
padding: 1em; padding: 1em;
} }
@@ -53,24 +53,28 @@ pre[class*="language-"]::selection {
} }
/* Text Selection colour */ /* Text Selection colour */
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, pre[class*="language-"]::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none; text-shadow: none;
background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */ background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
} }
pre[class*="language-"]::selection, pre[class*="language-"] ::selection, pre[class*="language-"]::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection { pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none; text-shadow: none;
background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */ background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
} }
/* Inline code */ /* Inline code */
:not(pre) > code[class*="language-"] { :not(pre) > code[class*="language-"] {
border-radius: .3em; border-radius: 0.3em;
border: .13em solid hsl(0, 0%, 33%); /* #545454 */ border: 0.13em solid hsl(0, 0%, 33%); /* #545454 */
box-shadow: 1px 1px .3em -.1em black inset; box-shadow: 1px 1px 0.3em -0.1em black inset;
padding: .15em .2em .05em; padding: 0.15em 0.2em 0.05em;
white-space: normal; white-space: normal;
} }
@@ -82,11 +86,11 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
} }
.token.punctuation { .token.punctuation {
opacity: .7; opacity: 0.7;
} }
.token.namespace { .token.namespace {
opacity: .7; opacity: 0.7;
} }
.token.tag, .token.tag,
@@ -155,7 +159,11 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
.line-highlight.line-highlight { .line-highlight.line-highlight {
background: hsla(0, 0%, 33%, 0.25); /* #545454 */ background: hsla(0, 0%, 33%, 0.25); /* #545454 */
background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ background: linear-gradient(
to right,
hsla(0, 0%, 33%, 0.1) 70%,
hsla(0, 0%, 33%, 0)
); /* #545454 */
border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */ border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */ border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
margin-top: 0.75em; /* Same as .prism’s padding-top */ margin-top: 0.75em; /* Same as .prism’s padding-top */

27
static/safari-pinned-tab.svg
View File

@@ -1,15 +1,25 @@
<?xml version="1.0" standalone="no"?> <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" <svg
width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000" version="1.0"
preserveAspectRatio="xMidYMid meet"> xmlns="http://www.w3.org/2000/svg"
<metadata> width="256.000000pt"
height="256.000000pt"
viewBox="0 0 256.000000 256.000000"
preserveAspectRatio="xMidYMid meet"
>
<metadata
>
Created by potrace 1.14, written by Peter Selinger 2001-2017 Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata> </metadata>
<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)" <g
fill="#000000" stroke="none"> transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
<path d="M1404 2075 c-16 -7 -75 -60 -131 -116 -55 -57 -130 -133 -166 -167 fill="#000000"
stroke="none"
>
<path
d="M1404 2075 c-16 -7 -75 -60 -131 -116 -55 -57 -130 -133 -166 -167
l-64 -64 0 122 c0 91 -3 124 -13 130 -19 12 -192 12 -210 0 -11 -7 -15 -34 l-64 -64 0 122 c0 91 -3 124 -13 130 -19 12 -192 12 -210 0 -11 -7 -15 -34
-16 -117 -1 -59 -3 -110 -3 -113 -1 -3 -20 -11 -43 -17 -67 -18 -126 -76 -164 -16 -117 -1 -59 -3 -110 -3 -113 -1 -3 -20 -11 -43 -17 -67 -18 -126 -76 -164
-160 -33 -72 -34 -73 -108 -108 -41 -19 -87 -50 -102 -68 -64 -76 -82 -169 -160 -33 -72 -34 -73 -108 -108 -41 -19 -87 -50 -102 -68 -64 -76 -82 -169
@@ -19,6 +29,7 @@ l-64 -64 0 122 c0 91 -3 124 -13 130 -19 12 -192 12 -210 0 -11 -7 -15 -34
-59 15 -9 -2 -12 10 -9 45 6 72 -17 145 -62 196 -13 16 -16 60 -16 318 0 164 -59 15 -9 -2 -12 10 -9 45 6 72 -17 145 -62 196 -13 16 -16 60 -16 318 0 164
3 299 6 299 3 0 18 -13 34 -30 39 -41 75 -52 113 -33 36 18 53 57 40 93 -5 14 3 299 6 299 3 0 18 -13 34 -30 39 -41 75 -52 113 -33 36 18 53 57 40 93 -5 14
-82 96 -171 183 -89 87 -282 277 -429 423 -146 145 -270 264 -275 265 -4 0 -82 96 -171 183 -89 87 -282 277 -429 423 -146 145 -270 264 -275 265 -4 0
-15 2 -24 4 -8 1 -29 -3 -45 -10z"/> -15 2 -24 4 -8 1 -29 -3 -45 -10z"
/>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB