chore: extract svg icons in /icons folder, reusing same icons `<M…

…oonIcon />` / `<SunIcon />` in blog from docs (#525) * chore: better icons * extract <XIcon /> * extract <MenuIcon /> * extract <Spinner />
shuding · Jul 22, 2022 · 94a8587 · 94a8587
1 parent c380989
commit 94a8587
Show file tree

Hide file tree

Showing 27 changed files with 234 additions and 206 deletions.
diff --git a/.changeset/smooth-doors-relate.md b/.changeset/smooth-doors-relate.md
@@ -0,0 +1,6 @@
+---
+"nextra-theme-docs": patch
+"nextra-theme-blog": patch
+---
+
+chore: extract `svg` icons in `/icons` folder, reusing same icons `<MoonIcon />` / `<SunIcon />` in blog from docs
diff --git a/examples/blog/next.config.js b/examples/blog/next.config.js
diff --git a/examples/blog/next.config.mjs b/examples/blog/next.config.mjs
@@ -0,0 +1,11 @@
+import nextra from 'nextra'
+
+const withNextra = nextra({
+  theme: 'nextra-theme-blog',
+  themeConfig: './theme.config.jsx',
+  unstable_staticImage: true
+})
+
+export default withNextra({
+  reactStrictMode: true
+})
diff --git a/examples/blog/theme.config.js b/examples/blog/theme.config.js
diff --git a/examples/blog/theme.config.jsx b/examples/blog/theme.config.jsx
@@ -0,0 +1,26 @@
+export default {
+  footer: (
+    <small style={{ display: 'block', marginTop: '8rem' }}>
+      <abbr
+        title="This site and all its content are licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
+        style={{ cursor: 'help' }}
+      >
+        CC BY-NC 4.0
+      </abbr>{' '}
+      <time>{new Date().getFullYear()}</time> © Shu Ding.
+      <a href="/feed.xml">RSS</a>
+      <style jsx>{`
+        a {
+          float: right;
+        }
+        @media screen and (max-width: 480px) {
+          article {
+            padding-top: 2rem;
+            padding-bottom: 4rem;
+          }
+        }
+      `}</style>
+    </small>
+  ),
+  darkMode: true
+}
diff --git a/package.json b/package.json
@@ -21,18 +21,18 @@
     "@tailwindcss/typography": "^0.5.0",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
-    "autoprefixer": "^10.4.1",
+    "autoprefixer": "^10.4.7",
     "concurrently": "^7.0.0",
     "cssnano": "^4.1.11",
     "esbuild": "^0.14.10",
     "next": "^12.2.2",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.14",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^3.1.5",
     "turbo": "^1.2.9",
     "typescript": "^4.6.2",
     "vitest": "^0.18.1"

diff --git a/packages/nextra-theme-blog/src/theme-switch.tsx b/packages/nextra-theme-blog/src/theme-switch.tsx
@@ -1,15 +1,17 @@
 import React, { useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
+import { MoonIcon, SunIcon } from '../../nextra-theme-docs/src/icons'
 
 export default function ThemeSwitch() {
   const { theme, setTheme, resolvedTheme } = useTheme()
   const [mounted, setMounted] = useState(false)
 
   useEffect(() => setMounted(true), [])
+  const isDark = theme === 'dark' || resolvedTheme === 'dark'
 
   // @TODO: system theme
   const toggleTheme = () => {
-    setTheme(theme === 'dark' || resolvedTheme === 'dark' ? 'light' : 'dark')
+    setTheme(isDark ? 'light' : 'dark')
   }
 
   return (
@@ -23,37 +25,7 @@ export default function ThemeSwitch() {
         if (e.key === 'Enter') toggleTheme()
       }}
     >
-      {mounted && (theme === 'dark' || resolvedTheme === 'dark') ? (
-        <svg
-          fill="none"
-          viewBox="0 0 24 24"
-          width="24"
-          height="24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-          />
-        </svg>
-      ) : (
-        <svg
-          fill="none"
-          viewBox="0 0 24 24"
-          width="24"
-          height="24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-          />
-        </svg>
-      )}
+      {mounted && isDark ? <MoonIcon /> : <SunIcon />}
     </span>
   )
 }
diff --git a/packages/nextra-theme-docs/src/breadcrumb.tsx b/packages/nextra-theme-docs/src/breadcrumb.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'next/link'
 import cn from 'classnames'
 
-import ArrowRight from './icons/arrow-right'
+import { ArrowRightIcon } from './icons'
 
 import { Item } from './utils/normalize-pages'
 
@@ -16,7 +16,7 @@ export default function Breadcrumb({ activePath }: { activePath: Item[] }) {
         return (
           <React.Fragment key={item.route}>
             {index ? (
-              <ArrowRight width={14} className="mx-1 select-none" />
+              <ArrowRightIcon width={14} className="mx-1 select-none" />
             ) : null}
             <div
               key={item.route}

diff --git a/packages/nextra-theme-docs/src/flexsearch.js b/packages/nextra-theme-docs/src/flexsearch.js
@@ -15,6 +15,7 @@ import { Transition } from '@headlessui/react'
 import { useConfig } from './config'
 import renderComponent from './utils/render-component'
 import useMenuContext from './utils/menu-context'
+import { SpinnerIcon } from './icons'
 
 const Item = ({
   page,
@@ -253,11 +254,8 @@ export default function Search() {
     const localeCode = Router.locale || 'default'
     if (!indexes[localeCode] && !loading) {
       setLoading(true)
-      const data = await (
-        await fetch(
-          `${Router.basePath}/_next/static/chunks/nextra-data-${localeCode}.json`
-        )
-      ).json()
+      const response = await fetch(`${Router.basePath}/_next/static/chunks/nextra-data-${localeCode}.json`)
+      const data = await response.json()
 
       const pageIndex = new FlexSearch.Document({
         cache: 100,
@@ -397,7 +395,7 @@ export default function Search() {
           ref={input}
           spellCheck={false}
         />
-        {renderList ? null : (
+        {!renderList && (
           <div className="hidden sm:flex absolute inset-y-0 right-0 py-1.5 pr-1.5 select-none pointer-events-none">
             <kbd className="inline-flex items-center px-1.5 font-mono text-sm font-medium bg-white dark:bg-dark dark:bg-opacity-50 text-gray-400 dark:text-gray-500 dark:border-gray-100 dark:border-opacity-20 border rounded">
               /
@@ -415,26 +413,7 @@ export default function Search() {
         <ul className="absolute z-20 px-0 py-2.5 m-0 mt-2 top-full rounded-xl overflow-hidden overscroll-contain shadow-xl list-none">
           {loading ? (
             <span className="p-8 text-center text-gray-400 text-sm select-none flex justify-center">
-              <svg
-                className="animate-spin -ml-1 mr-2 h-5 w-5 text-gray-400"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                ></circle>
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                ></path>
-              </svg>
+              <SpinnerIcon className="animate-spin -ml-1 mr-2 h-5 w-5 text-gray-400" />
               <span>Loading...</span>
             </span>
           ) : results.length === 0 ? (
@@ -453,9 +432,7 @@ export default function Search() {
                   excerpt={res.excerpt}
                   active={i === active}
                   onHover={() => setActive(i)}
-                  onClick={() => {
-                    finishSearch()
-                  }}
+                  onClick={finishSearch}
                 />
               )
             })

diff --git a/packages/nextra-theme-docs/src/footer.tsx b/packages/nextra-theme-docs/src/footer.tsx
@@ -3,7 +3,7 @@ import cn from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-import ArrowRight from './icons/arrow-right'
+import { ArrowRightIcon } from './icons'
 import renderComponent from './utils/render-component'
 import { useConfig } from './config'
 import { Item } from './utils/normalize-pages'
@@ -27,7 +27,7 @@ const NextLink = ({ route, title, isRTL }: LinkProps) => {
         title={title}
       >
         {title}
-        <ArrowRight
+        <ArrowRightIcon
           height={20}
           className={cn('transform inline flex-shrink-0', {
             'rotate-180 mr-1': isRTL,
@@ -49,7 +49,7 @@ const PrevLink = ({ route, title, isRTL }: LinkProps) => {
         )}
         title={title}
       >
-        <ArrowRight
+        <ArrowRightIcon
           height={20}
           className={cn('transform inline flex-shrink-0', {
             'rotate-180 mr-1': !isRTL,

diff --git a/packages/nextra-theme-docs/src/icons/arrow-right.tsx b/packages/nextra-theme-docs/src/icons/arrow-right.tsx
@@ -1,17 +1,14 @@
-import React from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-const ArrowRight = ({ childProps, ...props }: any) => {
+export function ArrowRightIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
     <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
+        strokeWidth="2"
         d="M9 5l7 7-7 7"
-        {...(childProps || {})}
       />
     </svg>
   )
 }
-
-export default ArrowRight
diff --git a/packages/nextra-theme-docs/src/icons/check.tsx b/packages/nextra-theme-docs/src/icons/check.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 
-export default function Check() {
+export function CheckIcon(): ReactElement {
   return (
     <svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor">
       <path

diff --git a/packages/nextra-theme-docs/src/icons/discord.tsx b/packages/nextra-theme-docs/src/icons/discord.tsx
@@ -1,5 +1,6 @@
-import React from 'react'
-const DiscordIcon = ({ height = 40 }) => {
+import React, { ReactElement } from 'react'
+
+export function DiscordIcon({ height = 40 }): ReactElement {
   return (
     <svg
       height={height}
@@ -17,5 +18,3 @@ const DiscordIcon = ({ height = 40 }) => {
     </svg>
   )
 }
-
-export default DiscordIcon
diff --git a/packages/nextra-theme-docs/src/icons/github.tsx b/packages/nextra-theme-docs/src/icons/github.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 
-const Github = ({ height = 40 }) => {
+export function GitHubIcon({ height = 40 }): ReactElement {
   return (
     <svg height={height} viewBox="2 2 20 20" fill="none" aria-hidden="true">
       <path
@@ -12,5 +12,3 @@ const Github = ({ height = 40 }) => {
     </svg>
   )
 }
-
-export default Github
diff --git a/packages/nextra-theme-docs/src/icons/globe.tsx b/packages/nextra-theme-docs/src/icons/globe.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 
-export default function Globe() {
+export function GlobeIcon(): ReactElement {
   return (
     <svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor">
       <path

diff --git a/packages/nextra-theme-docs/src/icons/index.ts b/packages/nextra-theme-docs/src/icons/index.ts
@@ -0,0 +1,10 @@
+export * from './arrow-right'
+export * from './check'
+export * from './discord'
+export * from './github'
+export * from './globe'
+export * from './menu'
+export * from './moon'
+export * from './spinner'
+export * from './sun'
+export * from './x'
diff --git a/packages/nextra-theme-docs/src/icons/menu.tsx b/packages/nextra-theme-docs/src/icons/menu.tsx
@@ -0,0 +1,37 @@
+import React, { ReactElement } from 'react'
+
+export function MenuIcon({ className }: { className?: string }): ReactElement {
+  return (
+    <svg
+      fill="none"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      className={className}
+    >
+      <g>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M4 6h16"
+        />
+      </g>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M4 12h16"
+      />
+      <g>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M4 18h16"
+        />
+      </g>
+    </svg>
+  )
+}