노션 블로그에 giscus 추가하기

Comparing transitive-bullshit:main...sgamerw:feature/giscus · transitive-bullshit/nextjs-notion-starter-kit

Deploy your own Notion-powered website in minutes with Next.js and Vercel. - Comparing transitive-bullshit:main...sgamerw:feature/giscus · transitive-bullshit/nextjs-notion-starter-kit

https://github.com/transitive-bullshit/nextjs-notion-starter-kit/compare/main...sgamerw:nextjs-notion-starter-kit:feature/giscus

giscus 라이브러리 추가하기

npm: @giscus/react

See [giscus-component][giscus-component] for more details.. Latest version: 3.0.0, last published: 7 months ago. Start using @giscus/react in your project by running `npm i @giscus/react`. There are 38 other projects in the npm registry using @giscus/react.

https://www.npmjs.com/package/@giscus/react

PageFooter.tsx 만들기

import * as React from 'react'
import Giscus from '@giscus/react';
import * as config from '@/lib/config'

import styles from './styles.module.css'

export const PageFooter: React.FC<{
  isBlogPost: boolean
}> = ({ isBlogPost }) => {
  // only display comments and page actions on blog post pages
  if (isBlogPost) {
    return (
      config.giscusRepo && (<div className={styles.comments}>
        <Giscus
          id="comments"
          repo={config.giscusRepo}
          repoId={config.giscusRepoId}
          category={config.giscusCategory}
          categoryId={config.giscusCategoryId}
          mapping="title"
          reactionsEnabled="1"
          emitMetadata="0"
          inputPosition="bottom"
          theme="preferred_color_scheme"
          lang="en"
          loading="lazy"
        />
      </div>)
    );
  }

  return null
}

giscus 앱 설정을 미리 해두지 않았다면 아래 블로그 글을 참고하여 먼저 설정을 완료해두자.

Utterances 에서 Giscus 로 마이그레이션하기

블로그의 댓글을 Utterances 에서 Giscus 로 마이그레이션 했다. 기존 댓글을 잘 사용하고 있었지만, 장점이 훨씬 많은 Giscus로 이관하게 되었다. 1. Giscus 장점 Giscus 는 Utterances에 비해 많은 장점들이 있다. 대댓글 댓글 수, 댓글 정렬, 게시물에 대한 반응 다양한 테마 생각보다 많은 테마와 사용자가 직접 생성한 테마를 적용할 수 있다. 블로그에 적용된 테마는 Github Light High Contrast 테마이다. (High Contrast 테마는 JetBrains IDE에서도 사용하는 애정하는 테마이다.) 그 외 장점 지연 로딩 댓글 다국어 (한국어 포함) 봇 자체 호스팅 기타 등등 여러 다양한 옵션들이 존재 가장 중요한건 실제로 계속해서 관리가 되고 있는 ..

https://jojoldu.tistory.com/704

site.config.ts 수정하기

  //site.config.ts
  
  navigationStyle: 'default',
  // navigationStyle: 'custom',
  // navigationLinks: [
  //   {
  //     title: 'About',
  //     pageId: 'f1199d37579b41cbabfc0b5174f4256a'
  //   },
  //   {
  //     title: 'Contact',
  //     pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
  //   }
  // ]

  // giscus configuration (optional)
  giscusRepo: 'data-repo 값 넣기',
  giscusRepoId: 'data-repo-id 값 넣기',
  giscusCategory: 'data-category 값 넣기',
  giscusCategoryId: 'data-category-id 값 넣기'
})

NotionPage.tsx 수정하기

// NotionPage.tsx
import { Page404 } from './Page404'
import { PageAside } from './PageAside'
import { PageHead } from './PageHead'
import { PageFooter } from './PageFooter' // 이 줄 추가
import styles from './styles.module.css'


---------------------------
// const footer 위에 아래 내용 추가
  const pageFooter = React.useMemo(
    () => (
      <PageFooter isBlogPost={isBlogPost} />
    ),
    [isBlogPost]
  )
  
------------------------------

// return () 안의 <NotionRenderer> 안에 아래 추가
        mapImageUrl={mapImageUrl}
        searchNotion={config.isSearchEnabled ? searchNotion : null}
        pageAside={pageAside}
        pageFooter={pageFooter} // 이 줄 추가
        footer={footer}
      />

lib/config.ts 수정

// lib/config.ts

// import 부분에 아래 내용 추가
import { Repo } from '@giscus/react'


// social accounts 설정값 아래 부분에 아래 내용 추가
// giscus config
export const giscusRepo: Repo | null = getSiteConfig('giscusRepo', null)
export const giscusRepoId: string | null = getSiteConfig('giscusRepoId', null)
export const giscusCategory: string | null = getSiteConfig('giscusCategory', null)
export const giscusCategoryId: string | null = getSiteConfig('giscusCategoryId', null)

lib/site-config.ts 수정

// lib/site-config.ts

// navigationLinks? 아래에 추가
  giscusRepo?: Repo
  giscusRepoId?: string
  giscusCategory?: string
  giscusCategoryId?: string

package.json 수정

    //package.json에서 찾기해서 숫자를 바꿔준다.
    
    "notion-client": "^6.16.0",
    "notion-types": "^6.16.0",
    "notion-utils": "^6.16.0",
    "react-notion-x": "^6.16.0",