From f01d52bd5aa8024f4df221c9050916c15b3c31ec Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sun, 4 Jun 2023 21:59:53 +0800 Subject: [PATCH] doc(codemirror-themes-all): update document. --- themes/all/README.md | 164 ++++++++++++++++++++ www/src/pages/extensions/index.tsx | 2 +- www/src/pages/extensions/themes/example.tsx | 6 +- www/src/pages/theme/Preview.tsx | 11 +- www/src/router.tsx | 10 +- 5 files changed, 184 insertions(+), 9 deletions(-) diff --git a/themes/all/README.md b/themes/all/README.md index ac34ae4c9..0643dc555 100644 --- a/themes/all/README.md +++ b/themes/all/README.md @@ -84,6 +84,170 @@ export * from '@uiw/codemirror-theme-vscode'; export * from '@uiw/codemirror-theme-xcode'; ``` +## Themes + +**abcdef** + + + codemirror-theme-abcdef + + +**android studio** + + + codemirror-theme-androidstudio + + +**atom one** + + + codemirror-theme-androidstudio + + +**aura** + + + codemirror-theme-aura + + +**bbedit** + + + codemirror-theme-bbedit + + +**bespin** + + + codemirror-theme-bespin + + +**darcula** + + + codemirror-theme-darcula + + +**dracula** + + + codemirror-theme-dracula + + +**duotone** + + + codemirror-theme-duotone dark + + + + codemirror-theme-duotone light + + +**eclipse** + + + codemirror-theme-eclipse + + +**github** + + + codemirror-theme-github dark + + + + codemirror-theme-github light + + +**gruvbox** + + + codemirror-theme-gruvbox-dark + + + + codemirror-theme-eclipse + + +**material** + + + codemirror-theme-material + + + + codemirror-theme-material + + +**noctis-lilac** + + + codemirror-theme-noctis-lilac + + +**nord** + + + codemirror-theme-nord + + +**okaidia** + + + codemirror-theme-okaidia + + +**solarized** + + + codemirror-theme-solarized + + + + codemirror-theme-solarized + + +**sublime** + + + codemirror-theme-sublime + + +**tokyo-night** + + + codemirror-theme-tokyo-night + + +**tokyo-night-day** + + + codemirror-theme-tokyo-night-day + + +**tokyo-night-storm** + + + codemirror-theme-tokyo-night-storm + + +**vscode** + + + codemirror-theme-vscode dark + + +**xcode** + + + codemirror-theme-xcode dark + + + + codemirror-theme-xcode light + + ## Contributors As always, thanks to our amazing contributors! diff --git a/www/src/pages/extensions/index.tsx b/www/src/pages/extensions/index.tsx index 7f2893283..d07ff12ef 100644 --- a/www/src/pages/extensions/index.tsx +++ b/www/src/pages/extensions/index.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; export const PageWarpper = styled.div` flex: 1; max-width: 980px; - padding: 20px 20px 100px 20px; + padding: 20px 20px 30px 20px; `; export const Content = styled.div` diff --git a/www/src/pages/extensions/themes/example.tsx b/www/src/pages/extensions/themes/example.tsx index c70368064..8ec7ef1d7 100644 --- a/www/src/pages/extensions/themes/example.tsx +++ b/www/src/pages/extensions/themes/example.tsx @@ -1,6 +1,6 @@ -import { FC, PropsWithChildren } from 'react'; +import { FC, PropsWithChildren, useState } from 'react'; +import { Link } from 'react-router-dom'; import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror'; -import { useState } from 'react'; import * as themes from '@uiw/codemirror-themes-all'; import { langs } from '@uiw/codemirror-extensions-langs'; import styled from 'styled-components'; @@ -42,6 +42,8 @@ export const ThemesAllExample: FC> = ({ s return ; })} +
+ All Theme Example ); diff --git a/www/src/pages/theme/Preview.tsx b/www/src/pages/theme/Preview.tsx index 8d28793c0..ab4c3633b 100644 --- a/www/src/pages/theme/Preview.tsx +++ b/www/src/pages/theme/Preview.tsx @@ -11,6 +11,7 @@ interface PreviewProps { path?: any; themePkg?: string; mode?: 'light' | 'dark'; + preview?: 'document' | 'example'; } export const Content = styled.div` @@ -55,7 +56,7 @@ export const Preview: FC> = (props) => { const { themePkg, mode } = props; const { mdData } = useMdData(props.path); const childs = Children.toArray(props.children); - const [previewDoc, setPreviewDoc] = useState(false); + const [previewDoc, setPreviewDoc] = useState(props.preview || 'example'); const themePkgNmae = !!mode ? themePkg?.replace(/-(light|dark)$/, '') : themePkg; const themeName = themePkgNmae?.replace('@uiw/codemirror-theme-', '').replace('-', ' '); const themeExtensionName = themePkgNmae?.replace('@uiw/codemirror-theme-', '') + (!!mode ? `-${mode}` : ''); @@ -67,8 +68,8 @@ export const Preview: FC> = (props) => {
{themeName} Theme
-
@@ -77,8 +78,8 @@ export const Preview: FC> = (props) => { {childs.map((child, key) => { return cloneElement(child as any, { key, source: mdData?.source }); })} - {mdData && (previewDoc || !themePkg) && } - {!previewDoc && themePkg && themeExtensionName && } + {mdData && (previewDoc === 'document' || !themePkg) && } + {previewDoc === 'example' && themePkg && themeExtensionName && } ); diff --git a/www/src/router.tsx b/www/src/router.tsx index 94bfcc892..9627e9244 100644 --- a/www/src/router.tsx +++ b/www/src/router.tsx @@ -167,6 +167,10 @@ export const routes: MenuRouteObject[] = [ index: true, element: , }, + { + path: 'all', + element: , + }, { path: 'home', label: 'Home', @@ -180,7 +184,11 @@ export const routes: MenuRouteObject[] = [ path: 'doc', label: 'Document', element: ( - import('@uiw/codemirror-themes/README.md')} /> + import('@uiw/codemirror-themes/README.md')} + /> ), }, {