From 654ce86281020a2e2e304df841f69f2965a54ee5 Mon Sep 17 00:00:00 2001 From: Johan Brolin Date: Fri, 5 May 2023 15:43:16 +1000 Subject: [PATCH 01/39] Some responsive --- docs/src/app/docs/layout.tsx | 42 ++++++++++++++++++++++++++++----- docs/src/components/sidenav.tsx | 16 +++++++++---- docs/tailwind.config.js | 3 +++ 3 files changed, 50 insertions(+), 11 deletions(-) diff --git a/docs/src/app/docs/layout.tsx b/docs/src/app/docs/layout.tsx index 494f188bc..4fb4bae98 100644 --- a/docs/src/app/docs/layout.tsx +++ b/docs/src/app/docs/layout.tsx @@ -34,16 +34,46 @@ export default function RootLayout({ {/** CONTENT */} -
-
+
+
{/** INNER CONTENT (markdoc goes here) */} -
-
{children}
+
+
{children}
- diff --git a/docs/src/components/sidenav.tsx b/docs/src/components/sidenav.tsx index 477a0d55e..6fcf472f5 100644 --- a/docs/src/components/sidenav.tsx +++ b/docs/src/components/sidenav.tsx @@ -3,7 +3,7 @@ import { cx } from '../utils'; export function NavContainer({ children }: { children: ReactNode }) { return ( -
+
@@ -30,6 +30,14 @@ export function NavList({ ); } +const navItemStyleShared = 'rounded-md px-4 py-2 block text-sm'; + +const navItemStyleIdle = + 'hover:bg-keystatic-gray-light font-normal text-stone-600'; + +const navItemStyleCurrent = + 'bg-keystatic-gray text-stone-700 font-semibold before:block before:absolute before:inset-y-2 before:inset-x-0 before:bg-keystatic-gray-dark before:w-1 before:rounded-r'; + export function NavItem({ label, href, @@ -44,10 +52,8 @@ export function NavItem({
  • diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index 47729d0b7..246e3fdaf 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -25,6 +25,9 @@ module.exports = { maxWidth: { '7xl': 1224, // 1200px + 24px gutter (px-6) }, + screens: { + '2lg': '1100px', + }, }, }, plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')], From 616e33dca203f1b9768ad0c5032847eac71e9ba1 Mon Sep 17 00:00:00 2001 From: Johan Brolin Date: Fri, 5 May 2023 16:50:02 +1000 Subject: [PATCH 02/39] WIP --- docs/src/components/button.tsx | 22 ++++++++++---------- docs/src/components/navigation.tsx | 33 +++++++++++++++++++++++------- docs/src/components/sidenav.tsx | 15 ++++++++++---- 3 files changed, 48 insertions(+), 22 deletions(-) diff --git a/docs/src/components/button.tsx b/docs/src/components/button.tsx index ab77f6f9a..da8d14937 100644 --- a/docs/src/components/button.tsx +++ b/docs/src/components/button.tsx @@ -1,31 +1,31 @@ -import Link from "next/link"; -import { AllHTMLAttributes, ButtonHTMLAttributes } from "react"; +import Link from 'next/link'; +import { AllHTMLAttributes, ButtonHTMLAttributes } from 'react'; -import { cx } from "../utils"; +import { cx } from '../utils'; type ButtonProps = { - impact?: "bold" | "light"; + impact?: 'bold' | 'light'; href?: string; isLoading?: boolean; - type?: ButtonHTMLAttributes["type"]; + type?: ButtonHTMLAttributes['type']; } & AllHTMLAttributes; const baseClasses = - "block rounded-lg px-5 py-3 text-center font-semibold leading-none border"; -const impactClasses: Record = { - bold: "rounded-lg bg-black px-5 py-3 text-center font-semibold leading-none text-white hover:bg-stone-800 border-transparent", + 'block rounded-lg px-5 py-3 text-center font-semibold leading-none border'; +const impactClasses: Record = { + bold: 'rounded-lg bg-black px-5 py-3 text-center font-semibold leading-none text-white hover:bg-stone-800 border-transparent', light: - "rounded-lg bg-transparent border-black text-black px-5 py-3 text-center font-semibold leading-none hover:bg-stone-800/10", + 'rounded-lg bg-transparent border-black text-black px-5 py-3 text-center font-semibold leading-none hover:bg-stone-800/10', }; // ---------- export default function Button({ - impact = "bold", + impact = 'bold', href, isLoading = false, children, - className = "", + className = '', ...props }: ButtonProps) { return href ? ( diff --git a/docs/src/components/navigation.tsx b/docs/src/components/navigation.tsx index 04ff6b6e0..c4e6c617f 100644 --- a/docs/src/components/navigation.tsx +++ b/docs/src/components/navigation.tsx @@ -1,7 +1,6 @@ import Link from 'next/link'; import Button from './button'; -import { cx } from '../utils'; type NavigationProps = { showCta?: boolean; @@ -11,7 +10,7 @@ export default function Index({ showCta = true }: NavigationProps) { return (
    -
    diff --git a/docs/src/components/sidenav.tsx b/docs/src/components/sidenav.tsx index 6fcf472f5..c8e08b00f 100644 --- a/docs/src/components/sidenav.tsx +++ b/docs/src/components/sidenav.tsx @@ -3,10 +3,17 @@ import { cx } from '../utils'; export function NavContainer({ children }: { children: ReactNode }) { return ( -
    - + //
    +
    +
    + Hej hej +
    + +
    + +
    ); } From 980d31031740a7e80bc8165b179a3abc34d2e909 Mon Sep 17 00:00:00 2001 From: Johan Brolin Date: Mon, 8 May 2023 14:25:48 +1000 Subject: [PATCH 03/39] Version 1 --- docs/src/app/docs/layout.tsx | 10 ++--- docs/src/components/navigation.tsx | 18 ++++---- docs/src/components/sidenav.tsx | 72 +++++++++++++++++++++++++----- 3 files changed, 75 insertions(+), 25 deletions(-) diff --git a/docs/src/app/docs/layout.tsx b/docs/src/app/docs/layout.tsx index 4fb4bae98..1f56f999d 100644 --- a/docs/src/app/docs/layout.tsx +++ b/docs/src/app/docs/layout.tsx @@ -18,12 +18,12 @@ export default function RootLayout({
    {/** TOP NAV */} -
    +
    {/** MAIN */} -
    +
    {/** SIDE NAV */} @@ -34,14 +34,14 @@ export default function RootLayout({ {/** CONTENT */} -
    +
    {/** INNER CONTENT (markdoc goes here) */}
    {children}
    {/** TOCs */} -
    +
    On this page
    @@ -49,7 +49,7 @@ export default function RootLayout({
    @@ -130,12 +140,13 @@ export default function Index({ navigationMap }: NavigationProps) { ); } -export function SocialLinks() { +export function SocialLinks({ tabIndex }: { tabIndex?: number }) { return (
    Keystatic on Mastodon Keystatic on GitHub Keystatic on Twitter {label} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9e458cb55..56cf49d37 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2118,6 +2118,7 @@ importers: prettier-plugin-tailwindcss: ^0.2.2 react: ^18.2.0 react-dom: ^18.2.0 + react-focus-lock: ^2.9.4 shiki: ^0.14.2 tailwindcss: ^3.2.6 typescript: ^5.0.2 @@ -2138,6 +2139,7 @@ importers: next-seo: 5.15.0_ld2jel3hspngo3u5lti2kgl2sq react: 18.2.0 react-dom: 18.2.0_react@18.2.0 + react-focus-lock: 2.9.4_pmekkgnqduwlme35zpnqhenc34 shiki: 0.14.2 typescript: 5.0.2 zod: 3.20.6 @@ -13828,6 +13830,10 @@ packages: engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} dev: false + /detect-node-es/1.1.0: + resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} + dev: false + /detect-node/2.1.0: resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==} dev: true @@ -15673,6 +15679,13 @@ packages: readable-stream: 2.3.7 dev: true + /focus-lock/0.11.6: + resolution: {integrity: sha512-KSuV3ur4gf2KqMNoZx3nXNVhqCkn42GuTYCX4tXPEwf0MjpFQmNMiN6m7dXaUXgIoivL6/65agoUMg4RLS0Vbg==} + engines: {node: '>=10'} + dependencies: + tslib: 2.5.0 + dev: false + /follow-redirects/1.15.2: resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==} engines: {node: '>=4.0'} @@ -19881,7 +19894,7 @@ packages: react: '>=16.0.0' react-dom: '>=16.0.0' dependencies: - next: 13.2.4_6m24vuloj5ihw4zc5lbsktc4fu + next: 13.2.4_biqbaboplfbrettd7655fr4n2y react: 18.2.0 react-dom: 18.2.0_react@18.2.0 dev: false @@ -21728,6 +21741,15 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: true + /react-clientside-effect/1.2.6_react@18.2.0: + resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==} + peerDependencies: + react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@babel/runtime': 7.21.0 + react: 18.2.0 + dev: false + /react-docgen-typescript/2.2.2_typescript@4.9.5: resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==} peerDependencies: @@ -21785,6 +21807,25 @@ packages: react-is: 17.0.2 dev: true + /react-focus-lock/2.9.4_pmekkgnqduwlme35zpnqhenc34: + resolution: {integrity: sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.21.0 + '@types/react': 18.0.28 + focus-lock: 0.11.6 + prop-types: 15.8.1 + react: 18.2.0 + react-clientside-effect: 1.2.6_react@18.2.0 + use-callback-ref: 1.3.0_pmekkgnqduwlme35zpnqhenc34 + use-sidecar: 1.1.2_pmekkgnqduwlme35zpnqhenc34 + dev: false + /react-inspector/5.1.1_react@18.2.0: resolution: {integrity: sha512-GURDaYzoLbW8pMGXwYPDBIv6nqei4kK7LPRZ9q9HCZF54wqXz/dnylBp/kfE9XmekBhHvLDdcYeyIwSrvtOiWg==} peerDependencies: @@ -24607,6 +24648,21 @@ packages: - graphql dev: false + /use-callback-ref/1.3.0_pmekkgnqduwlme35zpnqhenc34: + resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.0.28 + react: 18.2.0 + tslib: 2.5.0 + dev: false + /use-debounce/9.0.3_react@18.2.0: resolution: {integrity: sha512-FhtlbDtDXILJV7Lix5OZj5yX/fW1tzq+VrvK1fnT2bUrPOGruU9Rw8NCEn+UI9wopfERBEZAOQ8lfeCJPllgnw==} engines: {node: '>= 10.0.0'} @@ -24616,6 +24672,22 @@ packages: react: 18.2.0 dev: true + /use-sidecar/1.1.2_pmekkgnqduwlme35zpnqhenc34: + resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.0.28 + detect-node-es: 1.1.0 + react: 18.2.0 + tslib: 2.5.0 + dev: false + /use-sync-external-store/1.2.0_react@18.2.0: resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} peerDependencies: From a59adea698ed88b637129314336f69f2a32a2ecc Mon Sep 17 00:00:00 2001 From: Barnaby Bishop Date: Wed, 17 May 2023 15:41:54 +1000 Subject: [PATCH 10/39] Docs: Moved all pages from `pages` to `docs` - Replaced useRouter from next/router to next/navigation - Updated modal logic to use useRouters basic API - Removed next-seo as Next13 provides that out of the box --- docs/package.json | 1 - docs/src/app/docs/layout.tsx | 99 +++++++++---------- docs/src/app/layout.tsx | 63 ++++++++++++ docs/src/{pages/index.tsx => app/page.tsx} | 0 .../privacy-policy/page.tsx} | 6 +- .../thank-you.tsx => app/thank-you/page.tsx} | 4 +- docs/src/components/call-to-action.tsx | 2 + docs/src/components/forms/get-access.tsx | 7 +- docs/src/components/forms/get-notified.tsx | 6 +- docs/src/components/mailing-list.tsx | 2 + docs/src/components/templates.tsx | 35 +++---- docs/src/hooks/useFormSubmission.ts | 2 +- docs/src/pages/_app.tsx | 82 --------------- pnpm-lock.yaml | 15 ++- 14 files changed, 150 insertions(+), 174 deletions(-) create mode 100644 docs/src/app/layout.tsx rename docs/src/{pages/index.tsx => app/page.tsx} (100%) rename docs/src/{pages/privacy-policy.tsx => app/privacy-policy/page.tsx} (55%) rename docs/src/{pages/thank-you.tsx => app/thank-you/page.tsx} (93%) delete mode 100644 docs/src/pages/_app.tsx diff --git a/docs/package.json b/docs/package.json index 5928930a4..fc8974ae3 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,7 +20,6 @@ "@vercel/analytics": "^0.1.8", "cookie": "^0.5.0", "next": "^13.4.1", - "next-seo": "^5.4.0", "react": "^18.2.0", "react-dom": "^18.2.0", "shiki": "^0.14.2", diff --git a/docs/src/app/docs/layout.tsx b/docs/src/app/docs/layout.tsx index 1f040a154..323de3698 100644 --- a/docs/src/app/docs/layout.tsx +++ b/docs/src/app/docs/layout.tsx @@ -37,66 +37,57 @@ export default async function RootLayout({ })); return ( - - -
    - {/** TOP NAV */} -
    - -
    +
    + {/** TOP NAV */} +
    + +
    - {/** MAIN */} -
    - {/** SIDE NAV */} - - {navigationMap?.map(({ groupName, items }) => ( - - {items.map(({ label, href, title }) => ( - - ))} - + {/** MAIN */} +
    + {/** SIDE NAV */} + + {navigationMap?.map(({ groupName, items }) => ( + + {items.map(({ label, href, title }) => ( + ))} - - - {/** CONTENT */} -
    -
    - {/** INNER CONTENT (markdoc goes here) */} -
    -
    {children}
    - -
    -
    - On this page -
    -
    -
    + + ))} + - {/** FOOTER */} -
    -
    + {/** CONTENT */} +
    +
    + {/** INNER CONTENT (markdoc goes here) */} +
    +
    {children}
    -

    - © {new Date().getFullYear()} Thinkmill. All rights - reserved.{' '} - - Privacy policy - -

    -
    +
    +
    + On this page +
    -
    + + {/** FOOTER */} +
    +
    + +

    + © {new Date().getFullYear()} Thinkmill. All rights + reserved.{' '} + + Privacy policy + +

    +
    +
    - - +
    +
    ); } diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx new file mode 100644 index 000000000..f6b8bd4f2 --- /dev/null +++ b/docs/src/app/layout.tsx @@ -0,0 +1,63 @@ +import Head from 'next/head'; +import { Analytics } from '@vercel/analytics/react'; + +import '../styles/global.css'; + +export const metadata = { + title: 'Meet Keystatic', + description: + "Keystatic is a new tool from Thinkmill Labs that opens up your code-based content (written in Markdown, JSON or YAML) to contributors who aren't technical.", + openGraph: { + images: [ + { + url: `/images/og-image.jpg`, + width: 1200, + height: 630, + alt: 'Keystatic cover image', + type: 'image/jpeg', + }, + ], + siteName: 'Keystatic', + }, + twitter: { + handle: '@thekeystatic', + site: '@site', + cardType: 'summary_large_image', + }, +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + + + + + + + + + {children} + + + ); +} diff --git a/docs/src/pages/index.tsx b/docs/src/app/page.tsx similarity index 100% rename from docs/src/pages/index.tsx rename to docs/src/app/page.tsx diff --git a/docs/src/pages/privacy-policy.tsx b/docs/src/app/privacy-policy/page.tsx similarity index 55% rename from docs/src/pages/privacy-policy.tsx rename to docs/src/app/privacy-policy/page.tsx index 258b920a5..f443a56f5 100644 --- a/docs/src/pages/privacy-policy.tsx +++ b/docs/src/app/privacy-policy/page.tsx @@ -1,6 +1,6 @@ -import Navigation from '../components/navigation'; -import PrivacyPolicy from '../components/privacy-policy'; -import Footer from '../components/footer'; +import Navigation from '../../components/navigation'; +import PrivacyPolicy from '../../components/privacy-policy'; +import Footer from '../../components/footer'; export default function PrivacyPolicyPage() { return ( diff --git a/docs/src/pages/thank-you.tsx b/docs/src/app/thank-you/page.tsx similarity index 93% rename from docs/src/pages/thank-you.tsx rename to docs/src/app/thank-you/page.tsx index fe7e59118..6a8cf4d79 100644 --- a/docs/src/pages/thank-you.tsx +++ b/docs/src/app/thank-you/page.tsx @@ -1,5 +1,5 @@ -import Navigation from '../components/navigation'; -import Footer from '../components/footer'; +import Navigation from '../../components/navigation'; +import Footer from '../../components/footer'; export default function Index() { return ( diff --git a/docs/src/components/call-to-action.tsx b/docs/src/components/call-to-action.tsx index 6400d937f..78fdf2823 100644 --- a/docs/src/components/call-to-action.tsx +++ b/docs/src/components/call-to-action.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useState } from 'react'; import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'; diff --git a/docs/src/components/forms/get-access.tsx b/docs/src/components/forms/get-access.tsx index 4f073e694..ab44b9bec 100644 --- a/docs/src/components/forms/get-access.tsx +++ b/docs/src/components/forms/get-access.tsx @@ -1,13 +1,14 @@ -import { useRouter } from 'next/router'; +// import { useRouter } from 'next/router'; import { ArrowSmallRightIcon } from '@heroicons/react/24/solid'; import Button from '../button'; import { useFormSubmission } from '../../hooks/useFormSubmission'; import type { Template } from '../templates'; import { GET_ACCESS_TABLE_ID } from './table-id'; +import { useSearchParams } from 'next/navigation'; export default function GetAccessForm({ template }: { template: Template }) { - const router = useRouter(); + const templateParam = useSearchParams()?.get('template') || ''; const { sendForm, isLoading } = useFormSubmission(); async function handleSubmit(event: React.FormEvent) { @@ -41,7 +42,7 @@ export default function GetAccessForm({ template }: { template: Template }) { return (
    - +