@antv/dumi-theme-antv 0.7.3-beta.1 → 0.7.3-beta.2

package/dist/layouts/DocLayout.js

@@ -1,12 +1,14 @@
-import { Helmet, useLocation, useOutlet, useSiteData } from 'dumi';
-import React, { useEffect } from 'react';
+import { Helmet, useLocation, useOutlet, useServerInsertedHTML, useSiteData } from 'dumi';
+import fs from 'fs';
+import path from 'path';
+import { default as React, useEffect } from 'react';
 import { getPurePathname } from "../utils/location";
 import IndexLayout from "./IndexLayout";
 import ManualLayout from "./ManualLayout";
 
 // 用户手动添加自己的
-import "../slots/_.less";
 import "../slots/global";
+import "../slots/_.less";
 
 /**
  * DocLayout 是 dumi2 的内置 layout 入口，在这里使用页面路径进行区分成自己不同的 Layout。
@@ -57,6 +59,25 @@ export default (function () {
     }
     return outlet;
   }, [purePathname]);
+
+  // 在服务端渲染时注入 CSS 样式
+  useServerInsertedHTML(function () {
+    var manifestPath = path.resolve(process.cwd(), 'dist/asset-manifest.json');
+    var cssContent = '';
+    if (fs.existsSync(manifestPath)) {
+      var manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      var cssFile = manifest['umi.css'];
+      if (cssFile) {
+        var cssPath = path.resolve(process.cwd(), "dist/".concat(cssFile));
+        cssContent = fs.existsSync(cssPath) ? fs.readFileSync(cssPath, 'utf-8') : '';
+      }
+    }
+    return /*#__PURE__*/React.createElement("style", {
+      dangerouslySetInnerHTML: {
+        __html: cssContent
+      }
+    });
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("link", {
     rel: "shortcut icon",
     href: "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original"

package/dist/slots/Loading/index.js

@@ -1,10 +1,18 @@
 import React from 'react';
-import "./index.less";
+import styles from "./index.module.less";
+
+/**
+ * Loading
+ */
 var Loading = function Loading() {
   return /*#__PURE__*/React.createElement("div", {
-    className: "loading-container"
+    style: {
+      position: 'relative',
+      height: '100%',
+      width: '100%'
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "loading-wrapper"
+    className: styles.loading
   }, /*#__PURE__*/React.createElement("div", {
     className: "container"
   }, /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.7.3-beta.1",
+  "version": "0.7.3-beta.2",
   "description": "AntV website theme based on dumi2.",
   "keywords": [
     "dumi",
@@ -67,7 +67,6 @@
     "leancloud-storage": "^4.15.2",
     "lodash-es": "^4.17.21",
     "lodash.merge": "^4.6.2",
-    "mini-css-extract-plugin": "^2.9.2",
     "monaco-editor": "^0.25.2",
     "nprogress": "^0.2.0",
     "p-limit": "^3.1.0",

package/dist/slots/Loading/index.less

@@ -1,168 +0,0 @@
-.loading-container {
-  position: relative;
-  height: 100%;
-  width: 100%;
-}
-
-.loading-wrapper {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 9999;
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  border: 1px solid #f0f0f0;
-}
-
-.container {
-  display: inline-block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin: -50px 0 0 -120px;
-}
-
-.loader {
-  --duration: 3s;
-  width: 44px;
-  height: 44px;
-  position: relative;
-  display: inline-block;
-  margin: 0 16px;
-}
-
-.loader:before {
-  content: ' ';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  position: absolute;
-  display: block;
-  background: #ff700a;
-  top: 37px;
-  left: 19px;
-  transform: translate(-18px, -18px);
-  animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-}
-
-.loader svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.loader svg rect,
-.loader svg polygon,
-.loader svg circle {
-  fill: none;
-  stroke-width: 10px;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-}
-
-.loader svg polygon {
-  stroke-dasharray: 145 76 145 76;
-  stroke-dashoffset: 0;
-  animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-}
-
-.loader svg rect {
-  stroke-dasharray: 192 64 192 64;
-  stroke-dashoffset: 0;
-  animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-}
-
-.loader svg circle {
-  stroke-dasharray: 150 50 150 50;
-  stroke-dashoffset: 75;
-  animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-}
-
-.loader.triangle {
-  width: 48px;
-}
-
-.loader.triangle:before {
-  left: 21px;
-  transform: translate(-10px, -18px);
-  animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-}
-
-.loading-text {
-  text-align: center;
-  height: 40px;
-  line-height: 40px;
-  font-size: 12px;
-  letter-spacing: 0.1em;
-  color: #666;
-}
-
-@keyframes pathTriangle {
-  33% {
-    stroke-dashoffset: 74;
-  }
-  66% {
-    stroke-dashoffset: 147;
-  }
-  100% {
-    stroke-dashoffset: 221;
-  }
-}
-
-@keyframes dotTriangle {
-  33% {
-    transform: translate(0, 0);
-  }
-  66% {
-    transform: translate(10px, -18px);
-  }
-  100% {
-    transform: translate(-10px, -18px);
-  }
-}
-
-@keyframes pathRect {
-  25% {
-    stroke-dashoffset: 64;
-  }
-  50% {
-    stroke-dashoffset: 128;
-  }
-  75% {
-    stroke-dashoffset: 192;
-  }
-  100% {
-    stroke-dashoffset: 256;
-  }
-}
-
-@keyframes dotRect {
-  25% {
-    transform: translate(0, 0);
-  }
-  50% {
-    transform: translate(18px, -18px);
-  }
-  75% {
-    transform: translate(0, -36px);
-  }
-  100% {
-    transform: translate(-18px, -18px);
-  }
-}
-
-@keyframes pathCircle {
-  25% {
-    stroke-dashoffset: 125;
-  }
-  50% {
-    stroke-dashoffset: 175;
-  }
-  75% {
-    stroke-dashoffset: 225;
-  }
-  100% {
-    stroke-dashoffset: 275;
-  }
-}