feat(website): migrate to nextra

.github/workflows/website.yml

@@ -46,9 +46,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install Packages
-        working-directory: ./packages/website
-        run: pnpm install
+        run: pnpm -F website install
 
       - name: Build Website
-        working-directory: ./packages/website
-        run: pnpm build
+        run: pnpm -F website build

package.json

@@ -11,6 +11,6 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "husky": "^8.0.1"
+    "husky": "^8.0.3"
   }
 }

packages/bridge-ui/src/components/HeaderAnnouncement.svelte

@@ -4,8 +4,9 @@
       <p class="font-medium text-white">
         <span class="md:inline"
           >Receive some tokens for bridging with our <a
-            href="https://taiko.xyz/docs/alpha-1-testnet/request-from-faucet"
+            href="https://taiko.xyz/docs/alpha-1-testnet-guide/request-from-faucet"
             target="_blank"
+            rel="noopener noreferrer"
             class="font-bold text-white underline">faucet</a
           >.</span
         >

packages/protocol/contracts/bridge/Bridge.sol

@@ -19,7 +19,7 @@ import "./libs/LibBridgeStatus.sol";
 
 /**
  * Bridge contract which is deployed on both L1 and L2. Mostly a thin wrapper
- * which calls the library implementations. See {IBridge} for more details.
+ * which calls the library implementations. See _IBridge_ for more details.
  *
  * @author dantaik <dan@taiko.xyz>
  * @dev The code hash for the same address on L1 and L2 may be different.

packages/protocol/hardhat.config.ts

@@ -22,7 +22,7 @@ const config: HardhatUserConfig = {
             "thirdparty/",
             "common/EssentialContract.sol",
         ],
-        outputDir: "../website/docs/smart-contracts/",
+        outputDir: "../website/pages/docs/contract-documentation/",
         pages: "files",
         templates: "./solidity-docgen/templates",
     },

packages/protocol/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "compile": "pnpm hardhat preprocess && pnpm hardhat compile",
     "export:abi": "pnpm hardhat clear-abi && pnpm hardhat export-abi",
-    "export:docs": "pnpm hardhat docgen && pnpm prettier --write ../website/docs/smart-contracts/**/*.md",
+    "export:docs": "pnpm hardhat docgen && pnpm prettier --write ../website/pages/docs/contract-documentation/**/*.md",
     "clean": "rm -rf abis cache && pnpm hardhat clean",
     "lint:sol": "pnpm prettier '**/*.sol' --write && pnpm solhint 'contracts/**/*.sol' --fix",
     "eslint": "pnpm exec eslint --ignore-path .eslintignore --ext .js,.ts .",

packages/protocol/solidity-docgen/templates/contract.hbs

