Update docs

master-co · Oct 23, 2023 · 2ac3f03 · 2ac3f03
1 parent a174572
commit 2ac3f03
Show file tree

Hide file tree

Showing 31 changed files with 93 additions and 55 deletions.
diff --git a/docs/animations/metadata.ts b/docs/animations/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Animations',
     description: 'Customizing animation keyframes for your design system.',
-    category: 'Customization'
+    category: 'Custom Syntax'
 }
 
 export default metadata
diff --git a/docs/browser-support/metadata.ts b/docs/browser-support/metadata.ts
@@ -3,11 +3,10 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Understand browser support for Master CSS',
     description: 'The core engine of Master CSS hardly affects CSS support for browsers.',
-    category: 'Getting Started',
+    category: 'Fundamentals',
     other: {
         subject: 'Browser Support'
-    },
-    order: 4
+    }
 }
 
 export default metadata
diff --git a/docs/code-linting/content.mdx b/docs/code-linting/content.mdx
@@ -47,22 +47,20 @@ import editors from 'shared/data/editors'
 
 ## Features
 ### Enforce a consistent and logical order of classes
-In the development process, you typically don't pay much attention to the order of classes, and as the number of classes increases, the template markup becomes less readable.
+In practice, you pay less attention to the order of classes, and as the number of classes increases, the template markup becomes less readable.
 
 <figure className="max-w:sm">
     <video className="aspect:1510/750 r:5" autoPlay loop muted playsInline>
         <source src="/videos/consistent-class-order.webm" type="video/webm" />
     </video>
-    <figcaption>Correct the order of the Master CSS class in Visual Studio Code.</figcaption>
+    <figcaption>Correct the order of Master CSS classes in Visual Studio Code.</figcaption>
 </figure>
 
-Enabling this check ensures that classes on any element are consistently organized according to predefined rules.
-
 (!) <span className="text:warning">No consistent class order followed.</span>
 ```mcss
 font:12 font:24@sm m:32 block px:16 font:32@md bg:blue:hover round mb:48
 ```
-(o) Fixes order based on resulting CSS rule precedence.
+(o) Fixes order based on consistent rules.
 ```mcss
 block round bg:blue:hover font:12 font:24@sm font:32@md m:32 mb:48 px:16
 ```

diff --git a/docs/code-linting/react/content.mdx b/docs/code-linting/react/content.mdx
@@ -34,7 +34,7 @@
     <Step>
         ### <StepNum />Start linting your code
         ```bash
-        npx eslint
+        npx eslint *.{ts,tsx,js}
         ```
     </Step>
 </StepSection>
diff --git a/docs/code-linting/svelte/content.mdx b/docs/code-linting/svelte/content.mdx
@@ -51,7 +51,7 @@
     <Step>
         ### <StepNum />Start linting your code
         ```bash
-        npx eslint
+        npx eslint *.svelte
         ```
     </Step>
 </StepSection>
diff --git a/docs/code-linting/vuejs/content.mdx b/docs/code-linting/vuejs/content.mdx
@@ -34,7 +34,7 @@
     <Step>
         ### <StepNum />Start linting your code
         ```bash
-        npx eslint
+        npx eslint *.vue
         ```
     </Step>
 </StepSection>
diff --git a/docs/colors/components/Overview.mdx b/docs/colors/components/Overview.mdx
@@ -11,7 +11,7 @@ export default {
     }
 }
 ```
-Use them in HTML and with dark mode:
+Apply your custom colors with dark mode:
 ```html
 <html class="**dark**">
     <body>

diff --git a/docs/comparison/metadata.ts b/docs/comparison/metadata.ts
@@ -7,7 +7,7 @@ const metadata: Metadata = {
     other: {
         subject: 'Comparison'
     },
-    order: 4,
+    order: 6,
     disabled: true
 }
 

diff --git a/docs/configuration/authoring/metadata.ts b/docs/configuration/authoring/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Authoring Configuration',
     description: 'A guide to fully authoring your configuration package.',
-    category: 'Customization',
+    category: 'Custom Syntax',
     disabled: true
 }
 

diff --git a/docs/configuration/metadata.ts b/docs/configuration/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Configuration',
     description: 'A guide to fully customizing your design system using the configuration API.',
-    category: 'Customization',
+    category: 'Custom Syntax',
     order: 1
 }
 

diff --git a/docs/configuration/setup/metadata.ts b/docs/configuration/setup/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Setup Configuration',
     description: 'An opinionated guide to Master CSS syntax, conventions, and file structure.',
