xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 16:51:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add comment line

Browse Source
This commit is contained in:
DefectingCat
2022-04-21 15:30:17 +08:00
parent 250869f0b4
commit 03c7daee36
4 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/mdx/Image.module.css
View File

@ -1,6 +1,7 @@
.imageContainer {
width: 100%;
padding: 10px 0;
position: relative;
}
.imageContainer > span {

19
components/post/PostComment.tsx
View File

@ -2,6 +2,7 @@ import { FC } from 'react';
import Giscus from '@giscus/react';
import { useTheme } from 'next-themes';
import useInView from 'lib/hooks/useInView';
import Image from 'next/image';
const PostComment: FC = () => {
const { systemTheme, theme } = useTheme();
@ -11,7 +12,23 @@ const PostComment: FC = () => {
return (
<>
<div className="my-4"></div>
<div className="text-center">
{currentTheme === 'dark' ? (
<Image
src="/images/img/comment-line-dark.svg"
width={300}
height={150}
alt=""
/>
) : (
<Image
src="/images/img/comment-line.svg"
width={300}
height={150}
alt=""
/>
)}
</div>
<div className="mt-4" ref={ref}>
{inView && (

12
public/images/img/comment-line-dark.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 400">
<path
d="M-0.597907304763794,263.6771240234375C1.6442451079686484,257.3990987141927,5.5306423107783,226.158447265625,12.85500717163086,226.00897216796875C20.179372032483418,225.8594970703125,34.379672368367515,263.0792287190755,43.34828186035156,262.7802734375C52.31689135233561,262.4813181559245,59.49177678426107,225.26158142089844,66.66666412353516,224.21524047851562C73.84155146280925,223.1688995361328,76.23318099975586,254.85798136393228,86.3976058959961,256.5022277832031C96.56203079223633,258.14647420247394,116.29297510782878,234.08071899414062,127.65321350097656,234.08071899414062C139.01345189412436,234.08071899414062,144.8430430094401,257.24961344401044,154.5590362548828,256.5022277832031C164.27502950032553,255.75484212239584,176.68160756429037,229.89535522460938,185.9491729736328,229.59640502929688C195.21673838297525,229.29745483398438,202.54110972086588,254.55904897054037,210.1644287109375,254.70852661132812C217.78774770100912,254.85800425211588,223.3183848063151,230.49327087402344,231.6890869140625,230.49327087402344C240.0597890218099,230.49327087402344,250.5231679280599,255.75486501057944,260.3886413574219,254.70852661132812C270.2541147867839,253.6621882120768,280.7175038655599,224.81314849853516,290.8819274902344,224.21524047851562C301.0463511149089,223.6173324584961,310.01494852701825,251.12107849121094,321.37518310546875,251.12107849121094C332.73541768391925,251.12107849121094,346.78623453776044,224.06576283772787,359.0433349609375,224.21524047851562C371.30043538411456,224.36471811930338,381.9132995605469,252.16741943359375,394.91778564453125,252.0179443359375C407.9222717285156,251.86846923828125,424.96262613932294,223.31838989257812,437.07025146484375,223.31838989257812C449.17787679036456,223.31838989257812,457.2496337890625,251.7189915974935,467.56353759765625,252.0179443359375C477.87744140625,252.3168970743815,487.5934346516927,224.6636759440104,498.95367431640625,225.1121063232422C510.3139139811198,225.56053670247397,526.6068929036459,255.00747934977213,535.7249755859375,254.70852661132812C544.8430582682291,254.40957387288412,546.9357198079427,223.61734517415366,553.6621704101562,223.31838989257812C560.3886210123698,223.0194346110026,567.1150716145834,253.36322530110678,576.0836791992188,252.914794921875C585.0522867838541,252.46636454264322,598.0567728678385,221.22571563720703,607.4738159179688,220.6278076171875C616.890858968099,220.02989959716797,621.2256978352865,248.13153330485025,632.5859375,249.3273468017578C643.9461771647135,250.52316029866537,666.8161214192709,228.40059407552084,675.63525390625,227.8026885986328C684.4543863932291,227.20478312174478,676.5321146647135,246.33782196044922,685.500732421875,245.7399139404297C694.4693501790365,245.14200592041016,718.2361958821615,223.46785736083984,729.4469604492188,224.21524047851562C740.657725016276,224.9626235961914,742.7503763834635,249.32735188802084,752.7653198242188,250.22421264648438C762.780263264974,251.1210734049479,783.4080708821615,233.03437296549478,789.53662109375,229.59640502929688"
fill="none" stroke-width="8" stroke="url(&quot;#SvgjsLinearGradient1003&quot;)" stroke-linecap="round"
transform="matrix(1,0,0,1,5.530646562576294,-42.14776611328125)"></path>
<defs>
<linearGradient id="SvgjsLinearGradient1003" gradientTransform="rotate(0, 0.5, 0.5)">
<stop stop-color="hsl(1.4, 100%, 67%)" offset="0"></stop>
<stop stop-color="hsl(167, 52%, 78%)" offset="1"></stop>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

12
public/images/img/comment-line.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 400">
<path
d="M-0.597907304763794,263.6771240234375C1.6442451079686484,257.3990987141927,5.5306423107783,226.158447265625,12.85500717163086,226.00897216796875C20.179372032483418,225.8594970703125,34.379672368367515,263.0792287190755,43.34828186035156,262.7802734375C52.31689135233561,262.4813181559245,59.49177678426107,225.26158142089844,66.66666412353516,224.21524047851562C73.84155146280925,223.1688995361328,76.23318099975586,254.85798136393228,86.3976058959961,256.5022277832031C96.56203079223633,258.14647420247394,116.29297510782878,234.08071899414062,127.65321350097656,234.08071899414062C139.01345189412436,234.08071899414062,144.8430430094401,257.24961344401044,154.5590362548828,256.5022277832031C164.27502950032553,255.75484212239584,176.68160756429037,229.89535522460938,185.9491729736328,229.59640502929688C195.21673838297525,229.29745483398438,202.54110972086588,254.55904897054037,210.1644287109375,254.70852661132812C217.78774770100912,254.85800425211588,223.3183848063151,230.49327087402344,231.6890869140625,230.49327087402344C240.0597890218099,230.49327087402344,250.5231679280599,255.75486501057944,260.3886413574219,254.70852661132812C270.2541147867839,253.6621882120768,280.7175038655599,224.81314849853516,290.8819274902344,224.21524047851562C301.0463511149089,223.6173324584961,310.01494852701825,251.12107849121094,321.37518310546875,251.12107849121094C332.73541768391925,251.12107849121094,346.78623453776044,224.06576283772787,359.0433349609375,224.21524047851562C371.30043538411456,224.36471811930338,381.9132995605469,252.16741943359375,394.91778564453125,252.0179443359375C407.9222717285156,251.86846923828125,424.96262613932294,223.31838989257812,437.07025146484375,223.31838989257812C449.17787679036456,223.31838989257812,457.2496337890625,251.7189915974935,467.56353759765625,252.0179443359375C477.87744140625,252.3168970743815,487.5934346516927,224.6636759440104,498.95367431640625,225.1121063232422C510.3139139811198,225.56053670247397,526.6068929036459,255.00747934977213,535.7249755859375,254.70852661132812C544.8430582682291,254.40957387288412,546.9357198079427,223.61734517415366,553.6621704101562,223.31838989257812C560.3886210123698,223.0194346110026,567.1150716145834,253.36322530110678,576.0836791992188,252.914794921875C585.0522867838541,252.46636454264322,598.0567728678385,221.22571563720703,607.4738159179688,220.6278076171875C616.890858968099,220.02989959716797,621.2256978352865,248.13153330485025,632.5859375,249.3273468017578C643.9461771647135,250.52316029866537,666.8161214192709,228.40059407552084,675.63525390625,227.8026885986328C684.4543863932291,227.20478312174478,676.5321146647135,246.33782196044922,685.500732421875,245.7399139404297C694.4693501790365,245.14200592041016,718.2361958821615,223.46785736083984,729.4469604492188,224.21524047851562C740.657725016276,224.9626235961914,742.7503763834635,249.32735188802084,752.7653198242188,250.22421264648438C762.780263264974,251.1210734049479,783.4080708821615,233.03437296549478,789.53662109375,229.59640502929688"
fill="none" stroke-width="8" stroke="url(&quot;#SvgjsLinearGradient1003&quot;)" stroke-linecap="round"
transform="matrix(1,0,0,1,5.530646562576294,-42.14776611328125)"></path>
<defs>
<linearGradient id="SvgjsLinearGradient1003" gradientTransform="rotate(0, 0.5, 0.5)">
<stop stop-color="hsl(184, 74%, 44%)" offset="0"></stop>
<stop stop-color="hsl(332, 87%, 70%)" offset="1"></stop>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB