apache · rdblue · Jul 7, 2022 · Jul 5, 2022 · Jul 7, 2022
diff --git a/docs/config.toml b/docs/config.toml
@@ -30,12 +30,8 @@ home = [ "HTML", "RSS", "SearchIndex" ]
     { name = "0.12.1", pre = "relative", url = "../0.12.1", weight = 1000 }
   ]
   topnav = [
-    { name = "Docs", url = "/docs/latest", weight = 100 },
-    { name = "Releases", pre = "relative", url = "../../releases", weight = 600 },
-    { name = "Spark", url = "/docs/latest/getting-started", weight = 200 },
-    { name = "Flink", url = "/docs/latest/flink", weight = 300 },
-    { name = "Trino", url = "https://trino.io/docs/current/connector/iceberg.html", weight = 400 },
-    { name = "Presto", url = "https://prestodb.io/docs/current/connector/iceberg.html" , weight = 500 },
+    { name = "Quickstart", url = "/spark-quickstart", weight = 100 },
+    { name = "Docs", url = "/docs/latest", weight = 200 },
     { name = "Blogs", pre = "relative", url = "../../blogs", weight = 998 },
     { name = "Talks", pre = "relative", url = "../../talks", weight = 999 },
     { name = "Roadmap", pre = "relative", url = "../../roadmap", weight = 997 },

diff --git a/iceberg-theme/README.md b/iceberg-theme/README.md
@@ -0,0 +1,63 @@
+# Iceberg Theme
+
+The Iceberg theme is a theme for use with [Hugo](https://gohugo.io/).
+
+## Hint Boxes
+
+To add a hint box, use the `hint` shortcode and pass in a hint box variation type. Available
+types are `info`, `success`, `warning`,  or `error`.
+
+```
+{{< hint info >}}
+Here is a message for the hint box!
+{{< /hint >}}
+```
+
+## Codetabs
+
+To add a tabbed view of different code examples, use the `codetabs`, `addtab`, and `tabcontent` shortcodes directly
+within a markdown page.
+
+1. Define a named set of tabs, making sure that the name is unique across the current page.
+```
+{{% codetabs "LaunchSparkClient" %}}
+{{% /codetabs %}}
+```
+
+2. Add one or more tabs using the `addtab` shortcode. The arguments to the `addtab` shortcode are tab name, tab group,
+and tab type. (see the logic in `iceberg-theme.js` to see how these are used)
+```css
+{{% codetabs "LaunchSparkClient" %}}
+{{% addtab "SparkSQL" "spark-queries" "spark-sql" %}}
+{{% addtab "Spark-Shell" "spark-queries" "spark-shell" %}}
+{{% addtab "PySpark" "spark-queries" "pyspark" %}}
+{{% codetabs "LaunchSparkClient" %}}
+{{% /codetabs %}}
+```
+
+3. Add content for each tab using the `tabcontent` shortcode.
+```
+{{% codetabs "LaunchSparkClient" %}}
+{{% addtab "SparkSQL" "spark-queries" "spark-sql" %}}
+{{% addtab "Spark-Shell" "spark-queries" "spark-shell" %}}
+{{% addtab "PySpark" "spark-queries" "pyspark" %}}
+{{% tabcontent "spark-sql"  %}}
+\```sh
+docker exec -it spark-iceberg spark-sql
+\```
+{{% /tabcontent %}}
+{{% tabcontent "spark-shell" %}}
+\```sh
+docker exec -it spark-iceberg spark-shell
+\```
+{{% /tabcontent %}}
+{{% tabcontent "pyspark" %}}
+\```sh
+docker exec -it spark-iceberg pyspark
+\```
+{{% /tabcontent %}}
+{{% /codetabs %}}
+```
+
+Codetab "groups" are used to coordinate switching the tab view throughout an entire page.
+To add a new group, update the code in `iceberg-theme.js`.
diff --git a/iceberg-theme/layouts/partials/body.html b/iceberg-theme/layouts/partials/body.html
@@ -16,12 +16,12 @@
 {{ partial "header.html" . }}
 <body dir="{{ .Site.Language.LanguageDirection | default " ltr" }}">
     <section>
-        <div class="grid-container {{ if and (not .Params.disableSidebar) (not .Params.disableToc) }}leftnav-and-toc{{ else if not .Params.disableSidebar }}left-nav-only{{ else if not .Params.disableToc }}toc-only{{ end }}">
+        <div class="grid-container {{ if and (not .Params.disableSidebar) (not .Params.disableToc) }}leftnav-and-toc{{ else if not .Params.disableSidebar }}left-nav-only{{ else if not .Params.disableToc }}toc-only{{ else }}content-only{{ end }}">
             {{ if not .Params.disableSidebar }}
                 {{ partial "sidebar.html" . }}
             {{ end }}
             <div id="content" class="markdown-body">
-                <div class="{{ if not .Params.disableToc }}margin-for-toc{{ end }}">
+                <div class="{{ if not .Params.disableToc }}margin-for-toc{{ else }}margin-without-toc{{ end }}">
                     {{- .Content -}}
                 </div>
                 {{ if not .Params.disableToc }}

diff --git a/iceberg-theme/layouts/shortcodes/addtab.html b/iceberg-theme/layouts/shortcodes/addtab.html
@@ -1,2 +1,2 @@
-<input id="{{ .Parent.Get 0 }}{{ .Get 0 }}" type="radio" name="{{ .Parent.Get 0 }}" {{ .Get 1 }}>
-<label for="{{ .Parent.Get 0 }}{{ .Get 0 }}">{{ .Get 0 }}</label>
+<input id="{{ .Get 2 }}" type="radio" name="{{ .Parent.Get 0 }}" onclick="selectExampleLanguage('{{ .Get 1 }}', '{{ .Get 2 }}')">
+<label for="{{ .Get 2 }}">{{ .Get 0 }}</label>
diff --git a/iceberg-theme/layouts/shortcodes/codetabs.html b/iceberg-theme/layouts/shortcodes/codetabs.html
@@ -1,91 +1 @@
-<style>
-
-#{{ .Get 0 }} h1 {
-  padding: 50px 0;
-  font-weight: 400;
-  text-align: center;
-}
-
-#{{ .Get 0 }} p {
-  margin: 0 0 20px;
-  line-height: 1.5;
-}
-
-#{{ .Get 0 }} main {
-  min-width: 320px;
-  max-width: 800px;
-  padding: 50px;
-  margin: 0 auto;
-  background: #fff;
-}
-
-#{{ .Get 0 }} section {
-  display: none;
-  padding: 20px 0 0;
-  border-top: 1px solid #ddd;
-}
-
-#{{ .Get 0 }} input {
-  display: none;
-}
-
-#{{ .Get 0 }} label {
-  display: inline-block;
-  margin: 0 0 -1px;
-  padding: 15px 25px;
-  font-weight: 600;
-  text-align: center;
-  color: #bbb;
-  border: 1px solid transparent;
-}
-
-#{{ .Get 0 }} label:before {
-  font-family: fontawesome;
-  font-weight: normal;
-  margin-right: 10px;
-}
-
-#{{ .Get 0 }} label[for*='1']:before { content: '\f1cb'; }
-#{{ .Get 0 }} label[for*='2']:before { content: '\f17d'; }
-#{{ .Get 0 }} label[for*='3']:before { content: '\f16b'; }
-#{{ .Get 0 }} label[for*='4']:before { content: '\f1a9'; }
-
-#{{ .Get 0 }} label:hover {
-  color: #888;
-  cursor: pointer;
-}
-
-#{{ .Get 0 }} input:checked + label {
-  color: #555;
-  border: 1px solid #ddd;
-  border-top: 2px solid orange;
-  border-bottom: 1px solid #fff;
-}
-
-#{{ .Get 0 }} #{{ .Get 0 }}Python:checked ~ #{{ .Get 0 }}Python,
-#{{ .Get 0 }} #{{ .Get 0 }}Java:checked ~ #{{ .Get 0 }}Java,
-#{{ .Get 0 }} #{{ .Get 0 }}Scala:checked ~ #{{ .Get 0 }}Scala,
-#{{ .Get 0 }} #{{ .Get 0 }}SparkSQL:checked ~ #{{ .Get 0 }}SparkSQL,
-#{{ .Get 0 }} #{{ .Get 0 }}SparkShell:checked ~ #{{ .Get 0 }}SparkShell,
-#{{ .Get 0 }} #{{ .Get 0 }}PySpark:checked ~ #{{ .Get 0 }}PySpark,
-#{{ .Get 0 }} #{{ .Get 0 }}Notebook:checked ~ #{{ .Get 0 }}Notebook {
-  display: block;
-}
-
-@media screen and (max-width: 650px) {
-  #{{ .Get 0 }} label {
-    font-size: 0;
-  }
-  #{{ .Get 0 }} label:before {
-    margin: 0;
-    font-size: 18px;
-  }
-}
-
-@media screen and (max-width: 400px) {
-  #{{ .Get 0 }} label {
-    padding: 15px;
-  }
-}
-</style>
-<div id="{{ .Get 0 }}">{{ .Inner }}</div>
+<div class="codetabs">{{ .Inner }}</div>
diff --git a/iceberg-theme/layouts/shortcodes/quickstarts.html b/iceberg-theme/layouts/shortcodes/quickstarts.html
@@ -0,0 +1,31 @@
+<!-- - Licensed to the Apache Software Foundation (ASF) under one or more-->
+<!-- - contributor license agreements.  See the NOTICE file distributed with-->
+<!-- - this work for additional information regarding copyright ownership.-->
+<!-- - The ASF licenses this file to You under the Apache License, Version 2.0-->
+<!-- - (the "License"); you may not use this file except in compliance with-->
+<!-- - the License.  You may obtain a copy of the License at-->
+<!-- - -->
+<!-- -   http://www.apache.org/licenses/LICENSE-2.0-->
+<!-- - -->
+<!-- - Unless required by applicable law or agreed to in writing, software-->
+<!-- - distributed under the License is distributed on an "AS IS" BASIS,-->
+<!-- - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.-->
+<!-- - See the License for the specific language governing permissions and-->
+<!-- - limitations under the License.-->
+<details>
+    <summary>More Quickstarts</summary>
+    <div class="quickstart-container">{{ $currentPageTitle := .Page.Title }}{{ range .Site.Menus.quickstarts }}{{ if ne .Name $currentPageTitle }}
+            <div class="quickstart-card quickstart-card-aqua">
+                <div class="quickstart-card-content">
+                    <span class="quickstart-card-title" title="{{ .Name }}">{{ .Name }}</span>
+                    <p class="quickstart-card-text">
+                        {{ substr .Post 0 130 }}
+                    </p>
+                </div>
+                <div class="quickstart-card-link">
+                    <a href="{{ $.Site.BaseURL }}{{ .URL }}"><span>Try it Out</span></a>
+                </div>
+            </div>
+            <br>{{ else }}{{ end }}{{ end }}
+    </div>
+    </details>
diff --git a/iceberg-theme/layouts/shortcodes/tabcontent.html b/iceberg-theme/layouts/shortcodes/tabcontent.html
@@ -1,3 +1,3 @@
-<section id="{{ .Parent.Get 0 }}{{ .Get 0 }}">
+<codeblock class="{{ .Get 0 }}">
       {{ .Inner }}
-</section>
+</codeblock>