style: modify theme style.

README.md

@@ -2,10 +2,12 @@
   <h1 align="center">微信公众号 Markdown 编辑器</h1>
 </div>
 
-![微信公众号 Markdown 编辑器](https://user-images.githubusercontent.com/1680273/188264183-a6b8cb6a-92e1-4a73-afc5-4f0234b26ed3.png)
+[![微信公众号 Markdown 编辑器](https://user-images.githubusercontent.com/1680273/188264183-a6b8cb6a-92e1-4a73-afc5-4f0234b26ed3.png)](https://jaywcjlove.github.io/wxmp)
 
 微信公众号文章 Markdown 在线编辑器，使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由于发版本麻烦，和一些功能无法扩展停滞开发了，未来不再开发 Chrome 的插件(暂存在 chrome 分支)，通过 web 版本定制更丰富的功能。
 
+[![Markdown 编辑器桌面应用](https://user-images.githubusercontent.com/1680273/188407235-ead43d61-2ef8-416a-926f-396d8b824b33.png)](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 标题样式定义 */

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', // 无标题栏
+      // titleBarStyle: 'hiddenInset', // 无标题栏
-      frame: false, // 创建无边窗口
+      // frame: false, // 创建无边窗口
-      width: 800,
+      width: 850,
       height: 600,
       minWidth: 850,
+      minHeight: 600,
       center: true,
-      maximizable: true,
+      // maximizable: true,
-      minimizable: true,
+      // minimizable: true,
-      resizable: true,
+      // resizable: true,
       webPreferences: {
         // 多线程
         nodeIntegrationInWorker: true,

electron/preload/src/index.ts

@@ -1,18 +1,4 @@
-const styleStr = `.siderbar {
+const styleStr = `.header .logo {}`;
-  -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;
-}`;
 
 document.addEventListener('DOMContentLoaded', () => {
   const head = document.querySelector('head');

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 (
     <Warpper className="wmde-markdown-color">
-      <Header>
+      <HeaderPlace>
-        <Article>
+        <Header className="header">
-          <Logo width={28} height={28} />
+          <Article className="logo">
-          <Title>
+            <Logo width={28} height={28} />
-            微信公众号排版编辑器
+            <Title>
-            <sup> v{VERSION} </sup>
+              微信公众号排版编辑器
-          </Title>
+              <sup> v{VERSION} </sup>
-          {isLoading && <Loading />}
+            </Title>
-        </Article>
+            {isLoading && <Loading />}
-        <Section>
+          </Article>
-          <NavLink to="/">首页</NavLink>
+          <Section>
-          <NavLink to="/editor/theme">编辑主题</NavLink>
+            <NavLink to="/">首页</NavLink>
-          <NavLink to="/doc">文档</NavLink>
+            <NavLink to="/editor/theme">编辑主题</NavLink>
-          <dark-mode permanent dark="Dark" light="Light" />
+            <NavLink to="/doc">文档</NavLink>
-          <a href="https://github.com/jaywcjlove/wxmp" target="__blank">
+            <dark-mode permanent dark="Dark" light="Light" />
-            <GithubIcon width={23} height={23} />
+            <a href="https://github.com/jaywcjlove/wxmp" target="__blank">
-          </a>
+              <GithubIcon width={23} height={23} />
-        </Section>
+            </a>
-      </Header>
+          </Section>
+        </Header>
+      </HeaderPlace>
       <Outlet />
     </Warpper>
   );

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) => {

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 (
-    <Warpper>
+    <MarkdownEditor
-      <MarkdownEditor
+      value={markdown}
-        value={markdown}
+      toolbars={commands}
-        toolbars={commands}
+      theme={themeValue}
-        theme={themeValue}
+      readOnly={isLoading}
-        readOnly={isLoading}
+      toolbarsMode={[cssCommand, previeTheme, copy, 'fullscreen', 'preview']}
-        toolbarsMode={[cssCommand, previeTheme, copy, 'fullscreen', 'preview']}
+      extensions={[EditorView.lineWrapping]}
-        extensions={[EditorView.lineWrapping]}
+      renderPreview={Preview}
-        renderPreview={Preview}
+      previewWidth="420px"
-        previewWidth="420px"
+      onChange={handleChange}
-        onChange={handleChange}
+      visible={true}
-        visible={true}
+      height="calc(100vh - 4.6rem)"
-        height="calc(100vh - 4.70rem)"
+    />
-      />
-    </Warpper>
   );
 };

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';
-
+import { Warpper } from '../home/Preview';
-const Warpper = styled.div`
-  width: 375px;
-  padding: 20px;
-  box-shadow: 0 0 60px rgb(0 0 0 / 10%);
-  min-height: 100%;
-`;
 
 export const Preview = (props: MarkdownPreviewProps) => {
   const { css, markdown } = useContext(Context);

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 (
-    <Warpper>
+    <MarkdownEditor
-      <MarkdownEditor
+      value={css}
-        value={css}
+      theme={value}
-        theme={value}
+      readOnly={isLoading}
-        readOnly={isLoading}
+      toolbars={commands}
-        toolbars={commands}
+      toolbarsMode={toolbarsMode}
-        toolbarsMode={toolbarsMode}
+      reExtensions={[EditorView.lineWrapping, cssLang()]}
-        reExtensions={[EditorView.lineWrapping, cssLang()]}
+      renderPreview={Preview}
-        renderPreview={Preview}
+      previewWidth="420px"
-        previewWidth="420px"
+      onChange={handleChange}
-        onChange={handleChange}
+      visible={true}
-        visible={true}
+      height="calc(100vh - 4.6rem)"
-        height="calc(100vh - 4.92rem)"
+    />
-      />
-    </Warpper>
   );
 };

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 {

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;

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 {

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;
 }