Add Edit on Github link and fix rtl

Author: Brijesh Bittu

docs/src/app/(public)/page.pigment.tsx

@@ -42,6 +42,10 @@ export const linkStyle = css(
   padding: ${spacing(theme, 1)};
   gap: ${spacing(theme, 1)};
   margin: ${spacing(theme, -1)};
+
+  [dir="rtl"] & .arrow-icon {
+    transform: rotate(180deg);
+  }
 `,
 );
 
@@ -69,7 +73,7 @@ export default function HomePage() {
         <Heading>{process.env.APP_NAME}</Heading>
         <Caption>{description}</Caption>
         <Link className={`${linkStyle}`} href={nav[0].links[0].href}>
-          Documentation <ArrowRightIcon />
+          Documentation <ArrowRightIcon className="arrow-icon" />
         </Link>
       </Content>
     </Root>

docs/src/components/ContentPage.tsx

@@ -1,12 +1,24 @@
+import { notFound } from 'next/navigation';
+
 import { useMDXComponents } from 'docs/mdx-components';
 import { readMarkdown } from 'docs/utils/mdx';
-import { notFound } from 'next/navigation';
+import { Link } from './Link';
 
 export default async function ContentPage({ basePath, slug }: { basePath: string; slug: string }) {
   const components = useMDXComponents();
-  const MdxContent = await readMarkdown(basePath, slug);
-  if (!MdxContent) {
+  const result = await readMarkdown(basePath, slug);
+  if (!result) {
     return notFound();
   }
-  return <MdxContent components={components} />;
+  const { MdxContent, githubFilePath } = result;
+  return (
+    <div>
+      <MdxContent components={components} />
+      <div style={{ display: 'flex', justifyContent: 'flex-end', fontSize: '0.8rem' }}>
+        <Link href={githubFilePath} target="_blank" rel="noopener noreferrer">
+          Edit on GitHub
+        </Link>
+      </div>
+    </div>
+  );
 }

docs/src/components/QuickNav.pigment.ts

@@ -30,6 +30,9 @@ export const Root = styled.nav(({ theme }) => ({
   [theme.breakpoints.lt('quickNav')]: {
     float: 'none',
   },
+  '[dir="rtl"] &': {
+    float: 'left',
+  },
 }));
 
 export const Inner = styled.div`
@@ -39,6 +42,11 @@ export const Inner = styled.div`
   padding-top: 0.75rem;
   padding-bottom: 2.5rem;
   width: calc(${'$sidebarWidth'} - ${'$quickNavMarginX'} * 2);
+
+  [dir='rtl'] & {
+    left: auto;
+    right: ${'$quickNavMarginX'};
+  }
 `;
 
 export const Title = styled.header`
@@ -53,7 +61,7 @@ export const List = styled.ul`
   align-items: start;
 
   & & {
-    padding-left: 0.75rem;
+    padding-inline-start: 0.75rem;
   }
 `;
 

docs/src/mdx-components.pigment.ts

@@ -41,11 +41,15 @@ export const Heading = styled('h1')(({ theme }) => ({
         },
       },
       three: {
+        ...applyText(theme, 'lg'),
         marginTop: spacing(theme, 8),
         marginBottom: spacing(theme, 1.5),
         scrollMarginTop: spacing(theme, 6),
-        ...applyText(theme, 'lg'),
         fontWeight: t('$font.weight.medium'),
+        textDecoration: 'underline',
+        textUnderlineOffset: '0.3rem',
+        textDecorationThickness: '1px',
+        textDecorationColor: t('$color.line.highlight'),
       },
       other: {
         marginTop: spacing(theme, 8),

docs/src/utils/mdx.tsx renamed to docs/src/utils/mdx.ts

@@ -389,5 +389,14 @@ export async function readMarkdown(baseDir: string, filePath: string) {
     await file?.close();
   }
 
-  return renderMdx(mdxSource);
+  const MdxContent = await renderMdx(mdxSource);
+  const githubFilePath = mdxFilePath.replace(
+    process.env.CONTENT_DIR.split(path.delimiter).join('/'),
+    `${process.env.GITHUB}/edit/master/docs/src/content`,
+  );
+
+  return {
+    MdxContent,
+    githubFilePath,
+  };
 }