Merge pull request #1 from base/ac-initial

Migrate base-docs repo

Author: abcrane123

.gitignore

@@ -0,0 +1,80 @@
+.env
+# Node stuff
+node_modules
+yarn-debug.log*
+yarn-error.log*
+docs/dist/
+docs/build/
+vocs.config.tsx.timestamp*
+
+# OS ignores
+.DS_Store
+
+# Xcode
+**/ios/build/
+**/ios/derived_data/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+*.xcworkspace
+Pods/
+
+# Android/IntelliJ
+**/android/build/
+**/android/app/build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# Nx/Builds
+.docusaurus
+.next
+.nx
+cjs/
+dts/
+esm/
+lib/
+mjs/
+out/
+*.tsbuildinfo
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+# prevent people from accidentally committing a package-lock
+package-lock.json
+
+# Env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# GraphQL
+schema.graphql
+persisted_queries.json
+**/*.graphql.ts
+
+# eslint
+.eslintcache
+
+.vercel

.nvmrc

@@ -0,0 +1 @@
+18

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -1,2 +1,27 @@
-# docs
-Documentation for building on Base
+This is a [Vocs](https://vocs.dev) project bootstrapped with the Vocs CLI.
+
+# Creating New Docs
+
+You can create a new doc by adding a `.md` or `.mdx` file in
+`apps/base-docs/docs/pages`.
+
+The URL path for your doc will map to the file location. For instance, `bounty.mdx`
+is found within `chain/security`. So the URL for this link will be:
+`docs.base.org/chain/security/bounty`.
+
+
+# Running Docs Locally
+
+Follow these steps to run Base-Docs locally:
+
+1. Clone repo
+
+2. Enable yarn by running `corepack enable`
+
+3. Make sure you have installed all dependencies by running `yarn install` at
+the top-level
+
+4. `yarn build`
+
+4. Start development server by running `yarn dev`
+

api/submitFeedback.ts

@@ -0,0 +1,73 @@
+import { google } from '@googleapis/sheets';
+import type { VercelRequest, VercelResponse } from '@vercel/node';
+
+// Initialize Google Sheets client
+const getGoogleSheetsClient = () => {
+  try {
+    const credentials = JSON.parse(
+      Buffer.from(process.env.GOOGLE_SERVICE_ACCOUNT_KEY || '', 'base64').toString(),
+    );
+
+    const auth = new google.auth.GoogleAuth({
+      credentials,
+      scopes: ['https://www.googleapis.com/auth/spreadsheets'],
+    });
+
+    return google.sheets({ version: 'v4', auth });
+  } catch (error) {
+    console.error('Failed to initialize Google Sheets client:', error);
+    throw new Error('Failed to initialize Google Sheets client');
+  }
+};
+
+type FeedbackPayload = {
+  likeOrDislike: boolean;
+  options: string[];
+  comment: string;
+  url: string;
+  ipAddress: string;
+  timestamp: number;
+};
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const { likeOrDislike, options, comment, url, ipAddress, timestamp } =
+      req.body as FeedbackPayload;
+
+    const sheets = getGoogleSheetsClient();
+    const spreadsheetId = process.env.GOOGLE_SHEETS_ID;
+
+    if (!spreadsheetId) {
+      throw new Error('GOOGLE_SHEETS_ID environment variable is not set');
+    }
+
+    // Format the row data
+    const rowData = [
+      new Date(timestamp).toISOString(),
+      url,
+      ipAddress,
+      likeOrDislike ? 'Like' : 'Dislike',
+      options.join(', '),
+      comment,
+    ];
+
+    // Append the row to the sheet
+    await sheets.spreadsheets.values.append({
+      spreadsheetId,
+      range: 'Sheet1!A:F', // Adjust range based on your sheet's structure
+      valueInputOption: 'USER_ENTERED',
+      requestBody: {
+        values: [rowData],
+      },
+    });
+
+    return res.status(200).json({ success: true });
+  } catch (error) {
+    console.error('Error submitting feedback:', error);
+    return res.status(500).json({ error: 'Failed to submit feedback' });
+  }
+}

contexts/Theme.tsx

@@ -0,0 +1,62 @@
+import {
+  type ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+type Theme = 'light' | 'dark';
+type ThemeContextProps = {
+  theme: Theme;
+  toggleTheme: () => void;
+};
+
+export const ThemeContext = createContext<ThemeContextProps>({
+  theme: 'dark',
+  toggleTheme: () => {},
+});
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+export default function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>('dark');
+
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
+  }, []);
+
+  useEffect(() => {
+    const rootElement = document.documentElement;
+    const observer = new MutationObserver(() => {
+      if (rootElement.classList.contains('dark')) {
+        setTheme('dark');
+      } else {
+        setTheme('light');
+      }
+    });
+
+    observer.observe(rootElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+
+    if (rootElement.classList.contains('dark')) {
+      setTheme('dark');
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  const values = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);
+
+  return <ThemeContext.Provider value={values}>{children}</ThemeContext.Provider>;
+}

docs/components/App.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { OnchainKitProvider } from '@coinbase/onchainkit';
+import '@coinbase/onchainkit/styles.css';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import { http, WagmiProvider, createConfig } from 'wagmi';
+import { base, baseSepolia } from 'wagmi/chains';
+import { coinbaseWallet } from 'wagmi/connectors';
+import { useTheme } from '../contexts/Theme.tsx';
+import { defineChain } from 'viem';
+
+const queryClient = new QueryClient();
+
+export const SANDBOX_CHAIN = defineChain({
+  id: 8453200058,
+  name: 'Sandbox Network',
+  nativeCurrency: {
+    name: 'Ethereum',
+    symbol: 'ETH',
+    decimals: 18,
+  },
+  rpcUrls: {
+    default: {
+      http: ['https://sandbox-rpc-testnet.appchain.base.org'],
+    },
+  },
+});
+
+const wagmiConfig = createConfig({
+  chains: [base, baseSepolia, SANDBOX_CHAIN],
+  connectors: [
+    coinbaseWallet({
+      appName: 'OnchainKit',
+    }),
+  ],
+  ssr: true,
+  transports: {
+    [base.id]: http(),
+    [baseSepolia.id]: http(),
+    [SANDBOX_CHAIN.id]: http(),
+  },
+});
+
+export default function App({ children }: { children: ReactNode }) {
+  const isServer = typeof window === 'undefined';
+  if (isServer) {
+    return null;
+  }
+
+  const viteCdpApiKey = import.meta.env.VITE_CDP_API_KEY;
+  const viteProjectId = import.meta.env.VITE_CDP_PROJECT_ID;
+  const { theme } = useTheme();
+
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <OnchainKitProvider
+          apiKey={viteCdpApiKey}
+          chain={base} // TODO: remove
+          projectId={viteProjectId}
+          schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+          config={{
+            appearance: {
+              mode: 'auto',
+              theme: theme,
+            },
+          }}
+        >
+          <div style={{ display: 'flex', flexDirection: 'column' }}>{children}</div>
+        </OnchainKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}