Merge pull request #15 from phshy0607/dev

0.8.2
BlizzBolts · Apr 21, 2022 · 63ec167 · 63ec167
2 parents 4477f6c + 0b0f3dc
commit 63ec167
Show file tree

Hide file tree

Showing 19 changed files with 361 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `Security` in case of vulnerabilities.
 
 
+## [0.8.2] - Unreleased
+
+### Added
+- console more info for unmatched sandbox
+- `docit.config.js` now supports `vite` options
+- Iframe now has a tool bar which can view qrcode and open in new tab
+
+### Fixes
+- remove outer div of sandbox
+
+### Changed
+- changed toc and sidebar style
+- adjust mobile view sandbox code height to 640px
+- hide toc when no toc at all
+
+
 ## [0.8.1] - 2022-04-18
 
 ### Fixed

diff --git a/docs/document/live-block.mdx b/docs/document/live-block.mdx
@@ -69,6 +69,7 @@ Docit also support live mobile block. Add a `mobile` keyword after `live` to ena
 
 ```jsx live mobile
 import { DemoBlock } from "../components/DemoBlock";
+
 <DemoBlock />;
 ```
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@blizzbolts/docit",
-  "version": "0.8.1",
+  "version": "0.8.2-beta7",
   "license": "MIT",
   "bin": {
     "docit": "bin/docit.js"
@@ -77,6 +77,7 @@
     "minimist": "^1.2.5",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
+    "qrcode": "^1.5.0",
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",

diff --git a/scripts/release.js b/scripts/release.js
@@ -0,0 +1,11 @@
+// 研发流程
+// feature分支从Master拉
+// dev分支为预发布分支
+// dev分支验证完成后在master分支进行发布，修改Changelog
+
+// beta release
+// beta版在feature上发,
+// changelog体现新版本，有unreleased
+// build => .... => publish
+
+// main release
diff --git a/src/client/built-in/ShowCode/styled.ts b/src/client/built-in/ShowCode/styled.ts
@@ -47,6 +47,7 @@ export const ShowCodeContainer = styled.div<MobileView>`
     flex: ${(props) => props.mobileView && "1 1 auto"};
     overflow: ${(props) => props.mobileView && "auto"};
     margin-right: ${(props) => props.mobileView && "2em"};
+    max-height: ${(props) => props.mobileView && "640px"};
 
     pre {
       height: ${(props) => props.mobileView && "100%"};
@@ -57,6 +58,10 @@ export const ShowCodeContainer = styled.div<MobileView>`
         height: ${(props) => props.mobileView && "100%"};
       }
     }
