mirror of https://github.com/MaxLeiter/Drift
client: add next-themes support for CSS variables
Max Leiter
4 years ago
parent
186d536175
commit
6045200ac4
@ -0,0 +1,25 @@
|
|||||||
|
import { GeistProvider, CssBaseline } from "@geist-ui/core"
|
||||||
|
import type { NextComponentType, NextPageContext } from "next"
|
||||||
|
import { SkeletonTheme } from "react-loading-skeleton"
|
||||||
|
import { useTheme } from 'next-themes'
|
||||||
|
const App = ({
|
||||||
|
Component,
|
||||||
|
pageProps,
|
||||||
|
}: {
|
||||||
|
Component: NextComponentType<NextPageContext, any, any>
|
||||||
|
pageProps: any
|
||||||
|
}) => {
|
||||||
|
const skeletonBaseColor = 'var(--light-gray)'
|
||||||
|
const skeletonHighlightColor = 'var(--lighter-gray)'
|
||||||
|
|
||||||
|
const { theme } = useTheme();
|
||||||
|
|
||||||
|
return (<GeistProvider themeType={theme}>
|
||||||
|
<SkeletonTheme baseColor={skeletonBaseColor} highlightColor={skeletonHighlightColor}>
|
||||||
|
<CssBaseline />
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</SkeletonTheme>
|
||||||
|
</GeistProvider>)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
@ -1,62 +0,0 @@
|
|||||||
import remarkGfm from "remark-gfm"
|
|
||||||
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-async-light';
|
|
||||||
import rehypeSlug from 'rehype-slug'
|
|
||||||
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
|
|
||||||
import rehypeRaw from 'rehype-raw'
|
|
||||||
|
|
||||||
// @ts-ignore because of no types in remark-a11y-emoji
|
|
||||||
// import a11yEmoji from '@fec/remark-a11y-emoji';
|
|
||||||
|
|
||||||
import styles from './preview.module.css'
|
|
||||||
import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus'
|
|
||||||
import light from 'react-syntax-highlighter/dist/cjs/styles/prism/vs'
|
|
||||||
import useSharedState from "@lib/hooks/use-shared-state";
|
|
||||||
import ReactMarkdown from "react-markdown";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
content: string | undefined
|
|
||||||
height: number | string
|
|
||||||
}
|
|
||||||
|
|
||||||
const ReactMarkdownPreview = ({ content, height }: Props) => {
|
|
||||||
const [themeType] = useSharedState<string>('theme')
|
|
||||||
|
|
||||||
return (<div style={{ height }}>
|
|
||||||
<ReactMarkdown className={styles.markdownPreview}
|
|
||||||
remarkPlugins={[remarkGfm]}
|
|
||||||
rehypePlugins={[rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }], rehypeRaw]}
|
|
||||||
components={{
|
|
||||||
code({ node, inline, className, children, ...props }) {
|
|
||||||
const match = /language-(\w+)/.exec(className || '')
|
|
||||||
return !inline && match ? (
|
|
||||||
<SyntaxHighlighter
|
|
||||||
lineNumberStyle={{
|
|
||||||
minWidth: "2.25rem"
|
|
||||||
}}
|
|
||||||
customStyle={{
|
|
||||||
padding: 0,
|
|
||||||
margin: 0,
|
|
||||||
background: 'transparent'
|
|
||||||
}}
|
|
||||||
codeTagProps={{
|
|
||||||
style: { background: 'transparent', color: 'inherit' }
|
|
||||||
}}
|
|
||||||
style={themeType === 'dark' ? dark : light}
|
|
||||||
showLineNumbers={true}
|
|
||||||
language={match[1]}
|
|
||||||
PreTag="div"
|
|
||||||
{...props}
|
|
||||||
>{String(children).replace(/\n$/, '')}</SyntaxHighlighter>
|
|
||||||
) : (
|
|
||||||
<code className={className} {...props}>
|
|
||||||
{children}
|
|
||||||
</code>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}}>
|
|
||||||
{content || ""}
|
|
||||||
</ReactMarkdown></div>)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export default ReactMarkdownPreview
|
|
||||||
@ -1,18 +1,18 @@
|
|||||||
// useDebounce.js
|
// useDebounce.js
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from "react"
|
||||||
|
|
||||||
export default function useDebounce(value: any, delay: number) {
|
export default function useDebounce(value: any, delay: number) {
|
||||||
const [debouncedValue, setDebouncedValue] = useState(value);
|
const [debouncedValue, setDebouncedValue] = useState(value)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handler = setTimeout(() => {
|
const handler = setTimeout(() => {
|
||||||
setDebouncedValue(value);
|
setDebouncedValue(value)
|
||||||
}, delay);
|
}, delay)
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
clearTimeout(handler);
|
clearTimeout(handler)
|
||||||
};
|
}
|
||||||
}, [value, delay]);
|
}, [value, delay])
|
||||||
|
|
||||||
return debouncedValue;
|
return debouncedValue
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,27 +0,0 @@
|
|||||||
import { useCallback, useEffect } from "react"
|
|
||||||
import useSharedState from "./use-shared-state"
|
|
||||||
|
|
||||||
const useTheme = () => {
|
|
||||||
const isClient = typeof window === "object"
|
|
||||||
const [themeType, setThemeType] = useSharedState<string>("theme", "light")
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isClient) return
|
|
||||||
const storedTheme = localStorage.getItem("drift-theme")
|
|
||||||
if (storedTheme) {
|
|
||||||
setThemeType(storedTheme)
|
|
||||||
}
|
|
||||||
}, [isClient, setThemeType])
|
|
||||||
|
|
||||||
const changeTheme = useCallback(() => {
|
|
||||||
setThemeType((last) => {
|
|
||||||
const newTheme = last === "dark" ? "light" : "dark"
|
|
||||||
localStorage.setItem("drift-theme", newTheme)
|
|
||||||
return newTheme
|
|
||||||
})
|
|
||||||
}, [setThemeType])
|
|
||||||
|
|
||||||
return { theme: themeType, changeTheme }
|
|
||||||
}
|
|
||||||
|
|
||||||
export default useTheme
|
|
||||||
Loading…
Reference in New Issue