feat: init

This commit is contained in:
2023-07-26 13:47:01 +02:00
commit 8e461cea26
28 changed files with 732 additions and 0 deletions

28
routes/_404.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Head } from "$fresh/runtime.ts";
export default function Error404() {
return (
<>
<Head>
<title>404 - Page not found</title>
</Head>
<div class="px-4 py-8 mx-auto bg-[#86efac]">
<div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
<img
class="my-6"
src="/logo.svg"
width="128"
height="128"
alt="the fresh logo: a sliced lemon dripping with juice"
/>
<h1 class="text-4xl font-bold">404 - Page not found</h1>
<p class="my-4">
The page you were looking for doesn't exist.
</p>
<a href="/" class="underline">Go back home</a>
</div>
</div>
</>
);
}

23
routes/_app.tsx Normal file
View File

@ -0,0 +1,23 @@
import { AppProps } from "$fresh/server.ts";
import { Head } from "$fresh/runtime.ts";
export default function App({ Component }: AppProps) {
return (
<>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin=""
/>
<link
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;400;700&display=swap"
rel="stylesheet"
/>
<link href="/global.css" rel="stylesheet" />
</Head>
<Component />
</>
);
}

11
routes/api/index.ts Normal file
View File

@ -0,0 +1,11 @@
import { HandlerContext } from "$fresh/server.ts";
import { getDocuments } from "../../lib/documents.ts";
export const handler = async (
_req: Request,
_ctx: HandlerContext,
): Promise<Response> => {
const documents = await getDocuments();
const response = new Response(JSON.stringify(documents));
return response;
};

View File

@ -0,0 +1,23 @@
import { HandlerContext } from "$fresh/server.ts";
import { getDocument } from "../../../lib/documents.ts";
import { parseRecipe } from "../../../lib/recipes.ts";
export async function getRecipe(name: string) {
const document = await getDocument(`Recipes/${name}.md`);
const recipe = parseRecipe(document, name);
return recipe;
}
export const handler = async (
_req: Request,
_ctx: HandlerContext,
): Promise<Response> => {
const recipe = await getRecipe(_ctx.params.name);
const headers = new Headers();
headers.append("Content-Type", "application/json");
return new Response(JSON.stringify(recipe));
};

View File

@ -0,0 +1,26 @@
import { HandlerContext } from "$fresh/server.ts";
function copyHeader(headerName: string, to: Headers, from: Headers) {
const hdrVal = from.get(headerName);
if (hdrVal) {
to.set(headerName, hdrVal);
}
}
export const handler = async (
_req: Request,
_ctx: HandlerContext,
): Promise<Response> => {
const proxyRes = await fetch(
"http://192.168.178.56:3007/Recipes/images/" + _ctx.params.image,
);
console.log({ params: _ctx.params });
const headers = new Headers();
copyHeader("content-length", headers, proxyRes.headers);
copyHeader("content-type", headers, proxyRes.headers);
copyHeader("content-disposition", headers, proxyRes.headers);
return new Response(proxyRes.body, {
status: proxyRes.status,
headers,
});
};

View File

@ -0,0 +1,34 @@
import { HandlerContext } from "$fresh/server.ts";
import { getDocument, getDocuments } from "../../../lib/documents.ts";
import { parseRecipe } from "../../../lib/recipes.ts";
export async function getRecipes() {
const documents = await getDocuments();
return Promise.all(
documents.filter((d) => {
return d.name.startsWith("Recipes/") &&
d.contentType === "text/markdown" &&
!d.name.endsWith("index.md");
}).map(async (doc) => {
const document = await getDocument(doc.name);
const recipe = parseRecipe(document, doc.name);
return {
...recipe,
id: recipe.id.replace(/^Recipes\//, "").replace(/\.md$/, ""),
};
}),
);
}
export const handler = async (
_req: Request,
_ctx: HandlerContext,
): Promise<Response> => {
const headers = new Headers();
headers.append("Content-Type", "application/json");
const recipes = await getRecipes();
return new Response(JSON.stringify(recipes), { headers });
};

31
routes/index.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Head } from "$fresh/runtime.ts";
import { useSignal } from "@preact/signals";
import Counter from "../islands/Counter.tsx";
export default function Home() {
const count = useSignal(3);
return (
<>
<Head>
<title>app</title>
</Head>
<div class="px-4 py-8 mx-auto bg-[#86efac]">
<div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
<img
class="my-6"
src="/logo.svg"
width="128"
height="128"
alt="the fresh logo: a sliced lemon dripping with juice"
/>
<h1 class="text-4xl font-bold">Welcome to fresh</h1>
<p class="my-4">
Try updating this message in the
<code class="mx-2">./routes/index.tsx</code> file, and refresh.
</p>
<Counter count={count} />
</div>
</div>
</>
);
}

26
routes/recipes/[name].tsx Normal file
View File

@ -0,0 +1,26 @@
import { Handlers, PageProps } from "$fresh/server.ts";
import { IngredientsList } from "../../components/IngredientsList.tsx";
import { RecipeHero } from "../../components/RecipeHero.tsx";
import { MainLayout } from "../../components/layouts/main.tsx";
import { Recipe } from "../../lib/recipes.ts";
import { getRecipe } from "../api/recipes/[name].ts";
export const handler: Handlers<Recipe | null> = {
async GET(_, ctx) {
const recipe = await getRecipe(ctx.params.name);
return ctx.render(recipe);
},
};
export default function Greet(props: PageProps<Recipe>) {
return (
<MainLayout>
<RecipeHero recipe={props.data} />
<div class="px-12 text-white mt-10">
<h3 class="text-3xl">Ingredients</h3>
<IngredientsList ingredients={props.data.ingredients} />
<h3 class="text-3xl">Preperation</h3>
</div>
</MainLayout>
);
}

25
routes/recipes/index.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Handlers, PageProps } from "$fresh/server.ts";
import { RecipeCard } from "../../components/RecipeCard.tsx";
import { MainLayout } from "../../components/layouts/main.tsx";
import type { Document } from "../../lib/documents.ts";
import { Recipe } from "../../lib/recipes.ts";
import { getRecipes } from "../api/recipes/index.ts";
export const handler: Handlers<Recipe[] | null> = {
async GET(_, ctx) {
const recipes = await getRecipes();
return ctx.render(recipes);
},
};
export default function Greet(props: PageProps<Recipe[] | null>) {
return (
<MainLayout>
<div class="flex flex-wrap justify-center items-center gap-4 px-4">
{props.data?.map((doc) => {
return <RecipeCard recipe={doc} />;
})}
</div>
</MainLayout>
);
}