1
---
2
import type { CollectionEntry } from 'astro:content'
3
import { commentConfig } from '@/config'
4
import Twikoo from './Twikoo.astro'
5

6
interface Props {
7
  post: CollectionEntry<'posts'>
8
}
9

10
const { slug } = Astro.props.post
11
const path = `/posts/${slug}`
12
const url = `${Astro.site?.href}${path}`
13

14
let commentService = ''
15
if (commentConfig?.twikoo) {
16
  commentService = 'twikoo'
17
}
18
---
19

20
<div class="card-base p-6 mb-4 text-black dark:text-white">
21
  {commentService === 'twikoo' && <Twikoo path={path} />}
22
</div>

1
---
2
import { commentConfig } from '@/config'
3

4
interface Props {
5
  path: string
6
}
7

8
const config = {
9
  ...commentConfig.twikoo,
10
  el: '#tcomment',
11
  path: Astro.props.path,
12
}
13
---
14

15
<div id="tcomment"></div>
16

17
<script is:inline define:vars={{ config }}>
18
  window.__twikooConfig = config;
19
</script>
20

21
<script
22
  is:inline
23
  src="https://api.kekesxk.online/public/js/twikoo.all.min.js"
24
  onload="twikoo.init(window.__twikooConfig)"
25
></script>

1
export type CommentConfig = {
2
  twikoo?: TwikooConfig
3
}
4

5
type TwikooConfig = {
6
  envId: string
7
  region?: string
8
  lang?: string
9
}

1
import type {
2
  LicenseConfig,
3
  NavBarConfig,
4
  ProfileConfig,
5
  SiteConfig,
6
  CommentConfig,
7
} from './types/config'

1
import Comment from "@components/comment/index.astro"

1
<Comment post={entry}></Comment>

1
:root {
2
    --tk-text: black;
3
    --tk-border: rgba(144,147,153,0.2);
4
    --tk-border-hover: rgba(144,147,153,0.4);
5
    --tk-bg-light: #f9fafb;
6
}
7

8
html.dark {
9
    --tk-text: #d1d5db;
10
}
11

12
.tk-comments {
13
    @apply text-[var(--tk-text)];
14
}
15

16
.tk-submit {
17
    .tk-avatar {
18
        @apply hidden transition-opacity duration-300;
19
    }
20
}
21

22
/* Text Area */
23
.tk-row {
24
    .tk-col {
25
        @apply flex-col-reverse;
26
        .tk-input {
27
            textarea {
28
                @apply rounded-[var(--radius-large)] py-4 px-6 !min-h-[150px] focus:border-[var(--primary)] focus:shadow-md transition-all;
29
            }
30
        }
31
    }
32
}
33

34
.el-input {
35
    @apply !rounded-lg;
36
}
37

38
.tk-meta-input {
39
    @apply min-h-10 relative mt-3;
40
    .el-input-group__prepend {
41
        @apply !bg-inherit;
42
    }
43
    div {
44
        @apply py-1 rounded-l-lg;
45
        min-height: inherit;
46
    }
47
    input {
48
        @apply px-4 rounded-r-lg focus:!border-[var(--primary)];
49
        min-height: inherit;
50
    }
51
}
52

53
/* Button */
54
.tk-row.actions {
55
    @apply w-full !ml-0 !mt-0;
56
    .__markdown {
57
        @apply !hidden;
58
    }
59
    .tk-preview,
60
    .tk-send,
61
    .tk-cancel {
62
        @apply border-none rounded-lg px-3 py-0 h-8
63
        !bg-[var(--btn-regular-bg-active)] disabled:!bg-[var(--btn-regular-bg)]
64
        !text-[var(--btn-content)] disabled:!text-[#ffffffa1]
65
        hover:opacity-90 active:scale-95 transition-all duration-200;
66
    }
67
}
68

69
/* Comment title */
70
.tk-comments-title {
71
    .__comments svg {
72
        @apply fill-[var(--primary)];
73
    }
74
}
75

76
.tk-comment {
77
    @apply border rounded-2xl p-4 shadow-sm hover:shadow-md transition-shadow duration-200 bg-[var(--tk-bg-light)] dark:bg-[var(--page-bg)];
78
    border-color: var(--tk-border);
79
    .tk-action-icon svg {
80
        @apply fill-[var(--primary)];
81
    }
82
}
83

84
.tk-action {
85
    .tk-action-count {
86
        @apply text-[var(--btn-content)];
87
    }
88
}
89

90
.tk-meta {
91
    .tk-tag {
92
        @apply border-none rounded-lg text-[var(--btn-content)];
93
    }
94

95
    .tk-tag-green {
96
        @apply bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)] dark:text-[var(--deep-text)];
97
    }
98
}
99

100
.tk-content,
101
.tk-preview-container {
102
    a {
103
        @apply link underline underline-offset-4 decoration-[1.5px] hover:opacity-80 transition-opacity text-[var(--primary)] font-medium;
104
    }
105

106
    .tk-ruser {
107
        @apply no-underline;
108
    }
109

110
    :not(pre) > code {
111
        @apply bg-[var(--inline-code-bg)] rounded-md text-[--inline-code-color] px-1 py-0.5 font-semibold;
112
    }
113

114
    li{
115
        @apply before:content-['•'] before:text-[var(--primary)];
116
    }
117
}
118

119
/* Replies */
120
.tk-replies {
121
    .tk-comment {
122
        @apply bg-[var(--tk-bg-light)] dark:bg-[var(--page-bg)] border border-[var(--tk-border)];
123
        .tk-content {
124
            > span:first-of-type {
125
                @apply text-xs;
126
            }
127
        }
128
    }
129
}
130

131
.twikoo .code-block {
132
    pre {
133
        @apply !rounded-xl shadow-inner bg-[var(--page-bg)] text-sm;
134
    }
135

136
    .copy-btn-icon {
137
        width: inherit !important;
138
        height: inherit !important;
139
    }
140
}
141

142
.tk-expand-wrap .tk-expand,
143
.tk-collapse-wrap .tk-expand {
144
    @apply hover:rounded-lg mt-1 hover:bg-[var(--btn-plain-bg-hover)] transition-all duration-200;
145
}