From 9a796e4ef6530b07bbe29d702916aece86c0ae24 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 27 Jun 2021 17:24:47 +0100
Subject: [PATCH] feat: loads

---
 assets/built/screen.css                |  10 +--
 assets/css/screen.css                  |   2 +-
 custom-tutorial-post.hbs               | 103 ++++++++++++++-----------
 partials/interop/connectorTagCards.hbs |  18 ++---
 partials/landing/connectorsPreview.hbs |  51 ++++++------
 tag.hbs                                |   6 +-
 6 files changed, 97 insertions(+), 93 deletions(-)

diff --git a/assets/built/screen.css b/assets/built/screen.css
index a1ef91a..4c330a9 100644
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
@@ -48627,14 +48627,8 @@ a.no-underline:hover{
   text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  pre {
-    --tw-bg-opacity: 1;
-    background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
-  }
-}
-
-pre {
+pre{
+  max-width: 100%;
   --tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
diff --git a/assets/css/screen.css b/assets/css/screen.css
index c458038..9307769 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -20,7 +20,7 @@ a.no-underline:hover{
 }
 
 pre{
-  @apply shadow-inner dark:bg-gray-300;
+  @apply shadow-inner max-w-full;
 }
 
 .text-gradient {
diff --git a/custom-tutorial-post.hbs b/custom-tutorial-post.hbs
index 7ff8c33..15585a8 100644
--- a/custom-tutorial-post.hbs
+++ b/custom-tutorial-post.hbs
@@ -25,7 +25,8 @@
       </div>
       <div class="max-w-prose mx-auto my-4">
         {{#foreach tags}}
-        <a class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block transform scale-90 hover:scale-100 transition-transform"
+        <a x-cloak x-show="'{{slug}}'!=='tutorials'"
+          class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block transform scale-90 hover:scale-100 transition-transform"
           href="{{url}}">
           {{name}}
         </a>
@@ -46,7 +47,7 @@
           {{else}}
           <div class="h-8 w-8 mr-2">{{> "icons/avatar"}}</div>
           {{/if}}
-          <span class="ml-2 text-gray-800 dark:text-gray-200">{{name}}</span>
+          <span class="ml-2 text-gray-800 dark:text-gray-200 text-sm">{{name}}</span>
         </div>
         {{/foreach}}
       </div>
@@ -55,11 +56,11 @@
     {{!-- TOC --}}
 
     <aside
-      class="toc-wrapper col-span-7 md:col-span-2 shadow-xl md:shadow-none rounded-lg p-3 md:p-1 bg-gray-50 md:bg-transparent sticky top-16 md:relative md:top-0 z-20">
+      class="toc-wrapper col-span-7 md:col-span-2 shadow-xl md:shadow-none rounded-lg p-3 md:p-1 bg-gray-50 dark:bg-gray-900 md:bg-transparent sticky top-16 md:relative md:top-0 z-20">
       <div class="md:sticky md:top-20">
         <div class="">
           <div class="font-medium">
-            <button class="flex font-medium" @click="openToc = !openToc;">
+            <button class="flex font-medium text-blue-500" @click="openToc = !openToc;">
               {{!-- <span class="self-center text-blue-500">{{title}}</span> --}}
               <span class="text-blue-500">In this page</span>
               <svg xmlns="http://www.w3.org/2000/svg"
@@ -81,15 +82,25 @@
           x-transition:leave-start="opacity-100 transform scale-y-100"
           x-transition:leave-end="opacity-0 transform scale-y-0">
           <div class="toc"></div>
-          <div class="mt-2 pt-2 border-t md:border-t-0">
+          <div class="pt-2 border-t dark:border-gray-800 md:border-t-0">
             <a href="" onclick="event.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' });"
               class="inline-flex -ml-2 pl-2 pr-4 py-1 items-center no-underline text-sm font-medium text-blue-500 transition-shadow shadow-none hover:shadow-lg w-full md:w-auto rounded-xl">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
               </svg>
               Top
             </a>
+            <p class="border-t dark:border-gray-800 mt-2 pt-2"></p>
+            <div>
+              {{#foreach tags}}
+              <a x-cloak x-show="'{{slug}}'!=='tutorials'"
+                class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block transform scale-90 hover:scale-100 transition-transform"
+                href="{{url}}">
+                {{name}}
+              </a>
+              {{/foreach}}
+            </div>
           </div>
         </div>
       </div>
@@ -97,14 +108,18 @@
 
     {{!-- Body --}}
 
-    <div class="post-content prose dark:prose-dark lg:prose-xl prose-blue mx-auto col-span-7 md:col-span-5 mt-4">
+    <div class="post-content prose dark:prose-dark lg:prose-xl prose-blue mx-auto col-span-7 md:col-span-5 mt-4 max-w-prose">
       {{content}}
     </div>
 
+    <div class="post-content mx-auto col-span-7 md:col-span-5 mt-4">
+    </div>
+
   </div>
   </article>
 
-  <aside class="w-default mx-auto mb-10 px-3">
+  <aside class="w-default mx-auto mb-10 px-3" x-data="{}">
+
     {{#if primary_tag}}
     {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
     {{#if related_posts}}
@@ -132,51 +147,53 @@
 
   <script>
     // let pTags = Array.from(document.getElementsByTagName('p')) //.filter( t => t.innerHTML.includes(':::'))
-    
+
     let postContent = Array.from(document.getElementsByClassName('post-content'))[0].innerHTML
-    
+
     let tips = postContent.match(/<p>::: tip(.*?):::<\/\p>/g)
     let warnings = postContent.match(/<p>::: warning(.*?):::<\/\p>/g)
     let dangers = postContent.match(/<p>::: danger(.*?):::<\/\p>/g)
 
     let details = postContent.match(/<p>::: details([\s\S]+?):::<\/\p>/g)
-    
-    console.log( details )
 
-    tips.forEach( tip => {
-      let result = tip.match(/::: tip(.*?)</)
-      let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Tip'
-      let newTip = `<div class="mb-4 border-l-4 border-blue-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace( `::: tip${result[1]}`, `<div class="font-bold text-blue-500 mb-2">${tipTitle}</div>`) + `</div>`
-      newTip = newTip.replace(":::", "")
-      newTip = newTip.replace("<br>", "")
-      postContent = postContent.replace(tip, newTip)
-    })
+    if (tips)
+      tips.forEach(tip => {
+        let result = tip.match(/::: tip(.*?)</)
+        let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Tip'
+        let newTip = `<div class="mb-4 border-l-4 border-blue-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: tip${result[1]}`, `<div class="font-bold text-blue-500 mb-2">${tipTitle}</div>`) + `</div>`
+        newTip = newTip.replace(":::", "")
+        newTip = newTip.replace("<br>", "")
+        postContent = postContent.replace(tip, newTip)
+      })
 
-    warnings.forEach( tip => {
-      let result = tip.match(/::: warning(.*?)</)
-      let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Warning'
-      let newTip = `<div class="mb-4 border-l-4 border-yellow-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace( `::: warning${result[1]}`, `<div class="font-bold text-yellow-500 mb-2">${tipTitle}</div>`) + `</div>`
-      newTip = newTip.replace(":::", "")
-      newTip = newTip.replace("<br>", "")
-      postContent = postContent.replace(tip, newTip)
-    })
+    if (warnings)
+      warnings.forEach(tip => {
+        let result = tip.match(/::: warning(.*?)</)
+        let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Warning'
+        let newTip = `<div class="mb-4 border-l-4 border-yellow-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: warning${result[1]}`, `<div class="font-bold text-yellow-500 mb-2">${tipTitle}</div>`) + `</div>`
+        newTip = newTip.replace(":::", "")
+        newTip = newTip.replace("<br>", "")
+        postContent = postContent.replace(tip, newTip)
+      })
 
-    dangers.forEach( tip => {
-      let result = tip.match(/::: danger(.*?)</)
-      let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Danger'
-      let newTip = `<div class="mb-4 border-l-4 border-red-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace( `::: danger${result[1]}`, `<div class="font-bold text-red-500 mb-2">${tipTitle}</div>`) + `</div>`
-      newTip = newTip.replace(":::", "")
-      newTip = newTip.replace("<br>", "")
-      postContent = postContent.replace(tip, newTip)
-    })
+    if (dangers)
+      dangers.forEach(tip => {
+        let result = tip.match(/::: danger(.*?)</)
+        let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Danger'
+        let newTip = `<div class="mb-4 border-l-4 border-red-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: danger${result[1]}`, `<div class="font-bold text-red-500 mb-2">${tipTitle}</div>`) + `</div>`
+        newTip = newTip.replace(":::", "")
+        newTip = newTip.replace("<br>", "")
+        postContent = postContent.replace(tip, newTip)
+      })
 
-    details.forEach( detail => {
-      let result = detail.match(/::: details(.*?)</)
-      let detailTitle = result[1] && result[1] !== "" ? result[1] : 'Details'
-      let newDetails = `<details class="mb-4 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + detail.replace(`::: details${result[1]}`, `<summary class="font-bold text-blue-500 my-2 hover:cursor-pointer">${detailTitle}</summary>`) + `</details>`
-      newDetails = newDetails.replace(":::", "")
-      postContent = postContent.replace(detail, newDetails)
-    })
+    if (details)
+      details.forEach(detail => {
+        let result = detail.match(/::: details(.*?)</)
+        let detailTitle = result[1] && result[1] !== "" ? result[1] : 'Details'
+        let newDetails = `<details class="mb-4 w-full max-w-full bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + detail.replace(`::: details${result[1]}`, `<summary class="font-bold text-blue-500 my-2">${detailTitle}</summary>`) + `</details>`
+        newDetails = newDetails.replace(":::", "")
+        postContent = postContent.replace(detail, newDetails)
+      })
 
     Array.from(document.getElementsByClassName('post-content'))[0].innerHTML = postContent
 
diff --git a/partials/interop/connectorTagCards.hbs b/partials/interop/connectorTagCards.hbs
index eb73314..ee927fb 100644
--- a/partials/interop/connectorTagCards.hbs
+++ b/partials/interop/connectorTagCards.hbs
@@ -1,8 +1,8 @@
-<div class="block lg:sticky w-default transform z-40 top-20 mt-5">
+<div class="hidden sm:block lg:sticky w-default transform z-40 top-20 mt-5">
   <div
-    class="bg-gradient-to-r from-blue-500 to-blue-700 px-5 pt-2 pb-3 flex flex-wrap items-center justify-center md:justify-start rounded-lg w-full text-white">
+    class="bg-gradient-to-r from-blue-500 to-blue-700 px-5 pt-2 pb-3 flex flex-wrap items-center justify-start rounded-lg w-full text-white">
     Send
-    <select id="from" name="from" class="block w-full sm:inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500  dark:bg-blue-900 border-gray-300 foc
+    <select id="from" name="from" class="block inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500  dark:bg-blue-900 border-gray-300 foc
       us:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
       <option value="Select a connector">From</option>
       {{#get "tags" limit="all" include='count.posts' order='count.posts desc'
@@ -14,7 +14,7 @@
     </select>
     to
     <select id="to" name="to"
-      class="block w-full sm:inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500  dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+      class="block inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500  dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
       <option value="Select a connector">To </option>
       {{#get "tags" limit="all" include='count.posts' order='count.posts desc'
       filter="slug:-[features,developers,careers,blog,tutorials]"}}
@@ -32,19 +32,19 @@
 </div>
 
 <div class="relative flex items-center w-default mt-4 text-white"></div>
-<div class="w-default pt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
+<div class="w-default pt-10 grid grid-cols-1 md:grid-cols-2 gap-0 gap-y-2 md:gap-6">
   {{#get "tags" limit="all" include='count.posts' order='count.posts desc'
   filter="slug:-[features,developers,careers,blog,tutorials]"}}
   {{#foreach tags }}
-  <a href="{{url}}" class="group p-2 py-5 flex flex-col sm:flex-row max-w-none
+  <a href="{{url}}" class="group p-2 py-5 flex flex-row
           shadow-sm hover:shadow-xl transition-shadow hover:ring dark:bg-gray-900 bg-white rounded-xl col-span-1 connector-card connector-{{name}}
         ">
     <div class="flex flex-shrink-0 items-center justify-center mx-6">
       <img class="mx-auto h-32 w-32 transition-transform transform group-hover:scale-110 object-contain"
         src="{{feature_image}}">
     </div>
-    <div class="flex-grow flex flex-col justify-center text-center sm:text-left">
-      <h2 class="w-full text-xl dark:text-gray-50 text-gray-900 font-bold flex items-center group-hover:text-blue-500">
+    <div class="flex flex-grow flex-col justify-center">
+      <h2 class="text-xl dark:text-gray-50 text-gray-900 font-bold flex items-center group-hover:text-blue-500">
         {{name}}
         <svg xmlns="http://www.w3.org/2000/svg"
           class="ml-2 h-6 w-6 transition-opacity opacity-0 group-hover:opacity-100" fill="none" viewBox="0 0 24 24"
@@ -62,7 +62,7 @@
     class="group dark:text-gray-200 text-gray-600 p-2 col-span-2 tip-card flex flex-col justify-center items-center my-10 dark:bg-gray-900 bg-white rounded-xl shadow-xl py-10"
     id='tipcontainer' style="display: none;">
     <div class="prose-blue prose prose-sm dark:prose-dark max-w-none">
-      <h3 id="tip-text"></h3>
+      <h3 id="tip-text" class="text-center"></h3>
     </div>
     <div class="my-4">
       {{> ctaButton}}
diff --git a/partials/landing/connectorsPreview.hbs b/partials/landing/connectorsPreview.hbs
index 9ba9423..14836ba 100644
--- a/partials/landing/connectorsPreview.hbs
+++ b/partials/landing/connectorsPreview.hbs
@@ -2,12 +2,14 @@
   <div
     class="perspective-transform w-full md:w-2/3 lg:w-1/2 mx-auto dark:bg-gray-900 bg-gray-200 prose lg:prose-lg dark:prose-dark max-w-none text-center rounded-t-3xl pt-10 pb-6 mt-10 -mb-12">
     <div class="px-4">
-      <h1><span class='text-blue-500'>Speckle</span> Connectors</h1>
-      {{#get "posts" filter="primary_tag:features+featured:true+title:'Speckle Connectors'" limit="1"}}
-      {{#foreach posts}}
-      <p class="pb-4">{{excerpt}}</p>
-      {{/foreach}}
-      {{/get}}
+      <a href="/features/connectors" class="no-underline">
+        <h1><span class='text-blue-500'>Speckle</span> Connectors</h1>
+        {{#get "posts" filter="primary_tag:features+featured:true+title:'Speckle Connectors'" limit="1"}}
+        {{#foreach posts}}
+        <p class="pb-4">{{excerpt}}</p>
+        {{/foreach}}
+        {{/get}}
+      </a>
       {{!-- <h1>Why <span class='text-blue-500'>Speckle?</span></h1> --}}
       {{!-- <p>Speckle goes beyond point-to-point interoperability: it's data infrastructure for the built environment.
       </p> --}}
@@ -38,6 +40,15 @@
           </p>
         </div>
 
+        {{!-- unccomment in stage 2 --}}
+        <div
+          class="swiper-slide group p-2 rounded-xl text-center content-center flex flex-wrap justify-center h-auto transform opacity-90 hover:opacity-100 scale-90 hover:scale-100 transition bg-blue-500 text-white">
+          <a href="/features/connectors"
+            class="flex flex-col text-center w-full h-full text-xl items-center justify-center">
+            All <span class="hidden md:inline-block">Connectors</span>
+          </a>
+        </div>
+
 
         <div
           class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center"
@@ -49,19 +60,6 @@
           </p>
         </div>
 
-        {{!-- unccomment in stage 2 --}}
-        <div
-          class="swiper-slide group p-2 rounded-xl text-center content-center flex flex-wrap justify-center h-auto transform scale-90 hover:scale-100 transition bg-blue-500 text-white">
-          <a href="/features/connectors"
-            class="flex flex-col text-center w-full h-full text-xl items-center justify-center">
-            All Connectors
-            <svg xmlns="http://www.w3.org/2000/svg"
-              class="ml-2 h-6 w-6 transition-opacity opacity-50 group-hover:opacity-100" fill="none" viewBox="0 0 24 24"
-              stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-            </svg>
-          </a>
-        </div>
 
         <div
           class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
@@ -159,7 +157,7 @@
 
   <script>
     var swiper = new Swiper(".connector-swiper", {
-      slidesPerView: 3,
+      slidesPerView: 5,
       spaceBetween: 20,
       loop: true,
       grabCursor: true,
@@ -168,14 +166,6 @@
         clickable: true
       },
       breakpoints: {
-        640: {
-          slidesPerView: 3,
-          spaceBetween: 20,
-        },
-        768: {
-          slidesPerView: 4,
-          spaceBetween: 40,
-        },
         1024: {
           slidesPerView: 5,
           spaceBetween: 50,
@@ -185,5 +175,8 @@
           spaceBetween: 50,
         }
       }
-    });
+    })
+
+    if(window.innerWidth>=1280)
+      swiper.slideTo(6, false, false)
   </script>
\ No newline at end of file
diff --git a/tag.hbs b/tag.hbs
index 17cb214..57093e7 100644
--- a/tag.hbs
+++ b/tag.hbs
@@ -4,10 +4,10 @@
 
 
 
-  <main class="w-default lg:my-10 space-x-6 space-y-6 flex flex-col md:flex-row items-center">
+  <main class="w-default lg:my-10 space-x-0 md:space-x-6 space-y-6 flex flex-col md:flex-row items-center">
     <div class="w-full md:w-1/2">
-      <div class="prose lg:prose-xl dark:prose-dark prose-blue max-w-none mb-4">
-        <h1 class="flex items-center">
+      <div class="prose lg:prose-xl dark:prose-dark prose-blue max-w-none w-full mb-4">
+        <h1 class="flex overflow-ellipsis overflow-hidden w-full max-w-full">
           <a class="flex items-center justify-center no-underline" href="/features/connectors" x-cloak x-show="connectorTag">
             Connectors
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">