Ivan/tailwind-nextjs-blog
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

style: auto fix.

Browse Source
This commit is contained in:
Ivan Li
2022-10-17 15:37:01 +00:00
parent 10f64a9ba4
commit c081d55a32
68 changed files with 1403 additions and 1114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/comments/Commento.tsx
View File

@ -1,30 +1,33 @@
import React, { useMemo, useState } from 'react'
import React, { useMemo, useState } from 'react';
import siteMetadata from '@/data/siteMetadata'
import { PostFrontMatter } from 'types/PostFrontMatter'
import { useTheme } from 'next-themes'
import ReactCommento from './commento/ReactCommento'
import siteMetadata from '@/data/siteMetadata';
import { PostFrontMatter } from 'types/PostFrontMatter';
import { useTheme } from 'next-themes';
import ReactCommento from './commento/ReactCommento';
interface Props {
frontMatter: PostFrontMatter
frontMatter: PostFrontMatter;
}
const Commento = ({ frontMatter }: Props) => {
const { resolvedTheme } = useTheme()
const { resolvedTheme } = useTheme();
const commentsTheme = useMemo(() => {
switch (resolvedTheme) {
case 'light':
case 'dark':
return resolvedTheme
return resolvedTheme;
default:
return 'auto'
return 'auto';
}
}, [resolvedTheme])
}, [resolvedTheme]);
return (
<div className="my-2">
<ReactCommento url={siteMetadata.comment.commentoConfig.url} pageId={frontMatter.slug} />
<ReactCommento
url={siteMetadata.comment.commentoConfig.url}
pageId={frontMatter.slug}
/>
</div>
)
}
);
};
export default Commento
export default Commento;

26
components/comments/Cusdis.tsx
View File

@ -1,25 +1,25 @@
import React, { useMemo, useState } from 'react'
import React, { useMemo, useState } from 'react';
import siteMetadata from '@/data/siteMetadata'
import { PostFrontMatter } from 'types/PostFrontMatter'
import { ReactCusdis } from 'react-cusdis'
import { useTheme } from 'next-themes'
import siteMetadata from '@/data/siteMetadata';
import { PostFrontMatter } from 'types/PostFrontMatter';
import { ReactCusdis } from 'react-cusdis';
import { useTheme } from 'next-themes';
interface Props {
frontMatter: PostFrontMatter
frontMatter: PostFrontMatter;
}
const Cusdis = ({ frontMatter }: Props) => {
const { resolvedTheme } = useTheme()
const { resolvedTheme } = useTheme();
const commentsTheme = useMemo(() => {
switch (resolvedTheme) {
case 'light':
case 'dark':
return resolvedTheme
return resolvedTheme;
default:
return 'auto'
return 'auto';
}
}, [resolvedTheme])
}, [resolvedTheme]);
return (
<div className="my-2">
<ReactCusdis
@ -35,7 +35,7 @@ const Cusdis = ({ frontMatter }: Props) => {
}}
/>
</div>
)
}
);
};
export default Cusdis
export default Cusdis;

47
components/comments/Disqus.tsx
View File

@ -1,46 +1,51 @@
import React, { useState } from 'react'
import React, { useState } from 'react';
import siteMetadata from '@/data/siteMetadata'
import { PostFrontMatter } from 'types/PostFrontMatter'
import siteMetadata from '@/data/siteMetadata';
import { PostFrontMatter } from 'types/PostFrontMatter';
interface Props {
frontMatter: PostFrontMatter
frontMatter: PostFrontMatter;
}
const Disqus = ({ frontMatter }: Props) => {
const [enableLoadComments, setEnabledLoadComments] = useState(true)
const [enableLoadComments, setEnabledLoadComments] = useState(true);
const COMMENTS_ID = 'disqus_thread'
const COMMENTS_ID = 'disqus_thread';
function LoadComments() {
setEnabledLoadComments(false)
setEnabledLoadComments(false);
// @ts-ignore
window.disqus_config = function () {
this.page.url = window.location.href
this.page.identifier = frontMatter.slug
}
this.page.url = window.location.href;
this.page.identifier = frontMatter.slug;
};
// @ts-ignore
if (window.DISQUS === undefined) {
const script = document.createElement('script')
script.src = 'https://' + siteMetadata.comment.disqusConfig.shortname + '.disqus.com/embed.js'
const script = document.createElement('script');
script.src =
'https://' +
siteMetadata.comment.disqusConfig.shortname +
'.disqus.com/embed.js';
// @ts-ignore
script.setAttribute('data-timestamp', +new Date())
script.setAttribute('crossorigin', 'anonymous')
script.async = true
document.body.appendChild(script)
script.setAttribute('data-timestamp', +new Date());
script.setAttribute('crossorigin', 'anonymous');
script.async = true;
document.body.appendChild(script);
} else {
// @ts-ignore
window.DISQUS.reset({ reload: true })
window.DISQUS.reset({ reload: true });
}
}
return (
<div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300">
{enableLoadComments && <button onClick={LoadComments}>Load Comments</button>}
{enableLoadComments && (
<button onClick={LoadComments}>Load Comments</button>
)}
<div className="disqus-frame" id={COMMENTS_ID} />
</div>
)
}
);
};
export default Disqus
export default Disqus;

