Docs: Add **Grid Area** documentation

website/app/[locale]/(root)/docs/grid-area/_opengraph-image.tsx

@@ -0,0 +1,12 @@
+import { Props } from 'websites/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
+})

website/app/[locale]/(root)/docs/grid-area/components/Overview.tsx

@@ -0,0 +1,15 @@
+import syntaxes from '../syntaxes'
+import SyntaxTable from '~/components/SyntaxTable'
+import SyntaxTr from '~/components/SyntaxTr'
+
+export default () => {
+    return (
+        <>
+            <SyntaxTable>
+                {syntaxes.map((syntax) =>
+                    <SyntaxTr value={syntax} key={syntax}></SyntaxTr>)
+                }
+            </SyntaxTable>
+        </>
+    )
+}

website/app/[locale]/(root)/docs/grid-area/content.mdx

@@ -0,0 +1,9 @@
+## Overview [sr-only]
+<Overview/>
+
+## Conditionally apply
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
+```html
+<div class="grid-area:none**:hover** grid-area:none**@sm** grid-area:none**@dark** grid-area:none**@print**">…</div>
+```
+

website/app/[locale]/(root)/docs/grid-area/metadata.ts

@@ -0,0 +1,12 @@
+import { Metadata } from 'websites/types/Metadata'
+
+const metadata: Metadata = {
+    title: 'Grid Area',
+    description: 'Style syntax for setting a size and location within a grid.',
+    category: 'Grid',
+    unfinished: true,
+    canIUseLink: 'https://caniuse.com/?search=grid-area',
+    mdnLink: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area'
+}
+
+export default metadata

website/app/[locale]/(root)/docs/grid-area/page.tsx

@@ -0,0 +1,20 @@
+import Layout from '~/layouts/reference'
+import metadata from './metadata'
+/* @ts-expect-error toc */
+import Content, { toc } from './content.mdx'
+import { generate } from '~/utils/metadata'
+
+export const dynamic = 'force-static'
+export const revalidate = false
+
+export async function generateMetadata(props: any, parent: any) {
+    return generate(metadata, props, parent)
+}
+
+export default async function Page(props: any) {
+    return (
+        <Layout {...props} metadata={metadata} toc={toc}>
+            <Content />
+        </Layout >
+    )
+}

website/app/[locale]/(root)/docs/grid-area/syntaxes.ts

@@ -0,0 +1,6 @@
+const syntaxes = [
+    ['grid-area:`value`'],
+    'grid-area:none'
+]
+
+export default syntaxes