update

.eslintrc.cjs

@@ -1,26 +0,0 @@
-// eslint-disable-next-line no-undef
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:prettier/recommended",
-    "plugin:storybook/recommended",
-  ],
-  ignorePatterns: ["dist", "src/gql/*"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh", "prettier"],
-  rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
-    ],
-  },
-};

.gitlab-ci.yml

@@ -1,35 +0,0 @@
-# The Docker image that will be used to build your app
-
-stages:
-  - release
-
-image: node:18.17.1
-# Functions that should be executed before the build script is run
-before_script:
-  - corepack enable
-  - corepack prepare pnpm@latest-8 --activate
-  - pnpm config set store-dir .pnpm-store
-
-release-image:
-  stage: release
-  extends: .release-image
-
-pages:
-  stage: release
-  script:
-    - pnpm install
-    - pnpm build
-    - rm -rf public
-    - mv dist public
-  artifacts:
-    paths:
-      # The folder that contains the files to be exposed at the Page URL
-      - public
-  rules:
-    # This ensures that only pushes to the default branch will trigger
-    # a pages deploy
-    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
-
-include:
-  - project: template/gitlabci-template
-    file: docker.gitlab-ci.yml

.react-router/types/+future.ts

@@ -0,0 +1,9 @@
+// Generated by React Router
+
+import "react-router";
+
+declare module "react-router" {
+  interface Future {
+    unstable_middleware: false
+  }
+}

.react-router/types/+routes.ts

@@ -0,0 +1,47 @@
+// Generated by React Router
+
+import "react-router"
+
+declare module "react-router" {
+  interface Register {
+    pages: Pages
+    routeFiles: RouteFiles
+  }
+}
+
+type Pages = {
+  "/": {
+    params: {};
+  };
+  "/settings": {
+    params: {};
+  };
+  "/paragraph/:id": {
+    params: {
+      "id": string;
+    };
+  };
+};
+
+type RouteFiles = {
+  "root.tsx": {
+    id: "root";
+    page: "/" | "/settings" | "/paragraph/:id";
+  };
+  "./layouts/Main.layout.tsx": {
+    id: "layouts/Main.layout";
+    page: "/" | "/settings" | "/paragraph/:id";
+  };
+  "./pages/Search.page.tsx": {
+    id: "pages/Search.page";
+    page: "/";
+  };
+  "./pages/Settings.page.tsx": {
+    id: "pages/Settings.page";
+    page: "/settings";
+  };
+  "./pages/Paragraph.page.tsx": {
+    id: "pages/Paragraph.page";
+    page: "/paragraph/:id";
+  };
+};

.react-router/types/+server-build.d.ts

@@ -0,0 +1,17 @@
+// Generated by React Router
+
+declare module "virtual:react-router/server-build" {
+  import { ServerBuild } from "react-router";
+  export const assets: ServerBuild["assets"];
+  export const assetsBuildDirectory: ServerBuild["assetsBuildDirectory"];
+  export const basename: ServerBuild["basename"];
+  export const entry: ServerBuild["entry"];
+  export const future: ServerBuild["future"];
+  export const isSpaMode: ServerBuild["isSpaMode"];
+  export const prerender: ServerBuild["prerender"];
+  export const publicPath: ServerBuild["publicPath"];
+  export const routeDiscovery: ServerBuild["routeDiscovery"];
+  export const routes: ServerBuild["routes"];
+  export const ssr: ServerBuild["ssr"];
+  export const unstable_getCriticalCss: ServerBuild["unstable_getCriticalCss"];
+}

.react-router/types/app/+types/root.ts

