Skip to content

Home

Jump to bottom
임기정 edited this page Jan 6, 2025 · 20 revisions

Welcome to the docusaurus-docs wiki!

WhaTap Docs 플랫폼입니다. 사용 방법에 대한 안내입니다.

Docusaurus는 메타에서 제작한 문서에 최적화된 오픈소스 정적 사이트 생성 도구입니다. 참조

git clone

다음 명령어를 실행해 저장소를 내려받으세요.

git clone https://github.com/whatap/whatap-docs.git

cd whatap-docs

# docs 서브 모듈 업데이트
git submodule update --init
git submodule update --recursive

개발 환경에서 결과물 확인하기

다음 명령어를 실행해 작성한 문서의 결과물을 웹 환경으로 확인할 수 있습니다.

npm run start

# 포트 변경
npm run start -- --port 3000

# 언어 변경
npm run start -- --locale en

빌드 방법

다음 명령어를 실행하면 build 폴더로 웹 html 파일과 자바스크립트 등을 빌드합니다.

npm run build
   
# or

export NODE_OPTIONS="--max-old-space-size=12288" && npm run build --no-minify
export NODE_OPTIONS="--max-old-space-size=12288" && yarn build --no-minify

# 언어별로 빌드하기
npm run build -- --locale en

  • 사내 젠킨스 서버로 접속해 빌드를 진행합니다. 06.Guide > docs-github 페이지로 이동해 지금 빌드 버튼을 클릭하세요.

  • 검색 크롤러가 저녁 6시 30분부터 1시간 가량 동작 중입니다. 해당 시간에 빌드를 하면 검색 크롤러가 오작동할 수 있으니 다른 시간에 빌드를 진행하세요.

PDF 생성하기

PrinceXML 설치하기

다음 링크를 참조해 PrinceXML을 설치하세요.

www.princexml.com

docusaurus-prince-pdf 설치하기

npm install -g docusaurus-prince-pdf

다음 명령어를 실행해 각 상품별 페이지를 PDF로 생성할 수 있습니다.

npx docusaurus-prince-pdf -u https://docs.whatap.io/java/introduction --prince-args="--page-size='a4' --page-margin='10mm'" -o ./static/pdf/whatap-apm-java-monitoring.pdf --dest ./static/pdf --include-index

루트 경로에 배치 파일을 실행해 모든 상품을 한번에 PDF로 생성할 수 있습니다.

sh batch-generate-pdf.sh

pdfcpu 설치하기

npx docusaurus-prince-pdf 명령어로 PDF 파일을 생성하면 첫번째 페이지에 주석이 생성됩니다. pdfcpu는 이 주석을 삭제하기 위한 도구입니다.

pdfcpu annot remove ./pdf/whatap-apm-java-monitoring.pdf

자세한 내용은 다음 링크를 참조하세요.

커버 파일 만들기

새로움 상품이 추가되면 ./src/pages 하위 경로에 cover-*.js 파일을 생성하세요.

export default function Cover() {
  const bgPath = useBaseUrl('/img/cover-background.png');
  const cover = useBaseUrl('/java/introduction');
  return (
    <Layout>
    <Head>
    <meta name="robots" content="noindex, nofollow"/>
    </Head>
    <div className='cover-page'>
      <div
        className={styles.cover}
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '770px',
          width: '524px',
          fontSize: '20px',
          // border: '1px solid #000',
        }}>
        <h1>
          Java Monitoring
        </h1>
        <p className={styles.date}>
            release date. 2024.05.03
        </p>
        <img className={styles.background} src={bgPath} />
      </div>
      <a class="pagination-nav__link pagination-nav__link--next" href={cover}><div class="pagination-nav__sublabel">다음</div></a>
      <div class="page-break"></div>
    </div>
    </Layout>
  );
}

다음 항목을 수정하세요.

  • 해당 상품의 첫번째 페이지 주소를 입력하세요.

    const cover = useBaseUrl('/java/introduction');

  • 해당 상품의 이름을 입력하세요.

    <h1>
  Java Monitoring
</h1>
Clone this wiki locally