Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs - Layout and responsive navigation #270

Merged
merged 46 commits into from
May 24, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
654ce86
Some responsive
jtbrolin May 5, 2023
616e33d
WIP
jtbrolin May 5, 2023
980d310
Version 1
jtbrolin May 8, 2023
d2269b7
Menu in other palce
jtbrolin May 8, 2023
a4271a8
Stroke
jtbrolin May 8, 2023
51d43b2
Stuff
jtbrolin May 8, 2023
5a9c345
Merge branch 'docs' into docs-johan-nav-2
jtbrolin May 15, 2023
2c94cfa
Some changes
jtbrolin May 15, 2023
824dfbe
Tweaks
jtbrolin May 15, 2023
1db65e7
Changes
jtbrolin May 15, 2023
666094c
Merge branch 'docs' into docs-johan-nav-2
jtbrolin May 15, 2023
2fdee4e
Merge branch 'docs' into docs-johan-nav-2
jtbrolin May 16, 2023
a59adea
Docs: Moved all pages from `pages` to `docs`
BarnabyBishop May 17, 2023
c73fcfb
Added .env.example
BarnabyBishop May 17, 2023
7bdc38c
Reshuffle
jtbrolin May 17, 2023
a603a61
Fixed shadow transition
jtbrolin May 17, 2023
a14820b
Some more tweaks
jtbrolin May 17, 2023
afd4f07
Clean up
BarnabyBishop May 17, 2023
eff4bb5
Fixed duplicate key
jtbrolin May 17, 2023
1699f7e
Merge branch 'docs-johan-nav-2' into docs-johan-latest
jtbrolin May 17, 2023
55f6604
Merging
jtbrolin May 17, 2023
7ee1d51
Style
jtbrolin May 17, 2023
9c96230
Tweaks
jtbrolin May 17, 2023
623c820
is
jtbrolin May 17, 2023
45ecfbb
Fix
jtbrolin May 18, 2023
fdcc9d0
Typescript fix
BarnabyBishop May 18, 2023
70e84c8
Removed unnecessary `.toString()`s
BarnabyBishop May 18, 2023
33ede42
Updated modals to use local state rather than URL state due to scolli…
BarnabyBishop May 18, 2023
8f93427
Merge branch 'docs-appdir' into docs-johan-latest
jtbrolin May 18, 2023
cc0ca0c
Abstracted reader into a util
jtbrolin May 18, 2023
6c08706
Merge branch 'docs' into docs-johan-nav-2
jtbrolin May 18, 2023
9e2b819
Fix duplicate text style
jtbrolin May 21, 2023
c46b047
Fix scrolling shadow issue
jtbrolin May 21, 2023
4f5e5a7
dvh fix
jtbrolin May 22, 2023
0262716
Capitalisation tweak
jtbrolin May 22, 2023
65379ae
PR feedback pt 1
jtbrolin May 23, 2023
0c3bf0d
Made with red heart in Australia
jtbrolin May 23, 2023
7b66312
PR feedback pt 2
jtbrolin May 23, 2023
71c5146
Close the mobile menu when ESC key is pressed
jtbrolin May 23, 2023
2cfb32e
Const
jtbrolin May 23, 2023
19d1201
lock
jtbrolin May 23, 2023
0907164
lock
jtbrolin May 23, 2023
6715d12
Route group for multiple RootLayouts
jtbrolin May 24, 2023
6e354f7
Re-shuffle after discussion (public) route group
jtbrolin May 24, 2023
d1aab89
Merge branch 'docs' into docs-johan-nav-2
jtbrolin May 24, 2023
e64f9dd
Revert pnpm lock file back to v5.4
BarnabyBishop May 24, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"next": "^13.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-focus-lock": "^2.9.4",
"shiki": "^0.14.2",
"typescript": "^5.0.2"
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { createReader } from '@keystatic/core/reader';
import DocumentRenderer from '../../../components/document-renderer';
import keystaticConfig from '../../../../keystatic.config';
import DocumentRenderer from '../../../../components/document-renderer';
import keystaticConfig from '../../../../../keystatic.config';

const reader = createReader('', keystaticConfig);

Expand Down
55 changes: 55 additions & 0 deletions docs/src/app/(public)/docs/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import '../../../styles/global.css';
import { SideNav } from '../../../components/navigation/side-nav';
import { NavGroup } from '../../../components/navigation/nav-group';
import { NavItem } from '../../../components/navigation/nav-item';
import { DocsFooter } from '../../../components/footer';
import { TableOfContents } from '../../../components/navigation/toc';
import { getNavigationMap } from '../../../utils/reader';

export const metadata = {
title: 'Keystatic - Docs',
description: 'Documentation for Keystatic.',
};

export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const navigationMap = await getNavigationMap();

