docs: update configuration part (#524)

* docs: update configuration part

* fix: pass unstable_flexsearch

* chore: apply cr

.changeset/brown-apricots-refuse.md

@@ -0,0 +1,7 @@
+---
+"nextra": patch
+"nextra-theme-blog": patch
+"nextra-theme-docs": patch
+---
+
+pass unstable_flexsearch

.changeset/nasty-radios-joke.md

@@ -1,5 +1,5 @@
 ---
-'nextra-theme-docs': patch
+"nextra-theme-docs": patch
 ---
 
 chore(nextra-theme-docs): refactor `theme-context.ts`

.changeset/olive-lions-help.md

@@ -1,7 +1,7 @@
 ---
-'nextra': patch
-'nextra-theme-blog': patch
-'nextra-theme-docs': patch
+"nextra": patch
+"nextra-theme-blog": patch
+"nextra-theme-docs": patch
 ---
 
 Fix release workflow.

.changeset/pretty-tips-invite.md

@@ -1,5 +1,5 @@
 ---
-'nextra': patch
+"nextra": patch
 ---
 
 feat(nextra): allow define custom languages for shiki with `mdxOptions.rehypePrettyCodeOptions` option

.changeset/rude-colts-agree.md

@@ -1,5 +1,5 @@
 ---
-'nextra-theme-blog': patch
+"nextra-theme-blog": patch
 ---
 
 fix(nextra-theme-blog): make nav items center aligned

.changeset/thin-peaches-drive.md

@@ -1,5 +1,5 @@
 ---
-'nextra-theme-docs': patch
+"nextra-theme-docs": patch
 ---
 
 feat(nextra-theme-docs): update discord logo to the new one

.changeset/two-dots-play.md

@@ -1,5 +1,5 @@
 ---
-'nextra': patch
+"nextra": patch
 ---
 
 fix(nextra): allow to contain dots in page filenames

.prettierignore

@@ -0,0 +1,5 @@
+dist
+.next
+pnpm-lock.yaml
+pnpm-workspace.yaml
+.changeset

examples/blog/pages/posts/aaron-swartz-a-programmable-web.mdx

@@ -1,32 +1,31 @@
 ---
 title: Notes on A Programmable Web by Aaron Swartz
 date: 2016/5/21
-description: At the time when I was getting into web development, I had the chance to read one of the most inspiring book about the web, Aaron Swartz's A Programmable Web. And it completely changed my mind. 
+description: At the time when I was getting into web development, I had the chance to read one of the most inspiring book about the web, Aaron Swartz's A Programmable Web. And it completely changed my mind.
 tag: web development
 author: Shu
 ---
 
 # Notes on A Programmable Web by Aaron Swartz
 
-At the time when I was getting into web development, I had the chance to read one of the most inspiring book about the web, Aaron Swartz's A Programmable Web. And it completely changed my mind. 
+At the time when I was getting into web development, I had the chance to read one of the most inspiring book about the web, Aaron Swartz's A Programmable Web. And it completely changed my mind.
 
 **Updated in 2017**: [@tommyjtl](https://github.com/tommyjtl), [@zimine](https://github.com/zimine) and I are currently helping translate this post into Simplified Chinese. Any [contributions](https://github.com/tommyjtl/the-programmable-web/tree/translation) are welcomed :)
 
 ---
 
-> Sure, it sounds a little bit crazy. But it paid off the last time they made that gamble: we ended up with a little thing called the World Wide Web. 
-Let's see if they can do it again.
+> Sure, it sounds a little bit crazy. But it paid off the last time they made that gamble: we ended up with a little thing called the World Wide Web.
+> Let's see if they can do it again.
 
 — Aaron
 
 Read Aaron's original post: [Building Programmable Web Sites by Aaron Swartz, 2009](http://www.cs.rpi.edu/~hendler/ProgrammableWebSwartz2009.html).
 
-
 ## Quotes About WWW
 
 1. “(the Internet) It should be kept open. It should be kept free.” – Steve Jobs
 2. “The third reason it’s very exciting is that Microsoft doesn’t own it and I don’t think they can. It’s the one thing in the industry that Microsoft can probably never own. I think one of the things that’s essential is that the government continue to fund the Internet as a public trust, as a public facility and remove any of these ridiculous notions of privatizing it that have been brought up. I don’t think they’re going to fly, thankfully.” – Steve Jobs
-3. Jacques Mattheij wrote an article, about the web in 2050, which feels like the *New Speak* in George Orwell's *1984*.
+3. Jacques Mattheij wrote an article, about the web in 2050, which feels like the *New Speak* in George Orwell's _1984_.
 
 ## Quotes from Aaron’s Post
 
@@ -76,4 +75,4 @@ Instead, they used the clone created by a team at the University of Illinois Urb
 4. [“URLs shouldn't include technical details”: 天猫首页](https://www.zhihu.com/question/54777923/answer/141058259)
 5. [Semantic Web – W3C](https://www.w3.org/standards/semanticweb)
 6. [Tim Berners-Lee: The next web](https://www.ted.com/talks/tim_berners_lee_on_the_next_web)
-7. [The Web in 2050 · Jacques Mattheij](https://jacquesmattheij.com/the-web-in-2050): “reboot the web”
+7. [The Web in 2050 · Jacques Mattheij](https://jacquesmattheij.com/the-web-in-2050): “reboot the web”

examples/docs/next.config.js

@@ -1,7 +1,10 @@
 const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './src/theme.config.js',
-  unstable_staticImage: true
+  unstable_staticImage: true,
+  unstable_flexsearch: {
+    codeblock: false
+  }
 })
 
 module.exports = withNextra({

examples/docs/src/pages/_app.js

@@ -1,8 +1,6 @@
 import 'nextra-theme-docs/style.css'
 
-export default function MyApp({ Component, pageProps }) {
-  // Use the layout defined at the page level, if available
+export default function Nextra({ Component, pageProps }) {
   const getLayout = Component.getLayout || (page => page)
-
   return getLayout(<Component {...pageProps} />)
 }

examples/docs/src/pages/advanced/code-highlighting.mdx

@@ -0,0 +1,54 @@
+# Code Highlighting
+
+`Nextra` uses [Shiki](https://shiki.matsu.io) and [Rehype Pretty Code](https://github.com/FormidableLabs/prism-react-renderer)
+to highlight the code blocks. This section covers how you can customze it.
+
+## Meta strings
+
+### Highlight lines
+
+````mdx
+```jsx {1,3-5}
+import 'nextra-theme-docs/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+  const getLayout = Component.getLayout || (page => page)
+  return getLayout(<Component {...pageProps} />)
+}
+```
+````
+
+```jsx {1,4-5}
+import 'nextra-theme-docs/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+  const getLayout = Component.getLayout || (page => page)
+  return getLayout(<Component {...pageProps} />)
+}
+```
+
+### Title
+
+````mdx
+```jsx filename="_app.js"
+import 'nextra-theme-docs/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+  const getLayout = Component.getLayout || (page => page)
+  return getLayout(<Component {...pageProps} />)
+}
+```
+````
+
+```jsx filename="_app.js"
+import 'nextra-theme-docs/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+  const getLayout = Component.getLayout || (page => page)
+  return getLayout(<Component {...pageProps} />)
+}
+```
+
+## Supported Languages
+
+You can find a list of supported languages [here](https://github.com/shikijs/shiki/blob/main/docs/languages.md).

examples/docs/src/pages/advanced/meta.json

@@ -0,0 +1,3 @@
+{
+  "code-highlighting": "Code Highlighting"
+}

examples/docs/src/pages/features/i18n.mdx

@@ -0,0 +1,43 @@
+import Callout from 'nextra-theme-docs/callout'
+
+# Next.js I18n
+
+<Callout emoji="⚠️">This feature is only available in the docs theme.</Callout>
+
+Nextra supports [Next.js Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing) out of the box.
+
+To add multi-language pages to your Nextra application, just need to config `i18n` in `next.config.js`:
+
+```js filename="next.config.js"
+const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
+module.exports = withNextra({
+  i18n: {
+    locales: ['en', 'zh', 'de'],
+    defaultLocale: 'en'
+  }
+})
+```
+
+Then, add the locale codes to your file extensions (required for the default locale too):
+
+```plaintext
+/pages
+  index.en.md
+  index.zh.md
+  index.de.md
+  meta.en.json
+  meta.zh.json
+  meta.de.json
+  ...
+```
+
+Finally, add the `i18n` option to your `theme.config.js` to configure the language dropdown:
+
+```jsx filename="theme.config.js"
+i18n: [
+  { locale: 'en', text: 'English' },
+  { locale: 'zh', text: '中文' },
+  { locale: 'de', text: 'Deutsch' },
+  { locale: 'ar', text: 'العربية', direction: 'rtl' }
+]
+```

examples/docs/src/pages/features/image.mdx

@@ -0,0 +1,33 @@
+# Next.js Image
+
+You can use [Next.js Image](https://nextjs.org/docs/basic-features/image-optimization) directly in MDX.
+
+If the `demo.png` file is located at `/public/demo.png`, you can use the code below to display it:
+
+```mdx
+import Image from 'next/image'
+
+<Image src="/demo.png" alt="Hello" width={500} height={500} />
+```
+
+## Static Image
+
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout emoji="⚠️">
+  You need to opt-in to this feature by enabling [`unstable_staticImage:
+  true`](/get-started#create-manually).
+</Callout>
+
+Nextra also supports automatic static image imports, you no longer need to specify the width and height of the image manually,
+and you can directly use the Markdown syntax to display the same image:
+
+```markdown
+![Hello](../../../public/demo.png)
+```
+
+With Next.js Image, there will be no layout shift, and a beautiful blury placeholder will be shown by default when loading the images:
+
+<br />
+
+![Nextra](../../../public/og.png)