Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-08 10:44:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make the web run

Browse Source
This commit is contained in:
Zoe Roux 2025-06-14 17:05:53 +02:00
parent 5e37a946ac
commit 50b6af78f4
No known key found for this signature in database
9 changed files with 75 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
front/app/+html.tsx Normal file
View File

@ -0,0 +1,26 @@
import { ScrollViewStyleReset } from "expo-router/html";
import type { PropsWithChildren } from "react";
export default function Root({ children }: PropsWithChildren) {
// TODO: change this lang attr
return (
<html lang="en-US">
<head>
<title>Kyoo</title>
<meta charSet="utf-8" />
<meta name="description" content="A portable and vast media library solution." />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png" />
<link rel="icon" type="image/png" sizes="64x64" href="/icon-64x64.png" />
<link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png" />
<link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png" />
<ScrollViewStyleReset />
</head>
<body className="hoverEnabled">{children}</body>
</html>
);
}

26
front/app/_layout.tsx
View File

@ -61,35 +61,11 @@ export default function Layout() {
// const registry = createStyleRegistry(); // const registry = createStyleRegistry();
// useServerHeadInsertion(() => registry.flushToComponent()); // useServerHeadInsertion(() => registry.flushToComponent());
// TODO: change this lang attr // <GlobalCssTheme />
return ( return (
<Providers> <Providers>
<Slot /> <Slot />
{Platform.OS === "web" && <ReactQueryDevtools initialIsOpen={false} />} {Platform.OS === "web" && <ReactQueryDevtools initialIsOpen={false} />}
</Providers> </Providers>
); );
// return (
// <html lang="en-US">
// <head>
// <title>Kyoo</title>
// <meta charSet="utf-8" />
// <meta name="description" content="A portable and vast media library solution." />
// <link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png" />
// <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png" />
// <link rel="icon" type="image/png" sizes="64x64" href="/icon-64x64.png" />
// <link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png" />
// <link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png" />
// <GlobalCssTheme />
// </head>
//
// <body className="hoverEnabled">
// <StyleRegistryProvider registry={registry}>
// <Providers>
// <Slot />
// {Platform.OS === "web" && <ReactQueryDevtools initialIsOpen={false} />}
// </Providers>
// </StyleRegistryProvider>
// </body>
// </html>
// );
} }

25
front/src/primitives/links.tsx
View File

