Merge pull request #4855 from jeradrutnam/master

Fix some issues in quick-starts
wso2 · Nov 13, 2024 · c1ef2f9 · c1ef2f9
2 parents 0351a01 + ab117ae
commit c1ef2f9
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 29 deletions.
diff --git a/en/asgardeo/docs/quick-starts/react.md b/en/asgardeo/docs/quick-starts/react.md
@@ -9,18 +9,18 @@ what_you_will_learn:
   - Display user profile information
 prerequisites:
   - About 15 minutes
-  - <a href="{{ config.extra.base_path }}/get-started/create-asgardeo-account/">Asgardeo account</a>
+  - <a href="{{ base_path }}/get-started/create-asgardeo-account/">Asgardeo account</a>
   - Install a JS package manager
   - A favorite text editor or IDE
 source_code: <a href="https://github.com/asgardeo/asgardeo-auth-react-sdk/tree/main/samples/asgardeo-react-app" target="_blank" class="github-icon">React Vite App Sample</a>
-# whats_next:
-#   - Try out {{product_name}} [complete React guide](https://wso2.com/asgardeo/docs/complete-guides/react/introduction/){:target="_blank"} 
-#   - Try out {{product_name}}  user onboarding complete guide for React
-#   - Read security best practices for React app guide
+whats_next:
+  - Try out <a href="{{ base_path }}/complete-guides/react/introduction/" target="_blank">{{ product_name }} complete React guide</a>
+  - Try out {{product_name}} user onboarding complete guide for React
+  - Read security best practices for React app guide
 ---
-## Configure an Application in Asgardeo
+## Configure an Application in {{ product_name }}
 
-- Sign into Asgardeo console and navigate to Applications > New Application.
+- Sign into {{ product_name }} console and navigate to Applications > New Application.
 - Select Single Page Application and complete the wizard popup by providing a suitable name and an authorized redirect URL
 
   - Name -  Asgardeo-React
@@ -169,7 +169,7 @@ Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
 
 !!! Important
 
