feat(callout): Move Callout component to nextra/components (#1864)

Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru> Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
shuding · May 22, 2023 · 1c6256b · 1c6256b · vercel · May 22, 2023
1 parent ed8f7ba
commit 1c6256b
Show file tree

Hide file tree

Showing 70 changed files with 186 additions and 111 deletions.
diff --git a/.changeset/wise-chicken-relax.md b/.changeset/wise-chicken-relax.md
@@ -0,0 +1,6 @@
+---
+'nextra-theme-docs': minor
+'nextra': minor
+---
+
+Move Callout component to nextra package
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -120,7 +120,7 @@ module.exports = {
         tailwindcss: {
           config: 'packages/nextra-theme-docs/tailwind.config.js',
           callees: ['cn'],
-          whitelist: ['nextra-breadcrumb', 'nextra-callout', 'nextra-bleed']
+          whitelist: ['nextra-breadcrumb', 'nextra-bleed']
         }
       },
       rules: {
@@ -152,6 +152,7 @@ module.exports = {
       settings: {
         tailwindcss: {
           config: 'packages/nextra-theme-docs/tailwind.config.js',
+          callees: ['cn'],
           whitelist: ['nextra-code-block']
         }
       }

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -16,5 +16,12 @@ export default withNextra({
   eslint: {
     // Eslint behaves weirdly in this monorepo.
     ignoreDuringBuilds: true
-  }
+  },
+  redirects: () => [
+    {
+      source: '/docs/docs-theme/built-ins/callout',
+      destination: '/docs/guide/built-ins/callout',
+      permanent: true
+    }
+  ]
 })
diff --git a/docs/pages/docs/blog-theme.mdx b/docs/pages/docs/blog-theme.mdx
@@ -1,5 +1,5 @@
 import { Card, Cards } from 'nextra-theme-docs'
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 # Nextra Blog Theme
 

diff --git a/docs/pages/docs/docs-theme.mdx b/docs/pages/docs/docs-theme.mdx
@@ -22,7 +22,7 @@ import { Card, Cards } from 'nextra-theme-docs'
     }
     title="Get Started"
     href="/docs/docs-theme/start"
-  ></Card>
+  />
   <Card
     icon={
       <svg
@@ -42,7 +42,7 @@ import { Card, Cards } from 'nextra-theme-docs'
     }
     title="Page Configuration"
     href="/docs/docs-theme/page-configuration"
-  ></Card>
+  />
   <Card
     icon={
       <svg
@@ -62,7 +62,7 @@ import { Card, Cards } from 'nextra-theme-docs'
     }
     title="Theme Configuration"
     href="/docs/docs-theme/theme-configuration"
-  ></Card>
+  />
   <Card
     icon={
       <svg
@@ -82,5 +82,5 @@ import { Card, Cards } from 'nextra-theme-docs'
     }
     title="Built-in Components"
     href="/docs/docs-theme/built-ins"
-  ></Card>
+  />
 </Cards>
diff --git a/docs/pages/docs/docs-theme/built-ins.mdx b/docs/pages/docs/docs-theme/built-ins.mdx
@@ -18,31 +18,25 @@ The Docs Theme includes a couple of built-in components that you can use to bett
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
-          d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+          d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122"
         />
       </svg>
     }
-    title="Callout"
-    href="/docs/docs-theme/built-ins/callout"
-  ></Card>
+    title="Tabs"
+    href="/docs/docs-theme/built-ins/tabs"
+  />
   <Card
     icon={
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={1.5}
-        stroke="currentColor"
-        className="h-6 w-6"
+        fill="currentColor"
+        stroke="none"
+        viewBox="-1 0 19 19"
       >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122"
-        />
+        <path d="M16.417 9.6A7.917 7.917 0 1 1 8.5 1.683 7.917 7.917 0 0 1 16.417 9.6zM9.666 6.508H8.248L6.09 8.09l.806 1.103 1.222-.945v4.816h1.547z" />
       </svg>
     }
-    title="Tabs"
-    href="/docs/docs-theme/built-ins/tabs"
-  ></Card>
+    title="Steps"
+    href="/docs/docs-theme/built-ins/steps"
+  />
 </Cards>
