From 8c4380cdc35d8adb570eed1ad0f16be27297e725 Mon Sep 17 00:00:00 2001 From: Edmund Hung Date: Sun, 10 Mar 2024 19:04:54 +0100 Subject: [PATCH] chore: update design --- README.md | 8 +- app/assets/chevron-right.svg | 3 + app/assets/chevron-up.svg | 3 + app/assets/remix-letter-light.svg | 5 + app/components.tsx | 28 +---- app/layout.tsx | 163 ++++++++++++++++++++++++++++++ app/root.tsx | 124 +++++++++-------------- 7 files changed, 227 insertions(+), 107 deletions(-) create mode 100644 app/assets/chevron-right.svg create mode 100644 app/assets/chevron-up.svg create mode 100644 app/assets/remix-letter-light.svg create mode 100644 app/layout.tsx diff --git a/README.md b/README.md index c3544d4..f1bb0ac 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ What's included? - [Github Actions](https://github.com/features/actions) for CI/CD - [Markdoc](https://markdoc.dev) for rendering markdown - Styling with [Tailwind](https://tailwindcss.com/) -- End-to-end testing with [Playwright](playwright.dev/) +- End-to-end testing with [Playwright](https://playwright.dev/) - Local third party request mocking with [MSW](https://mswjs.io/) - Code formatting with [Prettier](https://prettier.io) - Linting with [ESLint](https://eslint.org) @@ -34,7 +34,7 @@ npm run dev ``` You can also start the Playwright UI mode to test your application. You will -find all the tests defined in the [/tests/e2e](./tests/e2e/) directory. +find all the tests defined in the [/tests/e2e](./tests/e2e) directory. ```sh npm run test @@ -50,8 +50,8 @@ npm run build && npm run start ### New environment variable & secret To add a new secret, please -[update the value on **.dev.vars**](https://developers.cloudflare.com/workers/configuration/secrets/#secrets-in-development) -similar to a `.env` file. +[update the value](https://developers.cloudflare.com/workers/configuration/secrets/#secrets-in-development) +on the `.dev.vars` file. For the rest of the environment variable, you can update the **var** section on the [wrangler.toml](./wrangler.toml) file with the new variable: diff --git a/app/assets/chevron-right.svg b/app/assets/chevron-right.svg new file mode 100644 index 0000000..2fe5e5e --- /dev/null +++ b/app/assets/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/chevron-up.svg b/app/assets/chevron-up.svg new file mode 100644 index 0000000..5240646 --- /dev/null +++ b/app/assets/chevron-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/remix-letter-light.svg b/app/assets/remix-letter-light.svg new file mode 100644 index 0000000..43bb1c1 --- /dev/null +++ b/app/assets/remix-letter-light.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/components.tsx b/app/components.tsx index 3de3d41..dbb6162 100644 --- a/app/components.tsx +++ b/app/components.tsx @@ -1,30 +1,10 @@ import * as React from 'react'; import markdoc, { type RenderableTreeNodes } from '@markdoc/markdoc'; -export function RemixLogo(props: React.ComponentPropsWithoutRef<'svg'>) { +export function Markdown({ content }: { content: RenderableTreeNodes }) { return ( - - Remix Logo - - - - - - +
+ {markdoc.renderers.react(content, React)} +
); } - -export function Markdown({ content }: { content: RenderableTreeNodes }) { - return
{markdoc.renderers.react(content, React)}
; -} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..176b225 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,163 @@ +import * as React from 'react'; +import chevronUpIcon from '~/assets/chevron-up.svg'; +import chevronRightIcon from '~/assets/chevron-right.svg'; +import remixLetterLogo from '~/assets/remix-letter-light.svg'; +import { Link, useLocation } from '@remix-run/react'; + +export interface Menu { + title: string; + links: Array<{ + title: string; + to: string; + }>; +} + +export function Breadcrumbs({ + trails, + children, +}: { + trails: string[]; + children: React.ReactNode; +}) { + return ( + <> +
+ +
+ expand + collapse +
+ {trails.map((trail, index) => ( + + {index > 0 ? ( + / + ) : null} + {trail} + + ))} +
+
+ +
+
+ {children} +
+ + ); +} + +export function MainNavigation({ menus }: { menus: Menu[] }) { + const location = useLocation(); + const trails = menus.reduce((result, menu) => { + if (result.length === 0) { + const link = menu.links.find(link => link.to === location.pathname); + + if (link) { + return [menu.title, link.title]; + } + } + + return result; + }, []); + + return ( +
+ + + +
+ ); +} + +export function Layout({ + children, + menus, +}: { + children?: React.ReactNode; + menus: Menu[]; +}) { + return ( +
+
+
+
+ +
+
+
+
{children}
+
+
+
+ ); +} + +export function ErrorLayout({ + title, + description, +}: { + title?: string; + description?: string; +}) { + return ( +
+
+

{title}

+

{description}

+
+
+ ); +} diff --git a/app/root.tsx b/app/root.tsx index f814346..94f15ce 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,7 +1,10 @@ -import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/cloudflare'; +import type { + LinksFunction, + LoaderFunctionArgs, + MetaFunction, +} from '@remix-run/cloudflare'; import * as React from 'react'; import { - Link, Links, Meta, Outlet, @@ -12,13 +15,12 @@ import { useLoaderData, useRouteError, } from '@remix-run/react'; -import '~/styles.css'; -import { RemixLogo } from './components'; +import stylesUrl from '~/styles.css?url'; +import { type Menu, ErrorLayout, Layout } from './layout'; -// We will rollback to loading CSS through links when `.css?url` is supported -// export const links: LinksFunction = () => { -// return [{ rel: 'stylesheet', href: stylesUrl }]; -// }; +export const links: LinksFunction = () => { + return [{ rel: 'stylesheet', href: stylesUrl }]; +}; export const meta: MetaFunction = () => { return [ @@ -29,23 +31,46 @@ export const meta: MetaFunction = () => { }; export function loader({ context }: LoaderFunctionArgs) { + const menus: Menu[] = [ + { + title: 'Docs', + links: [ + { + title: 'Overview', + to: '/', + }, + ], + }, + { + title: 'Useful links', + links: [ + { + title: 'GitHub', + to: `https://github.com/${context.env.GITHUB_OWNER}/${context.env.GITHUB_REPO}`, + }, + { + title: 'Remix docs', + to: 'https://remix.run/docs', + }, + { + title: 'Cloudflare docs', + to: 'https://developers.cloudflare.com/pages', + }, + ], + }, + ]; + return json({ - repo: context.env.GITHUB_REPO, - owner: context.env.GITHUB_OWNER, - description: '📜 All-in-one remix starter template for Cloudflare Pages', + menus, }); } export default function App() { - const { repo, owner, description } = useLoaderData(); + const { menus } = useLoaderData(); + return ( - + @@ -76,65 +101,6 @@ function Document({ ); } -function Layout({ - children, - title, - description, - actionText, - actionLink, -}: { - children?: React.ReactNode; - title?: string; - description?: string; - actionText?: string; - actionLink?: string; -}) { - return ( -
-
-
-
-
-
- - - -
-
-

{title}

-

{description}

- {actionText ? ( - - {actionText} - - ) : null} -
- -
-
-
- {children ? ( -
-
{children}
-
- ) : null} -
-
- ); -} - export function ErrorBoundary() { const error = useRouteError(); @@ -161,14 +127,14 @@ export function ErrorBoundary() { return ( - + ); } return ( - + ); }