Feat/improvemnts (#10)

* add sdk context to search

* open external links on a new tab

* improve search with sdk6

* cards styles

* update copyright

* add playground html

* reuse fn

assets/_home.scss

@@ -41,6 +41,11 @@
         margin-right: 20px;
         padding: 20px;
         text-align: left;
+        a:first-child {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+        }
 
         * {
           color: white
@@ -57,7 +62,6 @@
         .card-info {
           flex: 1 1;
           width: 100%;
-          padding-bottom: 30px;
         }
 
         .card-cta {
@@ -82,6 +86,12 @@
     }
   }
 
+  @media (max-width: 900px) {
+    .home .user-card .card-img {
+      padding: 0px !important;
+    }
+  }
+
   @media (max-width: 768px) {
     .home {
       .book-search {

assets/search.js

@@ -119,19 +119,35 @@
       resultCard(`Not Found`, `Sorry, we couldn't find any matches. Try searching for a different keyword`)
       return
     }
+    const currentPathname = window.location.pathname
+
     searchHits.forEach((hit) => {
       const document = documents.get(Number(hit.ref))
       if (!document) return
+      if ((isSdk6(currentPathname) && isSdk7(document.href))
+        || (isSdk7(currentPathname) && isSdk6(document.href))
+      ) return
       const highlightedContent = highlightContent(document.content, hit)
       resultCard(document.title, highlightedContent, document.href)
     });
   }
 
+  function isSdk6(href) {
+    return href && href.includes('creator/development-guide') && !href.includes('sdk7')
+  }
+
+  function isSdk7(href) {
+    return href && href.includes('creator/development-guide/sdk7')
+  }
+
   function resultCard(title, content, href) {
-    const li = element('<li><a href><h4></h4><span></span></a></li>');
+    const li = element('<li><a href><p></p><span></span></a></li>');
     if (href) li.querySelector('a').href = href;
-    li.querySelector('h4').textContent = title;
+    const sdk6 = isSdk6(href) && ' [SDK 6]'
+    const sdk7 = isSdk7(href) && ' [SDK 7]'
+    const sdkContext = sdk6 || sdk7 || ''
     li.querySelector('span').innerHTML = content
+    li.querySelector('p').innerHTML = `<span style="font-size: 18px; font-weight: 700;">${title}</span>${sdkContext}`
     results.appendChild(li);
   }
 

layouts/_default/_markup/render-link.html

@@ -1,7 +1,9 @@
 {{- if .Page.Site.Params.BookPortableLinks -}}
   {{- template "portable-link" . -}}
 {{- else -}}
-  <a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}>{{ .Text | safeHTML }}</a>
+  <a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if or (in .Destination ":") (strings.HasPrefix .Destination "//") }} target="_blank" {{ end }}>
+    {{ .Text | safeHTML }}
+  </a>
 {{- end -}}
 
 {{- define "portable-link" -}}

layouts/partials/docs/html-footer.html

@@ -31,6 +31,6 @@
         <i class="social-icon twitter" ></i>
       </a>
     </div>
-    <div class="copyright">© 2022 Decentraland</div>
+    <div class="copyright">© 2023 Decentraland</div>
   </div>
 </div>

layouts/shortcodes/playground.html

@@ -0,0 +1,26 @@
+<style>
+  .code-playground {
+    position: relative;
+  }
+
+  .external-button {
+    display: none;
+  }
+
+  .code-playground:hover .external-button {
+    display: inline-block;
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    background-color: var(--primary);
+    color: white;
+    padding: 4px;
+    border-radius: 4px;
+    text-decoration: unset;
+  }
+</style>
+
+<div class="code-playground">
+  {{ .Inner | markdownify }}
+  <a href="{{ .Params.link }}" target="_blank" rel="noopener" class="external-button">Try in playground</a>
+</div>