From 348ad0c90766aa899a9666161f9448efa3e9517e Mon Sep 17 00:00:00 2001 From: Yangshun Date: Sat, 7 Aug 2021 22:41:29 +0800 Subject: [PATCH] website: remove hacky component injection code --- website/docusaurus.config.js | 1 - website/src/components/SidebarAd/index.js | 47 +--------- .../components/SidebarAd/styles.module.css | 3 +- website/src/theme/DocPaginator/index.js | 88 ++++++++++--------- website/src/theme/TOC/index.js | 57 ++++++++++++ website/src/theme/TOC/styles.module.css | 23 +++++ 6 files changed, 129 insertions(+), 90 deletions(-) create mode 100644 website/src/theme/TOC/index.js create mode 100644 website/src/theme/TOC/styles.module.css diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index d0ad1691..b4fd7ede 100755 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -64,7 +64,6 @@ module.exports = { }, ], ], - clientModules: [require.resolve('./src/components/SidebarAd')], scripts: [ { src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4984084888641317", diff --git a/website/src/components/SidebarAd/index.js b/website/src/components/SidebarAd/index.js index 5af34754..b4791ed9 100644 --- a/website/src/components/SidebarAd/index.js +++ b/website/src/components/SidebarAd/index.js @@ -4,10 +4,7 @@ import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; import styles from './styles.module.css'; -const AD_ELEMENT_ID = 'ad-element-id'; -const CONTAINER_SELECTOR = '[class^="tableOfContents"]'; - -function SidebarAd() { +export default function SidebarAd() { return ( ); } - -function initAd() { - const $adEl = (() => { - const $el = document.getElementById(AD_ELEMENT_ID); - if ($el) { - return $el; - } - - const $tocEl = document.querySelector(CONTAINER_SELECTOR); - if ($tocEl == null) { - return null; - } - - const $newEl = document.createElement('div'); - $newEl.id = AD_ELEMENT_ID; - $tocEl.prepend($newEl); - - return $newEl; - })(); - - if ($adEl == null) { - return; - } - - ReactDOM.render(, $adEl); -} - -if (ExecutionEnvironment.canUseDOM) { - window.onload = initAd; -} - -export default (function (context, options) { - return { - name: 'sidebar-ad', - onRouteUpdate() { - // Render only after the page renders. - setTimeout(() => { - initAd(); - }, 0); - }, - }; -})(); diff --git a/website/src/components/SidebarAd/styles.module.css b/website/src/components/SidebarAd/styles.module.css index 55eded4c..c04366a7 100644 --- a/website/src/components/SidebarAd/styles.module.css +++ b/website/src/components/SidebarAd/styles.module.css @@ -1,11 +1,10 @@ .container { - background-color: var(--ifm-color-primary); + background: linear-gradient(138deg, rgb(69, 104, 220), rgb(176, 106, 179)); background-repeat: no-repeat; background-size: contain; border-radius: var(--ifm-global-radius); color: #fff; display: block; - margin: 1rem; padding: 1rem; transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default); diff --git a/website/src/theme/DocPaginator/index.js b/website/src/theme/DocPaginator/index.js index 0148c5e6..a3fcd052 100644 --- a/website/src/theme/DocPaginator/index.js +++ b/website/src/theme/DocPaginator/index.js @@ -6,52 +6,58 @@ */ import React from 'react'; import Translate, {translate} from '@docusaurus/Translate'; +import SidebarAd from '../../components/SidebarAd'; function DocPaginator(props) { const {metadata} = props; return ( - + ); } diff --git a/website/src/theme/TOC/index.js b/website/src/theme/TOC/index.js new file mode 100644 index 00000000..da6fc58e --- /dev/null +++ b/website/src/theme/TOC/index.js @@ -0,0 +1,57 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import clsx from 'clsx'; +import useTOCHighlight from '@theme/hooks/useTOCHighlight'; +import styles from './styles.module.css'; +import SidebarAd from '../../components/SidebarAd'; + +const LINK_CLASS_NAME = 'table-of-contents__link'; +const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active'; +const TOP_OFFSET = 100; +/* eslint-disable jsx-a11y/control-has-associated-label */ + +export function TOCHeadings({toc, isChild}) { + if (!toc.length) { + return null; + } + + return ( + + ); +} + +function TOC({toc}) { + useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET); + return ( +
+
+ +
+ +
+ ); +} + +export default TOC; diff --git a/website/src/theme/TOC/styles.module.css b/website/src/theme/TOC/styles.module.css new file mode 100644 index 00000000..9e519333 --- /dev/null +++ b/website/src/theme/TOC/styles.module.css @@ -0,0 +1,23 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.tableOfContents { + max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); + overflow-y: auto; + position: sticky; + top: calc(var(--ifm-navbar-height) + 1rem); +} + +@media only screen and (max-width: 996px) { + .tableOfContents { + display: none; + } + + .docItemContainer { + padding: 0 0.3rem; + } +}