endaaman.com

2024-11-18

更新履歴

Giscusを導入した

GitHubのDiscussionを使ったコメントシステムを導入

Svelte Markdown

SvelteKitフロントエンドでの使い方

直に書くversion

<script>
  import { onMount } from 'svelte'
  import { browser } from '$app/environment'

  onMount(() => {
    if (browser) {
      const script = document.createElement('script')
      script.src = 'https://giscus.app/client.js'
      script.setAttribute('data-repo', 'endaaman/blog-frontend')
      script.setAttribute('data-repo-id', 'R_kgDOJA50wQ')
      script.setAttribute('data-category', 'General')
      script.setAttribute('data-category-id', 'DIC_kwDOJA50wc4CkWxV')
      script.setAttribute('data-mapping', 'pathname')
      script.setAttribute('data-strict', '0')
      script.setAttribute('data-reactions-enabled', '1')
      script.setAttribute('data-emit-metadata', '0')
      script.setAttribute('data-input-position', 'bottom')
      script.setAttribute('data-theme', 'light_protanopia')
      script.setAttribute('data-lang', 'ja')
      script.setAttribute('data-loading', 'lazy')
      const discussionTemplate = `https://endaaman.com${window.location.pathname}`
      script.crossOrigin = 'anonymous'
      script.async = true
      document.getElementById('comments')?.appendChild(script)
    }
  })
</script>

<!-- Giscusのコメント部分 -->
<div id="comments" class="giscus" />

コンポーネント使うversion

<script>
  import Giscus from '@giscus/svelte'

  const giscusConfig = {
    id: 'giscus-widget',
    host: 'https://giscus.app',
    repo: 'endaaman/blog-frontend',
    repoId: 'R_kgDOJA50wQ',
    category: 'General',
    categoryId: 'DIC_kwDOJA50wc4CkWxV',
    mapping: 'pathname',
    strict: '0',
    reactionsEnabled: '1',
    inputPosition: 'bottom',
    loading: 'lazy',
    lang: 'ja',
    term: '',
    theme: 'light',
  }
</script>

<!-- Giscusのコメント部分 -->
<Giscus {...giscusConfig}></Giscus>

記述量はほぼ変わらない。結局内部で同じようにonMountでiframeを埋め込んでるだけなのであまりコンポーネントにする意味は薄そう。

Tips

Botが投稿するデフォルトの文章

update/introduce-giscus という題に、

# update/introduce-giscus

GitHubのDiscussionを使ったコメントシステムを導入

https://endaaman.com/update/introduce-giscus

<!-- sha1: 5001db05c130bed672681adc157cac441971b2d2 -->

というような文でconversationが作成される。URLは

<meta name="giscus:backlink" content={`https://endaaman.com${pathname}`}>

のようにして制御できる。

しかしその文章の方は

<meta name="description" content={article.digest} />

の"descrption" から吸い取られるだけで、2024/11/18ではコントロールできなそう。一応https://github.com/giscus/giscus/pull/1410のようなPRもあり、そのうち対応されそうな気もする。

スタイルの制御

コンポーネントはiframe内に埋め込まれており、細かくいじるのは少しむずかしい。現在調べ中。

©2024 endaaman.com