From 9658ed4d3a4cba036eb50f512b5c88d7c203cffd Mon Sep 17 00:00:00 2001 From: Joe Pea Date: Sun, 9 Jan 2022 22:50:44 -0800 Subject: [PATCH] Turn the corner, cover, and main tpl functions into Solid components with props, then use them as JSX --- packages/docsify-server-renderer/index.js | 15 +++++--- src/core/render/index.js | 18 ++++++--- src/core/render/tpl.js | 47 ++++++++++++----------- src/core/util/dom.js | 6 +-- 4 files changed, 50 insertions(+), 36 deletions(-) diff --git a/packages/docsify-server-renderer/index.js b/packages/docsify-server-renderer/index.js index 89e910d71..e98a900c2 100644 --- a/packages/docsify-server-renderer/index.js +++ b/packages/docsify-server-renderer/index.js @@ -7,7 +7,8 @@ import DOMPurify from 'dompurify'; import { AbstractHistory } from '../../src/core/router/history/abstract'; import { Compiler } from '../../src/core/render/compiler'; import { isAbsolutePath } from '../../src/core/router/util'; -import * as tpl from '../../src/core/render/tpl'; +// eslint-disable-next-line +import { GithubCorner, Cover, Main } from '../../src/core/render/tpl'; import { prerenderEmbed } from '../../src/core/render/embed'; function cwd(...args) { @@ -47,10 +48,14 @@ function mainTpl(config) { class={`app-nav${config.repo ? '' : ' no-badge'}`} innerHTML={''} > - - {config.repo && tpl.corner(config.repo)} - {config.coverpage && tpl.cover()} - {tpl.main(config)} + {config.repo && ( + + )} + {config.coverpage && } +
); } diff --git a/src/core/render/index.js b/src/core/render/index.js index eb0e0e242..30a350335 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -9,7 +9,7 @@ import { isMobile, inBrowser } from '../util/env'; import { isPrimitive, merge } from '../util/core'; import { scrollActiveSidebar } from '../event/scroll'; import { Compiler } from './compiler'; -import * as tpl from './tpl'; +import { GithubCorner, Cover, Main, Theme } from './tpl'; import { prerenderEmbed } from './embed'; let vueGlobalData; @@ -422,11 +422,17 @@ export function Render(Base) { if (el) { if (config.repo) { - html.push(tpl.corner(config.repo, config.cornerExternalLinkTarge)); + html.push( + + ); } if (config.coverpage) { - html.push(tpl.cover()); + // eslint-disable-next-line new-cap + html.push(); } if (config.logo) { @@ -439,7 +445,9 @@ export function Render(Base) { } } - html.push(tpl.main(config)); + // eslint-disable-next-line new-cap + html.push(
); + // Render main app this._renderTo(el, html, true); } else { @@ -462,7 +470,7 @@ export function Render(Base) { } if (config.themeColor) { - dom.$.head.appendChild(tpl.theme(config.themeColor)); + dom.$.head.appendChild(); // Polyfll cssVars(config.themeColor); } diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js index 379f99ffc..445ef7ffc 100644 --- a/src/core/render/tpl.js +++ b/src/core/render/tpl.js @@ -1,26 +1,27 @@ +import { createMemo } from 'solid-js'; /** * Render github corner - * @param {Object} data URL for the View Source on Github link - * @param {String} cornerExternalLinkTarge value of the target attribute of the link - * @return {String} SVG element as string + * @param {Object} props + * @param {string} props.githubUrl URL for the View Source on Github link + * @param {string=} props.cornerExternalLinkTarget value of the target attribute of the link */ -export function corner(data, cornerExternalLinkTarge) { - if (!data) { - return ''; - } +export function GithubCorner(props) { + const processedUrl = createMemo(() => { + let result = props.githubUrl; - if (!/\/\//.test(data)) { - data = 'https://github.com/' + data; - } + if (!/\/\//.test(result)) { + result = 'https://github.com/' + result; + } + + result = result.replace(/^git\+/, ''); - data = data.replace(/^git\+/, ''); - // Double check - cornerExternalLinkTarge = cornerExternalLinkTarge || '_blank'; + return result; + }); return ( @@ -45,9 +46,8 @@ export function corner(data, cornerExternalLinkTarge) { /** * Renders main content * @param {Object} config Configuration object - * @returns {String} HTML of the main content */ -export function main(config) { +export function Main(config) { const name = config.name ? config.name : ''; const aside = ( @@ -90,7 +90,7 @@ export function main(config) { * Cover Page * @returns {String} Cover page */ -export function cover() { +export function Cover() { const SL = ', 100%, 85%'; const bgc = 'linear-gradient(to left bottom, ' + @@ -104,9 +104,9 @@ export function cover() { ); - // Bug with Jest/jsdom: at this point, the styles exist, Docsify works - // and this log will show the background value. But only during Jest tests, the - // bakground value is empty. This is why the snapshot + // JEST_JSDOM_BUG: At this point, the styles exist, Docsify works and this log + // will show the background value. But only during Jest tests, the bakground + // value is empty. // console.log('cover style?', el.style.background); return el; @@ -142,11 +142,12 @@ export function markdownParagraph(className, content) { return `

${content.slice(5).trim()}

`; } -export function theme(color) { +/** @param {{color: string}} props */ +export function Theme(props) { return ( ); diff --git a/src/core/util/dom.js b/src/core/util/dom.js index 09f9b9225..d7a5f23f6 100644 --- a/src/core/util/dom.js +++ b/src/core/util/dom.js @@ -5,9 +5,9 @@ const cacheNode = {}; /** * Get Node - * @param {String|Element} el A DOM element - * @param {Boolean} noCache Flag to use or not use the cache - * @return {Element} The found node element + * @param {string|Element} el A DOM element + * @param {boolean} noCache Flag to use or not use the cache + * @returns {Element|null} The found node element */ export function getNode(el, noCache = false) { if (typeof el === 'string') {