diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index 041d11e3..ba364739 100644 --- a/.github/workflows/deploy.yaml +++ b/.github/workflows/deploy.yaml @@ -17,7 +17,7 @@ jobs: - name: Build site uses: actions/setup-node@v3 with: - node-version: 16.x + node-version-file: .node-version cache: yarn - name: Build run: make build diff --git a/.github/workflows/test-deploy.yaml b/.github/workflows/test-deploy.yaml index db3c35e2..e563dee3 100644 --- a/.github/workflows/test-deploy.yaml +++ b/.github/workflows/test-deploy.yaml @@ -15,7 +15,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version-file: .node-version cache: yarn - name: Build diff --git a/.node-version b/.node-version new file mode 100644 index 00000000..6a148f28 --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +20.5.0 diff --git a/docusaurus.config.js b/docusaurus.config.js index 82fc00de..d852112f 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -17,6 +17,13 @@ const config = { organizationName: "brimdata", projectName: "zed", trailingSlash: false, + scripts: [ + { + src: 'https://plausible.io/js/script.js', + defer: true, + "data-domain": "zed.brimdata.io", + }, + ], plugins: [ // This plugin allows, e.g, docs/ to be a symlink to ../zed/docs/. @@ -43,9 +50,6 @@ const config = { theme: { customCss: require.resolve("./src/css/custom.css"), }, - gtag: { - trackingID: "G-CV1VB9VF13", - }, }), ], ], diff --git a/src/css/custom.css b/src/css/custom.css index 375b13cb..5f6d7e52 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -6,18 +6,18 @@ /* You can override the default Infima variables here. */ :root { - --blue: #2F4770; --orange: hsl(30, 100%, 50%); - --black: #111824; - + --black: rgba(17, 24, 36); + --transparent-black: rgba(17, 24, 36, 0.50); + --ifm-color-primary: var(--orange); --ifm-font-family-base: "protipo", "sans-serif"; - --imf-font-color-base: var(--black) --ifm-color-content: var(--black); --ifm-hero-text-color: var(--black); - --ifm-heading-font-weight: 900; + --ifm-heading-font-weight: 700; --ifm-color-primary-darkest: #702D00; + --ifm-menu-color: var(--ifm-font-color-base); --ifm-color-primary: #eb7500; --ifm-color-primary-dark: #d36900; @@ -27,18 +27,40 @@ --ifm-color-primary-lighter: #ff870f; --ifm-color-primary-lightest: #ff9832; - --ifm-font-size-base: 110%; + --ifm-font-size-base: 15px; + --ifm-toc-border-color: var(--ifm-hover-overlay); + --doc-sidebar-width: 240px !important; + --ifm-menu-link-padding-vertical: 0.2rem; + --ifm-breadcrumb-item-background-active: none; + + --ifm-background-color: white; + --ifm-navbar-background-color: var(--ifm-background-color); + --ifm-container-width: 1200px; + + --ifm-container-width-xl: 1200px; + --ifm-footer-link-color: var(--ifm-color-content); + --ifm-footer-background-color: var(--ifm-color-gray-900); } -@media screen and (max-width: 996px) { - :root { - --ifm-font-size-base: 100%; +[data-theme='dark']:root { + --ifm-background-color: var(--black); + --ifm-footer-background-color: var(--black); + + .footer--dark { + --ifm-footer-background-color: var(--black); } +} + +@media screen and (max-width: 996px) { .markdown h1:first-child { --ifm-h1-font-size: 2.4rem } } +h1 { + font-weight: 900; +} + .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.1); display: block; @@ -50,10 +72,254 @@ background-color: var(--black); } -.footer--dark { - --ifm-footer-background-color: var(--black); + +.footer { + border-top: 1px solid var(--ifm-toc-border-color); } .markdown a { font-weight: 500; -} \ No newline at end of file +} + +.main-wrapper { + margin: 0 auto; + max-width: var(--ifm-container-width); + width: 100%; +} + + +.navbar--fixed-top { + margin-bottom: 2rem; + box-shadow: none; + border-bottom: 1px solid var(--ifm-toc-border-color); +} + +.navbar__link { + font-weight: normal; + color: currentColor; + border-radius: 0.25rem; + transition: all var(--ifm-transition-fast); + + &:hover { + color: currentColor; + background: var(--ifm-color-emphasis-200); + } +} + +.navbar__brand:hover { + color: var(--ifm-color-content); +} + +.navbar__link--active { + font-weight: 900; +} + +/** Desktop Navbar **/ + +@media screen and (min-width: 996px) { + :root { + --ifm-navbar-background-color: rgba(255, 255, 255, 0.8); + } + + [data-theme='dark']:root { + --ifm-navbar-background-color: var(--transparent-black); + } + + .navbar--fixed-top { + backdrop-filter: blur(6px); + } + + .navbar__inner { + margin: 0 auto; + max-width: var(--ifm-container-width); + } + + .theme-doc-sidebar-container { + padding-top: 0.9rem; + border-right: none !important; + } + + .theme-doc-sidebar-container .menu { + padding-right: 1rem; + padding-left: 1rem; + padding-bottom: 5rem; + } +} + + +.theme-doc-sidebar-menu { + border-left: 1px solid var(--ifm-toc-border-color); + padding-left: 0.825rem; +} + +.menu__list { + font-weight: normal; + font-size: 0.9rem; +} + +.menu__link--sublist-caret:after, +.menu__caret:before { + background-size: 1.3rem 1.3rem; + transition: all 250ms; + + &:hover { + opacity: 1; + } +} + +.menu__list-item-collapsible a { + flex: 0; +} + +.menu__list-item-collapsible button { + padding: 0 0.4em; + + &:hover { + background: none; + } +} + +.menu__link { + padding-right: 0.375rem; +} + +.menu__link--sublist::after { + margin-left: 0.375rem; +} + +.menu__link--active.menu__link--active, +.menu__list-item-collapsible--active { + font-weight: 900; + background: none; + color: currentColor; + + /* Add hover styles */ +} + +.theme-doc-version-badge { + display: none; +} + +.theme-doc-toc-desktop { + --ifm-toc-padding-vertical: 0; + margin-top: 0rem; + border-left: 1px solid var(--ifm-hover-overlay); + + .table-of-contents { + padding-top: 0; + padding-left: 0; + } + + .table-of-contents__link { + opacity: 0.5; + transition: opacity 400ms; + border-radius: 0.25rem; + padding: 0.125rem 0.25rem; + } + + &:hover .table-of-contents__link { + opacity: 0.8; + } + + .table-of-contents__link:hover { + color: currentColor; + opacity: 1; + background: var(--ifm-menu-color-background-hover); + } + + .table-of-contents__link--active { + opacity: 1; + color: currentColor; + font-weight: 900; + } + +} + +div.theme-doc-toc-mobile { + margin-bottom: 2.5rem; +} + +a[aria-label="Home page"] { + padding-left: 0; + margin-left: 0; + margin-left: -3px; +} + +nav.theme-doc-breadcrumbs { + margin-top: 0.25rem; + margin-bottom: 3rem; +} + +.breadcrumbs { + margin: 0; + margin-top: 4px; +} + +.breadcrumbs__link { + padding: 0; + color: var(--ifm-color-gray-600); + + &:after { + color: var(--ifm-color-gray-500); + } +} + +.breadcrumbs__item--active .breadcrumbs__link { + color: var(--ifm-font-color-base); +} + +.footer__col { + text-align: center; +} + +.footer__bottom { + margin-top: 4rem; + opacity: 0.5; +} + + +.menu__link--sublist-caret:after, +.menu__caret:before { + background-size: 1rem 1rem; + background-position: center center; +} + +.menu__caret.menu__caret { + padding: 0; +} + +.navbar-sidebar { + background: var(--ifm-background-color); +} + +@media screen and (min-width: 996px) { + .menu__link:not(.menu__link--active) { + transition: opacity 400ms; + opacity: 0.5; + } + + .theme-doc-sidebar-container:hover { + .menu__link:not(.menu__link--active) { + opacity: 0.8; + } + + .menu__link:not(.menu__link--active):hover { + opacity: 19 + } + } + + .menu__link:hover { + opacity: 1; + } +} + +.main-wrapper .col.col--3 { + padding-left: 4rem; +} + + +@media screen and (min-width: 966px) { + .main-wrapper .col:not(.col--3) { + padding-left: 4rem; + } +}