Merge branch 'main' into 117-add-by-industry-use-cases

opentelekomcloud · Oct 18, 2024 · 5f3d776 · 5f3d776
2 parents bb3153e + c21ad46
commit 5f3d776
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 54 deletions.
diff --git 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
@@ -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).
+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
@@ -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
diff --git a/src/components/HomepageAskAQuestion/styles.module.css b/src/components/HomepageAskAQuestion/styles.module.css
@@ -1,15 +1,15 @@
 
 .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;
 }
 
 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
@@ -1,15 +1,15 @@
 
 .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;
 }
 
 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
@@ -1,15 +1,15 @@
 
 .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;
 }
 
 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
@@ -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
@@ -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
@@ -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
@@ -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==