docs: initial landing page

package.json

@@ -68,5 +68,10 @@
       "pnpm format",
       "pnpm lint:fix"
     ]
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
+    }
   }
 }

patches/vitepress@1.0.0-alpha.34.patch

@@ -0,0 +1,25 @@
+diff --git a/dist/client/theme-default/index.js b/dist/client/theme-default/index.js
+index 3b7ecabca5c5db4ca2b2d36762041741666bfef9..7c51f7d43e75d1e38789fe8e99b241774942252f 100644
+--- a/dist/client/theme-default/index.js
++++ b/dist/client/theme-default/index.js
+@@ -10,6 +10,7 @@ import './styles/components/vp-sponsor.css';
+ import VPBadge from './components/VPBadge.vue';
+ import Layout from './Layout.vue';
+ import NotFound from './NotFound.vue';
++export { default as VPButton } from './components/VPButton.vue';
+ export { default as VPHomeHero } from './components/VPHomeHero.vue';
+ export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';
+ export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';
+diff --git a/jsconfig.json b/jsconfig.json
+new file mode 100644
+index 0000000000000000000000000000000000000000..9cffa9d0541a68d18ff74b0f53a8b4625f103e69
+--- /dev/null
++++ b/jsconfig.json
+@@ -0,0 +1,7 @@
++{
++  "typeAcquisition": {
++    "include": [
++      "wechat-miniprogram"
++    ]
++  }
++}

site/.vitepress/config.ts

@@ -23,6 +23,10 @@ export default defineConfig({
     ],
   ],
 
