feat: add electron app.

website/src/pages/docs/index.tsx

@@ -0,0 +1,17 @@
+import MarkdownEditor from '@uiw/react-markdown-editor';
+import styled from 'styled-components';
+import { markdownString } from '../../store/context';
+
+const Warpper = styled.div`
+  max-width: 59rem;
+  margin: 0 auto 0 auto;
+  padding: 0 1rem 3rem 1rem;
+`;
+
+export const DocsPage = () => {
+  return (
+    <Warpper>
+      <MarkdownEditor.Markdown source={markdownString} />
+    </Warpper>
+  );
+};

website/src/pages/home/Preview.tsx

@@ -0,0 +1,19 @@
+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%;
+`;
+
+export const Preview = (props: MarkdownPreviewProps) => {
+  const { css } = useContext(Context);
+  const html = markdownToHTML(props.source || '', css);
+  return <Warpper contentEditable spellCheck={false} dangerouslySetInnerHTML={{ __html: html }} />;
+};

website/src/pages/home/index.tsx

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

website/src/pages/theme/Preview.tsx

@@ -0,0 +1,19 @@
+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%;
+`;
+
+export const Preview = (props: MarkdownPreviewProps) => {
+  const { css, markdown } = useContext(Context);
+  const html = markdownToHTML(markdown, css);
+  return <Warpper contentEditable spellCheck={false} dangerouslySetInnerHTML={{ __html: html }} />;
+};

website/src/pages/theme/editor.tsx

@@ -0,0 +1,35 @@
+import MarkdownEditor, { IMarkdownEditor } from '@uiw/react-markdown-editor';
+import { useContext } from 'react';
+import { EditorView } from '@codemirror/view';
+import { css as cssLang } from '@codemirror/lang-css';
+import { Preview } from './Preview';
+import { copy } from '../../commands/copy';
+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];
+  const toolbarsMode: IMarkdownEditor['toolbarsMode'] = [previeTheme, copy, 'fullscreen', 'preview'];
+  const { theme, css, setCss, isLoading } = useContext(Context);
+  const value = themes[theme].value;
+  const handleChange = (value: string) => setCss(value);
+  return (
+    <Warpper>
+      <MarkdownEditor
+        value={css}
+        theme={value}
+        readOnly={isLoading}
+        toolbars={commands}
+        toolbarsMode={toolbarsMode}
+        reExtensions={[EditorView.lineWrapping, cssLang()]}
+        renderPreview={Preview}
+        onChange={handleChange}
+        visible={true}
+        height="calc(100vh - 4.92rem)"
+      />
+    </Warpper>
+  );
+};