@ -1,6 +1,7 @@
import { useLinkTo } from "one"; import { useRouter } from "expo-router";
import { type ReactNode, forwardRef } from "react"; import { type ReactNode, forwardRef } from "react";
import { import {
Linking,
Platform, Platform,
Pressable, Pressable,
type PressableProps, type PressableProps,
@ -11,6 +12,28 @@ import {
import { useTheme, useYoshiki } from "yoshiki/native"; import { useTheme, useYoshiki } from "yoshiki/native";
import { alpha } from "./theme"; import { alpha } from "./theme";
function useLinkTo({
href,
replace = false,
}: {
href: string;
replace?: boolean;
}) {
const router = useRouter();
// TODO: add href attr for web
return {
onPress: (e) => {
if (e?.defaultPrevented) return;
if (href.startsWith("http")) {
Platform.OS === "web" ? window.open(href, "_blank") : Linking.openURL(href);
} else {
replace ? router.replace(href) : router.push(href);
}
},
} satisfies PressableProps;
}
export const A = ({ export const A = ({
href, href,
replace, replace,

2
front/src/providers/settings.ts
View File

@ -1,7 +1,7 @@
import { getServerData } from "one";
import { Platform } from "react-native"; import { Platform } from "react-native";
import { MMKV, useMMKVString } from "react-native-mmkv"; import { MMKV, useMMKVString } from "react-native-mmkv";
import type { ZodTypeAny, z } from "zod"; import type { ZodTypeAny, z } from "zod";
import { getServerData } from "~/utils";
export const storage = new MMKV(); export const storage = new MMKV();

28
front/src/providers/translations.compile.ts
View File

@ -1,18 +1,22 @@
// this file is run at compile time thanks to a vite plugin // this file is run at compile time thanks to a vite plugin
import { readFile, readdir } from "node:fs/promises"; // import { readFile, readdir } from "node:fs/promises";
import type { Resource } from "i18next"; // import type { Resource } from "i18next";
const translationDir = new URL("../../public/translations/", import.meta.url); // const translationDir = new URL("../../public/translations/", import.meta.url);
const langs = await readdir(translationDir); // const langs = await readdir(translationDir);
export const resources: Resource = Object.fromEntries( // export const resources: Resource = Object.fromEntries(
await Promise.all( // await Promise.all(
langs.map(async (x) => [ // langs.map(async (x) => [
x.replace(".json", ""), // x.replace(".json", ""),
{ translation: JSON.parse(await readFile(new URL(x, translationDir), "utf8")) }, // { translation: JSON.parse(await readFile(new URL(x, translationDir), "utf8")) },
]), // ]),
), // ),
); // );
import en from "../../public/translations/en.json";
export const resources = { en };
export const supportedLanguages = Object.keys(resources); export const supportedLanguages = Object.keys(resources);

2
front/src/providers/translations.native.tsx
View File

@ -2,7 +2,7 @@ import i18next from "i18next";
import { type ReactNode, useMemo } from "react"; import { type ReactNode, useMemo } from "react";
import { I18nextProvider } from "react-i18next"; import { I18nextProvider } from "react-i18next";
import { resources, supportedLanguages } from "./translations.compile"; import { resources, supportedLanguages } from "./translations.compile";
import { setServerData } from "one"; import { setServerData } from "~/utils";
export const TranslationsProvider = ({ children }: { children: ReactNode }) => { export const TranslationsProvider = ({ children }: { children: ReactNode }) => {
const val = useMemo(() => { const val = useMemo(() => {

2
front/src/providers/translations.web.client.tsx
View File

@ -1,9 +1,9 @@
import i18next from "i18next"; import i18next from "i18next";
import HttpApi, { type HttpBackendOptions } from "i18next-http-backend"; import HttpApi, { type HttpBackendOptions } from "i18next-http-backend";
import { getServerData } from "one";
import { type ReactNode, useMemo } from "react"; import { type ReactNode, useMemo } from "react";
import { I18nextProvider } from "react-i18next"; import { I18nextProvider } from "react-i18next";
import { supportedLanguages } from "./translations.compile"; import { supportedLanguages } from "./translations.compile";
import { getServerData } from "~/utils";
export const TranslationsProvider = ({ children }: { children: ReactNode }) => { export const TranslationsProvider = ({ children }: { children: ReactNode }) => {
const val = useMemo(() => { const val = useMemo(() => {

2
front/src/query/query.tsx
View File

@ -1,10 +1,10 @@
import { QueryClient, dehydrate, useInfiniteQuery, useQuery } from "@tanstack/react-query"; import { QueryClient, dehydrate, useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { setServerData } from "one";
import { useContext } from "react"; import { useContext } from "react";
import { Platform } from "react-native"; import { Platform } from "react-native";
import type { z } from "zod"; import type { z } from "zod";
import { type KyooError, type Page, Paged } from "~/models"; import { type KyooError, type Page, Paged } from "~/models";
import { AccountContext } from "~/providers/account-context"; import { AccountContext } from "~/providers/account-context";
import { setServerData } from "~/utils";
const ssrApiUrl = process.env.KYOO_URL ?? "http://back/api"; const ssrApiUrl = process.env.KYOO_URL ?? "http://back/api";

4
front/src/utils.ts Normal file
View File

@ -0,0 +1,4 @@
export function setServerData(key: string, val: any) {}
export function getServerData(key: string) {
return key;
}