Polish the docs theme; rename options (#991)

* adjust theme and nextra * add changeset * fix lint errors * rename readingTime * avoid var conflict
shuding · Dec 2, 2022 · d7f2bbc · d7f2bbc · vercel · Dec 2, 2022
1 parent b1d7361
commit d7f2bbc
Show file tree

Hide file tree

Showing 16 changed files with 62 additions and 61 deletions.
diff --git a/.changeset/seven-timers-pretend.md b/.changeset/seven-timers-pretend.md
@@ -0,0 +1,6 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+---
+
+adjust docs theme; rename options
diff --git a/packages/nextra-theme-docs/css/scrollbar.css b/packages/nextra-theme-docs/css/scrollbar.css
@@ -4,16 +4,18 @@
 
   scrollbar-gutter: stable;
   &::-webkit-scrollbar {
-    @apply nx-w-1.5 nx-h-1.5;
+    @apply nx-w-3 nx-h-1.5;
   }
   &::-webkit-scrollbar-track {
     @apply nx-bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
-    @apply nx-rounded-[20px];
+    @apply nx-rounded-[10px];
   }
   &:hover::-webkit-scrollbar-thumb {
-    @apply nx-shadow-[inset_0_0_0_5px_var(--tw-shadow-color)];
+    border: 3px solid transparent;
+    background-color: var(--tw-shadow-color);
+    background-clip: content-box;
     @apply nx-shadow-neutral-500/20 hover:nx-shadow-neutral-500/40;
   }
 

diff --git a/packages/nextra-theme-docs/css/styles.css b/packages/nextra-theme-docs/css/styles.css
@@ -36,11 +36,15 @@ summary {
 
 @media (max-width: 767px) {
   .nextra-sidebar-container {
-    @apply nx-fixed nx-pt-[calc(var(--nextra-navbar-height))] nx-top-0 nx-w-full nx-bottom-24 nx-z-[15] nx-overscroll-contain nx-bg-white dark:nx-bg-dark;
+    @apply nx-fixed nx-pt-[calc(var(--nextra-navbar-height))] nx-top-0 nx-w-full nx-bottom-0 nx-z-[15] nx-overscroll-contain nx-bg-white dark:nx-bg-dark;
     transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
     will-change: transform, opacity;
     contain: layout style;
     backface-visibility: hidden;
+    & > .nextra-scrollbar {
+      mask-image: linear-gradient(to bottom, transparent, #000 20px),
+        linear-gradient(to left, #000 10px, transparent 10px);
+    }
   }
   .nextra-banner-container ~ div {
     .nextra-sidebar-container {

diff --git a/packages/nextra-theme-docs/src/components/navbar.tsx b/packages/nextra-theme-docs/src/components/navbar.tsx
@@ -16,10 +16,13 @@ export type NavBarProps = {
 }
 
 const classes = {
-  link: cn('nx-text-sm contrast-more:nx-text-gray-700 contrast-more:dark:nx-text-gray-100'),
+  link: cn(
+    'nx-text-sm contrast-more:nx-text-gray-700 contrast-more:dark:nx-text-gray-100'
+  ),
   active: cn('nx-subpixel-antialiased contrast-more:nx-font-bold'),
-  inactive:
-    cn('nx-text-gray-600 hover:nx-text-gray-800 dark:nx-text-gray-400 dark:hover:nx-text-gray-200')
+  inactive: cn(
+    'nx-text-gray-600 hover:nx-text-gray-800 dark:nx-text-gray-400 dark:hover:nx-text-gray-200'
+  )
 }
 
 function NavbarMenu({
@@ -53,7 +56,7 @@ function NavbarMenu({
           leaveFrom="nx-opacity-100"
           leaveTo="nx-opacity-0"
         >
-          <Menu.Items className="nx-absolute nx-right-0 nx-z-20 nx-mt-1 nx-max-h-64 nx-min-w-full nx-overflow-auto nx-rounded-md nx-bg-white nx-py-1 nx-text-sm nx-shadow-lg dark:nx-bg-neutral-800">
+          <Menu.Items className="nx-absolute nx-right-0 nx-z-20 nx-mt-1 nx-max-h-64 nx-min-w-full nx-overflow-auto nx-rounded-md nx-border nx-border-black/5 nx-bg-white nx-py-1 nx-text-sm nx-shadow-lg dark:nx-border-white/10 dark:nx-bg-neutral-800">
             {Object.entries(items || {}).map(([key, item]) => (
               <Menu.Item key={key}>
                 <Anchor
@@ -62,7 +65,7 @@ function NavbarMenu({
                   }
                   className={cn(
                     'nx-relative nx-hidden nx-w-full nx-select-none nx-whitespace-nowrap nx-text-gray-600 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-100 md:nx-inline-block',
-                    'nx-py-1.5 ltr:nx-pl-3 ltr:nx-pr-9 rtl:nx-pr-3 rtl:nx-pl-9'
+                    'nx-py-1.5 nx-transition-colors ltr:nx-pl-3 ltr:nx-pr-9 rtl:nx-pr-3 rtl:nx-pl-9'
                   )}
                   newWindow={item.newWindow}
                 >

diff --git a/packages/nextra-theme-docs/src/components/select.tsx b/packages/nextra-theme-docs/src/components/select.tsx
@@ -64,7 +64,7 @@ export function Select({
               ref={container}
               show={open}
               as={Listbox.Options}
-              className="nx-z-20 nx-max-h-64 nx-overflow-auto nx-rounded-md nx-border nx-border-black/5 nx-bg-white nx-py-1 nx-text-sm nx-shadow-lg dark:nx-border-white/20 dark:nx-bg-neutral-800"
+              className="nx-z-20 nx-max-h-64 nx-overflow-auto nx-rounded-md nx-border nx-border-black/5 nx-bg-white nx-py-1 nx-text-sm nx-shadow-lg dark:nx-border-white/10 dark:nx-bg-neutral-800"
               leave="nx-transition-opacity"
               leaveFrom="nx-opacity-100"
               leaveTo="nx-opacity-0"
@@ -79,7 +79,7 @@ export function Select({
                         ? 'nx-bg-primary-50 nx-text-primary-500 dark:nx-bg-primary-500/10'
                         : 'nx-text-gray-800 dark:nx-text-gray-100',
                       'nx-relative nx-cursor-pointer nx-whitespace-nowrap nx-py-1.5',
-                      'ltr:nx-pl-3 ltr:nx-pr-9 rtl:nx-pr-3 rtl:nx-pl-9'
+                      'nx-transition-colors ltr:nx-pl-3 ltr:nx-pr-9 rtl:nx-pr-3 rtl:nx-pl-9'
                     )
                   }
                 >

diff --git a/packages/nextra-theme-docs/src/components/sidebar.tsx b/packages/nextra-theme-docs/src/components/sidebar.tsx
@@ -381,21 +381,14 @@ export function Sidebar({
         )}
         ref={containerRef}
       >
-        <div
-          className={cn(
-            'nx-z-[1]', // for bottom box shadow
-            'nx-p-4 md:nx-hidden',
-            'nx-shadow-[0_2px_14px_6px_#fff] dark:nx-shadow-[0_2px_14px_6px_#111]',
-            'contrast-more:nx-shadow-none dark:contrast-more:nx-shadow-none'
-          )}
-        >
+        <div className={'nx-px-4 nx-pt-4 md:nx-hidden'}>
           {renderComponent(config.search.component, {
             directories: flatDirectories
           })}
         </div>
         <div
           className={cn(
-            'nextra-scrollbar nx-overflow-y-auto nx-px-4 nx-pb-4 md:nx-pt-4',
+            'nextra-scrollbar nx-overflow-y-auto nx-p-4',
             'nx-grow md:nx-h-[calc(100vh-var(--nextra-navbar-height)-3.75rem)]'
           )}
           ref={sidebarRef}

diff --git a/packages/nextra-theme-docs/src/constants.tsx b/packages/nextra-theme-docs/src/constants.tsx
@@ -113,7 +113,7 @@ export const DEFAULT_THEME: DocsThemeConfig = {
   search: {
     component({ className, directories }) {
       const config = useConfig()
-      return config.unstable_flexsearch ? (
+      return config.flexsearch ? (
         <Flexsearch className={className} />
       ) : (
         <MatchSorterSearch className={className} directories={directories} />

diff --git a/packages/nextra-theme-docs/src/contexts/config.tsx b/packages/nextra-theme-docs/src/contexts/config.tsx
@@ -16,10 +16,7 @@ import {
 import { MenuProvider } from './menu'
 
 type Config = DocsThemeConfig &
-  Pick<
-    PageOpts,
-    'unstable_flexsearch' | 'newNextLinkBehavior' | 'title' | 'frontMatter'
-  >
+  Pick<PageOpts, 'flexsearch' | 'newNextLinkBehavior' | 'title' | 'frontMatter'>
 
 const ConfigContext = createContext<Config>({
   title: '',
@@ -41,7 +38,7 @@ export const ConfigProvider = ({
   const extendedConfig: Config = {
     ...DEFAULT_THEME,
     ...themeConfig,
-    unstable_flexsearch: pageOpts.unstable_flexsearch,
+    flexsearch: pageOpts.flexsearch,
     newNextLinkBehavior: pageOpts.newNextLinkBehavior,
     title: pageOpts.title,
     frontMatter: pageOpts.frontMatter,

diff --git a/packages/nextra-theme-docs/src/utils/normalize-pages.ts b/packages/nextra-theme-docs/src/utils/normalize-pages.ts
@@ -249,6 +249,9 @@ export function normalizePages({
     const pageItem: PageItem = getItem()
 
     docsItem.isUnderCurrentDocsTree = isCurrentDocsTree
+    if (type === 'separator') {
+      item.isUnderCurrentDocsTree = isCurrentDocsTree
+    }
 
     // This item is currently active, we collect the active path etc.
     if (a.route === route) {

diff --git a/packages/nextra/src/compile.ts b/packages/nextra/src/compile.ts
@@ -44,10 +44,7 @@ export async function compileMdx(
   source: string,
   loaderOptions: Pick<
     LoaderOptions,
-    | 'unstable_staticImage'
-    | 'unstable_flexsearch'
-    | 'unstable_defaultShowCopyCode'
-    | 'unstable_readingTime'
+    'staticImage' | 'flexsearch' | 'defaultShowCopyCode' | 'readingTime'
   > & {
     mdxOptions?: LoaderOptions['mdxOptions'] &
       Pick<ProcessorOptions, 'jsx' | 'outputFormat'>
@@ -66,11 +63,10 @@ export async function compileMdx(
       ...(mdxOptions.remarkPlugins || []),
       remarkGfm,
       remarkHeadings,
-      loaderOptions.unstable_staticImage &&
-        ([remarkStaticImage, { filePath }] as any),
-      loaderOptions.unstable_flexsearch &&
-        structurize(structurizedData, loaderOptions.unstable_flexsearch),
-      loaderOptions.unstable_readingTime && readingTime
+      loaderOptions.staticImage && ([remarkStaticImage, { filePath }] as any),
+      loaderOptions.flexsearch &&
+        structurize(structurizedData, loaderOptions.flexsearch),
+      loaderOptions.readingTime && readingTime
     ].filter(truthy),
     rehypePlugins: [
       ...(mdxOptions.rehypePlugins || []),
@@ -80,10 +76,7 @@ export async function compileMdx(
         { ...rehypePrettyCodeOptions, ...mdxOptions.rehypePrettyCodeOptions }
       ],
       [rehypeMdxTitle, { name: '__nextra_title__' }],
-      [
-        attachMeta,
-        { defaultShowCopyCode: loaderOptions.unstable_defaultShowCopyCode }
-      ]
+      [attachMeta, { defaultShowCopyCode: loaderOptions.defaultShowCopyCode }]
     ]
   })
   try {

diff --git a/packages/nextra/src/components/button.tsx b/packages/nextra/src/components/button.tsx
@@ -8,8 +8,8 @@ export const Button = ({
   return (
     <button
       className={[
-        'nextra-button nx-transition-colors',
-        'nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-2',
+        'nextra-button nx-transition-all active:nx-opacity-50',
+        'nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5',
         'dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50',
         className
       ].join(' ')}

diff --git a/packages/nextra/src/components/code.tsx b/packages/nextra/src/components/code.tsx
@@ -9,7 +9,7 @@ export const Code = ({
   return (
     <code
       className={[
-        'nx-border-black/5 nx-bg-black/5 nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em]',
+        'nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em]',
         'dark:nx-border-white/10 dark:nx-bg-white/10',
         hasLineNumbers ? '[counter-reset:line]' : '',
         className

diff --git a/packages/nextra/src/components/pre.tsx b/packages/nextra/src/components/pre.tsx
@@ -44,7 +44,7 @@ export const Pre = ({
       <div
         className={[
           'nx-opacity-0 nx-transition-opacity [div:hover>&]:nx-opacity-100',
-          'nx-flex nx-gap-1 nx-absolute nx-m-2 nx-right-0',
+          'nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0',
           filename ? 'nx-top-8' : 'nx-top-0'
         ].join(' ')}
       >

diff --git a/packages/nextra/src/loader.ts b/packages/nextra/src/loader.ts
@@ -65,13 +65,13 @@ async function loader(
     theme,
     themeConfig,
     defaultLocale,
-    unstable_defaultShowCopyCode,
-    unstable_flexsearch,
-    unstable_staticImage,
-    unstable_readingTime,
+    defaultShowCopyCode,
+    flexsearch,
+    staticImage,
+    readingTime: _readingTime,
     mdxOptions,
     pageMapCache,
-    newNextLinkBehavior,
+    newNextLinkBehavior
   } = context.getOptions()
 
   context.cacheable(true)
@@ -121,12 +121,12 @@ async function loader(
         mdxOptions: {
           ...mdxOptions,
           jsx: true,
-          outputFormat: 'program',
+          outputFormat: 'program'
         },
-        unstable_readingTime,
-        unstable_defaultShowCopyCode,
-        unstable_staticImage,
-        unstable_flexsearch,
+        readingTime: _readingTime,
+        defaultShowCopyCode,
+        staticImage,
+        flexsearch
       },
       mdxPath
     )
@@ -152,7 +152,7 @@ export default MDXContent`.trimStart()
 
   const skipFlexsearchIndexing =
     IS_PRODUCTION && indexContentEmitted.has(mdxPath)
-  if (unstable_flexsearch && !skipFlexsearchIndexing) {
+  if (flexsearch && !skipFlexsearchIndexing) {
     if (frontMatter.searchable !== false) {
       addPage({
         locale: locale || DEFAULT_LOCALE,
@@ -192,7 +192,7 @@ export default MDXContent`.trimStart()
     headings,
     hasJsxInH1,
     timestamp,
-    unstable_flexsearch,
+    flexsearch,
     newNextLinkBehavior,
     readingTime
   }

diff --git a/packages/nextra/src/plugin.ts b/packages/nextra/src/plugin.ts
@@ -169,7 +169,7 @@ export class NextraPlugin {
     compiler.hooks.beforeCompile.tapAsync(
       'NextraPlugin',
       async (_, callback) => {
-        if (this.config?.unstable_flexsearch) {
+        if (this.config?.flexsearch) {
           // Restore the search data from the cache.
           restoreCache()
         }

diff --git a/packages/nextra/src/types.ts b/packages/nextra/src/types.ts
@@ -71,7 +71,7 @@ export type PageOpts = {
   headings: Heading[]
   hasJsxInH1?: boolean
   timestamp?: number
-  unstable_flexsearch?: Flexsearch
+  flexsearch?: Flexsearch
   newNextLinkBehavior?: boolean
   readingTime?: ReadingTime
 }
@@ -89,10 +89,10 @@ type Flexsearch = boolean | { codeblocks: boolean }
 export type NextraConfig = {
   theme: Theme
   themeConfig?: string
-  unstable_defaultShowCopyCode?: boolean
-  unstable_flexsearch?: Flexsearch
-  unstable_staticImage?: boolean
-  unstable_readingTime?: boolean
+  defaultShowCopyCode?: boolean
+  flexsearch?: Flexsearch
+  staticImage?: boolean
+  readingTime?: boolean
   mdxOptions?: Pick<ProcessorOptions, 'rehypePlugins' | 'remarkPlugins'> & {
     rehypePrettyCodeOptions?: Partial<RehypePrettyCodeOptions>
   }