Merge New 404 design into Main (#48)

* Initial rebranding styles Changed header and footer background color for both light and dark modes * Initial rebranding styles * Fixing styles The headings should no longer be underlined and cards should now show have black as font color in dark mode * Fixes in links The links and titles should now show properly in cards for both dark and light modes * Rebranding styles This commit includes multiple changes for the rebranding styles, like changing some colors. * The right content bar should now be sticky to the page, making it always available with no need to scroll to the top * Collapse and Expand all buttons has been added for the left navbar * The GCX code component should now take all the entire height from the body space on the website. * The code blocks should no longer have bold font * New 404 docs design This commit includes the new content and style applied to the antora 404 page. * Update 404.hbs This update includes the relative paths used on the live server * Update 404.hbs Changed location to /en/home * 404 footer fix The footer for the 404 page should now be fixed at the bottom of the device
riptano · Feb 14, 2023 · 0c90e28 · 0c90e28
1 parent 863ef60
commit 0c90e28
Show file tree

Hide file tree

Showing 9 changed files with 276 additions and 21 deletions.
diff --git a/gcx/gulpfile.js b/gcx/gulpfile.js
@@ -37,6 +37,15 @@ const bundleJSsrc = () =>
     .pipe(concat('site.js'))
     .pipe(dest('styles/build/js'));
 
+// Bundle a site.js for the 404 error page, excluding 01-nav.js
+const bundleJS404 = () =>{
+    return src(['styles/src/js/*.js','!styles/src/js/01-nav.js'])
+    .pipe(concat('site404.js'))
+    .pipe(dest('build/js'));
+}
+
+
+
 const mergeJS = () => {
     return src(['tempBuild/js/site.js',
     'styles/src/js/06-tabs-block.js',
@@ -112,4 +121,4 @@ const cleanHeliosBuild = () => {
     .pipe(clean());
 }
 
-exports.bundle = series(cleanTempBuild,unzipBundle,cleanImg,cleanHBLayouts,cleanBuild,cleanCSS,bundleCSS,bundleHeliosCSS, parallel(bundleStencil), bundleJShelpers, mergeJS, cleanHighlight, bundleHB, bundleImg, zipBundle, cleanTempBuild, cleanHeliosBuild);
+exports.bundle = series(cleanTempBuild,unzipBundle,cleanImg,cleanHBLayouts,cleanBuild,cleanCSS,bundleCSS,bundleHeliosCSS, parallel(bundleStencil),bundleJS404, bundleJShelpers, mergeJS, cleanHighlight, bundleHB, bundleImg, zipBundle, cleanTempBuild, cleanHeliosBuild);
diff --git a/gcx/styles/gulpfile.js b/gcx/styles/gulpfile.js
@@ -14,6 +14,13 @@ const bundleJSsrc = () =>
     .pipe(concat('site.js'))
     .pipe(dest('styles/build/js'));
 
+// Bundle a site.js for the 404 error page, excluding 01-nav.js
+const bundleJS404 = () =>
+    src(['styles/src/js/*.js','!styles/src/js/01-nav.js'])
+    .pipe(concat('site404.js'))
+    .pipe(dest('styles/build/js'));
+
+
 const bundleJShelpers = () => {
     return src([
         'styles/src/helpers/**/*.js',
@@ -78,4 +85,4 @@ const zipBundle = () => {
     .pipe(dest('styles/build/'));
 }
 
-exports.bundle = series(cleanBuild, bundleCSS, bundleHeliosCSS, parallel(bundleJSsrc,bundleJShelpers, bundleStencil), renameHighlight, cleanHighlight, bundleHB, bundleImg, zipBundle);
+exports.bundle = series(cleanBuild, bundleCSS, bundleHeliosCSS, bundleJS404, parallel(bundleJSsrc, bundleJShelpers, bundleStencil), renameHighlight, cleanHighlight, bundleHB, bundleImg, zipBundle);
diff --git a/gcx/styles/src/css/helios-gcx-body.css b/gcx/styles/src/css/helios-gcx-body.css
@@ -219,4 +219,11 @@ main > .content {
 
 .doc .listingblock:hover .source-toolbox {
     visibility: hidden;
-}
+}
+
+@media screen and (min-width: 1281px) {
+    .doc .center{
+        max-width: 43%!important;
+    }
+}
+
diff --git a/gcx/styles/src/css/helios-gcx-footer.css b/gcx/styles/src/css/helios-gcx-footer.css
@@ -20,5 +20,7 @@ footer .container-fluid {
     font-weight: bold;
 }
 
-/*Dark mode: Footer*/
+.wh_footer.notFound{
+    position: fixed;
+}
 
diff --git a/gcx/styles/src/css/helios-gcx-search-bar.css b/gcx/styles/src/css/helios-gcx-search-bar.css
@@ -12,6 +12,11 @@
     height: 40px;
 }
 
+.ds-search-input-icon.not-found {
+    margin-top: 20px;
+    width: 70%;
+}
+
 .ds-search-input-icon input,
 .ds-search-input-icon input:focus,
 .ds-search-input-icon input:focus-visible {

diff --git a/gcx/styles/src/layouts/404.hbs b/gcx/styles/src/layouts/404.hbs
@@ -1,12 +1,170 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <link rel="stylesheet" href="assets/css/site.css">
-{{> head defaultPageTitle='Page Not Found'}}
-  </head>
-  <body class="status-404">
-{{> header}}
-{{> body}}
-{{> footer}}
-  </body>
-</html>
+
+<head>
+  <link rel="icon" href="https://www.datastax.com/favicon.ico" type="image/x-icon">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="stylesheet" href="/en/home/assets/css/site.css">
+  <title>Oops! We can't find that page {{#with site.title}} :: {{this}}{{/with}}</title>
+</head>
+
+<body class="status-404">
+  <header class="header">
+    <nav class="navbar">
+      <div class="navbar-brand">
+        <!-- <a href="{{{or site.url (or siteRootUrl siteRootPath)}}}"> -->
+        <a href="https://docs.datastax.com">
+          <img src="/en/home/assets/img/logo.svg" alt="">
+        </a>
+        <button class="navbar-burger" data-target="topbar-nav">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+      </div>
+      <div id="topbar-nav" class="navbar-menu">
+        <div class="navbar-end">
+          <div class="doc-link">
+            <ul id="ds_sites_list">
+              <li><a href="https://docs.datastax.com/en/glossary/docs" target="_blank">Glossary</a></li>
+              <li><a href="https://support.datastax.com/" target="_blank">Support</a></li>
+              <li><a href="https://downloads.datastax.com/" target="_blank">Downloads</a></li>
+              <li><a href="https://www.datastax.com/" target="_self">DataStax Home</a></li>
+            </ul>
+            <div class="navbar-end navbar-switch">
+              <label class="switch_label" for="switch">
+                <input type="checkbox" name="switch" class="switch" id="switch">
+                <span class="slider">
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M12 9C13.65 9 15 10.35 15 12C15 13.65 13.65 15 12 15C10.35 15 9 13.65 9 12C9 10.35 10.35 9 12 9ZM12 7C9.24 7 7 9.24 7 12C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12C17 9.24 14.76 7 12 7ZM2 13H4C4.55 13 5 12.55 5 12C5 11.45 4.55 11 4 11H2C1.45 11 1 11.45 1 12C1 12.55 1.45 13 2 13ZM20 13H22C22.55 13 23 12.55 23 12C23 11.45 22.55 11 22 11H20C19.45 11 19 11.45 19 12C19 12.55 19.45 13 20 13ZM11 2V4C11 4.55 11.45 5 12 5C12.55 5 13 4.55 13 4V2C13 1.45 12.55 1 12 1C11.45 1 11 1.45 11 2ZM11 20V22C11 22.55 11.45 23 12 23C12.55 23 13 22.55 13 22V20C13 19.45 12.55 19 12 19C11.45 19 11 19.45 11 20ZM5.99 4.58C5.6 4.19 4.96 4.19 4.58 4.58C4.19 4.97 4.19 5.61 4.58 5.99L5.64 7.05C6.03 7.44 6.67 7.44 7.05 7.05C7.43 6.66 7.44 6.02 7.05 5.64L5.99 4.58ZM18.36 16.95C17.97 16.56 17.33 16.56 16.95 16.95C16.56 17.34 16.56 17.98 16.95 18.36L18.01 19.42C18.4 19.81 19.04 19.81 19.42 19.42C19.81 19.03 19.81 18.39 19.42 18.01L18.36 16.95ZM19.42 5.99C19.81 5.6 19.81 4.96 19.42 4.58C19.03 4.19 18.39 4.19 18.01 4.58L16.95 5.64C16.56 6.03 16.56 6.67 16.95 7.05C17.34 7.43 17.98 7.44 18.36 7.05L19.42 5.99ZM7.05 18.36C7.44 17.97 7.44 17.33 7.05 16.95C6.66 16.56 6.02 16.56 5.64 16.95L4.58 18.01C4.19 18.4 4.19 19.04 4.58 19.42C4.97 19.8 5.61 19.81 5.99 19.42L7.05 18.36Z"
+                      fill="#20293A" />
+                  </svg>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M9.37 5.51C9.19 6.15 9.1 6.82 9.1 7.5C9.1 11.58 12.42 14.9 16.5 14.9C17.18 14.9 17.85 14.81 18.49 14.63C17.45 17.19 14.93 19 12 19C8.14 19 5 15.86 5 12C5 9.07 6.81 6.55 9.37 5.51ZM12 3C7.03 3 3 7.03 3 12C3 16.97 7.03 21 12 21C16.97 21 21 16.97 21 12C21 11.54 20.96 11.08 20.9 10.64C19.92 12.01 18.32 12.9 16.5 12.9C13.52 12.9 11.1 10.48 11.1 7.5C11.1 5.69 11.99 4.08 13.36 3.1C12.92 3.04 12.46 3 12 3Z"
+                      fill="#20293A" />
+                  </svg>
+                </span>
+              </label>
+            </div>
+          </div>
+          <div class="navbar-end__group">
+          <form id="alg-search-form" class="ds-search-form" action="https://www.datastax.com/search" target="_blank" method="GET">
+            <div>
+              <div class="ds-search-input-icon">
+                <svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 11.1326C9.04048 11.9373 7.74289 12.4167 6.33333 12.4167C2.9736 12.4167 0.25 9.69307 0.25 6.33333C0.25 2.9736 2.9736 0.25 6.33333 0.25C9.69307 0.25 12.4167 2.9736 12.4167 6.33333C12.4167 7.74289 11.9373 9.04048 11.1326 10.0719L13.5303 12.4696C13.8232 12.7625 13.8232 13.2374 13.5303 13.5303C13.2374 13.8232 12.7625 13.8232 12.4696 13.5303L10.0719 11.1326ZM1.75 6.33333C1.75 3.80203 3.80203 1.75 6.33333 1.75C8.86464 1.75 10.9167 3.80203 10.9167 6.33333C10.9167 7.56591 10.4301 8.68485 9.63861 9.50857C9.6147 9.52728 9.59166 9.54763 9.56965 9.56965C9.54763 9.59166 9.52728 9.6147 9.50857 9.63861C8.68485 10.4301 7.56591 10.9167 6.33333 10.9167C3.80203 10.9167 1.75 8.86464 1.75 6.33333Z" fill="#5C6A85"/>
+                </svg>
+                <input id="alg-search-input" class="ds-datastax-search-input" type="text" name="query" placeholder="Search"/>
+              </div>
+              <button id="alg-search-button" class="ds-search-button" type="submit" style="display: none"></button>
+              <input id="dataset" type="hidden" name="dataset" value="docs"/>
+            </div>
+          </form>
+          <span onclick="window.Intercom('show');" class="ds_buttons_button get-started">Get Live Help</span>
+        </div>
+        </div>
+      </div>
+    </nav>
+  </header>
+  <article class="doc" style="
+    display: flex;
+    justify-content: center!important;
+    padding-left: 24px;
+    padding-right: 24px;
+    max-width: 100%!important;
+">
+
+    <div class="center" style="
+    flex-wrap: wrap;
+    margin-right: -12px;
+    margin-left: -12px;
+    max-width: 65%;
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+">
+      <h1 class="page" style="font-size: calc(2rem + 2px);">Oops! We can’t find that page. </h1>
+      <div class="paragraph">
+        <p style="font-size: calc(1rem + 2px); text-align: justify;">The page you're looking for doesn't exist. It might have been moved or
+          maybe there was a typo in the URL. If you typed the URL of this page manually, please double check that you
+          entered the address correctly.
+        </p>
+      </div>
+      <div class="paragraph">
+        <p style="font-size: calc(1rem + 2px); text-align: justify">
+          Go to the DataStax docs <a href="https://docs.datastax.com/">home page</a>.
+        </p>
+      </div>
+    </div>
+
+  </article>
+  <footer class="wh_footer notFound">
+    <div class="container-fluid">
+        <div class="footer-container">
+            <div class="bottom-icons">
+                <a href="https://www.facebook.com/datastax" target="_blank" class="facebook-icon" title="Go to DataStax Facebook"></a> 
+                <a href="https://twitter.com/datastax" target="_blank" class="twitter-icon" title="Go to DataStax Twitter"></a>
+                <a href="https://github.com/datastax/" target="_blank" class="git-icon" title="Go to DataStax GitHub"></a> 
+                <a href="https://datastax.medium.com/" target="_blank" class="medium-icon" title="Go to DataStax Medium"></a> 
+                <a href="https://www.twitch.tv/datastaxdevs" target="_blank" class="twitch-icon" title="Go to DataStax Twitch"></a>
+                <a href="https://www.linkedin.com/company/datastax/" target="_blank" class="linkedin-icon" title="Go to DataStax Linkedin"></a> 
+            </div>
+            <div class="contact-us">
+                <div><a href="https://www.datastax.com" target="_blank" class="ds-bottom-logo-img" title="Go to the DataStax Website"></a></div>
+                <div>
+                    <p style="margin:0;">General Inquiries:   <a href="tel:+1-650-389-6000">+1 (650) 389-6000</a>  <a href="mailto:info@datastax.com">info@datastax.com</a></p>
+                </div>
+            </div>
+            <div class="copyright-line">
+                <p>
+                    <span>©</span>
+                    <span id="copyrightdate"></span>
+                    <script type="text/javascript">document.getElementById("copyrightdate").innerHTML = new Date().getFullYear();</script>
+                    <span>DataStax | <a href="https://www.datastax.com/legal/datastax-website-privacy-policy" target="_blank">Privacy policy</a>
+                        | 
+                        <a href="https://www.datastax.com/legal/datastax-website-terms-use" target="_blank">Terms of use</a>
+
+                </p> 
+            </div>
+            <div>
+                <p>DataStax, Titan, and TitanDB are registered trademarks of DataStax, Inc. and its
+            subsidiaries in the United States and/or other countries.</p>
+                <p>Apache, Apache Cassandra, Cassandra, Apache Tomcat, Tomcat, Apache Lucene,
+            Apache Solr, Apache Hadoop, Hadoop, Apache Pulsar, Pulsar, Apache Spark, Spark, Apache TinkerPop, TinkerPop,
+            Apache Kafka and Kafka are either registered trademarks or trademarks of the Apache Software Foundation or its subsidiaries in Canada, the United States and/or
+                other countries.</p>
+                <p>Kubernetes is the registered trademark of the Linux Foundation.</p>
+            </div>
+            <!-- product and doc name for dsInit -->
+            <div id="ds-params" style="display: none;">
+                <span id="ds-product">landing_page</span>
+                <span id="ds-docname">landingpage</span>
+            </div>
+        </div>
+        <!-- Digital Attribution Code -->
+        <script type="text/javascript">
+            var bfId="xx4vaCYlG5ayt04m", bfSession = 0.041666666666666664;
+            (function() {
+            var script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.async = true;
+            script.src = ('https:' === document.location.protocol ? 'https://' : 'http://' ) + 'munchkin.brightfunnel.com/js/build/bf-munchkin.min.js?tstamp=' + new Date().getTime();
+            var top = document.getElementsByTagName('script')[0];
+            top.parentNode.insertBefore(script, top);
+            })();
+        </script>
+        <!-- end Digital Attribution Code -->
+    </div>
+</footer>
+  <script type="text/javascript" src="/en/home/assets/js/site404.js"></script>
+  <script>
+    !function () {
+      var theme = window.localStorage.getItem('theme');
+      var root = document.getElementsByTagName('html')[0];
+      if (theme) {
+        root.classList.add('dark-mode');
+      }
+    }();
+  </script>
+</body>
diff --git a/gcx/styles/src/partials/article.hbs b/gcx/styles/src/partials/article.hbs
@@ -1,13 +1,37 @@
 <article class="doc">
 {{#if (eq page.layout '404')}}
-<h1 class="page">{{{or page.title 'Page Not Found'}}}</h1>
+<link rel="stylesheet" data-refs="assets/css/site.css,../assets/css/site.css" href="assets/css/site.css">
+<script data-refs="assets/css/site.css,../assets/css/site.css" src="assets/js/site.js"></script>
+<h1 class="page">{{{or page.title 'Oops! We can’t find that page.'}}}</h1>
 <div class="paragraph">
-<p>The page you&#8217;re looking for does not exist. It may have been moved.</p>
+<p>The page you’re looking for doesn’t exist. It might have been moved or maybe there was a typo in the URL. Get back into our documentation from the links to the left or the <a href="https://docs.datastax.com/">home page</a>.
+</p>
 </div>
 <div class="paragraph">
-<p>If you arrived on this page by clicking on a link, please notify the owner of the site that the link is broken.
-If you typed the URL of this page manually, please double check that you entered the address correctly.</p>
+<ul>
+    <li>
+        Want to help us make the DataStax docs better for others? Fill out the form below to let us know which URL is broken and from which page. The DataStax Docs Team will review your form and fix the link. 
+    </li>
+    <li>
+        If you arrived on this page by clicking a link on another site, notify the owner of that site that the link is broken. 
+    </li>
+    <li>
+        Double check to make sure the URL is entered correctly.
+    </li>
+</ul>
 </div>
+<form id="alg-search-form" class="ds-search-form" action="https://www.datastax.com/search" target="_blank" method="GET">
+  <div>
+    <div class="ds-search-input-icon not-found">
+      <svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 11.1326C9.04048 11.9373 7.74289 12.4167 6.33333 12.4167C2.9736 12.4167 0.25 9.69307 0.25 6.33333C0.25 2.9736 2.9736 0.25 6.33333 0.25C9.69307 0.25 12.4167 2.9736 12.4167 6.33333C12.4167 7.74289 11.9373 9.04048 11.1326 10.0719L13.5303 12.4696C13.8232 12.7625 13.8232 13.2374 13.5303 13.5303C13.2374 13.8232 12.7625 13.8232 12.4696 13.5303L10.0719 11.1326ZM1.75 6.33333C1.75 3.80203 3.80203 1.75 6.33333 1.75C8.86464 1.75 10.9167 3.80203 10.9167 6.33333C10.9167 7.56591 10.4301 8.68485 9.63861 9.50857C9.6147 9.52728 9.59166 9.54763 9.56965 9.56965C9.54763 9.59166 9.52728 9.6147 9.50857 9.63861C8.68485 10.4301 7.56591 10.9167 6.33333 10.9167C3.80203 10.9167 1.75 8.86464 1.75 6.33333Z" fill="#5C6A85"/>
+      </svg>
+      <input id="alg-search-input" class="ds-datastax-search-input" type="text" name="query" placeholder="Search"/>
+    </div>
+    <button id="alg-search-button" class="ds-search-button" type="submit" style="display: none"></button>
+    <input id="dataset" type="hidden" name="dataset" value="docs"/>
+  </div>
+</form>
 {{else}}
 {{#with page.title}}
 <h1 class="page">{{{this}}}</h1>
@@ -17,3 +41,20 @@ If you typed the URL of this page manually, please double check that you entered
 {{> pagination}}
 <feedback-form article="Rate this article"></feedback-form>
 </article>
+
+<script>
+  function loadAlternative(element, list) {
+  var image = new Image();
+
+  image.onload = function() {
+    element.src = this.href;
+  }
+
+  image.onerror = function() {
+    if (list.length) {
+      loadAlternative(element, list);
+    }
+  }
+  image.src = list.shift();
+}
+</script>
diff --git a/gcx/styles/src/partials/header-content.hbs b/gcx/styles/src/partials/header-content.hbs
@@ -54,3 +54,19 @@
     </div>
   </nav>
 </header>
+<script>
+  function loadAlternative(element, list) {
+  var image = new Image();
+
+  image.onload = function() {
+    element.src = this.href;
+  }
+
+  image.onerror = function() {
+    if (list.length) {
+      loadAlternative(element, list);
+    }
+  }
+  image.src = list.shift();
+}
+</script>
diff --git a/src/partials/article-404.hbs b/src/partials/article-404.hbs
@@ -1,10 +1,20 @@
 <article class="doc">
 <h1 class="page">{{{or page.title 'Page Not Found'}}}</h1>
 <div class="paragraph">
-<p>The page you&#8217;re looking for does not exist. It may have been moved. You can{{#with site.homeUrl}} return to the <a href="{{{this}}}">start page</a>, or{{/with}} follow one of the links in the navigation to the left.</p>
+<p>The page you’re looking for doesn’t exist. It might have been moved or maybe there was a typo in the URL. Get back into our documentation from the links to the left or the <a href="https://docs.datastax.com/">home page</a>.
+</p>
 </div>
 <div class="paragraph">
-<p>If you arrived on this page by clicking on a link, please notify the owner of the site that the link is broken.
-If you typed the URL of this page manually, please double check that you entered the address correctly.</p>
+<ul>
+    <li>
+        Want to help us make the DataStax docs better for others? Fill out the form below to let us know which URL is broken and from which page. The DataStax Docs Team will review your form and fix the link. 
+    </li>
+    <li>
+        If you arrived on this page by clicking a link on another site, notify the owner of that site that the link is broken. 
+    </li>
+    <li>
+        Double check to make sure the URL is entered correctly.
+    </li>
+</ul>
 </div>
 </article>