diff --git a/bun.lockb b/bun.lockb index aaf0863..542a645 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 41328d6..cd1c6c3 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,14 @@ "lint": "next lint" }, "dependencies": { + "@emotion/cache": "^11.13.1", + "@emotion/react": "^11.13.0", + "@emotion/server": "^11.11.0", + "@emotion/styled": "^11.13.0", + "@mui/material": "^5.16.5", + "next": "14.2.5", "react": "^18", - "react-dom": "^18", - "next": "14.2.5" + "react-dom": "^18" }, "devDependencies": { "@tauri-apps/cli": "^1.6.0", diff --git a/public/fonts/ComicSans/comic.ttf b/public/fonts/ComicSans/comic.ttf new file mode 100755 index 0000000..2d8e9ca Binary files /dev/null and b/public/fonts/ComicSans/comic.ttf differ diff --git a/public/fonts/ComicSans/comicbd.ttf b/public/fonts/ComicSans/comicbd.ttf new file mode 100755 index 0000000..59f77d5 Binary files /dev/null and b/public/fonts/ComicSans/comicbd.ttf differ diff --git a/public/fonts/ComicSans/comici.ttf b/public/fonts/ComicSans/comici.ttf new file mode 100755 index 0000000..49a4069 Binary files /dev/null and b/public/fonts/ComicSans/comici.ttf differ diff --git a/public/fonts/ComicSans/comicz.ttf b/public/fonts/ComicSans/comicz.ttf new file mode 100755 index 0000000..f451961 Binary files /dev/null and b/public/fonts/ComicSans/comicz.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-Black.ttf b/public/fonts/GoogleSans/GoogleSans-Black.ttf new file mode 100755 index 0000000..00f6c92 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-Black.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-BlackItalic.ttf b/public/fonts/GoogleSans/GoogleSans-BlackItalic.ttf new file mode 100755 index 0000000..4c08aef Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-BlackItalic.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-Bold.ttf b/public/fonts/GoogleSans/GoogleSans-Bold.ttf new file mode 100755 index 0000000..00f6c92 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-Bold.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-BoldItalic.ttf b/public/fonts/GoogleSans/GoogleSans-BoldItalic.ttf new file mode 100755 index 0000000..4c08aef Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-BoldItalic.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-Italic.ttf b/public/fonts/GoogleSans/GoogleSans-Italic.ttf new file mode 100755 index 0000000..3a717e8 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-Italic.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-Light.ttf b/public/fonts/GoogleSans/GoogleSans-Light.ttf new file mode 100755 index 0000000..74ed08d Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-Light.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-LightItalic.ttf b/public/fonts/GoogleSans/GoogleSans-LightItalic.ttf new file mode 100755 index 0000000..3a717e8 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-LightItalic.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-Medium.ttf b/public/fonts/GoogleSans/GoogleSans-Medium.ttf new file mode 100755 index 0000000..cb96477 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-Medium.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-MediumItalic.ttf b/public/fonts/GoogleSans/GoogleSans-MediumItalic.ttf new file mode 100755 index 0000000..47067ae Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-MediumItalic.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-Regular.ttf b/public/fonts/GoogleSans/GoogleSans-Regular.ttf new file mode 100755 index 0000000..74ed08d Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-Regular.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-Thin.ttf b/public/fonts/GoogleSans/GoogleSans-Thin.ttf new file mode 100755 index 0000000..74ed08d Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-Thin.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSans-ThinItalic.ttf b/public/fonts/GoogleSans/GoogleSans-ThinItalic.ttf new file mode 100755 index 0000000..3a717e8 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSans-ThinItalic.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSansCondensed-Bold.ttf b/public/fonts/GoogleSans/GoogleSansCondensed-Bold.ttf new file mode 100755 index 0000000..00f6c92 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSansCondensed-Bold.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSansCondensed-BoldItalic.ttf b/public/fonts/GoogleSans/GoogleSansCondensed-BoldItalic.ttf new file mode 100755 index 0000000..4c08aef Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSansCondensed-BoldItalic.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSansCondensed-Italic.ttf b/public/fonts/GoogleSans/GoogleSansCondensed-Italic.ttf new file mode 100755 index 0000000..3a717e8 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSansCondensed-Italic.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSansCondensed-Light.ttf b/public/fonts/GoogleSans/GoogleSansCondensed-Light.ttf new file mode 100755 index 0000000..74ed08d Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSansCondensed-Light.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSansCondensed-LightItalic.ttf b/public/fonts/GoogleSans/GoogleSansCondensed-LightItalic.ttf new file mode 100755 index 0000000..3a717e8 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSansCondensed-LightItalic.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSansCondensed-Medium.ttf b/public/fonts/GoogleSans/GoogleSansCondensed-Medium.ttf new file mode 100755 index 0000000..cb96477 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSansCondensed-Medium.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSansCondensed-MediumItalic.ttf b/public/fonts/GoogleSans/GoogleSansCondensed-MediumItalic.ttf new file mode 100755 index 0000000..47067ae Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSansCondensed-MediumItalic.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSansCondensed-Regular.ttf b/public/fonts/GoogleSans/GoogleSansCondensed-Regular.ttf new file mode 100755 index 0000000..74ed08d Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSansCondensed-Regular.ttf differ diff --git a/public/fonts/GoogleSans/GoogleSansNum-3R.ttf b/public/fonts/GoogleSans/GoogleSansNum-3R.ttf new file mode 100755 index 0000000..00f6c92 Binary files /dev/null and b/public/fonts/GoogleSans/GoogleSansNum-3R.ttf differ diff --git a/public/fonts/GoogleSans/MiLanProVF.ttf b/public/fonts/GoogleSans/MiLanProVF.ttf new file mode 100755 index 0000000..74ed08d Binary files /dev/null and b/public/fonts/GoogleSans/MiLanProVF.ttf differ diff --git a/public/fonts/GoogleSans/RGoogleSansNum-3L.ttf b/public/fonts/GoogleSans/RGoogleSansNum-3L.ttf new file mode 100755 index 0000000..74ed08d Binary files /dev/null and b/public/fonts/GoogleSans/RGoogleSansNum-3L.ttf differ diff --git a/public/fonts/JetBrainsMono/JetBrainsMono-Italic-VariableFont_wght.ttf b/public/fonts/JetBrainsMono/JetBrainsMono-Italic-VariableFont_wght.ttf new file mode 100644 index 0000000..914e323 Binary files /dev/null and b/public/fonts/JetBrainsMono/JetBrainsMono-Italic-VariableFont_wght.ttf differ diff --git a/public/fonts/JetBrainsMono/JetBrainsMono-VariableFont_wght.ttf b/public/fonts/JetBrainsMono/JetBrainsMono-VariableFont_wght.ttf new file mode 100644 index 0000000..d73994a Binary files /dev/null and b/public/fonts/JetBrainsMono/JetBrainsMono-VariableFont_wght.ttf differ diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx new file mode 100644 index 0000000..06a0b73 --- /dev/null +++ b/src/contexts/ThemeContext.tsx @@ -0,0 +1,127 @@ +// TODO: add settings functionality, refer to whensapp project + +import { FC, ReactNode } from "react"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; + +interface UserThemeProviderProps { + children: ReactNode; +} + +// palette and accent settings +export const userPalette = { + primary: { + // light: '#a1c3f9', + main: "#8ab4f8", + // dark: '#4285f4', + }, + secondary: { + // light: '#a1c3f9', + main: "#8ab4f8", + // dark: '#4285f4', + }, + error: { + light: "#e57373", + main: "#f44336", + dark: "#d32f2f", + }, + warning: { + light: "#ffb74d", + main: "#ffa726", + dark: "#f57c00", + }, + info: { + light: "#a1c3f9", + main: "#8ab4f8", + dark: "#4285f4", + }, + success: { + light: "#81c784", + main: "#66bb6a", + dark: "#388e3c", + }, + grey: { + 50: "#fafafa", + 100: "#f5f5f5", + 200: "#eeeeee", + 300: "#e0e0e0", + 400: "#bdbdbd", + 500: "#9e9e9e", + 600: "#757575", + 700: "#616161", + 800: "#424242", + 900: "#212121", + A100: "#f5f5f5", + A200: "#eeeeee", + A400: "#bdbdbd", + A700: "#616161", + }, + background: { + paper: "#303134", + default: "#202124", + }, +}; + +export const UserThemeProvider: FC = ({ children }) => { + // font family settings + // TODO: figure out how to bundle fonts in tauri + let fontFamily = "JetBrains Mono"; + // switch (settings.display.font_family) { + // case "sans_serif": + // fontFamily = "GoogleSans, sans-serif"; + // break; + // case "monospace": + // fontFamily = "JetBrainsMono, monospace"; + // break; + // case "comic_sans": + // fontFamily = "ComicSans, sans-serif"; + // break; + // case "system_font": + // fontFamily = "system-ui"; + // break; + // } + + // font scaling settings + // const fontSize = (settings.display.font_scaling / 100) * 14; + + const userTheme = createTheme({ + typography: { + fontFamily: fontFamily, + // fontSize: fontSize, + }, + palette: { + mode: "dark", + ...userPalette, + }, + transitions: { + duration: { + // shortest: settings.display.transition_duration, + // shorter: settings.display.transition_duration, + // short: settings.display.transition_duration, + // // most basic recommended timing + // standard: settings.display.transition_duration, + // // this is to be used in complex animations + // complex: settings.display.transition_duration, + // // recommended when something is entering screen + // enteringScreen: settings.display.transition_duration, + // // recommended when something is leaving screen + // leavingScreen: settings.display.transition_duration, + }, + }, + components: { + MuiButton: { + styleOverrides: { + root: { textTransform: "none" }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + textTransform: "none", + }, + }, + }, + }, + }); + + return {children}; +}; diff --git a/src/lib/createEmotionCache.ts b/src/lib/createEmotionCache.ts new file mode 100644 index 0000000..f5cefb3 --- /dev/null +++ b/src/lib/createEmotionCache.ts @@ -0,0 +1,19 @@ +import createCache from "@emotion/cache"; + +const isBrowser = typeof document !== "undefined"; + +// On the client side, Create a meta tag at the top of the and set it as insertionPoint. +// This assures that MUI styles are loaded first. +// It allows developers to easily override MUI styles with other styling solutions, like CSS modules. +export default function createEmotionCache() { + let insertionPoint; + + if (isBrowser) { + const emotionInsertionPoint = document.querySelector( + 'meta[name="emotion-insertion-point"]', + ); + insertionPoint = emotionInsertionPoint ?? undefined; + } + + return createCache({ key: "mui-style", insertionPoint }); +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a7a790f..6fb4c69 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,31 @@ -import "@/styles/globals.css"; -import type { AppProps } from "next/app"; +import { CacheProvider, EmotionCache } from "@emotion/react"; +import CssBaseline from "@mui/material/CssBaseline"; +import { AppProps } from "next/app"; +import Head from "next/head"; +import { UserThemeProvider } from "../contexts/ThemeContext"; +import createEmotionCache from "../lib/createEmotionCache"; +import "../styles/global.css"; -export default function App({ Component, pageProps }: AppProps) { - return ; +// Client-side cache, shared for the whole session of the user in the browser. +const clientSideEmotionCache = createEmotionCache(); + +export interface MyAppProps extends AppProps { + emotionCache?: EmotionCache; +} + +export default function MyApp(props: MyAppProps) { + const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; + return ( + + + WhensApp + + + + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} + + + + + ); } diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index b2fff8b..6ab529d 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,9 +1,34 @@ -import { Html, Head, Main, NextScript } from "next/document"; +import createEmotionServer from "@emotion/server/create-instance"; +import { useTheme } from "@mui/material"; +import { AppType } from "next/app"; +import Document, { + DocumentContext, + DocumentProps, + Head, + Html, + Main, + NextScript, +} from "next/document"; +import createEmotionCache from "../lib/createEmotionCache"; +import { MyAppProps } from "./_app"; + +interface MyDocumentProps extends DocumentProps { + emotionStyleTags: JSX.Element[]; +} + +export default function MyDocument({ emotionStyleTags }: MyDocumentProps) { + const theme = useTheme(); -export default function Document() { return ( - - + + + {/* PWA primary color */} + + + + + {emotionStyleTags} +
@@ -11,3 +36,64 @@ export default function Document() { ); } + +// `getInitialProps` belongs to `_document` (instead of `_app`), +// it's compatible with static-site generation (SSG). +MyDocument.getInitialProps = async (ctx: DocumentContext) => { + // Resolution order + // + // On the server: + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. document.getInitialProps + // 4. app.render + // 5. page.render + // 6. document.render + // + // On the server with error: + // 1. document.getInitialProps + // 2. app.render + // 3. page.render + // 4. document.render + // + // On the client + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. app.render + // 4. page.render + + const originalRenderPage = ctx.renderPage; + + // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance. + // However, be aware that it can have global side effects. + const cache = createEmotionCache(); + const { extractCriticalToChunks } = createEmotionServer(cache); + + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: ( + App: React.ComponentType & MyAppProps>, + ) => + function EnhanceApp(props) { + return ; + }, + }); + + const initialProps = await Document.getInitialProps(ctx); + // This is important. It prevents Emotion to render invalid HTML. + // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 + const emotionStyles = extractCriticalToChunks(initialProps.html); + const emotionStyleTags = emotionStyles.styles.map((style) => ( +