Skip to content

Commit

Permalink
coloring, spacing, title anchors
Browse files Browse the repository at this point in the history
  • Loading branch information
@dphuang2
dphuang2 committed Oct 3, 2023
1 parent f229baa commit 7034872
Show file tree
Hide file tree
Showing 18 changed files with 248 additions and 108 deletions.
12 changes: 8 additions & 4 deletions generator/konfig-next-app/src/OperationReferenceMain.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import { notifications } from '@mantine/notifications'
import localforage from 'localforage'
import { ReferencePageProps } from './utils/generate-props-for-reference-page'
import { SocialFooter } from './components/SocialFooter'
import { Breadcrumbs } from './components/Breadcrumbs'

export function OperationReferenceMain({
pathParameters,
Expand Down Expand Up @@ -206,6 +207,8 @@ export function OperationReferenceMain({
}
}

const header = operation.operation.summary ?? operation.path

return (
<FormProvider form={form}>
<form
Expand Down Expand Up @@ -258,13 +261,14 @@ export function OperationReferenceMain({
justify={{ base: undefined, sm: 'space-around' }}
pt="sm"
>
<Stack px="sm" w={{ base: '100%', sm: '55%' }} spacing="xl">
<Stack spacing="xs">
<Stack px="sm" w={{ base: '100%', sm: '55%' }} spacing="md">
<Stack mb="lg" spacing="xs">
<Breadcrumbs breadcrumbs={[tag, header]} />
<Title
color={colorScheme === 'dark' ? theme.white : undefined}
order={2}
>
{operation.operation.summary ?? operation.path}
{header}
</Title>
<Group>
<HttpMethodBadge httpMethod={operation.method} />
Expand Down Expand Up @@ -298,7 +302,7 @@ export function OperationReferenceMain({
requestBodyRequired={requestBodyRequired}
/>
{responses && (
<Box>
<Box my="lg">
<Title order={4}>Responses</Title>
<Divider my="sm" />
<Stack>
Expand Down
2 changes: 1 addition & 1 deletion generator/konfig-next-app/src/components/DemoDivider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const _DemoDivider: Components['hr'] = ({
children,
siblingCount,
}) => {
return <Divider mt="sm" mb="xl" />
return <Divider my="xl" />
}

export const DemoDivider = observer(_DemoDivider)
6 changes: 6 additions & 0 deletions generator/konfig-next-app/src/components/DemoMarkdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,11 +137,17 @@ const useStyles = createStyles((theme) => ({
markdown: {
'h1:first-of-type': {
marginTop: 0,
'::after': {
display: 'none',
},
},
},
text: {
img: {
maxWidth: '100%',
display: 'block',
margin: 'auto',
borderRadius: theme.radius.md,
},
},
}))
Expand Down
142 changes: 76 additions & 66 deletions generator/konfig-next-app/src/components/DemoPortal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ import { DemoHeader } from './DemoHeader'
import type { SocialObject } from 'konfig-lib/dist/KonfigYamlCommon'
import Head from 'next/head'
import { NAVBAR_WIDTH } from './ReferenceNavbar'
import { proseContainerWidthStyles } from '@/utils/prose-container-width-styles'
import { FlexCenter } from '@/components/FlexCenter'
import { navLinkColor } from '@/utils/nav-link-color'
import { asideOffsetBreakpoint } from '@/utils/aside-offset-breakpoint'
import { navbarOffsetBreakpoint } from '@/utils/navbar-offset-breakpoint'

type DemosInput = Demo[]

Expand Down Expand Up @@ -184,6 +189,8 @@ export const DemoPortal = observer(
// We need to access dummyState to tell MobX to track it
state.dummyState

console.log(!opened)

return (
<SandboxContext.Provider value={!!sandbox}>
{sandbox && (
Expand All @@ -210,23 +217,23 @@ export const DemoPortal = observer(
</Affix>
)}
<AppShell
asideOffsetBreakpoint={asideOffsetBreakpoint}
navbarOffsetBreakpoint={navbarOffsetBreakpoint}
styles={{
main: {
background:
colorScheme === 'dark' ? theme.colors.dark[8] : undefined,
},
}}
navbarOffsetBreakpoint="sm"
asideOffsetBreakpoint="lg"
navbar={
<Navbar
hiddenBreakpoint="sm"
hiddenBreakpoint={navbarOffsetBreakpoint}
hidden={!opened}
width={{ lg: NAVBAR_WIDTH }}
width={{ [navbarOffsetBreakpoint]: NAVBAR_WIDTH }}
sx={{
overflowY: 'scroll',
height:
'calc(100% - var(--mantine-header-height, 0rem) - var(--mantine-footer-height, 0rem));',
// height:
// 'calc(100% - var(--mantine-header-height, 0rem) - var(--mantine-footer-height, 0rem));',
}}
>
<Navbar.Section
Expand Down Expand Up @@ -310,17 +317,15 @@ export const DemoPortal = observer(
borderRadius: theme.radius.sm,
},
label: {
color: isCurrentlySelected
? theme.colorScheme === 'dark'
? theme.colors.brand[2]
: theme.colors.brand[8]
: undefined,
color: navLinkColor({
active: isCurrentlySelected,
theme,
}),
fontSize: theme.fontSizes.sm,
},
}}
sx={(theme) => ({ borderRadius: theme.radius.sm })}
label={name}
fw={isCurrentlySelected ? 'bold' : undefined}
active={isCurrentlySelected}
/>
)
Expand All @@ -345,62 +350,67 @@ export const DemoPortal = observer(
/>
}
>
{/* We have to render all demos states at the start so they can each initialize their cells */}
{state.demos.map((demo, i) => {
const previousDemoState: DemoState | undefined =
i === 0 ? undefined : state.demos[i - 1]
const nextDemoState: DemoState | undefined =
i === state.demos.length - 1 ? undefined : state.demos[i + 1]
<FlexCenter>
{/* We have to render all demos states at the start so they can each initialize their cells */}
{state.demos.map((demo, i) => {
const previousDemoState: DemoState | undefined =
i === 0 ? undefined : state.demos[i - 1]
const nextDemoState: DemoState | undefined =
i === state.demos.length - 1 ? undefined : state.demos[i + 1]

const previous: Sibling | undefined =
previousDemoState === undefined ||
previousDemoState.portal === undefined
? undefined
: {
title: previousDemoState.name,
organizationId: previousDemoState.portal.organizationId,
demoId: previousDemoState.id,
demoIndex: i - 1,
}
const next: Sibling | undefined =
nextDemoState === undefined || nextDemoState.portal === undefined
? undefined
: {
title: nextDemoState.name,
demoIndex: i + 1,
organizationId: nextDemoState.portal.organizationId,
demoId: nextDemoState.id,
}
return (
<Fragment key={i}>
{state.currentDemoIndex === i && (
<Head>
<title>{demo.name}</title>
</Head>
)}
<Box
key={demo.name}
display={state.currentDemoIndex !== i ? 'none' : undefined}
>
<DemoLastRan demo={demo} />
<DemoMarkdown state={demo} />
<Box my={rem(40)}>
<DemoEditThisPage portalState={state} />
</Box>
<DemoSiblings
omitOwnerAndRepo={omitOwnerAndRepo}
portal={state}
previous={previous}
next={next}
/>
<Divider mt={rem(60)} />
<Box my={rem(20)}>
<DemoSocials socials={state.socials} />
const previous: Sibling | undefined =
previousDemoState === undefined ||
previousDemoState.portal === undefined
? undefined
: {
title: previousDemoState.name,
organizationId: previousDemoState.portal.organizationId,
demoId: previousDemoState.id,
demoIndex: i - 1,
}
const next: Sibling | undefined =
nextDemoState === undefined ||
nextDemoState.portal === undefined
? undefined
: {
title: nextDemoState.name,
demoIndex: i + 1,
organizationId: nextDemoState.portal.organizationId,
demoId: nextDemoState.id,
}
return (
<Fragment key={i}>
{state.currentDemoIndex === i && (
<Head>
<title>{demo.name}</title>
</Head>
)}
<Box
display={state.currentDemoIndex !== i ? 'none' : undefined}
mt="sm"
key={demo.name}
{...proseContainerWidthStyles}
>
<DemoLastRan demo={demo} />
<DemoMarkdown state={demo} />
<Box my={rem(40)}>
<DemoEditThisPage portalState={state} />
</Box>
<DemoSiblings
omitOwnerAndRepo={omitOwnerAndRepo}
portal={state}
previous={previous}
next={next}
/>
<Divider mt={rem(60)} />
<Box my={rem(20)}>
<DemoSocials socials={state.socials} />
</Box>
</Box>
</Box>
</Fragment>
)
})}
</Fragment>
)
})}
</FlexCenter>
</AppShell>
</SandboxContext.Provider>
)
Expand Down
7 changes: 5 additions & 2 deletions generator/konfig-next-app/src/components/DemoTableOfContents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import { IconList } from '@tabler/icons-react'
import { TITLE_OFFSET_PX } from './DemoTitle'
import { observer } from 'mobx-react'
import { asideOffsetBreakpoint } from '@/utils/aside-offset-breakpoint'

const useStyles = createStyles((theme) => ({
wrapper: {
Expand Down Expand Up @@ -189,7 +190,10 @@ export const DemoTableOfContents = observer(
// if (headings.length === 0) return null

return (
<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
<MediaQuery
smallerThan={asideOffsetBreakpoint}
styles={{ display: 'none' }}
>
<Aside
style={{
backgroundColor:
Expand All @@ -199,7 +203,6 @@ export const DemoTableOfContents = observer(
p="sm"
pr="xl"
pt="xl"
hiddenBreakpoint="lg"
width={{ base: 300 }}
>
<nav className={cx(classes.wrapper)}>
Expand Down
59 changes: 58 additions & 1 deletion generator/konfig-next-app/src/components/DemoTitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
SystemProp,
Title,
TitleOrder,
createStyles,
rem,
useMantineTheme,
} from '@mantine/core'
Expand All @@ -15,9 +16,40 @@ import { toText } from 'hast-util-to-text'
import Slugger from 'github-slugger'
import { TitleSize } from '@mantine/core/lib/Title/Title'
import { linkColor } from '@/utils/link-color'
import { useClipboard } from '@mantine/hooks'
import { notifications } from '@mantine/notifications'
import { LinkIcon } from './LinkIcon'

export const TITLE_OFFSET_PX = 100

const useStyles = createStyles((theme) => ({
anchor: {
':hover::after': {
opacity: 1,
transform: 'none',
visibility: 'visible',
'--visibility-delay': '0s',
},
'::after': {
content: '""',
display: 'inline-block',
width: '0.8em',
height: '0.8em',
maxWidth: '20px',
maxHeight: '20px',
verticalAlign: 'middle',
marginLeft: '8px',
transition:
'opacity 0.2s, transform 0.2s, visibility 0s var(--visibility-delay,0.2s)',
opacity: '0',
visibility: 'hidden',
transform: 'translateX(-50%)',
backgroundSize: 'cover',
backgroundImage: `url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M9.306 10.206a.745.745 0 0 1 .066.977l-.066.076-2.458 2.458a3.228 3.228 0 0 1-4.691-4.431l.126-.133L4.74 6.694a.745.745 0 0 1 1.12.978l-.067.076-2.458 2.458a1.738 1.738 0 0 0 2.353 2.555l.105-.097 2.458-2.458a.745.745 0 0 1 1.054 0ZM9.83 6.17c.29.291.29.763 0 1.054l-2.48 2.48a.745.745 0 1 1-1.054-1.053l2.48-2.48a.745.745 0 0 1 1.054 0Zm3.888-3.887a3.228 3.228 0 0 1 .126 4.431l-.126.133-2.459 2.459a.745.745 0 0 1-1.12-.978l.067-.076 2.458-2.458a1.738 1.738 0 0 0-2.353-2.555l-.105.097-2.458 2.458a.745.745 0 0 1-1.12-.977l.066-.076 2.459-2.458a3.228 3.228 0 0 1 4.565 0Z' fill='%238A8F98'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")`,
},
},
}))

const _DemoTitle: Components['h1'] = ({
children,
node,
Expand All @@ -35,22 +67,47 @@ const _DemoTitle: Components['h1'] = ({
)
const ref = useRef<HTMLHeadingElement | null>(null)
const theme = useMantineTheme()
const { classes } = useStyles()

useEffect(() => {
if (demoState === null) return
if (ref.current === null) return
demoState.headerIdToHtmlElement[slug] = ref.current
}, [slug, demoState])

const clipboard = useClipboard()

// get current url and subpath without slug
const currentUrl = typeof window !== 'undefined' ? window.location.href : ''

return (
<Title
sx={{ ':target': { scrollMarginTop: rem(TITLE_OFFSET_PX) } }}
sx={{ ':target': { scrollMarginTop: rem(TITLE_OFFSET_PX + 16) } }}
ref={ref}
id={slug}
order={level as TitleOrder}
mt={mt(level as TitleOrder)}
size={size(level as TitleOrder)}
color={linkColor({ theme })}
className={classes.anchor}
onClick={() => {
clipboard.copy(`${currentUrl}`)
notifications.show({
id: 'url-copied-to-your-clipboard',
radius: 'md',
withBorder: true,
styles: {
body: {
fontWeight: 500,
},
icon: {
backgroundColor: 'transparent',
},
},
message: 'URL copied to your clipboard',
icon: <LinkIcon />,
})
}}
>
<Anchor href={`#${slug}`} unstyled>
{children}
Expand Down
Loading

0 comments on commit 7034872

Please sign in to comment.