Latest

src/components/code-snippet/code-snippet.tsx

@@ -21,11 +21,16 @@ export class CodeSnippet {
     if (Build.isServer) return;
     if (!window.prismLoaded) {
       window.prismLoaded = true;
-      importResource({ propertyName: 'Prism', link: `${CodeSnippet.prismCdn}/prism.min.js`, async: true }, () => {
+      importResource({ propertyName: 'Prism', link: `${CodeSnippet.prismCdn}/prism.min.js` }, () => {
         this.loadInPrismLanguage();
       });
     } else {
-      this.loadInPrismLanguage();
+      const prismInterval = setInterval(() => {
+        if (window.Prism) {
+          clearInterval(prismInterval);
+          this.loadInPrismLanguage();
+        }
+      }, 50);
     }
   }
 
@@ -39,37 +44,41 @@ export class CodeSnippet {
         {
           propertyName: `Prism.languages.${this.language}`,
           link: `${CodeSnippet.prismCdn}/prism-${this.language}.min.js`,
-          defer: true,
         },
-        this.highlightCode
+        () => {
+          this.highlightCode();
+        }
       );
     } else {
       this.highlightCode();
     }
   };
 
   highlightCode = async () => {
-    if (Build.isServer) return;
+    const prismInterval = setInterval(async () => {
+      if (window.Prism && window.Prism.languages && window.Prism.languages[this.language]) {
+        clearInterval(prismInterval);
+        await customElements.whenDefined('code-snippet');
 
-    await customElements.whenDefined('code-snippet');
+        window.Prism.hooks.add('before-insert', (env) => {
+          switch (env.language) {
+            case 'shell-session':
+              const lines = env.code.split('\n');
 
-    window.Prism.hooks.add('before-insert', (env) => {
-      switch (env.language) {
-        case 'shell-session':
-          const lines = env.code.split('\n');
+              const code = lines.map((line) => {
+                return line.trim() === '' || line.trim()[0] === '#'
+                  ? `<span class="token output">${line}</span>\n`
+                  : `<span class="dollar-sign token output">${line}</span>\n`;
+              });
+              env.highlightedCode = code.join('');
+              break;
+            default:
+          }
+        });
 
-          const code = lines.map((line) => {
-            return line.trim() === '' || line.trim()[0] === '#'
-              ? `<span class="token output">${line}</span>\n`
-              : `<span class="dollar-sign token output">${line}</span>\n`;
-          });
-          env.highlightedCode = code.join('');
-          break;
-        default:
+        window.Prism.highlightElement(this.codeEl, false);
       }
-    });
-
-    window.Prism.highlightElement(this.codeEl, false);
+    }, 50);
   };
 
   render() {

src/components/docs-search/docs-search.tsx

@@ -38,10 +38,9 @@ export class DocsSearch implements ComponentInterface {
   } = {};
 
   componentDidLoad() {
-    console.log('Algolia loaded');
-    console.log((window as any).algoliaLoaded);
     if (!(window as any).algoliaLoaded) {
       (window as any).algoliaLoaded = true;
+      const algolia = `/assets/js/docsearch.min.js`;
       importResource({ propertyName: 'docsearch', link: algolia, async: true }, () => this.setupSearch());
     }
 
@@ -81,7 +80,6 @@ export class DocsSearch implements ComponentInterface {
   }
 
   setupSearch() {
-    console.log('setting up search');
     setTimeout(() => {
       window.docsearch({
         appId: this.defaults.algolia.appId,
@@ -181,5 +179,3 @@ export class DocsSearch implements ComponentInterface {
     );
   }
 }
-
-const algolia = `/assets/js/docsearch.min.js`;

src/global/style-default.scss

@@ -259,7 +259,7 @@ h2.ui-heading.ui-heading-2.ui-theme--editorial > a {
 }
 
 top-parallax #start {
-  padding-top: 11.44vh;
+  padding-top: 8.14vh;
 }
 
 landing-page {
@@ -953,8 +953,14 @@ fieldset .field:last-child {
 .success-color {
   color: var(--c-green-50) !important;
 }
+top-parallax {
+  height: calc(100vh - 64px) !important;
+  display: block;
+  width: 100%;
+  background-color: black;
+}
 #slider {
-  height: calc(100vh - 64px);
+  height: calc(100vh - 64px) !important;
   width: 100%;
   position: absolute;
   top: 64px;