dope

.gitignore

@@ -6,6 +6,7 @@ esm
 lib
 tmp
 /out-tsc
+site/vocs.config.tsx.timestamp*
 
 # dependencies
 node_modules

README.md

@@ -1,8 +1,8 @@
 <p align="center">
   <a href="https://github.com/coinbase/onchainkit">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="./docs/logo/v-0-6.png">
-      <img alt="OnchainKit logo vibes" src="./docs/logo/v-0-6.png" width="auto">
+      <source media="(prefers-color-scheme: dark)" srcset="./site/public/logo/v-0-6.png">
+      <img alt="OnchainKit logo vibes" src="./site/public/logo/v-0-6.png" width="auto">
     </picture>
   </a>
 </p>

site/docs/pages/getting-started.mdx

@@ -1,3 +1,21 @@
-# Get started
+# Getting Started
 
-Hello world!
+Add OnchainKit to your project, install the required packages.
+
+## Installation
+
+```sh
+# Use Yarn
+yarn add @coinbase/onchainkit
+
+# Use NPM
+npm install @coinbase/onchainkit
+
+# Use PNPM
+pnpm add @coinbase/onchainkit
+```
+
+OnchainKit is divided into various theme utilities and components that are available for your use:
+
+- [Frame Kit](/framekit/introduction) 🖼️
+- [Identity Kit](/identitykit/introduction) 👨‍🚀

site/docs/pages/index.mdx

@@ -1,16 +1,14 @@
 ---
+title: OnchainKit · A collection of tools to build world-class onchain apps with CSS, React, and typescript.
+content:
+  width: 100%
 layout: landing
+logo: false
 ---
 
-import { HomePage } from 'vocs/components'
+<div className="absolute max-w-[1120px] mx-auto w-full top-20 bottom-0 bg-[url('/colosseum-light.svg')] dark:bg-[url('/colosseum.svg')] bg-no-repeat max-sm:w-[200%] max-sm:-left-[200px] max-sm:hidden" />
 
-<HomePage.Root>
-  <HomePage.Logo />
-  <HomePage.Tagline>My Awesome Docs</HomePage.Tagline>
-  <HomePage.InstallPackage name="vocs" type="init" />
-  <HomePage.Description>This is a description of my documentation website.</HomePage.Description>
-  <HomePage.Buttons>
-    <HomePage.Button href="/getting-started" variant="accent">Get started</HomePage.Button>
-    <HomePage.Button href="https://github.com/wevm/vocs">GitHub</HomePage.Button>
-  </HomePage.Buttons>
-</HomePage.Root>
+<div className="max-w-[1120px] mx-auto vp-doc relative px-[24px] mb-[96px] mt-[32px] md:px-0 md:mb-[64px]">
+  <div className="pt-[48px] max-sm:pt-0">
+  </div>
+</div>

site/docs/styles.css

@@ -0,0 +1,17 @@
+@layer vocs_preflight { @tailwind base; }
+@tailwind components;
+@tailwind utilities;
+
+#home-install .vocs_CodeGroup {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
+#home-install .vocs_Tabs_content {
+  flex: 1;
+}
+
+#home-install .vocs_Code {
+  font-size: 18px;
+}

site/package.json

@@ -10,9 +10,10 @@
   "dependencies": {
     "@coinbase/onchainkit": "^0.6.1",
     "@types/react": "latest",
-    "react": "latest",
-    "react-dom": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.1",
     "typescript": "latest",
-    "vocs": "latest"
+    "vocs": "1.0.0-alpha.34"
   }
 }

site/sidebar.ts

@@ -1,28 +1,28 @@
 import type { Sidebar } from 'vocs';
 
-export const sidebar = {
-  '/docs/': [
-    {
-      text: 'Introduction',
-      items: [
-        { text: 'Why Onchainkit', link: '/docs/introduction' },
-        { text: 'Getting Started', link: '/docs/getting-started' },
-      ],
-    },
-    {
-      text: 'Frame Kit',
-      items: [
-        { text: 'Introduction', link: '/docs/framekit/intro' },
-        {
-          text: 'Components',
-          items: [
-            {
-              text: 'FrameMetadata',
-              link: '/docs/framekit/components/framemetadata',
-            }
-          ],
-        },
-      ],
-    }
-  ]
-} as const satisfies Sidebar;
+export const sidebar = [
+  {
+    text: 'Introduction',
+    items: [
+      { text: 'Getting Started', link: '/getting-started' },
+    ],
+  },
+  {
+    text: 'Farcaster Kit',
+    items: [
+      { text: 'Introduction', link: '/farcasterkit/introduction' },
+    ],
+  },
+  {
+    text: 'Frame Kit',
+    items: [
+      { text: 'Introduction', link: '/framekit/introduction' },
+    ],
+  },
+  {
+    text: 'Identity Kit',
+    items: [
+      { text: 'Introduction', link: '/identitykit/introduction' },
+    ],
+  },
+] as const satisfies Sidebar;

site/tailwind.config.cjs

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./docs/**/*.{js,ts,jsx,tsx,md,mdx}'],
+  darkMode: 'class',
+  important: true,
+  theme: {
+    extend: {
+      screens: {
+        md: '848px',
+      },
+    },
+  },
+  plugins: [],
+};

site/tsconfig.json

@@ -2,23 +2,26 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }

site/vercel.json

@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/:match*.html",
+      "destination": "/:match"
+    }
+  ]
+}

site/vocs.config.tsx

@@ -15,32 +15,33 @@ export default defineConfig({
   titleTemplate: '%s · OnchainKit',
   description: ONCHAINKIT_DESCRIPTION,
   head: (
-      <>
-        <FrameMetadata
-          image={{
-            src: 'https://onchainkit.xyz/logo/',
-          }}
-          ogTitle={ONCHAINKIT_TITLE}
-          ogDescription={ONCHAINKIT_DESCRIPTION}
-        />
-        <script
-          src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`}
-          async
-          defer
-        />
-        <script
-          id="gtag-init"
-          dangerouslySetInnerHTML={{
-            __html: `
+    <>
+      <FrameMetadata
+        image={{
+          src: 'https://onchainkit.xyz/logo/',
+        }}
+        ogTitle={ONCHAINKIT_TITLE}
+        ogDescription={ONCHAINKIT_DESCRIPTION}
+      />
+      <script
+        src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`}
+        async
+        defer
+      />
+      <script
+        id="gtag-init"
+        dangerouslySetInnerHTML={{
+          __html: `
               window.dataLayer = window.dataLayer || [];
               function gtag(){dataLayer.push(arguments);}
               gtag('js', new Date());
               gtag('config', '${GOOGLE_ANALYTICS_ID}');
             `,
         }}
-        />
-      </>
+      />
+    </>
   ),
+  rootDir: "./docs/",
   sidebar,
   socials: [
     {
@@ -55,7 +56,7 @@ export default defineConfig({
     },
   },
   topNav: [
-    { text: 'Docs', link: '/docs/getting-started', match: '/docs' },
+    { text: 'Docs', link: '/getting-started', match: '/docs' },
     {
       text: 'Onchain App Example',
       link: 'https://github.com/coinbase/build-onchain-apps',
@@ -78,4 +79,4 @@ export default defineConfig({
       ],
     },
   ],
-})
+});