website: modify theme document & add badges.

Author: jaywcjlove

package.json

@@ -25,19 +25,19 @@
     "node": ">=16.0.0"
   },
   "devDependencies": {
-    "@kkt/ncc": "^1.0.13",
     "@kkt/less-modules": "^7.2.0",
+    "@kkt/ncc": "^1.0.13",
     "@types/react-test-renderer": "~18.0.0",
     "husky": "~8.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-environment-node": "^29.5.0",
+    "jest-watch-typeahead": "^2.2.2",
     "kkt": "^7.2.0",
     "lerna": "^7.0.0",
     "lint-staged": "^14.0.1",
     "prettier": "^3.0.2",
     "react-test-renderer": "~18.2.0",
-    "tsbb": "^4.1.5",
-    "jest": "^29.5.0",
-    "jest-watch-typeahead": "^2.2.2",
-    "jest-environment-jsdom": "^29.5.0",
-    "jest-environment-node": "^29.5.0"
+    "tsbb": "^4.1.5"
   }
 }

www/package.json

@@ -81,8 +81,7 @@
     "@uiw/react-codemirror": "4.21.11",
     "@uiw/react-github-corners": "~1.5.14",
     "@uiw/react-markdown-preview": "^4.1.13",
-    "@uiw/react-shields": "~1.1.3",
-    "@uiw/reset.css": "~1.0.5",
+    "@uiw/react-shields": "^1.3.2",
     "@wcj/dark-mode": "~1.0.12",
     "code-example": "^3.3.6",
     "markdown-react-code-preview-loader": "^2.1.2",

www/src/pages/home/index.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import styled, { keyframes } from 'styled-components';
 import GitHubCorners from '@uiw/react-github-corners';
-import Github from '@uiw/react-shields/esm/github';
-import Npm from '@uiw/react-shields/esm/npm';
+import Github from '@uiw/react-shields/github';
+import Npm from '@uiw/react-shields/npm';
 import BackToUp from '@uiw/react-back-to-top';
 import logo from '../../logo.png';
 import Example from './Example';
@@ -71,8 +71,13 @@ const Buttons = styled.div`
     &:hover {
       background-color: var(--color-fg-muted);
       color: var(--color-theme-bg);
-      transition: background-color 0.25s linear, color 0.05s linear, opacity 0.25s linear, filter 0.25s linear,
-        visibility 0.25s linear, transform 0.25s linear;
+      transition:
+        background-color 0.25s linear,
+        color 0.05s linear,
+        opacity 0.25s linear,
+        filter 0.25s linear,
+        visibility 0.25s linear,
+        transform 0.25s linear;
     }
     &:last-child {
       color: var(--color-prettylights-syntax-keyword);
@@ -91,7 +96,9 @@ const Footer = styled.div`
 
 const AppHeader = styled.div`
   background-color: var(--color-canvas-subtle);
-  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0px 2px 10px 0px rgba(0, 0, 0, 0.1),
+    0 1px rgba(0, 0, 0, 0.1);
   padding: 120px 20px 40px 20px;
   border-bottom: 1px solid var(--color-canvas-default);
   position: relative;

www/src/pages/theme/Preview.tsx

@@ -1,5 +1,6 @@
 import { FC, Children, PropsWithChildren, cloneElement, useState } from 'react';
 import styled from 'styled-components';
+import Npm from '@uiw/react-shields/npm';
 import { useMdData } from '../../components/useMdData';
 import { Warpper } from '../../components/Warpper';
 import { PreCode } from './themes/PreCode';
@@ -19,10 +20,7 @@ export const Content = styled.div`
   flex: 1;
 `;
 
-export const Button = styled.button`
-  position: absolute;
-  right: 0;
-`;
+export const Button = styled.button``;
 
 export const Title = styled.div`
   font-size: 24px;
@@ -52,6 +50,13 @@ export const Header = styled.div`
   }
 `;
 
+const ButtonGroup = styled.div`
+  float: right;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
 export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
   const { themePkg, mode } = props;
   const { mdData } = useMdData(props.path);
@@ -61,17 +66,28 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
   const themeName = themePkgNmae?.replace('@uiw/codemirror-theme-', '').replace('-', ' ');
   const themeExtensionName = themePkgNmae?.replace('@uiw/codemirror-theme-', '') + (!!mode ? `-${mode}` : '');
   const extension = themeData[toCamelCase(themeExtensionName) as keyof typeof themeData];
+  const repoName = themePkgNmae?.replace(/@uiw\//, '');
   return (
     <Warpper>
       <Content>
         {props.themePkg && (
           <Header>
             <Title>{themeName} Theme</Title>
-            <div>
+            <ButtonGroup>
+              <Npm.Downloads
+                scope="@uiw"
+                packageName={repoName}
+                href={`https://www.npmjs.com/package/@uiw/${repoName}`}
+              />
+              <Npm.Version
+                scope="@uiw"
+                packageName={repoName}
+                href={`https://www.npmjs.com/package/@uiw/${repoName}`}
+              />
               <Button onClick={() => setPreviewDoc(previewDoc === 'document' ? 'example' : 'document')}>
                 {previewDoc === 'document' ? 'Preview Theme Example' : 'Preview Document'}
               </Button>
-            </div>
+            </ButtonGroup>
             <PreCode value={`npm install ${themePkg} --save`} />
           </Header>
         )}