diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index 9142b05a6..353d8166e 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -49,9 +49,10 @@ jobs: UMAMI_DATA_DOMAIN: ${{ vars.UMAMI_DATA_DOMAINS }} run: npm run build - - name: Login to Docker Hub + - name: Login to Quay.io uses: docker/login-action@v3 with: + registry: quay.io username: ${{ secrets.DOCKERHUB_USERNAME }} password: ${{ secrets.DOCKERHUB_TOKEN }} @@ -68,13 +69,10 @@ jobs: file: ./Dockerfile push: true tags: | - ${{ secrets.DOCKERHUB_USERNAME }}/${{ vars.IMG_NAME }}:${{ vars.APP_VERSION }}.${{github.run_number}}-${{ steps.commit_hash.outputs.short }}-preview - - # - name: Image Digest - # run: echo ${{ steps.docker_build.outputs.digest }} + ${{ vars.DOCKERHUB_REGISTRY }}/${{ vars.DOCKERHUB_USERNAME }}/${{ vars.IMG_NAME }}:${{ vars.APP_VERSION }}.${{github.run_number}}-${{ steps.commit_hash.outputs.short }}-preview build-stable: - environment: preview + environment: stable runs-on: ubuntu-latest steps: @@ -109,9 +107,10 @@ jobs: UMAMI_DATA_DOMAIN: ${{ vars.UMAMI_DATA_DOMAINS }} run: npm run build - - name: Login to Docker Hub + - name: Login to Quay.io uses: docker/login-action@v3 with: + registry: quay.io username: ${{ secrets.DOCKERHUB_USERNAME }} password: ${{ secrets.DOCKERHUB_TOKEN }} @@ -128,8 +127,8 @@ jobs: file: ./Dockerfile push: true tags: | - ${{ secrets.DOCKERHUB_USERNAME }}/${{ vars.IMG_NAME }}:latest - ${{ secrets.DOCKERHUB_USERNAME }}/${{ vars.IMG_NAME }}:${{ vars.APP_VERSION }}.${{github.run_number}}-${{ steps.commit_hash.outputs.short }}-stable + ${{ vars.DOCKERHUB_REGISTRY }}/${{ vars.DOCKERHUB_USERNAME }}/${{ vars.IMG_NAME }}:latest + ${{ vars.DOCKERHUB_REGISTRY }}/${{ vars.DOCKERHUB_USERNAME }}/${{ vars.IMG_NAME }}:${{ vars.APP_VERSION }}.${{github.run_number}}-${{ steps.commit_hash.outputs.short }}-stable # - name: Image Digest # run: echo ${{ steps.docker_build.outputs.digest }} @@ -157,14 +156,11 @@ jobs: with: repository: "${{ vars.DOCS_NEXT_CHARTS_ORG }}/${{ vars.DOCS_NEXT_CHARTS_REPO }}" token: ${{ secrets.DOCS_NEXT_CHARTS_TOKEN }} - - # - name: Show Contents - # run: ls -latr - name: Update Charts and Commit Changes id: update_charts env: - image: ${{ secrets.DOCKERHUB_USERNAME }}\/${{ vars.IMG_NAME }} + image: ${{ vars.DOCKERHUB_REGISTRY }}\/${{ vars.DOCKERHUB_USERNAME }}\/${{ vars.IMG_NAME }} run: | # docusaurus sed -i 's/^version: .*/version: ${{ vars.APP_VERSION }}.${{github.run_number}}/' ./charts/docusaurus/Chart.yaml diff --git a/README.md b/README.md index b6c4048de..8376a19e0 100644 --- a/README.md +++ b/README.md @@ -111,7 +111,7 @@ npm run serve ## Deployment You can deploy docs-next in a various infrastructure (as every React/TS application). You can just spin a docker container, or deploy it directly on -an ECS Server or on a CCE Kubernetes Cluster (recommended). Check the architecture and provided Helm Charts for the latter at [Open Telekom Cloud Architecture Center Helm Charts](https://github.com/akyriako/docs-next-charts) repository. +an ECS Server or on a CCE Kubernetes Cluster (recommended). Check the architecture and provided Helm Charts for the latter at [Open Telekom Cloud Architecture Center Helm Charts](https://github.com/opentelekomcloud-infra/docs-next-charts) repository. ### Manual @@ -136,7 +136,7 @@ The repository is already employed with a GitHub Release Workflow that will do t 1. Builds the application for production (`npm run build`) 2. Builds and tags a container image and push the image to a predefined docker hub organization -3. Updates the Helm Charts with new versions and image tags in [Open Telekom Cloud Architecture Center Helm Charts](https://github.com/akyriako/docs-next-charts) +3. Updates the Helm Charts with new versions and image tags in [Open Telekom Cloud Architecture Center Helm Charts](https://github.com/opentelekomcloud-infra/docs-next-charts) ArgoCD (deployed on the same CCE Cluster) will pick up the changes, within its `timeout.reconciliation` value (default is *180s*), and provision the changes without any human intervention. @@ -202,4 +202,4 @@ You can see more information about the features of the extension [here](https:// 1. Include a mini overview of the blueprint under the blueprint title (additional sub-header **is not** required). 2. If you need to present (with a picture) a high-level architecture of the blueprint, insert a paragraph under the overview with the name *Solution Design* (additional sub-header **is** required). 3. Include a *Conclusion* paragraph in the end of **every** blueprint as a summary of what we achieved during the process (additional sub-header **is** required). -4. If you want to convey information that the user should not miss or overlook use **always** [adminitions](https://docusaurus.io/docs/markdown-features/admonitions). \ No newline at end of file +4. If you want to convey information that the user should not miss or overlook use **always** [admonitions](https://docusaurus.io/docs/markdown-features/admonitions). diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 8f1792b8c..9e07e1136 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -36,7 +36,7 @@ const config: Config = { { docs: { sidebarPath: './sidebars.ts', - editUrl:'https://github.com/akyriako/docs-next/tree/main/', + editUrl:'https://github.com/opentelekomcloud/docs-next/tree/main/', // showLastUpdateAuthor: true, // showLastUpdateTime: true, breadcrumbs: true, @@ -63,6 +63,11 @@ const config: Config = { themeConfig: { // Replace with your project's social card image: 'img/open-telekom-cloud-social-card.png', + colorMode: { + defaultMode: "light", + disableSwitch: false, + respectPrefersColorScheme: true, + }, navbar: { // title: 't', logo: { @@ -103,7 +108,7 @@ const config: Config = { "aria-label": 'Open Telekom Cloud Console', }, { - href: 'https://github.com/opentelekomcloud-docs', + href: 'https://github.com/opentelekomcloud/docs-next', position: 'right', className: 'navbar--github-link', "aria-label": 'GitHub', @@ -160,7 +165,7 @@ const config: Config = { label: 'Webinars', href: 'https://www.youtube.com/watch?v=U-x2gEy3968&list=PLS60dhorR-hgQ5n5L1boEQh0oVD-_k75p', }, - { + { label: 'Medium', href: 'https://medium.com', }, diff --git a/package-lock.json b/package-lock.json index bbee6dfb8..bb18e6eac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2781,15 +2781,6 @@ "@hapi/hoek": "^9.0.0" } }, - "node_modules/@heroicons/react": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz", - "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==", - "license": "MIT", - "peerDependencies": { - "react": ">= 16" - } - }, "node_modules/@jest/schemas": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz", diff --git a/src/components/HomepageAskAQuestion/styles.module.css b/src/components/HomepageAskAQuestion/styles.module.css index 2d8f36204..693587131 100644 --- a/src/components/HomepageAskAQuestion/styles.module.css +++ b/src/components/HomepageAskAQuestion/styles.module.css @@ -1,7 +1,7 @@ .item { box-shadow: 0 1px 3px gray; - background-color: var(--ifm-background-color); + background-color: var(--telekom-color-background-surface); border-radius: 2rem; color: black; overflow: hidden; @@ -9,7 +9,7 @@ html[data-theme='dark'] .item { box-shadow: 0px 1px 3px var(--ifm-color-primary); - background-color: var(--ifm-background-color); + background-color: var(--telekom-color-background-surface); border-radius: 2rem; color: white; overflow: hidden; diff --git a/src/components/HomepageContribute/styles.module.css b/src/components/HomepageContribute/styles.module.css index 2d8f36204..693587131 100644 --- a/src/components/HomepageContribute/styles.module.css +++ b/src/components/HomepageContribute/styles.module.css @@ -1,7 +1,7 @@ .item { box-shadow: 0 1px 3px gray; - background-color: var(--ifm-background-color); + background-color: var(--telekom-color-background-surface); border-radius: 2rem; color: black; overflow: hidden; @@ -9,7 +9,7 @@ html[data-theme='dark'] .item { box-shadow: 0px 1px 3px var(--ifm-color-primary); - background-color: var(--ifm-background-color); + background-color: var(--telekom-color-background-surface); border-radius: 2rem; color: white; overflow: hidden; diff --git a/src/components/HomepageFeaturedServices/styles.module.css b/src/components/HomepageFeaturedServices/styles.module.css index 2d8f36204..693587131 100644 --- a/src/components/HomepageFeaturedServices/styles.module.css +++ b/src/components/HomepageFeaturedServices/styles.module.css @@ -1,7 +1,7 @@ .item { box-shadow: 0 1px 3px gray; - background-color: var(--ifm-background-color); + background-color: var(--telekom-color-background-surface); border-radius: 2rem; color: black; overflow: hidden; @@ -9,7 +9,7 @@ html[data-theme='dark'] .item { box-shadow: 0px 1px 3px var(--ifm-color-primary); - background-color: var(--ifm-background-color); + background-color: var(--telekom-color-background-surface); border-radius: 2rem; color: white; overflow: hidden; diff --git a/src/components/ServiceCallouts/styles.modules.css b/src/components/ServiceCallouts/styles.modules.css index b8a299a8e..8ca9cf28e 100644 --- a/src/components/ServiceCallouts/styles.modules.css +++ b/src/components/ServiceCallouts/styles.modules.css @@ -17,6 +17,7 @@ } */ .callout { position: relative; + background-color: var(--telekom-color-background-surface-subtle); } .callout__title { align-items: center; @@ -60,7 +61,7 @@ html[data-theme='dark'] .callout__shadow { box-shadow: unset; - background-color: #1b1b1d; + background-color: var(--telekom-color-background-surface-subtle); } .video { diff --git a/src/css/custom.css b/src/css/custom.css index 2f56b2e18..8a0c86db9 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -29,6 +29,14 @@ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } */ :root, +html { + display: none; /* Hide until the correct theme is applied */ +} + +html[data-mode] { + display: block; /* Show after the correct theme is set */ +} + html[data-theme='light'] { --ifm-color-primary: #e20074; --ifm-color-primary-dark: #cb0068; @@ -41,13 +49,12 @@ html[data-theme='light'] { --ifm-footer-link-color: black; --ifm-code-font-size: 95%; --ifm-font-family-base: 'TeleNeoWeb'; - --ifm-background-color: #ffffff; - --ifm-background-surface-color: #ffffff; + --ifm-background-color: #fbfbfb; + --ifm-background-surface-color: var(--telekom-color-background-surface); - --background: #ffffff; + /* --background: #ffffff; */ --telekom-shadow-raised-standard: none; --telekom-radius-large: 2rem; - --telekom-color-background-surface: var(--ifm-background-surface-color); --telekom-shadow-raised-hover: 0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1); } @@ -59,23 +66,23 @@ html[data-theme='dark'] { --ifm-color-primary-light: #a1b1fb; --ifm-color-primary-lighter: #b3c0fb; --ifm-color-primary-lightest: #e8ecfe; - --ifm-background-color: #1d1d1b; - --ifm-background-surface-color: #1b1b1d; + --ifm-font-family-base: 'TeleNeoWeb'; + --ifm-background-color: #0e0e0f; + --ifm-background-surface-color: var(--telekom-color-background-surface); - --background: #000000; + /* --background: #000000; */ --telekom-shadow-raised-standard: none; --telekom-radius-large: 2rem; - --telekom-color-background-surface: var(--ifm-background-surface-color); --telekom-shadow-raised-hover: 0px 16px 64px 0px #e20074, 0px 8px 16px 0px #e20074; } /* Override system color scheme preference */ -@media (prefers-color-scheme: dark) { +/* @media (prefers-color-scheme: dark) { html[data-theme='light'] { --ifm-background-color: #ffffff; --ifm-background-surface-color: #ffffff; } -} +} */ @media screen and (max-width: 996px) { diff --git a/src/theme/Navbar/ColorModeToggle/index.tsx b/src/theme/Navbar/ColorModeToggle/index.tsx index b0d400777..241b35a34 100644 --- a/src/theme/Navbar/ColorModeToggle/index.tsx +++ b/src/theme/Navbar/ColorModeToggle/index.tsx @@ -1,15 +1,37 @@ import React from 'react'; -import {useColorMode, useThemeConfig} from '@docusaurus/theme-common'; +import {useThemeConfig} from '@docusaurus/theme-common'; import ColorModeToggle from '@theme/ColorModeToggle'; import type {Props} from '@theme/Navbar/ColorModeToggle'; import styles from './styles.module.css'; +import { useColorMode as originalUseColorMode } from '@docusaurus/theme-common'; +import { useEffect } from 'react'; + +// Create a custom hook that extends the original useColorMode for Scale +export function useColorModeWithScale() { + const { colorMode, setColorMode } = originalUseColorMode(); + const toggleScaleColorMode = (newMode) => { + document.documentElement.dataset.mode = newMode + }; + + useEffect(() => { + // On component mount, sync the initial color mode between Docusaurus and Scale + toggleScaleColorMode(colorMode); + }, [colorMode]); + + return { + colorMode, + setColorMode, + toggleScaleColorMode, + }; +} + export default function NavbarColorModeToggle({ className, }: Props): JSX.Element | null { const navbarStyle = useThemeConfig().navbar.style; const disabled = useThemeConfig().colorMode.disableSwitch; - const {colorMode, setColorMode} = useColorMode(); + const {colorMode, setColorMode, toggleScaleColorMode} = useColorModeWithScale(); if (disabled) { return null; @@ -22,7 +44,10 @@ export default function NavbarColorModeToggle({ navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined } value={colorMode} - onChange={setColorMode} + onChange={(newMode) => { + setColorMode(newMode); + toggleScaleColorMode(newMode); + }} /> ); } diff --git a/yarn.lock b/yarn.lock index ea424f9b8..a1a21202b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1724,11 +1724,6 @@ dependencies: "@hapi/hoek" "^9.0.0" -"@heroicons/react@^2.1.5": - version "2.1.5" - resolved "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz" - integrity sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA== - "@jest/schemas@^29.6.3": version "29.6.3" resolved "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz" @@ -7159,7 +7154,7 @@ react-router@^5.3.4, react-router@>=5, react-router@5.3.4: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react@*, "react@^16.13.1 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.3.1, "react@>= 16", "react@>= 16.8.0 < 19.0.0", react@>=15, react@>=16, react@>=16.0.0: +react@*, "react@^16.13.1 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.3.1, "react@>= 16.8.0 < 19.0.0", react@>=15, react@>=16, react@>=16.0.0: version "18.3.1" resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==