Merge pull request #4871 from jeradrutnam/master

Add visited link check indicator to complete-guides + Fixed QSG copy button not showing issue
wso2 · Nov 20, 2024 · 605036d · 605036d
2 parents 0f7b8f8 + bae09ae
commit 605036d
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 65 deletions.
diff --git a/en/asgardeo/docs/quick-starts/react.md b/en/asgardeo/docs/quick-starts/react.md
@@ -129,11 +129,11 @@ const config = {
 }
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-<React.StrictMode>
-    <AuthProvider config={ config }>
-        <App />
-    </AuthProvider>
-</React.StrictMode>,
+    <React.StrictMode>
+        <AuthProvider config={ config }>
+            <App />
+        </AuthProvider>
+    </React.StrictMode>,
 );
 
 ```
@@ -153,11 +153,11 @@ const { state, signIn, signOut } = useAuthContext();
 
 return (
     <>
-    {
-        state.isAuthenticated
-        ? <button onClick={() => signOut()}>Logout</button>
-        : <button onClick={() => signIn()}>Login</button>
-    }
+        {
+            state.isAuthenticated
+            ? <button onClick={() => signOut()}>Logout</button>
+            : <button onClick={() => signIn()}>Login</button>
+        }
     </>
 )
 };
@@ -183,14 +183,14 @@ const App = () => {
 
 return (
     <>
-    {
-        state.isAuthenticated ?
-        <>
-            <p>Welcome {state.username}</p>
-            <button onClick={() => signOut()}>Logout</button>
-        </>
-        : <button onClick={() => signIn()}>Login</button>
-    }
+        {
+            state.isAuthenticated ?
+            <>
+                <p>Welcome {state.username}</p>
+                <button onClick={() => signOut()}>Logout</button>
+            </>
+            : <button onClick={() => signIn()}>Login</button>
+        }
     </>
 )
 };

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
@@ -136,11 +136,11 @@ const config = {
 }
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-<React.StrictMode>
-    <AuthProvider config={ config }>
-        <App />
-    </AuthProvider>
-</React.StrictMode>,
+    <React.StrictMode>
+        <AuthProvider config={ config }>
+            <App />
+        </AuthProvider>
+    </React.StrictMode>,
 );
 
 ```
@@ -160,11 +160,11 @@ const { state, signIn, signOut } = useAuthContext();
 
 return (
     <>
-    {
-        state.isAuthenticated
-        ? <button onClick={() => signOut()}>Logout</button>
-        : <button onClick={() => signIn()}>Login</button>
-    }
+        {
+            state.isAuthenticated
+            ? <button onClick={() => signOut()}>Logout</button>
+            : <button onClick={() => signIn()}>Login</button>
+        }
     </>
 )
 };
@@ -190,14 +190,14 @@ const App = () => {
 
 return (
     <>
-    {
-        state.isAuthenticated ?
-        <>
-            <p>Welcome {state.username}</p>
-            <button onClick={() => signOut()}>Logout</button>
-        </>
-        : <button onClick={() => signIn()}>Login</button>
-    }
+        {
+            state.isAuthenticated ?
+            <>
+                <p>Welcome {state.username}</p>
+                <button onClick={() => signOut()}>Logout</button>
+            </>
+            : <button onClick={() => signIn()}>Login</button>
+        }
     </>
 )
 };

diff --git a/en/theme/material/assets/css/complete-guide.css b/en/theme/material/assets/css/complete-guide.css
@@ -54,16 +54,20 @@
     background: var(--md-typeset-a-color);
 }
 
