From 8720638f9d22895bf2e8f213f4bee268756ca91a Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Mon, 5 Sep 2022 17:27:50 +0800
Subject: [PATCH] style: modify theme style.
---
README.md | 8 +++--
electron/main/src/app.ts | 13 ++++----
electron/preload/src/index.ts | 16 +--------
website/src/components/Layout.tsx | 50 +++++++++++++++++-----------
website/src/pages/home/Preview.tsx | 3 +-
website/src/pages/home/index.tsx | 33 ++++++++----------
website/src/pages/theme/Preview.tsx | 9 +----
website/src/pages/theme/editor.tsx | 29 ++++++++--------
website/src/themes/base.md.css | 3 ++
website/src/themes/default.md.css | 6 ++--
website/src/themes/simple.md.css | 4 ++-
website/src/themes/underscore.md.css | 7 ++--
12 files changed, 86 insertions(+), 95 deletions(-)
diff --git a/README.md b/README.md
index 9eb4bf8..d7325ed 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,12 @@
微信公众号 Markdown 编辑器
-
+[](https://jaywcjlove.github.io/wxmp)
微信公众号文章 Markdown 在线编辑器，使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由于发版本麻烦，和一些功能无法扩展停滞开发了，未来不再开发 Chrome 的插件(暂存在 chrome 分支)，通过 web 版本定制更丰富的功能。
+[](https://jaywcjlove.github.io/wxmp)
+
## 功能特性
开发计划和一些功能介绍，有需求可以在 issue 中提，使得工具变得更加完善。下面示例用于 web 应用中效果展示。
@@ -19,7 +21,7 @@
- [ ] 支持色盘取色，快速替换文章整体色调
- [x] 支持 URL 参数加载 Markdown 内容。
- [x] 支持 URL 参数选择预览主题。
-- [x] 使用 electron 生成桌面应用。
+- [x] CI 自动生成 Electron 桌面应用。
### 支持代码块样式
@@ -126,7 +128,7 @@ Markdown URL 地址: https://raw.githubusercontent.com/jaywcjlove/c-tutorial/mas
## 主题定制
-在目录 `src/themes` 中存放默认主题，在 `src/store/context.tsx` 中配置主题，主题使用 css 定义样式，不支持复杂的选择器。提供在线主题编辑器，欢迎修改并 PR 进仓库供大家使用。
+在目录 `website/src/themes` 中存放默认主题，在 `website/src/store/context.tsx` 中配置主题，主题使用 `css` 定义样式，不支持复杂的选择器。提供在线主题编辑器，欢迎修改并 `PR` 进仓库供大家使用。
```css
/* 1~6 标题样式定义 */
diff --git a/electron/main/src/app.ts b/electron/main/src/app.ts
index a57c214..9751223 100644
--- a/electron/main/src/app.ts
+++ b/electron/main/src/app.ts
@@ -14,15 +14,16 @@ export class App {
async createWindow(options: Options = {}, loadURL?: string) {
await app.whenReady();
const opts: Options = {
- titleBarStyle: 'hidden', // 无标题栏
- frame: false, // 创建无边窗口
- width: 800,
+ // titleBarStyle: 'hiddenInset', // 无标题栏
+ // frame: false, // 创建无边窗口
+ width: 850,
height: 600,
minWidth: 850,
+ minHeight: 600,
center: true,
- maximizable: true,
- minimizable: true,
- resizable: true,
+ // maximizable: true,
+ // minimizable: true,
+ // resizable: true,
webPreferences: {
// 多线程
nodeIntegrationInWorker: true,
diff --git a/electron/preload/src/index.ts b/electron/preload/src/index.ts
index 250951f..11c25b0 100644
--- a/electron/preload/src/index.ts
+++ b/electron/preload/src/index.ts
@@ -1,18 +1,4 @@
-const styleStr = `.siderbar {
- -webkit-app-region: drag;
-}
-.siderbar header h1 a, github-corners {
- display: none;
-}
-article.content:before {
- -webkit-app-region: drag;
- position: absolute;
- content: ' ';
- display: block;
- height: 41px;
- width: 100%;
- z-index: -1;
-}`;
+const styleStr = `.header .logo {}`;
document.addEventListener('DOMContentLoaded', () => {
const head = document.querySelector('head');
diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx
index 7672f84..4c68ef0 100644
--- a/website/src/components/Layout.tsx
+++ b/website/src/components/Layout.tsx
@@ -8,14 +8,22 @@ import { ReactComponent as Loading } from '../assets/tail-spin.svg';
import { Context } from '../store/context';
const Warpper = styled.div``;
+const HeaderPlace = styled.div`
+ position: relative;
+ height: 2.8rem;
+`;
const Header = styled.header`
-webkit-app-region: drag;
display: flex;
flex-direction: row;
justify-content: space-between;
+ background: var(--color-canvas-default);
border-bottom: 1px solid var(--color-border-muted);
- padding: 0.5rem 0.6rem 0.5rem 1rem;
+ padding: 0.5rem 0.6rem 0.5rem 0.8rem;
+ position: fixed;
+ width: 100%;
+ z-index: 9;
`;
const Article = styled.article`
@@ -82,25 +90,27 @@ export function Layout() {
const { isLoading } = useContext(Context);
return (
-
-
-
-
- 微信公众号排版编辑器
- <sup> v{VERSION} </sup>
-
- {isLoading && }
-
-
- 首页
- 编辑主题
- 文档
-
-
-
-
-
-
+
+
+
+
+
+ 微信公众号排版编辑器
+ <sup> v{VERSION} </sup>
+
+ {isLoading && }
+
+
+ 首页
+ 编辑主题
+ 文档
+
+
+
+
+
+
+
);
diff --git a/website/src/pages/home/Preview.tsx b/website/src/pages/home/Preview.tsx
index 6dc01aa..20d8a26 100644
--- a/website/src/pages/home/Preview.tsx
+++ b/website/src/pages/home/Preview.tsx
@@ -5,11 +5,12 @@ import { Context } from '../../store/context';
import { markdownToHTML } from '../../utils/markdownToHTML';
-const Warpper = styled.div`
+export const Warpper = styled.div`
width: 375px;
padding: 20px;
box-shadow: 0 0 60px rgb(0 0 0 / 10%);
min-height: 100%;
+ font-size: 17px;
`;
export const Preview = (props: MarkdownPreviewProps) => {
diff --git a/website/src/pages/home/index.tsx b/website/src/pages/home/index.tsx
index 41fdbaa..d730c02 100644
--- a/website/src/pages/home/index.tsx
+++ b/website/src/pages/home/index.tsx
@@ -1,37 +1,30 @@
import MarkdownEditor, { getCommands } from '@uiw/react-markdown-editor';
import { useContext } from 'react';
import { EditorView } from '@codemirror/view';
-import styled from 'styled-components';
import { Preview } from './Preview';
import { copy } from '../../commands/copy';
import { theme as themeCommand, previeTheme } from '../../commands/theme';
import { cssCommand } from '../../commands/css';
import { Context, themes } from '../../store/context';
-export const Warpper = styled.div`
- height: calc(100vh - 2.9rem);
-`;
-
export const HomePage = () => {
const commands = [...getCommands(), themeCommand];
const { theme, markdown, isLoading, setMarkdown } = useContext(Context);
const themeValue = themes[theme].value;
const handleChange = (value: string) => setMarkdown(value);
return (
-
-
-
+
);
};
diff --git a/website/src/pages/theme/Preview.tsx b/website/src/pages/theme/Preview.tsx
index 0d5e8fa..0e294e4 100644
--- a/website/src/pages/theme/Preview.tsx
+++ b/website/src/pages/theme/Preview.tsx
@@ -1,16 +1,9 @@
import { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
-import styled from 'styled-components';
import { useContext } from 'react';
import { Context } from '../../store/context';
import { markdownToHTML } from '../../utils/markdownToHTML';
-
-const Warpper = styled.div`
- width: 375px;
- padding: 20px;
- box-shadow: 0 0 60px rgb(0 0 0 / 10%);
- min-height: 100%;
-`;
+import { Warpper } from '../home/Preview';
export const Preview = (props: MarkdownPreviewProps) => {
const { css, markdown } = useContext(Context);
diff --git a/website/src/pages/theme/editor.tsx b/website/src/pages/theme/editor.tsx
index b4f6345..2397d2a 100644
--- a/website/src/pages/theme/editor.tsx
+++ b/website/src/pages/theme/editor.tsx
@@ -8,7 +8,6 @@ import { previousCommand } from '../../commands/css';
import { themeTitle } from '../../commands/title';
import { theme as themeCommand, previeTheme } from '../../commands/theme';
import { Context, themes } from '../../store/context';
-import { Warpper } from '../home';
export const EditorPage = () => {
const commands = [themeTitle, themeCommand, previousCommand];
@@ -17,20 +16,18 @@ export const EditorPage = () => {
const value = themes[theme].value;
const handleChange = (value: string) => setCss(value);
return (
-
-
-
+
);
};
diff --git a/website/src/themes/base.md.css b/website/src/themes/base.md.css
index 0a0c913..13caff3 100644
--- a/website/src/themes/base.md.css
+++ b/website/src/themes/base.md.css
@@ -33,6 +33,7 @@ h4 {
p {
color: initial;
font-size: 0.85em;
+ line-height: 1.5em;
}
ul {
@@ -46,12 +47,14 @@ ol {
li {
margin: 0;
font-size: 0.85em;
+ line-height: 1.5em;
}
blockquote {
font-style: normal;
border-left: none;
margin: 1em 0;
+ line-height: 1.5em;
}
pre {
diff --git a/website/src/themes/default.md.css b/website/src/themes/default.md.css
index 38e2cb6..cc48402 100644
--- a/website/src/themes/default.md.css
+++ b/website/src/themes/default.md.css
@@ -36,6 +36,7 @@ h2 {
p {
font-size: 0.85em;
+ line-height: 1.5em;
}
h3 {
@@ -64,11 +65,11 @@ li {
line-height: 1.5em;
color: rgb(30 41 59);
font-size: 0.85em;
+ line-height: 1.5em;
}
blockquote {
text-align: left;
- line-height: 1.75;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 0.85em;
@@ -78,6 +79,7 @@ blockquote {
border-radius: 4px;
background: rgba(27, 31, 35, 0.05);
margin: 1rem 0;
+ line-height: 1.5em;
}
pre {
@@ -143,7 +145,7 @@ th {
text-align: left;
line-height: 1;
white-space: initial;
- color: #009874;
+ color: #333;
background: rgba(27, 31, 35, 0.05);
padding: 0.1em 0.3em;
border-radius: 0.3em;
diff --git a/website/src/themes/simple.md.css b/website/src/themes/simple.md.css
index bde6246..8b0e76f 100644
--- a/website/src/themes/simple.md.css
+++ b/website/src/themes/simple.md.css
@@ -36,6 +36,7 @@ h2 {
p {
font-size: 0.85em;
+ line-height: 1.5em;
}
h3 {
@@ -64,11 +65,11 @@ li {
line-height: 1.5em;
color: rgb(30 41 59);
font-size: 0.85em;
+ line-height: 1.5em;
}
blockquote {
text-align: left;
- line-height: 1.75;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 0.85em;
@@ -78,6 +79,7 @@ blockquote {
border-radius: 4px;
background: rgba(27, 31, 35, 0.05);
margin: 1rem 0;
+ line-height: 1.5em;
}
pre {
diff --git a/website/src/themes/underscore.md.css b/website/src/themes/underscore.md.css
index 609db58..1b8a84d 100644
--- a/website/src/themes/underscore.md.css
+++ b/website/src/themes/underscore.md.css
@@ -33,6 +33,7 @@ h2 {
p {
font-size: 0.85em;
+ line-height: 1.5em;
}
h3 {
@@ -65,7 +66,7 @@ li {
blockquote {
text-align: left;
- line-height: 1.75;
+ line-height: 1.5em;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 0.85em;
@@ -140,12 +141,12 @@ th {
text-align: left;
line-height: 1;
white-space: initial;
- color: #ffb11b;
+ color: #333;
background: rgba(27, 31, 35, 0.05);
padding: 0.1em 0.3em;
border-radius: 0.3em;
font-weight: bold;
- font-size: 1em;
+ font-size: 0.85em;
top: -0.1em;
position: relative;
}