Merge pull request #14 from pikinier20/scaladoc/header-component

header component

Author: fanixus96

docs/_assets/images/logo.svg

@@ -1,50 +1,34 @@
 ---
 layout: main
 ---
+
 <div class="container">
-  <div id="site-header">
-    <div class="wrap">
-      <nav class="navigation" role="menu">
-        <ul class="navigation-menu">
-          <li class="navigation-menu-item">
-            <a href="https://docs.scala-lang.org/" class="active">Learn</a>
-          </li>
-          <li class="navigation-menu-item">
-            <a href="https://www.scala-lang.org/download/">Install</a>
-          </li>
-          <li class="navigation-menu-item">
-            <a href="https://scastie.scala-lang.org">Playground</a>
-          </li>
-          <li class="navigation-menu-item">
-            <a href="https://index.scala-lang.org">Find A Library</a>
-          </li>
-          <li class="navigation-menu-item">
-            <a href="https://www.scala-lang.org/community/">Community</a>
-          </li>
-          <li class="navigation-menu-item">
-            <a href="https://www.scala-lang.org/blog/">Blog</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
+  <div id="site-header"></div>
   {% if page.movedTo %}
   <aside class="warning">
-    The content of this page is outdated. Click <a href="{{ page.movedTo }}">here</a> to find the up to date version of this page.
+    The content of this page is outdated. Click
+    <a href="{{ page.movedTo }}">here</a> to find the up to date version of this
+    page.
   </aside>
-  {% endif %}
-  {{ content }}
+  {% endif %} {{ content }}
   <nav class="arrows-wrapper" aria-label="Page navigation">
     {% if page.previous %}
-    <a rel="prev" href="{{ page.previous.url }}" class="arrows previous" aria-keyshortcuts="Left">
-        <span>{{ page.previous.title }}</span>
-        <i class="fa fa-angle-left"></i>
+    <a
+      rel="prev"
+      href="{{ page.previous }}"
+      class="arrows previous"
+      aria-keyshortcuts="Left"
+    >
+      <i class="fa fa-angle-left"></i>
     </a>
-    {% endif %}
-    {% if page.next %}
-    <a rel="next" href="{{ page.next.url }}" class="arrows next" aria-keyshortcuts="Right">
-        <span>{{ page.next.title }}</span>
-        <i class="fa fa-angle-right"></i>
+    {% endif %} {% if page.next %}
+    <a
+      rel="next"
+      href="{{ page.next }}"
+      class="arrows next"
+      aria-keyshortcuts="Right"
+    >
+      <i class="fa fa-angle-right"></i>
     </a>
     {% endif %}
   </nav>

docs/_assets/images/logo_dark.svg

@@ -1,77 +1,13 @@
-/* Global search */
-.search-content {
-  padding: 0;
-  margin: var(--content-padding);
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 5;
-  background: none;
-}
-
-/* popup */
-.popup-wrapper {
-  box-shadow: 0 0 10px var(--border-light) !important;
-  border: 2px solid var(--border-light) !important;
-  font-family: var(--mono-font) !important;
-  width: calc(100% - var(--side-width) - 84px);
-  left: calc(var(--side-width) + 42px) !important;
-}
-.popup-wrapper .indented {
-  text-indent: 1.5em !important;
-}
-.popup-wrapper .disabled {
-  color: var(--inactive-fg) !important;
-  font-weight: 500 !important;
-}
-.action_def:hover, .action_def.hover_a79 {
-  color: var(--selected-fg);
-  background: var(--selected-bg) !important;
-  font-weight: 500;
-}
-.action_def .template-description {
-  margin-left: 2rem;
-  font-style: italic;
-}
-
-/* Landscape phones, portait tablets */
-@media(max-width: 768px) {
-  .popup-wrapper {
-    width: calc(100% - 48px);
-    left: 24px !important;
-  }
-}
-
-/* Portrait phones */
-@media(max-width: 576px) {
-  .search-content {
-    margin: 0 !important;
-    top: 9px !important;
-    right: 12px !important;
-  }
-  .popup-wrapper {
-    width: 100%;
-    left: 0 !important;
-    top: 36px !important;
-  }
-  /* Allow to scroll horizontally in the search results, which is useful on small screens */
-  .popup-wrapper div.ReactVirtualized__Grid__innerScrollContainer {
-    overflow: auto !important;
-  }
-  .popup-wrapper div.ReactVirtualized__Grid__innerScrollContainer > div {
-    min-width: 100%;
-    width: auto !important;
-  }
-}
-
 /* Loading */
 .loading-wrapper {
   text-align: center;
   padding: 4px;
 }
 
