Skip to content

Commit

Permalink
APP-20124 tweak markdown page styles (#480)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sqrrl
Sqrrl authored Dec 8, 2023
1 parent 8af0b0a commit 7c6e9aa
Show file tree
Hide file tree
Showing 7 changed files with 35 additions and 22 deletions.
6 changes: 5 additions & 1 deletion apps/swirl-docs/src/components/Documentation/DocumentationHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ export function DocumentationHeader({

return (
<header
className={classNames("border-b-1 pb-12 mb-12", additionalClassNames)}
className={classNames(
"flex flex-col gap-4",
"border-b-1 pb-[3.5rem] mb-12",
additionalClassNames
)}
>
<Heading level={1}>{frontMatter?.title as string}</Heading>
<Text className="max-w-[37.5rem]">{frontMatter?.description}</Text>
Expand Down
8 changes: 4 additions & 4 deletions apps/swirl-docs/src/components/Documentation/EndpointDescription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({
return (
<div className="max-w-full md:max-w-[37.5rem] overflow-x-auto">
<LinkedHeading href={path}>
<Heading level={3} id={endpointId}>
<Heading level={2} id={endpointId}>
{endpoint.title}
{endpoint.isDeprecated && (
<span className="ml-2 inline-flex">
Expand Down Expand Up @@ -73,7 +73,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({

return (
<div key={`${parameterType.title}-${index}`} className="mb-6">
<Heading level={4} className="mb-2">
<Heading level={3} className="mb-2">
{parameterType.title}
</Heading>
<div>{parameterFactory.renderProperties()}</div>
Expand All @@ -83,7 +83,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({

{requestbody && (
<div className="mb-6">
<Heading level={4} className="mb-2">
<Heading level={3} className="mb-2">
Request Body
</Heading>
<div>
Expand All @@ -97,7 +97,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({

{endpoint.responseBodySchemas.length && (
<div className="mb-6">
<Heading level={4} className="mb-2">
<Heading level={3} className="mb-2">
Response Body
</Heading>
<div>
Expand Down
2 changes: 1 addition & 1 deletion apps/swirl-docs/src/components/Layout/DocLinksNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const DocLinksNav: FunctionComponent<DocLinksNavProps> = ({
return (
<nav
aria-label="document"
className="sticky top-[128px] h-max hidden min-w-[12rem] md:block px-4 border-l-1"
className="sticky top-[4rem] h-max hidden min-w-[12rem] md:block px-4 border-l-1"
>
<div className="mb-4 font-sm font-semibold text-text-subdued text-sm">
On this Page
Expand Down
2 changes: 1 addition & 1 deletion apps/swirl-docs/src/components/Layout/DocumentationLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function DocumentationLayout({
id="main"
className={classNames(
"grid grid-cols-1 justify-center max-w-[77.5rem] w-full",
"my-0 mx-auto mt-14 mb-4 md:mb-0 px-4 lg:px-10 xl:px-0",
"my-0 mx-auto mt-14 mb-4 md:mb-0 px-4 lg:px-10",
{
"xl:grid-cols-1 md:mx-10": disableToc,
},
Expand Down
2 changes: 1 addition & 1 deletion apps/swirl-docs/src/components/Tags/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function Tag({ content, scheme, httpTag }: TagProps) {
return (
<span
className={classNames(
"px-2 py-1 rounded-md font-medium text-xs mr-2",
"px-2 py-1 rounded-md font-medium text-xs mr-2 align-middle",
{
"bg-surface-neutral-subdued text-text-default":
scheme === "default" || !scheme,
Expand Down
8 changes: 5 additions & 3 deletions apps/swirl-docs/src/components/swirl-recreations/Headers/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,11 @@ export const Heading: React.FC<HeadingProps> = ({
{ "text-center": align === "center" },
{ "text-right": align === "end" },
{
[`text-text-default text-3xl leading-[3rem]`]: level === 1,
[`text-text-default text-font-size-2xl leading-[2rem]`]: level === 2,
[`text-text-default text-3xl leading-[2.25rem] font-font-weight-bold`]:
level === 1,
[`text-text-default text-font-size-xl leading-[1.625rem]`]:
level === 2,
[`text-text-default text-font-size-l leading-[1.625rem]`]:
level === 3,
[`text-text-default text-font-size-base leading-[1.5rem]`]:
level === 4,
Expand Down Expand Up @@ -88,7 +90,7 @@ export function LinkedHeading({
<CopyToClipboard text={href}>
<div
className={classNames(
"relative inline-flex w-full justify-between items-center group delay-200 cursor-pointer",
"relative inline-flex gap-4 w-full justify-between items-center group delay-200 cursor-pointer",
className
)}
>
Expand Down
29 changes: 18 additions & 11 deletions apps/swirl-docs/src/pages/api-docs/docs/[apiDoc].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { generateMdxFromDocumentation } from "@swirl/lib/docs/src/singleDoc";
async function getComponentData(document: string) {
const serializedDocument = await generateMdxFromDocumentation(
"api",
document,
document
);

return {
Expand Down Expand Up @@ -96,6 +96,7 @@ export default function Component({

function generateMdxThemeComponents() {
return {
section: (props) => <section className="mb-8 last:mb-0" {...props} />,
a: (props) => {
const isRegularLink = typeof props.children === "string";

Expand All @@ -110,21 +111,27 @@ function generateMdxThemeComponents() {
},

ul: (props) => (
<ul className="mb-8 leading-line-height-xl list-disc" {...props} />
<ul
className="mb-8 last:mb-0 leading-line-height-xl list-disc"
{...props}
/>
),
ol: (props) => (
<ol className="mb-8 leading-line-height-xl list-decimal" {...props} />
<ol
className="mb-8 last:mb-0 leading-line-height-xl list-decimal"
{...props}
/>
),
li: (props) => <li className="ml-4" {...props} />,
p: (props) => <Text className="mb-8" {...props} />,
p: (props) => <Text className="mb-8 last:mb-0" {...props} />,
code: (props) => {
const { className, children } = props;

if (className?.includes("language-") && typeof children === "string") {
return (
<CodePreview
disableHeader
className="mb-4"
className="mb-4 last:mb-0"
hasCopyButton
codeExample={{
code: children,
Expand All @@ -142,22 +149,22 @@ function generateMdxThemeComponents() {
);
},
h1: (props: any) => (
<H2 className="mb-6" {...props} href={`#${props.id}`} />
<H2 className="mb-6 last:mb-0" {...props} href={`#${props.id}`} />
),
h2: (props: any) => (
<H2 className="mb-6" {...props} href={`#${props.id}`} />
<H2 className="mb-6 last:mb-0" {...props} href={`#${props.id}`} />
),
h3: (props: any) => (
<H3 className="mb-2" {...props} href={`#${props.id}`} />
<H3 className="mb-2 last:mb-0" {...props} href={`#${props.id}`} />
),
h4: (props: any) => (
<H4 className="mb-2" {...props} href={`#${props.id}`} />
<H4 className="mb-2 last:mb-0" {...props} href={`#${props.id}`} />
),
h5: (props: any) => (
<H4 className="mb-2" {...props} href={`#${props.id}`} />
<H4 className="mb-2 last:mb-0" {...props} href={`#${props.id}`} />
),
h6: (props: any) => (
<H4 className="mb-2" {...props} href={`#${props.id}`} />
<H4 className="mb-2 last:mb-0" {...props} href={`#${props.id}`} />
),
hr: (props) => <hr className="my-8" {...props} />,
} as MDXRemoteProps["components"];
Expand Down

1 comment on commit 7c6e9aa

@vercel
Copy link

@vercel vercel bot commented on 7c6e9aa Dec 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

getflipdev – ./apps/swirl-docs

getflipdev-git-main-getflip.vercel.app
getflipdev-getflip.vercel.app
getflipdev.vercel.app
getflip.dev
www.getflip.dev

Please sign in to comment.