-    category: 'Customization',
+    category: 'Custom Syntax',
     order: 1,
     unfinished: true
 }

diff --git a/docs/fonts/content.mdx b/docs/fonts/content.mdx
@@ -17,6 +17,8 @@
 </Demo>
 The default provides three neutral [font family](/docs/font-family) variables, `sans`, `serif`, and `mono`, to facilitate your use as fallbacks when adding custom fonts.
 
+The `variables.fontFamily` inherits from both `font-family` and `font`, so you can quickly apply it, such as `mcss font:sans`.
+
 ### Add custom fonts
 Define [variables](/docs/variables) to use font tokens from a single source. For example, add `Inter` as the general font and `Fira Code` as the code font.
 ```js name=master.css.js

diff --git a/docs/functions/components/Overview.mdx b/docs/functions/components/Overview.mdx
@@ -5,7 +5,7 @@ export default {
     }
 }
 ```
-Use them in HTML:
+Apply your custom functions:
 ```html
 - <div class="translate(2rem)">…</div>
 + <div class="translate(32)">…</div>

diff --git a/docs/functions/metadata.ts b/docs/functions/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Functions',
     description: 'Customizing functions for your design system.',
-    category: 'Customization',
+    category: 'Custom Syntax',
     unfinished: true
 }
 

diff --git a/docs/global-styles/metadata.ts b/docs/global-styles/metadata.ts
@@ -6,7 +6,8 @@ const metadata: Metadata = {
     category: 'Fundamentals',
     other: {
         subject: 'Global Styles'
-    }
+    },
+    order: 6
 }
 
 export default metadata
diff --git a/docs/installation/(root)/content.mdx b/docs/installation/(root)/content.mdx
@@ -1,9 +1,8 @@
 import frameworks from 'shared/data/frameworks'
 import buildTools from 'shared/data/build-tools'
-import migrations from 'shared/data/migrations'
 import cdns from 'shared/data/cdns'
 
-Installation guides for popular frameworks and build tools integrated with [rendering modes](/docs/rendering-modes) of Master CSS, as well as migration guides.
+Installation guides for popular frameworks and build tools integrated with [rendering modes](/docs/rendering-modes) of Master CSS.
 
 ## Web frameworks
 <IconButtons url="/docs/installation">
@@ -20,11 +19,6 @@ Installation guides for popular frameworks and build tools integrated with [rend
     {cdns}
 </IconButtons>
 
-## Migrations
-<IconButtons url="/docs/installation">
-    {migrations}
-</IconButtons>
-
 ---
 
 Don't have a preferred framework yet? Get started Master CSS with a simple HTML example using [live playground](/play), [CDN](/docs/installation/cdn), or [Vite](/docs/installation/vite).

diff --git a/docs/media-queries/components/Overview.mdx b/docs/media-queries/components/Overview.mdx
@@ -8,7 +8,7 @@ export default {
     }
 }
 ```
-Use them in HTML:
+Apply your custom media queries:
 ```html
 <div class="font:24**@mobile** font:36**@table** font:48**@desktop** text:center**@watch**"></div>
 ```

diff --git a/docs/media-queries/metadata.ts b/docs/media-queries/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Media Queries',
     description: 'Customizing media queries and breakpoints for your design system.',
-    category: 'Customization',
+    category: 'Custom Syntax',
     unfinished: true
 }
 

diff --git a/docs/migration/_opengraph-image.tsx b/docs/migration/_opengraph-image.tsx
@@ -0,0 +1,12 @@
+import { Props } from 'shared/types/Props'
+import create from '~/og-image'
+import metadata from './metadata'
+
+export const alt = metadata.title
+export const contentType = 'image/jpg'
+export const runtime = 'nodejs'
+
+export default (props: Props) => create({
+    props,
+    metadata
+})
diff --git a/docs/migration/content.mdx b/docs/migration/content.mdx
@@ -0,0 +1,5 @@
+import migrations from 'shared/data/migrations'
+
+<IconButtons url="/docs/installation">
+    {migrations}
+</IconButtons>
diff --git a/docs/migration/metadata.ts b/docs/migration/metadata.ts
@@ -0,0 +1,14 @@
+import { Metadata } from 'shared/types/Metadata'
+
+const metadata: Metadata = {
+    title: 'Migrating to Master CSS',
+    description: 'Easily migrate CSS technologies and projects you are currently using to the Master CSS.',
+    category: 'Getting Started',
+    other: {
+        subject: 'Migration'
+    },
+    order: 5,
+    unfinished: true
+}
+
+export default metadata
diff --git a/docs/migration/page.tsx b/docs/migration/page.tsx
@@ -0,0 +1,19 @@
+import metadata from './metadata'
+import Content from './content.mdx'
+import { generate } from '~/utils/metadata'
+import { queryDictionary } from 'shared/dictionaries';
+import DocLayout from '~/layouts/doc'
+
+export async function generateMetadata(props: any, parent: any) {
+    return generate(metadata, props, parent)
+}
+
+export default async function Layout(props: any) {
+    const $ = await queryDictionary(props.params.locale)
+    return (
+        /* @ts-expect-error server component */
+        <DocLayout {...props} metadata={metadata}>
+            <Content />
+        </DocLayout >
+    )
+}
diff --git a/docs/rules/metadata.ts b/docs/rules/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Rules',
     description: 'Customizing syntax rules for your design system.',