diff --git a/docs/pages/docs/get-started.mdx.backup b/docs/pages/docs/get-started.mdx.backup
@@ -58,7 +58,7 @@ export default {
 }
 ```
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout>
   More configuration options for the docs theme can be found

diff --git a/docs/pages/docs/guide/advanced/remote.mdx b/docs/pages/docs/guide/advanced/remote.mdx
@@ -1,6 +1,6 @@
 # Remote Content
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout emoji="🚨">
   This page is a stub. Help us expand it by contributing!

diff --git a/docs/pages/docs/guide/built-ins.mdx b/docs/pages/docs/guide/built-ins.mdx
@@ -0,0 +1,28 @@
+# Built-ins
+
+import { Card, Cards } from 'nextra-theme-docs'
+
+Nextra includes a couple of built-in components that you can use to better style your documentation or blog:
+
+<Cards>
+  <Card
+    icon={
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="h-6 w-6"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+        />
+      </svg>
+    }
+    title="Callout"
+    href="/docs/guide/built-ins/callout"
+  />
+</Cards>
diff --git a/...ges/docs/docs-theme/built-ins/callout.mdx → docs/pages/docs/guide/built-ins/callout.mdx b/...ges/docs/docs-theme/built-ins/callout.mdx → docs/pages/docs/guide/built-ins/callout.mdx
@@ -1,8 +1,8 @@
 # Callout Component
 
-A built-in component of the Docs Theme to show important information to the reader.
+A built-in component to show important information to the reader.
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 ## Example
 
@@ -32,7 +32,7 @@ import { Callout } from 'nextra-theme-docs'
 </Callout>
 
 ```mdx
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout emoji="👾">
   **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
@@ -47,7 +47,7 @@ import { Callout } from 'nextra-theme-docs'
 </Callout>
 
 ```mdx
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout type="info" emoji="ℹ️">
   Today is Friday.
@@ -61,7 +61,7 @@ import { Callout } from 'nextra-theme-docs'
 </Callout>
 
 ```mdx
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout type="warning" emoji="⚠️">
   This API will be deprecated soon.
@@ -75,7 +75,7 @@ import { Callout } from 'nextra-theme-docs'
 </Callout>
 
 ```mdx
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout type="error" emoji="️🚫">
   This is a dangerous feature that can cause everything to explode.

diff --git a/docs/pages/docs/guide/image.mdx b/docs/pages/docs/guide/image.mdx
@@ -10,7 +10,7 @@ import Image from 'next/image'
 
 ## Static Image
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout>
   This feature is enabled via `staticImage: true` in the Nextra config by

diff --git a/docs/pages/docs/guide/latex.mdx b/docs/pages/docs/guide/latex.mdx
@@ -27,7 +27,7 @@ will be rendered as:
 
 You can still use [Markdown and MDX syntax](markdown) in the same line as your LaTeX expression.
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout>
   If you want to display `$` in your content instead of rendering it as an

diff --git a/docs/pages/docs/guide/typescript.mdx b/docs/pages/docs/guide/typescript.mdx
@@ -1,6 +1,6 @@
 # TypeScript
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout emoji="🚨">
   This page is a stub. Help us expand it by contributing!

diff --git a/examples/blog/next.config.mjs b/examples/blog/next.config.mjs
@@ -9,5 +9,6 @@ const withNextra = nextra({
 })
 
 export default withNextra({
-  reactStrictMode: true
+  reactStrictMode: true,
+  cleanDistDir: true
 })
diff --git a/examples/blog/pages/posts/callout.mdx b/examples/blog/pages/posts/callout.mdx
@@ -0,0 +1,31 @@
+---
+title: Callout
+date: 2023/5/15
+description: En example of using the Callout component in your blog.
+tag: web development
+author: Tristan Dubbeld
+---
+
+import { Callout } from 'nextra/components'
+
+## Use different callout types
+
+### Default
+
+<Callout>This is a default callout.</Callout>
+
+### Error
+
+<Callout type="error">This is an error callout.</Callout>
+
+### Info
+
+<Callout type="info">This is an info callout.</Callout>
+
+### Warning
+
+<Callout type="warning">This is a warning callout.</Callout>
+
+### With custom emoji
+
+<Callout emoji="🚀">This is a callout with a custom emoji.</Callout>
diff --git a/examples/docs/src/pages/features/i18n.mdx b/examples/docs/src/pages/features/i18n.mdx
@@ -1,4 +1,4 @@
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 # Next.js I18n
 

diff --git a/examples/docs/src/pages/features/image.mdx b/examples/docs/src/pages/features/image.mdx
@@ -12,7 +12,7 @@ import Image from 'next/image'
 
 ## Static Image
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout type="warning">
   You need to opt-in to this feature by enabling [`staticImage:

