Merge pull request scala#15697 from pikinier20/scaladoc/new-ui

Scaladoc: New UI design
nmcb · Aug 16, 2022 · cf4dd05 · cf4dd05
2 parents 36f0e09 + 4e9f2de
commit cf4dd05
Show file tree

Hide file tree

Showing 373 changed files with 8,193 additions and 3,217 deletions.
diff --git a/docs/_assets/css/bootstrap.min.css b/docs/_assets/css/bootstrap.min.css
diff --git a/docs/_assets/css/color-brewer.css b/docs/_assets/css/color-brewer.css
@@ -6,14 +6,14 @@ Ported by Fabrício Tavares de Oliveira
 
 */
 
-.hljs {
+/* .hljs {
   background: transparent;
 }
 
 .hljs,
 .hljs-subst {
   color: #000;
-}
+} */
 
 /*.hljs-string,
 .hljs-meta,
@@ -24,7 +24,7 @@ Ported by Fabrício Tavares de Oliveira
   color: #756bb1;
 }*/
 
-.hljs-comment,
+/* .hljs-comment,
 .hljs-quote {
   color: #636363;
 }
@@ -40,7 +40,7 @@ Ported by Fabrício Tavares de Oliveira
 .hljs-deletion,
 .hljs-variable {
   color: #88f;
-}
+} */
 
 /*.hljs-keyword,
 .hljs-selector-tag,
@@ -57,10 +57,10 @@ Ported by Fabrício Tavares de Oliveira
   color: #3182bd;
 }*/
 
-.hljs-emphasis {
+/* .hljs-emphasis {
   font-style: italic;
 }
 
 .hljs-attribute {
   color: #e6550d;
-}
+} */
diff --git a/docs/_assets/images/logo.svg b/docs/_assets/images/logo.svg
diff --git a/docs/_assets/images/logo_dark.svg b/docs/_assets/images/logo_dark.svg
diff --git a/docs/_assets/js/bootstrap.min.js b/docs/_assets/js/bootstrap.min.js
diff --git a/docs/_assets/js/highlight.pack.js b/docs/_assets/js/highlight.pack.js
diff --git a/docs/_assets/js/jquery.min.js b/docs/_assets/js/jquery.min.js
diff --git a/docs/_layouts/base.html b/docs/_layouts/base.html
@@ -1,17 +1,9 @@
 ---
 extraCSS:
-    - css/bootstrap.min.css
-    - css/dottydoc.css
     - css/color-brewer.css
-extraJS:
-    - js/jquery.min.js
-    - js/bootstrap.min.js
 ---
 <link rel="dns-prefetch" href="//fonts.googleapis.com">
 <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-
-
 {{ content }}
diff --git a/docs/_layouts/doc-page.html b/docs/_layouts/doc-page.html
@@ -1,18 +1,15 @@
 ---
 layout: static-site-main
 ---
+
 <main>
   <header>
-    <h1>{{ page.title }}</h1>
     {% if urls.editSource %}
-    <div class="byline">
-      <a href="{{ urls.editSource }}">
-        <i class="far fa-edit"></i>
-        Edit this page on GitHub
-      </a>
-    </div>
+    <a class="text-button with-link body-small" href="{{ urls.editSource }}">
+      Edit this page on GitHub
+    </a>
     {% endif %}
+    <h1 class="h600">{{ page.title }}</h1>
   </header>
   {{ content }}
 </main>
-
diff --git a/docs/_layouts/main.html b/docs/_layouts/main.html
@@ -5,6 +5,5 @@
 extraCSS:
   - css/content-contributors.css
 ---
-<div id="content-wrapper">
-  {{ content }}
-</div>
+
+<div id="content-wrapper">{{ content }}</div>
diff --git a/docs/_layouts/static-site-main.html b/docs/_layouts/static-site-main.html
@@ -1,56 +1,54 @@
 ---
 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>
-  {% if page.nightlyOf %}
+
+<div class="site-container">
+  <div id="site-header"></div>
+  {% if page.movedTo %}
   <aside class="warning">
-    This is a nightly documentation. The content of this page may not be consistent with the current stable version of language.
-    Click <a href="{{ page.nightlyOf }}">here</a> to find the stable version of this page.
+    This is a nightly documentation. The content of this page may not be
+    consistent with the current stable version of language. Click
+    <a href="{{ page.nightlyOf }}">here</a> to find the stable version of this
+    page.
   </aside>
-  {% endif %}
-  {{ content }}
-  <nav class="arrows-wrapper" aria-label="Page navigation">
+  {% endif %} {{ content }}
+  <div class="divider" />
+  <nav class="arrow-navigation" 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>
-    {% 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>
-    </a>
+    <div>
+      <span class="body-small">Previous</span>
+      <a
+        rel="prev"
+        href="{{ page.previous.url }}"
+        aria-keyshortcuts="Left"
+        class="body-medium"
+      >
+        <span class="body-medium">{{ page.previous.title }}</span>
+      </a>
+    </div>
+    {% endif %} {% if page.next %}
+    <div>
+      <span class="body-small">Next</span>
+      <a
+        rel="next"
+        href="{{ page.next.url }}"
+        aria-keyshortcuts="Right"
+        class="body-medium"
+      >
+        <span class="body-medium">{{ page.next.title }}</span>
+      </a>
+    </div>
     {% endif %}
   </nav>
   <div class="content-contributors hidden">
-    <span><b>Contributors to this page</b></span>
+    <h1 class="h200">Contributors to this page</h1>
     <div id="documentation-contributors" class="contributors-container"></div>
+    {% if urls.editSource %}
+    <div class="github-edit-button">
+      <a class="text-button with-link body-small" href="{{ urls.editSource }}">
+        Edit this page on GitHub
+      </a>
+    </div>
+    {% endif %}
   </div>
 </div>
diff --git a/project/Build.scala b/project/Build.scala
@@ -1379,6 +1379,22 @@ object Build {
     )
   }
 
+  def bundleCSS = Def.task {
+    val unmanagedResources = (Compile / resourceDirectory).value
+    def createBundle(dir: File): Seq[File] = {
+      val (dirs, files) = IO.listFiles(dir).toList.partition(_.isDirectory)
+      val targetDir = (Compile / resourceManaged).value.toPath.resolve(unmanagedResources.toPath.relativize(dir.toPath)).toFile
+      val bundleFile = targetDir / "bundle.css"
+      if (bundleFile.exists) bundleFile.delete()
+      files.foreach(file => IO.append(bundleFile, IO.readBytes(file)))
+      bundleFile :: dirs.flatMap(createBundle)
+    }
+
+    val cssThemePath = unmanagedResources / "dotty_res" / "styles" / "theme"
+
+    createBundle(cssThemePath)
+  }
+
   val SourceLinksIntegrationTest = config("sourceLinksIntegrationTest") extend Test
 
   lazy val scaladoc = project.in(file("scaladoc")).
@@ -1392,7 +1408,10 @@ object Build {
       SourceLinksIntegrationTest / test:= ((SourceLinksIntegrationTest / test) dependsOn generateScalaDocumentation.toTask("")).value,
     ).
     settings(
-      Compile / resourceGenerators += generateStaticAssetsTask.taskValue,
+      Compile / resourceGenerators ++= Seq(
+        generateStaticAssetsTask.taskValue,
+        bundleCSS.taskValue
+      ),
       libraryDependencies ++= Dependencies.flexmarkDeps ++ Seq(
         "nl.big-o" % "liqp" % "0.8.2",
         "org.jsoup" % "jsoup" % "1.14.3", // Needed to process .html files for static site
@@ -1879,7 +1898,17 @@ object ScaladocConfigs {
       projectFooter,
       defaultTemplate,
       Author(true),
-      Groups(true)
+      Groups(true),
+      QuickLinks(
+        List(
+          "Download::https://www.scala-lang.org/download/",
+          "Documentation::https://docs.scala-lang.org/",
+          "Libraries::https://index.scala-lang.org",
+          "Contribute::https://www.scala-lang.org/contribute/",
+          "Blog::https://www.scala-lang.org/blog/",
+          "Community::https://www.scala-lang.org/community/"
+        )
+      )
     )
   }
 

diff --git a/project/ScaladocGeneration.scala b/project/ScaladocGeneration.scala
@@ -129,6 +129,10 @@ object ScaladocGeneration {
     def key: String = "-usejavacp"
   }
 
+  case class QuickLinks(value: List[String]) extends Arg[List[String]] {
+    def key: String = "-quick-links"
+  }
+
   import _root_.scala.reflect._
 
   trait GenerationConfig {

diff --git a/project/resources/referenceReplacements/_layouts/static-site-main.html b/project/resources/referenceReplacements/_layouts/static-site-main.html
@@ -1,6 +1,7 @@
 ---
 layout: main
 ---
+
 <div class="container">
   <div id="site-header">
     <div class="wrap">
@@ -31,20 +32,29 @@
   {{ 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.url }}"
+      class="arrows previous"
+      aria-keyshortcuts="Left"
+    >
+      <span>{{ page.previous.title }}</span>
+      <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.url }}"
+      class="arrows next"
+      aria-keyshortcuts="Right"
+    >
+      <span>{{ page.next.title }}</span>
+      <i class="fa fa-angle-right"></i>
     </a>
     {% endif %}
   </nav>
   <div class="content-contributors hidden">
-    <span><b>Contributors to this page</b></span>
+    <h1 class="h200">Contributors to this page</h1>
     <div id="documentation-contributors" class="contributors-container"></div>
   </div>
 </div>
diff --git a/project/scripts/cmdScaladocTests b/project/scripts/cmdScaladocTests
@@ -40,5 +40,6 @@ dist/target/pack/bin/scaladoc \
   -project-footer "Copyright (c) 2002-2022, LAMP/EPFL" \
   -default-template static-site-main \
   -author -groups -revision main -project-version "${DOTTY_BOOTSTRAPPED_VERSION}" \
+  "-quick-links:Download::https://www.scala-lang.org/download/,Documentation::https://docs.scala-lang.org/,Libraries::https://index.scala-lang.org,Contribute::https://www.scala-lang.org/contribute/,Blog::https://www.scala-lang.org/blog/,Community::https://www.scala-lang.org/community/" \
   out/bootstrap/scaladoc-testcases/scala-"${DOTTY_NONBOOTSTRAPPED_VERSION}"/classes > "$tmp" 2>&1 || echo "generated testcases project with scripts"
 diff -rq "$OUT1" "scaladoc/output/testcases"
diff --git a/scaladoc-js/common/css/code-snippets.css b/scaladoc-js/common/css/code-snippets.css
@@ -1,14 +1,14 @@
 /* Snippets */
 
-.snippet {
+/* .snippet {
   position: relative;
   background: var(--code-bg);
   margin: 1em 0px;
   border-radius: 2px;
   box-shadow: 0 0 2px #888;
   cursor: default;
-}
-.snippet-error {
+} */
+/* .snippet-error {
   border-bottom: 2px dotted red;
 }
 .snippet-warn {
@@ -19,17 +19,17 @@
 }
 .snippet-debug {
   border-bottom: 2px dotted pink;
-}
+} */
 
-.snippet .snippet-meta {
+/* .snippet .snippet-meta {
   border-top: 2px solid var(--inactive-bg);
   color: var(--inactive-fg);
   margin-top: 10px;
   padding-top: 10px;
   font-size: 0.75em;
-}
+} */
 
-.snippet-meta .snippet-label {
+/* .snippet-meta .snippet-label {
   font-weight: bold;
 }
 
@@ -319,4 +319,4 @@ input:checked + .slider:before {
       --slider-width: 24px;
       --slider-height: 10px;
   }
-}
+} */