+  markdown: {
+    theme: 'github-dark',
+  },
+
   themeConfig: {
     algolia: {
       appId: 'todo',
@@ -42,6 +46,11 @@ export default defineConfig({
 
     logo: { light: '/icon-light.png', dark: '/icon-dark.png' },
 
+    nav: [
+      { text: 'Docs', link: '/docs/getting-started', activeMatch: '/docs' },
+      { text: 'Examples', link: '/examples' },
+    ],
+
     outline: [2, 3],
 
     sidebar,

site/.vitepress/theme/index.css

@@ -3,6 +3,7 @@
 @tailwind utilities;
 
 :root {
+  --vp-button-brand-bg: #ffc517;
   --vp-button-brand-text: var(--vp-c-black);
   --vp-button-brand-hover-text: var(--vp-c-black);
 
@@ -13,9 +14,16 @@
   --vp-c-brand-darker: var(--vp-c-yellow-darker);
 
   --vp-c-text-light-1: var(--vp-c-black-soft);
+
+  --vp-code-line-highlight-color: rgb(255 197 22 / 10%);
+  --vp-code-font-size: 15px;
+
+  --vp-c-yellow: #e0a800;
 }
 
 .dark {
+  --vp-c-yellow: #ffc517;
+
   --vp-c-brand: var(--vp-c-yellow);
 }
 

site/index.md

@@ -1,17 +1,161 @@
 ---
-layout: home
-
+aside: false
+editLink: false
 title: viem
 titleTemplate: TypeScript Interface for Ethereum
-
-hero:
-  name: viem
-  text: TypeScript Interface for Ethereum
-  actions:
-    - theme: brand
-      text: Get Started
-      link: /docs/getting-started
-    - theme: alt
-      text: View on GitHub
-      link: https://github.com/wagmi-dev/viem
 ---
+
+<script setup lang="ts">
+import { VPButton } from 'vitepress/theme'
+</script>
+
+<div class="flex justify-center mx-auto text-center">
+  <div class="flex space-y-6 flex-col items-center">
+    <div class="flex flex-col space-y-4 items-center">
+      <img class="h-14 w-min logo" src="/logo-light-hug.svg" alt="viem logo">
+      <span class="text-2xl opacity-80">TypeScript Interface for Ethereum</span>
+    </div>
+    <div class="flex gap-2 max-w-xl">
+      <a aria-label="Version" href="https://www.npmjs.com/package/viem">
+        <img
+          alt="version"
+          src="https://img.shields.io/npm/v/viem?colorA=2B323B&colorB=1e2329&style=flat&label=Version"
+        />
+      </a>
+      <a aria-label="Coverage" href="https://codecov.io/github/wagmi-dev/viem">
+        <img
+          alt="coverage"
+          src="https://codecov.io/github/wagmi-dev/viem/branch/main/graph/badge.svg?token=iUTN9R4Qfg"
+        />
+      </a>
+      <a aria-label="License" href="https://www.npmjs.com/package/viem">
+        <img
+          alt=""
+          src="https://img.shields.io/github/license/wagmi-dev/viem?colorA=2B323B&colorB=1e2329&style=flat&label=License"
+        />
+      </a>
+    </div>
+    <span class="text-xl max-w-xl">Feel like an Ethereum rockstar with viem – <span class="text-yellow-500 dark:text-yellow-400 font-medium">lightweight</span>, <span class="text-yellow-500 dark:text-yellow-400 font-medium">modular</span> & <span class="text-yellow-500 dark:text-yellow-400 font-medium">type-safe</span> building blocks for interacting with Ethereum.</span>
+  </div>
+</div>
+
+<div class="install h-6" />
+
+::: code-group
+
+```bash [npm]
+npm i viem
+```
+
+```bash [pnpm]
+pnpm i viem
+```
+
+```bash [yarn]
+yarn add viem
+```
+
+:::
+
+<div class="h-4" />
+
+<div class="flex justify-center space-x-2">
+  <VPButton tag="a" size="medium" theme="brand" href="/docs/getting-started" text="Get Started" />
+  <VPButton class="max-lg:hidden" tag="a" size="medium" theme="alt" href="/docs/introduction" text="Why viem?" />
+  <VPButton tag="a" size="medium" theme="alt" href="https://github.com/wagmi-dev/viem" text="View on GitHub" />
+</div>
+
+<div class="h-16" />
+
+<div class="flex flex-wrap lg:-mx-[190px]">
+  <div class="p-1 w-1/4 max-lg:w-1/2 max-sm:w-full">
+    <div class="card rounded-l sm:h-32 p-6 space-y-2">
+      <span class="font-semibold">Modular</span>
+      <p class="text-[14px] font-medium leading-6" style="color: var(--vp-c-text-2)">
+        Composable modules to build dapps & libraries with speed.
+      </p>
+    </div>
+  </div>
+  <div class="p-1 w-1/4 max-lg:w-1/2 max-sm:w-full">
+    <div class="card rounded-l sm:h-32 p-6 space-y-2">
+      <span class="font-semibold">Lightweight</span>
+      <p class="text-[14px] font-medium leading-6" style="color: var(--vp-c-text-2)">
+        Tiny 23kB bundle – optimized for tree-shaking.
+      </p>
+    </div>
+  </div>
+  <div class="p-1 w-1/4 max-lg:w-1/2 max-sm:w-full">
+    <div class="card rounded-l sm:h-32 p-6 space-y-2">
+      <span class="font-semibold">Performant</span>
+      <p class="text-[14px] font-medium leading-6" style="color: var(--vp-c-text-2)">
+        Optimized architecture compared to alternate libraries.
+      </p>
+    </div>
+  </div>
+  <div class="p-1 w-1/4 max-lg:w-1/2 max-sm:w-full">
+    <div class="card rounded-l sm:h-32 p-6 space-y-2">
+      <span class="font-semibold">Typed APIs</span>
+      <p class="text-[14px] font-medium leading-6" style="color: var(--vp-c-text-2)">
+        Flexible programmatic APIs with full TypeScript typing.
+      </p>
+    </div>
+  </div>
+</div>
+
+<div class="h-16" />
+
+<h1>Overview</h1>
+<hr class="h-2" />
+
+```ts
+// 1. Import modules.
+import { createPublicClient, getBlockNumber, http } from 'viem'
+import { mainnet } from 'viem/chains'
+
+// 2. Set up your client with desired chain & transport.
+const client = createPublicClient({
+  chain: mainnet,
+  transport: http(),
+})
+
+// 3. Consume an action!
+const blockNumber = await getBlockNumber(client)
+```
+
+<style scoped>
+  .dark .logo {
+    filter: invert(1);
+  }
+
+  .card {
+    background-color: var(--vp-c-bg-soft);
+  }
+
+  .language-bash {
+    overflow-y: hidden;
+  }
+
+  .vp-code-group .tabs label {
+    line-height: 36px;
+  }
+
+  .install + .vp-code-group {
+    font-size: 18px;
+    margin: 0 auto;
+    max-width: 300px;
+  }
+
+  .install + .vp-code-group .vp-doc [class*='language-'] pre {
+    overflow: hidden;
+  }
+
+  .install + .vp-code-group [class*='language-'] code {
+    display: flex;
+    justify-content: center;
+  }
+
+  .tabs {
+    display: flex;
+    justify-content: center;
+  }
+</style>

site/tailwind.config.js

@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./**/*.{js,ts,jsx,tsx}'],
+  content: ['./**/*.{js,ts,jsx,tsx,md}'],
+  darkMode: 'class',
+  important: true,
   theme: {
     extend: {},
   },