From 428ed6e3576722a77799fb8f0d2781678a4ef388 Mon Sep 17 00:00:00 2001 From: Lorenz Junglas Date: Mon, 21 Jun 2021 22:36:54 +0200 Subject: [PATCH 1/2] =?UTF-8?q?Remove=20code=20component=20and=20some=20de?= =?UTF-8?q?sign=20improvements=20=F0=9F=92=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docusaurus.config.js | 14 ++- package-lock.json | 11 -- package.json | 1 - sidebars.json | 13 +-- src/custom.scss | 62 +++++++++-- src/theme/CodeBlock/index.js | 141 ------------------------- src/theme/CodeBlock/styles.module.scss | 54 ---------- 7 files changed, 70 insertions(+), 226 deletions(-) delete mode 100644 src/theme/CodeBlock/index.js delete mode 100644 src/theme/CodeBlock/styles.module.scss diff --git a/docusaurus.config.js b/docusaurus.config.js index 36f212f4..e87ae354 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -13,8 +13,18 @@ module.exports = { items: [ { to: "docs/getting-started", label: "Docs", position: "left" }, { to: "play", label: "Playground", position: "left" }, - { href: "https://discord.gg/BWAq58Y", label: "Discord", position: "right" }, - { href: "https://github.com/TypeScriptToLua/TypeScriptToLua", label: "GitHub", position: "right" }, + { + href: "https://discord.gg/BWAq58Y", + className: "header-discord-link", + "aria-label": "Discord Server", + position: "right", + }, + { + href: "https://github.com/TypeScriptToLua/TypeScriptToLua", + className: "header-github-link", + "aria-label": "GitHub repository", + position: "right", + }, ], }, footer: { diff --git a/package-lock.json b/package-lock.json index 30a0f6f2..eed5b363 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,6 @@ "assert": "^2.0.0", "browserify-zlib": "^0.2.0", "buffer": "^6.0.3", - "classnames": "^2.3.1", "clsx": "^1.1.1", "console-feed": "^3.2.2", "d3": "^6.2.0", @@ -5151,11 +5150,6 @@ "node": ">=0.10.0" } }, - "node_modules/classnames": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", - "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" - }, "node_modules/clean-css": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.1.2.tgz", @@ -22022,11 +22016,6 @@ } } }, - "classnames": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", - "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" - }, "clean-css": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.1.2.tgz", diff --git a/package.json b/package.json index f2abb902..51a4315c 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "assert": "^2.0.0", "browserify-zlib": "^0.2.0", "buffer": "^6.0.3", - "classnames": "^2.3.1", "clsx": "^1.1.1", "console-feed": "^3.2.2", "d3": "^6.2.0", diff --git a/sidebars.json b/sidebars.json index dee34c75..70e93f83 100644 --- a/sidebars.json +++ b/sidebars.json @@ -6,15 +6,8 @@ "the-self-parameter", "external-lua-code", "editor-support", - { - "type": "category", - "label": "Advanced", - "items": ["advanced/writing-declarations", "advanced/compiler-annotations", "advanced/language-extensions"] - }, - { - "type": "category", - "label": "API", - "items": ["api/overview", "api/plugins", "api/printer"] - } + "advanced/writing-declarations", + "advanced/compiler-annotations", + "advanced/language-extensions" ] } diff --git a/src/custom.scss b/src/custom.scss index d20e97c4..21fcea07 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -2,13 +2,6 @@ --ifm-code-font-size: 95%; } -.docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); -} - :root { --monaco-background: #fffffe; --monaco-accent: #c4c4c4; @@ -18,3 +11,58 @@ --monaco-background: #1e1e1e; --monaco-accent: #333333; } + +.docusaurus-highlight-code-line { + background-color: rgba(0, 0, 0, 0.1); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + +html[data-theme="dark"] .docusaurus-highlight-code-line { + background-color: rgba(0, 0, 0, 0.3); +} + +.navbar__title { + text-overflow: unset; +} + +.header-github-link:hover { + opacity: 0.6; +} + +.header-github-link:before { + content: ""; + width: 24px; + height: 24px; + display: flex; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") + no-repeat; +} + +html[data-theme="dark"] .header-github-link:before { + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") + no-repeat; +} + +.header-discord-link:hover { + opacity: 0.6; +} + +.header-discord-link:before { + content: ""; + width: 28px; + height: 28px; + display: flex; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E") + no-repeat; +} + +html[data-theme="dark"] .header-discord-link:before { + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E") + no-repeat; +} + +.react-toggle { + margin: var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal); +} diff --git a/src/theme/CodeBlock/index.js b/src/theme/CodeBlock/index.js deleted file mode 100644 index b5a6b068..00000000 --- a/src/theme/CodeBlock/index.js +++ /dev/null @@ -1,141 +0,0 @@ -import Link from "@docusaurus/Link"; -import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; -import useThemeContext from "@theme/hooks/useThemeContext"; -import classnames from "classnames"; -import Clipboard from "clipboard"; -import rangeParser from "parse-numeric-range"; -import Highlight, { defaultProps } from "prism-react-renderer"; -import defaultTheme from "prism-react-renderer/themes/palenight"; -import React, { useEffect, useRef, useState } from "react"; -import { getPlaygroundUrlForCode } from "../../pages/play/code"; -import styles from "./styles.module.scss"; - -function useClipboard() { - const target = useRef(null); - const button = useRef(null); - - const [showCopied, setShowCopied] = useState(false); - useEffect(() => { - let clipboard; - - if (button.current) { - clipboard = new Clipboard(button.current, { - target: () => target.current, - }); - } - - return () => { - if (clipboard) { - clipboard.destroy(); - } - }; - }, [button.current, target.current]); - - const handleCopyCode = () => { - window.getSelection().empty(); - setShowCopied(true); - - setTimeout(() => setShowCopied(false), 2000); - }; - - return { showCopied, handleCopyCode, target, button }; -} - -function usePrismTheme(prism) { - const [mounted, setMounted] = useState(false); - // The Prism theme on SSR is always the default theme but the site theme - // can be in a different mode. React hydration doesn't update DOM styles - // that come from SSR. Hence force a re-render after mounting to apply the - // current relevant styles. There will be a flash seen of the original - // styles seen using this current approach but that's probably ok. Fixing - // the flash will require changing the theming approach and is not worth it - // at this point. - useEffect(() => { - setMounted(true); - }, []); - - const { isDarkTheme } = useThemeContext(); - const lightModeTheme = prism.theme || defaultTheme; - const darkModeTheme = prism.darkTheme || lightModeTheme; - const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme; - return { prismTheme, mounted }; -} - -export default ({ children, className: languageClassName, metastring = "" }) => { - const { - siteConfig: { - themeConfig: { prism = {} }, - }, - } = useDocusaurusContext(); - - const { prismTheme, mounted } = usePrismTheme(prism); - const { showCopied, handleCopyCode, target, button } = useClipboard(); - - const code = children.trim(); - const [, title] = metastring.match(/title=(.+)( |$)/) || []; - - const [, highlightLinesRange] = metastring.match(/{([\d,-]+)}/) || []; - const highlightLines = - highlightLinesRange != null ? rangeParser.parse(highlightLinesRange).filter((n) => n > 0) : []; - - let language = languageClassName && languageClassName.replace(/language-/, ""); - if (!language && prism.defaultLanguage) { - language = prism.defaultLanguage; - } - - const hasPlayground = language === "ts" || language === "typescript"; - - return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - <> - {title &&
{title}
} - 
-                        
-
-                        {hasPlayground && (
-                            
-                                Playground
-                            
-                        )}
-
-                        
-                            {tokens.map((line, i) => {
-                                if (line.length === 1 && line[0].content === "") {
-                                    line[0].content = "\n";
-                                }
-
-                                const lineProps = getLineProps({ line, key: i });
-
-                                if (highlightLines.includes(i + 1)) {
-                                    lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
-                                }
-
-                                return (
-                                    

-                                        {line.map((token, key) => (
-                                            
-                                        ))}
-                                    

-                                );
-                            })}
-                        
-
- - )} - - ); -}; diff --git a/src/theme/CodeBlock/styles.module.scss b/src/theme/CodeBlock/styles.module.scss deleted file mode 100644 index 9246ea7a..00000000 --- a/src/theme/CodeBlock/styles.module.scss +++ /dev/null @@ -1,54 +0,0 @@ -.codeBlock { - overflow: auto; - display: block; - padding: 0; - margin: 0; - - &.hasTitle { - padding-top: 16px; - } -} - -.title { - position: absolute; - left: 8px; - padding: 3px 5px; - border-radius: 0 0 10% 10%; - background-color: var(--ifm-color-primary); - color: white; -} - -.codeBlockLines { - background-color: transparent; - border-radius: 0; - margin-bottom: 0; - float: left; - min-width: 100%; - padding: var(--ifm-pre-padding); -} - -.copyButton, -.playgroundButton { - background: rgb(1, 22, 39); - border: 1px solid rgb(214, 222, 235); - border-radius: var(--ifm-global-radius); - color: rgb(214, 222, 235); - cursor: pointer; - line-height: 12px; - opacity: 0; - outline: none; - padding: 4px 8px; - position: absolute; - right: var(--ifm-pre-padding); - top: var(--ifm-pre-padding); - visibility: hidden; - transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out, bottom 200ms ease-in-out; - .codeBlock:hover > & { - visibility: visible; - opacity: 1; - } -} - -.playgroundButton { - top: calc(var(--ifm-pre-padding) + 28px); -} From f8dcda6567a5330ab2194c72c63a8676976d9e4e Mon Sep 17 00:00:00 2001 From: Lorenz Junglas Date: Mon, 21 Jun 2021 22:39:30 +0200 Subject: [PATCH 2/2] Add API category back --- sidebars.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/sidebars.json b/sidebars.json index 70e93f83..b60cfe8c 100644 --- a/sidebars.json +++ b/sidebars.json @@ -8,6 +8,11 @@ "editor-support", "advanced/writing-declarations", "advanced/compiler-annotations", - "advanced/language-extensions" + "advanced/language-extensions", + { + "type": "category", + "label": "API", + "items": ["api/overview", "api/plugins", "api/printer"] + } ] }