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

feat: client side loading

Browse Source
This commit is contained in:
max_richter
2025-01-20 23:37:03 +01:00
parent 463141981b
commit 19a1344d3d
7 changed files with 75 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
routes/_app.tsx
View File

@ -1,14 +1,15 @@
import { PageProps } from "$fresh/server.ts";
import { Partial } from "$fresh/runtime.ts";
import { useEffect } from "preact/hooks";
import { Head } from "$fresh/runtime.ts";
export default function App({ Component }: PageProps) {
const globalCss = Deno
.readTextFileSync("./static/global.css")
.replaceAll("\n", "");
return (
<>
<Head>
<html>
<head>
<link rel="stylesheet" href="/prism-material-dark.css" />
<link rel="stylesheet" href="/styles.css" />
<link
@ -21,9 +22,13 @@ export default function App({ Component }: PageProps) {
<meta name="theme-color" content="#141218" />
<style>{globalCss}</style>
<title>Memorium</title>
</Head>
<Component />
</head>
<body f-client-nav>
<Partial name="body">
<Component />
</Partial>
</body>
<script src="/thumbnails.js" type="module" async defer />
</>
</html>
);
}

9
routes/_layout.tsx
View File

@ -1,5 +1,6 @@
import { PageProps } from "$fresh/server.ts";
import { resources } from "@lib/resources.ts";
import { Link } from "@islands/Link.tsx";
import { Emoji } from "@components/Emoji.tsx";
export default function MyLayout({ Component }: PageProps) {
@ -12,12 +13,12 @@ export default function MyLayout({ Component }: PageProps) {
<nav class="min-h-fit rounded-3xl p-3 grid gap-3 fixed t-0">
{Object.values(resources).map((m) => {
return (
<a
<Link
href={m.link}
class={`flex items-center gap-2 text-white data-[current]:bg-white data-[current]:text-black p-3 text-xl w-full rounded-2xl`}
class="flex items-center gap-2 text-white data-[current]:bg-white data-[current]:text-black p-3 text-xl w-full rounded-2xl"
>
{<Emoji class="w-6 h-6" name={m.emoji} />} {m.name}
</a>
<Emoji class="w-6 h-6" name={m.emoji} /> {m.name}
</Link>
);
})}
</nav>

5
routes/articles/index.tsx
View File

@ -8,6 +8,7 @@ import { RedirectSearchHandler } from "@islands/Search.tsx";
import { parseResourceUrl, searchResource } from "@lib/search.ts";
import { GenericResource } from "@lib/types.ts";
import { ResourceCard } from "@components/Card.tsx";
import { Link } from "@islands/Link.tsx";
export const handler: Handlers<
{ articles: Article[] | null; searchResults?: GenericResource[] }
@ -35,13 +36,13 @@ export default function Greet(
searchResults={searchResults}
>
<header class="flex gap-4 items-center mb-5 md:hidden">
<a
<Link
class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
href="/"
>
<IconArrowLeft class="w-5 h-5" />
Back
</a>
</Link>
<h3 class="text-2xl text-white font-light">📝 Articles</h3>
</header>