mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 03:02:53 +02:00
Merge pull request #33 from radishzzz/giscus
✨ feat: add support for giscus comment
This commit is contained in:
radishzz
GitHub
commit
81427859f1
8 changed files with 532 additions and 10 deletions
176
public/vendors/giscus/theme-dark.css
vendored
Normal file
176
public/vendors/giscus/theme-dark.css
vendored
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
/*! MIT License
|
||||
* Copyright (c) 2018 GitHub Inc.
|
||||
* https://github.com/primer/primitives/blob/main/LICENSE
|
||||
*/
|
||||
|
||||
main {
|
||||
/* Custom Theme Colors */
|
||||
--secondary-color: oklch(77% 0.005 298);
|
||||
--secondary-color-25: oklch(77% 0.005 298 / 25%);
|
||||
--background-color: oklch(22% 0.005 298);
|
||||
|
||||
--color-fg-default: var(--secondary-color);
|
||||
--color-canvas-default: var(--background-color);
|
||||
--color-canvas-overlay: var(--background-color);
|
||||
--color-canvas-inset: var(--background-color);
|
||||
--color-canvas-subtle: var(--background-color);
|
||||
--color-accent-fg: oklch(70.7% 0.165 254.624);
|
||||
--color-accent-emphasis: oklch(70.7% 0.165 254.624);
|
||||
|
||||
/* Offical Theme Colors */
|
||||
--color-prettylights-syntax-comment: #8b949e;
|
||||
--color-prettylights-syntax-constant: #79c0ff;
|
||||
--color-prettylights-syntax-entity: #d2a8ff;
|
||||
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
|
||||
--color-prettylights-syntax-entity-tag: #7ee787;
|
||||
--color-prettylights-syntax-keyword: #ff7b72;
|
||||
--color-prettylights-syntax-string: #a5d6ff;
|
||||
--color-prettylights-syntax-variable: #ffa657;
|
||||
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
|
||||
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
|
||||
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
|
||||
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
|
||||
--color-prettylights-syntax-carriage-return-bg: #b62324;
|
||||
--color-prettylights-syntax-string-regexp: #7ee787;
|
||||
--color-prettylights-syntax-markup-list: #f2cc60;
|
||||
--color-prettylights-syntax-markup-heading: #1f6feb;
|
||||
--color-prettylights-syntax-markup-italic: #c9d1d9;
|
||||
--color-prettylights-syntax-markup-bold: #c9d1d9;
|
||||
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
|
||||
--color-prettylights-syntax-markup-deleted-bg: #67060c;
|
||||
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
|
||||
--color-prettylights-syntax-markup-inserted-bg: #033a16;
|
||||
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
|
||||
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
|
||||
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
|
||||
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
|
||||
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
|
||||
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
|
||||
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
|
||||
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
|
||||
--color-btn-text: #c9d1d9;
|
||||
--color-btn-bg: #21262d;
|
||||
--color-btn-border: rgb(240 246 252 / 10%);
|
||||
--color-btn-shadow: 0 0 transparent;
|
||||
--color-btn-inset-shadow: 0 0 transparent;
|
||||
--color-btn-hover-bg: #30363d;
|
||||
--color-btn-hover-border: #8b949e;
|
||||
--color-btn-active-bg: hsl(212deg 12% 18% / 100%);
|
||||
--color-btn-active-border: #6e7681;
|
||||
--color-btn-selected-bg: #161b22;
|
||||
--color-btn-primary-text: #fff;
|
||||
--color-btn-primary-bg: #238636;
|
||||
--color-btn-primary-border: rgb(240 246 252 / 10%);
|
||||
--color-btn-primary-shadow: 0 0 transparent;
|
||||
--color-btn-primary-inset-shadow: 0 0 transparent;
|
||||
--color-btn-primary-hover-bg: #2ea043;
|
||||
--color-btn-primary-hover-border: rgb(240 246 252 / 10%);
|
||||
--color-btn-primary-selected-bg: #238636;
|
||||
--color-btn-primary-selected-shadow: 0 0 transparent;
|
||||
--color-btn-primary-disabled-text: rgb(255 255 255 / 50%);
|
||||
--color-btn-primary-disabled-bg: rgb(35 134 54 / 60%);
|
||||
--color-btn-primary-disabled-border: rgb(240 246 252 / 10%);
|
||||
--color-action-list-item-default-hover-bg: rgb(177 186 196 / 12%);
|
||||
--color-segmented-control-bg: rgb(110 118 129 / 10%);
|
||||
--color-segmented-control-button-bg: #0d1117;
|
||||
--color-segmented-control-button-selected-border: #6e7681;
|
||||
/* --color-fg-default: var(--secondary-color); */
|
||||
--color-fg-muted: #7d8590;
|
||||
--color-fg-subtle: #6e7681;
|
||||
/* --color-canvas-default: var(--background-color);
|
||||
--color-canvas-overlay: var(--background-color);
|
||||
--color-canvas-inset: var(--background-color);
|
||||
--color-canvas-subtle: var(--background-color); */
|
||||
--color-border-default: #30363d;
|
||||
--color-border-muted: #21262d;
|
||||
--color-neutral-muted: rgb(110 118 129 / 40%);
|
||||
/* --color-accent-fg: oklch(70.7% 0.165 254.624);
|
||||
--color-accent-emphasis: oklch(70.7% 0.165 254.624); */
|
||||
--color-accent-muted: rgb(56 139 253 / 40%);
|
||||
--color-accent-subtle: rgb(56 139 253 / 10%);
|
||||
--color-success-fg: #3fb950;
|
||||
--color-attention-fg: #d29922;
|
||||
--color-attention-muted: rgb(187 128 9 / 40%);
|
||||
--color-attention-subtle: rgb(187 128 9 / 15%);
|
||||
--color-danger-fg: #f85149;
|
||||
--color-danger-muted: rgb(248 81 73 / 40%);
|
||||
--color-danger-subtle: rgb(248 81 73 / 10%);
|
||||
--color-primer-shadow-inset: 0 0 transparent;
|
||||
--color-scale-gray-7: #21262d;
|
||||
--color-scale-blue-8: #0c2d6b;
|
||||
|
||||
/*! Extensions from @primer/css/alerts/flash.scss */
|
||||
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
|
||||
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
|
||||
}
|
||||
|
||||
main .pagination-loader-container {
|
||||
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
|
||||
}
|
||||
|
||||
main .gsc-loading-image {
|
||||
background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
|
||||
}
|
||||
|
||||
/* Smooth Font */
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* All Border Color */
|
||||
*:not(.BtnGroup-item) {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
|
||||
/* No Giscus Copyright and Avatar Line */
|
||||
.gsc-tl-line,
|
||||
.gsc-left-header em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Comments Count Font No Underline and Small Size */
|
||||
h4.gsc-comments-count-separator,
|
||||
h4.gsc-replies-count {
|
||||
color: var(--secondary-color);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Oldest and Newest Buttons Style */
|
||||
.BtnGroup-item,
|
||||
.BtnGroup-item.BtnGroup-item--selected {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.BtnGroup-item.BtnGroup-item--selected {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
.BtnGroup-item:not(.BtnGroup-item--selected):hover {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
.BtnGroup-item button.btn:hover {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
/* Reply Time No Underline */
|
||||
.gsc-comment-author a:has(time),
|
||||
.gsc-reply-author a:has(time) {
|
||||
text-decoration: none;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Comments Count No Underline */
|
||||
.gsc-comments-count a {
|
||||
text-decoration: none!important;
|
||||
}
|
||||
|
||||
/* Social Reactions Icons */
|
||||
.gsc-social-reaction-summary-item.has-reacted {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.gsc-social-reaction-summary-item.has-reacted:hover {
|
||||
background-color: var(--background-color)!important;
|
||||
border-color: var(--color-accent-fg)!important;
|
||||
}
|
||||
.color-bg-info {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
176
public/vendors/giscus/theme-light.css
vendored
Normal file
176
public/vendors/giscus/theme-light.css
vendored
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
/*! MIT License
|
||||
* Copyright (c) 2018 GitHub Inc.
|
||||
* https://github.com/primer/primitives/blob/main/LICENSE
|
||||
*/
|
||||
|
||||
main {
|
||||
/* Custom Theme Colors */
|
||||
--secondary-color: oklch(40% 0.005 298);
|
||||
--secondary-color-25: oklch(40% 0.005 298 / 25%);
|
||||
--background-color: oklch(96% 0.005 298);
|
||||
|
||||
--color-fg-default: var(--secondary-color);
|
||||
--color-canvas-default: var(--background-color);
|
||||
--color-canvas-overlay: var(--background-color);
|
||||
--color-canvas-inset: var(--background-color);
|
||||
--color-canvas-subtle: var(--background-color);
|
||||
--color-accent-fg: oklch(48.8% 0.243 264.376);
|
||||
--color-accent-emphasis: oklch(48.8% 0.243 264.376);
|
||||
|
||||
/* Offical Theme Colors */
|
||||
--color-prettylights-syntax-comment: #6e7781;
|
||||
--color-prettylights-syntax-constant: #0550ae;
|
||||
--color-prettylights-syntax-entity: #8250df;
|
||||
--color-prettylights-syntax-storage-modifier-import: #24292f;
|
||||
--color-prettylights-syntax-entity-tag: #116329;
|
||||
--color-prettylights-syntax-keyword: #cf222e;
|
||||
--color-prettylights-syntax-string: #0a3069;
|
||||
--color-prettylights-syntax-variable: #953800;
|
||||
--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
|
||||
--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
|
||||
--color-prettylights-syntax-invalid-illegal-bg: #82071e;
|
||||
--color-prettylights-syntax-carriage-return-text: #f6f8fa;
|
||||
--color-prettylights-syntax-carriage-return-bg: #cf222e;
|
||||
--color-prettylights-syntax-string-regexp: #116329;
|
||||
--color-prettylights-syntax-markup-list: #3b2300;
|
||||
--color-prettylights-syntax-markup-heading: #0550ae;
|
||||
--color-prettylights-syntax-markup-italic: #24292f;
|
||||
--color-prettylights-syntax-markup-bold: #24292f;
|
||||
--color-prettylights-syntax-markup-deleted-text: #82071e;
|
||||
--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
|
||||
--color-prettylights-syntax-markup-inserted-text: #116329;
|
||||
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
|
||||
--color-prettylights-syntax-markup-changed-text: #953800;
|
||||
--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
|
||||
--color-prettylights-syntax-markup-ignored-text: #eaeef2;
|
||||
--color-prettylights-syntax-markup-ignored-bg: #0550ae;
|
||||
--color-prettylights-syntax-meta-diff-range: #8250df;
|
||||
--color-prettylights-syntax-brackethighlighter-angle: #57606a;
|
||||
--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
|
||||
--color-prettylights-syntax-constant-other-reference-link: #0a3069;
|
||||
--color-btn-text: #24292f;
|
||||
--color-btn-bg: #f6f8fa;
|
||||
--color-btn-border: rgb(31 35 40 / 15%);
|
||||
--color-btn-shadow: 0 1px 0 rgb(31 35 40 / 4%);
|
||||
--color-btn-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
|
||||
--color-btn-hover-bg: #f3f4f6;
|
||||
--color-btn-hover-border: rgb(31 35 40 / 15%);
|
||||
--color-btn-active-bg: hsl(220deg 14% 93% / 100%);
|
||||
--color-btn-active-border: rgb(31 35 40 / 15%);
|
||||
--color-btn-selected-bg: hsl(220deg 14% 94% / 100%);
|
||||
--color-btn-primary-text: #fff;
|
||||
--color-btn-primary-bg: #1f883d;
|
||||
--color-btn-primary-border: rgb(31 35 40 / 15%);
|
||||
--color-btn-primary-shadow: 0 1px 0 rgb(31 35 40 / 10%);
|
||||
--color-btn-primary-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
|
||||
--color-btn-primary-hover-bg: #1a7f37;
|
||||
--color-btn-primary-hover-border: rgb(31 35 40 / 15%);
|
||||
--color-btn-primary-selected-bg: hsl(137deg 66% 28% / 100%);
|
||||
--color-btn-primary-selected-shadow: inset 0 1px 0 rgb(0 45 17 / 20%);
|
||||
--color-btn-primary-disabled-text: rgb(255 255 255 / 80%);
|
||||
--color-btn-primary-disabled-bg: #94d3a2;
|
||||
--color-btn-primary-disabled-border: rgb(31 35 40 / 15%);
|
||||
--color-action-list-item-default-hover-bg: rgb(208 215 222 / 32%);
|
||||
--color-segmented-control-bg: #eaeef2;
|
||||
--color-segmented-control-button-bg: #fff;
|
||||
--color-segmented-control-button-selected-border: #8c959f;
|
||||
/* --color-fg-default: var(--secondary-color); */
|
||||
--color-fg-muted: #656d76;
|
||||
--color-fg-subtle: #6e7781;
|
||||
/* --color-canvas-default: var(--background-color);
|
||||
--color-canvas-overlay: var(--background-color);
|
||||
--color-canvas-inset: var(--background-color);
|
||||
--color-canvas-subtle: var(--background-color); */
|
||||
--color-border-default: #d0d7de;
|
||||
--color-border-muted: hsl(210deg 18% 87% / 100%);
|
||||
--color-neutral-muted: rgb(175 184 193 / 20%);
|
||||
/* --color-accent-fg: oklch(48.8% 0.243 264.376);
|
||||
--color-accent-emphasis: oklch(48.8% 0.243 264.376); */
|
||||
--color-accent-muted: rgb(84 174 255 / 40%);
|
||||
--color-accent-subtle: #ddf4ff;
|
||||
--color-success-fg: #1a7f37;
|
||||
--color-attention-fg: #9a6700;
|
||||
--color-attention-muted: rgb(212 167 44 / 40%);
|
||||
--color-attention-subtle: #fff8c5;
|
||||
--color-danger-fg: #d1242f;
|
||||
--color-danger-muted: rgb(255 129 130 / 40%);
|
||||
--color-danger-subtle: #ffebe9;
|
||||
--color-primer-shadow-inset: inset 0 1px 0 rgb(208 215 222 / 20%);
|
||||
--color-scale-gray-1: #eaeef2;
|
||||
--color-scale-blue-1: #b6e3ff;
|
||||
|
||||
/*! Extensions from @primer/css/alerts/flash.scss */
|
||||
--color-social-reaction-bg-hover: var(--color-scale-gray-1);
|
||||
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
|
||||
}
|
||||
|
||||
main .pagination-loader-container {
|
||||
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
|
||||
}
|
||||
|
||||
main .gsc-loading-image {
|
||||
background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
|
||||
}
|
||||
|
||||
/* Smooth Font */
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* All Border Color */
|
||||
*:not(.BtnGroup-item) {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
|
||||
/* No Giscus Copyright and Avatar Line */
|
||||
.gsc-tl-line,
|
||||
.gsc-left-header em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Comments Count Font No Underline and Small Size */
|
||||
h4.gsc-comments-count-separator,
|
||||
h4.gsc-replies-count {
|
||||
color: var(--secondary-color);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Oldest and Newest Buttons Style */
|
||||
.BtnGroup-item,
|
||||
.BtnGroup-item.BtnGroup-item--selected {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.BtnGroup-item.BtnGroup-item--selected {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
.BtnGroup-item:not(.BtnGroup-item--selected):hover {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
.BtnGroup-item button.btn:hover {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
/* Reply Time No Underline */
|
||||
.gsc-comment-author a:has(time),
|
||||
.gsc-reply-author a:has(time) {
|
||||
text-decoration: none;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Comments Count No Underline */
|
||||
.gsc-comments-count a {
|
||||
text-decoration: none!important;
|
||||
}
|
||||
|
||||
/* Social Reactions Icons */
|
||||
.gsc-social-reaction-summary-item.has-reacted {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.gsc-social-reaction-summary-item.has-reacted:hover {
|
||||
background-color: var(--background-color)!important;
|
||||
border-color: var(--color-accent-fg)!important;
|
||||
}
|
||||
.color-bg-info {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
123
src/components/Comments/Giscus.astro
Normal file
123
src/components/Comments/Giscus.astro
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
---
|
||||
import { defaultLocale, themeConfig } from '@/config'
|
||||
import { giscusLocaleMap } from '@/i18n/config'
|
||||
|
||||
const {
|
||||
repo = '',
|
||||
repoID = '',
|
||||
category = '',
|
||||
categoryID = '',
|
||||
mapping = 'pathname',
|
||||
strict = '0',
|
||||
reactionsEnabled = '1',
|
||||
emitMetadata = '0',
|
||||
inputPosition = 'bottom',
|
||||
} = themeConfig.comment?.giscus ?? {}
|
||||
|
||||
const siteUrl = themeConfig.site.url
|
||||
const shouldRender = Boolean(repo && repoID && categoryID)
|
||||
---
|
||||
|
||||
{shouldRender && (
|
||||
<div
|
||||
id="giscus"
|
||||
class="giscus mt-16"
|
||||
></div>
|
||||
|
||||
<script
|
||||
is:inline
|
||||
define:vars={{
|
||||
repo,
|
||||
repoID,
|
||||
category,
|
||||
categoryID,
|
||||
mapping,
|
||||
strict,
|
||||
reactionsEnabled,
|
||||
emitMetadata,
|
||||
inputPosition,
|
||||
giscusLocaleMap,
|
||||
defaultLocale,
|
||||
siteUrl,
|
||||
}}
|
||||
>
|
||||
function getThemeUrl() {
|
||||
const isDark = document.documentElement.classList.contains('dark')
|
||||
return isDark
|
||||
? `${siteUrl}/vendors/giscus/theme-dark.css`
|
||||
: `${siteUrl}/vendors/giscus/theme-light.css`
|
||||
// For local development
|
||||
// ? `http://localhost:4321/vendors/giscus/theme-dark.css`
|
||||
// : `http://localhost:4321/vendors/giscus/theme-light.css`
|
||||
}
|
||||
|
||||
function setupGiscus() {
|
||||
const giscusContainer = document.getElementById('giscus')
|
||||
if (!giscusContainer)
|
||||
return
|
||||
|
||||
giscusContainer.innerHTML = ''
|
||||
|
||||
const currentPath = window.location.pathname
|
||||
const pathLang = Object.keys(giscusLocaleMap).find(code =>
|
||||
currentPath.startsWith(`/${code}/`),
|
||||
)
|
||||
const lang = pathLang || defaultLocale
|
||||
const currentGiscusLang = giscusLocaleMap[lang]
|
||||
|
||||
const script = document.createElement('script')
|
||||
script.src = 'https://giscus.app/client.js'
|
||||
script.crossOrigin = 'anonymous'
|
||||
script.async = true
|
||||
|
||||
// Set up basic attributes
|
||||
const dataAttributes = {
|
||||
repo,
|
||||
repoId: repoID,
|
||||
category: undefined,
|
||||
categoryId: categoryID,
|
||||
mapping,
|
||||
strict,
|
||||
reactionsEnabled,
|
||||
emitMetadata,
|
||||
inputPosition,
|
||||
theme: getThemeUrl(),
|
||||
lang: currentGiscusLang,
|
||||
}
|
||||
|
||||
// Add category conditionally
|
||||
if (category)
|
||||
dataAttributes.category = category
|
||||
|
||||
// Apply all attributes
|
||||
Object.assign(script.dataset, dataAttributes)
|
||||
|
||||
try {
|
||||
giscusContainer.appendChild(script)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to setup Giscus:', error)
|
||||
}
|
||||
}
|
||||
|
||||
function updateGiscusTheme() {
|
||||
const iframe = document.querySelector('.giscus-frame')
|
||||
if (!iframe || !iframe.contentWindow)
|
||||
return
|
||||
|
||||
try {
|
||||
iframe.contentWindow.postMessage(
|
||||
{ giscus: { setConfig: { theme: getThemeUrl() } } },
|
||||
'https://giscus.app',
|
||||
)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to update Giscus theme:', error)
|
||||
}
|
||||
}
|
||||
|
||||
setupGiscus()
|
||||
document.addEventListener('astro:page-load', setupGiscus)
|
||||
document.addEventListener('theme-changed', updateGiscusTheme)
|
||||
</script>
|
||||
)}
|
||||
|
|
@ -2,7 +2,14 @@
|
|||
import { defaultLocale, themeConfig } from '@/config'
|
||||
import { walineLocaleMap } from '@/i18n/config'
|
||||
|
||||
const { waline: { serverURL = '', emoji = [], search = false, imageUploader = false } = {} } = themeConfig.comment ?? {}
|
||||
const {
|
||||
waline: {
|
||||
serverURL = '',
|
||||
emoji = [],
|
||||
search = false,
|
||||
imageUploader = false,
|
||||
} = {},
|
||||
} = themeConfig.comment ?? {}
|
||||
---
|
||||
|
||||
<div
|
||||
|
|
@ -25,7 +32,7 @@ const { waline: { serverURL = '', emoji = [], search = false, imageUploader = fa
|
|||
>
|
||||
import { init } from '/vendors/waline/waline.js'
|
||||
|
||||
function initWaline() {
|
||||
function setupWaline() {
|
||||
const currentPath = window.location.pathname
|
||||
const pathLang = Object.keys(walineLocaleMap).find(code =>
|
||||
currentPath.startsWith(`/${code}/`),
|
||||
|
|
@ -50,8 +57,8 @@ function initWaline() {
|
|||
})
|
||||
}
|
||||
|
||||
initWaline()
|
||||
document.addEventListener('astro:page-load', initWaline)
|
||||
setupWaline()
|
||||
document.addEventListener('astro:page-load', setupWaline)
|
||||
</script>
|
||||
|
||||
<!-- Custom CSS Styles >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// import Disqus from '@/components/Comments/Disqus.astro'
|
||||
// import Giscus from '@/components/Comments/Giscus.astro'
|
||||
import Giscus from '@/components/Comments/Giscus.astro'
|
||||
// import Twikoo from '@/components/Comments/Twikoo.astro'
|
||||
import Waline from '@/components/Comments/Waline.astro'
|
||||
import { themeConfig } from '@/config'
|
||||
|
|
@ -12,8 +12,8 @@ const enableComments = themeConfig.comment?.enabled ?? false
|
|||
// const showDisqus = enableComments && disqusShortname.trim() !== ''
|
||||
|
||||
// Giscus
|
||||
// const giscusRepo = themeConfig.comment?.giscus?.repo || ''
|
||||
// const showGiscus = enableComments && giscusRepo.trim() !== ''
|
||||
const giscusRepo = themeConfig.comment?.giscus?.repo || ''
|
||||
const showGiscus = enableComments && giscusRepo.trim() !== ''
|
||||
|
||||
// Twikoo
|
||||
// const twikooEnvId = themeConfig.comment?.twikoo?.envId || ''
|
||||
|
|
@ -25,6 +25,6 @@ const showWaline = enableComments && walineURL.trim() !== ''
|
|||
---
|
||||
|
||||
<!-- {showDisqus && <Disqus />} -->
|
||||
<!-- {showGiscus && <Giscus />} -->
|
||||
{showGiscus && <Giscus />}
|
||||
<!-- {showTwikoo && <Twikoo />} -->
|
||||
{showWaline && <Waline />}
|
||||
|
|
|
|||
|
|
@ -71,11 +71,11 @@ export const themeConfig: ThemeConfig = {
|
|||
comment: {
|
||||
// enable comment system
|
||||
enabled: true, // true, false
|
||||
// waline comment system
|
||||
// waline
|
||||
// https://waline.js.org/en/
|
||||
waline: {
|
||||
// server url
|
||||
serverURL: 'https://retypeset-comment.radishzz.cc',
|
||||
serverURL: '',
|
||||
// emoji url
|
||||
emoji: [
|
||||
'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji',
|
||||
|
|
@ -87,6 +87,19 @@ export const themeConfig: ThemeConfig = {
|
|||
// image uploader
|
||||
imageUploader: false, // true, false
|
||||
},
|
||||
// giscus
|
||||
// https://giscus.app/
|
||||
giscus: {
|
||||
repo: 'radishzzz/comment-giscus',
|
||||
repoID: 'R_kgDOOy1K0w',
|
||||
category: 'Announcements',
|
||||
categoryID: 'DIC_kwDOOy1K084CqwuZ',
|
||||
mapping: 'pathname',
|
||||
strict: '0',
|
||||
reactionsEnabled: '1',
|
||||
emitMetadata: '0',
|
||||
inputPosition: 'bottom',
|
||||
},
|
||||
},
|
||||
// COMMENT SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
|
||||
|
||||
|
|
|
|||
|
|
@ -29,5 +29,21 @@ export const walineLocaleMap: Record<string, string> = {
|
|||
'zh-tw': 'zh-TW',
|
||||
}
|
||||
|
||||
// Giscus Language Map
|
||||
// https://giscus.app/
|
||||
export const giscusLocaleMap: Record<string, string> = {
|
||||
'de': 'de',
|
||||
'en': 'en',
|
||||
'es': 'es',
|
||||
'fr': 'fr',
|
||||
'ja': 'ja',
|
||||
'ko': 'ko',
|
||||
'pl': 'pl',
|
||||
'pt': 'pt',
|
||||
'ru': 'ru',
|
||||
'zh': 'zh-CN',
|
||||
'zh-tw': 'zh-TW',
|
||||
}
|
||||
|
||||
// Supported Languages
|
||||
export const supportedLangs = Object.keys(langMap).flat()
|
||||
|
|
|
|||
11
src/types/index.d.ts
vendored
11
src/types/index.d.ts
vendored
|
|
@ -46,6 +46,17 @@ export interface ThemeConfig {
|
|||
search?: boolean
|
||||
imageUploader?: boolean
|
||||
}
|
||||
giscus?: {
|
||||
repo?: string
|
||||
repoID?: string
|
||||
category?: string
|
||||
categoryID?: string
|
||||
mapping?: 'pathname' | 'url' | 'title' | 'og:title'
|
||||
strict?: '0' | '1'
|
||||
reactionsEnabled?: '0' | '1'
|
||||
emitMetadata?: '0' | '1'
|
||||
inputPosition?: 'top' | 'bottom'
|
||||
}
|
||||
}
|
||||
|
||||
seo?: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue