Add examples and introduction text to site

weavejester · weavejester · commit 9b07f3ab03c0 · 2025-10-01T19:55:52.000+01:00
diff --git a/site/index.html b/site/index.html
@@ -6,9 +6,13 @@
     <title>The Duct Framework</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bebas+Neue&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/an-old-hope.min.css">
     <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/clojure.min.js"></script>
+    <script>hljs.highlightAll();</script>
   </head>
   <body>
     <section class="hero">
@@ -22,5 +26,37 @@ <h1 class="title">
         </div>
       </div>
     </section>
+    <section class="section">
+      <div class="container is-max-tablet">
+        <p class="is-size-5">
+          Define the structure of your application as pure data in
+          <strong>duct.edn</strong>.
+        </p>
+        <pre class="highlight"><code class="language-clojure">{:system
+ {:duct.module/logging {}
+  :duct.module/sql {:migrations #duct/include "db/migrations.edn"}
+  :duct.module/web {:features #{:api}
+                    :routes [["/items" #ig/ref :demo.routes/items]]}
+  :demo.routes/items {:db #ig/ref :duct.database/sql}}}</code></pre>
+        <p class="is-size-6">
+          <strong>Modules</strong> remove repetition while still allowing you
+          to override any data they add.
+        </p>
+        <p class="is-size-6">
+          Use <strong>functions</strong> and <strong>multimethods</strong> to
+          define the behavior of your components.
+        </p>
+        <pre class="highlight"><code class="language-clojure">(ns demo.routes
+  (:require [next.jdbc :as jdbc]))
+
+(defn list-items [{:keys [db]}]
+  (fn handler [_request]
+    {:body {:results (jdbc/execute! db ["SELECT * FROM items"])}}))</code></pre>
+      </div>
+
+      <div class="container has-text-centered">
+        <a class="button is-primary is-rounded is-size-5" href="#">Read the docs</a>
+      </div>
+    </section>
   </body>
 </html>
diff --git a/site/style.css b/site/style.css
@@ -8,6 +8,7 @@
   font-family: "Barlow Condensed", sans-serif;
   font-size: 26px;
   margin-top: -15px;
+  margin-bottom: 0;
 }
 
 .hero .title .logo {
@@ -19,6 +20,32 @@
   background: #292929;
 }
 
+.is-size-5 {
+  font-size: 1.35rem !important;
+}
+
+.is-size-6 {
+  font-size: 1.1rem !important;
+}
+
+section.section {
+  padding-top: 2rem;
+}
+
 p {
-  font-family: "Roboto", sans-serif;
+  font-family: "Open Sans", sans-serif;
+  margin-bottom: 1em;
+}
+
+pre.highlight {
+  padding: 0;
+  margin: 1rem 0;
+  background: transparent;
+  margin-bottom: 20px;
+}
+
+pre.highlight code {
+  border-radius: 10px;
+  background: #292929;
+  padding: 15px;
 }
