From be47a6d98f9cf02670ea60d7d549e0d6b6e5762f Mon Sep 17 00:00:00 2001 From: Yangshun Date: Sun, 6 Feb 2022 10:39:04 +0800 Subject: [PATCH] chore: delete unused components and CSS --- about/src/components/Collapsable.js | 10 - about/src/components/CustomCodeBlock.js | 66 ------ about/src/components/Extensions.js | 67 ------ about/src/components/Figure.js | 12 - about/src/components/GithubCard.js | 36 --- about/src/components/HowCard.js | 52 ----- about/src/components/Mermaid.js | 36 --- about/src/components/Section.js | 71 ------ about/src/css/custom.css | 299 +----------------------- 9 files changed, 6 insertions(+), 643 deletions(-) delete mode 100644 about/src/components/Collapsable.js delete mode 100644 about/src/components/CustomCodeBlock.js delete mode 100644 about/src/components/Extensions.js delete mode 100644 about/src/components/Figure.js delete mode 100644 about/src/components/GithubCard.js delete mode 100644 about/src/components/HowCard.js delete mode 100644 about/src/components/Mermaid.js delete mode 100644 about/src/components/Section.js diff --git a/about/src/components/Collapsable.js b/about/src/components/Collapsable.js deleted file mode 100644 index 467da37cc18..00000000000 --- a/about/src/components/Collapsable.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' - -export default function Collapsable({ title, children }) { - return ( -
- {title} -
{children}
-
- ) -} diff --git a/about/src/components/CustomCodeBlock.js b/about/src/components/CustomCodeBlock.js deleted file mode 100644 index 43f60f47b73..00000000000 --- a/about/src/components/CustomCodeBlock.js +++ /dev/null @@ -1,66 +0,0 @@ -import React, { useState } from 'react' -import CodeBlock from '@theme/CodeBlock' - -export default function CustomCodeBlock({ - header, - code, - highlight, - js, - jsHighlight, - response, - language, -}) { - const [showResponse, toggleResponse] = useState(false) - - let wrapperClass = '' - if (header) wrapperClass += ' code-with-header' - if (response) wrapperClass += ' code-with-response' - - return ( - <> -
- {header &&
{header}
} - <> - {code && ( - - {code} - - )} - {js && {js}} - -
- {response && ( - <> -
- toggleResponse(!showResponse)} - > - {showResponse ? 'Hide' : 'Show'} Response - - {showResponse && {response}} -
- - )} - - ) -} - -const styles = { - responseShown: { - textAlign: 'right', - display: 'block', - borderRadius: '0', - color: 'var(--custom-primary)', - borderTop: '1px solid #444', - }, - responseHidden: { - textAlign: 'right', - display: 'block', - borderBottom: 'none', - borderRadius: '0 0 4px 4px', - borderTop: '1px solid #444', - color: '#ccc', - }, -} diff --git a/about/src/components/Extensions.js b/about/src/components/Extensions.js deleted file mode 100644 index e1d10d6c799..00000000000 --- a/about/src/components/Extensions.js +++ /dev/null @@ -1,67 +0,0 @@ -import React, { useState } from 'react' -import extensions from '../data/extensions.json' - -export default function Extensions() { - const [filter, setFilter] = useState('') - return ( - <> -
- setFilter(e.target.value)} - /> -
-
- {extensions - .filter((x) => x.name.indexOf(filter) >= 0) - .map((extension) => ( -
-
-

- {extension.name} -

-

- {extension.comment.charAt(0).toUpperCase() + extension.comment.slice(1)} -

-
-
- ))} -
- - ) -} - -const styles = { - inputContainer: { - marginBottom: '15px', - }, - input: { - border: '1px solid var(--ifm-panel-border-color)', - borderRadius: 4, - backgroundColor: 'var(--custom-background-color-diff)', - color: 'var(--ifm-font-color-base)', - margin: 0, - padding: '6px 8px', - width: 300, - }, - column: { - margin: '5px 0px', - padding: '0px 5px', - }, - card: { - border: '1px solid var(--ifm-panel-border-color)', - borderRadius: 5, - padding: 8, - }, - title: { - margin: 0, - fontSize: '0.9rem', - border: '1px solid var(--ifm-panel-border-color)', - }, - description: { - fontSize: '0.8rem', - margin: 0, - }, -} diff --git a/about/src/components/Figure.js b/about/src/components/Figure.js deleted file mode 100644 index 2e90ff02667..00000000000 --- a/about/src/components/Figure.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -export default function Figure({ src, alt, caption }) { - return ( -
-
- {alt} -
{caption}
-
-
- ) -} diff --git a/about/src/components/GithubCard.js b/about/src/components/GithubCard.js deleted file mode 100644 index 3eea2d0cef9..00000000000 --- a/about/src/components/GithubCard.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react' - -export default function GithubCard({ title, description, href, stars, handle }) { - return ( - -
-

