diff --git a/.nvmrc b/.nvmrc index 6a71aa129..9a2a0e219 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v14.11.0 +v20 diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 000000000..8892d65ed --- /dev/null +++ b/Dockerfile @@ -0,0 +1,33 @@ +FROM debian:bookworm-slim + +# Install base dependencies +RUN apt-get update && apt-get install -y \ + wget \ + curl \ + ca-certificates && \ + rm -rf /var/lib/apt/lists/* + +# Install Node.js 20.x from NodeSource +RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \ + apt-get install -y nodejs && \ + rm -rf /var/lib/apt/lists/* + +# Install Hugo 0.163.3 extended +RUN wget -q https://github.com/gohugoio/hugo/releases/download/v0.163.3/hugo_extended_0.163.3_linux-amd64.tar.gz && \ + tar xzf hugo_extended_0.163.3_linux-amd64.tar.gz -C /usr/local/bin && \ + rm hugo_extended_0.163.3_linux-amd64.tar.gz && \ + hugo version + +WORKDIR /site + +# Copy project files +COPY . /site/ + +# Install npm dependencies with lockfile +RUN npm ci + +# Expose Hugo server port +EXPOSE 1313 + +# Default command: run Hugo server +CMD ["hugo", "server", "--bind", "0.0.0.0", "--buildDrafts", "--buildFuture", "--disableFastRender"] diff --git a/Makefile b/Makefile index 62e4e6dee..1d7282766 100644 --- a/Makefile +++ b/Makefile @@ -4,7 +4,11 @@ clean: prepare: $(CURDIR)/load-docs.sh +SASS_BIN := $(CURDIR)/node_modules/.bin +export PATH := $(SASS_BIN):$(PATH) + serve: + @./scripts/setup-dart-sass.sh hugo server \ --bind 0.0.0.0 \ --buildDrafts \ diff --git a/assets/sass/admonition.sass b/assets/sass/admonition.sass deleted file mode 100644 index 7a5b2a5eb..000000000 --- a/assets/sass/admonition.sass +++ /dev/null @@ -1,25 +0,0 @@ -=admonition($color) - margin: 1.5rem 0 - border: 2.5px solid $color - border-radius: 5px - padding: 1.5rem 2rem - font-size: 1.1rem - - .title - font-size: 1.35rem - margin-bottom: 1rem - - .icon - color: $color - -.admonition - &.is-danger - +admonition($danger) - &.is-info - +admonition($info) - &.is-requirement - +admonition($purple) - &.is-success - +admonition($success) - &.is-warning - +admonition($warning) diff --git a/assets/sass/dark-mode.sass b/assets/sass/dark-mode.sass deleted file mode 100644 index 9d92d6c7f..000000000 --- a/assets/sass/dark-mode.sass +++ /dev/null @@ -1,410 +0,0 @@ -// Dark Mode Styles for Harbor Website -// Implements theming using CSS custom properties and Bulma overrides - -// Define CSS custom properties for light theme (default) -\:root - // Background colors - --color-background: #ffffff - --color-background-bis: whitesmoke - --color-surface: #ffffff - --color-card: #ffffff - - // Text colors - --color-text: #363636 - --color-text-strong: #363636 - --color-text-light: #7a7a7a - - // Brand colors - --color-primary: #4495d7 - --color-secondary: #60b932 - --color-link: #4495d7 - --color-link-hover: #3082c4 - - // UI element colors - --color-border: #dbdbdb - --color-navbar-bg: #ffffff - --color-footer-bg: #fafafa - --color-code-bg: #f5f5f5 - --color-code-text: #363636 - - // Shadows - --shadow-sm: 0 2px 3px rgba(10, 10, 10, 0.1) - --shadow-md: 0 8px 16px rgba(10, 10, 10, 0.1) - -// Dark theme overrides -[data-theme="dark"] - // Background colors - --color-background: #1a1a1a - --color-background-bis: #252525 - --color-surface: #2d2d2d - --color-card: #2d2d2d - - // Text colors - --color-text: #e0e0e0 - --color-text-strong: #f5f7fa - --color-text-light: #b0b0b0 - - // Brand colors (adjusted for better contrast on dark backgrounds) - --color-primary: #60b0ff - --color-secondary: #7ed957 - --color-link: #60b0ff - --color-link-hover: #80c0ff - - // UI element colors - --color-border: #404040 - --color-navbar-bg: #1f1f1f - --color-footer-bg: #1f1f1f - --color-code-bg: #2a2a2a - --color-code-text: #e0e0e0 - - // Shadows (lighter for dark theme) - --shadow-sm: 0 2px 3px rgba(0, 0, 0, 0.3) - --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.4) - - // Apply dark mode styles - background-color: var(--color-background) !important - - body - background-color: var(--color-background) !important - color: var(--color-text) !important - - // Navbar theming - .navbar - background-color: var(--color-navbar-bg) !important - - .navbar-item, - .navbar-link - color: var(--color-text) !important - - &:hover, - &:focus - background-color: var(--color-background-bis) !important - color: var(--color-text-strong) !important - - .navbar-burger span - background-color: var(--color-text) !important - - .navbar-dropdown - background-color: var(--color-navbar-bg) !important - border-color: var(--color-border) !important - - .navbar-item - color: var(--color-text) !important - - &:hover - background-color: var(--color-background-bis) !important - color: var(--color-text-strong) !important - - a - color: var(--color-text) !important - - &:hover - color: var(--color-text-strong) !important - - // Footer theming - .footer - background-color: var(--color-footer-bg) !important - - .has-text-black, - a - color: var(--color-text) !important - - &:hover - color: var(--color-link-hover) !important - - // Hero sections - .hero - &.has-background-white-bis, - &.is-small - background-color: var(--color-background-bis) !important - - .title, - .subtitle - color: var(--color-text-strong) !important - - .has-text-dark - color: var(--color-text-strong) !important - - // Section backgrounds - make black sections darker for contrast - section.has-background-black - background-color: #000000 !important - - // Preserve blue border under headings - hr.color - background-color: var(--color-primary) !important - - - // All headings - ensure they're light in dark mode - h1, h2, h3, h4, h5, h6 - color: var(--color-text-strong) !important - - .title, - .subtitle - color: var(--color-text-strong) !important - - // Bulma title classes - .is-1, .is-2, .is-3, .is-4, .is-5, .is-6 - color: var(--color-text-strong) !important - - // Card theming - .card - background-color: var(--color-card) !important - box-shadow: var(--shadow-md) !important - - .card-content - color: var(--color-text) !important - background-color: var(--color-card) !important - - // Buttons - .button - &.is-white - background-color: var(--color-surface) !important - color: var(--color-text) !important - border-color: var(--color-border) !important - - &:hover - background-color: var(--color-background-bis) !important - border-color: var(--color-text-light) !important - - &.is-primary, - &.is-info, - &.is-link - color: #ffffff !important - - &:hover - color: #ffffff !important - - &.is-outlined - &.is-inverted - background-color: transparent !important - border-color: var(--color-text) !important - color: var(--color-text) !important - - &:hover - background-color: var(--color-text) !important - color: var(--color-background) !important - - - // Code blocks - code, - pre - background-color: var(--color-code-bg) !important - color: var(--color-code-text) !important - - .content - color: var(--color-text) !important - - pre - background-color: var(--color-code-bg) !important - - code - background-color: var(--color-code-bg) !important - color: var(--color-code-text) !important - - h1, h2, h3, h4, h5, h6 - color: var(--color-text-strong) !important - - p, li, td, th - color: var(--color-text) !important - - strong, - b, - .has-text-weight-bold, - .has-text-weight-semibold - color: var(--color-text-strong) !important - - a - strong, - b, - .has-text-weight-bold, - .has-text-weight-semibold - color: inherit !important - - blockquote - background-color: var(--color-background-bis) !important - border-left-color: var(--color-border) !important - color: var(--color-text) !important - - // Links - a:not(.button) - color: var(--color-link) !important - - &:hover - color: var(--color-link-hover) !important - - // Ensure button links have proper colors - a.button - &.is-primary, - &.is-info, - &.is-link, - &.is-twitter-blue - color: #ffffff !important - - &:hover - color: #ffffff !important - - - // Tables - .table - background-color: var(--color-surface) !important - color: var(--color-text) !important - - thead - background-color: var(--color-background-bis) !important - - th - color: var(--color-text-strong) !important - border-color: var(--color-border) !important - - tbody - tr - background-color: var(--color-surface) !important - - &:hover - background-color: var(--color-background-bis) !important - - td - border-color: var(--color-border) !important - color: var(--color-text) !important - - // Menu (sidebar navigation) - .menu - .menu-label - color: var(--color-text-light) !important - - .menu-list - a - color: var(--color-text) !important - - &:hover - background-color: var(--color-background-bis) !important - color: var(--color-text-strong) !important - - &.is-active - background-color: var(--color-background-bis) !important - color: var(--color-primary) !important - - // Tags - .tag - background-color: var(--color-background-bis) !important - color: var(--color-text) !important - - &.is-success - background-color: var(--color-secondary) !important - color: #ffffff !important - - &.is-light - background-color: var(--color-surface) !important - color: var(--color-text) !important - - // Modal - .modal - .modal-background - background-color: rgba(10, 10, 10, 0.86) !important - - .modal-content - background-color: var(--color-surface) !important - - // Horizontal rules - hr - background-color: var(--color-border) !important - - &.thick - background-color: var(--color-border) !important - - // Search bar - #search-bar, - input.input - background-color: var(--color-surface) !important - color: var(--color-text) !important - border-color: var(--color-border) !important - - &::placeholder - color: var(--color-text-light) !important - - // Sections - .section - background-color: var(--color-background) !important - - // Columns - .column - color: var(--color-text) !important - - // Icons with text colors - .has-text-primary - color: var(--color-primary) !important - - .has-text-secondary - color: var(--color-secondary) !important - - // Level component - .level - .level-item - color: var(--color-text) !important - - // Media component - .media - .media-content - color: var(--color-text) !important - - // List component - .list - .list-item - background-color: var(--color-surface) !important - color: var(--color-text) !important - - &:hover - background-color: var(--color-background-bis) !important - -// Theme toggle button styles -.theme-toggle - background: transparent - border: none - cursor: pointer - padding: 0.5rem - display: flex - align-items: center - justify-content: center - transition: transform 0.2s ease - - &:hover - transform: scale(1.1) - - &:focus - outline: none - - .icon - font-size: 1.25rem - color: var(--color-text) - transition: color 0.3s ease - - -// Smooth transitions for theme switching -[data-theme="dark"], -[data-theme="light"] - transition: background-color 0.3s ease, color 0.3s ease - - * - transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease - -// Respect user's motion preferences -@media (prefers-reduced-motion: reduce) - [data-theme="dark"], - [data-theme="light"] - transition: none !important - - * - transition: none !important - -// Print styles (always light) -@media print - [data-theme="dark"] - background-color: white !important - color: black !important - - body, - .navbar, - .footer, - .card - background-color: white !important - color: black !important diff --git a/assets/sass/helpers.sass b/assets/sass/helpers.sass deleted file mode 100644 index 3751fb4c1..000000000 --- a/assets/sass/helpers.sass +++ /dev/null @@ -1,83 +0,0 @@ -.is-sticky - position: sticky - position: -webkit-sticky - -=logo($d, $t) - +desktop - width: $d - +touch - width: $t - -.is-cncf-logo - +logo(40%, 75%) - -.is-hero-logo - +logo(60%, 75%) - -.is-footer-logo - +logo(40%, 75%) - -.is-sticky - position: sticky - position: -webkit-sticky - top: $navbar-height + 2rem - -.is-constrained - max-width: 80ch - -.is-scrollable - overflow-y: auto - -.has-extra-bottom-padding - padding-bottom: 8rem - -// Fix bug in Bulma content -.content - .highlight, li .highlight - margin-bottom: 1rem - -hr.thick - margin: 3rem 0 - -hr.color - background-color: $primary - width: 3rem - height: 0.35rem - margin-bottom: 2rem - - &.secondary - background-color: $secondary - &.black - background-color: $black - -.has-extra-card-content-padding - padding: 2.5rem - -.has-extra-media-bottom-padding - margin-bottom: 2rem - -.has-margin-right - +desktop - margin-right: 0.75rem - +touch - margin-right: 0.5rem - - -.content - .img - &:hover - cursor: pointer - table - table-layout: fixed - word-wrap: break-word - display: block - overflow-x: auto - white-space: nowrap - -.is-page - display: flex - flex-direction: column - min-height: 100vh - - .is-main - flex: 1 diff --git a/assets/sass/style.sass b/assets/sass/style.sass deleted file mode 100644 index bc30ae68d..000000000 --- a/assets/sass/style.sass +++ /dev/null @@ -1,126 +0,0 @@ -@charset "utf-8" -{{ $extraColors := site.Params.colors.extra }} -{{ $fontAwesomeVersion := site.Params.font_awesome_version }} -{{ $fonts := site.Params.fonts }} -{{ if $fonts }} -{{ $fontSlice := (slice) }} -{{ range $fonts }} -{{ $fontSlice = $fontSlice | append (printf "%s:%s" (replace .name " " "+") (delimit .sizes ",")) }} -{{ end }} -{{ $fontsUrl := printf "https://fonts.googleapis.com/css?family=%s" (delimit $fontSlice "|") }} -@import url("{{ $fontsUrl }}") -{{ end }} - -{{ with $fontAwesomeVersion }} -{{ $fontAwesomeUrl := printf "https://use.fontawesome.com/releases/v%s/css/all.css" . }} -@import url("{{ $fontAwesomeUrl }}") -{{ end }} - -// Site-specific variables here -$harbor-blue: #4495d7 -$harbor-green: #60b932 -$twitter-blue: rgb(29, 161, 242) -$slack-green: #2EB67D - -// Extra colors specified in config -{{ with $extraColors }} -{{ range . }} -${{ .name }}: '{{ .hex }}' -{{ end }} -{{ end }} - -// Initial Bulma imports -@import "bulma/sass/utilities/initial-variables" -@import "bulma/sass/utilities/functions" - -// Bulma-specific overrides -$primary: $harbor-blue -$secondary: $harbor-green -$link: $primary -$navbar-height: 4rem -$navbar-item-img-max-height: $navbar-height * 0.6 -$menu-label-font-size: 1rem -$navbar-dropdown-radius: none -$navbar-dropdown-border-top: none -$list-radius: none -$modal-content-width: 50% - -// Font overrides -{{ if $fonts }} -// Sans-serif font -{{ with (index (where $fonts ".type" "sans_serif") 0).name }} -$family-sans-serif: "{{ . }}", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif -{{ end }} - -// Monospace font -{{ with (index (where $fonts ".type" "monospace") 0).name }} -$family-monospace: "{{ . }}", monospace -{{ end }} -{{ end }} - -// Final Bulma imports -@import "bulma/sass/utilities/derived-variables" - -// Bulma variable overrdides that require derived variables like $dark -$colors: mergeColorMaps(("secondary": ($secondary, $white), "twitter-blue": ($twitter-blue, $white), "slack-green": ($slack-green, $white)), $colors) -$menu-item-active-color: $primary -$menu-item-active-background-color: $white-bis -$menu-item-radius: none -$code: $dark -$code-background: $light - -// Bulma core -@import "bulma/sass/utilities/_all" -@import "bulma/sass/base/_all" -@import "bulma/sass/elements/container" -@import "bulma/sass/grid/columns" -// @import "bulma/sass/grid/tiles" -@import "bulma/sass/layout/hero" -@import "bulma/sass/layout/section" -@import "bulma/sass/layout/footer" - -// Elements - -// @import "bulma/sass/elements/box" -@import "bulma/sass/elements/button" -@import "bulma/sass/elements/content" -.content figure{ margin: 0px } -@import "bulma/sass/elements/icon" -@import "bulma/sass/elements/image" -// @import "bulma/sass/elements/notification" -// @import "bulma/sass/elements/progress" -// @import "bulma/sass/elements/table" -@import "bulma/sass/elements/tag" -@import "bulma/sass/elements/title" -// @import "bulma/sass/elements/other" - -// Forms -@import "bulma/sass/form/shared" -@import "bulma/sass/form/input-textarea" -// @import "bulma/sass/form/checkbox-radio" -// @import "bulma/sass/form/select" -// @import "bulma/sass/form/file" -@import "bulma/sass/form/tools" - -// Components -// @import "bulma/sass/components/breadcrumb" -@import "bulma/sass/components/card" -@import "bulma/sass/components/dropdown" -@import "bulma/sass/components/level" -@import "bulma/sass/components/list" -@import "bulma/sass/components/media" -@import "bulma/sass/components/menu" -// @import "bulma/sass/components/message" -@import "bulma/sass/components/modal" -@import "bulma/sass/components/navbar" -// @import "bulma/sass/components/pagination" -// @import "bulma/sass/components/panel" -// @import "bulma/sass/components/tabs" - -// Custom Sass imports -@import "admonition" -@import "helpers" -@import "table-popout" -@import "toc" -@import "dark-mode" - diff --git a/assets/sass/style.scss b/assets/sass/style.scss new file mode 100644 index 000000000..8410fba90 --- /dev/null +++ b/assets/sass/style.scss @@ -0,0 +1,594 @@ +@charset "utf-8"; + +// Dynamic font imports via Hugo templates +{{ $fonts := site.Params.fonts }} +{{ if $fonts }} +{{ $fontSlice := (slice) }} +{{ range $fonts }} +{{ $fontSlice = $fontSlice | append (printf "%s:%s" (replace .name " " "+") (delimit .sizes ",")) }} +{{ end }} +{{ $fontsUrl := printf "https://fonts.googleapis.com/css?family=%s" (delimit $fontSlice "|") }} +@import url("{{ $fontsUrl }}"); +{{ end }} + +{{ with site.Params.font_awesome_version }} +{{ $fontAwesomeUrl := printf "https://use.fontawesome.com/releases/v%s/css/all.css" . }} +@import url("{{ $fontAwesomeUrl }}"); +{{ end }} + +// Override Bulma 1.0.4 font family to match live site +:root { + --bulma-family-primary: "PT Sans", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + --bulma-family-secondary: "PT Sans", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; +} + +// Also set body/button/input directly to match live site exactly +body, button, input, select, textarea { + font-family: "PT Sans", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; +} + +// Override Bulma 1.0.4 color system via HSL components +// primary: #4495d7 = hsl(207, 65%, 55%) +// secondary/link: #4495d7 = hsl(207, 65%, 55%) +// info: #60b932 = hsl(100, 57%, 46%) +:root { + --bulma-primary-h: 207deg; + --bulma-primary-s: 65%; + --bulma-primary-l: 55%; + --bulma-link-h: 207deg; + --bulma-link-s: 65%; + --bulma-link-l: 55%; + --bulma-info-h: 100deg; + --bulma-info-s: 57%; + --bulma-info-l: 46%; +} + +// Custom color utilities +.has-text-secondary { color: #60b932 !important; } +a.has-text-secondary:hover, a.has-text-secondary:focus { color: #4b9127 !important; } +.has-background-secondary { background-color: #60b932 !important; } + +.has-text-twitter-blue { color: #1da1f2 !important; } +a.has-text-twitter-blue:hover, a.has-text-twitter-blue:focus { color: #0d95e8 !important; } + +.has-text-slack-green { color: #2EB67D !important; } +a.has-text-slack-green:hover, a.has-text-slack-green:focus { color: #1e8a5e !important; } + +// Custom button colors +.button.is-twitter-blue { + background-color: #1da1f2; + color: #fff; + &:hover, &:focus { background-color: #0d95e8; color: #fff; } +} + +.button.is-slack-green { + background-color: #2EB67D; + color: #fff; + &:hover, &:focus { background-color: #1e8a5e; color: #fff; } +} + +// Remove Bulma 1.0.4 active background on navbar items +a.navbar-item.is-active { + background-color: transparent !important; + color: inherit !important; +} + +// Dark Mode Styles for Harbor Website +// Implements theming using CSS custom properties and Bulma overrides +// Ported from assets/sass/dark-mode.sass (goharbor/website#703) + +:root { + --color-background: #ffffff; + --color-background-bis: whitesmoke; + --color-surface: #ffffff; + --color-card: #ffffff; + + --color-text: #363636; + --color-text-strong: #363636; + --color-text-light: #7a7a7a; + + --color-primary: #4495d7; + --color-secondary: #60b932; + --color-link: #4495d7; + --color-link-hover: #3082c4; + + --color-border: #dbdbdb; + --color-navbar-bg: #ffffff; + --color-footer-bg: #fafafa; + --color-code-bg: #f5f5f5; + --color-code-text: #363636; + + --shadow-sm: 0 2px 3px rgba(10, 10, 10, 0.1); + --shadow-md: 0 8px 16px rgba(10, 10, 10, 0.1); +} + +[data-theme="dark"] { + --color-background: #1a1a1a; + --color-background-bis: #252525; + --color-surface: #2d2d2d; + --color-card: #2d2d2d; + + --color-text: #e0e0e0; + --color-text-strong: #f5f7fa; + --color-text-light: #b0b0b0; + + --color-primary: #60b0ff; + --color-secondary: #7ed957; + --color-link: #60b0ff; + --color-link-hover: #80c0ff; + + --color-border: #404040; + --color-navbar-bg: #1f1f1f; + --color-footer-bg: #1f1f1f; + --color-code-bg: #2a2a2a; + --color-code-text: #e0e0e0; + + --shadow-sm: 0 2px 3px rgba(0, 0, 0, 0.3); + --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.4); + + background-color: var(--color-background) !important; + + body { background-color: var(--color-background) !important; color: var(--color-text) !important; } + + .navbar { + background-color: var(--color-navbar-bg) !important; + + .navbar-item, .navbar-link { color: var(--color-text) !important; } + .navbar-item:hover, .navbar-item:focus, .navbar-link:hover, .navbar-link:focus { + background-color: var(--color-background-bis) !important; + color: var(--color-text-strong) !important; + } + .navbar-burger span { background-color: var(--color-text) !important; } + + .navbar-dropdown { + background-color: var(--color-navbar-bg) !important; + border-color: var(--color-border) !important; + + .navbar-item { color: var(--color-text) !important; } + .navbar-item:hover { background-color: var(--color-background-bis) !important; color: var(--color-text-strong) !important; } + .navbar-item a { color: var(--color-text) !important; } + .navbar-item a:hover { color: var(--color-text-strong) !important; } + } + } + + .footer { + background-color: var(--color-footer-bg) !important; + .has-text-black, a { color: var(--color-text) !important; } + .has-text-black:hover, a:hover { color: var(--color-link-hover) !important; } + } + + .hero { + &.has-background-white-bis, &.is-small { background-color: var(--color-background-bis) !important; } + .title, .subtitle { color: var(--color-text-strong) !important; } + .has-text-dark { color: var(--color-text-strong) !important; } + } + + section.has-background-black { background-color: #000000 !important; } + hr.color { background-color: var(--color-primary) !important; } + + h1, h2, h3, h4, h5, h6 { color: var(--color-text-strong) !important; } + .title, .subtitle { color: var(--color-text-strong) !important; } + .is-1, .is-2, .is-3, .is-4, .is-5, .is-6 { color: var(--color-text-strong) !important; } + + .card { + background-color: var(--color-card) !important; + box-shadow: var(--shadow-md) !important; + .card-content { color: var(--color-text) !important; background-color: var(--color-card) !important; } + } + + .button { + &.is-white { + background-color: var(--color-surface) !important; + color: var(--color-text) !important; + border-color: var(--color-border) !important; + &:hover { background-color: var(--color-background-bis) !important; border-color: var(--color-text-light) !important; } + } + &.is-primary, &.is-info, &.is-link { + color: #ffffff !important; + &:hover { color: #ffffff !important; } + } + &.is-outlined.is-inverted { + background-color: transparent !important; + border-color: var(--color-text) !important; + color: var(--color-text) !important; + &:hover { background-color: var(--color-text) !important; color: var(--color-background) !important; } + } + } + + code, pre { background-color: var(--color-code-bg) !important; color: var(--color-code-text) !important; } + + .content { + color: var(--color-text) !important; + pre { background-color: var(--color-code-bg) !important; } + code { background-color: var(--color-code-bg) !important; color: var(--color-code-text) !important; } + h1, h2, h3, h4, h5, h6 { color: var(--color-text-strong) !important; } + p, li, td, th { color: var(--color-text) !important; } + strong, b, .has-text-weight-bold, .has-text-weight-semibold { color: var(--color-text-strong) !important; } + a { + strong, b, .has-text-weight-bold, .has-text-weight-semibold { color: inherit !important; } + } + blockquote { background-color: var(--color-background-bis) !important; border-left-color: var(--color-border) !important; color: var(--color-text) !important; } + } + + a:not(.button) { + color: var(--color-link) !important; + &:hover { color: var(--color-link-hover) !important; } + } + + a.button.is-primary, a.button.is-info, a.button.is-link, a.button.is-twitter-blue { + color: #ffffff !important; + &:hover { color: #ffffff !important; } + } + + .table { + background-color: var(--color-surface) !important; + color: var(--color-text) !important; + thead { background-color: var(--color-background-bis) !important; } + thead th { color: var(--color-text-strong) !important; border-color: var(--color-border) !important; } + tbody tr { background-color: var(--color-surface) !important; } + tbody tr:hover { background-color: var(--color-background-bis) !important; } + tbody tr td { border-color: var(--color-border) !important; color: var(--color-text) !important; } + } + + .menu { + .menu-label { color: var(--color-text-light) !important; } + .menu-list a { + color: var(--color-text) !important; + &:hover { background-color: var(--color-background-bis) !important; color: var(--color-text-strong) !important; } + &.is-active { background-color: var(--color-background-bis) !important; color: var(--color-primary) !important; } + } + } + + .tag { + background-color: var(--color-background-bis) !important; + color: var(--color-text) !important; + &.is-success { background-color: var(--color-secondary) !important; color: #ffffff !important; } + &.is-light { background-color: var(--color-surface) !important; color: var(--color-text) !important; } + } + + .modal { + .modal-background { background-color: rgba(10, 10, 10, 0.86) !important; } + .modal-content { background-color: var(--color-surface) !important; } + } + + hr { background-color: var(--color-border) !important; &.thick { background-color: var(--color-border) !important; } } + + #search-bar, input.input { + background-color: var(--color-surface) !important; + color: var(--color-text) !important; + border-color: var(--color-border) !important; + &::placeholder { color: var(--color-text-light) !important; } + } + + .section { background-color: var(--color-background) !important; } + .column { color: var(--color-text) !important; } + .has-text-primary { color: var(--color-primary) !important; } + .has-text-secondary { color: var(--color-secondary) !important; } + .level .level-item { color: var(--color-text) !important; } + .media .media-content { color: var(--color-text) !important; } + + .list .list-item { + background-color: var(--color-surface) !important; + color: var(--color-text) !important; + &:hover { background-color: var(--color-background-bis) !important; } + } +} + +// Theme toggle button styles +.theme-toggle { + background: transparent; + border: none; + cursor: pointer; + padding: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.2s ease; + + &:hover { transform: scale(1.1); } + &:focus { outline: none; } + + .icon { + font-size: 1.25rem; + color: var(--color-text); + transition: color 0.3s ease; + } +} + +// Smooth transitions for theme switching +[data-theme="dark"], [data-theme="light"] { + transition: background-color 0.3s ease, color 0.3s ease; + * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } +} + +@media (prefers-reduced-motion: reduce) { + [data-theme="dark"], [data-theme="light"] { + transition: none !important; + * { transition: none !important; } + } +} + +@media print { + [data-theme="dark"] { + background-color: white !important; + color: black !important; + body, .navbar, .footer, .card { background-color: white !important; color: black !important; } + } +} + +// Table popout modal — enlarges wide tables into a full-viewport dialog +// Ported from assets/sass/table-popout.sass (goharbor/website#693) + +.table-expanded { + position: fixed; + top: 5vh; + left: 5vw; + width: 90vw; + height: 90vh; + background: white; + z-index: 9999; + overflow: auto; + padding: 1.5rem; + white-space: normal; + border-radius: 6px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.08); + + table { width: 100%; table-layout: auto; white-space: normal; border-collapse: collapse; } + + th, td { border: 1px solid rgba(0, 0, 0, 0.08); padding: 0.5rem 0.75rem; vertical-align: top; } + + .table-close-btn { + position: sticky; + top: 0; + display: block; + margin-left: auto; + margin-bottom: 1rem; + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(0, 0, 0, 0.12); + padding: 0.35rem 0.5rem; + border-radius: 4px; + font-size: 1rem; + cursor: pointer; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); + z-index: 10000; + + &:focus { outline: 2px solid hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)); outline-offset: 2px; } + } +} + +.table-modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(255, 255, 255, 0.35); + -webkit-backdrop-filter: blur(6px); + backdrop-filter: blur(6px); + z-index: 9998; +} + +.table-wrapper { + position: relative; + margin-bottom: 1.25rem; + + .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } + + .table-enlarge-btn { + position: absolute; + top: 0.5rem; + right: 0.5rem; + background: rgba(0, 0, 0, 0.6); + color: white; + border: none; + padding: 0.35rem 0.5rem; + border-radius: 3px; + cursor: pointer; + font-size: 0.85rem; + z-index: 2; + + &:focus { outline: 2px solid hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)); outline-offset: 2px; } + } +} + +// Site-specific styles +.content figure { + margin: 0px; +} + +.navbar { + height: 4rem; + + .navbar-item img { + max-height: 2.4rem; + } +} + +.menu .menu-label { + font-size: 1rem; +} + +.navbar .navbar-dropdown { + border-radius: 0; + border-top: none; +} + +.list { + border-radius: 0; +} + +.modal .modal-content { + width: 50%; +} + +// Admonitions +@mixin admonition($color) { + margin: 1.5rem 0; + border: 2.5px solid $color; + border-radius: 5px; + padding: 1.5rem 2rem; + font-size: 1.1rem; + + .title { + font-size: 1.35rem; + margin-bottom: 1rem; + } + + .icon { + color: $color; + } +} + +.admonition { + &.is-danger { + @include admonition(#f14668); + } + &.is-info { + @include admonition(#209cee); + } + &.is-requirement { + @include admonition(#9d38d6); + } + &.is-success { + @include admonition(#48c774); + } + &.is-warning { + @include admonition(#ffdd57); + } +} + +// Helpers +.is-sticky { + position: sticky; + position: -webkit-sticky; + top: 4rem + 2rem; +} + +@mixin logo($d, $t) { + @media screen and (min-width: 1024px) { + width: $d; + } + @media screen and (max-width: 1023px) { + width: $t; + } +} + +.is-cncf-logo { + @include logo(40%, 75%); +} + +.is-hero-logo { + @include logo(60%, 75%); +} + +.is-footer-logo { + @include logo(40%, 75%); +} + +.is-constrained { + max-width: 80ch; +} + +.is-scrollable { + overflow-y: auto; +} + +.has-extra-bottom-padding { + padding-bottom: 8rem; +} + +.content { + .highlight, + li .highlight { + margin-bottom: 1rem; + } +} + +hr.thick { + margin: 3rem 0; +} + +hr.color { + background-color: #4495d7; + width: 3rem; + height: 0.35rem; + margin-bottom: 2rem; + + &.secondary { + background-color: #60b932; + } + &.black { + background-color: #0a0a0a; + } +} + +.has-extra-card-content-padding { + padding: 2.5rem; +} + +.has-extra-media-bottom-padding { + margin-bottom: 2rem; +} + +.has-margin-right { + @media screen and (min-width: 1024px) { + margin-right: 0.75rem; + } + @media screen and (max-width: 1023px) { + margin-right: 0.5rem; + } +} + +.content { + .img { + &:hover { + cursor: pointer; + } + } + table { + table-layout: fixed; + word-wrap: break-word; + display: block; + overflow-x: auto; + white-space: nowrap; + } +} + +.is-page { + display: flex; + flex-direction: column; + min-height: 100vh; + + .is-main { + flex: 1; + } +} + +// TOC +.toc { + line-height: 125%; + + #TableOfContents { + > ul > li { + line-height: 1.3; + + > a { + font-weight: 700; + color: #121212; + font-size: 1rem; + } + + > ul { + display: none; + } + + a { + color: #363636; + } + + & + li { + margin-top: 0.75rem; + } + } + } +} diff --git a/assets/sass/table-popout.sass b/assets/sass/table-popout.sass deleted file mode 100644 index 59298c7e2..000000000 --- a/assets/sass/table-popout.sass +++ /dev/null @@ -1,81 +0,0 @@ -// Table popout modal — enlarges wide tables into a full-viewport dialog - -.table-expanded - position: fixed - top: 5vh - left: 5vw - width: 90vw - height: 90vh - background: white - z-index: 9999 - overflow: auto - padding: 1.5rem - white-space: normal - border-radius: 6px - box-shadow: 0 0 20px rgba(0,0,0,0.08) - - table - width: 100% - table-layout: auto - white-space: normal - border-collapse: collapse - - th, td - border: 1px solid rgba(0,0,0,0.08) - padding: 0.5rem 0.75rem - vertical-align: top - - .table-close-btn - position: sticky - top: 0 - display: block - margin-left: auto - margin-bottom: 1rem - background: rgba(255,255,255,0.9) - border: 1px solid rgba(0,0,0,0.12) - padding: 0.35rem 0.5rem - border-radius: 4px - font-size: 1rem - cursor: pointer - box-shadow: 0 2px 6px rgba(0,0,0,0.06) - z-index: 10000 - - &:focus - outline: 2px solid $primary - outline-offset: 2px - -.table-modal-overlay - position: fixed - top: 0 - left: 0 - width: 100vw - height: 100vh - background: rgba(255,255,255,0.35) - -webkit-backdrop-filter: blur(6px) - backdrop-filter: blur(6px) - z-index: 9998 - -.table-wrapper - position: relative - margin-bottom: 1.25rem - - .table-scroll - overflow-x: auto - -webkit-overflow-scrolling: touch - - .table-enlarge-btn - position: absolute - top: 0.5rem - right: 0.5rem - background: rgba(0,0,0,0.6) - color: white - border: none - padding: 0.35rem 0.5rem - border-radius: 3px - cursor: pointer - font-size: 0.85rem - z-index: 2 - - &:focus - outline: 2px solid $primary - outline-offset: 2px diff --git a/assets/sass/toc.sass b/assets/sass/toc.sass deleted file mode 100644 index 715ce42e2..000000000 --- a/assets/sass/toc.sass +++ /dev/null @@ -1,20 +0,0 @@ -.toc - line-height: 125% - - #TableOfContents - > ul > li - line-height: 1.3 - - > a - font-weight: 700 - font-color: $black-bis - font-size: 1rem - - > ul - display: none - - a - color: $grey-dark - - & + li - margin-top: .75rem \ No newline at end of file diff --git a/config.toml b/config.toml index caf385e9e..134b383d6 100644 --- a/config.toml +++ b/config.toml @@ -1,6 +1,6 @@ title = "Harbor" baseURL = "https://goharbor.io" -disableKinds = ["taxonomy", "taxonomyTerm"] +disableKinds = ["taxonomy", "term"] ignoreFiles = ["README.md"] [params] @@ -168,7 +168,7 @@ weight = 4 home = [ "HTML", "REDIRECTS" ] [mediaTypes."text/netlify"] -delimiter = "" +suffixes = [] [outputFormats.REDIRECTS] mediaType = "text/netlify" diff --git a/layouts/partials/admonition.html b/layouts/partials/admonition.html index dc37b6529..7701006e3 100644 --- a/layouts/partials/admonition.html +++ b/layouts/partials/admonition.html @@ -10,11 +10,11 @@
{{ with .title }}

- {{ . | markdownify }} + {{ . | string | markdownify }}

{{ end }} - {{ .content | markdownify }} + {{ .content | string | markdownify }}
diff --git a/layouts/partials/cli-docs/menu.html b/layouts/partials/cli-docs/menu.html index 9310b4884..52378d73a 100644 --- a/layouts/partials/cli-docs/menu.html +++ b/layouts/partials/cli-docs/menu.html @@ -1,7 +1,7 @@ {{ $thisSection := .CurrentSection.RelPermalink }} {{ $thisPage := .RelPermalink }} {{ $docsSections := where site.Sections "Section" "cli-docs" }} -{{ $version := index (split .File.Path "/") 1 }} +{{ $version := "" }}{{ with .File }}{{ $version = index (split .Path "/") 1 }}{{ end }}