-.loading, .loading::before, .loading::after {
-  content: '';
+.loading,
+.loading::before,
+.loading::after {
+  content: "";
   width: 10px;
   height: 10px;
   border-radius: 5px;
@@ -89,7 +25,7 @@
 
 .loading {
   position: relative;
-  animation-delay: .2s;
+  animation-delay: 0.2s;
 }
 
 .loading::before {
@@ -99,7 +35,7 @@
 
 .loading::after {
   left: 15px;
-  animation-delay: .4s;
+  animation-delay: 0.4s;
 }
 
 @keyframes dotFlashing {
@@ -116,126 +52,21 @@
 
 .scaladoc-searchbar-inkuire-package {
   display: none;
-  color: var(--symbol-fg)
+  color: var(--symbol-fg);
 }
 
 div[selected] > .scaladoc-searchbar-inkuire-package {
   display: flex;
 }
 
-.scaladoc-searchbar-inkuire-package > .micon {
-  float: right;
-  margin-left: auto !important;
-}
-
-/* button */
-.search span {
-  background: var(--red500);
-  fill: var(--white);
-  cursor: pointer;
-  border: none;
-  padding: 9px;
-  border-radius: 24px;
-  box-shadow: 0 0 16px var(--code-bg);
-}
-.search span:hover {
-  background: var(--red600);
-}
-
-@media(max-width: 576px) {
-  .search span {
-      background: none;
-      fill: var(--icon-color);
-      cursor: pointer;
-      border: none;
-      padding: 0;
-      box-shadow: none;
-      margin-top: 2px;
-  }
-
-  .search span:hover {
-      fill: var(--link-hover-fg);
-  }
-
-  #scaladoc-searchbar span.pull-right {
-    display: none;
-  }
-}
-
-#scaladoc-search {
-  margin-top: 16px;
-  cursor: pointer;
-  position: fixed;
-  top: 0;
-  right: 20px;
-  z-index: 5;
-}
-
 #scaladoc-searchbar.hidden {
   display: none;
 }
 
-#scaladoc-searchbar {
-  position: fixed;
-  top: 50px;
-  left: calc(5% + var(--side-width));
-  z-index: 5;
-  width: calc(90% - var(--side-width));
-  box-shadow: 2px 2px 8px 0 var(--shadow);
-  font-size: 13px;
-  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
-  background-color: var(--leftbar-bg);
-  color: var(--leftbar-fg);
-}
-
-#scaladoc-searchbar-input {
-  width: 100%;
-  min-height: 32px;
-  border: none;
-  border-bottom: 1px solid #bbb;
-  padding: 10px;
-  background-color: var(--leftbar-bg);
-  color: var(--leftbar-fg);
-}
-
-#scaladoc-searchbar-input:focus {
-  outline: none;
-}
-
-#scaladoc-searchbar-results {
-  display: flex;
-  flex-direction: column;
-  max-height: 500px;
-  overflow: auto;
-}
-
-.scaladoc-searchbar-row {
-  display: flex;
-  background-color: var(--leftbar-bg);
-  color: var(--leftbar-fg);
-  line-height: 24px;
-  padding: 4px 10px 4px 10px;
-}
-
 .scaladoc-searchbar-row.hidden {
   display: none;
 }
 
-.scaladoc-searchbar-row[divider] {
-  border-top: solid 1px var(--leftbar-border);
-}
-
-.scaladoc-searchbar-row .micon {
-  height: 16px;
-  width: 16px;
-  margin: 4px 8px 0px 0px;
-}
-
-.scaladoc-searchbar-row[selected] {
-  background-color: var(--leftbar-hover-bg);
-  color: var(--leftbar-hover-fg);
-}
-
 .scaladoc-searchbar-row[result] {
   flex-direction: column;
 }
@@ -261,22 +92,6 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   margin-right: 4px;
 }
 
-.searchbar-hints {
-  padding-top: 5vh;
-  padding-bottom: 5vh;
-  padding-left: 5vw;
-  padding-right: 5vw;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.searchbar-hints-list {
-  font-size: medium;
-  line-height: 2em;
-}
-
 #searchBar {
   display: inline-flex;
 }

docs/_layouts/static-site-main.html

@@ -0,0 +1,44 @@
+package dotty.tools.scaladoc
+
+import scala.scalajs.js
+import scala.scalajs.js._
+import org.scalajs.dom._
+import org.scalajs.dom.ext._
+import scala.util.chaining._
+
+class SafeLocalStorage[T <: js.Any](key: String, defaultValue: T) {
+
+  val isLocalStorageSupported: Boolean = try {
+    val testKey = "__TEST__KEY__"
+    window.localStorage.setItem(testKey, "")
+    window.localStorage.removeItem(testKey)
+    true
+  } catch {
+    case _ => false
+  }
+
+  def checkSupport[U](defaultValue: U)(callback: () => U): U =
+    if isLocalStorageSupported then callback() else defaultValue
+
+  def parseData(data: String): T =
+    try {
+      Option(JSON.parse(data).asInstanceOf[T]).getOrElse(defaultValue)
+    } catch {
+      case _ => defaultValue
+    }
+
+  def getData: T =
+    checkSupport(defaultValue) { () =>
+      window.localStorage
+        .getItem(key)
+        .pipe(parseData)
+    }
+
+  def setData(data: T): Unit =
+    checkSupport(()) { () =>
+      JSON.stringify(data)
+        .pipe(window.localStorage.setItem(key, _))
+    }
+
+  def isEmpty: Boolean = getData == defaultValue
+}