Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(website): minor various improvements to website and docs #13121

Merged
merged 4 commits into from
Feb 9, 2023
Merged

feat(website): minor various improvements to website and docs #13121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f687529
update button
dionysuzx Feb 8, 2023
45c6132
center the footer
dionysuzx Feb 8, 2023
bff4be7
cleanup footer and refactor docs
dionysuzx Feb 8, 2023
e1c0f15
make homepage more centered on large screen
dionysuzx Feb 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 112 additions & 123 deletions packages/website/components/Footer.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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