WIP on feat/renewal-design

portone-io · Sep 25, 2024 · 1163241 · 1163241
1 parent 1a70c6d
commit 1163241
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 92 deletions.
diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx
@@ -4,6 +4,7 @@ import {
  createEffect,
  createSignal,
  For,
+ type JSXElement,
  onCleanup,
  Show,
  untrack,
@@ -12,6 +13,7 @@ import {
 import type { Heading } from "~/genCollections";
 
 interface Props {
+ children?: JSXElement;
  theme: "aside" | "island";
  headings: Heading[];
 }
@@ -126,7 +128,7 @@ function Item(props: {
  <a
  href={`#${props.heading.id}`}
  class={clsx(
- "py-1 block break-keep text-.8125rem leading-5 font-500",
+ "py-1 block break-keep text-.8125rem leading-5 font-medium",
  props.isActive ? "text-slate-8" : "text-slate-4",
  )}
  >

diff --git a/src/components/blog/prose.tsx b/src/components/blog/prose.tsx
@@ -67,7 +67,7 @@ export function h5(props: JSX.HTMLAttributes<HTMLHeadingElement>) {
  <h5
  {...others}
  class={clsx(
- "text-.875rem font-500 my-3 leading-[1.7] tracking-[-.006em]",
+ "text-.875rem font-medium my-3 leading-[1.7] tracking-[-.006em]",
  locals.class,
  )}
  >
@@ -82,7 +82,7 @@ export function h6(props: JSX.HTMLAttributes<HTMLHeadingElement>) {
  <h6
  {...others}
  class={clsx(
- "text-.875rem font-500 my-3 leading-[1.7] tracking-[-.006em]",
+ "text-.875rem font-medium my-3 leading-[1.7] tracking-[-.006em]",
  locals.class,
  )}
  >

diff --git a/src/components/prose.css b/src/components/prose.css
@@ -11,10 +11,10 @@ article:has(.prose-marker) h4 {
  @apply text-1.125rem mt-8px mb-8px font-600 leading-[1.35] tracking-[-.014em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) h5 {
- @apply text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
+ @apply text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) h6 {
- @apply text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
+ @apply text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) p {
  @apply mt-8px mb-8px leading-[1.5] first:mt-0 last:mb-0;

diff --git a/src/components/prose.tsx b/src/components/prose.tsx
@@ -68,7 +68,7 @@ export function h5(props: JSX.IntrinsicElements["h5"]) {
  <h5
  {...rest}
  class={clsx(
- "text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
+ "text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
  local.class,
  )}
  >
@@ -83,7 +83,7 @@ export function h6(props: JSX.IntrinsicElements["h6"]) {
  <h6
  {...rest}
  class={clsx(
- "text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
+ "text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
  local.class,
  )}
  >

diff --git a/src/layouts/rest-api/index.tsx b/src/layouts/rest-api/index.tsx
@@ -31,7 +31,7 @@ export default function RestApi(props: RestApiProps) {
  );
  return (
  <div class="flex flex-1 justify-center">
- <article class="m-4 mb-16 flex shrink-1 basis-300 flex-col pb-10 text-slate-700">
+ <article class="m-4 mb-16 flex shrink-1 basis-300 flex-col pb-10 text-slate-7">
  <section id="overview" class="flex flex-col scroll-mt-5.2rem">
  <prose.h1>{props.title}</prose.h1>
  {props.children}

diff --git a/src/layouts/sidebar/DocsNavMenu.tsx b/src/layouts/sidebar/DocsNavMenu.tsx
@@ -61,7 +61,7 @@ export default function DocsNavMenu(props: Props) {
  >
  <li class="[&:not(:last-child)]:mb-4">
  <h4 class="p-2 text-lg font-bold first:mt-0">
- <span class="font-500">{item.label}</span>
+ <span class="font-medium">{item.label}</span>
  </h4>
  <ul class="flex flex-col gap-1">
  <For each={item.items}>

diff --git a/src/layouts/sidebar/LeftSidebar.tsx b/src/layouts/sidebar/LeftSidebar.tsx
@@ -6,7 +6,7 @@ export default function LeftSidebar(props: { children: JSXElement }) {
  const sidebarOpen = useSidebarContext();
 
  return (
- <aside class="pointer-events-none absolute w-70 shrink-0 text-slate-700 z-left-sidebar md:relative md:block">
+ <aside class="pointer-events-none absolute w-70 shrink-0 text-slate-7 z-left-sidebar md:relative md:block">
  <div
  style={{
  transform: sidebarOpen.get() ? "none" : "translateX(-100%)",

diff --git a/src/layouts/sidebar/LeftSidebarItem.tsx b/src/layouts/sidebar/LeftSidebarItem.tsx
@@ -157,7 +157,7 @@ export function JustLink(props: JustLinkProps) {
 export function getLinkStyle(isActive: boolean): string {
  return `px-2 block text-sm rounded ${
  isActive
- ? "font-500 text-portone bg-orange-1"
+ ? "font-medium text-portone bg-orange-1"
  : "text-slate-500 hover:bg-slate-1"
  }`;
 }

diff --git a/src/layouts/sidebar/RightSidebar.tsx b/src/layouts/sidebar/RightSidebar.tsx
@@ -1,26 +1,14 @@
-import {
- createEffect,
- createSignal,
- For,
- type JSXElement,
- mergeProps,
- Show,
-} from "solid-js";
+import { type JSXElement, mergeProps, Show } from "solid-js";
 
-import { useSystemVersion } from "~/state/system-version";
+import TableOfContents from "~/components/TableOfContents";
+import type { Heading } from "~/genCollections";
 
 export interface RightSidebarProps {
  lang: string;
- slug: string;
  file: string;
+ headings: Heading[];
  editThisPagePrefix?: string;
 }
-export type Toc = TocItem[];
-export interface TocItem {
- slug: string;
- text: string;
- children: TocItem[];
-}
 function RightSidebar(_props: RightSidebarProps) {
  const props = mergeProps(
  {
@@ -30,39 +18,15 @@ function RightSidebar(_props: RightSidebarProps) {
  _props,
  );
 
- const [toc, setToc] = createSignal<Toc | null>(null);
- const { systemVersion } = useSystemVersion();
-
- createEffect(() => {
- void systemVersion();
- void props.slug;
- setToc(headingsToToc(props.lang));
- });
-
  return (
  <div class="hidden min-w-0 w-56 shrink-0 text-slate-7 lg:block">
- <Show when={toc()}>
+ <Show when={true}>
  <nav class="fixed h-[calc(100%-56px)] w-inherit overflow-y-auto px-2 py-[28px]">
- <h2 class="mb-2 px-2 font-500">{t(props.lang, "toc")}</h2>
- <ul>
- <For each={toc()}>
- {(item) => (
- <SidebarItem
- href={`#${item.slug}`}
- label={<span class="font-500">{item.text}</span>}
- >
- <ul class="pl-3">
- <For each={item.children}>
- {(item) => (
- <SidebarItem href={`#${item.slug}`} label={item.text} />
- )}
- </For>
- </ul>
- </SidebarItem>
- )}
- </For>
- </ul>
- <h2 class="mb-2 mt-4 px-2 font-bold">
+ <h2 class="my-2 text-sm text-slate-8 font-medium">
+ {t(props.lang, "toc")}
+ </h2>
+ <TableOfContents theme="aside" headings={props.headings} />
+ <h2 class="my-2 mt-4 text-sm text-slate-8 font-medium">
  {t(props.lang, "contribute")}
  </h2>
  <ul>
@@ -99,7 +63,7 @@ function SidebarItem(props: LinkProps) {
  document.getElementById(slug)?.scrollIntoView({ behavior: "smooth" });
  }}
  >
- <div class="overflow-hidden text-ellipsis whitespace-nowrap rounded-sm px-2 py-1 text-.8125rem text-slate-4 leading-5 hover:bg-slate-1 hover:text-portone">
+ <div class="overflow-hidden text-ellipsis whitespace-nowrap rounded-sm px-2 py-1 text-.8125rem text-slate-4 leading-5 hover:text-portone">
  <Show when={props.icon}>
  <>
  <i class={`${props.icon} inline-block align-top text-lg`}></i>{" "}
@@ -113,33 +77,6 @@ function SidebarItem(props: LinkProps) {
  );
 }
 
-export interface Heading {
- depth: number;
- slug: string;
- text: string;
-}
-
-export function headingsToToc(lang: string): Toc {
- const result: Toc = [
- { slug: "overview", text: t(lang, "overview"), children: [] },
- ];
- let recent2: TocItem | undefined;
- const headings: Heading[] = [
- ...document.querySelectorAll("article :is(h2, h3)"),
- ].map((el) => ({
- depth: Number(el.tagName.slice(1)),
- slug: el.id,
- text: el.textContent ?? "",
- }));
- for (const h of headings.filter((h) => h.depth === 2 || h.depth === 3)) {
- const item = { ...h, children: [] };
- if (recent2 && item.depth === 3) recent2.children.push(item);
- else result.push(item);
- if (item.depth === 2) recent2 = item;
- }
- return result;
-}
-
 const ko = {
  toc: "목차",
  overview: "개요",

diff --git a/src/routes/(root)/opi.tsx b/src/routes/(root)/opi.tsx
@@ -71,7 +71,7 @@ export default function Docs(props: { children: JSXElement }) {
  ogImageSlug={`opi/${params().lang}/${params().slug}.png`}
  docsEntry={frontmatter()}
  />
- <article class="m-4 mb-40 min-w-0 flex shrink-1 basis-200 flex-col text-slate-700">
+ <article class="m-4 mb-40 min-w-0 flex shrink-1 basis-200 flex-col text-slate-7">
  <div class="mb-6">
  <prose.h1 id="overview">{frontmatter().title}</prose.h1>
  <Show when={frontmatter().description}>
@@ -88,8 +88,8 @@ export default function Docs(props: { children: JSXElement }) {
  <div class="hidden shrink-10 basis-10 lg:block"></div>
  <RightSidebar
  lang={params().lang}
- slug={params().slug}
  file={doc()?.file ?? ""}
+ headings={doc()?.headings ?? []}
  />
  </div>
  </div>

diff --git a/src/routes/(root)/platform.tsx b/src/routes/(root)/platform.tsx
@@ -17,7 +17,7 @@ export default function PlatformLayout(props: { children: JSXElement }) {
  <div class="flex">
  <aside
  id="left-sidebar"
- class="relative hidden w-65 shrink-0 text-slate-700 md:block"
+ class="relative hidden w-65 shrink-0 text-slate-7 md:block"
  >
  <div class="fixed h-[calc(100%-3.5rem)] w-inherit overflow-y-scroll border-r bg-white">
  <Suspense>

diff --git a/src/routes/(root)/platform/(doc).tsx b/src/routes/(root)/platform/(doc).tsx
@@ -46,7 +46,11 @@ export default function PlatformDocLayout(props: { children: JSXElement }) {
  {props.children}
  </article>
  <div class="hidden shrink-10 basis-10 lg:block"></div>
- <RightSidebar lang="ko" file={doc().file} slug={slug()} />
+ <RightSidebar
+ lang="ko"
+ file={doc().file}
+ headings={doc().headings}
+ />
  </>
  );
  }}

diff --git a/src/routes/(root)/platform/index.tsx b/src/routes/(root)/platform/index.tsx
@@ -3,7 +3,7 @@ import * as prose from "~/components/prose";
 
 export default function PlatformIndex() {
  return (
- <article class="m-4 w-full flex flex-col text-slate-700">
+ <article class="m-4 w-full flex flex-col text-slate-7">
  <Metadata title="파트너정산 가이드" />
  <prose.h1>파트너 정산 자동화</prose.h1>
  <p class="my-4 text-xl text-gray">

diff --git a/src/routes/(root)/release-notes.tsx b/src/routes/(root)/release-notes.tsx
@@ -21,7 +21,7 @@ export default function ReleaseNotesLayout(props: Props) {
  <div class="flex">
  <aside
  id="left-sidebar"
- class="relative hidden w-65 shrink-0 text-slate-700 md:block"
+ class="relative hidden w-65 shrink-0 text-slate-7 md:block"
  >
  <div class="fixed h-[calc(100%-3.5rem)] w-inherit overflow-y-scroll border-r bg-white">
  <Show when={notes()}>
@@ -36,7 +36,7 @@ export default function ReleaseNotesLayout(props: Props) {
  </div>
  </aside>
  <div class="mx-auto shrink basis-200">
- <article class="m-4 flex flex-col text-slate-700">
+ <article class="m-4 flex flex-col text-slate-7">
  {props.children}
  </article>
  </div>