New UI based in Helios for the Docs Site (#18)

* Commit gcx-full and gcx-landing * gcx-full and gcx-landing StencilJS components * CSS changes, header and sidebar * web component gcx-schema * Apply CSS and HTML for Footer * Replace nav-explorer by botton-sidebar component * Change feedback-form component * Carving out for sidebar Figma desgin * Many changes in CSS header elements * Load JSON like assert * - using helper schema in UI bundle - apply ccs fixes * new css vars * Web componentes updated * update gcx-schema components Aditionals gcx css changes Availabling dark mode * css updates * css changes * CSS changes and toggle list in sidebar * CSS changes, gcx-full UX fixs * lint fixes * Css fixes Sample app gallery and sidemenu bottom as a Figma * CSS FIXES Adding ingore file for lint * CSS fixes and updates for gcx-schema * fix applyed for gulp preview * Collapse side bar feature * feedback form includes on all pages * Gulp allows custom elements, and autofix css * Added support to gulp for new vendors * css sidebar * Changes from Feedback 2 August * updates header-contect * Schema loaded in build without json file * gulp lint fixes * New corrections and fetures - removed Edit this page - updates to gcx-full - new main logo - new layout gcx-layout-no-sidebar - new app_id to intercom * New css for gcx-full * Gulp lint updates * Edit this page now can be set or not * Gulp lint * fix glossary link in header-content.hbs * css fixes and full-code * Fixes css and sidebar for landing page * Added custom interceptioning observer * css changes main landing * Click on segment code * Fix scrollTop positions of code blocks * removed scroll detection in code blocks * updates helios gcx css * update 01-nav.js from antora-ui gitlab * gulps fixes * “rebase” JS files with antora-ui-defaults * New round of CSS fixes for the landing page launch * GCX CSS&JS updates 08-gcx-js integrated into site.js enlighterjs integrated into the build css enlighte integrated tinto site.css minor updates gcx-full layout * update logos and add icons (#21) * update intercom.hbs with production key (#22) * fixes dark-mode and toc-menu Banner logo feature Section headings aren't the correct color in dark mode Right-hand Nav Bug * Updates css new svg icons * updates css Added default logo.svg * Updates 01-nav “Link-less” category titles not working in html based on nav.adoc * UPDATE CSS * Modulo de feedback sin validaciones CSS fixes * Allow anonymous submit Css fixes * update copy icon copy icon white fix copy icon tooltip * CSS updates * css updates * Using sandbox hit CSS fixes Removed white-flash in darkmode * Fix "Copied!" message fix position * CSS fixes padding nav * Feat: fixed copy clicked! * Visual bugs in navbar fixed Now it should work with Firefox and the other browsers * Update helios-gcx.css Open bugs #5 fixed * Left Navbar Fix When you hover over the arrow in the menus, the entire link now is painted correctly Co-authored-by: Edwin Ilovares <[email protected]> Co-authored-by: Edwin Ilovares <[email protected]> Co-authored-by: Lorina Poland <[email protected]> Co-authored-by: Eric Schneider <[email protected]> Co-authored-by: Kenni Martínez <[email protected]>
riptano · Oct 5, 2022 · 3c65aeb · 3c65aeb
1 parent 602c937
commit 3c65aeb
Show file tree

Hide file tree

Showing 101 changed files with 9,034 additions and 1,108 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,9 @@
+node_modules
+public
+.vscode
+build
+.DS_Store
+src/js/vendor
+src/js/lib
+*~
+
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,7 @@ build
 .DS_Store
 *~
 
+.stylelintrc
+gulpfile.js
+package-lock.json
+package.json
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,7 +1,12 @@
 {
-  "extends": "stylelint-config-standard",
-  "rules": {
-    "comment-empty-line-before": null,
-    "no-descending-specificity": null,
-  }
-}
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "comment-empty-line-before": null,
+        "no-descending-specificity": null,
+        "selector-type-no-unknown": null
+    },
+    "ignore": [
+        "custom-elements",
+        "default-namespace"
+    ]
+}
diff --git a/gulp.d/tasks/build.js b/gulp.d/tasks/build.js
@@ -33,19 +33,17 @@ module.exports = (src, dest, preview) => () => {
         const newestMtime = mtimes.reduce((max, curr) => (!max || curr > max ? curr : max))
         if (newestMtime > file.stat.mtime) file.stat.mtimeMs = +(file.stat.mtime = newestMtime)
       }),
