From 54212596acc1a3fdf4e3bc5bff4bbd36ae195a78 Mon Sep 17 00:00:00 2001 From: slumbering Date: Thu, 17 Jun 2021 17:50:08 +0200 Subject: [PATCH] docs: :bug: css enhancement + add gtag Signed-off-by: slumbering --- docs/learn/103-script.md | 4 +- website/docusaurus.config.js | 9 +- website/package.json | 1 + website/src/css/custom.scss | 180 +++++++++++++------- website/src/theme/DocPaginator/index.js | 8 +- website/src/theme/EditThisPage/index.js | 22 +++ website/src/theme/Heading/anchor.svg | 4 + website/src/theme/Heading/index.js | 52 ++++++ website/src/theme/Heading/styles.css | 23 +++ website/src/theme/Heading/styles.module.css | 10 ++ website/static/img/Dagger_Icons_Edit.svg | 2 +- website/yarn.lock | 2 +- 12 files changed, 248 insertions(+), 69 deletions(-) create mode 100644 website/src/theme/EditThisPage/index.js create mode 100644 website/src/theme/Heading/anchor.svg create mode 100644 website/src/theme/Heading/index.js create mode 100644 website/src/theme/Heading/styles.css create mode 100644 website/src/theme/Heading/styles.module.css diff --git a/docs/learn/103-script.md b/docs/learn/103-script.md index c18ddc86..5c41a031 100644 --- a/docs/learn/103-script.md +++ b/docs/learn/103-script.md @@ -6,4 +6,6 @@ slug: /learn/103-script In this guide, you will learn how to incorporate your custom shell scripts into a Dagger environment. For example, to run integration tests before deployment; call a custom processing step; or any other custom task which you have already automated, and want to incorporate into your Dagger environment with minimal effort. -[FIXME: This section is not yet written](https://github.com/dagger/dagger/blob/main/CONTRIBUTING.md) +This section is not yet written. Help Dagger growing by suggesting content improvements. + +[![github-contribute](https://user-images.githubusercontent.com/1186424/122426439-8cd5e380-cf90-11eb-944b-c75fadecaefe.png)](https://github.com/dagger/dagger/blob/main/CONTRIBUTING.md) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 39ae45e4..d482e8ad 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -39,6 +39,10 @@ module.exports = { lightIcon: "img/Icon_Day-mode.svg", }, }, + gtag: { + trackingID: 'G-RDXG80F635', + anonymizeIP: true, + }, }, presets: [ [ @@ -62,6 +66,7 @@ module.exports = { "docusaurus2-dotenv", { systemvars: true, }, - ] + ], + "@docusaurus/plugin-google-gtag" ], -}; +}; \ No newline at end of file diff --git a/website/package.json b/website/package.json index 9a2c8888..02014f99 100644 --- a/website/package.json +++ b/website/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "@docusaurus/core": "2.0.0-beta.0", + "@docusaurus/plugin-google-gtag": "^2.0.0-beta.0", "@docusaurus/preset-classic": "2.0.0-beta.0", "@mdx-js/react": "^1.6.21", "@svgr/webpack": "^5.5.0", diff --git a/website/src/css/custom.scss b/website/src/css/custom.scss index 6bd458e2..d61fad3d 100644 --- a/website/src/css/custom.scss +++ b/website/src/css/custom.scss @@ -9,6 +9,14 @@ /* You can override the default Infima variables here. */ :root { + --ifm-background-color: var(--ifm-color-primary-light); + + --ifm-code-background: var(--ifm-color-primary-dark); + --ifm-code-font-size: 100%; + --ifm-code-border-radius: 2rem; + --ifm-code-color: var(--ifm-color-primary-light); + --ifm-code-padding-vertical: 0; + --ifm-code-padding-horizontal: 0.2rem; --ifm-color-primary: #0e2b3d; --ifm-color-primary-dark: #131226; --ifm-color-primary-darker: rgb(31, 165, 136); @@ -21,43 +29,39 @@ --ifm-color-info: #40b9bc; --ifm-color-warning: #ef7b1a; --ifm-color-danger: #be1d43; - --ifm-navbar-height: 5rem; - --ifm-background-color: var(--ifm-color-primary-light); - --ifm-navbar-background-color: var(--ifm-color-primary-light); + --ifm-font-color-base: var(--ifm-color-primary-dark); + --ifm-font-family-base: "Karla", sans-serif; + --ifm-font-family-monospace: "Courier new", sans-serif; + --ifm-h2-font-size: 2rem; + --ifm-leading-desktop: 1; + --ifm-link-color: var(--ifm-color-primary-dark); + --ifm-link-hover-color: var(--ifm-color-primary); --ifm-menu-color: var(--ifm-color-primary-dark); --ifm-menu-color-active: var(--ifm-color-primary-dark); --ifm-menu-color-background-hover: #fdf9d7; - --ifm-font-family-base: "Karla", sans-serif; - --ifm-font-family-monospace: "Courier new", sans-serif; - --ifm-code-background: var(--ifm-color-primary); - --ifm-code-font-size: 100%; - --ifm-code-border-radius: 2rem; - --ifm-code-color: var(--ifm-color-primary-light); - --ifm-code-padding-vertical: 0; - --ifm-code-padding-horizontal: 0.2rem; - --ifm-h2-font-size: 2rem; - --ifm-menu-color-background-active: var(--ifm-color-primary); - --ifm-menu-color-active: var(--ifm-color-primary-light); - --ifm-leading-desktop: 1; + --ifm-menu-color-background-active: #fdf9d7; + --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,'); + --ifm-navbar-height: 6rem; + --ifm-navbar-background-color: var(--ifm-color-primary-light); + --ifm-pagination-nav-border-radius: 0; + --ifm-pre-padding: 2rem; + --doc-sidebar-width: 250px; --ifm-toc-border-color: transparent; --ifm-toc-link-color: var(--ifm-color-primary-dark); - --ifm-font-color-base: var(--ifm-color-primary-dark); - --ifm-link-color: var(--ifm-color-primary-dark); - --ifm-link-hover-color: var(--ifm-color-primary); - --ifm-pre-padding: 2rem; - --ifm-pagination-nav-border-radius: 0; - --doc-sidebar-width: 250px; } html[data-theme="dark"] { --ifm-background-color: var(--ifm-color-primary-dark); --ifm-navbar-background-color: transparent; --ifm-menu-color-active: var(--ifm-color-primary-light); + --ifm-menu-color-background-active: var(--ifm-color-primary); --ifm-link-color: var(--ifm-color-primary-light); --ifm-link-hover-color: var(--ifm-color-primary-light); --ifm-toc-link-color: var(--ifm-color-primary-light); --ifm-pagination-nav-color-hover: var(--ifm-color-primary-light); --ifm-tabs-color-active: var(--ifm-color-primary-light); + --ifm-table-stripe-background: #2e526a; + --ifm-code-background: var(--ifm-color-primary-dark); } /* global */ @@ -73,8 +77,44 @@ h2 { line-height: 32px; } -.markdown > h2 { - --ifm-h2-font-size: 1.5rem; +code { + margin: 0 1px; +} + +.markdown { + & > h2 { + --ifm-h2-font-size: 1.5rem; + --ifm-h2-vertical-rhythm-top: 3; + } + + & > h3 { + --ifm-h3-font-size: 1.1875rem; + --ifm-h3-vertical-rhythm-top: 3; + } + + a { + font-weight: bold; + text-decoration: underline; + color: var(--ifm-color-primary-dark); + + html[data-theme="dark"] & { + color: var(--ifm-color-primary-light); + } + + &:hover { + color: var(--ifm-color-primary); + html[data-theme="dark"] & { + color: #fefad8; + } + } + + &:active { + color: var(--ifm-color-info); + html[data-theme="dark"] & { + color: var(--ifm-color-info); + } + } + } } p { @@ -85,17 +125,27 @@ p { a[class*="menuLinkExternal"]:after { background: url("/img/Dagger_Icons_External-link.svg") no-repeat; + position: absolute; + right: var(--ifm-menu-link-padding-horizontal); + top: var(--ifm-menu-link-padding-vertical); +} + +h1[class^="docTitle"] { + margin-bottom: 3rem; +} + +.edit-this-page { + font-weight: bold; + display: flex; + align-items: center; } #__docusaurus { background-color: var(--ifm-color-primary-light); + padding-bottom: 3rem; html[data-theme="dark"] & { - background: linear-gradient( - 180deg, - var(--ifm-color-primary-dark), - var(--ifm-color-primary) - ); + background: #0d0c1b; } } @@ -108,7 +158,7 @@ a[class*="menuLinkExternal"]:after { /* navbar */ .navbar__brand { - height: var(--ifm-navbar-height); + height: 5rem; } .navbar { @@ -150,7 +200,7 @@ main[class^="docMainContainer"] { box-shadow: 0px 4px 16px 4px #13122610; border-radius: 2rem; margin-top: 1rem; - color: #fffef6; + color: var(--ifm-color-primary-light); } } @@ -178,6 +228,8 @@ div[class^="codeBlockContainer"] { margin-bottom: 2.5rem; div[class^="codeBlockTitle"] { + background-color: var(--ifm-color-primary-dark) !important; + font-family: var(--ifm-font-family-monospace); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -203,18 +255,28 @@ button[class^="copyButton"] { /* hash-link */ .hash-link { - color: #40b8bb; - - &:hover { - color: #175761; + svg path + path { + fill: #40b8bb; } - &:focus { - color: var(--ifm-color-primary-dark); + &:hover svg path + path { + fill: #175761; + } + + &:focus svg path + path { + fill: var(--ifm-color-primary-dark); } } /* menu */ +.menu { + scrollbar-color: #f0efe7 transparent; +} + +html[data-theme="dark"] .menu { + scrollbar-color: #3d6581 transparent; +} + .menu__list { padding-top: 3.5rem; @@ -232,49 +294,41 @@ button[class^="copyButton"] { color: var(--ifm-color-primary-light); } - html[data-theme="dark"] & { - color: var(--ifm-color-primary-light); - } - - html[data-theme="dark"] &:hover { - color: var(--ifm-color-primary-dark); - } - - html[data-theme="dark"] &--active:hover { - color: var(--ifm-color-primary-light); - } - - html[data-theme="dark"] &:not([href]) { - color: var(--ifm-color-primary-light); - } - + html[data-theme="dark"] &, + html[data-theme="dark"] &:not([href]), html[data-theme="dark"] &:focus { color: var(--ifm-color-primary-light); } + html[data-theme="dark"] &:hover { + background-color: var(--ifm-color-primary); + } + html[data-theme="dark"] &:active { - background-color: var(--ifm-color-primary-light); - color: var(--ifm-color-primary-dark); + background-color: var(--ifm-color-primary); + color: var(--ifm-color-primary-light); } &.menu__link--sublist { color: var(--ifm-color-primary-dark); + &:active, &:focus { background-color: var(--ifm-color-primary-light); } + + &:hover { + background-color: #fdf9d7; + } + html[data-theme="dark"] & { color: var(--ifm-color-primary-light); } html[data-theme="dark"] &:active, html[data-theme="dark"] &:focus, html[data-theme="dark"] &:hover { - color: var(--ifm-color-primary-dark); - } - html[data-theme="dark"] &:active:after, - html[data-theme="dark"] &:focus:after, - html[data-theme="dark"] &:hover:after { - filter: none; + color: var(--ifm-color-primary-light); + background-color: var(--ifm-color-primary); } } } @@ -307,6 +361,12 @@ div[class*="admonition-"] .admonition-icon svg { display: none; } +img[alt="github-contribute"] { + display: block; + margin: auto; + width: 180px; +} + @mixin admonitionIcon($args...) { @each $name, $path in meta.keywords($args) { $bgColor: if( diff --git a/website/src/theme/DocPaginator/index.js b/website/src/theme/DocPaginator/index.js index 50f6f498..993946e4 100644 --- a/website/src/theme/DocPaginator/index.js +++ b/website/src/theme/DocPaginator/index.js @@ -6,12 +6,12 @@ */ import React from 'react'; import Link from '@docusaurus/Link'; -import Translate, {translate} from '@docusaurus/Translate'; +import Translate, { translate } from '@docusaurus/Translate'; import DocPaginatorPrev from "./Dagger_Icons_Arrow-previous.svg" import DocPaginatorNext from "./Dagger_Icons_Arrow-next.svg" function DocPaginator(props) { - const {metadata} = props; + const { metadata } = props; return (