mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-07-09 03:04:20 -04:00
wip: Vite switch
This commit is contained in:
Zoe Roux
parent
d21e33df32
commit
4ccf52ade8
@ -2,7 +2,9 @@
|
||||
"name": "web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"sideEffects": ["./src/polyfill.ts"],
|
||||
"sideEffects": [
|
||||
"./src/polyfill.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
@ -18,6 +20,7 @@
|
||||
"@radix-ui/react-select": "^2.0.0",
|
||||
"@tanstack/react-query": "^5.17.19",
|
||||
"@tanstack/react-query-devtools": "^5.17.21",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"array-shuffle": "^3.0.0",
|
||||
"expo-image-picker": "~14.7.1",
|
||||
"expo-linear-gradient": "^12.7.1",
|
||||
@ -39,6 +42,10 @@
|
||||
"srt-webvtt": "zoriya/srt-webvtt#build",
|
||||
"superjson": "^2.2.1",
|
||||
"sweetalert2": "^11.10.4",
|
||||
"vike": "^0.4.171",
|
||||
"vike-react": "^0.4.8",
|
||||
"vike-react-query": "^0.0.5",
|
||||
"vite": "^5.2.11",
|
||||
"yoshiki": "1.2.14",
|
||||
"zod": "^3.22.4"
|
||||
},
|
||||
|
||||
15
front/apps/web/src/pages/+Head.tsx
Normal file
15
front/apps/web/src/pages/+Head.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import "./style.css"
|
||||
|
||||
export default function Head() {
|
||||
return (
|
||||
<>
|
||||
<meta name="description" content="A portable and vast media library solution." />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
110
front/apps/web/src/pages/+Layout.tsx
Normal file
110
front/apps/web/src/pages/+Layout.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
import { PortalProvider } from "@gorhom/portal";
|
||||
import { AccountProvider, useUserTheme } from "@kyoo/models";
|
||||
import {
|
||||
HiddenIfNoJs,
|
||||
SkeletonCss,
|
||||
SnackbarProvider,
|
||||
ThemeSelector,
|
||||
Tooltip,
|
||||
TouchOnlyCss,
|
||||
} from "@kyoo/primitives";
|
||||
import { WebTooltip } from "@kyoo/primitives/src/tooltip.web";
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
import type { ReactNode } from "react";
|
||||
import { useMobileHover, useTheme } from "yoshiki";
|
||||
import "~/polyfill";
|
||||
|
||||
// const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" });
|
||||
|
||||
// const WithLayout = ({ Component, ...props }: { Component: ComponentType }) => {
|
||||
// const layoutInfo = (Component as QueryPage).getLayout ?? (({ page }) => page);
|
||||
// const { Layout, props: layoutProps } =
|
||||
// typeof layoutInfo === "function" ? { Layout: layoutInfo, props: {} } : layoutInfo;
|
||||
// return <Layout page={<Component {...props} />} randomItems={[]} {...layoutProps} />;
|
||||
// };
|
||||
const GlobalCssTheme = () => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
<style jsx global>{`
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow: "hidden";
|
||||
background-color: ${theme.background};
|
||||
{/* font-family: ${font.style.fontFamily}; */}
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #999;
|
||||
border-radius: 90px;
|
||||
}
|
||||
*:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(134, 127, 127);
|
||||
}
|
||||
|
||||
#__next {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.infinite-scroll-component__outerdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::cue {
|
||||
background-color: transparent;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
}
|
||||
`}</style>
|
||||
<WebTooltip theme={theme} />
|
||||
<SkeletonCss />
|
||||
<TouchOnlyCss />
|
||||
<HiddenIfNoJs />
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default function Layout({ children }: { children: ReactNode }) {
|
||||
// TODO: theme ssr
|
||||
const userTheme = useUserTheme(undefined);
|
||||
|
||||
useMobileHover();
|
||||
|
||||
// TODO: ssr account/error
|
||||
return (
|
||||
<>
|
||||
<AccountProvider ssrAccount={undefined} ssrError={undefined}>
|
||||
<ThemeSelector theme={userTheme} font={{ normal: "inherit" }}>
|
||||
<PortalProvider>
|
||||
<SnackbarProvider>
|
||||
<GlobalCssTheme />
|
||||
{children}
|
||||
{/* <ConnectionErrorVerifier skipErrors={(Component as QueryPage).isPublic}>
|
||||
<WithLayout
|
||||
Component={children}
|
||||
randomItems={
|
||||
randomItems[Component.displayName!] ??
|
||||
arrayShuffle((Component as QueryPage).randomItems ?? [])
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
</ConnectionErrorVerifier> */}
|
||||
<Tooltip id="tooltip" positionStrategy={"fixed"} />
|
||||
</SnackbarProvider>
|
||||
</PortalProvider>
|
||||
</ThemeSelector>
|
||||
</AccountProvider>
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
11
front/apps/web/src/pages/+config.ts
Normal file
11
front/apps/web/src/pages/+config.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import type { Config } from "vike/types";
|
||||
import logoUrl from "~/public/icon.svg";
|
||||
import vikeReact from "vike-react/config";
|
||||
import vikeReactQuery from "vike-react-query/config";
|
||||
|
||||
export default {
|
||||
ssr: true,
|
||||
title: "Kyoo",
|
||||
favicon: logoUrl,
|
||||
extends: [vikeReact, vikeReactQuery],
|
||||
} satisfies Config;
|
||||
@ -57,61 +57,6 @@ import superjson from "superjson";
|
||||
import { StyleRegistryProvider, useMobileHover, useStyleRegistry, useTheme } from "yoshiki/web";
|
||||
import { withTranslations } from "../i18n";
|
||||
|
||||
const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" });
|
||||
|
||||
const GlobalCssTheme = () => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
<style jsx global>{`
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow: "hidden";
|
||||
background-color: ${theme.background};
|
||||
font-family: ${font.style.fontFamily};
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #999;
|
||||
border-radius: 90px;
|
||||
}
|
||||
*:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(134, 127, 127);
|
||||
}
|
||||
|
||||
#__next {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.infinite-scroll-component__outerdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::cue {
|
||||
background-color: transparent;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
}
|
||||
`}</style>
|
||||
<WebTooltip theme={theme} />
|
||||
<SkeletonCss />
|
||||
<TouchOnlyCss />
|
||||
<HiddenIfNoJs />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const YoshikiDebug = ({ children }: { children: JSX.Element }) => {
|
||||
if (typeof window === "undefined") return children;
|
||||
const registry = useStyleRegistry();
|
||||
|
||||
@ -22,56 +22,10 @@ import { type DocumentContext, Head, Html, Main, NextScript } from "next/documen
|
||||
import { AppRegistry } from "react-native";
|
||||
import { StyleRegistryProvider, createStyleRegistry } from "yoshiki/web";
|
||||
|
||||
export const style = `
|
||||
/**
|
||||
* Building on the RNWeb reset:
|
||||
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
|
||||
*/
|
||||
html, body, #__next {
|
||||
width: 100%;
|
||||
/* To smooth any scrolling behavior */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/* Allows content to fill the viewport and go beyond the bottom */
|
||||
min-height: 100%;
|
||||
}
|
||||
#__next {
|
||||
flex-shrink: 0;
|
||||
flex-basis: auto;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
/* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
/* Allows you to scroll below the viewport; default value is visible */
|
||||
overflow-y: auto;
|
||||
overscroll-behavior-y: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
`;
|
||||
|
||||
const Document = () => {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<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" />
|
||||
</Head>
|
||||
<body className="hoverEnabled">
|
||||
<Main />
|
||||
|
||||
39
front/apps/web/src/pages/style.css
Normal file
39
front/apps/web/src/pages/style.css
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Building on the RNWeb reset:
|
||||
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
|
||||
*/
|
||||
html, body, #__next {
|
||||
width: 100%;
|
||||
/* To smooth any scrolling behavior */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/* Allows content to fill the viewport and go beyond the bottom */
|
||||
min-height: 100%;
|
||||
}
|
||||
#__next {
|
||||
flex-shrink: 0;
|
||||
flex-basis: auto;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
/* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
/* Allows you to scroll below the viewport; default value is visible */
|
||||
overflow-y: auto;
|
||||
overscroll-behavior-y: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
@ -14,11 +14,12 @@
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"types": ["vite/client"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
7
front/apps/web/vite.config.ts
Normal file
7
front/apps/web/vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import react from "@vitejs/plugin-react";
|
||||
import vike from "vike/plugin";
|
||||
import type { UserConfig } from "vite";
|
||||
|
||||
export default {
|
||||
plugins: [react(), vike()],
|
||||
} satisfies UserConfig;
|
||||
@ -14,7 +14,10 @@
|
||||
"format": "biome format .",
|
||||
"format:fix": "biome format . --write"
|
||||
},
|
||||
"workspaces": ["apps/*", "packages/*"],
|
||||
"workspaces": [
|
||||
"apps/*",
|
||||
"packages/*"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.7.3",
|
||||
"typescript": "5.3.3"
|
||||
|
||||
1947
front/yarn.lock
1947
front/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user