chore(docs): Use svg icons instead of Clarity custom elements

docs/README.md

@@ -29,3 +29,11 @@ yarn generate-docs [-w]
 This script uses the TypeScript compiler API to traverse the server source code and extract data about the types as well as other information such as descriptions and default values.
 
 Currently, any `interface` which includes the JSDoc `@docCategory` tag will be extracted into a markdown file in the [content/docs/api](./content/docs/api) directory. Hugo can then build the API documentation from these markdown files. This will probably be expanded to be able to parse `class` and `type` declarations too.
+
+## A note on icons
+
+The docs site also uses the [Clarity icons](https://clarity.design/icons) to maintain consistency with the Vendure admin ui app. However, currently [this bug](https://github.com/vmware/clarity/issues/2599) makes the use of the custom-elements based icons unfeasible since it adds about 400kb to the JS bundle size. This is unacceptable for what is essentially a static HTML site.
+
+So for now we are hand-picking the icons as svg files from [https://icongr.am/clarity](https://icongr.am/clarity) and using them as regular images. The downside is that to get different colours, the svg files themselves must be edited.
+
+This is a pain but for the small number of icons planned, it is workable.

docs/assets/scripts/icons.ts

@@ -1,11 +1,13 @@
-import { ClarityIcons } from '@clr/icons';
-import { ClrShapeLibrary } from '@clr/icons/shapes/essential-shapes';
-import { ClrShapeCluster, ClrShapeTerminal } from '@clr/icons/shapes/technology-shapes';
+// import { ClarityIcons } from '@clr/icons';
+// import { ClrShapeLibrary } from '@clr/icons/shapes/essential-shapes';
+// import { ClrShapeCluster, ClrShapeTerminal } from '@clr/icons/shapes/technology-shapes';
 
 export function initIcons() {
-    ClarityIcons.add({
+    // TODO: this is a no-op until this issue is fixed in Clarity: https://github.com/vmware/clarity/issues/2599
+    // Using the icons this way adds about 400k to the JS bundle(!!)
+   /* ClarityIcons.add({
         library: ClrShapeLibrary,
         cluster: ClrShapeCluster,
         terminal: ClrShapeTerminal,
-    });
+    });*/
 }

docs/assets/styles/_landing-page.scss

@@ -1,160 +1,163 @@
 @import "variables";
 
 .hero a:link, .hero a:visited {
-  color: #d4f5ff;
-  text-decoration: none;
+    color: #d4f5ff;
+    text-decoration: none;
 }
 .hero a:hover {
-  color: #fafbff;
+    color: #fafbff;
 }
 .hero {
-  padding: 10px;
-  text-align: center;
-  background: #1c1c1c;
-  background-image: url("/header-bg.png");
-  background-attachment: fixed;
+    padding: 10px;
+    text-align: center;
+    background: #1c1c1c;
+    background-image: url("/header-bg.png");
+    background-attachment: fixed;
 }
 .logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  img {
-    width: 100%;
-    max-width: 100px;
-    height: 100%;
-    margin-right: 30px;
-  }
-  h1 {
-    margin: 0;
-    color: $brand-color;
-    font-size: 3em;
-    margin-bottom: 15px;
-    font-family: 'Didact Gothic', sans-serif;
-  }
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+        width: 100%;
+        max-width: 100px;
+        height: 100%;
+        margin-right: 30px;
+    }
+    h1 {
+        margin: 0;
+        color: $brand-color;
+        font-size: 3em;
+        margin-bottom: 15px;
+        font-family: 'Didact Gothic', sans-serif;
+    }
 }
 .subhead {
-  font-size: 1em;
-  color: #74aec3;
-  max-width: 800px;
-  margin: auto;
+    font-size: 1em;
+    color: #74aec3;
+    max-width: 800px;
+    margin: auto;
 }
 .top-header {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }
 .content {
-  padding: 20px;
-  max-width: 800px;
-  margin: auto;
-  color: #393939;
+    padding: 20px;
+    max-width: 800px;
+    margin: auto;
+    color: #393939;
 
-  a:link, a:visited {
-    color: darken($brand-color, 20%);
-  }
-  a:hover, a:active {
-    color: $brand-color;
-  }
+    a:link, a:visited {
+        color: darken($brand-color, 20%);
+    }
+    a:hover, a:active {
+        color: $brand-color;
+    }
 }
 
 a.status {
-  background-color: orange;
-  padding: 5px 10px;
-  border-radius: 3px;
-  font-size: 16px;
-  margin-left: 12px;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.1);
-  transition: background-color 0.2s, box-shadow 0.2s;
-  clr-icon {
-    margin-right: 6px;
-  }
+    background-color: orange;
+    padding: 5px 10px;
+    border-radius: 3px;
+    font-size: 16px;
+    margin-left: 12px;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.1);
+    transition: background-color 0.2s, box-shadow 0.2s;
+    clr-icon {
+        margin-right: 6px;
+    }
 
-  &:link, &:visited {
-    color: #444;
-  }
-  &:hover {
-    background-color: #ffb203;
-    box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.3);
-  }
+    &:link, &:visited {
+        color: #444;
+    }
+    &:hover {
+        background-color: #ffb203;
+        box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.3);
+    }
 }
 
 .section-2 {
-  background-color: #e5e5e5;
+    background-color: #e5e5e5;
 }
 
 .section-video {
-  background-color: #212122;
-  box-shadow: inset 0px 0px 15px 8px rgba(0,0,0,0.75);
+    background-color: #212122;
+    box-shadow: inset 0px 0px 15px 8px rgba(0,0,0,0.75);
 
-  background-image: url("/header-bg.png");
-  background-attachment: fixed;
-  .content {
-    text-align: center;
-  }
-  iframe.video-embed {
-    max-width: 100%;
-  }
+    background-image: url("/header-bg.png");
+    background-attachment: fixed;
+    .content {
+        text-align: center;
+    }
+    iframe.video-embed {
+        max-width: 100%;
+    }
 }
 
 .features {
-  display: flex;
-  flex-direction: column;
-  .feature {
-    margin: 10px;
-    flex: 1;
-  }
-  .feature-icon {
-    text-align: center;
-    color: $brand-color;
-  }
-  h3 {
-    text-align: center;
-  }
+    display: flex;
+    flex-direction: column;
+    .feature {
+        margin: 10px;
+        flex: 1;
+    }
+    .feature-icon {
+        text-align: center;
+        img {
+            width: 64px;
+            height: 64px;
+        }
+    }
+    h3 {
+        text-align: center;
+    }
 }
 
 .roadmap {
-  ul li {
-    margin: 12px 0;
-  }
+    ul li {
+        margin: 12px 0;
+    }
 }
 
 .about {
-  margin-top: 64px;
+    margin-top: 64px;
 }
 
 .footer {
-  padding: 30px 10px;
-  background: #a1a1a1;
-  text-align: center;
-  color: #e5e5e5;
+    padding: 30px 10px;
+    background: #a1a1a1;
+    text-align: center;
+    color: #e5e5e5;
 
-  .gh-link {
-    margin-left: 12px;
-  }
+    .gh-link {
+        margin-left: 12px;
+    }
 }
 .footer a:link, .footer a:visited {
-  color: #eee;
+    color: #eee;
 }
 @media all and (min-width: 600px){
-  .hero {
-    padding: 100px;
-  }
-  .logo img {
-    max-width: 160px;
-  }
-  .logo h1 {
-    font-size: 5em;
-  }
-  .top-header {
-    flex-direction: row;
-  }
-  .subhead {
-    font-size: 2em;
-  }
-  .features {
-    flex-direction: row;
-  }
+    .hero {
+        padding: 100px;
+    }
+    .logo img {
+        max-width: 160px;
+    }
+    .logo h1 {
+        font-size: 5em;
+    }
+    .top-header {
+        flex-direction: row;
+    }
+    .subhead {
+        font-size: 2em;
+    }
+    .features {
+        flex-direction: row;
+    }
 }

