feat: blog (wevm#1382)

QEasyWeb3 · Nov 28, 2022 · f8378b3 · f8378b3
1 parent ab52981
commit f8378b3
Show file tree

Hide file tree

Showing 15 changed files with 221 additions and 26 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -6,5 +6,5 @@ CHANGELOG.md
 // Once prettier fixes MDX ignore ranges
 // https://github.com/prettier/prettier/pull/12208
 docs/pages/index.en-US.mdx
-docs/pages/docs/getting-started.en-US.mdx
+docs/pages/react/getting-started.en-US.mdx
 docs/pages/core/getting-started.en-US.mdx
diff --git a/README.md b/README.md
@@ -119,6 +119,15 @@ If you find wagmi useful, please consider supporting development. Thank you 🙏
 
 ## Sponsors
 
+<a href="https://paradigm.xyz">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/paradigm-dark.svg">
+    <img alt="family logo" src="https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/paradigm-light.svg" width="auto" height="70">
+  </picture>
+</a>
+
+<br>
+
 <a href="https://twitter.com/family">
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/family-dark.svg">

diff --git a/docs/components/blog/Authors.tsx b/docs/components/blog/Authors.tsx
@@ -0,0 +1,29 @@
+type AuthorsProps = {
+  date: string
+  children: React.ReactNode
+}
+
+export function Authors({ date, children }: AuthorsProps) {
+  return (
+    <div className="mt-4 mb-8 text-gray-400 text-sm">
+      {date} by{children}
+    </div>
+  )
+}
+
+type AuthorProps = { name: string; link: string }
+
+export function Author({ name, link }: AuthorProps) {
+  return (
+    <span className="after:content-[','] last:after:content-['']">
+      <a
+        key={name}
+        href={link}
+        target="_blank"
+        className="mx-1 text-gray-800 dark:text-gray-100"
+      >
+        {name}
+      </a>
+    </span>
+  )
+}
diff --git a/docs/components/blog/BlogIndex.tsx b/docs/components/blog/BlogIndex.tsx
@@ -0,0 +1,43 @@
+import Link from 'next/link'
+import type { Page } from 'nextra'
+// eslint-disable-next-line import/no-unresolved
+import { getPagesUnderRoute } from 'nextra/context'
+
+export function BlogIndex({ more = 'Read more' }) {
+  return getPagesUnderRoute('/blog').map(
+    (
+      page: Page & {
+        frontMatter?: { date?: string; description?: string; title?: string }
+      },
+    ) => {
+      return (
+        <>
+          <h1 className="text-center font-extrabold text-3xl mb-10 md:text-5xl mt-10 md:mb-14">
+            wagmi Blog
+          </h1>
+
+          <div className="">
+            <h3 className="text-2xl font-bold mb-4">
+              <Link href={page.route}>
+                <a style={{ color: 'inherit', textDecoration: 'none' }}>
+                  {page.meta?.title || page.frontMatter?.title || page.name}
+                </a>
+              </Link>
+            </h3>
+
+            <p className="opacity-80 mb-3">
+              {page.frontMatter?.description}{' '}
+              <Link href={page.route}>
+                <a className="nx-text-primary-500 underline">{more + ' →'}</a>
+              </Link>
+            </p>
+
+            {page.frontMatter?.date ? (
+              <p className="opacity-50 text-sm">{page.frontMatter.date}</p>
+            ) : null}
+          </div>
+        </>
+      )
+    },
+  )
+}
diff --git a/docs/components/blog/index.ts b/docs/components/blog/index.ts
@@ -0,0 +1,2 @@
+export { Authors, Author } from '../blog/Authors'
+export { BlogIndex } from '../blog/BlogIndex'
diff --git a/docs/components/docs/Sponsors.tsx b/docs/components/docs/Sponsors.tsx
@@ -57,19 +57,39 @@ export function Sponsors() {
   const { resolvedTheme } = useTheme()
   const mode = (resolvedTheme ?? 'dark') as 'dark' | 'light'
   return (
-    <div className="flex my-5 gap-2 flex-wrap">
-      {sponsors.map((sponsor) => (
-        <a href={sponsor.href} key={sponsor.id}>
+    <div className="my-5">
+      <div className="mb-2 -ml-2">
+        <a href="https://paradigm.xyz" className="inline-block">
           <picture>
             <img
-              alt={sponsor.name}
-              src={sponsor.logo[mode]}
+              alt="Paradigm"
+              src={
+                {
+                  dark: 'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/paradigm-dark.svg',
+                  light:
+                    'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/paradigm-light.svg',
+                }[mode]
+              }
               width="auto"
-              className="h-12"
+              className="h-24"
             />
           </picture>
         </a>
-      ))}
+      </div>
+      <div className="flex gap-2 flex-wrap">
+        {sponsors.map((sponsor) => (
+          <a href={sponsor.href} key={sponsor.id}>
+            <picture>
+              <img
+                alt={sponsor.name}
+                src={sponsor.logo[mode]}
+                width="auto"
+                className="h-12"
+              />
+            </picture>
+          </a>
+        ))}
+      </div>
     </div>
   )
 }
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -18,6 +18,7 @@ const config = {
   reactStrictMode: true,
   redirects: () => {
     return [
+      // Redirects for old docs
       {
         source: '/docs/create-wagmi',
         destination: '/cli/create-wagmi',
@@ -28,16 +29,28 @@ const config = {
         destination: '/react/:path*',
         permanent: true,
       },
-      {
-        source: '/examples',
-        destination: '/examples/connect-wallet',
-        statusCode: 302,
-      },
       {
         source: '/guides/:path*',
         destination: '/examples/:path*',
         permanent: true,
       },
+      // Redirect paths to first page in section
+      {
+        source: '/react',
+        destination: '/react/getting-started',
+        permanent: true,
+      },
+      {
+        source: '/core',
+        destination: '/core/getting-started',
+        permanent: true,
+      },
+      {
+        source: '/examples',
+        destination: '/examples/connect-wallet',
+        statusCode: 302,
+      },
+      // External redirects
       {
         source: '/gitcoin',
         destination:

diff --git a/docs/pages/_meta.en-US.json b/docs/pages/_meta.en-US.json
@@ -19,5 +19,9 @@
   "examples": {
     "title": "Examples",
     "type": "page"
+  },
+  "blog": {
+    "title": "Blog",
+    "type": "page"
   }
 }
diff --git a/docs/pages/blog.en-US.mdx b/docs/pages/blog.en-US.mdx
@@ -0,0 +1,9 @@
+---
+title: wagmi Blog
+description: Updates from the wagmi core team.
+searchable: false
+---
+
+import { BlogIndex } from '../components/blog'
+
+<BlogIndex />
diff --git a/docs/pages/blog/_meta.en-US.json b/docs/pages/blog/_meta.en-US.json
@@ -0,0 +1,9 @@
+{
+  "paradigm-wagmi": {
+    "title": "Paradigm x wagmi",
+    "type": "page",
+    "theme": {
+      "sidebar": false
+    }
+  }
+}
diff --git a/docs/pages/blog/paradigm-wagmi.en-US.mdx b/docs/pages/blog/paradigm-wagmi.en-US.mdx
@@ -0,0 +1,28 @@
+---
+title: 'Paradigm x wagmi'
+description: 'The wagmi core team is now working full-time on the future of wagmi and developer tools for Ethereum, sponsored by Paradigm.'
+date: November 28, 2022
+image: 'https://wagmi.sh/paradigm-wagmi.png'
+searchable: false
+---
+
+import { Authors, Author } from '../../components/blog'
+
+# Paradigm x wagmi
+
+<Authors date="November 28, 2022">
+  <Author name="awkweb" link="https://twitter.com/awkweb" />
+</Authors>
+
+<div className="text-lg">
+  **The wagmi core team is now working full-time on the future of wagmi and
+  developer tools for Ethereum, sponsored by Paradigm.**
+</div>
+
+When I started working on wagmi [a year ago](https://github.com/wagmi-dev/wagmi/commit/f58ad631c6e696c40ab4915ecc472d2301a01a17), I didn’t expect for it to be as popular as it is today. I just needed a decent tool for hacking on Ethereum side projects so I wanted to see if I could build something for myself. Fast forward to today, there's an incredible community of developers and teams building their projects and businesses with wagmi, like [ENS](https://alpha.ens.domains), [WalletConnect](https://walletconnect.com), [Stripe Crypto](https://stripe.com/use-cases/crypto), [Sushi](https://sushi.com), [LooksRare](https://looksrare.org), [Zora](https://zora.co), and many more.
+
+The core team has also grown over the last year. [Jake](https://twitter.com/jakemoxey) started getting involved [on January 16](https://twitter.com/awkweb/status/1482772477893824518) and officially joined the core team [on April 25](https://twitter.com/awkweb/status/1518607778209751041), after we collaborated on a major update to wagmi. Together, we've published over 200 new versions of wagmi getting 330k downloads/month, 3.4k GitHub Stars, and being a [finalist](https://twitter.com/markdalgleish/status/1537956391532437510) for “Breakthrough of the Year" at React Summit in June.
+
+Since wagmi launched [on January 4](https://twitter.com/awkweb/status/1478431834052644870), the focus has been to keep pulling on the thread of developer experience and tooling for Ethereum to see how far we can push them. Over the last eleven months, we shipped some ground-breaking new features: [End-to-end type-safety](https://twitter.com/wagmi_sh/status/1580591788611338240) from your contracts to your frontend, powered by our [ABIType](https://github.com/wagmi-dev/abitype) library; A Vanilla JS core library, [`@wagmi/core`](/core/getting-started), opening up the door for additional JS framework support beyond React; Faster “Time To Open Wallet” and more robust mobile deeplinking with [Prepare Hooks](/react/prepare-hooks/intro); request caching, deduplication, and refetching to keep apps feeling snappy and save money on RPC bills.
+
+There’s still an incredible number of Ethereum-enabled apps yet to be built on the horizon. We should demand more from our tools so we can get there. To that end, Jake and I are going full-time on developer tooling thanks to [Paradigm](https://www.paradigm.xyz)’s sponsorship. We have some exciting releases planned for wagmi as well as an unannounced project we think is going to change Ethereum developer tooling. We couldn’t think of a better partner than Paradigm to work closely with on the future of wagmi and developer tools. Stay tuned and see you on the Internet.
diff --git a/docs/pages/react/client.en-US.mdx b/docs/pages/react/client.en-US.mdx
@@ -33,7 +33,7 @@ const client = createClient({
 
 Enables reconnecting to last used connector on mount. Defaults to `false`.
 
-```ts {9}
+```ts {7}
 import { createClient, configureChains, defaultChains } from 'wagmi'
 import { publicProvider } from 'wagmi/providers/public'
 

diff --git a/docs/pages/react/getting-started.en-US.mdx b/docs/pages/react/getting-started.en-US.mdx
@@ -50,11 +50,22 @@ Want to learn more? Check out the [`create-wagmi` CLI docs](/cli/create-wagmi).
 Install wagmi and its ethers peer dependency.
 
 {/* prettier-ignore-start */}
-
 <Tabs items={['npm', 'pnpm', 'yarn']}>
-  <Tab>```bash npm i wagmi ethers ```</Tab>
-  <Tab>```bash pnpm i wagmi ethers ```</Tab>
-  <Tab>```bash yarn add wagmi ethers ```</Tab>
+  <Tab>
+```bash
+npm i wagmi ethers
+```
+  </Tab>
+  <Tab>
+```bash
+pnpm i wagmi ethers
+```
+  </Tab>
+  <Tab>
+```bash
+yarn add wagmi ethers
+```
+  </Tab>
 </Tabs>
 {/* prettier-ignore-end */}
 
@@ -80,7 +91,7 @@ Note: In a production app, it is not recommended to only pass `publicProvider` t
 
 Next, create a wagmi `Client` instance using [`createClient`](/react/client), and pass the result from `configureChains` to it.
 
-```tsx {14-18}
+```tsx {9-13}
 import { WagmiConfig, createClient, configureChains, chain } from 'wagmi'
 import { publicProvider } from 'wagmi/providers/public'
 

diff --git a/docs/public/paradigm-wagmi.png b/docs/public/paradigm-wagmi.png
diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx
@@ -8,6 +8,7 @@ const github = 'https://github.com/wagmi-dev/wagmi'
 const translations = {
   'en-US': {
     description: {
+      blog: 'Updates from the wagmi core team',
       core: 'Documentation for @wagmi/core',
       cli: 'Documentation for CLI tools',
       examples: 'Examples',
@@ -17,16 +18,25 @@ const translations = {
     feedbackLink: 'Question? Give us feedback →',
     poweredBy: 'Powered by',
     subTitle: {
+      blog: 'React Hooks for Ethereum',
       core: 'VanillaJS for Ethereum',
-      cli: 'wagmi CLI tools',
-      examples: 'wagmi Examples',
+      cli: 'React Hooks for Ethereum',
+      examples: 'React Hooks for Ethereum',
       react: 'React Hooks for Ethereum',
     },
+    name: {
+      blog: 'wagmi',
+      core: '@wagmi/core',
+      cli: 'wagmi',
+      examples: 'wagmi',
+      react: 'wagmi',
+    },
   },
 } as const
 type Language = keyof typeof translations
 
 function getSectionName(path: string) {
+  if (/^\/blog\/*/.test(path)) return 'blog'
   if (/^\/core\/*/.test(path)) return 'core'
   if (/^\/cli\/*/.test(path)) return 'cli'
   if (/^\/examples\/*/.test(path)) return 'examples'
@@ -42,10 +52,18 @@ function Head() {
   const description =
     frontMatter.description ||
     translations[locale as Language].description[sectionName]
-  const title_ =
-    frontMatter.title && !frontMatter.title.startsWith('wagmi')
-      ? frontMatter.title + ' – wagmi'
-      : `wagmi: ${translations[locale as Language].subTitle[sectionName]}`
+  const ogImage = frontMatter.image ?? 'https://wagmi.sh/og.png'
+
+  let title_
+  if (frontMatter.title) {
+    if (sectionName === 'blog') title_ = frontMatter.title
+    else
+      title_ = `${frontMatter.title} – ${
+        translations[locale as Language].name[sectionName]
+      }`
+  } else {
+    title_ = `wagmi: ${translations[locale as Language].subTitle[sectionName]}`
+  }
 
   return (
     <>
@@ -58,7 +76,7 @@ function Head() {
       <meta name="description" content={description} />
       <meta name="og:description" content={description} />
       <meta name="og:title" content={title_} />
-      <meta name="og:image" content="https://wagmi.sh/og.png" />
+      <meta name="og:image" content={ogImage} />
       <meta name="twitter:card" content="summary_large_image" />
 
       {/* Misc */}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { Authors, Author } from '../blog/Authors'
		export { BlogIndex } from '../blog/BlogIndex'