return (
<div className="max-w-7xl min-h-screen mx-auto">
<SideNav>
{navigationMap?.map(({ groupName, items }) => (
<NavGroup key={groupName} title={groupName}>
{items.map(({ label, href, title }) => (
<NavItem
key={href}
label={label}
href={href}
title={title}
level="sub"
/>
))}
</NavGroup>
))}
</SideNav>

{/** CONTENT */}
<div className="px-6 flex-1 lg:pl-60 lg:pt-24">
<div className="py-10 lg:pl-12">
<main className="flex gap-8">
{/** INNER CONTENT */}
<div className="flex-1">{children}</div>

{/** TOCs */}
<TableOfContents />
</main>

<DocsFooter />
</div>
</div>
</div>
);
}
20 changes: 2 additions & 18 deletions docs/src/app/docs/page.tsx → docs/src/app/(public)/docs/page.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,9 @@
import Button from '../../components/button';
import Button from '../../../components/button';

export default function Docs() {
return (
<>
<h2 className="text-3xl font-bold sm:text-4xl">
Welcome to Keystatic{' '}
<span className="relative">
<svg
className="absolute -right-2 bottom-2 w-[115%]"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 392 92"
>
<path
fill="#F7DE5B"
d="m4.239.201 92.684 2.883 100.722 7.097 99.043 7.211 94.363 2.77-21.813 9.088 14.042 9.919 2.873 8.7-14.795 6.043 7.844 5.477 7.843 5.476-14.691 6.037 11.104 9.535 3.927 10.77-93.59-1.7-100.082-5.647-116.75-3.055-76.39-9.559 12.857-8.312-11.94-9.45 5.534-10.258-4.618-7.502 16.812-1.055L7.21 20.478l5.332-11.703L4.239.201Z"
/>
</svg>
<span className="relative">Docs</span>
</span>
</h2>
<h1 className="text-3xl font-bold sm:text-4xl">Keystatic Docs</h1>

<p className="mt-6 text-lg text-stone-600">
Keystatic is a new project from
Expand Down
19 changes: 15 additions & 4 deletions docs/src/app/layout.tsx → docs/src/app/(public)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import Head from 'next/head';
import { Analytics } from '@vercel/analytics/react';

import '../styles/global.css';
import '../../styles/global.css';
import { HeaderNav } from '../../components/navigation/header-nav';
import { getNavigationMap } from '../../utils/reader';

export const metadata = {
title: 'Meet Keystatic',
title: '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: {
Expand All @@ -26,11 +28,13 @@ export const metadata = {
},
};

export default function RootLayout({
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const navigationMap = await getNavigationMap();

return (
<html lang="en">
<Head>
Expand All @@ -56,7 +60,14 @@ export default function RootLayout({
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
</Head>
<body>{children}</body>

<body>
<div className="min-h-screen">
<HeaderNav navigationMap={navigationMap} />
{children}
</div>
</body>

<Analytics />
</html>
);
Expand Down
21 changes: 21 additions & 0 deletions docs/src/app/(public)/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import Hero from '../../components/hero';
import Intro from '../../components/intro';
import Templates from '../../components/templates';
import MailingList from '../../components/mailing-list';
import CallToAction from '../../components/call-to-action';
import Footer from '../../components/footer';

export default function Homepage() {
return (
<>
<main>
<Hero />
<Intro />
<Templates />
<MailingList />
<CallToAction />
</main>
<Footer />
</>
);
}
13 changes: 13 additions & 0 deletions docs/src/app/(public)/privacy-policy/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import PrivacyPolicy from '../../../components/privacy-policy';
import Footer from '../../../components/footer';

export default function PrivacyPolicyPage() {
return (
<>
<main>
<PrivacyPolicy />
</main>
<Footer />
</>
);
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import Navigation from '../../components/navigation';
import Footer from '../../components/footer';
import Footer from '../../../components/footer';

export default function Index() {
export default function ThankYouPage() {
return (
<div className="flex min-h-screen flex-col">
<Navigation />
<main className="flex-1">
<>
<main>
<div className="mx-auto max-w-6xl px-6 py-32">
<div className="max-w-2xl">
<h1 className="text-4xl font-bold sm:text-5xl md:text-6xl lg:text-7xl">
Expand Down Expand Up @@ -34,6 +32,6 @@ export default function Index() {
</div>
</main>
<Footer />
</div>
</>
);
}
93 changes: 0 additions & 93 deletions docs/src/app/docs/layout.tsx

This file was deleted.

23 changes: 0 additions & 23 deletions docs/src/app/page.tsx

This file was deleted.

15 changes: 0 additions & 15 deletions docs/src/app/privacy-policy/page.tsx

This file was deleted.

4 changes: 2 additions & 2 deletions docs/src/components/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ type ButtonProps = {
} & AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>;

const baseClasses =
'block rounded-lg px-5 py-3 text-center font-semibold leading-none border';
'block rounded-lg px-5 py-3 text-center font-semibold leading-none border transition-colors';
const impactClasses: Record<ButtonProps['impact'] & {}, string> = {
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 active:bg-stone-800/20',
};

// ----------
Expand Down
Loading