-    postcssUrl([
-      {
-        filter: '**/~typeface-*/files/*',
-        url: (asset) => {
-          const relpath = asset.pathname.substr(1)
-          const abspath = require.resolve(relpath)
-          const basename = ospath.basename(abspath)
-          const destpath = ospath.join(dest, 'font', basename)
-          if (!fs.pathExistsSync(destpath)) fs.copySync(abspath, destpath)
-          return path.join('..', 'font', basename)
-        },
+    postcssUrl([{
+      filter: '**/~typeface-*/files/*',
+      url: (asset) => {
+        const relpath = asset.pathname.substr(1)
+        const abspath = require.resolve(relpath)
+        const basename = ospath.basename(abspath)
+        const destpath = ospath.join(dest, 'font', basename)
+        if (!fs.pathExistsSync(destpath)) fs.copySync(abspath, destpath)
+        return path.join('..', 'font', basename)
       },
-    ]),
+    }]),
     postcssVar({ preserve: preview }),
     preview ? postcssCalc : () => {},
     autoprefixer,
@@ -58,8 +56,134 @@ module.exports = (src, dest, preview) => () => {
     vfs
       .src('js/+([0-9])-*.js', { ...opts, sourcemaps })
       .pipe(terser())
-      // NOTE concat already uses stat from newest combined file
+    // NOTE concat already uses stat from newest combined file
       .pipe(concat('js/site.js')),
+    vfs
+      .src('js/vendor/enlighterjs/*.js', { ...opts, read: false })
+      .pipe(
+        // see https://gulpjs.org/recipes/browserify-multiple-destination.html
+        map((file, enc, next) => {
+          if (file.relative.endsWith('.bundle.js')) {
+            const mtimePromises = []
+            const bundlePath = file.path
+            browserify(file.relative, { basedir: src, detectGlobals: false })
+              .plugin('browser-pack-flat/plugin')
+              .on('file', (bundledPath) => {
+                if (bundledPath !== bundlePath) mtimePromises.push(fs.stat(bundledPath).then(({ mtime }) => mtime))
+              })
+              .bundle((bundleError, bundleBuffer) =>
+                Promise.all(mtimePromises).then((mtimes) => {
+                  const newestMtime = mtimes.reduce((max, curr) => (!max || curr > max ? curr : max))
+                  if (newestMtime > file.stat.mtime) file.stat.mtimeMs = +(file.stat.mtime = newestMtime)
+                  if (bundleBuffer !== undefined) file.contents = bundleBuffer
+                  file.path = file.path.slice(0, file.path.length - 10) + '.js'
+                  next(bundleError, file)
+                })
+              )
+          } else {
+            fs.readFile(file.path, 'UTF-8').then((contents) => {
+              file.contents = Buffer.from(contents)
+              next(null, file)
+            })
+          }
+        })
+      )
+      .pipe(buffer())
+      .pipe(terser()),
+    vfs
+      .src('js/vendor/gcx-contact-form/*.js', { ...opts, read: false })
+      .pipe(
+        // see https://gulpjs.org/recipes/browserify-multiple-destination.html
+        map((file, enc, next) => {
+          if (file.relative.endsWith('.bundle.js')) {
+            const mtimePromises = []
+            const bundlePath = file.path
+            browserify(file.relative, { basedir: src, detectGlobals: false })
+              .plugin('browser-pack-flat/plugin')
+              .on('file', (bundledPath) => {
+                if (bundledPath !== bundlePath) mtimePromises.push(fs.stat(bundledPath).then(({ mtime }) => mtime))
+              })
+              .bundle((bundleError, bundleBuffer) =>
+                Promise.all(mtimePromises).then((mtimes) => {
+                  const newestMtime = mtimes.reduce((max, curr) => (!max || curr > max ? curr : max))
+                  if (newestMtime > file.stat.mtime) file.stat.mtimeMs = +(file.stat.mtime = newestMtime)
+                  if (bundleBuffer !== undefined) file.contents = bundleBuffer
+                  file.path = file.path.slice(0, file.path.length - 10) + '.js'
+                  next(bundleError, file)
+                })
+              )
+          } else {
+            fs.readFile(file.path, 'UTF-8').then((contents) => {
+              file.contents = Buffer.from(contents)
+              next(null, file)
+            })
+          }
+        })
+      )
+      .pipe(buffer())
+      .pipe(terser()), vfs
+      .src('js/vendor/two-columns/*.js', { ...opts, read: false })
+      .pipe(
+        // see https://gulpjs.org/recipes/browserify-multiple-destination.html
+        map((file, enc, next) => {
+          if (file.relative.endsWith('.bundle.js')) {
+            const mtimePromises = []
+            const bundlePath = file.path
+            browserify(file.relative, { basedir: src, detectGlobals: false })
+              .plugin('browser-pack-flat/plugin')
+              .on('file', (bundledPath) => {
+                if (bundledPath !== bundlePath) mtimePromises.push(fs.stat(bundledPath).then(({ mtime }) => mtime))
+              })
+              .bundle((bundleError, bundleBuffer) =>
+                Promise.all(mtimePromises).then((mtimes) => {
+                  const newestMtime = mtimes.reduce((max, curr) => (!max || curr > max ? curr : max))
+                  if (newestMtime > file.stat.mtime) file.stat.mtimeMs = +(file.stat.mtime = newestMtime)
+                  if (bundleBuffer !== undefined) file.contents = bundleBuffer
+                  file.path = file.path.slice(0, file.path.length - 10) + '.js'
+                  next(bundleError, file)
+                })
+              )
+          } else {
+            fs.readFile(file.path, 'UTF-8').then((contents) => {
+              file.contents = Buffer.from(contents)
+              next(null, file)
+            })
+          }
+        })
+      )
+      .pipe(buffer())
+      .pipe(terser()), vfs
+      .src('js/vendor/gcx-schema/*.js', { ...opts, read: false })
+      .pipe(
+        // see https://gulpjs.org/recipes/browserify-multiple-destination.html
+        map((file, enc, next) => {
+          if (file.relative.endsWith('.bundle.js')) {
+            const mtimePromises = []
+            const bundlePath = file.path
+            browserify(file.relative, { basedir: src, detectGlobals: false })
+              .plugin('browser-pack-flat/plugin')
+              .on('file', (bundledPath) => {
+                if (bundledPath !== bundlePath) mtimePromises.push(fs.stat(bundledPath).then(({ mtime }) => mtime))
+              })
+              .bundle((bundleError, bundleBuffer) =>
+                Promise.all(mtimePromises).then((mtimes) => {
+                  const newestMtime = mtimes.reduce((max, curr) => (!max || curr > max ? curr : max))
+                  if (newestMtime > file.stat.mtime) file.stat.mtimeMs = +(file.stat.mtime = newestMtime)
+                  if (bundleBuffer !== undefined) file.contents = bundleBuffer
+                  file.path = file.path.slice(0, file.path.length - 10) + '.js'
+                  next(bundleError, file)
+                })
+              )
+          } else {
+            fs.readFile(file.path, 'UTF-8').then((contents) => {
+              file.contents = Buffer.from(contents)
+              next(null, file)
+            })
+          }
+        })
+      )
+      .pipe(buffer())
+      .pipe(terser()),
     vfs
       .src('js/vendor/*.js', { ...opts, read: false })
       .pipe(

diff --git a/gulp.d/tasks/lint-css.js b/gulp.d/tasks/lint-css.js
@@ -6,5 +6,5 @@ const vfs = require('vinyl-fs')
 module.exports = (files) => (done) =>
   vfs
     .src(files)
-    .pipe(stylelint({ reporters: [{ formatter: 'string', console: true }], failAfterError: true }))
+    .pipe(stylelint({ fix: true, reporters: [{ formatter: 'string', console: true }], failAfterError: true }))
     .on('error', done)
diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css
@@ -1,46 +1,46 @@
 .breadcrumbs {
-  display: none;
-  flex: 1 1;
-  padding: 0 0.5rem 0 0.75rem;
-  line-height: var(--nav-line-height);
+    display: none;
+    flex: 1 1;
+    padding: 0 0.5rem 0 0.75rem;
+    line-height: var(--nav-line-height);
 }
 
 @media screen and (min-width: 1024px) {
-  .breadcrumbs {
-    display: block;
-  }
+    .breadcrumbs {
+        display: block;
+    }
 }
 
-a + .breadcrumbs {
-  padding-left: 0.05rem;
+a+.breadcrumbs {
+    padding-left: 0.05rem;
 }
 
 .breadcrumbs ul {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
 .breadcrumbs li {
-  display: inline;
-  margin: 0;
-  font-family: 'Nunito Sans', sans-serif;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 1.5;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: #999dad;
+    display: inline;
+    margin: 0;
+    font-family: var(--body-font-family);
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 1.5;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: #999dad;
 }
 
 .breadcrumbs li::after {
-  content: "❯";
-  padding: 0 0.5rem;
-  color: #c9cef6;
+    content: "❯";
+    padding: 0 0.5rem;
+    color: #c9cef6;
 }
 
 .breadcrumbs li:last-of-type::after {
-  content: none;
-}
+    content: none;
+}