+    @media (max-width: 1024px) {
+      margin-right: 0;
+      margin-top: 2em;
+    }
   }
 
   ${RenderWindow} {

diff --git a/src/client/components/Document/styled.ts b/src/client/components/Document/styled.ts
@@ -21,7 +21,11 @@ export const StyledMarkdown = styled.div`
   margin-bottom: 100px;
   width: calc(100% - var(--toc-width));
 
-  @media (max-width: 768px) {
+  :last-child {
+    width: 100%;
+  }
+
+  @media (max-width: 1024px) {
     padding: 0 1em;
     width: 100%;
   }

diff --git a/src/client/components/IFrameTools/index.tsx b/src/client/components/IFrameTools/index.tsx
@@ -0,0 +1,44 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { IFrameToolsProps } from "./types";
+import { StyledIFrameTools, StyledQrCode, StyledIconWrapper } from "./styled";
+import qrcode from "qrcode";
+import { Svgs } from "../Svgs/index";
+
+const IFrameTools: React.FC<IFrameToolsProps> = (props) => {
+  const { moduleId } = props;
+  const [qrCodeSrc, setQrCodeSrc] = useState(null);
+  const url = useMemo(() => {
+    return `${import.meta.env.BASE_URL}#sandbox?moduleId=${moduleId}`;
+  }, [moduleId]);
+
+  useEffect(() => {
+    qrcode
+      .toDataURL(url, {
+        margin: 0,
+      })
+      .then((res) => {
+        setQrCodeSrc(res);
+      });
+  }, [url]);
+
+  return (
+    <StyledIFrameTools className="bottom-tools">
+      {qrCodeSrc && (
+        <StyledQrCode src={qrCodeSrc}>
+          <div className="qrcode-wrapper">
+            <Svgs.QRCode height="20px" width="20px" />
+          </div>
+        </StyledQrCode>
+      )}
+      <StyledIconWrapper onClick={() => window.open(url)}>
+        <Svgs.Forward
+          style={{ cursor: "pointer" }}
+          height="20px"
+          width="20px"
+        />
+      </StyledIconWrapper>
+    </StyledIFrameTools>
+  );
+};
+
+export default IFrameTools;
diff --git a/src/client/components/IFrameTools/styled.ts b/src/client/components/IFrameTools/styled.ts
@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+export const StyledIFrameTools = styled.div`
+  visibility: hidden;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+`;
+
+export const StyledQrCode = styled.div<{ src: string }>`
+  position: relative;
+  margin-right: 12px;
+  .qrcode-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .qrcode-wrapper:hover:after {
+    content: "";
+    position: absolute;
+    top: -100px;
+    left: 0px;
+    width: 80px;
+    height: 80px;
+    background-image: url(${(props) => props.src});
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+`;
+
+export const StyledIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+`;
diff --git a/src/client/components/IFrameTools/types.ts b/src/client/components/IFrameTools/types.ts
@@ -0,0 +1,3 @@
+export interface IFrameToolsProps {
+  moduleId
+}
diff --git a/src/client/components/SandBox/index.tsx b/src/client/components/SandBox/index.tsx
@@ -1,6 +1,8 @@
 import { useQuery } from "../../hooks/useQuery";
 import React, { useEffect, useRef, useState } from "react";
 import sandboxes from "virtual:sandboxes";
+import IFrameTools from "../IFrameTools/index";
+import { StyledSandBox } from "./styled";
 
 const Sandbox: React.FC = () => {
   const query = useQuery();
@@ -15,13 +17,19 @@ const Sandbox: React.FC = () => {
         ComponentRef.current = Component;
         update({});
       });
+    } else {
+      console.warn("No Matching Sandbox!", sandboxes);
+      console.log({ query, sandboxes });
     }
   }, []);
 
   return (
-    <div>
-      <ComponentRef.current />
-    </div>
+    <StyledSandBox>
+      <div style={{ height: "100vh" }}>
+        <ComponentRef.current />
+      </div>
+      <IFrameTools moduleId={query.moduleId} />
+    </StyledSandBox>
   );
 };
 

diff --git a/src/client/components/SandBox/styled.ts b/src/client/components/SandBox/styled.ts
@@ -0,0 +1,8 @@
+
+import styled from 'styled-components'
+
+export const StyledSandBox = styled.div`
+  :hover .bottom-tools {
+    visibility: visible;
+  }
+`
diff --git a/src/client/components/Svgs/index.tsx b/src/client/components/Svgs/index.tsx
@@ -90,9 +90,33 @@ const AnimatedLoading: React.FC<SvgProps> = (props) => {
   );
 };
 
+const QRCode: React.FC<SvgProps> = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M11.875 15.556v1.319h2.986a.14.14 0 0 1 .139.139v.764a.139.139 0 0 1-.139.139h-3.889a.139.139 0 0 1-.139-.14v-2.221a.14.14 0 0 1 .14-.14h.763a.14.14 0 0 1 .139.14Zm5.89.099c.084 0 .152.068.152.15v1.96a.15.15 0 0 1-.151.152h-.83a.15.15 0 0 1-.15-.151v-1.96c0-.083.068-.151.15-.151h.83Zm-2.515-1.072c.092 0 .167.075.167.167v.917c0 .08-.057.147-.133.163l-.034.003h-.917a.167.167 0 0 1-.166-.166v-.917c0-.092.075-.167.166-.167h.917Zm.028-3.75c.076 0 .139.067.139.148v.815c0 .082-.063.148-.14.148h-3.402v1.112l-.903 1.11c-.076 0-.139-.066-.139-.147V10.98c0-.081.063-.148.14-.148h4.305Zm2.496 2.084c.078 0 .143.075.143.166V14c0 .08-.05.148-.114.163l-.03.004H15.56c-.07 0-.127-.057-.14-.133L15.417 14v-.917c0-.091.064-.166.143-.166h2.214Zm-3.774 0c.092 0 .167.075.167.166V14a.167.167 0 0 1-.167.167h-3a.167.167 0 0 1-.167-.167v-.917c0-.091.075-.166.167-.166h3Zm3.75-2.084c.092 0 .167.075.167.167v.917c0 .08-.057.147-.133.163l-.034.003h-.917a.167.167 0 0 1-.163-.133l-.003-.033V11c0-.092.075-.167.166-.167h.917Zm-2.485 0c.083 0 .152.075.152.167v.917c0 .092-.068.166-.152.166h-3.863c-.084 0-.152-.074-.152-.166V11c0-.092.068-.167.152-.167h3.863ZM9.167 3.575v4.1c0 .824-.668 1.492-1.492 1.492h-4.1a1.491 1.491 0 0 1-1.492-1.492v-4.1c0-.824.668-1.492 1.492-1.492h4.1c.824 0 1.492.668 1.492 1.492Zm8.75 0v4.1c0 .824-.668 1.492-1.492 1.492h-4.1a1.491 1.491 0 0 1-1.492-1.492v-4.1c0-.824.668-1.492 1.492-1.492h4.1c.824 0 1.492.668 1.492 1.492ZM7.564 3.333H3.686a.353.353 0 0 0-.35.312l-.003.04v3.88c0 .178.134.328.312.35l.04.002h3.88c.178 0 .328-.134.35-.312l.002-.04v-3.88a.353.353 0 0 0-.312-.35l-.04-.002Zm8.75 0h-3.878a.353.353 0 0 0-.35.312l-.003.04v3.88c0 .178.134.328.312.35l.04.002h3.88c.178 0 .328-.134.35-.312l.002-.04v-3.88a.353.353 0 0 0-.312-.35l-.04-.002ZM6.23 4.723c.208 0 .377.168.377.376V6.23a.377.377 0 0 1-.377.377H5.1a.377.377 0 0 1-.378-.377V5.1c0-.209.169-.378.377-.378H6.23Zm2.937 7.602v4.1c0 .824-.668 1.492-1.492 1.492h-4.1a1.491 1.491 0 0 1-1.492-1.492v-4.1c0-.824.668-1.492 1.492-1.492h4.1c.824 0 1.492.668 1.492 1.492Zm-1.603-.242H3.686a.353.353 0 0 0-.35.312l-.003.04v3.88c0 .178.134.328.312.35l.04.002h3.88c.178 0 .328-.134.35-.312l.002-.04v-3.88a.353.353 0 0 0-.312-.35l-.04-.002Zm-1.334 1.39c.208 0 .377.168.377.376v1.131a.377.377 0 0 1-.377.377H5.1a.377.377 0 0 1-.378-.377v-1.13c0-.209.169-.378.377-.378H6.23Zm8.75-8.75c.208 0 .377.168.377.376V6.23a.377.377 0 0 1-.377.377h-1.13a.377.377 0 0 1-.378-.377V5.1c0-.209.169-.378.377-.378h1.131Z"
+        fill="#333"
+      ></path>
+    </svg>
+  );
+};
+
+export const Forward: React.FC<SvgProps> = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M10.417 1.833v.917a.167.167 0 0 1-.167.166H4.167c-.666 0-1.21.521-1.248 1.177l-.002.074v11.666c0 .666.52 1.21 1.176 1.248l.074.002h11.666c.666 0 1.21-.52 1.248-1.176l.002-.074V9.75c0-.092.075-.167.167-.167h.917a.167.167 0 0 0 .166-.166V7.25a.167.167 0 0 0-.166-.167h-.917a.167.167 0 0 1-.167-.166V3.714L11.069 9.73a.167.167 0 0 1-.236 0l-.648-.648a.167.167 0 0 1 0-.236l5.928-5.928h-3.03a.167.167 0 0 1-.166-.167v-.917c0-.092.074-.166.166-.166h4.625c.346 0 .625.28.625.625v13.541a2.5 2.5 0 0 1-2.5 2.5H4.167a2.5 2.5 0 0 1-2.5-2.5V4.167a2.5 2.5 0 0 1 2.5-2.5h6.083c.092 0 .167.074.167.166Z"
+        fill="#333"
+      ></path>
+    </svg>
+  );
+};
+
 export const Svgs = {
   Twitter,
   Github,
   ToggleBtn,
   AnimatedLoading,
+  QRCode,
+  Forward,
 };
diff --git a/src/client/components/Toc/index.tsx b/src/client/components/Toc/index.tsx
@@ -4,7 +4,12 @@ import { useHistory, useLocation } from "react-router";
 import { useQuery } from "../../hooks/useQuery";
 import { parseQueryToSearch } from "../../utils/url";
 import appData from "virtual:appData";
-import { StyledToc, StyledTocItem, StyledTocItemTitle } from "./styled";
+import {
+  StyledToc,
+  StyledTocItem,
+  StyledTocItemTitle,
+  StyledTocTitle,
+} from "./styled";
 
 const { markdowns } = appData;
 
@@ -56,7 +61,12 @@ const Toc = () => {
     }
   };
 
-  return <StyledToc>{parse(curr?.toc, 0)}</StyledToc>;
+  return isEmpty(curr?.toc) ? null : (
+    <StyledToc>
+      <StyledTocTitle>Table of Content</StyledTocTitle>
+      {parse(curr?.toc, 0)}
+    </StyledToc>
+  );
 };
 
 export { Toc };
diff --git a/src/client/components/Toc/styled.ts b/src/client/components/Toc/styled.ts
@@ -16,14 +16,21 @@ export const StyledToc = styled.div`
     color: var(--c-brand);
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 1024px) {
     display: none;
   }
 `;
 
+export const StyledTocTitle = styled.div`
+  font-weight: bold;
+  font-size: 18px;
+  color: var(--c-brand);
+`;
+
 export const StyledTocItemTitle = styled.div`
   margin-bottom: 12px;
   cursor: pointer;
