Create documentation website (#19)

* feat: scaffold documentation app

* feat: init documentation website with mantine

* feat: add theme button

* feat: setup mdx link component

* feat: setup basic documentation folder

* feat: add routing folder

* feat: scaffold homepage

* feat: refined navbar and hero

* feat: create pre mdx component

* feat: create mdx blockquote component

* feat: create code mdx component

* fix: remove HTMLProps type

* feat: create base hero page

* ci: add lint/formatting/type checking to documentation

* ci: add documentation pipeline

* fix: static build documentation

* fix: remove documentation test check

* fix: install deps outside workspace

* fix: filter prettier checks

* fix: eslint plugins

* fix: clone eslintrc

* feat: update dark theme colors

* doc: add installation page

* feat: add deploy documenation CD pipeline

* fix: update documentation bucket region

* feat: update documentation head tags

* fix: deploy website on main branch push

apps/documentation/src/components/edit-page/edit-page.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@mantine/core'
+import { IconEdit } from '@tabler/icons-react'
+import { useRouter } from 'tuono'
+
+const GITHUB_URL =
+  'https://github.com/Valerioageno/tuono/tree/main/apps/documentation/src/routes'
+
+export default function EditPage(): JSX.Element {
+  const { pathname } = useRouter()
+  return (
+    <Button
+      p={0}
+      mt={60}
+      component="a"
+      variant="transparent"
+      leftSection={<IconEdit />}
+      target="_blank"
+      href={GITHUB_URL.concat(pathname)}
+    >
+      Edit page
+    </Button>
+  )
+}

apps/documentation/src/components/edit-page/index.ts

@@ -0,0 +1,3 @@
+import EditPage from './edit-page'
+
+export default EditPage

apps/documentation/src/components/hero/hero.tsx

@@ -0,0 +1,53 @@
+import {
+  Button,
+  Center,
+  Container,
+  CopyButton,
+  Group,
+  rem,
+  Text,
+  Title,
+} from '@mantine/core'
+import { IconCopy, IconCheck } from '@tabler/icons-react'
+import { Link } from 'tuono'
+
+export default function Hero(): JSX.Element {
+  return (
+    <Container size={1100} mt={200}>
+      <Center>
+        <Title order={1}>The react/rust fullstack framework</Title>
+      </Center>
+      <Center mt={50}>
+        <Text fz="18px">
+          The technologies we love seamessly working together to unleash the
+          <strong> highest web performance</strong> ever met on react
+        </Text>
+      </Center>
+      <Center mt={50}>
+        <Group>
+          <Button component={Link} href="/documentation/installation" size="lg">
+            Get Started
+          </Button>
+          <CopyButton value="cargo install tuono">
+            {({ copied, copy }) => (
+              <Button
+                onClick={copy}
+                size="lg"
+                style={{ border: 'solid 1px var(--mantine-color-violet-1)' }}
+                color="gray"
+                leftSection="cargo install tuono"
+                rightSection={
+                  copied ? (
+                    <IconCheck style={{ width: rem(20) }} />
+                  ) : (
+                    <IconCopy style={{ width: rem(20) }} />
+                  )
+                }
+              />
+            )}
+          </CopyButton>
+        </Group>
+      </Center>
+    </Container>
+  )
+}

apps/documentation/src/components/hero/index.ts

@@ -0,0 +1,3 @@
+import Hero from './hero'
+
+export default Hero

apps/documentation/src/components/mdx-provider/index.ts

@@ -0,0 +1,3 @@
+import MdxProvider from './mdx-provider'
+
+export default MdxProvider

apps/documentation/src/components/mdx-provider/mdx-code/index.ts

@@ -0,0 +1,3 @@
+import MdxCode from './mdx-code'
+
+export default MdxCode

apps/documentation/src/components/mdx-provider/mdx-code/mdx-code.tsx

@@ -0,0 +1,8 @@
+import { Code } from '@mantine/core'
+import type { HTMLAttributes } from 'react'
+
+export default function MdxCode(
+  props: HTMLAttributes<HTMLPreElement>,
+): JSX.Element {
+  return <Code {...props} />
+}

apps/documentation/src/components/mdx-provider/mdx-h2/mdx-h2.tsx

@@ -0,0 +1,8 @@
+import { Title } from '@mantine/core'
+import type { HTMLAttributes } from 'react'
+
+export default function MdxH2(
+  props: HTMLAttributes<HTMLHeadingElement>,
+): JSX.Element {
+  return <Title {...props} mt={20} order={2} />
+}

apps/documentation/src/components/mdx-provider/mdx-link/index.ts

@@ -0,0 +1,3 @@
+import MdxLink from './mdx-link'
+
+export default MdxLink

apps/documentation/src/components/mdx-provider/mdx-link/mdx-link.tsx

@@ -0,0 +1,37 @@
+import type { AnchorHTMLAttributes } from 'react'
+import { Button } from '@mantine/core'
+import { Link } from 'tuono'
+import { IconExternalLink } from '@tabler/icons-react'
+
+export default function MdxLink(
+  props: AnchorHTMLAttributes<HTMLAnchorElement>,
+): JSX.Element {
+  if (props.href?.startsWith('http')) {
+    return (
+      <Button
+        component="a"
+        {...props}
+        target="_blank"
+        rightSection={
+          <IconExternalLink size="16px" style={{ marginLeft: -5 }} />
+        }
+        variant="transparent"
+        style={{ height: '20px' }}
+        mt={-2}
+        p={0}
+      />
+    )
+  }
+  return (
+    <Button
+      component={Link}
+      {...props}
+      target="_blank"
+      rightSection={<IconExternalLink size="16px" style={{ marginLeft: -5 }} />}
+      variant="transparent"
+      style={{ height: '20px' }}
+      mt={-2}
+      p={0}
+    />
+  )
+}

apps/documentation/src/components/mdx-provider/mdx-pre/index.ts

@@ -0,0 +1,3 @@
+import MdxPre from './mdx-pre'
+
+export default MdxPre

apps/documentation/src/components/mdx-provider/mdx-pre/mdx-pre.module.css

@@ -0,0 +1,5 @@
+.pre {
+  code {
+    font-size: 16px;
+  }
+}

apps/documentation/src/components/mdx-provider/mdx-pre/mdx-pre.tsx

@@ -0,0 +1,16 @@
+import { CodeHighlight } from '@mantine/code-highlight'
+import styles from './mdx-pre.module.css'
+
+interface PreProps {
+  children: any
+}
+export default function MdxPre({ children }: PreProps): JSX.Element {
+  return (
+    <CodeHighlight
+      className={styles.pre}
+      style={{ borderRadius: 8 }}
+      code={children.props.children || ''}
+      language={children.props.className?.replace('language-', '')}
+    />
+  )
+}

apps/documentation/src/components/mdx-provider/mdx-provider.tsx

@@ -0,0 +1,33 @@
+import { MDXProvider } from '@mdx-js/react'
+
+import MdxLink from './mdx-link'
+import type { ReactNode } from 'react'
+import MdxPre from './mdx-pre'
+import MdxQuote from './mdx-quote'
+import MdxCode from './mdx-code'
+import MdxTitle from './mdx-title'
+import MdxH2 from './mdx-h2/mdx-h2'
+
+interface MdxProviderProps {
+  children: ReactNode
+}
+
+export default function MdxProvider({
+  children,
+}: MdxProviderProps): JSX.Element {
+  return (
+    <MDXProvider
+      components={{
+        a: MdxLink,
+        // @ts-expect-error: useless finding the correct props types
+        pre: MdxPre,
+        blockquote: MdxQuote,
+        code: MdxCode,
+        h1: MdxTitle,
+        h2: MdxH2,
+      }}
+    >
+      {children}
+    </MDXProvider>
+  )
+}

apps/documentation/src/components/mdx-provider/mdx-quote/index.ts

@@ -0,0 +1,3 @@
+import MdxQuote from './mdx-quote'
+
+export default MdxQuote

apps/documentation/src/components/mdx-provider/mdx-quote/mdx-quote.tsx

@@ -0,0 +1,21 @@
+import { Blockquote, Space } from '@mantine/core'
+import type { HTMLAttributes } from 'react'
+
+export default function MdxQuote(
+  props: HTMLAttributes<HTMLQuoteElement>,
+): JSX.Element {
+  return (
+    <>
+      <Blockquote
+        color="violet"
+        p={8}
+        px={20}
+        mt={30}
+        iconSize={30}
+        {...props}
+        style={{ borderRadius: 8 }}
+      />
+      <Space h="md" />
+    </>
+  )
+}

apps/documentation/src/components/mdx-provider/mdx-title/index.ts

@@ -0,0 +1,3 @@
+import MdxTitle from './mdx-title'
+
+export default MdxTitle

apps/documentation/src/components/mdx-provider/mdx-title/mdx-title.tsx

@@ -0,0 +1,8 @@
+import { Title } from '@mantine/core'
+import type { HTMLAttributes } from 'react'
+
+export default function MdxTitle(
+  props: HTMLAttributes<HTMLHeadingElement>,
+): JSX.Element {
+  return <Title {...props} order={1} />
+}

apps/documentation/src/components/navbar/actions.tsx

@@ -0,0 +1,31 @@
+import { Flex, Button, ActionIcon } from '@mantine/core'
+import { IconBrandGithub, IconBook } from '@tabler/icons-react'
+import ThemeBtn from '../theme-btn'
+import { Link } from 'tuono'
+
+export default function Actions(): JSX.Element {
+  return (
+    <Flex gap={8}>
+      <Button
+        href="/documentation/installation"
+        component={Link}
+        size="compact-lg"
+        rightSection={<IconBook />}
+        autoContrast
+      >
+        Get started
+      </Button>
+      <ActionIcon
+        variant="default"
+        size="lg"
+        aria-label="Check the project on github"
+        href="https://github.com/Valerioageno/tuono"
+        target="_blank"
+        component="a"
+      >
+        <IconBrandGithub />
+      </ActionIcon>
+      <ThemeBtn />
+    </Flex>
+  )
+}

apps/documentation/src/components/navbar/index.ts

@@ -0,0 +1,3 @@
+import Navbar from './navbar'
+
+export default Navbar

apps/documentation/src/components/navbar/navbar.tsx

@@ -0,0 +1,32 @@
+import { AppShell, Burger, Button, Flex } from '@mantine/core'
+import { Link, useRouter } from 'tuono'
+import Actions from './actions'
+
+interface NavbarProps {
+  opened: boolean
+  toggle: () => void
+}
+
+export default function Navbar({ opened, toggle }: NavbarProps): JSX.Element {
+  const { pathname } = useRouter()
+  return (
+    <AppShell.Header p="sm">
+      <Flex justify="space-between">
+        <Flex align="center" gap={8}>
+          {pathname.startsWith('/documentation') && (
+            <Burger
+              opened={opened}
+              onClick={toggle}
+              hiddenFrom="sm"
+              size="sm"
+            />
+          )}
+          <Button component={Link} href="/" variant="transparent" p={0} fz={28}>
+            Tuono
+          </Button>
+        </Flex>
+        <Actions />
+      </Flex>
+    </AppShell.Header>
+  )
+}

apps/documentation/src/components/sidebar/index.ts

@@ -0,0 +1,3 @@
+import Sidebar from './sidebar'
+
+export default Sidebar

apps/documentation/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,33 @@
+import { AppShell, NavLink } from '@mantine/core'
+import { Link } from 'tuono'
+
+export default function Sidebar(): JSX.Element {
+  return (
+    <AppShell.Navbar p="md">
+      <h3>Tutorial</h3>
+      <NavLink
+        href="/documentation/tutorial/intro"
+        component={Link}
+        label="Intro"
+      />
+      <h3>Documentation</h3>
+      <NavLink
+        href="/documentation/installation"
+        component={Link}
+        label="Installation"
+      />
+      <NavLink label="Routing" href="#required-for-focus" defaultOpened>
+        <NavLink
+          href="/documentation/routing"
+          component={Link}
+          label="FS routing"
+        />
+      </NavLink>
+      <NavLink
+        label="Contributing"
+        component={Link}
+        href="/documentation/contributing"
+      />
+    </AppShell.Navbar>
+  )
+}

apps/documentation/src/components/theme-btn/index.ts

@@ -0,0 +1,3 @@
+import ThemeBtn from './theme-btn'
+
+export default ThemeBtn

apps/documentation/src/components/theme-btn/theme-btn.module.css

@@ -0,0 +1,24 @@
+.icon {
+  width: 22px;
+  height: 22px;
+}
+
+.dark {
+  @mixin dark {
+    display: none;
+  }
+
+  @mixin light {
+    display: block;
+  }
+}
+
+.light {
+  @mixin light {
+    display: none;
+  }
+
+  @mixin dark {
+    display: block;
+  }
+}

apps/documentation/src/components/theme-btn/theme-btn.tsx

@@ -0,0 +1,30 @@
+import {
+  ActionIcon,
+  useMantineColorScheme,
+  useComputedColorScheme,
+} from '@mantine/core'
+import { IconSun, IconMoon } from '@tabler/icons-react'
+import cx from 'clsx'
+
+import classes from './theme-btn.module.css'
+
+export default function ThemeBtn(): JSX.Element {
+  const { setColorScheme } = useMantineColorScheme()
+  const computedColorScheme = useComputedColorScheme('light', {
+    getInitialValueInEffect: true,
+  })
+
+  return (
+    <ActionIcon
+      onClick={() =>
+        setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')
+      }
+      variant="default"
+      size="lg"
+      aria-label="Toggle color scheme"
+    >
+      <IconSun className={cx(classes.icon, classes.light)} stroke={1.5} />
+      <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} />
+    </ActionIcon>
+  )
+}