feat: MRPC-7111 Migrate to Nextra 4 and nextjs 16

.env

@@ -1,3 +1,4 @@
+NEXT_PUBLIC_APP_URL=https://www.ankr.com/docs
 NEXT_PUBLIC_WEB3_API_AUTH_APP_ID=MultiRPC
 NEXT_PUBLIC_WEB3_API_AUTH_APP_PATH=ankr.com/rpc/auth/
 NEXT_PUBLIC_WEB3_API_AUTH_PATH=https://auth.ankr.com/

.github/workflows/deploy.yml

@@ -100,4 +100,4 @@ jobs:
         env:
           DOMAIN: ${{ vars[format('{0}{1}', github.event.inputs.environment, '_DOMAIN')] }}
         run: |
-          node redirects.js
+          node redirects.mjs

.gitignore

@@ -108,3 +108,6 @@ out/
 
 sitemap.xml
 
+# Generated index files
+_pagefind/
+

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "jsxSingleQuote": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "semi": true,
+  "arrowParens": "avoid",
+  "tabWidth": 2,
+  "printWidth": 80
+}

README.md

@@ -118,7 +118,7 @@ git checkout stage && git checkout -b `<type>/<JIRA-TASK-NUMBER-description>`
 ┌ ○ .github 
 ├     ○ workflows 
 ├         deploy.yml — workflows for deploying the project via GitHub Actions.
-├ ○ pages — source files with the content to generate static HTML files from.
+├ ○ content — source files with the content to generate static HTML files from.
 ├ ○ public — images to use in the docs.
 ├ ○ src  
 ├     ○ components — custom React components to import and use in the project.
@@ -132,7 +132,7 @@ git checkout stage && git checkout -b `<type>/<JIRA-TASK-NUMBER-description>`
 ├   package.json — project dependencies and dev commands.
 ├   postcss.config.js — configuration file listing additional packages to import to Nextra.
 ├   README.md — readme of the project.
-├   redirects.js — redirects solution.
+├   redirects.mjs — redirects solution.
 ├   redirects.json — map of redirects for the redirects solution.
 ├   tailwind.config.js — additional CSS framework (imported in postcss.config.js).
 ├   theme.config.tsx — configuration file for Nextra with the essential project parameters.

app/[[...mdxPath]]/page.tsx

@@ -0,0 +1,53 @@
+import type { Metadata } from 'next';
+import { generateStaticParamsFor, importPage } from 'nextra/pages';
+
+import { useMDXComponents as getMDXComponents } from '../../mdx-components';
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath');
+
+interface PageProps {
+  params: Promise<{ mdxPath?: string[] }>;
+  searchParams?: Promise<Record<string, string | string[]>>;
+}
+
+// dynamic metadata
+export async function generateMetadata(props: PageProps): Promise<Metadata> {
+  const params = await props.params;
+
+  const { metadata } = await importPage(params.mdxPath);
+
+  return {
+    ...metadata,
+    alternates: {
+      canonical:
+        process.env.NEXT_PUBLIC_APP_URL +
+        '/' +
+        (params.mdxPath?.join('/') ?? ''),
+    },
+    appleWebApp: {
+      ...(metadata.appleWebApp && typeof metadata.appleWebApp === 'object'
+        ? metadata.appleWebApp
+        : {}),
+      title: metadata.title,
+    },
+  };
+}
+
+const Wrapper = getMDXComponents().wrapper;
+
+export default async function Page(props: PageProps) {
+  const params = await props.params;
+
+  const {
+    default: MDXContent,
+    toc,
+    metadata,
+    sourceCode,
+  } = await importPage(params.mdxPath);
+
+  return (
+    <Wrapper toc={toc} metadata={metadata} sourceCode={sourceCode}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  );
+}

app/layout.tsx

