Docs Site Feedback Form

gulp.d/tasks/build.js

@@ -55,6 +55,8 @@ module.exports = (src, dest, preview) => () => {
   ]
 
   return merge(
+    vfs
+      .src('js/gcx.js', { ...opts, sourcemaps }),
     vfs
       .src('js/+([0-9])-*.js', { ...opts, sourcemaps })
       .pipe(terser())
@@ -94,6 +96,8 @@ module.exports = (src, dest, preview) => () => {
       .pipe(terser()),
     // NOTE use this statement to bundle a JavaScript library that cannot be browserified, like jQuery
     //vfs.src(require.resolve('<package-name-or-require-path>'), opts).pipe(concat('js/vendor/<library-name>.js')),
+    vfs
+      .src('css/gcx.css', { ...opts, sourcemaps }),
     vfs
       .src('css/site.css', { ...opts, sourcemaps })
       .pipe(postcss((file) => ({ plugins: postcssPlugins, options: { file } }))),

gulpfile.js

@@ -12,7 +12,7 @@ const previewDestDir = 'public'
 const srcDir = 'src'
 const destDir = `${previewDestDir}/_`
 const { reload: livereload } = process.env.LIVERELOAD === 'true' ? require('gulp-connect') : {}
-const serverConfig = { host: '0.0.0.0', port: 5252, livereload }
+const serverConfig = { host: '0.0.0.0', port: 3000, livereload }
 
 const task = require('./gulp.d/tasks')
 const glob = {

preview-src/gcx-nav.adoc

@@ -0,0 +1,6 @@
+= GCX Navigation
+Author Name
+
+++++
+<div id="gcx-nav"></div>
+++++

preview-src/gcx.adoc

@@ -0,0 +1,12 @@
+= Landing
+Author Name
+:page-layout: gcx
+
+GCX Viewer
+++++
+<div id="gcx-nav"></div>
+++++
+
+++++
+<div id="gcx-viewer"></div>
+++++

preview-src/landing.adoc

@@ -0,0 +1,56 @@
+= Landing
+Author Name
+:page-layout: landing
+
+++++
+<div class="landing-row">
+++++
+
+[sidebar.landing-card]
+.Getting Started
+****
+
+--
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris finibus dictum nisi ut efficitur. Integer finibus ligula at augue faucibus, ac accumsan magna feugiat.
+Vivamus a erat faucibus, sollicitudin turpis eu, volutpat felis. Aliquam ex orci, tincidunt sed tellus finibus, gravida vestibulum dui.
+
+[.landing-card-body-icon]
+image:landing-icon-1.svg[Card Icon,100]
+--
+****
+
+++++
+</div>
+++++
+
+++++
+<div class="landing-row">
+++++
+
+[sidebar.landing-card]
+.Getting Started
+****
+
+--
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris finibus dictum nisi ut efficitur. Integer finibus ligula at augue faucibus, ac accumsan magna feugiat.
+
+[.landing-card-body-icon]
+image:landing-icon-2.svg[Card Icon,100]
+--
+****
+
+[sidebar.landing-card]
+.Getting Started
+****
+
+--
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris finibus dictum nisi ut efficitur. Integer finibus ligula at augue faucibus, ac accumsan magna feugiat.
+
+[.landing-card-body-icon]
+image:landing-icon-3.svg[Card Icon,100]
+--
+****
+
+++++
+</div>
+++++

preview-src/ui-model.yml

@@ -1,6 +1,6 @@
 antoraVersion: '1.0.0'
 site:
-  url: http://localhost:5252
+  url: http://localhost:3000
   title: Brand Docs
   homeUrl: &home_url /xyz/5.2/index.html
   components:
@@ -111,6 +111,15 @@ page:
       - content: English + 中文
         url: '/xyz/5.2/index.html#english+中文'
         urlType: internal
+    - content: GCX Navigation
+      url: '/xyz/5.2/gcx-nav.html'
+      urlType: internal
+    - content: GCX
+      url: '/xyz/5.2/gcx.html'
+      urlType: internal
+    - content: Landing Page
+      url: '/xyz/5.2/landing.html'
+      urlType: internal
     - content: Liber Recusabo
       url: '#liber-recusabo'
       urlType: fragment

src/css/doc.css

@@ -8,6 +8,13 @@
   padding: 0 1rem 4rem;
 }
 
+.doc.gcx {
+  width: 100%;
+  max-width: 100%;
+  margin-right: 0;
+  padding-right: 0;
+}
+
 @media screen and (min-width: 1024px) {
   .doc {
     flex: auto;

src/css/feedback.css

@@ -0,0 +1,116 @@
+.feedback-wrapper {
+    margin: 15px 0;
+    background-color: #222b49;
+    color: white;
+    text-align: center;
+    padding: 15px;
+    border-radius: 5px;
+    font-size: 17px;
+}
+
+.feedback-wrapper h2 {
+    border-bottom: 1px solid #c9cef6;
+    color: white !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    margin-bottom: 10px !important;
+}
+
+.stars {
+    margin-top: 15px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 15px;
+}
+
+.star polygon {
+    fill: #d8d8d8;
+}
+
+.stars:hover .star polygon {
+    fill: #ffd055 !important;
+}
+
+.star:hover ~ .star polygon {
+    fill: #d8d8d8 !important;
+}
+
+.stars[data-stars] .star polygon {
+    fill: #ffd055;
+}
+
+.stars[data-stars="1"] .star:nth-child(1) ~ .star polygon {
+    fill: #d8d8d8;
+}
+
+.stars[data-stars="2"] .star:nth-child(2) ~ .star polygon {
+    fill: #d8d8d8;
+}
+
+.stars[data-stars="3"] .star:nth-child(3) ~ .star polygon {
+    fill: #d8d8d8;
+}
+
+.stars[data-stars="4"] .star:nth-child(4) ~ .star polygon {
+    fill: #d8d8d8;
+}
+
+.stars[data-stars="5"] .star:nth-child(5) ~ .star polygon {
+    fill: #d8d8d8;
+}
+
+#feedback-form {
+    width: 100%;
+    display: none;
+}
+
+#feedback-form form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#feedback-form form label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    font-size: 1rem;
+}
+
+#feedback-form form label input,
+#feedback-form form label textarea {
+    display: flex;
+    flex: 0 80%;
+    padding: 15px;
+    border-radius: 5px;
+    border: 1px solid white;
+    background-color: transparent;
+    color: white;
+    font-size: 17px;
+    font-family: sans-serif;
+}
+
+#feedback-form form label input::placeholder,
+#feedback-form form label textarea::placeholder {
+    color: white;
+}
+
+#feedback-form form button {
+    display: flex;
+    color: #555dc0;
+    font-weight: bold;
+    background-color: transparent;
+    border: none;
+    padding: 15px;
+    text-align: right;
+    border-radius: 5px;
+    background-color: rgba(225,225,225,0.9);
+    justify-content: center;
+}
+
+#feedback-thankyou {
+    text-align: center;
+    display: none;
+}

