diff --git a/.prettierrc.js b/.prettierrc.js index 1191f15..0d68114 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,11 +1,3 @@ module.exports = { ...require('@github/prettier-config'), - overrides: [ - { - files: 'src/tokens/**/*.js', - options: { - singleQuote: false - } - } - ] } diff --git a/packages/site/.prettierrc.js b/packages/site/.prettierrc.js new file mode 100644 index 0000000..0d68114 --- /dev/null +++ b/packages/site/.prettierrc.js @@ -0,0 +1,3 @@ +module.exports = { + ...require('@github/prettier-config'), +} diff --git a/packages/site/pages/content-examples/kitchen-sink.mdx b/packages/site/pages/content-examples/kitchen-sink.mdx index 73f27fa..1f64733 100644 --- a/packages/site/pages/content-examples/kitchen-sink.mdx +++ b/packages/site/pages/content-examples/kitchen-sink.mdx @@ -1,33 +1,17 @@ --- title: Kitchen sink -description: Showcasing all content possibilities +description: This is a quick introduction to what is going to be developed here. That can be a chunky paragraph that expands quite a bit of context. --- import {DoDontContainer, Do, Dont} from '@primer/nextocat/components/content/dos-and-donts/DosAndDonts' import {Caption} from '@primer/nextocat/components/content/caption/Caption' -## Heading level 2 +## Heading 2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor lectus -ipsum, consectetur convallis diam pretium quis. Proin ut felis ut eros -tristique tincidunt. - -
-
-
- This quote uses a HTML blockquote elements to wrap the quote. -
- Lisa Vanderschuit, Engineering Program Manager, Shopify -
-
-
-
- -> This example -> uses a standard markdown blockquote - -Integer pellentesque pretium nulla viverra molestie. Praesent quis pretium -sapien. Sed convallis eget lectus et pulvinar: +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - Vivamus eu risus nec lectus consequat rutrum at vel lacus. - Donec at dolor ut metus imperdiet congue vel porta nunc. @@ -35,17 +19,17 @@ sapien. Sed convallis eget lectus et pulvinar: ### Heading level 3 -Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit -amet, tincidunt gravida augue. Ut malesuada, nisl vel dignissim mollis - Mona +Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit +amet, tincidunt gravida augue. Ut malesuada, nisl vel dignissim mollis. + #### Heading level 4 -Secure code as you write it. Automatically review every change to your -codebase and identify vulnerabilities before they reach production. +> A simple markdown quote -Learn more here. +Secure code as you write it. Automatically review every change to your +codebase and identify vulnerabilities before they reach production. Learn more here. ##### Heading level 5 @@ -55,56 +39,24 @@ codebase and identify vulnerabilities before they reach production. ###### Heading level 6 -Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit -amet, tincidunt gravida augue. - -for-each-ref is extremely useful for listing references, finding which references point at a given object ), -which references have been merged into a given branch - -Nunc velit odio, posuere eu felis eget, consectetur fermentum nisi. Aenean -tempor odio id ornare ultrices. Quisque blandit condimentum tellus, semper -efficitur sapien dapibus nec. - -## Do's and Don'ts example - -![An image showing different button types.](https://github.com/primer/brand/assets/6951037/fcc3b962-1b4a-416b-be29-4a70ef503f2a) +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. -Buttons allow users to initiate an action or command when clicked. The button's label or text description indicates the purpose of the action to the user. Most of the time, we use the "Default" button type, but other types of buttons may be used to indicate something special about the button's hierarchy or functionality. - - - - - Keep button labels succinct with no line breaks. - - - - Buttons should never contain line breaks and lose their button shape. - - +--- - - - - Show focus styles on keyboard :focus - - - - Don't remove default button :focus styles. - - +###### Do's and Don'ts - + - - Use sentence case for labels. + + Example of what you should do - - Don't use all-caps or other text formats. + + Example of what you shouldn't do -### Code block w/ line selection +###### Code block w/ line selection ```js {3} filename="demo.js" let a = 1 @@ -112,25 +64,25 @@ let a = 1 console.log(a) ``` -##### Mermaid diagrams +###### Testimonials + +
+
+
+ This quote uses a HTML blockquote elements to wrap the quote. +
+ Lisa Vanderschuit, Engineering Program Manager, Shopify +
+
+
+
+ +###### Mermaid diagrams ```mermaid -graph TD; -subgraph AA [Consumers] -A[Mobile app]; -B[Web app]; -C[Node.js client]; -end -subgraph BB [Services] -E[REST API]; -F[GraphQL ]; -G[SOAP ]; -end -Z[GraphQL ]; -A --> Z; -B --> Z; -C --> Z; -Z --> E; -Z --> F; -Z --> G; +flowchart LR + A[Create vanilla Next.js app] --> + B[Add Nextocat dependency] --> + C[Add .mdx, .md content to /pages] --> + D[Publish site] ``` diff --git a/packages/theme/.prettierrc.js b/packages/theme/.prettierrc.js new file mode 100644 index 0000000..0d68114 --- /dev/null +++ b/packages/theme/.prettierrc.js @@ -0,0 +1,3 @@ +module.exports = { + ...require('@github/prettier-config'), +} diff --git a/packages/theme/css/prose.module.css b/packages/theme/css/prose.module.css index 22972be..5f7ab62 100644 --- a/packages/theme/css/prose.module.css +++ b/packages/theme/css/prose.module.css @@ -46,11 +46,11 @@ /* ---------------------------------------------------------- */ .Prose h1 { - font-weight: var(--brand-heading-weight-700); - font-size: var(--brand-text-size-700); - line-height: var(--brand-text-lineHeight-700); + font-weight: var(--brand-heading-weight-900); + font-size: var(--brand-text-size-900); + line-height: var(--brand-text-lineHeight-900); font-family: var(--brand-heading-fontFamily); - letter-spacing: var(--brand-text-letterSpacing-700); + letter-spacing: var(--brand-text-letterSpacing-800); } .Prose--lineLength h1 { @@ -58,11 +58,11 @@ } .Prose h2 { - font-weight: var(--brand-heading-weight-500); - font-size: var(--brand-text-size-500); - line-height: var(--brand-text-lineHeight-500); + font-weight: var(--brand-heading-weight-700); + font-size: var(--brand-text-size-700); + line-height: var(--brand-text-lineHeight-700); font-family: var(--brand-heading-fontFamily); - letter-spacing: var(--brand-text-letterSpacing-500); + letter-spacing: var(--brand-text-letterSpacing-700); } .Prose--lineLength h2 { @@ -70,11 +70,11 @@ } .Prose h3 { - font-weight: var(--brand-heading-weight-400); - font-size: var(--brand-text-size-400); - line-height: var(--brand-heading-lineHeight-400); + font-weight: var(--brand-heading-weight-600); + font-size: var(--brand-text-size-600); + line-height: var(--brand-heading-lineHeight-600); font-family: var(--brand-heading-fontFamily); - letter-spacing: var(--brand-heading-letterSpacing-400); + letter-spacing: var(--brand-heading-letterSpacing-600); } .Prose--lineLength h1 { @@ -83,27 +83,27 @@ .Prose h4 { --spacing: var(--base-size-40); - font-weight: var(--brand-text-weight-400); - font-size: var(--brand-text-size-300); - line-height: var(--brand-text-lineHeight-300); + font-weight: var(--brand-text-weight-500); + font-size: var(--brand-text-size-500); + line-height: var(--brand-text-lineHeight-500); font-family: var(--brand-heading-fontFamily); - letter-spacing: var(--brand-heading-letterSpacing-300); + letter-spacing: var(--brand-heading-letterSpacing-500); } .Prose h5 { --spacing: var(--base-size-40); font-weight: var(--brand-text-weight-400); - font-size: var(--brand-text-size-300); - line-height: var(--brand-text-lineHeight-300); + font-size: var(--brand-text-size-400); + line-height: var(--brand-text-lineHeight-400); font-family: var(--brand-heading-fontFamily); - letter-spacing: var(--brand-heading-letterSpacing-300); + letter-spacing: var(--brand-heading-letterSpacing-400); } .Prose h6 { --spacing: var(--base-size-48); - font-weight: var(--brand-text-weight-400); - font-size: var(--brand-text-size-300); - line-height: var(--brand-text-lineHeight-300); + font-weight: var(--brand-text-subhead-weight-large); + font-size: var(--brand-text-subhead-size-large); + line-height: var(--brand-text-subhead-lineHeight-large); font-family: var(--brand-heading-fontFamily); letter-spacing: var(--brand-heading-letterSpacing-300); } @@ -261,3 +261,10 @@ line-height: var(--brand-text-lineHeight-100); color: var(--brand-color-text-muted); } + +.Prose hr { + --spacing: var(--base-size-64); + border: 0; + height: 1px; + background: var(--brand-color-border-default); +} diff --git a/packages/theme/index.tsx b/packages/theme/index.tsx index 657af0d..ca6eaae 100644 --- a/packages/theme/index.tsx +++ b/packages/theme/index.tsx @@ -133,7 +133,7 @@ export default function Layout({children, pageOpts}: NextraThemeLayoutProps) { {frontMatter.title && ( - + {frontMatter.title} )}