Merge pull request #22 from Kareadita/feature/nextra3

Nextra 3

.github/workflows/nextjs.yml

@@ -33,43 +33,22 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "manager=yarn" >> $GITHUB_OUTPUT
-            echo "command=install" >> $GITHUB_OUTPUT
-            echo "runner=yarn" >> $GITHUB_OUTPUT
-            exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Unable to determine package manager"
-            exit 1
-          fi
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: ${{ steps.detect-package-manager.outputs.manager }}
+          cache: "npm"
       - name: Setup Pages
-        uses: actions/configure-pages@v4
-        with:
+        uses: actions/configure-pages@v5
+ #       with:
           # Automatically inject basePath in your Next.js configuration file and disable
           # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
           #
           # You may remove this line if you want to manage the configuration yourself.
-          static_site_generator: next
+#          static_site_generator: next
       - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+        run: npm ci --prefer-offline
       - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
-#      - name: Static HTML export with Next.js
-#        run: ${{ steps.detect-package-manager.outputs.runner }} next export
-      - name: Build Next.js static site
         run: npm run build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

components/AppPreview.tsx

@@ -10,23 +10,27 @@ export default function AppPreview() {
 	// ! NOTE: There is a chance that 'system' will pop up first, only then resolving to
 	// ! either 'dark' or 'light'. I don't see this as much of an issue, TBH.
 	useEffect(() => {
-		let imageUrl = 'homepage-light.png'
+		let imageUrl = 'homepage-light2.png'
 		if (resolvedTheme == 'dark') {
-			imageUrl = 'homepage-dark.webp'
+			imageUrl = 'homepage-dark2.png'
 		}
 
 		const image = new Image()
 		image.src = `/${imageUrl}`
 	}, [resolvedTheme])
 
+	const backgroundImageClass = resolvedTheme === 'dark'
+		? "dark:bg-[url('/homepage-dark2.png')]"
+		: "bg-[url('/homepage-light2.png')]";
+
 	return (
 		<div className="relative -mt-7 h-[432px] w-full sm:p-0 lg:h-[700px]">
 			<div className="relative h-full">
 				<motion.div
 					initial={{ opacity: 0, scale: 0.75 }}
 					animate={{ opacity: 1, scale: 1 }}
 					transition={{ delay: 0.5, duration: 1 }}
-					className="z-40 flex h-full flex-1 self-center bg-[url('/homepage-dark.webp')] bg-contain bg-[center_top] bg-no-repeat dark:bg-[url('/homepage-dark.webp')] sm:w-auto"
+					className={`z-40 flex h-full flex-1 self-center bg-contain bg-[center_top] bg-no-repeat ${backgroundImageClass} sm:w-auto`}
 				/>
 			</div>
 		</div>

components/WikiLogo.tsx

@@ -1,7 +1,7 @@
 export default function WikiLogo() {
 	return (
 		<div className="flex items-center space-x-2">
-			<img className="h-8" src="/favicon.ico" alt="Kavita" />
+			<img className="h-6" src="/favicon.ico" alt="Kavita" />
 			<h3 className="text-xl font-bold text-gray-850 dark:text-gray-200">Kavita</h3>
 		</div>
 	)

next.config.mjs

@@ -0,0 +1,20 @@
+import nextra from 'nextra'
+
+const withNextra = nextra({
+	theme: 'nextra-theme-docs',
+	themeConfig: './theme.config.tsx',
+})
+
+const isProduction = process.env.NODE_ENV === "production";
+const assetPrefix = isProduction ? "/wiki" : "";
+
+export default withNextra({
+	reactStrictMode: true,
+	trailingSlash: true,
+	assetPrefix,
+	basePath: assetPrefix,
+	output: "export",
+	images: {
+		unoptimized: true,
+	},
+})