87
components/comments/Giscus.tsx
View File

@ -1,61 +1,78 @@
import React, { useState, useEffect, useCallback } from 'react'
import { useTheme } from 'next-themes'
import React, { useState, useEffect, useCallback } from 'react';
import { useTheme } from 'next-themes';
import siteMetadata from '@/data/siteMetadata'
import siteMetadata from '@/data/siteMetadata';
interface Props {
mapping: string
mapping: string;
}
const Giscus = ({ mapping }: Props) => {
const [enableLoadComments, setEnabledLoadComments] = useState(true)
const { theme, resolvedTheme } = useTheme()
const [enableLoadComments, setEnabledLoadComments] = useState(true);
const { theme, resolvedTheme } = useTheme();
const commentsTheme =
siteMetadata.comment.giscusConfig.themeURL === ''
? theme === 'dark' || resolvedTheme === 'dark'
? siteMetadata.comment.giscusConfig.darkTheme
: siteMetadata.comment.giscusConfig.theme
: siteMetadata.comment.giscusConfig.themeURL
: siteMetadata.comment.giscusConfig.themeURL;
const COMMENTS_ID = 'comments-container'
const COMMENTS_ID = 'comments-container';
const LoadComments = useCallback(() => {
setEnabledLoadComments(false)
const script = document.createElement('script')
script.src = 'https://giscus.app/client.js'
script.setAttribute('data-repo', siteMetadata.comment.giscusConfig.repo)
script.setAttribute('data-repo-id', siteMetadata.comment.giscusConfig.repositoryId)
script.setAttribute('data-category', siteMetadata.comment.giscusConfig.category)
script.setAttribute('data-category-id', siteMetadata.comment.giscusConfig.categoryId)
script.setAttribute('data-mapping', mapping)
script.setAttribute('data-reactions-enabled', siteMetadata.comment.giscusConfig.reactions)
script.setAttribute('data-emit-metadata', siteMetadata.comment.giscusConfig.metadata)
script.setAttribute('data-theme', commentsTheme)
script.setAttribute('crossorigin', 'anonymous')
script.async = true
setEnabledLoadComments(false);
const script = document.createElement('script');
script.src = 'https://giscus.app/client.js';
script.setAttribute('data-repo', siteMetadata.comment.giscusConfig.repo);
script.setAttribute(
'data-repo-id',
siteMetadata.comment.giscusConfig.repositoryId
);
script.setAttribute(
'data-category',
siteMetadata.comment.giscusConfig.category
);
script.setAttribute(
'data-category-id',
siteMetadata.comment.giscusConfig.categoryId
);
script.setAttribute('data-mapping', mapping);
script.setAttribute(
'data-reactions-enabled',
siteMetadata.comment.giscusConfig.reactions
);
script.setAttribute(
'data-emit-metadata',
siteMetadata.comment.giscusConfig.metadata
);
script.setAttribute('data-theme', commentsTheme);
script.setAttribute('crossorigin', 'anonymous');
script.async = true;
const comments = document.getElementById(COMMENTS_ID)
if (comments) comments.appendChild(script)
const comments = document.getElementById(COMMENTS_ID);
if (comments) comments.appendChild(script);
return () => {
const comments = document.getElementById(COMMENTS_ID)
if (comments) comments.innerHTML = ''
}
}, [commentsTheme, mapping])
const comments = document.getElementById(COMMENTS_ID);
if (comments) comments.innerHTML = '';
};
}, [commentsTheme, mapping]);
// Reload on theme change
useEffect(() => {
const iframe = document.querySelector('iframe.giscus-frame')
if (!iframe) return
LoadComments()
}, [LoadComments])
const iframe = document.querySelector('iframe.giscus-frame');
if (!iframe) return;
LoadComments();
}, [LoadComments]);
return (
<div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300">
{enableLoadComments && <button onClick={LoadComments}>Load Comments</button>}
{enableLoadComments && (
<button onClick={LoadComments}>Load Comments</button>
)}
<div className="giscus" id={COMMENTS_ID} />
</div>
)
}
);
};
export default Giscus
export default Giscus;