+  font-size: 14px;
   :hover {
     opacity: 0.6;
     transition: opacity 200ms linear;
@@ -35,5 +42,5 @@ export const StyledTocItem = styled.div.attrs<{ level: number }>((props) => {
     "data-level": props.level,
   };
 })<{ level: number; empty: boolean }>`
-  padding-left: ${(props) => (props.empty ? "12px" : "0")};
+  padding-left: ${(props) => (props.empty ? "8px" : "0")};
 `;
diff --git a/src/client/styled/vars.ts b/src/client/styled/vars.ts
@@ -2,9 +2,9 @@ import { createGlobalStyle } from "styled-components";
 
 export const CssVariables = createGlobalStyle`
   :root {
-    --sidebar-width: 20em;
+    --sidebar-width: 15em;
     --header-height: 4rem;
-    --toc-width: 280px;
+    --toc-width: 15em;
 
     --font-size: 16px;
     --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@@ -31,7 +31,7 @@ export const CssVariables = createGlobalStyle`
     --c-code-bg: #ececec;
     --c-code-keyword: #89b482;
     --c-code-function: #a9b665;
-    --c-code-attr: #fff;
+    --c-code-attr: #D8A657;
     --c-code-string: #D8A657;
     --c-code-built-in: #7DAEA3;
     --c-code-name: #e78a4e;