@@ -0,0 +1,93 @@
+import type { Metadata } from 'next';
+import { Layout } from 'nextra-theme-docs';
+import { Head } from 'nextra/components';
+import { getPageMap } from 'nextra/page-map';
+import 'nextra-theme-docs/style.css';
+
+import { Navbar } from 'components/Navbar';
+import 'styles/global.css';
+import { Footer } from 'components/Footer';
+
+const title = 'Welcome to Ankr Docs';
+
+// static metadata
+export const metadata: Metadata = {
+  alternates: {
+    canonical: process.env.NEXT_PUBLIC_APP_URL + '/',
+  },
+  appleWebApp: {
+    title,
+  },
+  description: 'Ankr is the leading Web3 infrastructure company.',
+  icons: {
+    apple: [
+      {
+        sizes: '180x180',
+        url: '/docs/favicon/apple-icon-180x180.png',
+      },
+    ],
+    icon: [
+      {
+        type: 'image/x-icon',
+        url: '/docs/favicon/favicon.ico',
+      },
+      {
+        sizes: '16x16',
+        type: 'image/png',
+        url: '/docs/favicon/favicon-16x16.png',
+      },
+      {
+        sizes: '32x32',
+        type: 'image/png',
+        url: '/docs/favicon/favicon-32x32.png',
+      },
+    ],
+    other: [
+      {
+        rel: 'mask-icon',
+        url: '/docs/favicon/safari-pinned-tab.svg',
+        color: '#000000',
+      },
+    ],
+  },
+  manifest: '/docs/favicon/site.webmanifest',
+  metadataBase: process.env.NEXT_PUBLIC_APP_URL,
+  openGraph: {
+    images: ['docs/og/image.png'],
+  },
+  robots: 'index,follow',
+  title: {
+    default: title,
+    template: '%s — Ankr',
+  },
+  twitter: {
+    images: ['docs/og/image.png'],
+  },
+};
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html dir="ltr" lang="en" suppressHydrationWarning>
+      <Head>
+        <meta name="msapplication-TileColor" content="#ffffff" />
+      </Head>
+      <body>
+        <Layout
+          docsRepositoryBase="https://github.com/Ankr-network/ankr-docs/blob/main"
+          footer={<Footer />}
+          navbar={<Navbar />}
+          sidebar={{
+            defaultMenuCollapseLevel: 1,
+          }}
+          pageMap={await getPageMap()}
+        >
+          {children}
+        </Layout>
+      </body>
+    </html>
+  );
+}

content/_meta.tsx

@@ -0,0 +1,79 @@
+import { Web3APIButtonLazy } from 'components/Web3APIButton';
+import type { MetaRecord } from 'nextra';
+
+const meta: MetaRecord = {
+  index: 'Welcome to Ankr Docs',
+  'info-map': 'Information Map',
+  privacy: 'Privacy Policy',
+  'whats-new': "What's New",
+  '-- Building': {
+    title: 'Building With Ankr',
+    type: 'separator',
+  },
+  'rpc-service': 'Node API',
+  'advanced-api': 'Advanced API',
+  'node-snapshot': 'Blockchain Node Snapshots',
+  'node-runners': {
+    display: 'hidden',
+    title: 'Node Runners',
+  },
+  automation: 'Contract Automation',
+  '-- Tutorials': {
+    title: 'Ankr Tutorials',
+    type: 'separator',
+  },
+  'basic-tutorials': 'Basic Tutorials',
+  'smart-contract-tutorials': 'Smart Contract Development',
+  'advanced-tutorials': 'Advanced Tutorials',
+  '-- Scaling with Asphere': {
+    type: 'separator',
+    title: 'Scaling with Asphere',
+  },
+  'scaling-services-overview': 'Scaling Services Overview',
+  'scaling-services-nocode-deployer': 'No-Code Deployer',
+  'scaling-services-bsi': 'Bitcoin Secured Infrastructure',
+  'scaling-services-rollups': 'Rollups',
+  'scaling-services-sidechains': 'Sidechains',
+  '-- Staking': {
+    title: 'Staking With Ankr',
+    type: 'separator',
+  },
+  'staking-overview': 'Overview',
+  'staking-for-developers': 'For Developers',
+  'delegated-staking': 'Delegated Staking',
+  'liquid-staking': 'Liquid Staking',
+  'liquid-crowdloan': 'Liquid Crowdloan',
+  defi: 'DeFi',
+  bridge: 'Bridge',
+  switch: 'Switch',
+  'staking-extra': 'Extra',
+  '-- Gaming': {
+    title: 'Making Games',
+    type: 'separator',
+  },
+  'gaming-overview': 'Mirage Gaming',
+
+  '-- Support': {
+    title: 'Support',
+    type: 'separator',
+  },
+  support: {
+    href: 'https://ankrnetwork.atlassian.net/servicedesk/customer/portal/10',
+    title: 'Request Support',
+  },
+  'knowledge-base': {
+    href: 'https://ankrnetwork.atlassian.net/wiki/spaces/EUSKB/overview',
+    title: 'Knowledge Base',
+  },
+  ankr: {
+    href: 'https://ankr.com',
+    title: 'To Ankr',
+    type: 'page',
+  },
+  web3APIButton: {
+    title: <Web3APIButtonLazy visibility="mobile" />,
+    type: 'separator',
+  },
+};
+
+export default meta;

content/advanced-api/_meta.ts

@@ -0,0 +1,20 @@
+import type { MetaRecord } from 'nextra';
+
+const meta: MetaRecord = {
+  overview: 'Overview',
+  pricing: 'Pricing',
+  'nft-methods': 'NFT API',
+  'query-methods': 'Query API',
+  'token-methods': 'Token API',
+  specification: {
+    title: 'API Reference',
+    type: 'page',
+    href: 'https://api-docs.ankr.com/reference/',
+  },
+  'javascript-sdk': 'Ankr.js SDK',
+  'python-sdk': 'Ankr.py SDK',
+  'react-hooks': 'Ankr React Hooks',
+  quickstart: 'Quickstart Guide',
+};
+
+export default meta;