docs(website): updates

- This includes Home page fixes for lilia - Addition of search config to use the new index - An update for netlify to try to turn of any build actions that trigger a yarn install Signed-off-by: Matt Hippely <mhippely@vmware.com>
vmware-archive · Oct 22, 2020 · 0d2c3f4 · 0d2c3f4
1 parent 65918b5
commit 0d2c3f4
Show file tree

Hide file tree

Showing 11 changed files with 367 additions and 22 deletions.
diff --git a/apps/website/.vuepress/config.js b/apps/website/.vuepress/config.js
@@ -25,8 +25,9 @@ module.exports = {
   dest: '../../dist/website',
   themeConfig: {
     algolia: {
-      apiKey: 'd3349af25a19e3824cb48e57fe88fdcb',
-      indexName: 'next-clarity',
+      apiKey: '88df2445b3dc4bf5e8bc4caafa9fbc50',
+      indexName: 'next_clarity',
+      inputSelector: '#algolia-search-input'
     },
     lastUpdated: false,
     search: true,

diff --git a/apps/website/.vuepress/theme/components/AlgoliaSearchBox.vue b/apps/website/.vuepress/theme/components/AlgoliaSearchBox.vue
@@ -1,8 +1,8 @@
 <template>
   <form class="search">
-      <label for="algolia-search-input">
-          <input id="algolia-search-input" type="text" placeholder="Search for Components...">
-      </label>
+    <label for="algolia-search-input">
+      <input id="algolia-search-input" type="text" placeholder="Search for Components..." />
+    </label>
   </form>
 </template>
 
@@ -76,6 +76,7 @@ export default {
 <style lang="scss">
 .algolia-autocomplete .ds-dropdown-menu {
   line-height: 1rem;
+  z-index: 5000 !important;
 }
 
 .algolia-autocomplete

diff --git a/apps/website/.vuepress/theme/components/Home.vue b/apps/website/.vuepress/theme/components/Home.vue
@@ -26,7 +26,7 @@
 
 .tinted {
   &.action-light {
-    background-color: hsl(198, 41, 90);
+    background-color: hsl(198, 44, 93);
   }
   &.action-dark {
     background-color: hsl(198, 95, 40);
@@ -76,6 +76,13 @@
           Clarity is a scalable, customizable, open source design system bolstered by the people that build with it, the
           people we build it for, and the community that makes us who we are.
         </p>
+        <div cds-layout="col:12 m-t:lg">
+          <cds-button>
+            <router-link to="/get-started">
+              Get started using Clarity
+            </router-link>
+          </cds-button>
+        </div>
         <div class="image-wrapper">
           <img
             class="hero-image"
@@ -212,7 +219,7 @@
           priorities. We are proud of what we have running under the hood. Check out our Github and take a look at our
           priority list, our code, our documentation, and join our community.
         </p>
-        <cds-button cds-layout="m-t:lg">
+        <cds-button cds-layout="m-t:lg" action="outline">
           <router-link to="/get-started">
             Join the community
           </router-link>
@@ -238,12 +245,12 @@
         </p>
 
         <div cds-layout="horizontal gap:lg align:center col:start-2 col:10 m-t:lg">
-          <cds-button>
+          <cds-button action="outline">
             <router-link to="/get-started/design">
               Get started developing
             </router-link>
           </cds-button>
-          <cds-button>
+          <cds-button action="outline">
             <router-link to="/get-started/angular">
               Get started designing
             </router-link>

diff --git a/apps/website/.vuepress/theme/components/Sidebar.vue b/apps/website/.vuepress/theme/components/Sidebar.vue
@@ -11,7 +11,7 @@
                   <cds-icon
                     class="nav-group-trigger-icon"
                     shape="angle"
-                    :dir="states[index] ? 'down' : 'right'"
+                    :direction="states[index] ? 'down' : 'right'"
                   ></cds-icon>
                 </button>
               </div>

diff --git a/apps/website/.vuepress/theme/global-components/Release.vue b/apps/website/.vuepress/theme/global-components/Release.vue
@@ -10,19 +10,19 @@
       <p v-if="release.description">{{ release.description }}</p>
       <ReleaseGroup v-if="release.feat" type="feat">
         <template v-for="feat of release.feat">
-          <ReleaseItem v-if="feat.project.toLowerCase() !== 'core'" :item="feat" />
+          <ReleaseItem :item="feat" />
         </template>
       </ReleaseGroup>
 
       <ReleaseGroup v-if="release.fix" type="fix">
         <template v-for="fix of release.fix">
-          <ReleaseItem v-if="fix.project.toLowerCase() !== 'core'" :item="fix" />
+          <ReleaseItem :item="fix" />
         </template>
       </ReleaseGroup>
 
       <ReleaseGroup v-if="release.deprecation" type="deprecation">
         <template v-for="deprecation of release.deprecation">
-          <ReleaseItem v-if="deprecation.project.toLowerCase() !== 'core'" :item="deprecation" />
+          <ReleaseItem :item="deprecation" />
         </template>
       </ReleaseGroup>
     </div>

diff --git a/apps/website/.vuepress/theme/global-components/ReleaseGroup.vue b/apps/website/.vuepress/theme/global-components/ReleaseGroup.vue
@@ -3,10 +3,12 @@
     <h3>{{ title }}</h3>
     <table class="table">
       <tr>
-        <th class="left" style="width: 100px;">Scope</th>
+        <th class="left fixed-5">Scope</th>
+        <th class="left fixed-5">Project</th>
         <th class="left">Description</th>
-        <th style="width: 125px;"></th>
-        <th class="left" style="width: 100px;">Issue</th>
+        <th></th>
+        <!-- the cells in this col are used when the change needs a breaking badge -->
+        <th class="left fixed-5">Issue</th>
       </tr>
       <slot></slot>
     </table>
@@ -32,4 +34,11 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.table {
+  table-layout: auto;
+  .fixed-5 {
+    width: 5rem;
+  }
+}
+</style>
diff --git a/apps/website/.vuepress/theme/global-components/ReleaseItem.vue b/apps/website/.vuepress/theme/global-components/ReleaseItem.vue
@@ -3,6 +3,9 @@
     <td class="left">
       <b>{{ item.scope }}</b>
     </td>
+    <td class="left">
+      {{ item.project }}
+    </td>
     <td class="left">
       {{ item.title }} <a href="javascript://" @click="more = !more" v-if="hasMore"><b>Show More</b></a>
       <div class="more-block" v-if="item.more">

diff --git a/changelogs/schema.json b/changelogs/schema.json
@@ -93,6 +93,7 @@
         "Datagrid",
         "Datalist",
         "Date Picker",
+        "Documentation",
         "Dropdown",
         "Form",
         "Grid",
@@ -108,6 +109,7 @@
         "Progress Bar",
         "Radio",
         "Range",
+        "React",
         "Schematics",
         "Select",
         "Sidenav",
@@ -117,19 +119,22 @@
         "Stepper",
         "Table",
         "Tabs",
+        "Tag",
         "Textarea",
         "Timeline",
         "Toggle",
+        "Token",
         "Tooltip",
         "Tree View",
+        "Utility",
         "Vertical Nav",
         "Wizard"
       ],
       "title": "Scope"
     },
     "Project": {
       "type": "string",
-      "enum": ["Angular", "Core"],
+      "enum": ["Angular", "Core", "Website"],
       "title": "Project"
     }
   }