WePLi Docusaurus 완성본
WePLi
Description will go into a meta tag in <head />
wepli.site
Docusaurus.config.ts
const config: Config = {
title: 'WePLi', // 웹사이트 제목
tagline: 'Share Your Sound, Unite in Harmony', // 웹사이트 설명
favicon: 'img/favicon.ico', // 파비콘
url: 'https://wepli.site', // 웹사이트 url (route path 제외) ex)https://wepli-test.github.io
baseUrl: '/', // 웹사이트 base url (url + baseUrl을 시작 위치로 페이지 탐색)
organizationName: 'WePLi-Test', // 깃허브 Username
projectName: 'WePLi-Document', // 깃허브 Repository 이름
onBrokenLinks: 'throw', // 잘못된 링크가 있는 경우 예외 발생
onBrokenMarkdownLinks: 'warn',
}
docusaurus.config.ts에선 기본적인 정보를 작성해주시면 됩니다.
해당 파일에 작성된 정보는 다른 페이지에서 참조 가능합니다.
docusaurus.config.ts 내의 themeConfig에서 Navbar, Footer 등도 수정 가능합니다.
Navbar 영역
Navbar의 경우 docusaurus.config.ts 내의 themeConfig에서 요소를 수정할 수 있습니다.
코드 예시
더보기
themeConfig: {
navbar: {
title: 'WePLi', // 타이틀
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg', // 로고
},
items: [
{ // 메뉴 1
type: 'docSidebar',
sidebarId: 'tutorialSidebar',
position: 'left',
label: 'Document',
},
{ // 메뉴 2
to: '/blog',
label: 'Blog',
position: 'left'
},
{ // 메뉴 3
href: 'https://github.com/dongx0915/WePLi-Android',
label: 'Download',
position: 'right',
},
],
},
}메인 배너 영역
my-website/src/pages/index.tsx
useDocusaurusContext()를 통해 docusaurus.config.ts에서 설정해둔 값들을 참조할 수 있습니다.
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
<Heading as="h1" className={styles.wepliTitle}>
{siteConfig.title} // docusaurus.config.ts 값 참조
</Heading>
}
코드 예시
더보기
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import Heading from '@theme/Heading';
import styles from './index.module.css';
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={styles.bannerContainer}>
{/* Background and overlay container */}
<div className={styles.backgroundOverlay}></div>
{/* Text content container */}
<div className="container" style={{ position: 'relative', zIndex: 10 }}>
<Heading as="h1" className={styles.wepliTitle}>
{siteConfig.title}
</Heading>
<p className={styles.wepliSubscription}>{siteConfig.tagline}</p>
<h2 className={styles.mainTitle}>혼자만의 감상에서 벗어나</h2>
<h2 className={styles.mainTitle}>함께 만들어가는 음악 여정에 참여하세요</h2>
</div>
</header>
);
}
export default function Home(): JSX.Element {
const {siteConfig} = useDocusaurusContext();
return (
<Layout
// title={`${siteConfig.title}`} // 웹 페이지 탭 제목 부분
description="Description will go into a meta tag in <head />">
<HomepageHeader />
<main>
<HomepageFeatures /> // 메인 콘텐츠 영역
</main>
</Layout>
);
}메인 콘텐츠 영역
my-website/src/components/HomepageFeatures/index.tsx
코드 예시
더보기
import React from 'react';
import Link from '@docusaurus/Link';
import styles from './styles.module.css';
export default function Home(): JSX.Element {
return (
<main>
<section className={`padding-vert--xl container ${styles.heroSection}`}>
<div className="row margin-bottom--sm">
<div className="col col--8">
<div>
<h2 className={`${styles.hero__title} margin-bottom--lg`}>WEPLI ENGINEERING</h2>
<p className={`margin-bottom--md ${styles.hero__text}`}>
위플리를 만들어가는 저희의 다양한 경험과 실제 사례를 바탕으로한 문제 해결과정을 공유합니다.
높은 수준의 코드 품질과 안정적인 서비스를 만들기 위해 노력하고 있습니다.
</p>
<p className={`margin-bottom--sm ${styles.hero__text}`}>
비즈니스, 모니터링, 설계, 문서화, 로그, 성능 등 다양한 주제를 다루고 있습니다.
</p>
</div>
</div>
</div>
<div className="row">
{[
{ title: '비즈니스', link: '/docs/intro', description: '사용자의 상호작용을 로깅하고 분석하여 플레이리스트 생성 및 공유 기능을 최적화합니다. 사용자 데이터를 기반으로 통계를 내고 개인화된 추천을 제공하여 서비스를 개선해 나가고 있습니다.' },
{ title: '모니터링', link: '/docs/intro', description: '안드로이드 앱의 안정성을 확보하기 위해 Firebase Crashlytics, Google Play Console을 통한 사용자 리뷰 모니터링으로 신속한 피드백 수집 및 대응을 하고 있습니다.' },
{ title: '설계', link: '/docs/intro', description: 'Compose 및 MVI 아키텍처를 적용하여 UI와 비즈니스 로직을 효과적으로 분리하고 있습니다. 또한, Version Catalog와 Multi Module을 통해 모듈화와 확장성을 강화하였습니다' },
{ title: '문서화', link: '/docs/intro', description: 'Kotlin Dokka를 사용하여 코드 문서화를 자동화하고, 개발자 간의 효율적인 소통을 지원하고 있습니다.' },
{ title: '로그', link: '/docs/intro', description: '안드로이드 로그 시스템과 ELK 스택을 통합하여 앱의 로그를 수집하고 분석합니다. 이를 통해 사용자 경험을 지속적으로 개선하고, 앱의 성능 관리를 효율적으로 수행합니다.' },
{ title: '성능', link: '/docs/intro', description: 'Android Profiler와 LeakCanary를 사용하여 앱의 성능과 메모리 사용량을 체계적으로 모니터링하고, 성능 최적화를 위한 분석을 실시하고 있습니다.' }
].map((feature, idx) => (
<div className="col col--4" key={idx}>
<div className={`margin-top--xl shadow--lg ${styles.callout}`}>
<div className="card__header">
<h3>{feature.title}</h3>
</div>
<div className="card__body">
<p><Link to={feature.link} className={styles.callout__link}>{feature.description}</Link></p>
</div>
</div>
</div>
))}
</div>
</section>
</main>
);
}
푸터 영역
푸터도 네비게이션 바와 동일하게 docusaurus.config.ts 내의 themeConfig에서 커스텀 가능합니다.
Footer의 CSS를 커스텀하고 싶은 경우 아래 CSS에 수정 사항을 반영하면 됩니다.
my-website/src/css/custom.css
코드 예시
더보기
themeConfig: {
footer: {
style: 'dark',
links: [
{
title: 'WebSite',
items: [
{
label: 'Document',
to: '/docs/intro',
},
{
label: 'Blog',
to: '/blog',
},
],
},
{
title: 'Channel',
items: [
{
label: 'Instagram',
href: 'https://www.instagram.com/dongx._.2/',
},
],
},
{
title: 'Development',
items: [
{
label: 'Github-Android',
href: 'https://github.com/dongx0915/WePLi-Android',
},
{
label: 'GitHub-Server',
href: 'https://github.com/dongx0915/WePLi-Android',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} My Project`,
}
}
