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

feat: inline critical css

Browse Source
This commit is contained in:
max_richter 2023-08-08 11:18:54 +02:00
parent 899f5bca85
commit 6123956f08
5 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
islands/KMenu.tsx
View File

@ -4,6 +4,7 @@ import { useEventListener } from "@lib/hooks/useEventListener.ts";
import { menus } from "@islands/KMenu/commands.ts"; import { menus } from "@islands/KMenu/commands.ts";
import { MenuEntry } from "@islands/KMenu/types.ts"; import { MenuEntry } from "@islands/KMenu/types.ts";
import * as icons from "@components/icons.tsx"; import * as icons from "@components/icons.tsx";
import { IS_BROWSER } from "$fresh/runtime.ts";
const KMenuEntry = ( const KMenuEntry = (
{ entry, activeIndex, index }: { { entry, activeIndex, index }: {
entry: MenuEntry; entry: MenuEntry;
@ -150,7 +151,7 @@ export const KMenu = (
} else { } else {
input.current?.blur(); input.current?.blur();
} }
}, typeof document !== "undefined" ? document?.body : undefined); }, IS_BROWSER ? document?.body : undefined);
return ( return (
<div <div

8
islands/Search.tsx
View File

@ -2,14 +2,10 @@ import { useEffect, useRef, useState } from "preact/hooks";
import useDebouncedCallback from "@lib/hooks/useDebouncedCallback.ts"; import useDebouncedCallback from "@lib/hooks/useDebouncedCallback.ts";
import { IconGhost, IconLoader2, IconSearch } from "@components/icons.tsx"; import { IconGhost, IconLoader2, IconSearch } from "@components/icons.tsx";
import { useEventListener } from "@lib/hooks/useEventListener.ts"; import { useEventListener } from "@lib/hooks/useEventListener.ts";
import { SearchResponse } from "https://raw.githubusercontent.com/bradenmacdonald/typesense-deno/main/src/Typesense/Documents.ts";
import { Recipe } from "@lib/resource/recipes.ts";
import { Movie } from "@lib/resource/movies.ts";
import { Article } from "@lib/resource/articles.ts";
import { useTraceUpdate } from "@lib/hooks/useTraceProps.ts";
import { SearchResult } from "@lib/types.ts"; import { SearchResult } from "@lib/types.ts";
import { resources } from "@lib/resources.ts"; import { resources } from "@lib/resources.ts";
import { isLocalImage } from "@lib/string.ts"; import { isLocalImage } from "@lib/string.ts";
import { IS_BROWSER } from "$fresh/runtime.ts";
export const RedirectSearchHandler = () => { export const RedirectSearchHandler = () => {
useEventListener("keydown", (e: KeyboardEvent) => { useEventListener("keydown", (e: KeyboardEvent) => {
@ -20,7 +16,7 @@ export const RedirectSearchHandler = () => {
) { ) {
window.location.href += "?q="; window.location.href += "?q=";
} }
}, typeof document !== "undefined" ? document?.body : undefined); }, IS_BROWSER ? document?.body : undefined);
return <></>; return <></>;
}; };

35
routes/_app.tsx
View File

@ -7,6 +7,41 @@ export default function App({ Component }: AppProps) {
<Head> <Head>
<link href="/global.css" rel="stylesheet" /> <link href="/global.css" rel="stylesheet" />
<link href="/prism-material-dark.css" rel="stylesheet" /> <link href="/prism-material-dark.css" rel="stylesheet" />
<style>
{`
/* work-sans-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: url('/fonts/work-sans-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* work-sans-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
src: url('/fonts/work-sans-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
body {
background: #141218;
padding: 0px 20px;
}
pre {
font-family:Work Sans;
}
a {
color: cadetblue;
font-family: Work Sans;
}
`}
</style>
</Head> </Head>
<Component /> <Component />
</> </>

2
routes/series/index.tsx
View File

@ -28,7 +28,7 @@ export default function Greet(props: PageProps<Series[] | null>) {
Back Back
</a> </a>
<h3 class="text-2xl text-white font-light">🍿 Movies</h3> <h3 class="text-2xl text-white font-light">🎥 Series</h3>
</header> </header>
<Grid> <Grid>
{props.data?.map((doc) => { {props.data?.map((doc) => {

30
static/global.css
View File

@ -1,33 +1,3 @@
/* work-sans-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: url('/fonts/work-sans-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* work-sans-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
src: url('/fonts/work-sans-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
body {
background: #141218;
padding: 0px 20px;
}
pre {
font-family:Work Sans;
}
a {
color: cadetblue;
font-family: Work Sans;
}
.custom-grid { .custom-grid {
grid-template-columns: repeat(auto-fit, minmax(37vw, 1fr)) ; grid-template-columns: repeat(auto-fit, minmax(37vw, 1fr)) ;