-    category: 'Customization',
+    category: 'Custom Syntax',
     unfinished: true
 }
 

diff --git a/docs/selectors/metadata.ts b/docs/selectors/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Selectors',
     description: 'Customizing selectors for your design system.',
-    category: 'Customization',
+    category: 'Custom Syntax',
     unfinished: true
 }
 

diff --git a/docs/semantics/components/Overview.mdx b/docs/semantics/components/Overview.mdx
@@ -10,7 +10,7 @@ export default {
     }
 }
 ```
-Use them in HTML:
+Apply your custom semantics:
 ```html
 <div class="**show** **hide-text**" hidden></div>
 ```
diff --git a/docs/semantics/metadata.ts b/docs/semantics/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Semantics',
     description: 'Customizing semantic classes for your design system.',
-    category: 'Customization',
+    category: 'Custom Syntax',
     unfinished: true
 }
 

diff --git a/docs/styles/components/Overview.mdx b/docs/styles/components/Overview.mdx
@@ -9,7 +9,7 @@ export default {
     }
 }
 ```
-Use them in HTML:
+Apply your custom styles:
 ```html
 <div class="card">
     <img class="card-header" src="…" />

diff --git a/docs/styles/metadata.ts b/docs/styles/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Styles',
     description: 'Customizing abstract styles for your design system.',
-    category: 'Customization',
+    category: 'Custom Syntax',
     unfinished: true
 }
 

diff --git a/docs/variables/components/Overview.mdx b/docs/variables/components/Overview.mdx
@@ -3,22 +3,14 @@ import { variables } from '@master/css'
 
 export default {
     variables: {
-        fontFamily: {
-            sans: ['Inter', ...variables.fontFamily.sans],
-            mono: ['Fira Code', ...variables.fontFamily.mono]
-        }
+        fontFamily: { sans: 'Inter' },
+        section: { md: 1024 },
+        spacing: { x1: 2 },
+        primary: '#000000'
     }
 }
 ```
-Apply custom fonts globally using [font family](/docs/font-family) syntax and [Google Fonts](https://fonts.google.com/):
+Apply custom variables using ambiguous shorthand:
 ```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-+    <link rel="preconnect" href="https://fonts.googleapis.com">
-+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-</head>
-<body class="**font:sans** **font:mono_:where(code,pre)** font-feature:'salt'">…</body>
-</html>
+<div class="**font:sans** **max-w:md** **m:x1** **bg:primary**">…</div>
 ```
diff --git a/docs/variables/content.mdx b/docs/variables/content.mdx
@@ -1,12 +1,14 @@
 ## Overview [sr-only]
 <Overview />
 
----
+Master CSS provides useful variable groups for various inheritance behaviors such as [colors](/docs/colors), [spacings](/docs/spacings), [fonts](/docs/fonts), and [sections](/docs/sections) by default. You can start implementing your design tokens from these topics.
 
-## Basic usage
-🚧
+This guide primarily explains the functionality of variables.
 
 ---
 
-## Customization
-🚧
+## Basic usage
+### Add a variable
+### Add rule-specific variables
+### Add a variable alias
+### Group variables
diff --git a/docs/variables/metadata.ts b/docs/variables/metadata.ts
@@ -3,7 +3,7 @@ import { Metadata } from 'shared/types/Metadata'
 const metadata: Metadata = {
     title: 'Variables',
     description: 'Customizing variables for your design tokens.',
-    category: 'Customization',
+    category: 'Custom Syntax',
     unfinished: true
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ export default { @@
         }
     }
     ```
-    Use them in HTML and with dark mode:
+    Apply your custom colors with dark mode:
     ```html
     <html class="**dark**">
         <body>
@@ Expand Down @@