64
components/comments/Utterances.tsx
View File

@ -1,56 +1,58 @@
import React, { useState, useEffect, useCallback } from 'react'
import { useTheme } from 'next-themes'
import React, { useState, useEffect, useCallback } from 'react';
import { useTheme } from 'next-themes';
import siteMetadata from '@/data/siteMetadata'
import siteMetadata from '@/data/siteMetadata';
interface Props {
issueTerm: string
issueTerm: string;
}
const Utterances = ({ issueTerm }: Props) => {
const [enableLoadComments, setEnabledLoadComments] = useState(true)
const { theme, resolvedTheme } = useTheme()
const [enableLoadComments, setEnabledLoadComments] = useState(true);
const { theme, resolvedTheme } = useTheme();
const commentsTheme =
theme === 'dark' || resolvedTheme === 'dark'
? siteMetadata.comment.utterancesConfig.darkTheme
: siteMetadata.comment.utterancesConfig.theme
: siteMetadata.comment.utterancesConfig.theme;
const COMMENTS_ID = 'comments-container'
const COMMENTS_ID = 'comments-container';
const LoadComments = useCallback(() => {
setEnabledLoadComments(false)
const script = document.createElement('script')
script.src = 'https://utteranc.es/client.js'
script.setAttribute('repo', siteMetadata.comment.utterancesConfig.repo)
script.setAttribute('issue-term', issueTerm)
script.setAttribute('label', siteMetadata.comment.utterancesConfig.label)
script.setAttribute('theme', commentsTheme)
script.setAttribute('crossorigin', 'anonymous')
script.async = true
setEnabledLoadComments(false);
const script = document.createElement('script');
script.src = 'https://utteranc.es/client.js';
script.setAttribute('repo', siteMetadata.comment.utterancesConfig.repo);
script.setAttribute('issue-term', issueTerm);
script.setAttribute('label', siteMetadata.comment.utterancesConfig.label);
script.setAttribute('theme', commentsTheme);
script.setAttribute('crossorigin', 'anonymous');
script.async = true;
const comments = document.getElementById(COMMENTS_ID)
if (comments) comments.appendChild(script)
const comments = document.getElementById(COMMENTS_ID);
if (comments) comments.appendChild(script);
return () => {
const comments = document.getElementById(COMMENTS_ID)
if (comments) comments.innerHTML = ''
}
}, [commentsTheme, issueTerm])
const comments = document.getElementById(COMMENTS_ID);
if (comments) comments.innerHTML = '';
};
}, [commentsTheme, issueTerm]);
// Reload on theme change
useEffect(() => {
const iframe = document.querySelector('iframe.utterances-frame')
if (!iframe) return
LoadComments()
}, [LoadComments])
const iframe = document.querySelector('iframe.utterances-frame');
if (!iframe) return;
LoadComments();
}, [LoadComments]);
// Added `relative` to fix a weird bug with `utterances-frame` position
return (
<div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300">
{enableLoadComments && <button onClick={LoadComments}>Load Comments</button>}
{enableLoadComments && (
<button onClick={LoadComments}>Load Comments</button>
)}
<div className="utterances-frame relative" id={COMMENTS_ID} />
</div>
)
}
);
};
export default Utterances
export default Utterances;

76
components/comments/commento/ReactCommento.tsx
View File