-.md-nav__item::before {
+.md-nav__item:not(.md-nav__item--nested)::before {
     content: '';
     position: absolute;
-    top: 1rem;
+    top: 1.2rem;
     left: 24px;
     width: 0;
-    height: calc(100% - 11px);
+    height: calc(100% - 18px);
     border-left: 1px solid var(--md-default-fg-color--light);
 }
 
-.md-nav__item:last-child::before {
+.md-nav__item:not(.md-nav__item--nested):last-child::before {
     border-left: none !important;
 }
+
+.md-nav__item.md-nav__item--nested > .md-nav__link {
+    display: flex;
+}
diff --git a/en/theme/material/assets/css/quick-start.css b/en/theme/material/assets/css/quick-start.css
@@ -112,7 +112,7 @@ ul.tick-list > li:before {
     line-height: 1.1;
 }
 
-.md-nav__list {
+.md-nav--secondary .md-nav__list {
     margin-top: .7rem;
 }
 
@@ -126,10 +126,10 @@ ul.tick-list > li:before {
 [data-md-component='toc'] .md-nav__link::before {
     content: '';
     position: absolute;
-    top: .8rem;
+    top: .95rem;
     left: 0;
     width: 0;
-    height: calc(100% - 13px);
+    height: calc(100% - 20px);
     border-left: 1px solid var(--md-default-fg-color);
 }
 

diff --git a/en/theme/material/assets/css/theme.css b/en/theme/material/assets/css/theme.css
@@ -114,6 +114,19 @@
 .icon-color-4 { background-color: var(--icon-color-4-bg); }
 .icon-color-4 svg path { fill: var(--icon-color-4-fg) !important; }
 
+[data-md-color-scheme=default] .md-typeset pre > .md-clipboard {
+    color: var(--md-default-bg-color--lightest);
+}
+
+[data-md-color-scheme=default] .md-typeset pre:hover > .md-clipboard {
+    color: var(--md-default-bg-color--light);
+}
+
+[data-md-color-scheme=default] .md-typeset pre > .md-clipboard:focus,
+[data-md-color-scheme=default] .md-typeset pre > .md-clipboard:hover {
+    color: var(--md-accent-fg-color);
+}
+
 .md-typeset .tabbed-labels,
 .highlight span.filename {
     border-top-left-radius: var(--md-code-block-radius);
@@ -341,14 +354,19 @@
     height: 93vh;
 }
 
-.md-sidebar--primary {
-    border-right: 1px solid var(--md-divider-color);
-}
-
 .md-main__inner {
     margin-top: 0px;
 }
 
+.md-nav__link {
+    margin-top: .8em;
+}
+
+.md-nav {
+    font-size: .6rem;
+    line-height: 1.3;
+}
+
 .md-sidebar--secondary .md-nav--secondary > ul ul > li {
     padding-left: 30px;
     font-size: 0.6rem;
@@ -381,6 +399,29 @@
     font-style: italic;
 }
 
+.md-nav__link-read_time > .md-nav__link-read_check:after {
+    background-color: #00c853;
+    -webkit-mask-image: var(--md-admonition-icon--success);
+    mask-image: var(--md-admonition-icon--success);
+    content: "";
+    height: .6rem;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    position: absolute;
+    width: .6rem;
+    display: none;
+    padding-left: 25px;
+    top: .82rem;
+}
+
+.md-nav__link-read_time.visited > .md-nav__link-read_check:after {
+    display: inline-block;
+}
+
 .md-typeset h1 > span {
     font-size: 14px;
     font-style: italic;
@@ -420,6 +461,10 @@
         background-color: var(--md-default-bg-color);
         height: 4.2rem;
     }
+
+    .md-sidebar--primary {
+        top: var(--md-header-min-height);
+    }
 }
 
 @media screen and (min-width: 76.25em) {

diff --git a/en/theme/material/assets/js/theme.js b/en/theme/material/assets/js/theme.js
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -18,22 +18,24 @@
 
 const dropdown = document.querySelector('.md-header__version-select-dropdown');
 
-// Add a click event listener to the document
-document.addEventListener('click', function(event) {
-  // Check if the click event target is outside of the dropdown
-  if (!dropdown.contains(event.target)) {
-    dropdown.classList.remove('open'); // Hide the dropdown
-  }
-});
+if (dropdown) {
+  // Add a click event listener to the document
+  document.addEventListener('click', function(event) {
+    // Check if the click event target is outside of the dropdown
+    if (!dropdown.contains(event.target)) {
+      dropdown.classList.remove('open'); // Hide the dropdown
+    }
+  });
 
-// Add a click event listener to the dropdown link
-const dropdownLink = dropdown.querySelector('.dropdown-link');
+  // Add a click event listener to the dropdown link
+  const dropdownLink = dropdown.querySelector('.dropdown-link');
 
-dropdownLink.addEventListener('click', function(event) {
-  event.preventDefault();
-  event.stopPropagation(); // Prevent the event from propagating to the document
-  dropdown.classList.toggle('open'); // Toggle the "open" class
-});
+  dropdownLink.addEventListener('click', function(event) {
+    event.preventDefault();
+    event.stopPropagation(); // Prevent the event from propagating to the document
+    dropdown.classList.toggle('open'); // Toggle the "open" class
+  });
+}
 
 // Add a class to tasb that has multiple child elements rather than a code block
 document.querySelectorAll('.tabbed-content').forEach(tabbedContent => {

diff --git a/en/theme/material/partials/nav-item.html b/en/theme/material/partials/nav-item.html
@@ -147,7 +147,10 @@
       >
         {{ nav_item.title }}
         {% if nav_item.meta and nav_item.meta.read_time %}
-            <span class="md-nav__link-read_time">{{ nav_item.meta.read_time }}</span>
+            <span class="md-nav__link-read_time">
+              {{ nav_item.meta.read_time }}
+              <span class="md-nav__link-read_check"></span>
+            </span>
         {% endif %}
       </a>
 
@@ -163,7 +166,10 @@
       <a href="{{ nav_item.url | url }}" class="md-nav__link">
         {{ nav_item.title }}
         {% if nav_item.meta and nav_item.meta.read_time %}
-            <span class="md-nav__link-read_time">{{ nav_item.meta.read_time }}</span>
+            <span class="md-nav__link-read_time">
+              {{ nav_item.meta.read_time }}
+              <span class="md-nav__link-read_check"></span>
+            </span>
         {% endif %}
       </a>
     </li>

diff --git a/en/theme/material/templates/complete-guide.html b/en/theme/material/templates/complete-guide.html
@@ -138,5 +138,32 @@ <h1 id="{{ page.meta.heading | lower | replace(' ', '-') | replace('/', '-') }}"
         sectionCountw++;
     });
 
+    // Function to mark visited links
+    document.addEventListener('DOMContentLoaded', () => {
+      const visitedUrls = JSON.parse(localStorage.getItem('visitedUrls')) || [];
+
+      Array.from(pages.children).forEach(child => {
+        const link = child.querySelector('a.md-nav__link');
+        const readTime = child.querySelector('.md-nav__link-read_time');
+
+        if (link && readTime) {
+          const linkUrl = link.href;
+
+          // Check if the URL is in visitedUrls and add the 'visited' class
+          if (visitedUrls.includes(linkUrl)) {
+            readTime.classList.add('visited');
+          }
+
+          // Add the current page URL to visitedUrls if not already present
+          const currentPageUrl = window.location.href;
+
+          if (!visitedUrls.includes(currentPageUrl)) {
+            visitedUrls.push(currentPageUrl);
+            localStorage.setItem('visitedUrls', JSON.stringify(visitedUrls));
+          }
+        }
+      });
+    });
+
   </script>
 {% endblock %}
diff --git a/en/theme/material/templates/quick-start.html b/en/theme/material/templates/quick-start.html
@@ -24,7 +24,7 @@
 {% endblock %}
 
 {% block container %}
-  <div class="md-content">
+  <div class="md-content" data-md-component="content">
     <article class="md-content__inner md-typeset">
 
       <h1 id="{{ page.meta.heading | lower | replace(' ', '-') | replace('/', '-') }}">{{ page.meta.heading }}</h1>