From a54f4c5b11a36d9f390f4b2553ce61866b83e667 Mon Sep 17 00:00:00 2001
From: samredai <43911210+samredai@users.noreply.github.com>
Date: Tue, 19 Apr 2022 17:55:26 -0700
Subject: [PATCH 1/2] Add hint boxes and codetabs to landing-page

---
 landing-page/config.toml                      |  3 +
 landing-page/layouts/shortcodes/addtab.html   |  2 +
 landing-page/layouts/shortcodes/codetabs.html |  1 +
 landing-page/layouts/shortcodes/hint.html     |  3 +
 .../layouts/shortcodes/tabcontent.html        |  3 +
 landing-page/static/css/landing-page.css      | 84 ++++++++++++++++++-
 6 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 landing-page/layouts/shortcodes/addtab.html
 create mode 100644 landing-page/layouts/shortcodes/codetabs.html
 create mode 100644 landing-page/layouts/shortcodes/hint.html
 create mode 100644 landing-page/layouts/shortcodes/tabcontent.html

diff --git a/landing-page/config.toml b/landing-page/config.toml
index 0c96f7e0a..acc658f23 100644
--- a/landing-page/config.toml
+++ b/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
\ No newline at end of file
diff --git a/landing-page/layouts/shortcodes/addtab.html b/landing-page/layouts/shortcodes/addtab.html
new file mode 100644
index 000000000..b678fdd3d
--- /dev/null
+++ b/landing-page/layouts/shortcodes/addtab.html
@@ -0,0 +1,2 @@
+<input id="{{ .Get 0 }}" type="radio" name="tabs" checked>
+<label for="{{ .Get 0 }}">{{ .Get 0 }}</label>
\ No newline at end of file
diff --git a/landing-page/layouts/shortcodes/codetabs.html b/landing-page/layouts/shortcodes/codetabs.html
new file mode 100644
index 000000000..f368a42ab
--- /dev/null
+++ b/landing-page/layouts/shortcodes/codetabs.html
@@ -0,0 +1 @@
+<div id="codetabs">{{ .Inner }}</div>
diff --git a/landing-page/layouts/shortcodes/hint.html b/landing-page/layouts/shortcodes/hint.html
new file mode 100644
index 000000000..496f67775
--- /dev/null
+++ b/landing-page/layouts/shortcodes/hint.html
@@ -0,0 +1,3 @@
+<div class="{{ .Get 0 }}">
+    {{ .Inner | .Page.RenderString }}
+</div>
\ No newline at end of file
diff --git a/landing-page/layouts/shortcodes/tabcontent.html b/landing-page/layouts/shortcodes/tabcontent.html
new file mode 100644
index 000000000..cfb378c84
--- /dev/null
+++ b/landing-page/layouts/shortcodes/tabcontent.html
@@ -0,0 +1,3 @@
+<section id="{{ .Get 0 }}">
+      {{ .Inner }}
+</section>
\ No newline at end of file
diff --git a/landing-page/static/css/landing-page.css b/landing-page/static/css/landing-page.css
index fa8bfcc4c..d02c5bbc7 100644
--- a/landing-page/static/css/landing-page.css
+++ b/landing-page/static/css/landing-page.css
@@ -265,4 +265,86 @@ h4:hover a { visibility: visible}
 
 @media screen and (max-width: 1280px) {
     #toc { display: none; }  /* Hide the TOC if the page is less than 1280px */
-  }
\ No newline at end of file
+  }
+
+/* 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;
+}
+
+/* Style the codetab shortcode */
+  #codetabs h1 {
+    padding: 50px 0;
+    font-weight: 400;
+    text-align: center;
+  }
+  
+  #codetabs p {
+    margin: 0 0 20px;
+    line-height: 1.5;
+  }
+  
+  #codetabs main {
+    min-width: 320px;
+    max-width: 800px;
+    padding: 50px;
+    margin: 0 auto;
+    background: #fff;
+  }
+  
+  #codetabs section {
+    display: none;
+    padding: 20px 0 0;
+    border-top: 1px solid #ddd;
+  }
+  
+  #codetabs input {
+    display: none;
+  }
+  
+  #codetabs label {
+    display: inline-block;
+    margin: 0 0 -1px;
+    padding: 15px 25px;
+    font-weight: 600;
+    text-align: center;
+    color: #bbb;
+    border: 1px solid transparent;
+  }
+  
+  #codetabs label:hover {
+    color: #000;
+    cursor: pointer;
+  }
+  
+  #codetabs input:checked + label {
+    color: #000;
+    border: 1px solid #ddd;
+    border-top: 2px solid orange;
+    border-bottom: 1px solid #fff;
+  }
+  
+  #codetabs #Python:checked ~ #Python,
+  #codetabs #Java:checked ~ #Java,
+  #codetabs #Scala:checked ~ #Scala,
+  #codetabs #tab4:checked ~ #content4 {
+    display: block;
+  }