- {title.toUpperCase()} -

- {description} -
-
-
-
@{handle}
-
{stars} ★
-
- - ) -} - -const styles = { - hr: { - margin: '15px 0 10px 0', - }, - h3: { - margin: 0, - textTransform: 'capitalize', - }, - cardBase: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - padding: '0 15px 10px 15px', - fontSize: '0.8em', - }, -} diff --git a/about/src/components/HowCard.js b/about/src/components/HowCard.js deleted file mode 100644 index 335c7f70bf1..00000000000 --- a/about/src/components/HowCard.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react' - -export default function HowCard({ title, description, featureTitle, features }) { - return ( -
-
-

{title}

-
- {description} -
{featureTitle}
-
- {features.map((x, i) => ( -
- - ✔ - - {x} -
- ))} -
-
-
-
- ) -} - -const styles = { - h4: { - padding: 10, - textAlign: 'center', - borderBottom: '1px solid #000', - margin: 0, - }, - h5: { - textTransform: 'uppercase', - // opacity: 0.5, - margin: '10px 0 0px 0', - fontSize: '0.9em', - }, - card: { - border: '1px solid #000', - boxShadow: 'none', - }, - cardBase: { - fontSize: '0.9em', - }, - check: { - width: 10, - height: 10, - marginRight: 10, - }, -} diff --git a/about/src/components/Mermaid.js b/about/src/components/Mermaid.js deleted file mode 100644 index f19b0326e20..00000000000 --- a/about/src/components/Mermaid.js +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useEffect, useState } from 'react' -import mermaid from 'mermaid' - -const theme = ` -.node rect { fill: rgba(62,207,142, 0.3); stroke: #24b47e; } -.cluster rect { fill: var(--custom-background-color-highlight); stroke: #999; } -.edgePath path { fill: var(--custom-primary) } -.edgePath .path { stroke: var(--custom-primary) } - -g.classGroup rect { fill: rgba(62,207,142, 0.3); stroke: #24b47e; } -g.classGroup line { stroke: var(--custom-primary); } -g.classGroup text { fill: var(--ifm-color-content); color: var(--ifm-color-content); } -.classLabel .label { fill: var(--ifm-color-content); color: var(--ifm-color-content); } -classGroup .title { fill: var(--ifm-color-content); color: var(--ifm-color-content); } -composition { stroke: var(--custom-primary); } -aggregation { stroke: var(--custom-primary); } -dependency { stroke: var(--custom-primary); } -.relation { stroke: var(--custom-primary); } -` - -mermaid.initialize({ themeCSS: theme }) - -export default function Mermaid({ graph, classNames, caption }) { - let [rendered, setRendered] = useState(
) - - useEffect(() => { - mermaid.render('mermaid-ID', graph.toString(), (html) => setRendered(html)) - }, [graph]) - - return ( -
- {caption &&
{caption}
} -
-
- ) -} diff --git a/about/src/components/Section.js b/about/src/components/Section.js deleted file mode 100644 index 0f9fb07563a..00000000000 --- a/about/src/components/Section.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, { useRef, useEffect } from 'react' -import PropTypes from 'prop-types' - -export default function Section({ title, id, style, children }) { - const hash = String(id ? id : title) - .trim() - .replace(/\s/g, '-') - .toLowerCase() - const sectionRef = useRef(null) - - useEffect(() => { - function scrollOnHash() { - const clearedLocationHash = window.location.hash.substring(1) - - if (clearedLocationHash == hash) { - sectionRef.current.scrollIntoView({ behavior: 'smooth' }) - } - } - - function changeHash() { - const el = document.getElementById(hash) - - if (el) { - const elementPos = el.getBoundingClientRect() - - if (elementPos.top <= 80 && elementPos.top >= 0) replaceHistoryHash() - } - } - scrollOnHash() - window.addEventListener('scroll', changeHash) - - return () => { - window.removeEventListener('scroll', changeHash) - } - }, []) - - function replaceHistoryHash() { - history.replaceState(history.state, '', `#${hash}`) - } - - function handleHashClick() { - replaceHistoryHash() - sectionRef.current.scrollIntoView({ behavior: 'smooth' }) - } - - return ( -
-
-

- {title} - # -

-
{children}
-
-
- ) -} - -const stylePropOptions = { - underline: 'with-underline', -} - -Section.propTypes = { - title: PropTypes.string.isRequired, - style: PropTypes.oneOf(['underline']), -} diff --git a/about/src/css/custom.css b/about/src/css/custom.css index 0cb02ebb049..dd3295ec8b0 100755 --- a/about/src/css/custom.css +++ b/about/src/css/custom.css @@ -33,9 +33,9 @@ /* Customization here for both Light and Dark themes */ - --custom-font-base: 'Inter', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', - 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', - 'Arial', sans-serif; + --custom-font-base: 'Inter', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', + sans-serif; --custom-font-code: 'office code pro', Menlo, monospace; --custom-font-size-base: 1rem; --custom-border-radius: 3px; @@ -236,7 +236,9 @@ body { display: inline-block; } -h4, h5, h6 { +h4, +h5, +h6 { font-weight: bold !important; } @@ -652,20 +654,6 @@ div[class^='sidebar_'] .menu__link.menu__link--active:not(.menu__link--sublist) } } -.DummyData { - overflow-x: auto; -} -.DummyData div { - padding-right: 30px; -} -.Collapsable summary { - font-size: 0.9rem; - margin-bottom: 20px; -} -.Collapsable summary:hover { - cursor: pointer; -} - div[class^='codeBlockContent'], div[class*=' codeBlockContent'], .prism-code { @@ -804,49 +792,6 @@ a.hash-link { display: none; } -.HowSections .col { - margin-bottom: 20px; -} -.HowSections img.diagram { - margin: 0px auto 30px auto; - display: block; -} -.HowCard { - position: relative; -} -.HowCard::before, -.HowCard::after { - bottom: 100%; - border: solid transparent; - content: ''; - height: 0; - left: 50%; - width: 0; - position: absolute; - pointer-events: none; - margin-bottom: -1px; -} -.HowCard::before { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - - border-bottom: 5px solid black; - border-width: 12px; - margin-left: -12px; -} -.HowCard::after { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - - border-bottom: 5px solid var(--ifm-card-background-color); - border-width: 11px; - margin-left: -11px; -} - .Blog .code-with-header { margin-bottom: 30px; } @@ -854,46 +799,6 @@ a.hash-link { color: var(--ifm-color-content); } -.Figure { - text-align: center; - margin: 30px 0; -} -.Figure figure { - margin: 0 auto; - width: 100%; -} -.Figure img { - box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2); - border-radius: 4px; -} -.Figure figcaption { - font-size: 0.8rem; -} - -.Mermaid { - text-align: center; - margin: 80px 0; - font-family: var(--custom-font-base); - color: var(--ifm-color-content); - font-size: 0.9rem; -} -.Mermaid .graph { - overflow-x: auto; - margin: 0px calc(var(--ifm-spacing-horizontal) * -1); - padding: var(--ifm-spacing-horizontal); -} -.Mermaid div, -.Mermaid tspan, -.Mermaid g.classGroup text { - font-family: var(--custom-font-base); - color: var(--ifm-color-content); - /* font-size: 0.9em; */ -} -.Mermaid figcaption { - font-size: 0.8rem; - margin-bottom: 20px; -} - .DocSearch-Button { border-radius: 8px !important; } @@ -1075,198 +980,6 @@ html[data-theme='dark'] .navbar-item-twitter:before { margin-top: 5px; } -.w-full { - width: 100%; - max-width: 100%; -} - -/* Section */ -.Section { - position: relative; - display: flex; - flex-direction: column; -} -.Section-Hash { - margin-left: 8px; - color: var(--custom-content-color-light); - opacity: 0.4; -} -.Section-Title:hover .Section-Hash { - color: var(--custom-primary); - opacity: 1; -} -.Section-Title { - cursor: pointer; - scroll-margin: 74px; /* Navbar size (60) + a little margin */ -} - -/* Showcase */ -.ShowcaseCard { - position: relative; - height: 100%; - display: flex; - flex-direction: column; - box-shadow: none; - border: 1px solid #333; - padding: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing); -} - -.ShowcaseCard:hover { - transition: all 0.2s ease; - border: 1px solid var(--custom-primary); - box-shadow: var(--custom-shadow-xl), 0 0 0 1px var(--custom-primary) !important; -} - -.ShowcaseCard-Img { - height: 100%; - width: auto; -} - -.ShowcaseCard-ImgContainer { - height: 140px; - display: flex; - justify-content: center; -} - -.ShowcaseCard-Text { - height: 100%; - display: flex; - flex-direction: column; -} - -.ShowcaseCard-Text p { - width: 100%; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - margin: 0; -} - -.ShowcaseCard-Text h3 { - opacity: 0; - position: absolute; - width: 100%; - top: 0; - left: 0; - backdrop-filter: blur(3px) contrast(80%); - padding: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing); - transition: 0.2s ease; -} - -.ShowcaseCard-Content { - display: flex; - flex-direction: column; - margin-bottom: var(--ifm-card-vertical-spacing); - height: 100%; -} - -.ShowcaseCard:hover h3 { - opacity: 1; -} - -.ShowcaseCard-Tag { - color: var(--custom-primary); - font-weight: bold; - font-size: 12px; - margin: 8px 4px 12px 0px; -} - -.ShowcaseCard-Footer { - display: flex; - flex-direction: row; - justify-content: flex-start; -} - -.ShowcaseCard-Footer-Item { - width: 100%; -} - -/* Spaces between children */ -.ShowcaseCard-Footer-Spaced .ShowcaseCard-Footer-Item:first-child { - margin-right: 4px; -} - -.ShowcaseCard-Footer-Spaced .ShowcaseCard-Footer-Item:nth-child(even) { - margin-left: 4px; - margin-right: 4px; -} - -.ShowcaseCard-Footer-Spaced .ShowcaseCard-Footer-Item:last-child { - margin-right: 0px; -} - -@media screen and (max-width: 997px) { - .ShowcaseCard-ImgContainer { - height: 120px; - align-self: center; - } - - .ShowcaseCard-Content { - display: flex; - flex-direction: row; - } - - .ShowcaseCard-Text { - width: 100%; - margin-left: var(--ifm-card-horizontal-spacing); - } - - .ShowcaseCard-Tag { - margin-top: 0px; - } - - .ShowcaseCard-Footer a { - margin: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing) 0 0; - } - - .ShowcaseCard-Text h3 { - position: relative; - bottom: 0; - opacity: 1; - backdrop-filter: blur(0) contrast(100%); - padding: 0; - } -} - -@media screen and (max-width: 650px) { - .ShowcaseCard-ImgContainer { - height: 80px; - } -} - -@media screen and (max-width: 650px) { - .ShowcaseCard-Content { - flex-direction: column; - padding: 0px; - } - - .ShowcaseCard-Text { - margin: 0px; - padding: 0px; - } - - .ShowcaseCard-Text h3 { - margin-top: var(--ifm-card-vertical-spacing); - } -} - -@media screen and (max-width: 380px) { - .ShowcaseCard-Footer { - flex-direction: column; - } - - /* Spaces between children */ - .ShowcaseCard-Footer-Spaced .ShowcaseCard-Footer-Item:first-child { - margin-right: 0px; - } - - .ShowcaseCard-Footer-Spaced .ShowcaseCard-Footer-Item:nth-child(even) { - margin-left: 0px; - margin-right: 0px; - } -} - /* New CSS */ code {