@@ -1,8 +1,11 @@
+---
+title: {{name}}
+---
 {{>common}}
 
 {{#each items}}
 {{#hsection}}
 {{>item}}
 {{/hsection}}
 
-{{/each}}
+{{/each}}

packages/protocol/solidity-docgen/templates/page.hbs

@@ -3,4 +3,4 @@
 {{>item}}
 {{/hsection}}
 
-{{/each}}
+{{/each}}

packages/website/.gitignore

@@ -1,20 +1,2 @@
-# Dependencies
-/node_modules
-
-# Production
-/build
-
-# Generated files
-.docusaurus
-.cache-loader
-
-# Misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+.next
+node_modules

packages/website/README.md

@@ -3,13 +3,17 @@
 ## Pre-Installation
 
 Make sure you have pnpm installed on your system. You can install it by npm as well:
+
 ```sh
 npm install -g pnpm
 ```
+
 or on any POSIX systems by wget one-line official command:
+
 ```sh
 wget -qO- https://get.pnpm.io/install.sh | sh -
 ```
+
 for any specific cases or systems check the official page https://pnpm.io/installation
 
 ## Installation
@@ -23,7 +27,7 @@ pnpm install
 Start a local development server:
 
 ```sh
-pnpm start
+pnpm dev
 ```
 
 ## Contributing

packages/website/src/components/AddEthereumChainButton/index.tsx → packages/website/components/AddEthereumChainButton.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 type Props = {
   buttonText: string;
   chain: string;
@@ -52,7 +50,7 @@ async function addEthereumChain(chain: string) {
   });
 }
 
-export default function AddEthereumChainButton(props: Props): JSX.Element {
+export default function AddEthereumChainButton(props: Props) {
   return (
     <div
       onClick={() => addEthereumChain(props.chain)}

packages/website/src/components/BlogSection/index.tsx → packages/website/components/BlogSection.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const posts = [
   {
     title: "Taiko Ambassador Program",
@@ -47,19 +45,17 @@ const posts = [
     },
   },
 ];
-/**
- * @returns Blog section displaying latest Taiko blog posts from Mirror
- */
-export default function BlogSection(): JSX.Element {
+
+export default function BlogSection() {
   return (
-    <div className="relative bg-neutral-50 px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28 dark:bg-neutral-800">
+    <div className="relative bg-neutral-50 px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28 dark:bg-neutral-900">
       <div className="absolute inset-0">
-        <div className="h-1/3 bg-white sm:h-2/3 dark:bg-[#1B1B1D]" />
+        <div className="h-1/3 bg-white sm:h-2/3 dark:bg-neutral-900" />
       </div>
       <div className="relative mx-auto max-w-7xl">
         <div className="text-center">
           <h2 className="font-oxanium text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-100">
-            Latest Blog Posts
+            Latest blog posts
           </h2>
           <div className="mx-auto mt-3 max-w-2xl text-xl text-neutral-500 sm:mt-4 dark:text-neutral-300">
             Check out the full blog at{" "}
@@ -96,18 +92,16 @@ export default function BlogSection(): JSX.Element {
                 </div>
                 <div className="mt-6 flex items-center">
                   <div className="flex-shrink-0">
-                    <a>
-                      <span className="sr-only">{post.author.name}</span>
-                      <img
-                        className="h-10 w-10 rounded-full"
-                        src={post.author.imageUrl}
-                        alt=""
-                      />
-                    </a>
+                    <span className="sr-only">{post.author.name}</span>
+                    <img
+                      className="h-10 w-10 rounded-full"
+                      src={post.author.imageUrl}
+                      alt=""
+                    />
                   </div>
                   <div className="ml-3">
-                    <div className="text-sm font-medium text-neutral-900">
-                      <a>{post.author.name}</a>
+                    <div className="text-sm font-medium text-[#fc0fc0]">
+                      {post.author.name}
                     </div>
                     <div className="flex space-x-1 text-sm text-neutral-500 dark:text-neutral-400">
                       <time dateTime={post.datetime}>{post.date}</time>

packages/website/src/components/JoinUs/index.tsx → packages/website/components/CareerSection.tsx

@@ -1,11 +1,9 @@
-import React from "react";
-
-export default function JoinUs() {
+export default function CareerSection() {
   return (
-    <div className="bg-white dark:bg-[#1B1B1D]">
+    <div className="bg-white dark:bg-neutral-900">
       <div className="mx-auto max-w-7xl py-12 px-4 text-center sm:px-6 lg:py-16 lg:px-8">
         <h2 className="font-oxanium text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-neutral-100">
-          <span className="block">Join Us 🥁</span>
+          <span className="block">Sounds fun?</span>
         </h2>
         <div className="mt-8 flex justify-center">
           <div className="inline-flex rounded-md shadow">

packages/website/src/components/Features/index.tsx → packages/website/components/FeaturesSection.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   ArrowPathIcon,
   GlobeAltIcon,
@@ -26,10 +25,10 @@ const features = [
   },
 ];
 
-export default function Features() {
+export default function FeaturesSection() {
   return (
-    <div className="mx-auto max-w-md px-6 text-center sm:max-w-2xl lg:max-w-7xl lg:px-8 dark:bg-[#1B1B1D]">
-      <div className="mt-20">
+    <div className="mx-auto max-w-md px-6 text-center sm:max-w-2xl lg:max-w-7xl lg:px-8 dark:bg-neutral-950">
+      <div className="my-20">
         <div className="grid grid-cols-1 gap-12 sm:grid-cols-1 lg:grid-cols-3">
           {features.map((feature) => (
             <div key={feature.name} className="pt-6">

packages/website/components/Footer.tsx

@@ -0,0 +1,100 @@
+export default function Footer() {
+  return (
+    <footer className="bg-neutral-100 dark:bg-neutral-900">
+      <div className="grid grid-cols-2 gap-8 px-6 py-8 md:grid-cols-3 md:px-44">
+        <div>
+          <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
+            About
+          </h2>
+          <ul className="text-neutral-500 dark:text-neutral-400">
+            <li className="mb-4">
+              <a
+                href="https://www.notion.so/taikoxyz/Taiko-Jobs-828fd7232d2c4150a11e10c8baa910a2"
+                className="hover:underline"
+                target={"_blank"}
+              >
+                Careers
+              </a>
+            </li>
+            <li className="mb-4">
+              <a
+                href="https://github.com/taikoxyz/taiko-mono/tree/main/packages/branding/"
+                className="hover:underline"
+                target={"_blank"}
+              >
+                Media kit
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div>
+          <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
+            Developers
+          </h2>
+          <ul className="text-neutral-500 dark:text-neutral-400">
+            <li className="mb-4">
+              <a href="/docs/learn/what-is-taiko" className="hover:underline">
+                Get started
+              </a>
+            </li>
+            <li className="mb-4">
+              <a
+                href="https://github.com/taikoxyz"
+                className="hover:underline"
+                target={"_blank"}
+              >
+                GitHub
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div>
+          <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
+            Follow us
+          </h2>
+          <ul className="text-neutral-500 dark:text-neutral-400">
+            <li className="mb-4">
+              <a
+                href="https://discord.gg/taikoxyz"
+                className="hover:underline"
+                target={"_blank"}
+              >
+                Discord
+              </a>
+            </li>
+            <li className="mb-4">
+              <a
+                href="https://www.reddit.com/r/taiko_xyz/"
+                className="hover:underline"
+                target={"_blank"}
+              >
+                Reddit
+              </a>
+            </li>
+            <li className="mb-4">
+              <a
+                href="https://twitter.com/taikoxyz"
+                className="hover:underline"
+                target={"_blank"}
+              >
+                Twitter
+              </a>
+            </li>
+            <li className="mb-4">
+              <a
+                href="https://www.youtube.com/@taikoxyz"
+                className="hover:underline"
+                target={"_blank"}
+              >
+                YouTube
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="text-md text-center text-neutral-500 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-900 px-4 py-6">
+        © {new Date().getFullYear()} Taiko Labs
+      </div>
+    </footer>
+  );
+}

packages/website/src/components/Hero/index.tsx → packages/website/components/Hero.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function Hero() {
   // Enlarges and decreases the opacity of the taikoGeom image upon scroll
   if (typeof window !== "undefined") {
@@ -39,7 +37,7 @@ export default function Hero() {
   }
 
   return (
-    <div className="relative bg-neutral-50 dark:bg-neutral-800">
+    <div className="relative bg-neutral-50 dark:bg-neutral-900">
       <main className="lg:relative">
         <div className="relative z-10 w-3/4 pt-16 pb-20 text-left lg:py-48">
           <div className="px-12 xl:px-32 lg:px-24 md:px-16 lg:w-full xl:pr-16 ">
@@ -52,10 +50,10 @@ export default function Hero() {
             <div className="mt-10 flex md:justify-left">
               <div className="inline-flex rounded-md shadow">
                 <a
-                  href="./docs/alpha-1-testnet/start-here"
+                  href="/docs/alpha-1-testnet-guide/get-started"
                   className="inline-flex items-center rounded-md border border-transparent bg-[#e30ead] px-5 py-3 text-base font-semibold text-white dark:text-neutral-100 hover:bg-[#bd0b90] hover:no-underline hover:text-white"
                 >
-                  Explore Snæfellsjökull 🌋
+                  Explore Snæfellsjökull Testnet 🌋
                 </a>
               </div>
             </div>
@@ -69,7 +67,7 @@ export default function Hero() {
           <img
             id="taikoGeom"
             className="absolute z-0 -right-6 overflow-visible h-full w-full object-cover max-w-none"
-            src="./img/Taiko_GEOM_1_Fluo_Sliced.svg"
+            src="/images/Taiko_GEOM_1_Fluo_Sliced.svg"
             alt=""
           />
         </div>