Use NextJS for less JavaScript

ether · Nov 10, 2024 · 7c0aec1 · 7c0aec1
1 parent 87f1056
commit 7c0aec1
Show file tree

Hide file tree

Showing 35 changed files with 1,151 additions and 694 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.gitignore b/.gitignore
@@ -3,5 +3,5 @@ node_modules/
 dist/
 .idea/
 package-lock.json
-
+.next/
 .idea/
diff --git a/src/index.css → app/index.css b/src/index.css → app/index.css
@@ -256,6 +256,10 @@ div#footer a {
   color: white;
 }
 
+.image-logo {
+  width: auto;
+}
+
 div#footer img.logo {
   background-color: rgba(255, 255, 255, 0.4);
   border-radius: 50%;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,22 @@
+import './index.css'
+
+
+export default function RootLayout({
+                                       children,
+                                   }: {
+    children: React.ReactNode
+}) {
+    return (<html lang="en">
+    <head>
+        <meta name="globalsign-domain-verification" content="9buOUAsm68lg97yJaT2W5IBeTkSrlGbOrsVwziHjIw"/>
+        <title>Etherpad</title>
+        <link rel="shortcut icon" href="favicon.ico"/>
+        <link type="text/css" rel="stylesheet" href="/css/reset.css"/>
+        <meta name="google-site-verification" content="bVuuj6GwPO2TG1ZmB67XFvKxM0YSMrQIw5rYcG5RwVw"/>
+    </head>
+    <body>
+    <div id="root">{children}</div>
+    <div id="banner"></div>
+    </body>
+    </html>);
+}
diff --git a/src/App.tsx → app/page.tsx b/src/App.tsx → app/page.tsx
@@ -1,22 +1,20 @@
-import {Header} from "./pages/Header.tsx";
-import {MainHeadline} from "./pages/MainHeadline.tsx";
-import {RealTimeCollaboration} from "./pages/RealTimeCollaboration.tsx";
-import {DownloadLatestVersion} from "./pages/DownloadLatestVersion.tsx";
-import {Contribute} from "./pages/Contribute.tsx";
-import {LinksToRelevantResources} from "./pages/LinksToRelevantResources.tsx";
-import {GetInTouchContact} from "./pages/GetInTouchContact.tsx";
-import {Thanking} from "./pages/Thanking.tsx";
-import {Footer} from "./components/Footer.tsx";
-import {AddFunctionalities} from "./pages/AddFunctionalities.tsx";
-import {CustomizeAppearance} from "./pages/CustomizeAppearance.tsx";
+import {SelectVersionModal} from "../src/components/SelectVersionModal.tsx";
+import {CookieBanner} from "../src/components/CookieBanner.tsx";
+import {Header} from "../src/pagesToDisplay/Header.tsx";
+import {MainHeadline} from "../src/pagesToDisplay/MainHeadline.tsx";
+import {RealTimeCollaboration} from "../src/pagesToDisplay/RealTimeCollaboration.tsx";
+import {AddFunctionalities} from "../src/pagesToDisplay/AddFunctionalities.tsx";
+import {CustomizeAppearance} from "../src/pagesToDisplay/CustomizeAppearance.tsx";
+import {DownloadLatestVersion} from "../src/pagesToDisplay/DownloadLatestVersion.tsx";
+import {Contribute} from "../src/pagesToDisplay/Contribute.tsx";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faExternalLink} from "@fortawesome/free-solid-svg-icons";
-import {CookieBanner} from "./components/CookieBanner.tsx";
-import {SelectVersionModal} from "./components/SelectVersionModal.tsx";
-import {Outlet} from "react-router-dom";
+import {LinksToRelevantResources} from "../src/pagesToDisplay/LinksToRelevantResources.tsx";
+import {GetInTouchContact} from "../src/pagesToDisplay/GetInTouchContact.tsx";
+import {Thanking} from "../src/pagesToDisplay/Thanking.tsx";
+import {Footer} from "../src/components/Footer.tsx";
 
-
-export const RootElement = ()=>{
+export default function Page() {
     return <div className="dark:bg-gray-800">
         <SelectVersionModal/>
         <CookieBanner/>
@@ -26,15 +24,6 @@ export const RootElement = ()=>{
             </div>
         </div>
         <div className="main-container">
-        <Outlet/>
-        </div>
-    </div>
-}
-
-export const App = ()=> {
-
-    return (
-        <>
             <MainHeadline/>
             <a className="scroll-point" id="about"></a>
             <RealTimeCollaboration/>
@@ -55,8 +44,6 @@ export const App = ()=> {
             <a className="scroll-point" id="thanks"></a>
             <Thanking/>
             <Footer/>
-        </>
-    )
+        </div>
+    </div>
 }
-
-
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/next.config.mjs b/next.config.mjs
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    output: 'export', // Outputs a Single-Page Application (SPA).
+    distDir: './dist', // Changes the build output directory to `./dist/`.
+}
+
+export default nextConfig
diff --git a/package.json b/package.json
@@ -4,49 +4,49 @@
   "version": "2.2.6",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "dev": "next dev --turbo",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
-    "axios": "^1.7.7",
+    "axios": "^1.6.8",
     "javascript-time-ago": "^2.5.10",
     "marked": "^13.0.2",
+    "next": "^15.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-ga": "^3.3.1",
-    "react-router-dom": "6.26.2",
-    "react-router-hash-link": "^2.4.3",
     "react-waypoint": "^10.3.0",
-    "sanitize-html": "^2.13.1",
+    "sanitize-html": "^2.13.0",
     "timeago": "^1.6.7"
   },
   "devDependencies": {
     "@saber2pr/types-github-api": "^0.0.9",
-    "@types/react": "^18.3.11",
+    "@types/node": "22.9.0",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-lazy-load-image-component": "^1.6.4",
     "@types/sanitize-html": "^2.13.0",
     "@typescript-eslint/eslint-plugin": "^8.5.0",
-    "@typescript-eslint/parser": "^8.9.0",
-    "@vitejs/plugin-react-swc": "^3.7.1",
+    "@typescript-eslint/parser": "^8.2.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.19",
     "clsx": "^2.1.1",
-    "eslint": "^9.14.0",
+    "eslint": "^9.9.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "postcss": "^8.4.47",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10",
+    "postcss": "^8.4.38",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^3.4.6",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.5",
     "zustand": "^4.5.5"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,5 +3,5 @@ node_modules/ @@
     dist/
     .idea/
     package-lock.json
+    .next/
     .idea/