gaoyunchuan/wxmp
1
0
Fork 0
mirror of https://github.com/jaywcjlove/wxmp.git synced 2026-01-12 00:08:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add color palette.

Browse Source
This commit is contained in:
jaywcjlove
2022-09-06 00:06:36 +08:00
parent 8720638f9d
commit 8f62d41020
16 changed files with 232 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -17,11 +17,11 @@
- [x] 支持主题选择 & 编辑预览。 - [x] 支持主题选择 & 编辑预览。
- [x] 支持明暗两种主题预览。 - [x] 支持明暗两种主题预览。
- [ ] 支持代码块主题样式选择。 - [ ] 支持代码块主题样式选择。
- [ ] 支持全局字号大小选择。 - [x] 支持色盘取色，快速替换文章整体色调
- [ ] 支持色盘取色，快速替换文章整体色调
- [x] 支持 URL 参数加载 Markdown 内容。 - [x] 支持 URL 参数加载 Markdown 内容。
- [x] 支持 URL 参数选择预览主题。 - [x] 支持 URL 参数选择预览主题。
- [x] CI 自动生成 Electron 桌面应用。 - [x] CI 自动生成 Electron 桌面应用。
- [ ] ~~支持全局字号大小选择。~~
### 支持代码块样式 ### 支持代码块样式

42
website/src/commands/color.tsx Normal file
View File

@@ -0,0 +1,42 @@
import React, { useContext } from 'react';
import { ICommand } from '@uiw/react-markdown-editor';
import styled from 'styled-components';
import { Context } from '../store/context';
const Input = styled.input`
position: absolute;
opacity: 0;
height: 20px;
width: 20px;
`;
const Button = styled.button``;
const ColorView: React.FC<{}> = (props) => {
const { preColor, setPreColor } = useContext(Context);
const handleChange = (evn: React.ChangeEvent<HTMLInputElement>) => {
setPreColor(evn.target.value);
};
const color = preColor ? preColor : 'currentColor';
return (
<Button type="button">
<svg viewBox="0 0 24 24" fill="none" height="16" width="16">
<path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M8.203 2.004c1.261 0 2.304 1.103 2.476 2.538l8.483 8.484-7.778 7.778a3 3 0 0 1-4.243 0L2.9 16.562a3 3 0 0 1 0-4.243l2.804-2.805V4.961c0-1.633 1.12-2.957 2.5-2.957Zm.5 2.957v1.553l-1 1V4.961c0-.327.224-.591.5-.591.277 0 .5.264.5.591Zm0 5.914V9.342l-4.39 4.391a1 1 0 0 0 0 1.414l4.243 4.243a1 1 0 0 0 1.414 0l6.364-6.364-5.63-5.63v3.48l-.003.128h-2.01a.698.698 0 0 0 .012-.129Z"
/>
<path d="M16.859 16.875a3 3 0 1 0 4.242 0l-2.121-2.121-2.121 2.12Z" fill={color} />
</svg>
<Input type="color" value={preColor} onChange={handleChange} />
</Button>
);
};
export const colorCommand: ICommand = {
name: 'color',
keyCommand: 'color',
button: () => <ColorView />,
};

7
website/src/commands/copy.tsx
View File

@@ -4,11 +4,10 @@ import toast from 'react-hot-toast';
import styled from 'styled-components'; import styled from 'styled-components';
const Button = styled.button` const Button = styled.button`
white-space: nowrap; /* white-space: nowrap;
width: initial !important; width: initial !important;
display: flex; display: flex;
align-items: center; align-items: center; */
padding: 0 0.4rem !important;
`; `;
const CopyView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = (props) => { const CopyView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = (props) => {
@@ -27,7 +26,7 @@ const CopyView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & Too
}; };
return ( return (
<Button type="button" onClick={handleClick}> <Button type="button" onClick={handleClick}>
{props.command.icon} 复制 {props.command.icon}
</Button> </Button>
); );
}; };

1
website/src/commands/theme.tsx
View File

