diff --git a/docs/accessibility.mdx b/docs/accessibility.mdx index 26de359df7..569dbd8274 100644 --- a/docs/accessibility.mdx +++ b/docs/accessibility.mdx @@ -2,8 +2,8 @@ sort: 10 --- -_Getting Started_ +_Using DayPicker_ -# Accessible Date Pickers +# Accessibility DayPicker follows the ARIA guidelines for date pickers, including keyboard navigation, focus management, and labeling. However, as developer you will need to adapt DayPicker to your specific use cases. diff --git a/docs/changelog.mdx b/docs/changelog.mdx new file mode 100644 index 0000000000..3064c971e5 --- /dev/null +++ b/docs/changelog.mdx @@ -0,0 +1,9 @@ +--- +sort: 20 +--- + +_Introduction_ + +# Changelog + +WIP. diff --git a/docs/guides/custom-components.mdx b/docs/guides/custom-components.mdx index c156721427..6d148fca61 100644 --- a/docs/guides/custom-components.mdx +++ b/docs/guides/custom-components.mdx @@ -6,8 +6,6 @@ _Advanced Guides_ # Custom Components -> Customize the components used internally by DayPicker. - Use the `components` prop to replace some of the internal components used by DayPicker with a custom implementation. **TODO**: This section is still a draft. diff --git a/docs/guides/custom-modifiers.mdx b/docs/guides/custom-modifiers.mdx index c901d6ce3c..2d405ec2c3 100644 --- a/docs/guides/custom-modifiers.mdx +++ b/docs/guides/custom-modifiers.mdx @@ -6,6 +6,6 @@ _Advanced Guides_ # Custom Modifiers -> Modifiers allows to customize the appearance of the days in the calendar. +Modifiers allows to customize the appearance of the days in the calendar. **TODO**: This section is still a draft. diff --git a/docs/guides/custom-selections.mdx b/docs/guides/custom-selections.mdx index d3051ff2e3..a13f2560bc 100644 --- a/docs/guides/custom-selections.mdx +++ b/docs/guides/custom-selections.mdx @@ -6,6 +6,4 @@ _Advanced Guides_ # Custom Selections -> Implement different ways to select days. - **TODO**: This section is still a draft. diff --git a/docs/guides/localization.mdx b/docs/guides/localization.mdx index a97db4ce4b..55b02d32ba 100644 --- a/docs/guides/localization.mdx +++ b/docs/guides/localization.mdx @@ -6,7 +6,7 @@ _Advanced Guides_ # Localization -> DayPicker can be localized in any language using the date-fns locale object. +DayPicker can be localized in any language using the date-fns locale objects. ## Change the Locale diff --git a/docs/guides/styling.mdx b/docs/guides/styling.mdx index 8ef43dce27..4b3d3a90bf 100644 --- a/docs/guides/styling.mdx +++ b/docs/guides/styling.mdx @@ -2,11 +2,11 @@ sort: 5 --- -_Getting Started_ +_Using DayPicker_ # Styling -> DayPicker comes with a minimal style inspired by MacOS date pickers and it's designed to be easily customized. +DayPicker comes with a minimal style inspired by MacOS date pickers and it's designed to be easily customized. ## Importing the Default Style diff --git a/docs/index.mdx b/docs/index.mdx index 4f7ad6fa62..e1986d2c08 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -3,6 +3,7 @@ section: Introduction description: DayPicker is a React component to build date pickers, calendars, and date inputs for web applications. navigationLabel: Introduction sort: 1 +toc: false --- # React DayPicker diff --git a/docs/installing.mdx b/docs/installing.mdx index 852ceb65fe..c8990c5a0b 100644 --- a/docs/installing.mdx +++ b/docs/installing.mdx @@ -3,7 +3,7 @@ sort: 2 navigationLabel: Installing --- -_Getting Started_ +_Introduction_ # Installing DayPicker diff --git a/docs/props.mdx b/docs/props.mdx index 0d56e3eefd..c2b718480f 100644 --- a/docs/props.mdx +++ b/docs/props.mdx @@ -2,7 +2,7 @@ sort: 4 --- -_Getting Started_ +_Using DayPicker_ # DayPicker Props diff --git a/docs/upgrading.mdx b/docs/upgrading.mdx index 7dd65e78e5..e54a2d9e52 100644 --- a/docs/upgrading.mdx +++ b/docs/upgrading.mdx @@ -2,7 +2,7 @@ sort: 20 --- -_Getting Started_ +_Introduction_ # Upgrading diff --git a/package.json b/package.json index 90eacb4485..7767a9cbaf 100644 --- a/package.json +++ b/package.json @@ -32,8 +32,7 @@ } }, "./style.css": { - "default": "./src/style.css", - "types": "./src/style.d.ts" + "default": "./src/style.css" }, "./style.module.css": { "default": "./src/style.css", diff --git a/website/README.md b/website/README.md index c4033664f8..14705873b3 100644 --- a/website/README.md +++ b/website/README.md @@ -1,6 +1,6 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). -## Getting Started +## Using DayPicker First, run the development server: diff --git a/website/components/DocHeader.tsx b/website/components/DocHeader.tsx index eb60e6c529..663e64bb0e 100644 --- a/website/components/DocHeader.tsx +++ b/website/components/DocHeader.tsx @@ -21,7 +21,7 @@ export function DocHeader({ doc }: { doc: Doc }) { )} {doc.description && ( - + {doc.description} )} diff --git a/website/components/DocPage.tsx b/website/components/DocPage.tsx deleted file mode 100644 index bdc15329f5..0000000000 --- a/website/components/DocPage.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { Doc, DocsNavigation } from "@/lib/docs"; -import { Box, Flex, Heading, Separator, Text } from "@radix-ui/themes"; -import { Toc } from "@stefanprobst/rehype-extract-toc"; - -import styles from "./DocPage.module.css"; -import { Sidebar } from "./Sidebar"; -import { TableOfContent } from "./TableOfContent"; - -export interface DocPageProps { - navigation: DocsNavigation; - doc: Doc; - toc: Toc; - children: React.ReactNode; -} - -export function DocPage(props: DocPageProps) { - const { doc, navigation, toc } = props; - - const isMainDocs = doc.slug[0] !== "api"; - const isApiMainDocs = doc.slug[0] === "api" && doc.slug[1] === "main"; - - return ( - - - - - - - - - - -
- - -
- {doc.section && ( - - {doc.section} - - )} - {doc.title && ( - - {doc.title} - - )} - {doc.description && ( - - {doc.description} - - )} - -
- - {toc.length > 0 && ( - // Show the table of content on mobile - - - - )} - - {props.children} - - {/* */} - {/* */} - - {toc.length > 0 && ( - // Show the table of content on desktop - - - - - - )} - -
- - ); -} diff --git a/website/components/DocsLayout.tsx b/website/components/DocsLayout.tsx index 392dd3920a..6d935a9f2e 100644 --- a/website/components/DocsLayout.tsx +++ b/website/components/DocsLayout.tsx @@ -28,20 +28,21 @@ export function DocsLayout(props: DocsLayoutProps) { {/* Sidebar */} - + + + {/* Content */} - + {props.children} @@ -64,7 +65,9 @@ export function DocsLayout(props: DocsLayoutProps) { borderColor: "var(--gray-a5)", }} > - {toc && toc.length > 3 && } + {doc.toc && toc && toc.length > 3 && ( + + )} diff --git a/website/components/codeBlockStyles.module.css b/website/components/codeBlockStyles.module.css new file mode 100644 index 0000000000..82560d5659 --- /dev/null +++ b/website/components/codeBlockStyles.module.css @@ -0,0 +1,6 @@ +.figcaption { +} + +.figcaption + div { + @apply mt-1; +} diff --git a/website/components/mdx-components.tsx b/website/components/mdx-components.tsx index c658a1b2b0..7bf83e9547 100644 --- a/website/components/mdx-components.tsx +++ b/website/components/mdx-components.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import { PropsWithChildren } from "react"; import type { MDXComponents } from "mdx/types"; @@ -7,11 +8,13 @@ import { DayPicker } from "react-day-picker"; import { CodeBlock } from "@/components/CodeBlock"; import { LinkHeading } from "@/components/LinkHeading"; import { Steps } from "@/components/Steps"; +import codeBlockStyles from "@/components/codeBlockStyles.module.css"; import listStyles from "@/components/listStyles.module.css"; import tableStyles from "@/components/tableStyles.module.css"; import * as Examples from "@/examples"; +import { ExternalLinkIcon } from "@radix-ui/react-icons"; import { Blockquote, Box, @@ -21,7 +24,6 @@ import { Flex, Heading, Kbd, - Link, Separator, Strong, Table, @@ -61,17 +63,31 @@ export const components: MDXComponents = { const isExternal = href.startsWith("http"); return ( - + {props.children} + {isExternal && ( + + + + )} - + ); }, @@ -95,7 +111,7 @@ export const components: MDXComponents = { const { children, ...restProps } = props; if ("data-rehype-pretty-code-title" in props) { return ( -
+
{children}
); @@ -117,7 +133,7 @@ export const components: MDXComponents = { return <>; } return ( - + ); @@ -127,15 +143,17 @@ export const components: MDXComponents = { } return <>; } + + // Add the filename or the title to the code if ("data-rehype-pretty-code-title" in props) { - // Add the filename or the title to the code const { children, ...restProps } = props; return ( -
- {props.children} +
+ {children}
); } + return
; }, h1: (props) => ( @@ -147,7 +165,7 @@ export const components: MDXComponents = { h2: (props) => { const { children, id } = props; return ( - +

{id ? {children} : children}

 ); @@ -193,18 +211,16 @@ export const components: MDXComponents = { return ( - 
+        
+          
+        
       
     );
   },
@@ -220,24 +236,10 @@ export const components: MDXComponents = {
 
 function CodeBlockTitle(props: PropsWithChildren) {
   return (
-    
-      
-        {props.children}
+    
+      
+        ./{props.children}
       
-    
+    
   );
 }
diff --git a/website/lib/docs.ts b/website/lib/docs.ts
index 457159413d..c3c6d14481 100644
--- a/website/lib/docs.ts
+++ b/website/lib/docs.ts
@@ -17,13 +17,14 @@ export type Frontmatter = {
   title?: string;
   description?: string;
   sort?: string;
+  toc?: boolean;
   navigationLabel?: string;
   section?: string;
 };
 
 export type DocSectionName =
   | "Introduction"
-  | "Getting Started"
+  | "Using DayPicker"
   | "Advanced Guides"
   | "About DayPicker";
 
@@ -35,6 +36,7 @@ export type Doc = {
   navigationLabel?: string;
   description: string;
   section: string;
+  toc: boolean;
   sort: number;
   path: string;
 };
@@ -42,7 +44,7 @@ export type Doc = {
 const DOCS_PATH = path.join(process.cwd(), "../docs");
 const DOCS_SORTBY = [
   "Introduction",
-  "Getting Started",
+  "Using DayPicker",
   "Advanced Guides",
   "About DayPicker",
 ];
@@ -83,6 +85,7 @@ export function getDocs(): Doc[] {
     const title = data.title ?? firstHeading ?? slug[slug.length - 1];
 
     const doc: Doc = {
+      toc: data.toc ?? true,
       sort: data.sort ? parseInt(data.sort) : 100,
       section: data.section ?? section ?? slug[0],
       description: data.description ?? description ?? "",