@ -1,8 +1,8 @@
import { createRef } from 'preact'
import React, { useLayoutEffect, useMemo, useRef } from 'react'
import { createRef } from 'preact';
import React, { useLayoutEffect, useMemo, useRef } from 'react';
interface DataAttributes {
[key: string]: string | boolean | undefined
[key: string]: string | boolean | undefined;
}
const insertScript = (
@ -11,28 +11,28 @@ const insertScript = (
dataAttributes: DataAttributes,
onload = () => {}
) => {
const script = window.document.createElement('script')
script.async = true
script.src = src
script.id = id
const script = window.document.createElement('script');
script.async = true;
script.src = src;
script.id = id;
if (document.getElementById(id)) {
return
return;
}
script.addEventListener('load', onload, { capture: true, once: true })
script.addEventListener('load', onload, { capture: true, once: true });
Object.entries(dataAttributes).forEach(([key, value]) => {
if (value === undefined) {
return
return;
}
script.setAttribute(`data-${key}`, value.toString())
})
script.setAttribute(`data-${key}`, value.toString());
});
document.body.appendChild(script)
document.body.appendChild(script);
return () => {
script.remove()
}
}
script.remove();
};
};
const ReactCommento = ({
url,
@ -42,22 +42,25 @@ const ReactCommento = ({
hideDeleted,
pageId,
}: {
url: string
cssOverride?: string
autoInit?: boolean
noFonts?: boolean
hideDeleted?: boolean
pageId?: string
url: string;
cssOverride?: string;
autoInit?: boolean;
noFonts?: boolean;
hideDeleted?: boolean;
pageId?: string;
}) => {
const containerId = useMemo(() => `commento-${Math.random().toString().slice(2, 8)}`, [])
const container = createRef<HTMLDivElement>()
const containerId = useMemo(
() => `commento-${Math.random().toString().slice(2, 8)}`,
[]
);
const container = createRef<HTMLDivElement>();
useLayoutEffect(() => {
if (!window) {
return
return;
}
window['commento'] = container.current
window['commento'] = container.current;
const removeScript = insertScript(
url,
@ -71,11 +74,20 @@ const ReactCommento = ({
'id-root': containerId,
},
() => {
removeScript()
removeScript();
}
)
}, [autoInit, cssOverride, hideDeleted, noFonts, pageId, url, containerId, container])
);
}, [
autoInit,
cssOverride,
hideDeleted,
noFonts,
pageId,
url,
containerId,
container,
]);
return <div ref={container} id={containerId} />
}
export default ReactCommento
return <div ref={container} id={containerId} />;
};
export default ReactCommento;

57
components/comments/index.tsx
View File

@ -1,68 +1,69 @@
import React from 'react'
import React from 'react';
import siteMetadata from '@/data/siteMetadata'
import dynamic from 'next/dynamic'
import { PostFrontMatter } from 'types/PostFrontMatter'
import siteMetadata from '@/data/siteMetadata';
import dynamic from 'next/dynamic';
import { PostFrontMatter } from 'types/PostFrontMatter';
interface Props {
frontMatter: PostFrontMatter
frontMatter: PostFrontMatter;
}
const UtterancesComponent = dynamic(
() => {
return import('@/components/comments/Utterances')
return import('@/components/comments/Utterances');
},
{ ssr: false }
)
);
const GiscusComponent = dynamic(
() => {
return import('@/components/comments/Giscus')
return import('@/components/comments/Giscus');
},
{ ssr: false }
)
);
const DisqusComponent = dynamic(
() => {
return import('@/components/comments/Disqus')
return import('@/components/comments/Disqus');
},
{ ssr: false }
)
);
const CusdisComponent = dynamic(
() => {
return import('@/components/comments/Cusdis')
return import('@/components/comments/Cusdis');
},
{ ssr: false }
)
);
const CommentoComponent = dynamic(
() => {
return import('@/components/comments/Commento')
return import('@/components/comments/Commento');
},
{ ssr: false }
)
);
const Comments = ({ frontMatter }: Props) => {
let term
let term;
switch (
siteMetadata.comment.giscusConfig.mapping ||
siteMetadata.comment.utterancesConfig.issueTerm
) {
case 'pathname':
term = frontMatter.slug
break
term = frontMatter.slug;
break;
case 'url':
term = window.location.href
break
term = window.location.href;
break;
case 'title':
term = frontMatter.title
break
term = frontMatter.title;
break;
}
return (
<div id="comment">
{siteMetadata.comment && siteMetadata.comment.provider === 'giscus' && (
<GiscusComponent mapping={term} />
)}
{siteMetadata.comment && siteMetadata.comment.provider === 'utterances' && (
<UtterancesComponent issueTerm={term} />
)}
{siteMetadata.comment &&
siteMetadata.comment.provider === 'utterances' && (
<UtterancesComponent issueTerm={term} />
)}
{siteMetadata.comment && siteMetadata.comment.provider === 'disqus' && (
<DisqusComponent frontMatter={frontMatter} />
)}
@ -73,7 +74,7 @@ const Comments = ({ frontMatter }: Props) => {
<CommentoComponent frontMatter={frontMatter} />
)}
</div>
)
}
);
};
export default Comments
export default Comments;