diff --git a/website/src/app/docs/page.tsx b/website/src/app/docs/page.tsx
new file mode 100644
index 0000000000..8f2eed2439
--- /dev/null
+++ b/website/src/app/docs/page.tsx
@@ -0,0 +1,31 @@
+import { Metadata } from 'next';
+import { getVersions } from '../../static/getVersions';
+import RedirectExistingDocs from './redirect-client';
+import { ImmutableConsole } from '../../ImmutableConsole';
+import { DocHeader } from '../../DocHeader';
+
+export const metadata: Metadata = {
+ title: 'Documentation — Immutable.js',
+};
+
+export default function Page() {
+ const versions = getVersions();
+
+ const latestVersion = versions[0];
+
+ if (!latestVersion) {
+ throw new Error('No versions');
+ }
+
+ return (
+
+ );
+}
diff --git a/website/src/app/docs/redirect-client.tsx b/website/src/app/docs/redirect-client.tsx
new file mode 100644
index 0000000000..40538ee952
--- /dev/null
+++ b/website/src/app/docs/redirect-client.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+type Props = {
+ version: string;
+};
+
+export default function RedirectExistingDocs({ version }: Props) {
+ const router = useRouter();
+
+ useEffect(() => {
+ const [, type, member] = window.location.hash?.split('/') || [];
+ let route = `/docs/${version}`;
+ if (type) {
+ route += `/${type}`;
+ }
+ if (member) {
+ route += `#${member}`;
+ }
+ router.replace(route);
+ }, [version, router]);
+
+ return
Redirecting...
;
+}
diff --git a/website/src/app/getVersionFromParams.ts b/website/src/app/getVersionFromParams.ts
new file mode 100644
index 0000000000..9a29596c85
--- /dev/null
+++ b/website/src/app/getVersionFromParams.ts
@@ -0,0 +1,3 @@
+export function getVersionFromParams(params: { version: string }): string {
+ return params.version.replace('%40', '@');
+}
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
new file mode 100644
index 0000000000..d1f8089e45
--- /dev/null
+++ b/website/src/app/layout.tsx
@@ -0,0 +1,24 @@
+import { Metadata } from 'next';
+import React from 'react';
+import '../../styles/globals.css';
+
+export const metadata: Metadata = {
+ title: 'Immutable.js',
+ icons: {
+ icon: '/favicon.png',
+ },
+};
+
+export default function RootLayout({
+ // Layouts must accept a children prop.
+ // This will be populated with nested layouts or pages
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/website/src/pages/index.tsx b/website/src/app/page.tsx
similarity index 62%
rename from website/src/pages/index.tsx
rename to website/src/app/page.tsx
index af72aba9e4..0fec27610d 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/app/page.tsx
@@ -1,39 +1,27 @@
import fs from 'fs';
-import Head from 'next/head';
-
import { Header } from '../Header';
-import { MarkdownContent } from '../MarkdownContent';
import { ImmutableConsole } from '../ImmutableConsole';
+import { MarkdownContent } from '../MarkdownContent';
import { genMarkdownDoc } from '../static/genMarkdownDoc';
import { getVersions } from '../static/getVersions';
-type Props = {
- versions: Array
;
- readme: string;
-};
-
-export async function getStaticProps(): Promise<{ props: Props }> {
- const versions = getVersions();
+export default async function Page() {
+ const versions = await getVersions();
const readme = genMarkdownDoc(
versions[0],
fs.readFileSync(`../README.md`, 'utf8')
);
- return { props: { versions, readme } };
-}
-export default function Home({ versions, readme }: Props) {
return (
-
-
-
Immutable.js
-
+ <>
+
-
-
-
{`${def.qualifiedName} — Immutable.js`}
-
-
-
-
-
-
-
-
Documentation — Immutable.js
-
-
-
-
diff --git a/website/src/ImmutableConsole.tsx b/website/src/ImmutableConsole.tsx
index 548bba14a7..81f417855a 100644
--- a/website/src/ImmutableConsole.tsx
+++ b/website/src/ImmutableConsole.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import { useEffect } from 'react';
type InstallSpace = {
diff --git a/website/src/MarkdownContent.tsx b/website/src/MarkdownContent.tsx
index 3918b26b63..7f90fca400 100644
--- a/website/src/MarkdownContent.tsx
+++ b/website/src/MarkdownContent.tsx
@@ -1,5 +1,7 @@
+'use client';
+
import { memo, MouseEvent } from 'react';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
type Props = {
contents: string;
diff --git a/website/src/MemberDoc.tsx b/website/src/MemberDoc.tsx
index cb9b42d4ac..7d36ff2c52 100644
--- a/website/src/MemberDoc.tsx
+++ b/website/src/MemberDoc.tsx
@@ -36,9 +36,7 @@ export function MemberDoc({ member }: { member: MemberDefinition }) {
Inherited from
-
- {member.inherited.interface}#{member.inherited.label}
-
+ {member.inherited.interface}#{member.inherited.label}
@@ -48,9 +46,7 @@ export function MemberDoc({ member }: { member: MemberDefinition }) {
Overrides
-
- {member.overrides.interface}#{member.overrides.label}
-
+ {member.overrides.interface}#{member.overrides.label}
diff --git a/website/src/Sidebar.tsx b/website/src/Sidebar.tsx
index 4addbe38f1..b19b5ee392 100644
--- a/website/src/Sidebar.tsx
+++ b/website/src/Sidebar.tsx
@@ -1,16 +1,13 @@
+'use client';
+
import Link from 'next/link';
import { Fragment, useEffect, useState } from 'react';
-import type { TypeDefinition, TypeDefs } from './TypeDefs';
+import type { TypeDefinition } from './TypeDefs';
import { collectMemberGroups } from './collectMemberGroups';
import { ArrowDown } from './ArrowDown';
export type SidebarLinks = Array<{ label: string; url: string }>;
-// Only used statically
-export function getSidebarLinks(defs: TypeDefs): SidebarLinks {
- return Object.values(defs.types).map(({ label, url }) => ({ label, url }));
-}
-
function Links({
links,
focus,
@@ -40,24 +37,24 @@ function Links({
isActive ? 'sideBar__Link--active' : ''
}`}
>
-
+ {
+ if (isCurrent) {
+ e.preventDefault();
+ setIsForcedClosed(!isForcedClosed);
+ }
+ }}
+ >
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/anchor-is-valid */}
- {
- if (isCurrent) {
- e.preventDefault();
- setIsForcedClosed(!isForcedClosed);
- }
- }}
- >
- {link.label}
- {isActive && (focus?.interface || focus?.functions) && (
- <>
- {' '}
-
-
- )}
-
+
+ {link.label}
+ {isActive && (focus?.interface || focus?.functions) && (
+ <>
+ {' '}
+
+
+ )}
diff --git a/website/src/TypeDocumentation.tsx b/website/src/TypeDocumentation.tsx
index 8b7346c778..b8e1955fa4 100644
--- a/website/src/TypeDocumentation.tsx
+++ b/website/src/TypeDocumentation.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import { Fragment, useReducer } from 'react';
import { InterfaceDef, CallSigDef } from './Defs';
diff --git a/website/src/app/docs/[version]/[type]/page.tsx b/website/src/app/docs/[version]/[type]/page.tsx
new file mode 100644
index 0000000000..15b1a88ac0
--- /dev/null
+++ b/website/src/app/docs/[version]/[type]/page.tsx
@@ -0,0 +1,72 @@
+import { DocHeader } from '../../../../DocHeader';
+import { ImmutableConsole } from '../../../../ImmutableConsole';
+import { getSidebarLinks } from '../../../../getSidebarLinks';
+import { getTypeDefs } from '../../../../static/getTypeDefs';
+import { getVersions } from '../../../../static/getVersions';
+import { TypeDocumentation } from '../../../../TypeDocumentation';
+import { getVersionFromParams } from '../../../getVersionFromParams';
+
+export async function generateStaticParams() {
+ return getVersions()
+ .map(version =>
+ Object.values(getTypeDefs(version).types).map(def => ({
+ version,
+ type: def.label,
+ }))
+ )
+ .flat();
+}
+
+type Params = {
+ version: string;
+ type: string;
+};
+
+type Props = {
+ params: Params;
+};
+
+export async function generateMetadata({ params }: Props) {
+ const version = getVersionFromParams(params);
+ const defs = getTypeDefs(version);
+ const def = Object.values(defs.types).find(d => d.label === params.type);
+
+ if (!def) {
+ throw new Error('404');
+ }
+
+ return {
+ title: `${def.qualifiedName} — Immutable.js`,
+ };
+}
+
+export default function TypeDocPage({
+ // versions,
+ // version,
+ // def,
+ // sidebarLinks,
+ params,
+}: Props) {
+ const versions = getVersions();
+ const version = getVersionFromParams(params);
+ const defs = getTypeDefs(version);
+
+ const def = Object.values(defs.types).find(d => d.label === params.type);
+
+ if (!def) {
+ throw new Error('404');
+ }
+
+ const sidebarLinks = getSidebarLinks(defs);
+ return (
+
+ );
+}
diff --git a/website/src/pages/docs/[version]/index.tsx b/website/src/app/docs/[version]/page.tsx
similarity index 52%
rename from website/src/pages/docs/[version]/index.tsx
rename to website/src/app/docs/[version]/page.tsx
index fcf7497519..5ec72e443e 100644
--- a/website/src/pages/docs/[version]/index.tsx
+++ b/website/src/app/docs/[version]/page.tsx
@@ -1,67 +1,43 @@
-import Head from 'next/head';
+import { Metadata } from 'next';
import { getVersions } from '../../../static/getVersions';
import { getTypeDefs } from '../../../static/getTypeDefs';
import { DocHeader } from '../../../DocHeader';
-import {
- DocOverview,
- getOverviewData,
- OverviewData,
-} from '../../../DocOverview';
+import { DocOverview, getOverviewData } from '../../../DocOverview';
import { DocSearch } from '../../../DocSearch';
import { ImmutableConsole } from '../../../ImmutableConsole';
-import { SideBar, getSidebarLinks, SidebarLinks } from '../../../Sidebar';
+import { SideBar } from '../../../Sidebar';
+import { getSidebarLinks } from '../../../getSidebarLinks';
+import { getVersionFromParams } from '../../getVersionFromParams';
+
+export async function generateStaticParams() {
+ return [...getVersions().map(version => ({ version }))];
+}
type Params = {
version: string;
};
type Props = {
- versions: Array