-    You need to create a test user in Asgardeo by following this [guide](https://is.docs.wso2.com/en/latest/guides/users/manage-users/#onboard-single-user){:target="_blank"} to tryout login and logout features.
+    You need to create a test user in {{ product_name }} by following this [guide]({{ base_path }}/guides/users/manage-users/#onboard-single-user){:target="_blank"} to tryout login and logout features.
 
 ## Display logged in user details
 

diff --git a/en/base.yml b/en/base.yml
@@ -106,13 +106,13 @@ extra:
   integrations:
     - name: Auth React SDK
       icon: assets/img/logo/react-logo.svg
-      description: An SDK to integrate {{ config.extra.product_name }} into React applications
+      description: An SDK to integrate {{ product_name }} into React applications
       documentation_link: get-started/try-your-own-app/react/
       download_link: https://github.com/asgardeo/asgardeo-auth-react-sdk/releases/latest/download/asgardeo-react-app.zip
       source_link: https://github.com/asgardeo/asgardeo-auth-react-sdk
     - name: Auth SPA SDK
       icon: assets/img/logo/javascript-logo.svg
-      description: An SDK to integrate {{ config.extra.product_name }} into single page applications
+      description: An SDK to integrate {{ product_name }} into single page applications
       documentation_link: get-started/try-your-own-app/javascript/
       download_link: https://github.com/asgardeo/asgardeo-auth-spa-sdk/releases/latest/download/asgardeo-html-js-app.zip
       source_link: https://github.com/asgardeo/asgardeo-auth-spa-sdk
@@ -128,7 +128,7 @@ extra:
     - name: Auth Node SDK
       icon: assets/img/logo/expressjs-logo.svg
       dark_icon: assets/img/logo/expressjs-logo-dark.svg
-      description: An SDK to integrate {{ config.extra.product_name }} into JS/TS-based frameworks such as ExpressJS
+      description: An SDK to integrate {{ product_name }} into JS/TS-based frameworks such as ExpressJS
       source_link: https://github.com/asgardeo/asgardeo-auth-node-sdk
     - name: Tomcat OIDC Agent
       icon: assets/img/logo/java-logo.svg
@@ -161,7 +161,7 @@ extra:
       source_link: https://github.com/openid/AppAuth-iOS
     - name: Android Mobile UI SDK
       icon: assets/img/logo/android-logo.svg
-      description: A client SDK to integrate {{ config.extra.product_name }} into Android mobile applications using "app-native authentication"
+      description: A client SDK to integrate {{ product_name }} into Android mobile applications using "app-native authentication"
       documentation_link: https://asgardeo.github.io/mobile-ui-sdks/android/introduction.html
       source_link: https://github.com/asgardeo/mobile-ui-sdks/tree/main/android
   redoc_theme: '{

diff --git a/en/identity-server/7.0.0/docs/quick-starts/react.md b/en/identity-server/7.0.0/docs/quick-starts/react.md
@@ -9,18 +9,18 @@ what_you_will_learn:
   - Display user profile information
 prerequisites:
   - About 15 minutes
-  - <a href="{{ config.extra.base_path }}/get-started/quick-set-up/">Set-up WSO2 Identity Server</a>
+  - <a href="{{ base_path }}/get-started/quick-set-up/">Set-up WSO2 Identity Server</a>
   - Install a JS package manager
   - A favorite text editor or IDE
 source_code: <a href="https://github.com/asgardeo/asgardeo-auth-react-sdk/tree/main/samples/asgardeo-react-app" target="_blank" class="github-icon">React Vite App Sample</a>
-# whats_next:
-#   - Try out {{product_name}} [complete React guide](https://is.docs.wso2.com/en/latest/complete-guides/react/introduction/){:target="_blank"} 
-#   - Try out {{product_name}}  user onboarding complete guide for React
-#   - Read security best practices for React app guide
+whats_next:
+  - Try out <a href="{{ base_path }}/complete-guides/react/introduction/" target="_blank">{{ product_name }} complete React guide</a>
+  - Try out {{product_name}} user onboarding complete guide for React
+  - Read security best practices for React app guide
 ---
-## Configure an Application in WSO2 Identity Server
+## Configure an Application in {{ product_name }}
 
-- Sign into WSO2 Identity Server console and navigate to Applications > New Application.
+- Sign into {{ product_name }} console and navigate to Applications > New Application.
 - Select Single Page Application and complete the wizard popup by providing a suitable name and an authorized redirect URL
 
   - Name -  IS-React
@@ -176,7 +176,7 @@ Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
 
 !!! Important
 
-    You need to create a test user in WSO2 Identity Server by following this [guide](https://wso2.com/asgardeo/docs/guides/users/manage-users/#onboard-a-single-user){:target="_blank"} to tryout login and logout features.
+    You need to create a test user in {{ product_name }} by following this [guide]({{ base_path }}/guides/users/manage-users/#onboard-single-user){:target="_blank"} to tryout login and logout features.
 
 ## Display logged in user details
 

diff --git a/en/theme/material/assets/css/complete-guide.css b/en/theme/material/assets/css/complete-guide.css
@@ -33,7 +33,7 @@
     display: inline-block;
     margin-top: 1px;
     margin-right: 10px;
-    background: var(--md-default-fg-color);
+    background: var(--md-default-fg-color--light);
     color: var(--md-default-bg-color);
     font-size: 12px;
     border-radius: 50%;
@@ -60,8 +60,8 @@
     top: 1rem;
     left: 24px;
     width: 0;
-    height: calc(100% - 5px);
-    border-left: 1px solid var(--md-default-fg-color);
+    height: calc(100% - 11px);
+    border-left: 1px solid var(--md-default-fg-color--light);
 }
 
 .md-nav__item:last-child::before {

diff --git a/en/theme/material/assets/css/quick-start.css b/en/theme/material/assets/css/quick-start.css
@@ -126,10 +126,10 @@ ul.tick-list > li:before {
 [data-md-component='toc'] .md-nav__link::before {
     content: '';
     position: absolute;
-    top: .5rem;
+    top: .8rem;
     left: 0;
     width: 0;
-    height: calc(100% - 5px);
+    height: calc(100% - 13px);
     border-left: 1px solid var(--md-default-fg-color);
 }
 

diff --git a/en/theme/material/templates/integrations.html b/en/theme/material/templates/integrations.html
@@ -38,7 +38,7 @@
               {% endif %}
               <p class="integration-card-header">{{ integration.name }}</p>
               {% set description = integration.description %}
-              {% set description = description.replace('{{ config.extra.product_name }}', config.extra.product_name) %}
+              {% set description = description.replace('{{ product_name }}', config.extra.product_name).replace('{{product_name}}', config.extra.product_name) %}
               <p class="integration-card-description">{{ description }}</p>
               <div class="integration-card-source-links">
                 {% if integration.documentation_link %}

diff --git a/en/theme/material/templates/quick-start.html b/en/theme/material/templates/quick-start.html
@@ -39,7 +39,8 @@ <h1 id="{{ page.meta.heading | lower | replace(' ', '-') | replace('/', '-') }}"
                 <h4 id="what-you-will-learn">What You Will Learn</h4>
                 <ul class="tick-list">
                   {% for item in page.meta.what_you_will_learn %}
-                  {% set item = item.replace('{{ config.extra.base_path }}', config.extra.base_path) %}
+                  {% set item = item.replace('{{ base_path }}', config.extra.base_path).replace('{{base_path}}', config.extra.base_path) %}
+                  {% set item = item.replace('{{ product_name }}', config.extra.product_name).replace('{{product_name}}', config.extra.product_name) %}
                     <li>{{ item | safe }}</li>
                   {% endfor %}
                 </ul>
@@ -51,7 +52,8 @@ <h4>Prerequisites</h4>
                   Before you start, ensure you have the following:
                   <ul>
                     {% for item in page.meta.prerequisites %}
-                    {% set item = item.replace('{{ config.extra.base_path }}', config.extra.base_path) %}
+                    {% set item = item.replace('{{ base_path }}', config.extra.base_path).replace('{{base_path}}', config.extra.base_path) %}
+                    {% set item = item.replace('{{ product_name }}', config.extra.product_name).replace('{{product_name}}', config.extra.product_name) %}
                       <li>{{ item | safe }}</li>
                     {% endfor %}
                   </ul>
@@ -79,7 +81,8 @@ <h4>Example Source Code</h4>
         <h2>What's Next?</h2>
         <ul>
           {% for item in page.meta.whats_next %}
-          {% set item = item.replace('{{ config.extra.base_path }}', config.extra.base_path) %}
+          {% set item = item.replace('{{ base_path }}', config.extra.base_path).replace('{{base_path}}', config.extra.base_path) %}
+          {% set item = item.replace('{{ product_name }}', config.extra.product_name).replace('{{product_name}}', config.extra.product_name) %}
             <li>{{ item | safe }}</li>
           {% endfor %}
         </ul>