From ab474263d4077fd5c41997258fbb22a87ceabf80 Mon Sep 17 00:00:00 2001
From: samredai <43911210+samredai@users.noreply.github.com>
Date: Mon, 25 Apr 2022 08:23:12 -0700
Subject: [PATCH 2/2] Include parent div ID and style in shortcode to avoid
 conflicts between multipls tabbed code blocks

---
 landing-page/layouts/shortcodes/addtab.html   |  4 +-
 landing-page/layouts/shortcodes/codetabs.html | 92 ++++++++++++++++++-
 .../layouts/shortcodes/tabcontent.html        |  2 +-
 landing-page/static/css/landing-page.css      | 59 ------------
 4 files changed, 94 insertions(+), 63 deletions(-)

diff --git a/landing-page/layouts/shortcodes/addtab.html b/landing-page/layouts/shortcodes/addtab.html
index b678fdd3d..00422f2ff 100644
--- a/landing-page/layouts/shortcodes/addtab.html
+++ b/landing-page/layouts/shortcodes/addtab.html
@@ -1,2 +1,2 @@
-<input id="{{ .Get 0 }}" type="radio" name="tabs" checked>
-<label for="{{ .Get 0 }}">{{ .Get 0 }}</label>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/landing-page/layouts/shortcodes/codetabs.html b/landing-page/layouts/shortcodes/codetabs.html
index f368a42ab..96d510970 100644
--- a/landing-page/layouts/shortcodes/codetabs.html
+++ b/landing-page/layouts/shortcodes/codetabs.html
@@ -1 +1,91 @@
-<div id="codetabs">{{ .Inner }}</div>
+<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>
\ No newline at end of file
diff --git a/landing-page/layouts/shortcodes/tabcontent.html b/landing-page/layouts/shortcodes/tabcontent.html
index cfb378c84..b1b3c6c01 100644
--- a/landing-page/layouts/shortcodes/tabcontent.html
+++ b/landing-page/layouts/shortcodes/tabcontent.html
@@ -1,3 +1,3 @@
-<section id="{{ .Get 0 }}">
+<section id="{{ .Parent.Get 0 }}{{ .Get 0 }}">
       {{ .Inner }}
 </section>
\ No newline at end of file
diff --git a/landing-page/static/css/landing-page.css b/landing-page/static/css/landing-page.css
index d02c5bbc7..8f1114beb 100644
--- a/landing-page/static/css/landing-page.css
+++ b/landing-page/static/css/landing-page.css
@@ -289,62 +289,3 @@ h4:hover a { visibility: visible}
     color: #D8000C;
     background-color: #FFD2D2;
 }
-
-/* Style the codetab shortcode */
-  #codetabs h1 {
-    padding: 50px 0;
-    font-weight: 400;
-    text-align: center;
-  }
-  
-  #codetabs p {
-    margin: 0 0 20px;
-    line-height: 1.5;
-  }
-  
-  #codetabs main {
-    min-width: 320px;
-    max-width: 800px;
-    padding: 50px;
-    margin: 0 auto;
-    background: #fff;
-  }
-  
-  #codetabs section {
-    display: none;
-    padding: 20px 0 0;
-    border-top: 1px solid #ddd;
-  }
-  
-  #codetabs input {
-    display: none;
-  }
-  
-  #codetabs label {
-    display: inline-block;
-    margin: 0 0 -1px;
-    padding: 15px 25px;
-    font-weight: 600;
-    text-align: center;
-    color: #bbb;
-    border: 1px solid transparent;
-  }
-  
-  #codetabs label:hover {
-    color: #000;
-    cursor: pointer;
-  }
-  
-  #codetabs input:checked + label {
-    color: #000;
-    border: 1px solid #ddd;
-    border-top: 2px solid orange;
-    border-bottom: 1px solid #fff;
-  }
-  
-  #codetabs #Python:checked ~ #Python,
-  #codetabs #Java:checked ~ #Java,
-  #codetabs #Scala:checked ~ #Scala,
-  #codetabs #tab4:checked ~ #content4 {
-    display: block;
-  }