Add quickstart example to site index

weavejester · weavejester · commit 35e687b3afd1 · 2025-10-03T00:35:14.000+01:00
diff --git a/site/index.html b/site/index.html
@@ -12,6 +12,7 @@
     <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 src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/shell.min.js"></script>
     <script>hljs.highlightAll();</script>
   </head>
   <body>
@@ -28,7 +29,7 @@ <h1 class="title">
     </section>
     <div class="nav-buttons">
       <div class="container has-text-centered">
-        <a class="button is-primary is-rounded is-size-6" href="#">Read the docs</a>
+        <a class="button is-primary is-rounded is-size-6" href="/docs">Read the docs</a>
       </div>
     </div>
     <section class="section">
@@ -99,6 +100,22 @@ <h1 class="title">
     {:body {:items (jdbc/execute! db ["SELECT * FROM items"])}}))</code></pre>
       </div>
     </section>
+    <section class="section">
+      <div class="container is-max-tablet">
+        <p class="is-size-4">
+          Get a Duct project started in only <strong>a few commands</strong>.
+        </p>
+        <p>
+          Duct makes it easy to get going. All you need is the
+          <code>clojure</code> command-line tool installed.
+          Once you're set up, read the extensive
+          <a href="/docs">documentation</a> to learn how to use this framework.
+        </p>
+        <pre class="highlight"><code class="language-shell">$ mkdir demo &amp;&amp; cd demo
+$ curl -Os duct.now/deps.edn
+$ clojure -M:duct --setup :duct:git</code></pre>
+      </div>
+    </section>
     <footer class="footer">
       <div class="content has-text-centered">
         <p>Created by James Reeves (2025)</p>
diff --git a/site/style.css b/site/style.css
@@ -24,6 +24,14 @@ html, .hero .hero-body, .footer {
   background: #292929;
 }
 
+:root {
+  --bulma-link-text: #93dd56;
+}
+
+p a:hover {
+  text-decoration: underline;
+}
+
 .footer {
   margin-top: 3rem;
   padding-bottom: 3rem;
