@yeonpm/docs-template

A reusable document-style layout and card component library for React.

Provides a full-featured Shell (header + side navigation + main content area), a versatile CommonCard, a slide-in Drawer panel, a multi-format Citation Modal, and a ready-to-use DocsGuide page — everything you need to build portfolio / CV / documentation sites quickly.

Installation

npm install @yeonpm/docs-template

Peer Dependencies

The following packages must be installed in your project:

npm install @yeonpm/react @emotion/react @emotion/styled react-icons zustand

Components

| Component | Description | |---|---| | CommonizeShell | Top-level layout combining Header + SideNav + main content area | | CommonizeHeader | Fixed top header with brand title, right slot, and mobile hamburger menu | | CommonizeSideNav | Desktop fixed / mobile drawer side navigation | | CommonCard | Multi-purpose card supporting title, image, author, citation, link, and various click actions | | CommonizeDrawer | Right slide-in detail panel powered by Zustand | | CardWrapper | Card wrapper with mouse-tracking hover glow effect | | CitationModal | Academic citation modal with MLA / APA / Chicago / Harvard / Vancouver formats | | DocsGuide | Ready-to-use full guide page showcasing all components |

DocsGuide — One-Line Demo Page

The fastest way to see all components in action. Import DocsGuide and render it — that's it.

"use client";

import { DocsGuide } from "@yeonpm/docs-template";

export default function Page() {
  return <DocsGuide version="0.3.0" />;
}

| Prop | Type | Default | Description | |---|---|---|---| | version | string | "latest" | Version string displayed in the header |

Deploy with Next.js

An example Next.js project is included in the example/ directory. To deploy:

cd example
npm install
npm run build   # or deploy to Vercel with Root Directory set to "example"

Quick Start

import {
  CommonizeShell,
  CommonCard,
  CommonizeDrawer,
  useCommonizeDrawerStore,
} from "@yeonpm/docs-template";

function App() {
  const { open } = useCommonizeDrawerStore();

  return (
    <CommonizeShell
      brand={{ title: "My Docs", subtitle: "v1.0" }}
      navItems={[
        { key: "intro", label: "Introduction", target: { type: "hash", id: "intro" } },
        { key: "api", label: "API Reference", target: { type: "hash", id: "api" } },
        { key: "github", label: "GitHub", target: { type: "external", href: "https://github.com" } },
      ]}
    >
      <section id="intro">
        <CommonCard
          title="Getting Started"
          description="Learn how to use this library."
          onClickAsDrawer={() =>
            open({
              panelTitle: "Getting Started",
              body: <p>Detailed walkthrough content goes here...</p>,
            })
          }
        />
      </section>
      <CommonizeDrawer />
    </CommonizeShell>
  );
}

Font Recommendation

All components use font-family: inherit, so they follow whatever font is set on your app's root element. We recommend setting a font on body:

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

API Reference

<CommonizeShell />

Top-level layout shell that combines header, side navigation, and main content.

| Prop | Type | Description | |---|---|---| | brand | CommonizeBrand | Brand info displayed in the header | | navItems | CommonizeNavItem[] | Navigation items for the side nav | | children | React.ReactNode | Main content | | headerRightSlot | React.ReactNode | Optional right-side header slot | | navBottomSlot | React.ReactNode | Optional bottom-side slot in the side nav |

<CommonizeHeader />

Fixed top header bar.

| Prop | Type | Description | |---|---|---| | brand | CommonizeBrand | { title, subtitle?, onClick? } | | rightSlot | React.ReactNode | Right-side slot content | | onHamburgerClick | () => void | Hamburger menu click handler (mobile) |

<CommonizeSideNav />

Desktop: fixed side navigation. Mobile (≤768px): overlay drawer.

| Prop | Type | Default | Description | |---|---|---|---| | items | CommonizeNavItem[] | — | Navigation items | | bottomSlot | React.ReactNode | — | Bottom slot | | width | number | 220 | Nav width in pixels | | headerOffset | number | 64 | Header height offset |

<CommonCard />

Versatile card component used across Education, Publications, Honors, Experience sections, etc.

| Prop | Type | Description | |---|---|---| | title | ReactTextLike | Card title (string or ReactElement) | | subTitle | ReactTextLike | Subtitle | | description | ReactTextLike | Description text | | author | CommonCardAuthor | Author — plain string or { value, isMain? }[] | | period | ReactTextLike | Period / date range | | extra | React.ReactNode | Extra content below the main body | | image | CommonCardImage | { src, alt?, href?, size? } | | linkButton | CommonCardLinkButton | { label?, href } — external link icon | | citation | CommonCardCitation | Citation data — opens CitationModal on quote icon click | | css | string | CSS override for internal class selectors | | onClick | (e) => void | Direct click handler | | hoverable | boolean | Enable hover glow effect | | padding | number | Card padding (default 16) | | className | string | Additional CSS class | | onClickAsNewTab | string \| (e) => void | Open URL or run custom logic in a new tab | | onClickAsPopup | string \| (e) => void | Open URL or run custom logic in a popup window | | onClickAsDrawer | (e) => void | Open a drawer panel |

Click priority: onClick → onClickAsDrawer → onClickAsPopup → onClickAsNewTab → linkButton.href

<CommonizeDrawer />

Right-side slide-in detail panel. Controlled via useCommonizeDrawerStore.

const { open, close, isOpen, content } = useCommonizeDrawerStore();

// Open the drawer
open({
  panelTitle: "Detail Title",
  subtitle: "Optional subtitle",
  body: <div>Any React content</div>,
});

// Close the drawer
close();

<CardWrapper />

A card container with rounded corners, border, shadow, and an optional mouse-tracking radial glow hover effect.

| Prop | Type | Default | Description | |---|---|---|---| | children | React.ReactNode | — | Card content | | padding | number | 16 | Inner padding | | className | string | — | Additional CSS class | | hoverable | boolean | false | Enable hover glow effect | | onClick | (e) => void | — | Click handler |

<CitationModal />

Dialog for displaying academic citations in 5 formats (MLA, APA, Chicago, Harvard, Vancouver). Supports loading citation data from a CSV file or auto-generating from publication metadata.

| Prop | Type | Description | |---|---|---| | open | boolean | Modal open state | | onClose | () => void | Close handler | | publication | Publication \| null | { title, authors, journal, year, doi?, citationCsv? } |

<DocsGuide />

A pre-built, ready-to-render guide page that demonstrates all components in the library. Includes interactive examples with "View Code" cards and section anchor links.

| Prop | Type | Default | Description | |---|---|---|---| | version | string | "latest" | Version label shown in the header |

Types

All types are available as named exports:

import type {
  ReactTextLike,
  CommonizeNavTarget,
  CommonizeNavItem,
  CommonizeBrand,
  CommonCardAuthor,
  CommonCardImage,
  CommonCardCitation,
  CommonCardLinkButton,
  CommonCardProps,
  CommonizeDrawerContent,
  DocsGuideProps,
} from "@yeonpm/docs-template";

Navigation Target Types

type CommonizeNavTarget =
  | { type: "hash"; id: string; path?: string }  // Scroll to #id
  | { type: "route"; href: string }               // Client-side navigation
  | { type: "external"; href: string };            // Open in new tab

Utilities

import { openExternal, navigateToHash, handleNavTarget } from "@yeonpm/docs-template";

openExternal("https://github.com");         // window.open in new tab
navigateToHash("section-id");               // Smooth scroll to #section-id
handleNavTarget({ type: "hash", id: "api" }); // Handles all nav target types

License

MIT