website: Add edit button.

uiwjs · Dec 29, 2021 · 459aee4 · 459aee4
1 parent f28bcfe
commit 459aee4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/website/src/components/Markdown.module.less b/website/src/components/Markdown.module.less
@@ -4,6 +4,19 @@
   border-radius: 16px;
   max-width: 860px;
   margin: 0 auto;
+  padding-bottom: 20px;
+  .editor {
+    margin-left: 25px;
+    padding: 3px 5px;
+    background: #2196f3;
+    border-radius: 3px;
+    text-decoration: initial;
+    color: #fff;
+    transition: all 0.3s;
+    &:hover {
+      background-color: #3f51b4;
+    }
+  }
 }
 
 .warpper {

diff --git a/website/src/components/Markdown.tsx b/website/src/components/Markdown.tsx
@@ -7,6 +7,19 @@ interface MarkdownState {
   mdStr: string;
 }
 
+const EditorUrl = ({ editorUrl }: { editorUrl?: string }) => {
+  return editorUrl ? (
+    <a
+      className={styles.editor}
+      target="_blank"
+      rel="noreferrer"
+      href={`https://github.com/uiwjs/react-color/edit/main${editorUrl}`}
+    >
+      Edit this page
+    </a>
+  ) : null;
+};
+
 export default class Markdown extends Component<MarkdownProps, MarkdownState> {
   constructor(props: MarkdownProps) {
     super(props);
@@ -32,6 +45,7 @@ export default class Markdown extends Component<MarkdownProps, MarkdownState> {
         <div className={styles.markdown}>
           {this.example && <div className={styles.example}>{this.example}</div>}
           <MarkdownPreview source={this.state.mdStr.replace(/([\s\S]*)<!--dividing-->/, '')} style={{ padding: '20px 26px' }} />
+          <EditorUrl editorUrl={this.editorUrl} />
         </div>
         <div className={styles.footer}>
           <a href="https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color/file/README.md" target="__blank">