Skip to content

Commit

Permalink
feat(website): minor various improvements to website and docs (#13121)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dionysuzx
dionysuzx authored Feb 9, 2023
1 parent ff99f50 commit 6cd06f1
Show file tree
Hide file tree
Showing 12 changed files with 212 additions and 206 deletions.
235 changes: 112 additions & 123 deletions packages/website/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,120 @@
import { ThemeSwitch, useConfig } from "nextra-theme-docs";

export default function Footer({ menu }) {
const config = useConfig();

export default function Footer() {
return (
<footer className="bg-neutral-100 dark:bg-neutral-900">
<div
className={`nx-mx-auto nx-flex nx-py-2 px-8 nx-border dark:nx-border-neutral-800 contrast-more:nx-border-neutral-400
${menu && (config.darkMode)
? 'nx-flex'
: 'nx-hidden'
}`}
>
{config.darkMode && <ThemeSwitch />}
</div>
<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://mirror.xyz/labs.taiko.eth"
className="hover:underline"
target={"_blank"}
>
Blog
</a>
</li>
<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" 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>
<li className="mb-4">
<a
href="https://taikoxyz.github.io/taiko-mono/taiko-whitepaper.pdf"
className="hover:underline"
target={"_blank"}
>
Whitepaper
</a>
</li>
</ul>
<div className="mx-auto max-w-[90rem]">
<div className="grid grid-cols-2 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] py-8 md:grid-cols-3 ">
<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://mirror.xyz/labs.taiko.eth"
className="hover:underline"
target={"_blank"}
>
Blog
</a>
</li>
<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" 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>
<li className="mb-4">
<a
href="https://taikoxyz.github.io/taiko-mono/taiko-whitepaper.pdf"
className="hover:underline"
target={"_blank"}
>
Whitepaper
</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>
<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 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>
</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>
);
}
64 changes: 33 additions & 31 deletions packages/website/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,41 +37,43 @@ export default function Hero() {
}

return (
<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 ">
<h1 className="font-oxanium text-4xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
A <span className="text-[#e30ead]">Type 1</span> ZK-EVM
</h1>
<p className="font-oxanium mt-3 text-lg text-neutral-600 sm:text-xl md:mt-5 dark:text-neutral-100">
Fully decentralized, Ethereum-equivalent ZK-Rollup.
</p>
<div className="mt-10 flex md:justify-left">
<div className="inline-flex rounded-md shadow">
<a
href="/docs/testnet-guide"
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 Testnet 🌋
</a>
<div className="mx-auto max-w-[90rem]">
<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="pl-[max(env(safe-area-inset-left),1.5rem)]">
<h1 className="font-oxanium text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100">
A <span className="text-[#e30ead]">Type 1</span> ZK-EVM
</h1>
<p className="font-oxanium mt-3 text-lg text-neutral-600 sm:text-xl md:mt-5 dark:text-neutral-100">
Fully decentralized, Ethereum-equivalent ZK-Rollup.
</p>
<div className="mt-10 flex md:justify-left">
<div className="inline-flex rounded-md shadow">
<a
href="/docs/"
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"
>
Get started
</a>
</div>
</div>
</div>
</div>
</div>

<div
id="taikoGeomParent"
className="absolute inset-y-0 right-0 overflow-hidden h-full w-11/12 lg:absolute lg:inset-y-0 lg:right-0 lg:h-full lg:w-1/2"
>
<img
id="taikoGeom"
className="absolute z-0 -right-6 overflow-visible h-full w-full object-cover max-w-none"
src="/images/Taiko_GEOM_1_Fluo_Sliced.svg"
alt=""
/>
</div>
</main>
<div
id="taikoGeomParent"
className="absolute inset-y-0 right-0 overflow-hidden h-full w-11/12 lg:absolute lg:inset-y-0 lg:right-0 lg:h-full lg:w-1/2"
>
<img
id="taikoGeom"
className="absolute z-0 -right-6 overflow-visible h-full w-full object-cover max-w-none"
src="/images/Taiko_GEOM_1_Fluo_Sliced.svg"
alt=""
/>
</div>
</main>
</div>
</div>
);
}
4 changes: 2 additions & 2 deletions packages/website/pages/_meta.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
"href": "https://mirror.xyz/labs.taiko.eth",
"newWindow": true
},
"Snæfellsjökull": {
"title": "Snæfellsjökull Testnet",
"testnet-links-dropdown": {
"title": "Testnet Links",
"type": "menu",
"items": {
"status": {
Expand Down
4 changes: 2 additions & 2 deletions packages/website/pages/docs/_meta.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"index": {
"title": "Introduction"
"title": "Introduction 👋"
},
"learn": {
"title": "Learn"
},
"testnet-guide": {
"title": "Alpha-1 Testnet Guide"
"title": "Guides"
},
"reference": {
"title": "Reference"
Expand Down
41 changes: 38 additions & 3 deletions packages/website/pages/docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,46 @@

Taiko is a fully decentralized, Ethereum-equivalent ZK-Rollup. This is also referred to as a [Type 1 ZK-EVM](https://mirror.xyz/labs.taiko.eth/w7NSKDeKfJoEy0p89I9feixKfdK-20JgWF9HZzxfeBo).

### Testnet guide
And welcome to the official Taiko documentation! This is your one-stop shop for all things Taiko. You will finds:

Follow the [Alpha-1 testnet guide](/docs/testnet-guide/) to get started with using Taiko.
- **Learn**: Learn about how Taiko works
- **Guides**: Easy to follow guides to build on and use Taiko
- **Reference**: Quick reference documentation about the network (e.g., contract addresses, protocol configurations)
- **Resources**: Additional resources for your knowledge

### Learn more
## The Alpha-1 (Snæfellsjökull) Testnet

There are two networks involved in the alpha-1 testnet:

- **Taiko A1** is the Alpha-1 testnet release of Taiko: A fully decentralized, Ethereum-equivalent ZK-Rollup.
- **Ethereum A1** is Taiko's privately deployed Ethereum network, which serves as the L1 for Taiko's Alpha-1 testnet.

The testnet consists of L1 / L2 nodes with all of the Taiko protocol contracts deployed. The mining interval of the L1 node is set to 12 seconds. There is also a cron job service that proposes empty blocks every two minutes.

### Use the testnet

In this testnet, you can:

- 🌉 Bridge tokens between Ethereum A1 and Taiko A1.
- 🤝 Send transactions (e.g., deploy a dapp, interact with a contract).
- 🌐 Run a node—this makes **you** a part of Taiko!

Check out the guides in the left sidebar to use the testnet!

### Navigate the testnet

All the relevant links can be found in this site's navigation bar at the top. The relevant links are:

| Link | Purpose |
| ----------------------------------------------- | -------------------------------------------------- |
| [Status](https://status.a1.taiko.xyz/) | Taiko protocol status |
| [Bridge](https://bridge.a1.taiko.xyz/) | Bridge ETH/tokens between Ethereum A1 and Taiko A1 |
| [L1 faucet](https://l1faucet.a1.taiko.xyz/) | For receiving ETH on Ethereum A1 |
| [L2 faucet](https://l2faucet.a1.taiko.xyz/) | For receiving ETH on Taiko A1 |
| [L1 explorer](https://l1explorer.a1.taiko.xyz/) | Explore blocks on Ethereum A1 |
| [L2 explorer](https://l2explorer.a1.taiko.xyz/) | Explore blocks on Taiko A1 |

## Learn more about Taiko

This documentation website is currently under construction 🚧. In the meantime, you can check out these resources:

Expand Down
Loading

0 comments on commit 6cd06f1

Please sign in to comment.