DEV: beginning of Develop landing page redesign

content/develop/_index.md

@@ -3,3 +3,5 @@ title: Develop with Redis
 description: Learn how to develop with Redis
 linkTitle: Develop
 ---
+
+Explore the pages below to learn more about developing with Redis Open Source.

layouts/develop/list.html

@@ -1,11 +1,12 @@
 {{ define "head" }}
+  <script src='{{ relURL "js/cli.js" }}' defer></script>
   <script src='{{ relURL "js/codetabs.js" }}' defer></script>
 {{ end }}
 
 {{ define "main" }}
   <main class="docs w-full max-w-[1920px] mx-auto px-5 flex flex-col md:flex-row overflow-hidden">
     {{ partial "docs-nav.html" . }}
-    <div class="py-12 md:pl-4 xl:px-16 overflow-hidden">
+    <div class="w-full py-12 md:pl-4 xl:px-16 overflow-hidden">
       {{ partial "breadcrumbs" . }}
       <section class="prose w-full py-12 max-w-none">
         <h1>
@@ -34,6 +35,45 @@ <h1>
           {{ end }}
         {{ end }}
 
+        <!-- Responsive CLI Display Block as Table -->
+        <div class="overflow-x-auto">
+          <table class="w-full border-collapse md:table">
+            <thead>
+              <tr>
+                <th class="p-4 text-left">Try these Redis commands</th>
+                <th class="p-4 text-left hidden md:table-cell">Redis CLI</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="flex flex-col md:table-row">
+                <td class="align-top p-4 w-full md:w-[40%] text-base font-mono">
+                  <code><a href="/commands/ping">PING</a></code></br>
+                  <code><a href="/commands/hset">HSET</a> user:1 name antirez vocation artist</code></br>
+                  <code><a href="/commands/hgetall">HGETALL</a> user:1</code></br>
+                  <code><a href="/commands/set">SET</a> e 2.71</code></br>
+                  <code><a href="/commands/incrbyfloat">INCRBYFLOAT</a> e 0.43</code></br>
+                  <code><a href="/commands/rename">RENAME</a> e pi</code></br>
+                  <code><a href="/commands/get">GET</a> pi</code>
+                </td>
+                <td class="align-top p-4 w-full md:w-[60%]">
+                  <div class="bg-slate-900 rounded-xl shadow-lg shadow-slate-900/10 h-60 overflow-y-auto">
+                    <div class="border-b border-slate-700 rounded-t-xl px-4 py-3 w-full flex">
+                      {{ partial "icons/cli-circle" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
+                      {{ partial "icons/cli-triangle" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
+                      {{ partial "icons/cli-star" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
+                    </div>            
+                    <form class="redis-cli" typewriter>
+                      <pre tabindex="0" class="whitespace-pre">
+PING
+                      </pre>
+                    </form>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
         {{ .Content }}
         {{ if not .Params.hideListLinks }}
           <nav>

layouts/develop/single.html

@@ -5,9 +5,9 @@
 {{ define "main" }}
   <main class="docs w-full max-w-[1920px] mx-auto px-5 flex flex-col md:flex-row overflow-hidden">
     {{ partial "docs-nav.html" . }}
-    <div class="py-12 md:pl-4 xl:px-16 overflow-hidden">
+    <div class="w-full py-12 md:pl-4 xl:px-16 overflow-hidden">
       {{ partial "breadcrumbs" . }}
-      <section class="prose w-full py-12">
+      <section class="prose w-full py-12 max-w-none">
         <h1>
           {{ .Title }}</h1>
         {{ with .Params.description }}<p class="text-lg -mt-5 mb-10">{{ . | markdownify }}</p>{{ end }}