@@ -49,7 +49,6 @@ const ThemePreviewView: React.FC<{}> = () => {
const { setCss, previewTheme, setPreviewTheme } = useContext(Context); const { setCss, previewTheme, setPreviewTheme } = useContext(Context);
const handleChange = (ev: React.ChangeEvent<HTMLSelectElement>) => { const handleChange = (ev: React.ChangeEvent<HTMLSelectElement>) => {
const value = ev.target.value as PreviewThemeValue; const value = ev.target.value as PreviewThemeValue;
console.log('vvvv');
setPreviewTheme(value); setPreviewTheme(value);
setCss(previewThemes[value].value); setCss(previewThemes[value].value);
}; };

6
website/src/components/Layout.tsx
View File

@@ -72,14 +72,16 @@ const Section = styled.section`
text-decoration: none; text-decoration: none;
color: var(--color-theme-text); color: var(--color-theme-text);
padding: 0.1rem 0.3rem; padding: 0.1rem 0.3rem;
box-shadow: inset 0 0 0 var(--color-accent-fg);
transition: all 0.3s; transition: all 0.3s;
font-size: 0.9rem; font-size: 0.9rem;
border-radius: 0.2rem;
&.active { &.active {
background-color: var(--color-accent-fg);
box-shadow: inset 0 -0.3rem 0 var(--color-accent-fg); box-shadow: inset 0 -0.3rem 0 var(--color-accent-fg);
color: #fff;
} }
&:hover:not(.active):not(:last-child) { &:hover:not(.active):not(:last-child) {
box-shadow: inset 0 -1.5rem 0 var(--color-accent-fg); background-color: var(--color-accent-fg);
color: #fff; color: #fff;
border-radius: 0.2rem; border-radius: 0.2rem;
} }

4
website/src/pages/home/Preview.tsx
View File

@@ -14,7 +14,7 @@ export const Warpper = styled.div`
`; `;
export const Preview = (props: MarkdownPreviewProps) => { export const Preview = (props: MarkdownPreviewProps) => {
const { css } = useContext(Context); const { css, preColor, previewTheme } = useContext(Context);
const html = markdownToHTML(props.source || '', css); const html = markdownToHTML(props.source || '', css, { preColor, previewTheme });
return <Warpper contentEditable spellCheck={false} dangerouslySetInnerHTML={{ __html: html }} />; return <Warpper contentEditable spellCheck={false} dangerouslySetInnerHTML={{ __html: html }} />;
}; };

3
website/src/pages/home/index.tsx
View File

@@ -3,6 +3,7 @@ import { useContext } from 'react';
import { EditorView } from '@codemirror/view'; import { EditorView } from '@codemirror/view';
import { Preview } from './Preview'; import { Preview } from './Preview';
import { copy } from '../../commands/copy'; import { copy } from '../../commands/copy';
import { colorCommand } from '../../commands/color';
import { theme as themeCommand, previeTheme } from '../../commands/theme'; import { theme as themeCommand, previeTheme } from '../../commands/theme';
import { cssCommand } from '../../commands/css'; import { cssCommand } from '../../commands/css';
import { Context, themes } from '../../store/context'; import { Context, themes } from '../../store/context';
@@ -18,7 +19,7 @@ export const HomePage = () => {
toolbars={commands} toolbars={commands}
theme={themeValue} theme={themeValue}
readOnly={isLoading} readOnly={isLoading}
toolbarsMode={[cssCommand, previeTheme, copy, 'fullscreen', 'preview']} toolbarsMode={[cssCommand, previeTheme, copy, colorCommand, 'fullscreen', 'preview']}
extensions={[EditorView.lineWrapping]} extensions={[EditorView.lineWrapping]}
renderPreview={Preview} renderPreview={Preview}
previewWidth="420px" previewWidth="420px"

7
website/src/pages/theme/Preview.tsx
View File

@@ -1,12 +1,11 @@
import { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
import { useContext } from 'react'; import { useContext } from 'react';
import { Context } from '../../store/context'; import { Context } from '../../store/context';
import { markdownToHTML } from '../../utils/markdownToHTML'; import { markdownToHTML } from '../../utils/markdownToHTML';
import { Warpper } from '../home/Preview'; import { Warpper } from '../home/Preview';
export const Preview = (props: MarkdownPreviewProps) => { export const Preview = () => {
const { css, markdown } = useContext(Context); const { css, markdown, preColor, previewTheme } = useContext(Context);
const html = markdownToHTML(markdown, css); const html = markdownToHTML(markdown, css, { preColor, previewTheme });
return <Warpper contentEditable spellCheck={false} dangerouslySetInnerHTML={{ __html: html }} />; return <Warpper contentEditable spellCheck={false} dangerouslySetInnerHTML={{ __html: html }} />;
}; };

6
website/src/store/Provider.tsx
View File

@@ -12,6 +12,9 @@ export const Provider: React.FC<React.PropsWithChildren> = ({ children }) => {
const [css, setCss] = React.useState<string>(previewThemes[initPreviewTheme].value); const [css, setCss] = React.useState<string>(previewThemes[initPreviewTheme].value);
const [previewTheme, setPreviewTheme] = React.useState<PreviewThemeValue>(initPreviewTheme); const [previewTheme, setPreviewTheme] = React.useState<PreviewThemeValue>(initPreviewTheme);
const [theme, setTheme] = React.useState<ThemeValue>('default'); const [theme, setTheme] = React.useState<ThemeValue>('default');
const [preColor, setPreColor] = React.useState<string>(
previewThemes[initPreviewTheme] ? previewThemes[initPreviewTheme].color : '',
);
const [isLoading, setIsLoading] = React.useState<boolean>(true); const [isLoading, setIsLoading] = React.useState<boolean>(true);
const { data: mddata, isLoading: loading } = useMdSource(mdurl); const { data: mddata, isLoading: loading } = useMdSource(mdurl);
useEffect(() => { useEffect(() => {
@@ -26,9 +29,12 @@ export const Provider: React.FC<React.PropsWithChildren> = ({ children }) => {
} }
}, [mddata, mdurl]); }, [mddata, mdurl]);
useEffect(() => setIsLoading(loading), [loading]); useEffect(() => setIsLoading(loading), [loading]);
useEffect(() => setPreColor(previewThemes[initPreviewTheme].color), [initPreviewTheme]);
return ( return (
<Context.Provider <Context.Provider
value={{ value={{
preColor,
setPreColor,
isLoading, isLoading,
setIsLoading, setIsLoading,
markdown, markdown,

41
website/src/store/context.tsx
View File

@@ -97,25 +97,64 @@ export const previewThemes = {
default: { default: {
label: '翡翠绿', label: '翡翠绿',
value: defStyle, value: defStyle,
color: '#009874',
}, },
simple: { simple: {
label: '简洁蓝', label: '简洁蓝',
value: simpleStyle, value: simpleStyle,
color: '#0f4c81',
}, },
underscore: { underscore: {
label: '下划线黄', label: '下划线黄',
value: underscoreStyle, value: underscoreStyle,
color: '#ffb11b',
}, },
base: { base: {
label: '简洁', label: '简洁',
value: baseStyle, value: baseStyle,
color: '',
}, },
}; };
/** 用于全局主题替换样式 */
export const replaceData: Record<PreviewThemeValue, ReplaceData[]> = {
underscore: [
{ select: 'a', name: 'color', value: '{{color}}' },
{ select: 'h1', name: 'box-shadow', value: 'inset 0 -0.9rem 0 0 {{color}}' },
{ select: 'h2', name: 'box-shadow', value: 'inset 0 -0.7rem 0 0 {{color}}' },
{ select: 'h3', name: 'border-left', value: '5px solid {{color}}' },
],
default: [
{ select: 'a', name: 'color', value: '{{color}}' },
{ select: 'h1', name: 'border-bottom', value: '3px solid {{color}}' },
{ select: 'h2', name: 'background', value: '{{color}}' },
{ select: 'h3', name: 'border-left', value: '5px solid {{color}}' },
],
simple: [
{ select: 'a', name: 'color', value: '{{color}}' },
{ select: 'h1', name: 'border-bottom', value: '3px solid {{color}}' },
{ select: 'h2', name: 'background', value: '{{color}}' },
{ select: 'h3', name: 'border-left', value: '5px solid {{color}}' },
{ select: '.code-spans', name: 'color', value: '{{color}}' },
],
base: [],
};
export type ReplaceData = {
select: string;
name: string;
value: string;
};
export const colors = (Object.keys(previewThemes) as Array<keyof typeof previewThemes>).map(
(key) => previewThemes[key].color,
);
export type ThemeValue = keyof typeof themes; export type ThemeValue = keyof typeof themes;
export type PreviewThemeValue = keyof typeof previewThemes; export type PreviewThemeValue = keyof typeof previewThemes;
export interface CreateContext { export interface CreateContext {
preColor: string;
setPreColor: React.Dispatch<React.SetStateAction<string>>;
isLoading: boolean; isLoading: boolean;
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>; setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
markdown: string; markdown: string;
@@ -129,6 +168,8 @@ export interface CreateContext {
} }
export const Context = React.createContext<CreateContext>({ export const Context = React.createContext<CreateContext>({
preColor: '',
setPreColor: () => {},
isLoading: true, isLoading: true,
setIsLoading: () => {}, setIsLoading: () => {},
markdown: data.source, markdown: data.source,

22
website/src/themes/base.md.css
View File

@@ -5,14 +5,14 @@ a {
h1 { h1 {
color: inherit; color: inherit;
font-size: 1.5rem; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
h2 { h2 {
color: inherit; color: inherit;
margin: 2.5rem 0 1rem 0; margin: 2.5rem 0 1rem 0;
font-size: 1.3em; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
@@ -20,19 +20,19 @@ h3 {
color: inherit; color: inherit;
margin: 1em 0 1em 0; margin: 1em 0 1em 0;
font-weight: bold; font-weight: bold;
font-size: 1em; font-size: 14px;
} }
h4 { h4 {
color: inherit; color: inherit;
margin: 0.6em 0 0.6em 0; margin: 0.6em 0 0.6em 0;
font-weight: bold; font-weight: bold;
font-size: 0.9em; font-size: 12px;
} }
p { p {
color: initial; color: initial;
font-size: 0.85em; font-size: 14px;
line-height: 1.5em; line-height: 1.5em;
} }
@@ -46,7 +46,7 @@ ol {
li { li {
margin: 0; margin: 0;
font-size: 0.85em; font-size: 14px;
line-height: 1.5em; line-height: 1.5em;
} }
@@ -63,7 +63,7 @@ pre {
padding: 1em; padding: 1em;
color: rgb(51, 51, 51); color: rgb(51, 51, 51);
background: rgb(248, 248, 248); background: rgb(248, 248, 248);
font-size: 0.85em; font-size: 14px;
font-weight: 400; font-weight: 400;
letter-spacing: normal; letter-spacing: normal;
word-spacing: 0px; word-spacing: 0px;
@@ -76,7 +76,7 @@ table {
width: 100% !important; width: 100% !important;
border-collapse: collapse; border-collapse: collapse;
line-height: 1.35; line-height: 1.35;
font-size: 0.85em; font-size: 14px;
} }
td { td {
@@ -93,7 +93,7 @@ th {
.code-highlight { .code-highlight {
text-align: left; text-align: left;
font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace; font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
font-size: 0.85em; font-size: 14px;
margin: 0px; margin: 0px;
white-space: nowrap; white-space: nowrap;
} }
@@ -120,14 +120,14 @@ th {
display: table; display: table;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1em; font-size: 14px;
font-weight: bold; font-weight: bold;
margin: 3rem 0 0.6rem 0; margin: 3rem 0 0.6rem 0;
padding-left: 0.2rem; padding-left: 0.2rem;
} }
.footnotes-list { .footnotes-list {
font-size: 0.75em; font-size: 10px;
font-style: italic; font-style: italic;
line-height: 1.2; line-height: 1.2;
margin: 0.4rem 0; margin: 0.4rem 0;

45
website/src/themes/default.md.css
View File

@@ -1,7 +1,7 @@
a { a {
color: #576b95; color: #009874;
text-decoration: none; text-decoration: none;
font-size: 0.85em; font-size: 14px;
} }
h1 { h1 {
@@ -11,11 +11,11 @@ h1 {
line-height: 1.75; line-height: 1.75;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1em; font-size: 16px;
font-weight: bold; font-weight: bold;
margin: 2em auto 1em; margin: 2em auto 1em;
padding: 0 1em; padding: 0 1em;
border-bottom: 2px solid #009874; border-bottom: 3px solid #009874;
margin-top: 0; margin-top: 0;
} }
@@ -26,7 +26,7 @@ h2 {
line-height: 1.75; line-height: 1.75;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.3em; font-size: 16px;
font-weight: bold; font-weight: bold;
margin: 4em auto 2em; margin: 4em auto 2em;
padding: 0 0.3em; padding: 0 0.3em;
@@ -34,22 +34,17 @@ h2 {
background: #009874; background: #009874;
} }
p {
font-size: 0.85em;
line-height: 1.5em;
}
h3 { h3 {
text-align: left; text-align: left;
color: #3f3f3f; color: #3f3f3f;
line-height: 1.2; line-height: 1.2;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.1em; font-size: 14px;
font-weight: bold; font-weight: bold;
margin: 2em 8px 0.75em 0; margin: 2em 8px 0.75em 0;
padding-left: 8px; padding-left: 8px;
border-left: 3px solid #009874; border-left: 5px solid #009874;
} }
ul { ul {
@@ -63,23 +58,29 @@ ol {
li { li {
margin: 0; margin: 0;
line-height: 1.5em; line-height: 1.5em;
color: rgb(30 41 59); font-size: 14px;
font-size: 0.85em;
line-height: 1.5em; line-height: 1.5em;
} }
p {
font-size: 14px;
line-height: 1.5em;
padding: 0.5em 0 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
blockquote { blockquote {
text-align: left; text-align: left;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 0.85em; font-size: 14px;
font-style: normal; font-style: normal;
border-left: none; border-left: none;
padding: 0.1rem 1rem; padding: 0.5em 1em;
border-radius: 4px; border-radius: 4px;
background: rgba(27, 31, 35, 0.05); background: rgba(27, 31, 35, 0.05);
margin: 1rem 0; margin: 1em 0;
line-height: 1.5em;
} }
pre { pre {
@@ -113,7 +114,7 @@ table {
width: 100% !important; width: 100% !important;
border-collapse: collapse; border-collapse: collapse;
line-height: 1.35; line-height: 1.35;
font-size: 0.85em; font-size: 14px;
} }
td { td {
@@ -131,7 +132,7 @@ th {
text-align: left; text-align: left;
line-height: 1.75; line-height: 1.75;
font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace; font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
font-size: 0.85em; font-size: 14px;
margin: 0px; margin: 0px;
white-space: nowrap; white-space: nowrap;
} }
@@ -159,14 +160,14 @@ th {
display: table; display: table;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1em; font-size: 14px;
font-weight: bold; font-weight: bold;
margin: 3em 0 0.6em 0; margin: 3em 0 0.6em 0;
padding-left: 0.2em; padding-left: 0.2em;
} }
.footnotes-list { .footnotes-list {
font-size: 0.75em; font-size: 10px;
font-style: italic; font-style: italic;
line-height: 1.2; line-height: 1.2;
margin: 0.4rem 0; margin: 0.4rem 0;

47
website/src/themes/simple.md.css
View File

@@ -1,7 +1,7 @@
a { a {
color: #576b95; color: #0f4c81;
text-decoration: none; text-decoration: none;
font-size: 0.85em; font-size: 14px;
} }
h1 { h1 {
@@ -11,11 +11,11 @@ h1 {
line-height: 1.75; line-height: 1.75;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.2em; font-size: 16px;
font-weight: bold; font-weight: bold;
margin: 2em auto 1em; margin: 2em auto 1em;
padding: 0 1em; padding: 0 1em;
border-bottom: 2px solid #0f4c81; border-bottom: 3px solid #0f4c81;
margin-top: 0; margin-top: 0;
} }
@@ -26,7 +26,7 @@ h2 {
line-height: 1.75; line-height: 1.75;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.2em; font-size: 16px;
font-weight: bold; font-weight: bold;
margin: 4em auto 2em; margin: 4em auto 2em;
padding: 0 0.3em; padding: 0 0.3em;
@@ -34,22 +34,17 @@ h2 {
background: #0f4c81; background: #0f4c81;
} }
p {
font-size: 0.85em;
line-height: 1.5em;
}
h3 { h3 {
text-align: left; text-align: left;
color: #3f3f3f; color: #3f3f3f;
line-height: 1.2; line-height: 1.2;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.1em; font-size: 14px;
font-weight: bold; font-weight: bold;
margin: 2em 8px 0.75em 0; margin: 2em 8px 0.75em 0;
padding-left: 8px; padding-left: 8px;
border-left: 3px solid #0f4c81; border-left: 5px solid #0f4c81;
} }
ul { ul {
@@ -63,23 +58,29 @@ ol {
li { li {
margin: 0; margin: 0;
line-height: 1.5em; line-height: 1.5em;
color: rgb(30 41 59); font-size: 14px;
font-size: 0.85em;
line-height: 1.5em; line-height: 1.5em;
} }
p {
font-size: 14px;
line-height: 1.5em;
padding: 0.5em 0 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
blockquote { blockquote {
text-align: left; text-align: left;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 0.85em; font-size: 14px;
font-style: normal; font-style: normal;
border-left: none; border-left: none;
padding: 0.1rem 1rem; padding: 0.5em 1em;
border-radius: 4px; border-radius: 4px;
background: rgba(27, 31, 35, 0.05); background: rgba(27, 31, 35, 0.05);
margin: 1rem 0; margin: 1em 0;
line-height: 1.5em;
} }
pre { pre {
@@ -113,7 +114,7 @@ table {
width: 100% !important; width: 100% !important;
border-collapse: collapse; border-collapse: collapse;
line-height: 1.35; line-height: 1.35;
font-size: 0.85em; font-size: 14px;
} }
td { td {
@@ -131,7 +132,7 @@ th {
text-align: left; text-align: left;
line-height: 1.75; line-height: 1.75;
font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace; font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
font-size: 0.85em; font-size: 14px;
margin: 0px; margin: 0px;
white-space: nowrap; white-space: nowrap;
} }
@@ -150,7 +151,7 @@ th {
padding: 0.1em 0.3em; padding: 0.1em 0.3em;
border-radius: 0.3em; border-radius: 0.3em;
font-weight: bold; font-weight: bold;
font-size: 1em; font-size: 14px;
top: -0.1em; top: -0.1em;
position: relative; position: relative;
} }
@@ -159,14 +160,14 @@ th {
display: table; display: table;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1em; font-size: 14px;
font-weight: bold; font-weight: bold;
margin: 3em 0 0.6em 0; margin: 3em 0 0.6em 0;
padding-left: 0.2em; padding-left: 0.2em;
} }
.footnotes-list { .footnotes-list {
font-size: 0.75em; font-size: 10px;
font-style: italic; font-style: italic;
line-height: 1.2; line-height: 1.2;
margin: 0.4rem 0; margin: 0.4rem 0;

40
website/src/themes/underscore.md.css
View File

@@ -1,7 +1,7 @@
a { a {
color: #576b95; color: #ffb11b;
text-decoration: none; text-decoration: none;
font-size: 0.85em; font-size: 14px;
} }
h1 { h1 {
@@ -11,7 +11,7 @@ h1 {
line-height: 1.15; line-height: 1.15;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.3em; font-size: 16px;
font-weight: bold; font-weight: bold;
margin: 2em auto 1em; margin: 2em auto 1em;
padding: 0 1em 0.3em 1em; padding: 0 1em 0.3em 1em;
@@ -24,18 +24,13 @@ h2 {
line-height: 1.35; line-height: 1.35;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.2em; font-size: 16px;
font-weight: bold; font-weight: bold;
padding: 0 0.3em; padding: 0 0.3em;
margin: 2em 0 1em 0; margin: 2em 0 1em 0;
box-shadow: inset 0 -0.7rem 0 0 #ffb11b; box-shadow: inset 0 -0.7rem 0 0 #ffb11b;
} }
p {
font-size: 0.85em;
line-height: 1.5em;
}
h3 { h3 {
text-align: left; text-align: left;
color: #3f3f3f; color: #3f3f3f;
@@ -60,8 +55,15 @@ ol {
li { li {
margin: 0; margin: 0;
line-height: 1.5em; line-height: 1.5em;
color: rgb(30 41 59); font-size: 14px;
font-size: 0.85em; }
p {
font-size: 14px;
line-height: 1.5em;
padding: 0.5em 0 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
} }
blockquote { blockquote {
@@ -69,13 +71,13 @@ blockquote {
line-height: 1.5em; line-height: 1.5em;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 0.85em; font-size: 14px;
font-style: normal; font-style: normal;
border-left: none; border-left: none;
padding: 0.1rem 1rem; padding: 0.5em 1em;
border-radius: 4px; border-radius: 4px;
background: rgba(27, 31, 35, 0.05); background: rgba(27, 31, 35, 0.05);
margin: 1rem 0; margin: 1em 0;
} }
pre { pre {
@@ -109,7 +111,7 @@ table {
width: 100% !important; width: 100% !important;
border-collapse: collapse; border-collapse: collapse;
line-height: 1.35; line-height: 1.35;
font-size: 0.85em; font-size: 14px;
} }
td { td {
@@ -127,7 +129,7 @@ th {
text-align: left; text-align: left;
line-height: 1.75; line-height: 1.75;
font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace; font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
font-size: 0.85em; font-size: 14px;
margin: 0px; margin: 0px;
white-space: nowrap; white-space: nowrap;
} }
@@ -146,7 +148,7 @@ th {
padding: 0.1em 0.3em; padding: 0.1em 0.3em;
border-radius: 0.3em; border-radius: 0.3em;
font-weight: bold; font-weight: bold;
font-size: 0.85em; font-size: 14px;
top: -0.1em; top: -0.1em;
position: relative; position: relative;
} }
@@ -155,14 +157,14 @@ th {
display: table; display: table;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1em; font-size: 14px;
font-weight: bold; font-weight: bold;
margin: 3em 0 0.6em 0; margin: 3em 0 0.6em 0;
padding-left: 0.2em; padding-left: 0.2em;
} }
.footnotes-list { .footnotes-list {
font-size: 0.75em; font-size: 10px;
font-style: italic; font-style: italic;
line-height: 1.2; line-height: 1.2;
margin: 0.4rem 0; margin: 0.4rem 0;

48
website/src/utils/css.ts
View File

@@ -1,20 +1,55 @@
import { RootContent, Element, Text, Root } from 'hast'; import { RootContent, Element, Text, Root } from 'hast';
import { PreviewThemeValue, replaceData, ReplaceData } from '../store/context';
export const getBlock = (data: any, str: string = '') => { /**
* {
* "replace": [
* { select: 'a', name: 'color', value: 'red' },
* { select: 'h1', name: 'box-shadow', value: 'red' },
* { select: 'h2', name: 'box-shadow', value: 'red' },
* { select: 'h3', name: 'border-left', value: 'red' },
* { select: 'h3', name: 'color', value: 'red' },
* ]
* }
*/
type BlockOption = {
replace?: Array<ReplaceData>;
};
export const getBlock = (data: any, str: string = '', opts: BlockOption = {}) => {
const { replace } = opts;
if (data && data.data && data.data.type === 'Declaration') { if (data && data.data && data.data.type === 'Declaration') {
str = `${data.data.property}: ${data.data.value.value}${data.data.important ? ' !important' : ''};`; const value = replace?.find((m) => m.name === data.data.property)?.value || data.data.value.value;
// console.log(value)
str = `${data.data.property}: ${value}${data.data.important ? ' !important' : ''};`;
if (data.next) { if (data.next) {
str += getBlock(data.next); str += getBlock(data.next, '', opts);
} }
} }
return str; return str;
}; };
export const cssdata = (list: any, result: Record<string, string> = {}) => { type Cssdata = {
theme?: PreviewThemeValue;
color?: string;
};
export const cssdata = (list: any, result: Record<string, string> = {}, opts: Cssdata = {}) => {
if (list.data && list.data.type === 'Rule') { if (list.data && list.data.type === 'Rule') {
result[list.data.prelude.value] = getBlock(list.data.block.children.head); const selector = list.data.prelude.value;
const options: BlockOption = {};
// console.log('opts:', opts)
if (opts.color && opts.theme && replaceData[opts.theme]) {
options.replace = replaceData[opts.theme]
.filter((m) => m.select === selector)
.map((m) => ({
...m,
value: m.value.replace('{{color}}', opts.color!),
}));
}
result[selector] = getBlock(list.data.block.children.head, '', options);
if (list.next) { if (list.next) {
result = cssdata(list.next, { ...result }); result = cssdata(list.next, { ...result }, opts);
} }
} }
return result; return result;
@@ -29,7 +64,6 @@ export const spaceEscape = (node: RootContent) => {
} }
node.properties.className = className.filter((str: string) => !/(token|control-flow)/.test(str)); node.properties.className = className.filter((str: string) => !/(token|control-flow)/.test(str));
} }
node.children.map((elm) => { node.children.map((elm) => {
if (elm.type === 'element' && elm.children) { if (elm.type === 'element' && elm.children) {
spaceEscape(elm); spaceEscape(elm);

11
website/src/utils/markdownToHTML.ts
View File

@@ -13,9 +13,12 @@ import rehypeRewrite from 'rehype-rewrite';
import stringify from 'rehype-stringify'; import stringify from 'rehype-stringify';
import { cssdata, spaceEscape, footnotes, footnotesLabel, imagesStyle } from './css'; import { cssdata, spaceEscape, footnotes, footnotesLabel, imagesStyle } from './css';
export type MarkdownToHTMLOptions = {}; export type MarkdownToHTMLOptions = {
preColor?: string;
previewTheme?: string;
};
export function markdownToHTML(md: string, css: string, options: MarkdownToHTMLOptions = {}) { export function markdownToHTML(md: string, css: string, opts: MarkdownToHTMLOptions = {}) {
const ast = csstree.parse(css, { const ast = csstree.parse(css, {
parseAtrulePrelude: false, parseAtrulePrelude: false,
parseRulePrelude: false, parseRulePrelude: false,
@@ -24,7 +27,7 @@ export function markdownToHTML(md: string, css: string, options: MarkdownToHTMLO
positions: false, positions: false,
}); });
// @ts-ignore // @ts-ignore
const data = cssdata(ast.children.head); const data = cssdata(ast.children.head, {}, { color: opts.preColor, theme: opts.previewTheme });
const processor = unified() const processor = unified()
.use(remarkParse) .use(remarkParse)
.use(remarkGfm) .use(remarkGfm)
@@ -34,7 +37,7 @@ export function markdownToHTML(md: string, css: string, options: MarkdownToHTMLO
.use(rehypeIgnore, {}) .use(rehypeIgnore, {})
.use(rehypeAttrs, { properties: 'attr' }) .use(rehypeAttrs, { properties: 'attr' })
.use(rehypeRewrite, { .use(rehypeRewrite, {
rewrite: (node, index, parent) => { rewrite: (node, _index, parent) => {
// @ts-ignore // @ts-ignore
if ( if (
node?.type === 'element' && node?.type === 'element' &&