docs/layouts/index.en.html

@@ -37,7 +37,7 @@
 
             <div class="feature">
                 <div class="feature-icon">
-                    <clr-icon shape="data-cluster" size="64"></clr-icon>
+                    <img src="{{ "svg/clr-icon-data-cluster-brand.svg" | absURL }}" />
                 </div>
                 <h3>De-coupled & Flexible</h3>
                 <p>
@@ -48,7 +48,7 @@
 
             <div class="feature">
                 <div class="feature-icon">
-                    <clr-icon shape="terminal" size="64"></clr-icon>
+                    <img src="{{ "svg/clr-icon-terminal-brand.svg" | absURL }}" />
                 </div>
                 <h3>Built for Developers</h3>
                 <p>
@@ -62,7 +62,7 @@
 
             <div class="feature">
                 <div class="feature-icon">
-                    <clr-icon shape="library" size="64"></clr-icon>
+                    <img src="{{ "svg/clr-icon-library-brand.svg" | absURL }}" />
                 </div>
                 <h3>Open Source</h3>
                 <p>

docs/static/svg/clr-icon-library-brand.svg

@@ -0,0 +1 @@
+<svg version="1.1" class="has-solid " viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" aria-hidden="true" role="img" width="32" height="32" fill="#13b7f3"><path d="M33.48,29.63,26.74,11.82a2,2,0,0,0-2.58-1.16L21,11.85V8.92A1.92,1.92,0,0,0,19.08,7H14V4.92A1.92,1.92,0,0,0,12.08,3H5A2,2,0,0,0,3,5V32a1,1,0,0,0,1,1H20a1,1,0,0,0,1-1V19.27l5,13.21a1,1,0,0,0,1.29.58l5.61-2.14a1,1,0,0,0,.58-1.29ZM12,8.83V31H5V5h7ZM19,31H14V9h5Zm8.51-.25L21.13,13.92l3.74-1.42,6.39,16.83Z" class="clr-i-outline clr-i-outline-path-1"/><path d="M12.75,3H5.25A1.15,1.15,0,0,0,4,4V33H14V4A1.15,1.15,0,0,0,12.75,3Z" class="clr-i-solid clr-i-solid-path-1" style="display:none"/><path d="M33.77,31.09l-6.94-18.3a1,1,0,0,0-1.29-.58L22,13.59V9a1,1,0,0,0-1-1H16V33h6V14.69L28.93,33Z" class="clr-i-solid clr-i-solid-path-2" style="display:none"/></svg>