@umijs/plugin-docs 4.0.3 → 4.0.6

package/client/theme-doc/Search.tsx

@@ -112,7 +112,7 @@ export default () => {
             <components.Link
               to={(isFromPath ? currentLanguage?.locale : '') + r.href}
               key={i}
-              onClick={() => (document.activeElement as HTMLElement)?.blur()}
+              onClick={() => scrollToAnchor(r.href)}
               className="group outline-none search-result"
               onFocus={() => setIsFocused(true)}
               onBlur={() => setIsFocused(false)}
@@ -206,3 +206,18 @@ function handleKeyUp(e: KeyboardEvent) {
     document.activeElement?.previousSibling as HTMLDivElement | undefined
   )?.focus();
 }
+
+function scrollToAnchor(to: string) {
+  const hash = to.match(/(#[^&?]*)/)?.[1] || '';
+
+  (document.activeElement as HTMLElement)?.blur();
+
+  window.requestAnimationFrame(() => {
+    const elm = document.getElementById(hash.substring(1));
+    if (elm) {
+      elm.scrollIntoView();
+    } else {
+      window.scrollTo(0, 0);
+    }
+  });
+}

package/client/theme-doc/tailwind.css

@@ -3,28 +3,28 @@
 @tailwind utilities;
 
 article h1 {
-  @apply text-4xl font-bold tracking-tight mt-2 my-4 dark:text-white;
+  @apply text-4xl font-bold tracking-tight mt-2 my-4 dark:text-white title-link;
 }
 
 article h2 {
-  @apply text-3xl font-semibold tracking-tight mt-10 dark:text-white;
+  @apply text-3xl font-semibold tracking-tight mt-10 dark:text-white title-link;
   @apply pb-1 border-b;
 }
 
 article h3 {
-  @apply text-2xl font-semibold tracking-tight mt-8 dark:text-white;
+  @apply text-2xl font-semibold tracking-tight mt-8 dark:text-white title-link;
 }
 
 article h4 {
-  @apply text-xl font-semibold tracking-tight mt-8 dark:text-white;
+  @apply text-xl font-semibold tracking-tight mt-8 dark:text-white title-link;
 }
 
 article h5 {
-  @apply text-lg font-semibold tracking-tight mt-8 dark:text-white;
+  @apply text-lg font-semibold tracking-tight mt-8 dark:text-white title-link;
 }
 
 article h6 {
-  @apply text-base font-semibold tracking-tight mt-8 dark:text-white;
+  @apply text-base font-semibold tracking-tight mt-8 dark:text-white title-link;
 }
 
 article p {
@@ -223,6 +223,34 @@ h6 {
 }
 
 @layer components {
+
+  .title-link a {
+    float: left;
+    margin-top: 0.1em;
+    margin-left: -24px;
+    width: 20px;
+    padding-right: 4px;
+    line-height: 1;
+    box-sizing: border-box;
+    background: none;
+    opacity: 0
+  }  
+
+  .title-link:hover a{
+    opacity: 1
+  }
+
+  .title-link span{
+    display: none;
+  }
+  
+  .title-link a::after{
+    content: "#";
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 20px;
+  }
+
   .features-dark {
     @apply bg-gray-900;
     background-image: radial-gradient(#2a2a2a 20%, transparent 20%);

package/client/theme-doc/tailwind.out.css

@@ -1543,6 +1543,33 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+article h1 a {
+  float: left;
+  margin-top: 0.1em;
+  margin-left: -24px;
+  width: 20px;
+  padding-right: 4px;
+  line-height: 1;
+  box-sizing: border-box;
+  background: none;
+  opacity: 0
+}
+
+article h1:hover a{
+  opacity: 1
+}
+
+article h1 span{
+  display: none;
+}
+
+article h1 a::after{
+  content: "#";
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 20px;
+}
+
 article h1 {
   margin-bottom: 1rem;
   margin-top: 0.5rem;
@@ -1557,6 +1584,33 @@ article h1 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+article h2 a {
+  float: left;
+  margin-top: 0.1em;
+  margin-left: -24px;
+  width: 20px;
+  padding-right: 4px;
+  line-height: 1;
+  box-sizing: border-box;
+  background: none;
+  opacity: 0
+}
+
+article h2:hover a{
+  opacity: 1
+}
+
+article h2 span{
+  display: none;
+}
+
+article h2 a::after{
+  content: "#";
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 20px;
+}
+
 article h2 {
   margin-top: 2.5rem;
   font-size: 1.875rem;
@@ -1575,6 +1629,33 @@ article h2 {
   padding-bottom: 0.25rem;
 }
 
+article h3 a {
+  float: left;
+  margin-top: 0.1em;
+  margin-left: -24px;
+  width: 20px;
+  padding-right: 4px;
+  line-height: 1;
+  box-sizing: border-box;
+  background: none;
+  opacity: 0
+}
+
+article h3:hover a{
+  opacity: 1
+}
+
+article h3 span{
+  display: none;
+}
+
+article h3 a::after{
+  content: "#";
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 20px;
+}
+
 article h3 {
   margin-top: 2rem;
   font-size: 1.5rem;
@@ -1588,6 +1669,33 @@ article h3 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+article h4 a {
+  float: left;
+  margin-top: 0.1em;
+  margin-left: -24px;
+  width: 20px;
+  padding-right: 4px;
+  line-height: 1;
+  box-sizing: border-box;
+  background: none;
+  opacity: 0
+}
+
+article h4:hover a{
+  opacity: 1
+}
+
+article h4 span{
+  display: none;
+}
+
+article h4 a::after{
+  content: "#";
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 20px;
+}
+
 article h4 {
   margin-top: 2rem;
   font-size: 1.25rem;
@@ -1601,6 +1709,33 @@ article h4 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+article h5 a {
+  float: left;
+  margin-top: 0.1em;
+  margin-left: -24px;
+  width: 20px;
+  padding-right: 4px;
+  line-height: 1;
+  box-sizing: border-box;
+  background: none;
+  opacity: 0
+}
+
+article h5:hover a{
+  opacity: 1
+}
+
+article h5 span{
+  display: none;
+}
+
+article h5 a::after{
+  content: "#";
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 20px;
+}
+
 article h5 {
   margin-top: 2rem;
   font-size: 1.125rem;
@@ -1614,6 +1749,33 @@ article h5 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+article h6 a {
+  float: left;
+  margin-top: 0.1em;
+  margin-left: -24px;
+  width: 20px;
+  padding-right: 4px;
+  line-height: 1;
+  box-sizing: border-box;
+  background: none;
+  opacity: 0
+}
+
+article h6:hover a{
+  opacity: 1
+}
+
+article h6 span{
+  display: none;
+}
+
+article h6 a::after{
+  content: "#";
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 20px;
+}
+
 article h6 {
   margin-top: 2rem;
   font-size: 1rem;

package/compiled/rehype-autolink-headings/LICENSE

@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/compiled/rehype-autolink-headings/index.js

@@ -0,0 +1 @@
+(function(){"use strict";var e={980:function(e){var t=Object.prototype.hasOwnProperty;var n=Object.prototype.toString;var r=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var i=function isArray(e){if(typeof Array.isArray==="function"){return Array.isArray(e)}return n.call(e)==="[object Array]"};var u=function isPlainObject(e){if(!e||n.call(e)!=="[object Object]"){return false}var r=t.call(e,"constructor");var o=e.constructor&&e.constructor.prototype&&t.call(e.constructor.prototype,"isPrototypeOf");if(e.constructor&&!r&&!o){return false}var i;for(i in e){}return typeof i==="undefined"||t.call(e,i)};var a=function setProperty(e,t){if(r&&t.name==="__proto__"){r(e,t.name,{enumerable:true,configurable:true,value:t.newValue,writable:true})}else{e[t.name]=t.newValue}};var c=function getProperty(e,n){if(n==="__proto__"){if(!t.call(e,n)){return void 0}else if(o){return o(e,n).value}}return e[n]};e.exports=function extend(){var e,t,n,r,o,f;var l=arguments[0];var s=1;var p=arguments.length;var y=false;if(typeof l==="boolean"){y=l;l=arguments[1]||{};s=2}if(l==null||typeof l!=="object"&&typeof l!=="function"){l={}}for(;s<p;++s){e=arguments[s];if(e!=null){for(t in e){n=c(l,t);r=c(e,t);if(l!==r){if(y&&r&&(u(r)||(o=i(r)))){if(o){o=false;f=n&&i(n)?n:[]}else{f=n&&u(n)?n:{}}a(l,{name:t,newValue:extend(y,f,r)})}else if(typeof r!=="undefined"){a(l,{name:t,newValue:r})}}}}}return l}}};var t={};function __nccwpck_require__(n){var r=t[n];if(r!==undefined){return r.exports}var o=t[n]={exports:{}};var i=true;try{e[n](o,o.exports,__nccwpck_require__);i=false}finally{if(i)delete t[n]}return o.exports}!function(){__nccwpck_require__.d=function(e,t){for(var n in t){if(__nccwpck_require__.o(t,n)&&!__nccwpck_require__.o(e,n)){Object.defineProperty(e,n,{enumerable:true,get:t[n]})}}}}();!function(){__nccwpck_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}();!function(){__nccwpck_require__.r=function(e){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(e,"__esModule",{value:true})}}();if(typeof __nccwpck_require__!=="undefined")__nccwpck_require__.ab=__dirname+"/";var n={};!function(){__nccwpck_require__.r(n);__nccwpck_require__.d(n,{default:function(){return rehypeAutolinkHeadings}});var e=__nccwpck_require__(980);var t={}.hasOwnProperty;function hasProperty(e,n){var r=n&&e&&typeof e==="object"&&e.type==="element"&&e.properties&&t.call(e.properties,n)&&e.properties[n];return r!==null&&r!==undefined&&r!==false}function headingRank(e){var t=e&&e.type==="element"&&e.tagName.toLowerCase()||"";var n=t.length===2&&t.charCodeAt(0)===104?t.charCodeAt(1):0;return n>48&&n<55?n-48:null}const isElement=function(e,t,n,r,o){const i=convertElement(t);if(n!==undefined&&n!==null&&(typeof n!=="number"||n<0||n===Number.POSITIVE_INFINITY)){throw new Error("Expected positive finite index for child node")}if(r!==undefined&&r!==null&&(!r.type||!r.children)){throw new Error("Expected parent node")}if(!e||!e.type||typeof e.type!=="string"){return false}if((r===undefined||r===null)!==(n===undefined||n===null)){throw new Error("Expected both parent and index")}return i.call(o,e,n,r)};const convertElement=function(e){if(e===undefined||e===null){return hast_util_is_element_element}if(typeof e==="string"){return tagNameFactory(e)}if(typeof e==="object"){return anyFactory(e)}if(typeof e==="function"){return castFactory(e)}throw new Error("Expected function, string, or array as test")};function anyFactory(e){const t=[];let n=-1;while(++n<e.length){t[n]=convertElement(e[n])}return castFactory(any);function any(...e){let n=-1;while(++n<t.length){if(t[n].call(this,...e)){return true}}return false}}function tagNameFactory(e){return tagName;function tagName(t){return hast_util_is_element_element(t)&&t.tagName===e}}function castFactory(e){return assertion;function assertion(t,...n){return hast_util_is_element_element(t)&&Boolean(e.call(this,t,...n))}}function hast_util_is_element_element(e){return Boolean(e&&typeof e==="object"&&e.type==="element"&&typeof e.tagName==="string")}const r=function is(e,t,n,r,o){const i=convert(t);if(n!==undefined&&n!==null&&(typeof n!=="number"||n<0||n===Number.POSITIVE_INFINITY)){throw new Error("Expected positive finite index")}if(r!==undefined&&r!==null&&(!is(r)||!r.children)){throw new Error("Expected parent node")}if((r===undefined||r===null)!==(n===undefined||n===null)){throw new Error("Expected both parent and index")}return e&&e.type&&typeof e.type==="string"?Boolean(i.call(o,e,n,r)):false};const convert=function(e){if(e===undefined||e===null){return ok}if(typeof e==="string"){return typeFactory(e)}if(typeof e==="object"){return Array.isArray(e)?unist_util_is_anyFactory(e):propsFactory(e)}if(typeof e==="function"){return unist_util_is_castFactory(e)}throw new Error("Expected function, string, or object as test")};function unist_util_is_anyFactory(e){const t=[];let n=-1;while(++n<e.length){t[n]=convert(e[n])}return unist_util_is_castFactory(any);function any(...e){let n=-1;while(++n<t.length){if(t[n].call(this,...e))return true}return false}}function propsFactory(e){return unist_util_is_castFactory(all);function all(t){let n;for(n in e){if(t[n]!==e[n])return false}return true}}function typeFactory(e){return unist_util_is_castFactory(type);function type(t){return t&&t.type===e}}function unist_util_is_castFactory(e){return assertion;function assertion(...t){return Boolean(e.call(this,...t))}}function ok(){return true}function color(e){return""+e+""}const o=true;const i="skip";const u=false;const visitParents=function(e,t,n,r){if(typeof t==="function"&&typeof n!=="function"){r=n;n=t;t=null}const o=convert(t);const a=r?-1:1;factory(e,null,[])();function factory(e,c,f){const l=typeof e==="object"&&e!==null?e:{};let s;if(typeof l.type==="string"){s=typeof l.tagName==="string"?l.tagName:typeof l.name==="string"?l.name:undefined;Object.defineProperty(visit,"name",{value:"node ("+color(l.type+(s?"<"+s+">":""))+")"})}return visit;function visit(){let l=[];let s;let p;let y;if(!t||o(e,c,f[f.length-1]||null)){l=toResult(n(e,f));if(l[0]===u){return l}}if(e.children&&l[0]!==i){p=(r?e.children.length:-1)+a;y=f.concat(e);while(p>-1&&p<e.children.length){s=factory(e.children[p],p,y)();if(s[0]===u){return s}p=typeof s[1]==="number"?s[1]:p+a}}return l}}};function toResult(e){if(Array.isArray(e)){return e}if(typeof e==="number"){return[o,e]}return[e]}const visit=function(e,t,n,r){if(typeof t==="function"&&typeof n!=="function"){r=n;n=t;t=null}visitParents(e,t,overload,r);function overload(e,t){const r=t[t.length-1];return n(e,r?r.children.indexOf(e):null,r)}};const a={type:"element",tagName:"span",properties:{className:["icon","icon-link"]},children:[]};function rehypeAutolinkHeadings(t={}){let n=t.properties;const r=t.behaviour||t.behavior||"prepend";const o=t.content||a;const u=t.group;const c=convertElement(t.test);let f;if(r==="wrap"){f=wrap}else if(r==="before"||r==="after"){f=around}else{if(!n){n={ariaHidden:"true",tabIndex:-1}}f=inject}return e=>{visit(e,"element",((e,t,n)=>{if(headingRank(e)&&hasProperty(e,"id")&&c(e,t,n)){return f(e,t,n)}}))};function inject(t){t.children[r==="prepend"?"unshift":"push"](create(t,e(true,{},n),toChildren(o,t)));return[i]}function around(t,a,c){if(typeof a!=="number"||!c)return;const f=create(t,e(true,{},n),toChildren(o,t));let l=r==="before"?[f,t]:[t,f];if(u){const e=toNode(u,t);if(e&&!Array.isArray(e)&&e.type==="element"){e.children=l;l=[e]}}c.children.splice(a,1,...l);return[i,a+l.length]}function wrap(t){t.children=[create(t,e(true,{},n),t.children)];return[i]}function toChildren(e,t){const n=toNode(e,t);return Array.isArray(n)?n:[n]}function toNode(t,n){if(typeof t==="function")return t(n);return e(true,Array.isArray(t)?[]:{},t)}function create(e,t,n){return{type:"element",tagName:"a",properties:Object.assign({},t,{href:"#"+(e.properties||{}).id}),children:n}}}}();module.exports=n})();

package/compiled/rehype-autolink-headings/package.json

@@ -0,0 +1 @@
+{"name":"rehype-autolink-headings","author":"Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)","license":"MIT","types":"index.d.ts"}

package/dist/compiler.js

@@ -12,6 +12,8 @@ const mdx_1 = require("../compiled/@mdx-js/mdx");
 const rehype_slug_1 = __importDefault(require("../compiled/rehype-slug"));
 // @ts-ignore
 const remark_gfm_1 = __importDefault(require("../compiled/remark-gfm"));
+// @ts-ignore
+const rehype_autolink_headings_1 = __importDefault(require("../compiled/rehype-autolink-headings"));
 // https://rehype-pretty-code.netlify.app
 const rehypePrettyCodeOptions = {
     theme: 'dark-plus',
@@ -37,7 +39,11 @@ async function compile(opts) {
     const compiler = (0, mdx_1.createProcessor)({
         jsx: true,
         remarkPlugins: [remark_gfm_1.default],
-        rehypePlugins: [rehype_slug_1.default, [rehype_pretty_code_1.default, rehypePrettyCodeOptions]],
+        rehypePlugins: [
+            rehype_slug_1.default,
+            [rehype_pretty_code_1.default, rehypePrettyCodeOptions],
+            rehype_autolink_headings_1.default,
+        ],
     });
     try {
         let result = String(await compiler.process(opts.content));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugin-docs",
-  "version": "4.0.3",
+  "version": "4.0.6",
   "description": "@umijs/plugin-docs",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/plugin-docs#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -36,10 +36,11 @@
     "@types/keymaster": "^1.6.30",
     "@types/react-helmet": "^6.1.5",
     "classnames": "^2.3.1",
+    "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "5.0.1",
     "remark-gfm": "^3.0.1",
     "tailwindcss": "^3.0.24",
-    "umi": "4.0.3"
+    "umi": "4.0.6"
   },
   "publishConfig": {
     "access": "public"
@@ -51,13 +52,15 @@
     "deps": [
       "@mdx-js/mdx",
       "rehype-slug",
-      "remark-gfm"
+      "remark-gfm",
+      "rehype-autolink-headings"
     ],
     "externals": {},
     "excludeDtsDeps": [
       "@mdx-js/mdx",
       "rehype-slug",
-      "remark-gfm"
+      "remark-gfm",
+      "rehype-autolink-headings"
     ]
   }
 }