site: add download section

Use something similar to Bootstrap's "Hanging icons" example from
the Bootstrap 5.1 docs.

See: https://getbootstrap.com/docs/5.1/examples/features/

site/layouts/_default/home.html

@@ -19,6 +19,7 @@
                 <a class="nav-link ms-3 my-1" href="#cluster-impact">Impact</a>
               </nav>
               <a class="nav-link" href="#schema-extensions">Schema Extensions</a>
+              <a class="nav-link" href="#download">Download</a>
               <a class="nav-link" href="#feedback">Feedback</a>
             </nav>
           </nav>
@@ -112,6 +113,35 @@
           {{ .Render "term" }}
         </div>
         {{ end }}
+        <h2 id="download">Download</h2>
+        <p>The ISEAL Core schema is available for download in two formats:</p>
+        <div class="container ">
+          <div class="row pb-4 row-cols-1 row-cols-lg-2">
+            <div class="col d-flex align-items-start">
+              <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+                {{ $fileCodeIcon := resources.Get "icons/file-earmark-code.svg" | resources.Fingerprint }}
+                <img src="{{ $fileCodeIcon.Permalink }}" alt="File icon with earmark" width="32" height="32">
+              </div>
+              <div>
+                <h3>Turtle</h3>
+                <p>Terse RDF Triple Language (TTL). Use this format when you need to validate metadata against ISEAL Core programmatically.</p>
+                <a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/iseal-core.ttl" class="btn btn-primary">Download</a>
+              </div>
+            </div>
+            <div class="col d-flex align-items-start">
+              <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+                {{ $fileSpreadsheetIcon := resources.Get "icons/file-earmark-spreadsheet.svg" | resources.Fingerprint }}
+                <img src="{{ $fileSpreadsheetIcon.Permalink }}" alt="File icon with earmark" width="32" height="32" />
+              </div>
+              <div>
+                <h3>CSV</h3>
+                <p>Comma-separated Values (CSV). Use this format when you just need a quick and easy offline reference.</p>
+                <a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/schema-fields.csv" class="btn btn-primary">Download</a>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <h2 id="feedback">Feedback</h2>
         <p>If you have questions/comments please contact ____.</p>
       </main>

site/package.json

@@ -6,8 +6,9 @@
     "build:css": "sass --style expanded source/scss/style.scss assets/css/style.css.tmp && cleancss -O1 --format breakWith=lf --with-rebase assets/css/style.css.tmp -o assets/css/style.min.css",
     "build:js": "uglifyjs node_modules/jquery/dist/jquery.slim.min.js node_modules/bootstrap/dist/js/bootstrap.min.js -o assets/js/bundle.min.js",
     "build:site": "./bin/hugo/hugo",
-    "build": "npm run build:css && npm run build:js && npm run clean && npm run build:site",
+    "build": "npm run build:css && npm run build:js && npm run clean && npm run copy:icons && npm run build:site",
     "clean": "rm assets/css/style.css.tmp assets/css/style.css.tmp.map",
+    "copy:icons": "cp node_modules/bootstrap-icons/icons/file-earmark-code.svg node_modules/bootstrap-icons/icons/file-earmark-spreadsheet.svg assets/icons",
     "postinstall": "hugo-installer --version 0.89.4"
   },
   "keywords": [

site/source/scss/main.scss

@@ -38,6 +38,16 @@ p.lead {
     color: inherit;
 }
 
+.icon-square {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+  border-radius: .75rem;
+}
+
 div.badge-required {
     float: right;