Add hint boxes and codetabs to landing-page

landing-page/config.toml

@@ -19,3 +19,6 @@ title = "Apache Iceberg"
   title = "slack"
   icon = "slack"
   url = "https://join.slack.com/t/apache-iceberg/shared_invite/zt-tlv0zjz6-jGJEkHfb1~heMCJA3Uycrg"  
+
+[markup.goldmark.renderer]
+unsafe= true

landing-page/layouts/shortcodes/addtab.html

@@ -0,0 +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>

landing-page/layouts/shortcodes/codetabs.html

@@ -0,0 +1,91 @@
+<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>

landing-page/layouts/shortcodes/hint.html

@@ -0,0 +1,3 @@
+<div class="{{ .Get 0 }}">
+    {{ .Inner | .Page.RenderString }}
+</div>

landing-page/layouts/shortcodes/tabcontent.html

@@ -0,0 +1,3 @@
+<section id="{{ .Parent.Get 0 }}{{ .Get 0 }}">
+      {{ .Inner }}
+</section>

landing-page/static/css/landing-page.css

@@ -265,4 +265,27 @@ h4:hover a { visibility: visible}
 
 @media screen and (max-width: 1280px) {
     #toc { display: none; }  /* Hide the TOC if the page is less than 1280px */
-  }
+  }
+
+/* Style for the hint shortcode */
+.info, .success, .warning, .error {
+    margin: 10px 0px;
+    padding:12px;
+
+}
+.info {
+    color: #00529B;
+    background-color: #BDE5F8;
+}
+.success {
+    color: #4F8A10;
+    background-color: #DFF2BF;
+}
+.warning {
+    color: #9F6000;
+    background-color: #FEEFB3;
+}
+.error {
+    color: #D8000C;
+    background-color: #FFD2D2;
+}