diff --git a/src/node/config.ts b/src/node/config.ts
@@ -17,5 +17,6 @@ export const resolveConfig = async (
       : path.resolve(CLIENT_PATH, "./components/DefaultProvider/index.js"),
     publicPath: command === "build" ? config.publicPath : "/",
     socials: config.socials,
+    vite: config.vite,
   };
 };
diff --git a/src/node/plugins/index.ts b/src/node/plugins/index.ts
@@ -1,4 +1,4 @@
-import { Plugin, defineConfig, UserConfig } from "vite";
+import { Plugin, defineConfig, mergeConfig } from "vite";
 import fsx from "fs-extra";
 import path from "path";
 import react from "@vitejs/plugin-react";
@@ -24,7 +24,6 @@ export const docit = async (config: ResolvedUserConfig): Promise<Plugin[]> => {
       const baseConfig = defineConfig({
         root: config.base,
         base: config.publicPath,
-        cacheDir: "node_modules/.docit",
         optimizeDeps: {
           include: [
             "react",
@@ -42,6 +41,7 @@ export const docit = async (config: ResolvedUserConfig): Promise<Plugin[]> => {
             "core-js",
             "highlight.js",
             "react-frame-component",
+            "qrcode",
           ],
         },
         build: {
@@ -59,7 +59,7 @@ export const docit = async (config: ResolvedUserConfig): Promise<Plugin[]> => {
         clearScreen: false,
         publicDir: path.resolve(config.docs, "./assets"),
       });
-      return baseConfig as UserConfig;
+      return mergeConfig(baseConfig, config.vite);
     },
     transform(_, id) {
       if (id.endsWith("?needParse")) {
-Original file line number
+Diff line change
@@ Expand Up @@
     ```jsx live mobile
     import { DemoBlock } from "../components/DemoBlock";
     <DemoBlock />;
     ```
@@ Expand Down @@