Skip to content

Commit

Permalink
Feature/design update (#16)
Browse files Browse the repository at this point in the history
Co-authored-by: Francis Thibault <francis.thibault@gmail.com>
  • Loading branch information
fraincs and Francis Thibault committed Jul 12, 2023
1 parent 46d3b46 commit 3f2dcc4
Show file tree
Hide file tree
Showing 42 changed files with 696 additions and 165 deletions.
44 changes: 44 additions & 0 deletions apps/docs/app/components/[slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { notFound } from "next/navigation";
import { allComponents } from "@/.contentlayer/generated";
import { Mdx } from "@/components/Mdx/MdxComponent";

interface PageProps {
params: {
slug: string;
};
}

async function getNoteFromParams(params: PageProps["params"]) {
const note = allComponents.find(component => component.slug === params.slug);

if (!note) {
return null;
}

return note;
}

export async function generateStaticParams(): Promise<PageProps["params"][]> {
return allComponents.map(({ slug }) => ({
slug
}));
}

export default async function Note({ params }: PageProps) {
const note = await getNoteFromParams(params);

if (!note) {
notFound();
}

return (
<main>
<article key={note._id}>
{note.status &&
`status: ${note.status}`
}
{note.body && <Mdx code={note.body.code} />}
</article>
</main>
);
}
4 changes: 2 additions & 2 deletions apps/docs/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
body {
font-family: var(--hd-default-font-family);
font-size: var(--hd-default-font-size);
color: var(--hd-color-text-primary);
background-color: var(--hd-color-surface-primary);
color: var(--hd-color-neutral-text);
background-color: var(--hd-color-neutral-surface);
}

a {
Expand Down
19 changes: 13 additions & 6 deletions apps/docs/app/tokens/page.tsx → apps/docs/app/icons/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,22 @@

import { allPages } from "@/.contentlayer/generated";
import { Mdx } from "@/components/Mdx/MdxComponent";
import { notFound } from "next/navigation";

export default function Page() {
return <main>
{allPages
.filter(page => page._id === "pages/intro.mdx")
.map(page => (
const page = allPages.find(iconPage => iconPage._id === "pages/icons.mdx");

if (!page) {
notFound();
}

return (
<>
<main>
<article key={page._id}>
{page.body && <Mdx code={page.body.code} />}
</article>
))}
</main>;
</main>
</>
);
}
14 changes: 9 additions & 5 deletions apps/docs/app/layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,21 @@ main {
width: 100%;
}

h2 {
h1 {
font-size: 2.5em;
margin-block-end: 1.5rem;
margin-block-end: 1rem;
}

h2 {
font-size: 1.5em;
margin-block: 3rem 1rem;
}

p {
font-size: 1rem;
line-height: 1.5rem;
}

h3 {
font-size: 1.5em;
margin-block: 3rem 1rem;
p + p {
margin-block-start: 1.25rem;
}
5 changes: 5 additions & 0 deletions apps/docs/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ export default function RootLayout({ children }: RootLayoutProps) {
<ThemeProvider>
<Header />
<div className="hd-wrapper hd-flex">
<div className="hd-header__shadow" role="presentation">
<div className="hd-header-shadow-block hd-header-shadow-block-1"></div>
<div className="hd-header-shadow-block hd-header-shadow-block-2"></div>
<div className="hd-header-shadow-block hd-header-shadow-block-3"></div>
</div>
{children}
</div>
</ThemeProvider>
Expand Down
9 changes: 9 additions & 0 deletions apps/docs/app/not-found.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export default function Custom404() {
return (
<main>
<article>
<h1>404 - Page Not Found</h1>
</article>
</main>
);
}
107 changes: 51 additions & 56 deletions apps/docs/app/tokens.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,41 +13,29 @@
--hd-step-4: clamp(1.60rem, calc(0.92rem + 3.39vw), 3.55rem);
--hd-step-5: clamp(1.80rem, calc(0.78rem + 5.10vw), 4.74rem);

--hd-primary-0: rgba(255, 255, 255, var( --hd-opacity, 1) );
--hd-primary-100: rgba(243, 245, 246, var( --hd-opacity, 1) );
--hd-primary-200: rgba(229, 232, 235, var( --hd-opacity, 1) );
--hd-primary-300: rgba(209, 215, 219, var( --hd-opacity, 1) );
--hd-primary-400: rgba(156, 164, 176, var( --hd-opacity, 1) );
--hd-primary-500: rgba(107, 114, 128, var( --hd-opacity, 1) );
--hd-primary-600: rgba(75, 83, 99, var( --hd-opacity, 1) );
--hd-primary-700: rgba(57, 58, 76, var( --hd-opacity, 1) );
--hd-primary-800: rgba(41, 43, 57, var( --hd-opacity, 1) );
--hd-primary-900: rgba(22, 24, 36, var( --hd-opacity, 1) );
--hd-primary-950: rgba(17, 18, 27, var( --hd-opacity, 1) );
--hd-white: #FFFFFF;

--hd-secondary-0: rgba(237, 252, 246, var( --hd-opacity, 1) );
--hd-secondary-100: rgba(210, 249, 232, var( --hd-opacity, 1) );
--hd-secondary-200: rgba(169, 241, 214, var( --hd-opacity, 1) );
--hd-secondary-300: rgba(114, 227, 192, var( --hd-opacity, 1) );
--hd-secondary-400: rgba(57, 206, 165, var( --hd-opacity, 1) );
--hd-secondary-500: rgba(23, 192, 151, var( --hd-opacity, 1) );
--hd-secondary-600: rgba(17, 167, 124, var( --hd-opacity, 1) );
--hd-secondary-700: rgba(8, 116, 95, var( --hd-opacity, 1) );
--hd-secondary-800: rgba(9, 92, 76, var( --hd-opacity, 1) );
--hd-secondary-900: rgba(8, 76, 64, var( --hd-opacity, 1) );
--hd-secondary-950: rgba(3, 43, 37, var( --hd-opacity, 1) );
--hd-neutral-0: #FFFFFF;
--hd-neutral-20: #FCFBFB;
--hd-neutral-50: #ECEBE8;
--hd-neutral-75: #E0DFDD;
--hd-neutral-300: #959593;
--hd-neutral-400: #777775;
--hd-neutral-700: #505050;
--hd-neutral-800: #3C3C3C;
--hd-neutral-900: #292929;

--hd-tertiary-0: rgba(243, 244, 251, var( --hd-opacity, 1) );
--hd-tertiary-100: rgba(228, 229, 245, var( --hd-opacity, 1) );
--hd-tertiary-200: rgba(207, 210, 238, var( --hd-opacity, 1) );
--hd-tertiary-300: rgba(175, 182, 225, var( --hd-opacity, 1) );
--hd-tertiary-400: rgba(136, 143, 210, var( --hd-opacity, 1) );
--hd-tertiary-500: rgba(108, 111, 197, var( --hd-opacity, 1) );
--hd-tertiary-600: rgba(95, 92, 185, var( --hd-opacity, 1) );
--hd-tertiary-700: rgba(86, 78, 167, var( --hd-opacity, 1) );
--hd-tertiary-800: rgba(76, 68, 137, var( --hd-opacity, 1) );
--hd-tertiary-900: rgba(62, 58, 110, var( --hd-opacity, 1) );
--hd-tertiary-950: rgba(42, 39, 68, var( --hd-opacity, 1) );
--hd-primary-0: #EDFCF6;
--hd-primary-100: #D2F9E8;
--hd-primary-200: #A9F1D6;
--hd-primary-300: #72E3C0;
--hd-primary-400: #39CEA5;
--hd-primary-500: #17C097;
--hd-primary-600: #11A77C;
--hd-primary-700: #08745F;
--hd-primary-800: #095C4C;
--hd-primary-900: #084C40;
--hd-primary-950: #032B25;

--hd-space-05: 0.25rem;
--hd-space-1: 0.5rem;
Expand All @@ -63,31 +51,38 @@
}

[data-theme="light"] {
--hd-color-text-primary: var(--hd-primary-900);
--hd-color-icon-primary: var(--hd-primary-900);
--hd-color-icon-secondary: var(--hd-secondary-950);
--hd-color-surface-primary-weak: var(--hd-primary-200);
--hd-color-surface-primary-weak-hover: var(--hd-primary-200);
--hd-color-surface-primary: var(--hd-primary-0);
--hd-color-surface-primary-hover: var(--hd-primary-100);
--hd-color-border-primary-weak: var(--hd-primary-200);
--hd-color-surface-selection: var(--hd-primary-400);
--hd-color-text-secondary: var(--hd-secondary-900);
--hd-color-surface-secondary: var(--hd-secondary-400);
--hd-color-surface-secondary-hover: var(--hd-secondary-600);
--hd-color-neutral-surface: var(--hd-neutral-20);
--hd-color-neutral-surface-weak: var(--hd-neutral-50);
--hd-color-neutral-text: var(--hd-neutral-900);
--hd-color-neutral-text-weak: var(--hd-neutral-700);
--hd-color-neutral-text-weakest: var(--hd-neutral-400);
--hd-color-primary-text: var(--hd-primary-600);
--hd-color-primary-text-hover: var(--hd-primary-700);
--hd-color-primary-text-strong: var(--hd-primary-900);
--hd-color-primary-surface: var(--hd-primary-300);
--hd-color-primary-surface-hover: var(--hd-primary-500);
--hd-color-primary-border: var(--hd-primary-600);
--hd-color-neutral-icon: var(--hd-neutral-900);
--hd-color-neutral-icon-hover: var(--hd-primary-900);
--hd-color-neutral-border: var(--hd-neutral-75);
--hd-color-neutral-border-weak: var(--hd-neutral-20);
}

/* Dark Theme Overrides */
[data-theme="dark"] {
--hd-color-text-primary: var(--hd-primary-100);
--hd-color-icon-primary: var(--hd-primary-100);
--hd-color-surface-primary-weak: var(--hd-primary-700);
--hd-color-surface-primary-weak-hover: var(--hd-primary-600);
--hd-color-surface-primary: var(--hd-primary-800);
--hd-color-surface-primary-hover: var(--hd-primary-900);
--hd-color-border-primary-weak: var(--hd-primary-700);
--hd-color-surface-selection: var(--hd-primary-600);
--hd-color-text-secondary: var(--hd-secondary-900);
--hd-color-surface-secondary: var(--hd-secondary-500);
--hd-color-surface-secondary-hover: var(--hd-secondary-600);
--hd-color-neutral-surface: var(--hd-neutral-900);
--hd-color-neutral-surface-weak: var(--hd-neutral-800);
--hd-color-neutral-text: var(--hd-neutral-0);
--hd-color-neutral-text-weak: var(--hd-neutral-300);
--hd-color-neutral-text-weakest: var(--hd-neutral-300);
--hd-color-primary-text: var(--hd-primary-600);
--hd-color-primary-text-hover: var(--hd-white);
--hd-color-primary-text-strong: var(--hd-primary-900);
--hd-color-primary-surface: var(--hd-primary-300);
--hd-color-primary-surface-hover: var(--hd-primary-500);
--hd-color-primary-border: var(--hd-primary-600);
--hd-color-primary-border-weak: var(--hd-primary-700);
--hd-color-neutral-icon: var(--hd-neutral-0);
--hd-color-neutral-icon-hover: var(--hd-primary-900);
--hd-color-neutral-border: var(--hd-neutral-700);
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { Sidebar } from "@/components/Sidebar/Sidebar";
import { Aside } from "@/components/Aside/Aside";

const links = [
{ title: "Link 1", url: "#link1" },
{ title: "Link 2", url: "#link2" },
{ title: "Link 3", url: "#link3" }
];

export default function TokensLayout({
children // will be a page or nested layout
Expand All @@ -9,6 +16,7 @@ export default function TokensLayout({
<>
<Sidebar />
{children}
<Aside title="Contents" links={links} />
</>
);
}
}
43 changes: 43 additions & 0 deletions apps/docs/app/tokens/[section]/[slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { notFound } from "next/navigation";
import { allTokens } from "@/.contentlayer/generated";
import { Mdx } from "@/components/Mdx/MdxComponent";

interface PageProps {
params: {
slug: string;
section: string;
};
}

async function getNoteFromParams(params: PageProps["params"]) {
const note = allTokens.find(token => token.slug === params.slug && token.section === params.section);

if (!note) {
return null;
}

return note;
}

export async function generateStaticParams(): Promise<PageProps["params"][]> {
return allTokens.map(({ slug, section }) => ({
slug,
section
}));
}

export default async function Note({ params }: PageProps) {
const note = await getNoteFromParams(params);

if (!note) {
notFound();
}

return (
<main>
<article key={note._id}>
{note.body && <Mdx code={note.body.code} />}
</article>
</main>
);
}
36 changes: 36 additions & 0 deletions apps/docs/components/Aside/Aside.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
"use client";

import Link from "next/link";
import React from "react";
import "./aside.css";

interface Link {
title: string;
url: string;
}

interface AsideProps {
title: string;
links: Link[];
}

export const Aside: React.FC<AsideProps> = ({ title, links }) => {
return (
<aside className="hd-aside">
<ul className="hd-aside__list">
<li className="hd-aside__item hd-aside-section">
<span className="hd-aside__title">{title}</span>
<ul className="hd-aside__nested-list">
{links.map(link => (
<li className="hd-aside__item">
<Link href={link.url} key={link.title} className="hd-aside__link">
{link.title}
</Link>
</li>
))}
</ul>
</li>
</ul>
</aside>
);
};
Loading

0 comments on commit 3f2dcc4

Please sign in to comment.