src/css/landing.css

@@ -0,0 +1,69 @@
+.landing-row {
+    display: flex;
+}
+
+.landing-card {
+    background: white !important;
+    border-radius: 5px !important;
+    padding: 15px !important;
+    box-shadow: 2px 2px 5px 0 gray;
+
+    display: flex;
+    flex: 1;
+    margin-top: 0 !important;
+    margin-right: 15px !important;
+    margin-bottom: 15px !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+}
+
+.landing-card:last-child {
+    margin-right: 0 !important;
+}
+
+.landing-card > .content {
+    display: flex;
+    flex-direction: column;
+}
+
+.landing-card .title {
+    display: flex;
+    flex: 0 100%;
+    font-size: 1.4rem;
+    margin-bottom: 10px;
+}
+
+.landing-card .paragraph {
+    display: flex;
+    font-size: 1rem;
+    margin-bottom: 10px;
+    flex: 1;
+}
+
+.landing-card .openblock .content {
+    display: flex;
+    flex-direction: row;
+}
+
+.landing-card-body {
+    display: flex;
+    flex-direction: row;
+    font-size: 1rem;
+    margin-bottom: 10px;
+}
+
+.landing-card-body-wrapper {
+    display: block;
+}
+
+.landing-card-body-content {
+    display: block;
+}
+
+.landing-card-body-icon {
+    display: block;
+    float: right;
+    margin-left: 15px;
+    margin-bottom: 15px;
+    flex: unset !important;
+}

src/css/site.css

@@ -18,3 +18,5 @@
 @import "typeface-nunito.css";
 @import "tabs.css";
 @import "search.css";
+@import "landing.css";
+@import "feedback.css";

src/layouts/gcx.hbs

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {{> head defaultPageTitle='GCX'}}
+    <link href="{{{uiRootPath}}}/css/gcx.css" rel="stylesheet">
+    <style>
+      body: {
+        padding: 0 !important;
+        height: 100vh !important;
+      }
+    </style>
+  </head>
+  <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+    {{> header}}
+    <div class="body">
+      {{> nav}}
+      <main class="article">
+        {{> toolbar}}
+        <div class="content">
+            <article class="doc gcx">
+                {{{page.contents}}}
+            </article>
+        </div>
+      </main>
+    </div>
+    {{> footer}}
+    {{> intercom}}
+
+    <script defer="defer" src="{{{uiRootPath}}}/js/gcx.js"></script>
+  </body>
+</html>

src/layouts/landing.hbs

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {{> head defaultPageTitle='GCX'}}
+    <link href="{{{uiRootPath}}}/css/gcx.css" rel="stylesheet">
+    <style>
+      body: {
+        padding: 0 !important;
+        height: 100vh !important;
+      }
+    </style>
+  </head>
+  <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+    {{> header}}
+    {{> body}}
+    {{> footer}}
+    {{> intercom}}
+  </body>
+</html>