@@ -0,0 +1,59 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../root.js")
+
+type Info = GetInfo<{
+  file: "root.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../root.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // unstable_middleware
+  export type unstable_MiddlewareFunction = Annotations["unstable_MiddlewareFunction"];
+
+  // unstable_clientMiddleware
+  export type unstable_ClientMiddlewareFunction = Annotations["unstable_ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

.react-router/types/app/layouts/+types/Main.layout.ts

@@ -0,0 +1,62 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../Main.layout.js")
+
+type Info = GetInfo<{
+  file: "./layouts/Main.layout.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../root.js");
+}, {
+  id: "layouts/Main.layout";
+  module: typeof import("../Main.layout.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // unstable_middleware
+  export type unstable_MiddlewareFunction = Annotations["unstable_MiddlewareFunction"];
+
+  // unstable_clientMiddleware
+  export type unstable_ClientMiddlewareFunction = Annotations["unstable_ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

.react-router/types/app/pages/+types/Paragraph.page.ts

@@ -0,0 +1,65 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../Paragraph.page.js")
+
+type Info = GetInfo<{
+  file: "./pages/Paragraph.page.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../root.js");
+}, {
+  id: "layouts/Main.layout";
+  module: typeof import("../../layouts/Main.layout.js");
+}, {
+  id: "pages/Paragraph.page";
+  module: typeof import("../Paragraph.page.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // unstable_middleware
+  export type unstable_MiddlewareFunction = Annotations["unstable_MiddlewareFunction"];
+
+  // unstable_clientMiddleware
+  export type unstable_ClientMiddlewareFunction = Annotations["unstable_ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

.react-router/types/app/pages/+types/Search.page.ts

@@ -0,0 +1,65 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../Search.page.js")
+
+type Info = GetInfo<{
+  file: "./pages/Search.page.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../root.js");
+}, {
+  id: "layouts/Main.layout";
+  module: typeof import("../../layouts/Main.layout.js");
+}, {
+  id: "pages/Search.page";
+  module: typeof import("../Search.page.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // unstable_middleware
+  export type unstable_MiddlewareFunction = Annotations["unstable_MiddlewareFunction"];
+
+  // unstable_clientMiddleware
+  export type unstable_ClientMiddlewareFunction = Annotations["unstable_ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

.react-router/types/app/pages/+types/Settings.page.ts

@@ -0,0 +1,65 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../Settings.page.js")
+
+type Info = GetInfo<{
+  file: "./pages/Settings.page.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../root.js");
+}, {
+  id: "layouts/Main.layout";
+  module: typeof import("../../layouts/Main.layout.js");
+}, {
+  id: "pages/Settings.page";
+  module: typeof import("../Settings.page.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // unstable_middleware
+  export type unstable_MiddlewareFunction = Annotations["unstable_MiddlewareFunction"];
+
+  // unstable_clientMiddleware
+  export type unstable_ClientMiddlewareFunction = Annotations["unstable_ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

.storybook/DocsContainer.tsx

@@ -1,18 +0,0 @@
-import { DocsContainer as BaseContainer } from "@storybook/blocks";
-
-import { themes } from "@storybook/theming";
-import React from "react";
-import { useDarkMode } from "storybook-dark-mode";
-
-export const DocsContainer = ({ children, context }) => {
-  const dark = useDarkMode();
-
-  return (
-    <BaseContainer
-      context={context}
-      theme={dark ? themes.dark : themes.light}
-    >
-      {children}
-    </BaseContainer>
-  );
-};

.storybook/main.ts

@@ -1,20 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "storybook-dark-mode",
-    "storybook-react-i18next"
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;

.storybook/preview-head.html

@@ -1,3 +0,0 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;400&display=swap" rel="stylesheet">

.storybook/preview.tsx

@@ -1,50 +0,0 @@
-import { Container, MantineProvider } from "@mantine/core";
-import '@mantine/core/styles.css';
-import type { Preview } from "@storybook/react";
-import { useDarkMode } from 'storybook-dark-mode';
-
-
-import i18n from "../src/i18n";
-
-import React, { Fragment } from "react";
-import { DocsContainer } from "./DocsContainer";
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-    docs: {
-      container: DocsContainer,
-    },
-    i18n
-  },
-  globals: {
-    locale: 'en',
-    locales: {
-        en: 'English',
-        zh: '中文',
-    },
-  },
-  decorators: [
-    (Story, runtime) => {
-      const isDark = useDarkMode();
-
-      const C = runtime.parameters.layout === 'fullscreen' ? Fragment : Container;
-      
-      return <MantineProvider withCssVariables forceColorScheme={
-        isDark ? 'dark' : 'light'
-      }>
-        <C>
-          <Story />
-        </C>
-      </MantineProvider>
-    },
-  ]
-};
-
-export default preview;

Dockerfile

@@ -1,27 +0,0 @@
-FROM node:18-alpine AS base
-
-RUN corepack enable &&\
-    corepack prepare pnpm@latest-8 --activate
-
-FROM base AS deps
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm install
-
-FROM base AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-RUN pnpm build
-
-FROM nginx:1.21-alpine AS runner
-
-COPY default.conf /etc/nginx/conf.d/default.conf
-COPY --from=builder /app/dist /static
-
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]

app/component/Header/Header.tsx

@@ -1,4 +1,5 @@
-import { Dispatch, SetStateAction, createContext } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { createContext } from "react";
 
 export const TitleContext = createContext<
   [string, Dispatch<SetStateAction<string>>]

app/component/Hits/Hits.module.css

@@ -1,7 +1,17 @@
 .img-wrapper{
-  column-count: 3;
+  column-count: 1;
   column-gap: 10px;
 
+  @media screen and (min-width: 500px) {
+    column-count: 2;
+  }
+  @media screen and (min-width: 720px) {
+    column-count: 3;
+  }
+  @media screen and (min-width: 1100px) {
+    column-count: 5;
+  }
+  
   counter-reset: count;
   margin: 0 auto;
   

app/component/Hits/Hits.tsx

@@ -1,6 +1,10 @@
 import { Box } from "@mantine/core";
-import { useHits, UseHitsProps } from "react-instantsearch";
+
+import type { UseHitsProps } from "react-instantsearch";
+import { useHits } from "react-instantsearch";
+
 import { ParagraphCard } from "../ParagraphCard/ParagraphCard";
+
 import styles from "./Hits.module.css";
 
 export default function Hits(props: UseHitsProps<Paragraph>) {

app/component/Pagination/Pagination.tsx

@@ -1,5 +1,7 @@
 import { Center, Group, Pagination as MantinePagination } from "@mantine/core";
-import { usePagination, UsePaginationProps } from "react-instantsearch";
+
+import type { UsePaginationProps } from "react-instantsearch";
+import { usePagination } from "react-instantsearch";
 
 export default function Pagination(props: UsePaginationProps) {
   const { currentRefinement, nbPages, refine } = usePagination(props);

app/component/ParagraphCard/ParagraphCard.tsx

@@ -1,9 +1,11 @@
-import { useContextFix } from "@/hooks/useContentFix";
 import { Badge, Card, Group, Image, Text } from "@mantine/core";
+
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { Link } from "react-router-dom";
 
+import { useContentFix } from "@/hooks/useContentFix";
+
 dayjs.extend(relativeTime);
 
 export function ParagraphCard({
@@ -15,7 +17,7 @@ export function ParagraphCard({
   id,
 }: Paragraph) {
   const url = `/paragraph/${id}`;
-  cover = useContextFix(cover) ?? "";
+  cover = useContentFix(cover) ?? "";
 
   return (
     <Card withBorder radius="md" padding="lg" shadow="sm">

app/component/Refinement/Refinement.tsx

@@ -1,22 +1,27 @@
-import { SourceLabelMap } from "@/constants";
+import { useEffect } from "react";
+
+import type {
+  ComboboxItem,
+  ComboboxLikeRenderOptionInput,
+} from "@mantine/core";
 import {
   Badge,
   Box,
   CheckIcon,
-  ComboboxItem,
-  ComboboxLikeRenderOptionInput,
   Group,
   MultiSelect,
-  rem,
   Select,
+  rem,
 } from "@mantine/core";
-import { useEffect } from "react";
+
 import {
   useHitsPerPage,
   useRefinementList,
   useSortBy,
 } from "react-instantsearch";
 
+import { SourceLabelMap } from "@/constants";
+
 const sortItems = [
   { value: "paragraph:time:desc", label: "Newest" },
   { value: "paragraph:time:asc", label: "Oldest" },

app/component/ScrollTop/ScrollTop.tsx

@@ -1,6 +1,6 @@
-import { Affix, Button, rem, Transition } from "@mantine/core";
+import { Affix, Button, Transition, rem } from "@mantine/core";
 import { useWindowScroll } from "@mantine/hooks";
-import { IconArrowUp } from "@tabler/icons-react";
+import { TbArrowUp } from "react-icons/tb";
 
 export default function ScrollTop() {
   const [scroll, scrollTo] = useWindowScroll();
@@ -11,7 +11,7 @@ export default function ScrollTop() {
         {(transitionStyles) => (
           <Button
             leftSection={
-              <IconArrowUp style={{ width: rem(16), height: rem(16) }} />
+              <TbArrowUp style={{ width: rem(16), height: rem(16) }} />
             }
             style={transitionStyles}
             onClick={() => scrollTo({ y: 0 })}

app/component/SearchBox/SearchBox.tsx

@@ -1,7 +1,10 @@
-import { rem, TextInput } from "@mantine/core";
-import { IconSearch } from "@tabler/icons-react";
 import { useCallback, useState } from "react";
-import { useSearchBox, UseSearchBoxProps } from "react-instantsearch";
+
+import { TextInput, rem } from "@mantine/core";
+import { TbSearch } from "react-icons/tb";
+
+import type { UseSearchBoxProps } from "react-instantsearch";
+import { useSearchBox } from "react-instantsearch";
 
 export default function SearchBox(props: UseSearchBoxProps) {
   const { query, refine } = useSearchBox(props);
@@ -29,12 +32,7 @@ export default function SearchBox(props: UseSearchBoxProps) {
         autoCapitalize="off"
         spellCheck="false"
         type="search"
-        leftSection={
+        leftSection={<TbSearch style={{ width: rem(16), height: rem(16) }} />}
-          <IconSearch
-            style={{ width: rem(16), height: rem(16) }}
-            stroke={1.5}
-          />
-        }
         value={inputValue}
         onChange={(event) => setQuery(event.currentTarget.value)}
       />

app/component/Settings/Theme.tsx

@@ -4,7 +4,7 @@ import {
   SegmentedControl,
   useMantineColorScheme,
 } from "@mantine/core";
-import { IconMoon, IconRobot, IconSun } from "@tabler/icons-react";
+import { TbMoon, TbRobot, TbSun } from "react-icons/tb";
 
 export function ThemeSetting() {
   const { colorScheme, setColorScheme } = useMantineColorScheme();
@@ -18,7 +18,7 @@ export function ThemeSetting() {
           value: "light",
           label: (
             <Center>
-              <IconSun size="1rem" stroke={1.5} />
+              <TbSun size="1rem" />
               <Box ml={10}>Light</Box>
             </Center>
           ),
@@ -27,7 +27,7 @@ export function ThemeSetting() {
           value: "auto",
           label: (
             <Center>
-              <IconRobot size="1rem" stroke={1.5} />
+              <TbRobot size="1rem" />
               <Box ml={10}>Auto</Box>
             </Center>
           ),
@@ -36,7 +36,7 @@ export function ThemeSetting() {
           value: "dark",
           label: (
             <Center>
-              <IconMoon size="1rem" stroke={1.5} />
+              <TbMoon size="1rem" />
               <Box ml={10}>Dark</Box>
             </Center>
           ),

app/entry.client.tsx

@@ -0,0 +1,14 @@
+import { StrictMode, startTransition } from "react";
+
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+
+import "./main.css";
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>,
+  );
+});

app/entry.server.tsx

@@ -0,0 +1,71 @@
+import { PassThrough } from "node:stream";
+
+import type { AppLoadContext, EntryContext } from "react-router";
+import { ServerRouter } from "react-router";
+
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { isbot } from "isbot";
+import type { RenderToPipeableStreamOptions } from "react-dom/server";
+import { renderToPipeableStream } from "react-dom/server";
+
+export const streamTimeout = 5_000;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  _loadContext: AppLoadContext,
+  // If you have middleware enabled:
+  // loadContext: unstable_RouterContextProvider
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const userAgent = request.headers.get("user-agent");
+
+    // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+    const readyOption: keyof RenderToPipeableStreamOptions =
+      (userAgent && isbot(userAgent)) || routerContext.isSpaMode
+        ? "onAllReady"
+        : "onShellReady";
+
+    const { pipe, abort } = renderToPipeableStream(
+      <ServerRouter context={routerContext} url={request.url} />,
+      {
+        [readyOption]() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            }),
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      },
+    );
+
+    // Abort the rendering stream after the `streamTimeout` so it has time to
+    // flush down the rejected boundaries
+    setTimeout(abort, streamTimeout + 1000);
+  });
+}

app/hooks/useContentFix.ts

@@ -0,0 +1,9 @@
+import useConfigStore from "@/store/config";
+
+export function useContentFix(content?: string | null) {
+  const s3Url = useConfigStore((store) => store.s3Url);
+  return content?.replace(
+    /https?:\/\/(?:minio-hdd)\.yoshino-s\.(?:online|xyz)\//g,
+    s3Url,
+  );
+}

app/layouts/Main.layout.tsx

@@ -1,34 +1,35 @@
-import SearchBox from "@/component/SearchBox/SearchBox";
+import { Suspense, useEffect, useState } from "react";
+import { Outlet, useLocation } from "react-router";
+
 import {
   AppShell,
   Avatar,
   Center,
   Group,
-  rem,
   UnstyledButton,
+  rem,
 } from "@mantine/core";
-import { Suspense, useEffect, useState } from "react";
-import { Outlet, useLocation } from "react-router";
-
-import ScrollTop from "@/component/ScrollTop/ScrollTop";
-import Loading from "@/page/Loading";
-
 import { useHeadroom } from "@mantine/hooks";
-import { IconSettings } from "@tabler/icons-react";
+import { TbSettings } from "react-icons/tb";
+
+import type {
+  InstantMeiliSearchInstance,
+  MeiliSearch,
+} from "@meilisearch/instant-meilisearch";
+import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
+import { singleIndex } from "instantsearch.js/es/lib/stateMappings";
+import { InstantSearch } from "react-instantsearch";
 import { Link } from "react-router-dom";
 
-import { useAppSelector } from "@/store";
+import ScrollTop from "@/component/ScrollTop/ScrollTop";
-import {
+import SearchBox from "@/component/SearchBox/SearchBox";
-  instantMeiliSearch,
+import Loading from "@/pages/Loading";
-  InstantMeiliSearchInstance,
+import useConfigStore from "@/store/config";
-} from "@meilisearch/instant-meilisearch";
+import { MeilisearchProvider } from "@/utils/meilisearchContext";
-import { InstantSearch } from "react-instantsearch";
-
-import { singleIndex } from "instantsearch.js/es/lib/stateMappings";
 
 export default function MainLayout() {
   const pinned = useHeadroom({ fixedAt: 60 });
-  const selector = useAppSelector((state) => state.options);
+  const selector = useConfigStore();
 
   const path = useLocation().pathname;
 
@@ -36,16 +37,21 @@ export default function MainLayout() {
 
   const [searchClient, setSearchClient] =
     useState<InstantMeiliSearchInstance>();
+  const [meilisearch, setMeilisearch] = useState<MeiliSearch | null>(null);
 
   useEffect(() => {
     const { meilisearchUrl, meilisearchToken, enableHybridSearch } = selector;
-    const { searchClient } = instantMeiliSearch(
+    const { searchClient, meiliSearchInstance } = instantMeiliSearch(
       meilisearchUrl,
       meilisearchToken,
       {
         finitePagination: true,
         meiliSearchParams: {
-          hybrid: enableHybridSearch ? ({} as any) : undefined,
+          hybrid: enableHybridSearch
+            ? {
+                embedder: "cloudflare",
+              }
+            : undefined,
           attributesToRetrieve: [
             "cover",
             "title",
@@ -58,6 +64,7 @@ export default function MainLayout() {
       },
     );
     setSearchClient(searchClient);
+    setMeilisearch(meiliSearchInstance);
   }, [selector, setSearchClient]);
 
   const shell = (
@@ -77,15 +84,20 @@ export default function MainLayout() {
               {isSearchPage && <SearchBox />}
               <UnstyledButton component={Link} to="/settings">
                 <Center>
-                  <IconSettings />
+                  <TbSettings />
                 </Center>
               </UnstyledButton>
             </Group>
           </Group>
         </AppShell.Header>
-        <AppShell.Main pt={`calc(${rem(60)} + var(--mantine-spacing-md))`} pb={rem(60)}>
+        <AppShell.Main
+          pt={`calc(${rem(60)} + var(--mantine-spacing-md))`}
+          pb={rem(60)}
+        >
           <Suspense fallback={<Loading />}>
+            <MeilisearchProvider value={meilisearch}>
               <Outlet />
+            </MeilisearchProvider>
           </Suspense>
         </AppShell.Main>
       </AppShell>
@@ -98,11 +110,14 @@ export default function MainLayout() {
       {searchClient &&
         (isSearchPage ? (
           <InstantSearch
-            searchClient={searchClient!}
+            searchClient={searchClient as any}
             indexName="paragraph"
             routing={{
               stateMapping: singleIndex("paragraph"),
             }}
+            future={{
+              preserveSharedStateOnUnmount: true,
+            }}
           >
             {shell}
           </InstantSearch>

app/main.css

@@ -0,0 +1,7 @@
+@layer mantine-core, mantine-dates, mantine-datatable, mantine-contextmenu, mantine-notifications, mantine-spotlight, mantine-split-pane;
+@import "@mantine/core/styles.css" layer(mantine-core);
+@import "@mantine/dates/styles.css" layer(mantine-dates);
+@import "mantine-datatable/styles.css" layer(mantine-datatable);
+@import "mantine-contextmenu/styles.css" layer(mantine-contextmenu);
+@import "@mantine/notifications/styles.css" layer(mantine-notifications);
+@import "@mantine/spotlight/styles.css" layer(mantine-spotlight);

app/pages/Exception/ErrorPage.tsx

@@ -1,4 +1,5 @@
 import { Button, Container, Group, Text, Title } from "@mantine/core";
+
 import classes from "./ErrorPage.module.css";
 
 export interface ErrorPageProps {

app/pages/Paragraph.page.tsx

@@ -1,4 +1,5 @@
-import { useContextFix } from "@/hooks/useContentFix";
+import { useEffect, useState } from "react";
+
 import {
   Badge,
   Container,
@@ -7,11 +8,13 @@ import {
   Title,
   TypographyStylesProvider,
 } from "@mantine/core";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import { useLoaderData } from "react-router";
 
-import { Link } from "react-router-dom";
+import dayjs from "dayjs";
+import { Link, useParams } from "react-router-dom";
+
+import useConfigStore from "@/store/config";
+import { useMeilisearch } from "@/utils/meilisearchContext";
+import { markdownToHtml } from "@/utils/remark";
 
 function stripStyles(content: string) {
   const element = document.createElement("div");
@@ -51,35 +54,57 @@ function stripStyles(content: string) {
   return element.innerHTML;
 }
 
-dayjs.extend(relativeTime);
-
 export default function ParagraphPage() {
-  const paragraph = useLoaderData() as Paragraph;
+  const { id } = useParams<{ id: string }>();
+  const s3Url = useConfigStore((store) => store.s3Url);
 
-  let content = stripStyles(paragraph.content);
+  const meilisearch = useMeilisearch();
 
-  content = useContextFix(content);
+  const [paragraph, setParagraph] = useState<Paragraph | null>(null);
+
+  useEffect(() => {
+    async function fetchParagraph() {
+      if (!meilisearch || !id) return;
+      const paragraph: Paragraph = await meilisearch
+        .index("paragraph")
+        .getDocument(id);
+
+      if (paragraph.markdown) {
+        paragraph.content = await markdownToHtml(paragraph.content);
+        paragraph.content = stripStyles(paragraph.content)?.replace(
+          /https?:\/\/(?:minio-hdd)\.yoshino-s\.(?:online|xyz)\//g,
+          s3Url,
+        );
+        console.log(paragraph.content);
+      } else {
+        // paragraph.content = "NO HTML!";
+      }
+
+      setParagraph(paragraph);
+    }
+    fetchParagraph();
+  }, [id, meilisearch, s3Url]);
 
   return (
     <Container py="2rem">
-      <Title>{paragraph.title}</Title>
+      <Title>{paragraph?.title}</Title>
       <Group justify="space-between" align="center" my="md">
         <Group>
           <Text size="sm" c="dimmed">
             {" "}
-            {dayjs().to(dayjs(paragraph.time))}
+            {dayjs().to(dayjs(paragraph?.time))}
           </Text>
           <Text
             ml="1rem"
             size="sm"
             component={Link}
-            to={`/author/${encodeURIComponent(paragraph.author || "unknown")}`}
+            to={`/author/${encodeURIComponent(paragraph?.author || "unknown")}`}
           >
-            {paragraph.author}
+            {paragraph?.author}
           </Text>
         </Group>
         <Group>
-          {paragraph.tags.map((tag, index) => (
+          {paragraph?.tags.map((tag, index) => (
             <>
               <Badge
                 size="sm"
@@ -91,8 +116,8 @@ export default function ParagraphPage() {
               </Badge>
             </>
           ))}
-          {paragraph.source_url && (
+          {paragraph?.source_url && (
-            <a href={paragraph.source_url}>Goto Source</a>
+            <a href={paragraph?.source_url}>Goto Source</a>
           )}
         </Group>
       </Group>
@@ -107,7 +132,7 @@ export default function ParagraphPage() {
             lineBreak: "anywhere",
           }}
           dangerouslySetInnerHTML={{
-            __html: content,
+            __html: paragraph?.content ?? "<p>Content not found</p>",
           }}
         />
       </TypographyStylesProvider>

app/pages/Search.page.tsx

@@ -6,7 +6,7 @@ import Refinement from "@/component/Refinement/Refinement";
 
 export default function SearchPage() {
   return (
-    <Container>
+    <Container size="xl">
       <Stack>
         <Refinement />
         <Grid my="md">

app/pages/Settings.page.tsx

@@ -1,28 +1,27 @@
+import type { ReactNode } from "react";
+import { useContext, useEffect, useState } from "react";
+
 import {
   ActionIcon,
   Button,
   Container,
   Paper,
   PasswordInput,
-  rem,
   Switch,
   Table,
   Text,
   TextInput,
-  Title
+  Title,
+  rem,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { ReactNode, useContext, useEffect, useState } from "react";
+import { TbBrandGithub, TbMail } from "react-icons/tb";
+
+import { Meilisearch } from "meilisearch";
 
 import { TitleContext } from "@/component/Header/Header";
 import { ThemeSetting } from "@/component/Settings/Theme";
-import { disableSentry } from "@/sentry";
+import useConfigStore from "@/store/config";
-import store from "@/store";
-import { useOptionsState } from "@/store/module/options";
-import { setEnableHybridSearch, setMeilisearchToken, setMeilisearchUrl, setS3Url } from "@/store/reducer/options";
-import { useLocalStorage } from "@mantine/hooks";
-import { IconBrandGithub, IconMail } from "@tabler/icons-react";
-import { Meilisearch } from "meilisearch";
 
 interface SettingItem {
   title?: ReactNode;
@@ -32,12 +31,13 @@ interface SettingItem {
 
 export default function SettingsPage() {
   const [_, setTitle] = useContext(TitleContext);
-  const { state: options } = useOptionsState();
+  const {
-  const [sentryDisabled, setSentryDisabled] = useLocalStorage({
+    setS3Url,
-    key: "sentryDisabled",
+    setEnableHybridSearch,
-    defaultValue: false,
+    setMeilisearchToken,
-  });
+    setMeilisearchUrl,
-
+    ...options
+  } = useConfigStore();
   useEffect(() => {
     setTitle("Settings");
   }, [setTitle]);
@@ -48,7 +48,9 @@ export default function SettingsPage() {
     validateInputOnChange: true,
   });
 
-  const [meilisearchVersion, setMeilisearchVersion] = useState<string | null>(null);
+  const [meilisearchVersion, setMeilisearchVersion] = useState<string | null>(
+    null,
+  );
 
   const onSubmit = async (v: typeof options) => {
     try {
@@ -77,13 +79,13 @@ export default function SettingsPage() {
     }
 
     if (v.s3Url !== options.s3Url) {
-      store.dispatch(setS3Url(v.s3Url));
+      setS3Url(v.s3Url);
     }
     if (v.meilisearchUrl !== options.meilisearchUrl) {
-      store.dispatch(setMeilisearchUrl(v.meilisearchUrl));
+      setMeilisearchUrl(v.meilisearchUrl);
     }
     if (v.meilisearchToken !== options.meilisearchToken) {
-      store.dispatch(setMeilisearchToken(v.meilisearchToken));
+      setMeilisearchToken(v.meilisearchToken);
     }
   };
 
@@ -94,23 +96,6 @@ export default function SettingsPage() {
         description: "Change the theme of your UI",
         value: <ThemeSetting />,
       },
-      {
-        title: "Disable Sentry",
-        description: "Disable Sentry error reporting (not recommended)",
-        value: (
-          <div>
-            <Switch
-              size="md"
-              checked={sentryDisabled}
-              onChange={(value) => {
-                const v = value.currentTarget.checked;
-                setSentryDisabled(v);
-                disableSentry(v);
-              }}
-            />
-          </div>
-        )
-      },
       {
         title: "Enable Hybrid Search",
         description: "Enable hybrid search for Meilisearch",
@@ -121,12 +106,12 @@ export default function SettingsPage() {
               checked={options.enableHybridSearch}
               onChange={(value) => {
                 const v = value.currentTarget.checked;
-                store.dispatch(setEnableHybridSearch(v));
+                setEnableHybridSearch(v);
               }}
             />
           </div>
-        )
+        ),
-      }
+      },
     ],
     [
       {
@@ -147,37 +132,52 @@ export default function SettingsPage() {
         ),
       },
       {
-        title: (
+        title: <Button type="submit">Test And Save</Button>,
-          <Button type="submit">Test And Save</Button>
+        value: meilisearchVersion ? (
-        ),
+          <span
-        value: (
+            style={{
-          meilisearchVersion ? (
-            <span style={{
               color: "var(--mantine-color-green-6)",
-            }}>Meilisearch V{meilisearchVersion}</span>
+            }}
-          ) : null
+          >
-        )
+            Meilisearch V{meilisearchVersion}
-      }
+          </span>
+        ) : null,
+      },
     ],
     [
       {
         title: "Made With ❤️ By",
         description: (
-          <a href="https://github.com/yoshino-s">https://github.com/yoshino-s</a>
+          <a href="https://github.com/yoshino-s">
+            https://github.com/yoshino-s
+          </a>
         ),
         value: (
           <ActionIcon.Group>
-            <ActionIcon variant="default" size="lg" aria-label="Gallery" component="a" href="https://github.com/yoshino-s" target="_blank">
+            <ActionIcon
-              <IconBrandGithub style={{ width: rem(20) }} stroke={1.5} />
+              variant="default"
+              size="lg"
+              aria-label="Gallery"
+              component="a"
+              href="https://github.com/yoshino-s"
+              target="_blank"
+            >
+              <TbBrandGithub style={{ width: rem(20) }} />
             </ActionIcon>
 
-            <ActionIcon variant="default" size="lg" aria-label="Settings" component="a" href="mailto:yoshino.prog@gmail.com">
+            <ActionIcon
-              <IconMail style={{ width: rem(20) }} stroke={1.5} />
+              variant="default"
+              size="lg"
+              aria-label="Settings"
+              component="a"
+              href="mailto:yoshino.prog@gmail.com"
+            >
+              <TbMail style={{ width: rem(20) }} />
             </ActionIcon>
           </ActionIcon.Group>
-        )
+        ),
       },
-    ]
+    ],
   ];
 
   return (
@@ -186,11 +186,15 @@ export default function SettingsPage() {
         Settings
       </Title>
       Customize the look and feel of your Coder deployment.
-
       <form onSubmit={form.onSubmit(onSubmit)}>
-        {
+        {settings.map((settingItem, index) => (
-          settings.map((settingItem, index) => (
+          <Paper
-            <Paper my="xl" radius="md" withBorder style={{ overflow: "hidden" }} key={index}>
+            my="xl"
+            radius="md"
+            withBorder
+            style={{ overflow: "hidden" }}
+            key={index}
+          >
             <Table verticalSpacing="lg" striped>
               <Table.Tbody>
                 {settingItem.map((setting) => (
@@ -209,10 +213,8 @@ export default function SettingsPage() {
               </Table.Tbody>
             </Table>
           </Paper>
-          ))
+        ))}
-        }
       </form>
-
     </Container>
   );
 }

app/root.tsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  isRouteErrorResponse,
+} from "react-router";
+
+import { MantineProvider } from "@mantine/core";
+import { useDocumentTitle } from "@mantine/hooks";
+import { Notifications } from "@mantine/notifications";
+import { ContextMenuProvider } from "mantine-contextmenu";
+
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+import { theme } from "@/theme";
+import { type Metadata, MetaContext } from "@/utils/useMetadata";
+
+import type { Route } from "./+types/root";
+
+import "dayjs/locale/en";
+import "dayjs/locale/zh-cn";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+        {import.meta.env.DEV && (
+          <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
+        )}
+      </head>
+      <body style={{ colorScheme: "dark" }}>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  const [metadata, setMetadata] = useState<Metadata>({
+    title: "Mantine App",
+  });
+  useDocumentTitle(metadata.title ?? "Mantine App");
+
+  return (
+    <MantineProvider theme={theme} withCssVariables>
+      <ContextMenuProvider>
+        <MetaContext.Provider value={[metadata, setMetadata]}>
+          <Notifications />
+          <Outlet />
+        </MetaContext.Provider>
+      </ContextMenuProvider>
+    </MantineProvider>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (error && error instanceof Error) {
+    if (import.meta.env.DEV) {
+      details = error.message;
+      stack = error.stack;
+    }
+  }
+  return (
+    <main>
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre>
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

app/routes.ts

@@ -0,0 +1,14 @@
+import {
+  type RouteConfig,
+  index,
+  layout,
+  route,
+} from "@react-router/dev/routes";
+
+export default [
+  layout("./layouts/Main.layout.tsx", [
+    index("./pages/Search.page.tsx"),
+    route("settings", "./pages/Settings.page.tsx"),
+    route("paragraph/:id", "./pages/Paragraph.page.tsx"),
+  ]),
+] satisfies RouteConfig;

app/store/config.ts

@@ -0,0 +1,41 @@
+import { type ExtractState, create } from "zustand";
+import { combine, devtools, persist } from "zustand/middleware";
+
+export type ConfigStore = ExtractState<typeof useConfigStore>;
+
+const useConfigStore = create(
+  devtools(
+    persist(
+      combine(
+        {
+          meilisearchUrl: "https://meilisearch.yoshino-s.xyz/",
+          meilisearchToken:
+            "70014cdf1f1fb94b6ed420e11abf2e74e0dfa7bc00ddd77f213599c50bd1e26f",
+          s3Url: "https://minio-hdd.yoshino-s.xyz/",
+          enableHybridSearch: true,
+        },
+        (set) => ({
+          setMeilisearchUrl: (url: string | undefined) =>
+            set((state) => ({
+              meilisearchUrl: url ?? state.meilisearchUrl,
+            })),
+          setMeilisearchToken: (token: string | undefined) =>
+            set((state) => ({
+              meilisearchToken: token ?? state.meilisearchToken,
+            })),
+          setS3Url: (url: string | undefined) =>
+            set((state) => ({
+              s3Url: url ?? state.s3Url,
+            })),
+          setEnableHybridSearch: (enable: boolean | undefined) =>
+            set((state) => ({
+              enableHybridSearch: enable ?? state.enableHybridSearch,
+            })),
+        }),
+      ),
+      { name: "ds-pages" },
+    ),
+  ),
+);
+
+export default useConfigStore;

app/store/index.ts

@@ -0,0 +1 @@
+export * from "./config";

app/theme.ts

@@ -0,0 +1,5 @@
+import { createTheme } from "@mantine/core";
+
+export const theme = createTheme({
+  /** Put your mantine theme override here */
+});

app/utils/meilisearchContext.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+
+import type { Meilisearch } from "meilisearch";
+
+export const MeilisearchContext = createContext<Meilisearch | null>(null);
+
+export const MeilisearchProvider = MeilisearchContext.Provider;
+
+export function useMeilisearch() {
+  return useContext(MeilisearchContext);
+}

app/utils/remark.ts

@@ -0,0 +1,17 @@
+import rehypeStarryNight from "rehype-starry-night";
+import rehypeStringify from "rehype-stringify";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+
+export async function markdownToHtml(markdown: string) {
+  const result = await unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(remarkGfm)
+    .use(rehypeStarryNight)
+    .use(rehypeStringify)
+    .process(markdown);
+  return result.toString();
+}

app/utils/useMetadata.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+import {
+  type Dispatch,
+  type SetStateAction,
+  createContext,
+  useContext,
+} from "react";
+
+export interface Metadata {
+  title?: string;
+  description?: string;
+  rightActions?: React.ReactNode;
+  withTabs?: boolean;
+}
+
+export const MetaContext = createContext<
+  [Metadata, Dispatch<SetStateAction<Metadata>>]
+>([{}, () => {}]);
+
+export default function useMetadata(): [
+  Metadata,
+  Dispatch<SetStateAction<Metadata>>,
+] {
+  const [meta, setMeta] = useContext(MetaContext);
+
+  return [meta, setMeta];
+}

default.conf

@@ -1,14 +0,0 @@
-server {
-    listen 80;
-
-    autoindex off;
-
-    server_name _;
-    server_tokens off;
-
-    location / {
-        root /static;
-        index index.html;
-        try_files $uri $uri/ /index.html;
-    }
-}

eslint.config.js

@@ -0,0 +1,78 @@
+import eslint from "@eslint/js";
+import * as pluginImportX from "eslint-plugin-import-x";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import * as reactHooks from "eslint-plugin-react-hooks";
+import tsEslint from "typescript-eslint";
+
+export default tsEslint.config(
+  eslint.configs.recommended,
+  tsEslint.configs.recommended,
+  pluginImportX.flatConfigs.recommended,
+  pluginImportX.flatConfigs.typescript,
+  reactHooks.configs["recommended-latest"],
+  eslintPluginPrettierRecommended,
+  {
+    rules: {
+      "prettier/prettier": ["error", {}],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/consistent-type-imports": "error",
+      "import-x/no-named-as-default-member": "off",
+      "import-x/order": [
+        "error",
+        {
+          pathGroupsExcludedImportTypes: ["builtin"],
+          pathGroups: [
+            {
+              pattern: "@/**",
+              group: "external",
+              position: "after",
+            },
+            {
+              pattern: "{react,react-router}",
+              group: "external",
+              position: "before",
+            },
+            {
+              pattern: "{{@mantine,mantine-*,react-icons}/**,mantine-*}",
+              group: "external",
+              position: "before",
+            },
+            {
+              pattern: "{@connectrpc,@tanstack,@buf,@bufbuild}/**",
+              group: "external",
+              position: "before",
+            },
+          ],
+          "newlines-between": "always",
+          alphabetize: {
+            order: "asc",
+          },
+          named: {
+            enabled: true,
+            types: "types-first",
+          },
+        },
+      ],
+    },
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.eslint.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    ignores: [
+      "node_modules",
+      "dist",
+      ".react-router",
+      "app/gen",
+      "build",
+      "output",
+    ],
+  },
+);

index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets//favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DS-Next</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

jest.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jest-environment-jsdom',
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  moduleNameMapper: {
-    '^@test-utils': '<rootDir>/test-utils',
-  },
-  transform: {
-    '^.+\\.ts?$': 'ts-jest',
-  },
-};

jest.setup.js

@@ -1,26 +0,0 @@
-require('@testing-library/jest-dom/extend-expect');
-
-const { getComputedStyle } = window;
-window.getComputedStyle = (elt) => getComputedStyle(elt);
-
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-
-window.ResizeObserver = ResizeObserver;

package.json

@@ -1,106 +1,121 @@
 {
-  "name": "codesecer-ui",
+  "name": "ds-pages",
   "private": true,
-  "version": "0.0.1",
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "react-router dev --watch",
-    "build": "vite build",
+    "build": "react-router build",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint . --fix",
+    "lint": "pnpm run '/lint:.*/'",
-    "jest": "jest",
+    "lint:eslint": "eslint . --ext .ts,.tsx --cache",
-    "jest:watch": "jest --watch",
+    "lint:stylelint": "stylelint '**/*.css' --cache && prettier --check 'app/**/*.css' --tab-width 4",
-    "test": "pnpm typecheck && pnpm lint",
+    "lint-fix": "pnpm run \"/lint-fix:.*/\"",
-    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+    "lint-fix:eslint": "eslint . --ext .ts,.tsx --fix --cache",
-    "build-storybook": "build-storybook",
+    "lint-fix:stylelint": "stylelint '**/*.css' --fix --cache && prettier --write 'app/**/*.css' --tab-width 4",
-    "chromatic": "npx chromatic --project-token=180ac2186305"
+    "vitest": "vitest run",
+    "vitest:watch": "vitest",
+    "test": "pnpm run '/^(typecheck|lint)$/'",
+    "prepare": "husky"
   },
   "dependencies": {
-    "@mantine/core": "^7.14.3",
+    "@mantine/core": "^8.1.2",
-    "@mantine/hooks": "^7.14.3",
+    "@mantine/dates": "^8.1.2",
-    "@mantine/notifications": "^7.14.3",
+    "@mantine/form": "^8.1.2",
-    "@meilisearch/instant-meilisearch": "^0.22.0",
+    "@mantine/hooks": "^8.1.2",
-    "@reduxjs/toolkit": "^2.4.0",
+    "@mantine/modals": "^8.1.2",
-    "@sentry/react": "^8.42.0",
+    "@mantine/notifications": "^8.1.2",
-    "@sentry/vite-plugin": "^2.22.7",
+    "@mantine/spotlight": "^8.1.2",
-    "@tabler/icons-react": "^3.24.0",
+    "@meilisearch/instant-meilisearch": "^0.27.0",
-    "axios": "^1.7.9",
+    "@microlink/react-json-view": "^1.26.2",
+    "@monaco-editor/react": "4.7.0",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@react-router/node": "^7.6.3",
+    "@react-router/serve": "^7.6.3",
+    "@sentry/react": "^9.33.0",
+    "@sentry/react-router": "^9.33.0",
+    "@tanstack/react-query": "^5.81.5",
+    "@types/canvas-confetti": "^1.9.0",
+    "@types/sarif": "^2.1.7",
+    "axios": "^1.10.0",
+    "canvas-confetti": "^1.9.3",
+    "class-transformer": "^0.5.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
-    "i18next": "^24.0.5",
+    "instantsearch.js": "^4.79.1",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "isbot": "^5.1.28",
-    "instantsearch.js": "^4.75.5",
+    "js-yaml": "^4.1.0",
-    "lodash": "^4.17.21",
+    "jsonwebtoken": "^9.0.2",
-    "meilisearch": "^0.46.0",
+    "lucide-react": "^0.525.0",
-    "react": "^18.3.1",
+    "mantine-contextmenu": "^8.1.1",
-    "react-dom": "^18.3.1",
+    "mantine-datatable": "^8.1.2",
-    "react-i18next": "^15.1.3",
+    "meilisearch": "^0.51.0",
-    "react-instantsearch": "^7.13.8",
+    "monaco-editor": "^0.52.2",
-    "react-redux": "^9.1.2",
+    "react": "^19.1.0",
-    "react-router-dom": "^7.0.2",
+    "react-dom": "^19.1.0",
-    "rehype-highlight": "^7.0.1",
+    "react-icons": "^5.5.0",
-    "rehype-sanitize": "^6.0.0",
+    "react-instantsearch": "^7.16.1",
+    "react-router": "^7.6.3",
+    "react-router-dom": "^7.6.3",
+    "reflect-metadata": "^0.2.2",
+    "rehype-starry-night": "^2.2.0",
     "rehype-stringify": "^10.0.1",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
-    "remark-html": "^16.0.1",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.1",
+    "remark-rehype": "^11.1.2",
-    "unified": "^11.0.5"
+    "unified": "^11.0.5",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
+    "@eslint/js": "^9.30.0",
-    "@mantine/form": "^7.14.3",
+    "@react-router/dev": "^7.6.3",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/api": "^7.6.17",
-    "@storybook/builder-vite": "^8.4.7",
-    "@storybook/components": "^8.4.7",
-    "@storybook/core-events": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
+    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
+    "@types/js-yaml": "^4.0.9",
-    "@types/lodash": "^4.17.13",
+    "@types/json-bigint": "^1.0.4",
-    "@types/react": "^18.3.1",
+    "@types/node": "^24.0.7",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.1.8",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/parser": "^8.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.35.0",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@typescript-eslint/parser": "^8.35.0",
-    "babel-loader": "^9.2.1",
+    "eslint": "^9.30.0",
-    "chromatic": "^11.20.0",
+    "eslint-config-prettier": "^10.1.5",
-    "eslint": "^9.16.0",
+    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-plugin-import-x": "^4.16.1",
-    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-prettier": "^5.5.1",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-hooks": "^6.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
+    "husky": "^9.1.7",
-    "eslint-plugin-storybook": "^0.11.1",
+    "identity-obj-proxy": "^3.0.0",
-    "i18next-http-backend": "^2.7.1",
+    "jsdom": "^26.1.0",
-    "install-peerdeps": "^3.0.3",
+    "postcss": "^8.5.6",
-    "jest": "^29.7.0",
+    "postcss-import": "^16.1.1",
-    "jest-environment-jsdom": "^29.7.0",
+    "postcss-preset-mantine": "1.17.0",
-    "postcss": "^8.4.49",
-    "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.4.2",
+    "prettier": "^3.6.2",
-    "react-router": "^7.0.2",
+    "prop-types": "^15.8.1",
-    "rollup-plugin-visualizer": "^5.12.0",
+    "stylelint": "^16.21.0",
-    "storybook": "^8.4.7",
+    "stylelint-config-standard-scss": "^15.0.1",
-    "storybook-dark-mode": "^4.0.2",
+    "tw-animate-css": "^1.3.4",
-    "storybook-react-i18next": "3.1.7",
+    "typescript": "^5.8.3",
-    "stylis-plugin-rtl": "^2.1.1",
+    "typescript-eslint": "^8.35.0",
-    "ts-jest": "^29.2.5",
+    "vite": "^7.0.0",
-    "typescript": "^5.7.2",
+    "vite-plugin-devtools-json": "^0.2.0",
-    "vite": "^6.0.3"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
   },
-  "packageManager": "pnpm@10.0.0-beta.1+sha512.629de0531b9ae9a3f8e372d014ef8f5a57906d9a48095ced54bbfbd246b4136381478032c8d13819fd1eedde8330517a799ea6756eedd9a136e36524fa3083cf"
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@sentry/cli",
+      "es5-ext",
+      "esbuild",
+      "unrs-resolver"
+    ]
+  }
 }

public/_redirects

@@ -1 +0,0 @@
-/* /index.html 200

react-router.config.ts

@@ -0,0 +1,13 @@
+import type { Config } from "@react-router/dev/config";
+import { sentryOnBuildEnd } from "@sentry/react-router";
+
+export default {
+  appDirectory: "app",
+  ssr: false,
+
+  buildEnd: async ({ viteConfig, reactRouterConfig, buildManifest }) => {
+    // ...
+    // Call this at the end of the hook
+    await sentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });
+  },
+} satisfies Config;

src/App.tsx

@@ -1,13 +0,0 @@
-import { Suspense } from "react";
-import { RouterProvider } from "react-router-dom";
-
-import Loading from "./page/Loading";
-import router from "./router";
-
-export default function App() {
-  return (
-    <Suspense fallback={<Loading />}>
-      <RouterProvider router={router} />
-    </Suspense>
-  );
-}

src/hooks/useContentFix.ts

@@ -1,9 +0,0 @@
-import { useAppSelector } from "@/store";
-
-export function useContextFix(content?: string) {
-  const { s3Url } = useAppSelector((state) => state.options);
-  return content?.replace(
-    /https?:\/\/(?:minio-hdd)\.yoshino-s\.(?:online|xyz)\//g,
-    s3Url,
-  );
-}

src/main.tsx

@@ -1,23 +0,0 @@
-import { Notifications } from "@mantine/notifications";
-import ReactDOM from "react-dom/client";
-import { Provider } from "react-redux";
-
-import { MantineProvider, createTheme } from "@mantine/core";
-import App from "./App";
-import "./sentry";
-import store from "./store";
-
-import "@mantine/core/styles.css";
-
-const theme = createTheme({
-  /** Put your mantine theme override here */
-});
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <Provider store={store}>
-    <MantineProvider withCssVariables theme={theme}>
-      <Notifications />
-      <App />
-    </MantineProvider>
-  </Provider>,
-);

src/router/index.tsx

@@ -1,76 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import { lazy } from "react";
-import { createBrowserRouter } from "react-router-dom";
-
-import store from "@/store";
-import { markdownToHtml } from "@/utils/remark";
-import { MeiliSearch } from "meilisearch";
-
-const MainLayout = lazy(() => import("@/layout/MainLayout"));
-const SearchPage = lazy(() => import("@/page/Search"));
-const NotFound = lazy(() => import("@/page/Exception/NotFound"));
-const ErrorPage = lazy(() => import("@/page/Exception/ErrorPage"));
-const LoadingPage = lazy(async () => import("@/page/Loading"));
-const ParagraphPage = lazy(async () => import("@/page/Paragraph"));
-const SettingsPage = lazy(async () => import("@/page/Settings"));
-
-const router = createBrowserRouter(
-  [
-    {
-      path: "/",
-      element: <MainLayout />,
-      errorElement: <ErrorPage />,
-      children: [
-        {
-          path: "/",
-          element: <SearchPage />,
-          loader() {
-            return {};
-          },
-        },
-        {
-          path: "/settings",
-          element: <SettingsPage />,
-        },
-
-        {
-          path: "/paragraph/:id",
-          element: <ParagraphPage />,
-          async loader({ params: { id } }) {
-            if (!id) {
-              return { redirect: "/" };
-            }
-
-            const meilisearch = new MeiliSearch({
-              host: store.getState().options.meilisearchUrl,
-              apiKey: store.getState().options.meilisearchToken,
-            });
-
-            const paragraph: Paragraph = await meilisearch
-              .index("paragraph")
-              .getDocument(id);
-
-            if (paragraph.markdown) {
-              paragraph.content = await markdownToHtml(paragraph.content);
-            } else {
-              paragraph.content = "NO HTML!";
-            }
-
-            return paragraph;
-          },
-        },
-      ],
-    },
-    {
-      path: "/loading",
-      element: <LoadingPage />,
-    },
-    {
-      path: "*",
-      element: <NotFound />,
-    },
-  ],
-  {},
-);
-
-export default router;

src/sentry.ts

@@ -1,31 +0,0 @@
-import * as Sentry from "@sentry/react";
-
-export const client = Sentry.init({
-  dsn: "https://fee4fec58516c464f60613b40b5d3a7d@sentry.yoshino-s.xyz/2",
-  integrations: [
-    Sentry.browserProfilingIntegration(),
-    Sentry.browserTracingIntegration(),
-    Sentry.replayIntegration({
-      maskAllText: false,
-      blockAllMedia: false,
-    }),
-  ],
-  // Performance Monitoring
-  tracesSampleRate: 1.0, //  Capture 100% of the transactions
-  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-  tracePropagationTargets: ["localhost", "ds.pages.yoshino-s.xyz"],
-  // Session Replay
-  replaysSessionSampleRate: 1.0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-
-  profilesSampleRate: 1.0, // Capture 100% of the profiles
-  enabled: localStorage.getItem("sentryDisabled") !== "true",
-});
-
-export function disableSentry(disable: boolean) {
-  if (!client) {
-    return;
-  }
-  client.getOptions().enabled = !disable;
-}
-

src/store/index.ts

@@ -1,37 +0,0 @@
-import { configureStore, Middleware } from "@reduxjs/toolkit";
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
-
-import optionsReducer from "./reducer/options";
-
-const localStorageMiddleware: Middleware = ({ getState }) => {
-  return (next) => (action) => {
-    const result = next(action);
-    const state = getState();
-    localStorage.setItem("applicationState", JSON.stringify(state));
-    return result;
-  };
-};
-
-const reHydrateStore = () => {
-  if (localStorage.getItem("applicationState") !== null) {
-    const state: any = JSON.parse(localStorage.getItem("applicationState") ?? "{}");
-    return state;// re-hydrate the store
-  }
-};
-
-const store = configureStore({
-  reducer: {
-    options: optionsReducer,
-  },
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(localStorageMiddleware),
-  preloadedState: reHydrateStore() as () => any,
-});
-
-type AppState = ReturnType<typeof store.getState>;
-type AppDispatch = typeof store.dispatch;
-
-export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;
-export const useAppDispatch: () => AppDispatch = useDispatch;
-
-export default store;

src/store/module/options.ts

@@ -1,11 +0,0 @@
-import store, { useAppSelector } from "..";
-
-export const useOptionsState = () => {
-  const state = useAppSelector((state) => state.options);
-  return {
-    state,
-    getState: () => {
-      return store.getState().options;
-    },
-  };
-};

src/store/reducer/options.ts

@@ -1,43 +0,0 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-
-export interface OptionsState {
-  meilisearchUrl: string;
-  meilisearchToken: string;
-  s3Url: string;
-  enableHybridSearch?: boolean;
-}
-
-const initialState: OptionsState = {
-  meilisearchUrl: "https://meilisearch.yoshino-s.xyz/",
-  meilisearchToken:
-    "a568afad53a4dd124c508b9acd26ec35ff65665c07020913533cd7b176a28a04",
-  s3Url: "https://minio-hdd.yoshino-s.xyz/",
-  enableHybridSearch: true,
-};
-
-const optionsSlice = createSlice({
-  name: "stats",
-  initialState,
-  reducers: {
-    setMeilisearchUrl: (state, action: PayloadAction<string | undefined>) => {
-      state.meilisearchUrl = action.payload ?? initialState.meilisearchUrl;
-    },
-    setMeilisearchToken: (state, action: PayloadAction<string | undefined>) => {
-      state.meilisearchToken = action.payload ?? initialState.meilisearchToken;
-    },
-    setS3Url: (state, action: PayloadAction<string | undefined>) => {
-      state.s3Url = action.payload ?? initialState.s3Url;
-    },
-    setEnableHybridSearch: (
-      state,
-      action: PayloadAction<boolean | undefined>
-    ) => {
-      state.enableHybridSearch = action.payload ?? initialState.enableHybridSearch;
-    }
-  },
-});
-
-export const { setS3Url, setMeilisearchUrl, setMeilisearchToken, setEnableHybridSearch } =
-  optionsSlice.actions;
-
-export default optionsSlice.reducer;

src/utils/remark.ts

@@ -1,71 +0,0 @@
-import rehypeHighlight from "rehype-highlight";
-import rehypeStringify from "rehype-stringify";
-import remarkGfm from "remark-gfm";
-import remarkParse from "remark-parse";
-import remarkRehype from "remark-rehype";
-import { unified } from "unified";
-
-export async function markdownToHtml(markdown: string) {
-  const result = await unified()
-    .use(remarkParse)
-    .use(remarkRehype)
-    .use(remarkGfm)
-    .use(rehypeHighlight, {
-      detect: true,
-    })
-    // .use(rehypeSanitize, {
-    //   ...defaultSchema,
-    //   attributes: {
-    //     ...defaultSchema.attributes,
-    //     span: [
-    //       ...(defaultSchema.attributes?.span || []),
-    //       [
-    //         "className",
-    //         "hljs-addition",
-    //         "hljs-attr",
-    //         "hljs-attribute",
-    //         "hljs-built_in",
-    //         "hljs-bullet",
-    //         "hljs-char",
-    //         "hljs-code",
-    //         "hljs-comment",
-    //         "hljs-deletion",
-    //         "hljs-doctag",
-    //         "hljs-emphasis",
-    //         "hljs-formula",
-    //         "hljs-keyword",
-    //         "hljs-link",
-    //         "hljs-literal",
-    //         "hljs-meta",
-    //         "hljs-name",
-    //         "hljs-number",
-    //         "hljs-operator",
-    //         "hljs-params",
-    //         "hljs-property",
-    //         "hljs-punctuation",
-    //         "hljs-quote",
-    //         "hljs-regexp",
-    //         "hljs-section",
-    //         "hljs-selector-attr",
-    //         "hljs-selector-class",
-    //         "hljs-selector-id",
-    //         "hljs-selector-pseudo",
-    //         "hljs-selector-tag",
-    //         "hljs-string",
-    //         "hljs-strong",
-    //         "hljs-subst",
-    //         "hljs-symbol",
-    //         "hljs-tag",
-    //         "hljs-template-tag",
-    //         "hljs-template-variable",
-    //         "hljs-title",
-    //         "hljs-type",
-    //         "hljs-variable",
-    //       ],
-    //     ],
-    //   },
-    // })
-    .use(rehypeStringify)
-    .process(markdown);
-  return result.toString();
-}

tsconfig.eslint.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+  },
+  "include": [
+    ".storybook/**/*",
+    "app",
+    "test-utils",
+    "vitest",
+    "*.js",
+    "*.cjs",
+    "*.mts",
+    "*.ts",
+  ],
+}

tsconfig.json

@@ -1,36 +1,30 @@
 {
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
   "compilerOptions": {
-    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "useDefineForClassFields": true,
+    "types": ["node", "vite/client"],
-    "lib": [
+    "target": "ES2022",
-      "DOM",
+    "module": "ES2022",
-      "DOM.Iterable",
+    "moduleResolution": "bundler",
-      "ESNext"
-    ],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
     "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
     "paths": {
-      "@test-utils": [
+      "@/*": ["./app/*"]
-        "./test-utils"
-      ],
-      "@/*": [
-        "./src/*"
-      ]
-    }
     },
-  "references": [
+    "incremental": true,
-    {
+    "experimentalDecorators": true,
-      "path": "./tsconfig.node.json"
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
   }
-  ]
 }

tsconfig.node.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
-  },
-  "include": ["vite.config.ts"],
-}

vite.config.ts

@@ -1,72 +1,40 @@
-import { sentryVitePlugin } from "@sentry/vite-plugin";
+import { reactRouter } from "@react-router/dev/vite";
-import { resolve } from "path";
+import {
+  type SentryReactRouterBuildOptions,
+  sentryReactRouter,
+} from "@sentry/react-router";
+import { defineConfig } from "vite";
+import devtoolsJson from "vite-plugin-devtools-json";
+import tsconfigPaths from "vite-tsconfig-paths";
 
-import react from "@vitejs/plugin-react";
+const sentryConfig: SentryReactRouterBuildOptions = {
-import { visualizer } from "rollup-plugin-visualizer";
+  telemetry: false,
-import { defineConfig, splitVendorChunkPlugin } from "vite";
+  project: "devsecops_ssl-op-demo-new",
+  sourceMapsUploadOptions: {
+    filesToDeleteAfterUpload: [],
+  },
+  // An auth token is required for uploading source maps.
+  authToken:
+    "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",
+};
 
 export default defineConfig({
+  appType: "spa",
   server: {
-    headers: {
+    cors: true,
-      "Document-Policy": "js-profiling",
   },
-  },
-
   plugins: [
-    react(),
+    reactRouter(),
-    splitVendorChunkPlugin(),
+    devtoolsJson(),
-    visualizer({
+    tsconfigPaths(),
-      gzipSize: true,
+    sentryReactRouter(sentryConfig, {
-      brotliSize: true,
+      command: "build",
-      emitFile: false,
+      mode: "production",
-      filename: "stats.html",
-      open: true,
-    }),
-    sentryVitePlugin({
-      org: "sentry",
-      project: "ds-viewer",
-      url: "https://sentry.yoshino-s.xyz",
     }),
   ],
-
-  resolve: {
-    alias: {
-      "@/": `${resolve(__dirname, "src")}/`,
-    },
-  },
-
   build: {
     sourcemap: true,
-    rollupOptions: {
+    assetsDir: "static",
-      output: {
+    manifest: true,
-        manualChunks(id) {
-          if (id.includes("@mantine")) {
-            return "@mantine";
-          }
-          if (id.includes("@sentry")) {
-            return "@sentry";
-          }
-          if (
-            id.includes("react-router-dom") ||
-            id.includes("@remix-run") ||
-            id.includes("react-router")
-          ) {
-            return "@react-router";
-          }
-          if (id.includes("highlight.js")) {
-            return "highlight.js";
-          }
-          if (
-            id.includes("remark") ||
-            id.includes("rehype") ||
-            id.includes("unified") ||
-            id.includes("mdast") ||
-            id.includes("micromark")
-          ) {
-            return "@rehype";
-          }
-        },
-      },
-    },
   },
 });