hash mode

package.json

@@ -17,14 +17,12 @@
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
-    "@grafana/faro-react": "^1.0.2",
-    "@grafana/faro-web-tracing": "^1.0.2",
     "@mantine/core": "6.0.0",
     "@mantine/form": "^6.0.0",
     "@mantine/hooks": "^6.0.0",
     "@mantine/notifications": "^6.0.0",
     "@reduxjs/toolkit": "^1.9.3",
-    "@tabler/icons-react": "^2.7.0",
+    "@tabler/icons-react": "^2.30.0",
     "axios": "^1.3.4",
     "dayjs": "^1.11.7",
     "i18next": ">=21.0.0",
@@ -88,7 +86,5 @@
     "ts-jest": "^29.0.5",
     "typescript": "^4.9.5",
     "vite": "^4.1.1"
-  },
-  "readme": "ERROR: No README data found!",
-  "_id": "mantine-vite-template@0.0.0"
+  }
 }

src/component/Header/Header.tsx

@@ -12,6 +12,7 @@ import { useDocumentTitle, useMediaQuery } from "@mantine/hooks";
 import { IconSearch, IconSettings } from "@tabler/icons-react";
 import { Dispatch, SetStateAction, createContext, useContext } from "react";
 import { useNavigate } from "react-router";
+import { Link } from "react-router-dom";
 
 const useStyles = createStyles((theme) => ({
   header: {
@@ -75,7 +76,7 @@ export function HeaderSearch() {
     <Header height={56} className={classes.header}>
       <div className={classes.inner}>
         <span>
-          <Text weight={600} component="a" href="/">
+          <Text weight={600} component={Link} to="/">
             DS-Next
           </Text>
           {!isMobile && (
@@ -94,7 +95,7 @@ export function HeaderSearch() {
               required
             />
           </form>
-          <ActionIcon component="a" href="/settings">
+          <ActionIcon component={Link} to="/settings">
             <IconSettings />
           </ActionIcon>
         </Group>

src/component/ParagraphCard/ParagraphCard.tsx

@@ -1,6 +1,7 @@
 import { Card, Group, Image, Text, createStyles } from "@mantine/core";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { Link } from "react-router-dom";
 
 dayjs.extend(relativeTime);
 
@@ -34,18 +35,18 @@ export function ParagraphCard({
   return (
     <Card withBorder radius="md" p={0} className={classes.card}>
       <Group noWrap spacing={0}>
-        <a href={url}>
+        <Link to={url}>
           {cover && <Image src={cover} height={140} width={140} />}
-        </a>
+        </Link>
         <div className={classes.body}>
           <Text transform="uppercase" color="dimmed" weight={700} size="xs">
             {tags.map((tag, index) => (
               <>
                 {index > 0 && " • "}
                 <Text
-                  component="a"
+                  component={Link}
                   key={index}
-                  href={`/tag/${encodeURIComponent(tag)}`}
+                  to={`/tag/${encodeURIComponent(tag)}`}
                 >
                   {tag}
                 </Text>
@@ -56,8 +57,8 @@ export function ParagraphCard({
             className={classes.title}
             mt="xs"
             mb="md"
-            component="a"
-            href={url}
+            component={Link}
+            to={url}
           >
             {title}
           </Text>
@@ -65,8 +66,8 @@ export function ParagraphCard({
             <Group spacing="xs" noWrap>
               <Text
                 size="xs"
-                component="a"
-                href={`/author/${encodeURIComponent(author)}`}
+                component={Link}
+                to={`/author/${encodeURIComponent(author)}`}
               >
                 {author}
               </Text>

src/page/Paragraph.tsx

@@ -14,6 +14,7 @@ import { useContext, useEffect } from "react";
 import { useLoaderData } from "react-router";
 
 import { TitleContext } from "@/component/Header/Header";
+import { Link } from "react-router-dom";
 
 function stripStyles(content: string) {
   const element = document.createElement("div");
@@ -78,8 +79,8 @@ export default function ParagraphPage() {
         <Group>
           <Text c="dimmed"> {dayjs().to(dayjs(paragraph.time))}</Text>
           <UnstyledButton
-            component="a"
-            href={`/author/${encodeURIComponent(
+            component={Link}
+            to={`/author/${encodeURIComponent(
               paragraph.author || "unknown"
             )}`}
           >
@@ -93,8 +94,8 @@ export default function ParagraphPage() {
         {paragraph.tags?.map((tag) => (
           <UnstyledButton
             key={tag}
-            component="a"
-            href={`/tag/${encodeURIComponent(tag)}`}
+            component={Link}
+            to={`/tag/${encodeURIComponent(tag)}`}
           >
             <Badge fz="xs" variant="dot">
               {tag}

src/page/Search.tsx

@@ -61,7 +61,7 @@ export default function SearchPage(props: SearchPageProps) {
         {paragraphs.map((paragraph) => {
           return (
             <Grid.Col xs={12} sm={6} key={paragraph._id}>
-              <ParagraphCard {...paragraph} />
+              <ParagraphCard {...paragraph} key={paragraph._id} />
             </Grid.Col>
           );
         })}

src/router/index.tsx

@@ -1,5 +1,5 @@
 import { lazy } from "react";
-import { createBrowserRouter } from "react-router-dom";
+import { createHashRouter } from "react-router-dom";
 import { remark } from "remark";
 import remarkHtml from "remark-html";
 
@@ -16,7 +16,7 @@ const LoadingPage = lazy(async () => import("@/page/Loading"));
 const ParagraphPage = lazy(async () => import("@/page/Paragraph"));
 const SettingsPage = lazy(async () => import("@/page/Settings"));
 
-const router = createBrowserRouter([
+const router = createHashRouter([
   {
     path: "/",
     element: <MainLayout />,

src/store/reducer/options.ts

@@ -8,16 +8,16 @@ export interface OptionsState {
 const optionsSlice = createSlice({
   name: "stats",
   initialState: {
-    zincsearchUrl: "https://zincsearch.k8s.yoshino-s.xyz",
-    s3Url: "https://s3.yoshino-s.xyz",
+    zincsearchUrl: "https://zincsearch.yoshino-s.xyz",
+    s3Url: "https://minio-hdd.yoshino-s.xyz",
   } as OptionsState,
   reducers: {
     setZincsearchUrl: (state, action: PayloadAction<string | undefined>) => {
       state.zincsearchUrl =
-        action.payload ?? "https://zincsearch.k8s.yoshino-s.xyz";
+        action.payload ?? "https://zincsearch.yoshino-s.xyz";
     },
     setS3Url: (state, action: PayloadAction<string | undefined>) => {
-      state.s3Url = action.payload ?? "https://s3.yoshino-s.xyz";
+      state.s3Url = action.payload ?? "https://minio-hdd.yoshino-s.xyz";
     },
   },
 });