diff --git a/examples/docs/src/pages/features/mdx.mdx b/examples/docs/src/pages/features/mdx.mdx
@@ -6,7 +6,7 @@ advanced Markdown format with React component support.
 You can use import and use React components inside your Markdown files like this:
 
 ```mdx filename="example.mdx"
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 **Markdown With React Components**
 
@@ -20,7 +20,7 @@ import { Callout } from 'nextra-theme-docs'
 
 Generates:
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
 **Markdown With React Components**

diff --git a/examples/docs/src/pages/get-started.mdx b/examples/docs/src/pages/get-started.mdx
@@ -15,7 +15,8 @@ Nextra works like a Next.js plugin, and it accepts a theme config (layout) to re
 
 1. Install Next.js, Nextra and React
 
-import { Tabs, Tab, Callout } from 'nextra-theme-docs'
+import { Tabs, Tab } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components';
 
 <Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
   <Tab>

diff --git a/examples/docs/src/pages/themes/blog/index.mdx b/examples/docs/src/pages/themes/blog/index.mdx
@@ -1,6 +1,6 @@
 # Get Started
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout>
   An example of the blog theme can be found

diff --git a/examples/docs/src/pages/themes/docs/callout.mdx b/examples/docs/src/pages/themes/docs/callout.mdx
@@ -1,10 +1,10 @@
 # Callout Component
 
-A built-in component provided by `nextra-theme-docs`.
+A built-in component provided by `nextra/components`.
 
 ## Example
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout>
   A **callout** is a short piece of text intended to attract attention.
@@ -49,7 +49,7 @@ import { Callout } from 'nextra-theme-docs'
 ### React Component
 
 ```jsx filename="callout.jsx"
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 const Component = () => {
   return (

diff --git a/examples/docs/src/pages/themes/docs/configuration.mdx b/examples/docs/src/pages/themes/docs/configuration.mdx
@@ -1,4 +1,4 @@
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 export const Unstable = () => (
   <Callout type="error">

diff --git a/examples/swr-site/components/external.mdx b/examples/swr-site/components/external.mdx
@@ -1,4 +1,4 @@
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout type="info" emoji="💣">
   This `<Callout />` comes from `external.mdx`

diff --git a/examples/swr-site/pages/docs/advanced/cache.en-US.mdx b/examples/swr-site/pages/docs/advanced/cache.en-US.mdx
@@ -1,4 +1,4 @@
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 # Cache
 

diff --git a/examples/swr-site/pages/docs/advanced/cache.ru.mdx b/examples/swr-site/pages/docs/advanced/cache.ru.mdx
@@ -1,4 +1,4 @@
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 # Кеш
 

diff --git a/examples/swr-site/pages/docs/advanced/react-native.en-US.mdx b/examples/swr-site/pages/docs/advanced/react-native.en-US.mdx
@@ -1,4 +1,4 @@
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 # React Native
 

diff --git a/examples/swr-site/pages/docs/advanced/react-native.ru.mdx b/examples/swr-site/pages/docs/advanced/react-native.ru.mdx
@@ -1,4 +1,4 @@
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 # React Native
 

diff --git a/examples/swr-site/pages/docs/arguments.en-US.md b/examples/swr-site/pages/docs/arguments.en-US.md
@@ -30,7 +30,7 @@ The function `fetchWithToken` still accepts the same 2 arguments, but the cache
 
 ## Passing Objects
 
-import { Callout } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
 <Callout>
   Since SWR 1.1.0, object-like keys will be serialized under the hood automatically.