Styling.

README.md

@@ -235,16 +235,20 @@ functional and available for use by the intended audience.
   - ✓ Generate site
   - ✓ Generate LL (single resource)
   - ✓ Generate RDF (single resource)
-- ⚒ Front end
+- ✓ Front end
   - ✓ JS search engine
   - ✓ Add collections to index page
-  - ⚒ Basic styling
+  - ✓ Basic styling
       - ✓ Default type icons
-- ⎊ QA
-  - ⎊ ~50 resource data set
+- ⚒ QA
+  - ⚒ ~50 resource data set
 
 #### MVP
 
+- Proper collection handling
+  - Dedicated template
+  - Link to markdown doc for presentation page
+  - Handle artifacts as members
 - Multilingual support
 - Management UI & API
   - Deposit via S3 source pointer

config/model/typedef/brick.lua

@@ -33,7 +33,7 @@ return {
             type = "resource",
             max_cardinality = 1,
         },
-        href = {
+        ref = {
             uri = "pas:ref",
             label = "Reference",
             description = "The actual resource the brick refers to.",

doc/example_bricks.txt

@@ -0,0 +1,17 @@
+artifact01
+  |  |
+  |  *
+  |  [has_member]---------------+----------+-----------+
+  |                             |          |           |
+  *                             v          |           |
+  [first]--->page01---*[ref]--->file01     |           |
+              |                            |           |
+              |                            |           |
+              *                            v           |
+              [next]--->page02---*[ref]--->file02      |
+                         |                             |
+                         |                             |
+                         *                             v
+                         [next]--->page03---*[ref]--->file03
+
+

src/core.lua

@@ -61,6 +61,7 @@ local M = {
     ART_T = term.new_iriref_ns("pas:Artifact"),
     PART_T = term.new_iriref_ns("pas:Part"),
     FILE_T = term.new_iriref_ns("pas:File"),
+    BRICK_T = term.new_iriref_ns("pas:Brick"),
 
     -- Common namespaces
     PAR_NS = nsm.get_ns("par"),

src/generator.lua

@@ -148,11 +148,18 @@ local function generate_dres(s, mconf)
                 local ll = {}
 
                 -- Fallback labels.
-                local label
-                _, label = next(repo.gr:attr(child_s, pkar.DC_TITLE_P))
+                local label, ref
+                _, ref = next(repo.gr:attr(child_s, model.id_to_uri.ref))
+                if ref then
+                    _, label = next(repo.gr:attr(ref, model.id_to_uri.label))
+                else
+                    _, label = next(
+                        repo.gr:attr(child_s, model.id_to_uri.label))
+                end
                 if label then label = label.data
                 else
-                    _, label = next(repo.gr:attr(child_s, pkar.PATH_P))
+                    _, label = next(repo.gr:attr(
+                            child_s, model.id_to_uri.source_path))
                     if label then label = path.basename(label.data)
                         else label = child_s.data end
                 end

templates/assets/css/pkar.css

@@ -1,11 +1,17 @@
-main { overflow: hidden; }
+main {
+    overflow: hidden;
+    max-width: 100rem;
+    margin: 0 auto;
+}
 
 section {
-    max-width: 120rem;
-    margin: 0 auto;
     padding: 2rem;
 }
 
+a:hover {
+    text-decoration: underline;
+}
+
 .title {
     text-align: center;
 }
@@ -22,6 +28,51 @@ section {
 
 .hidden {display: none;}
 
+header {
+    padding: .8rem;
+    background-color: #ccc;
+    margin-bottom: 3.2rem;
+}
+
+header nav {
+    max-width: 100rem;
+    margin: 0 auto;
+}
+
+.nav_title {
+    float: left;
+    font-size: 2.8rem;
+    font-weight: 300;
+}
+
+.nav_menu {
+    display: table-row;
+    float: right;
+    margin: 0;
+}
+
+.nav_menu li {
+    display: table-cell;
+    padding: 0 0 0 1rem;
+    vertical-align: middle;
+    list-style-type: none;
+}
+
+.nav_menu form, .nav_menu input {
+    margin: 0;
+}
+
+#nav_search_btn {
+    width: 3rem;
+    opacity: .5;
+}
+
+#nav_qry_f {
+    width: 20rem;
+    margin: 0 .5rem;
+    background-color: whitesmoke;
+}
+
 .breadcrumb {
     font-style: italic;
 }
@@ -32,7 +83,7 @@ section {
 }
 
 .title_icon {
-    width: 3rem;
+    width: 5rem;
     margin: 0 .6rem 0 0;
     vertical-align: middle;
 }
@@ -68,3 +119,26 @@ section {
 .result_tn {
     margin-right: 1.5rem;
 }
+
+.res_md dt {
+    padding: .25rem 1rem;
+    background-color: #ccc;
+    font-weight: bold;
+    font-variant: small-caps;
+    font-size: 1.6rem;
+}
+
+#res_children ol {
+    list-style-type: none;
+    display: block;
+    margin: 2rem auto;
+}
+
+.toolbox {
+    display: inline-block;
+    float: right;
+    margin: 4rem;
+    border: .2rem solid #aaa;
+    border-radius: .75rem;
+    padding: 2rem;
+}

templates/assets/icons/round-search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width='1em' height='1em'><path fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0s.41-1.08 0-1.49zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14"/></svg>

templates/assets/js/search.js

@@ -34,13 +34,13 @@ if (qstring != undefined) {
 
             const res_title_txt = document.createTextNode(rsrc.label || rsrc.fname);
 
+            const res_title = document.createElement("h4");
+            res_title.appendChild(res_icon);
+            res_title.appendChild(res_title_txt);
+
             const res_link = document.createElement("a");
             res_link.setAttribute("href", window.webroot + rsrc.href);
-            res_link.appendChild(res_icon);
-            res_link.appendChild(res_title_txt);
-
-            const res_title = document.createElement("h4");
-            res_title.appendChild(res_link);
+            res_link.appendChild(res_title);
 
             const res_id_txt = document.createTextNode("ID: " + rsrc.id);
             res_id = document.createElement("p");
@@ -53,7 +53,7 @@ if (qstring != undefined) {
             const res_box = document.createElement("div");
             res_box.classList.add("column");
             res_box.classList.add("search_item");
-            res_box.appendChild(res_title);
+            res_box.appendChild(res_link);
             res_box.appendChild(res_id);
             res_box.appendChild(res_date);
 

templates/dres.html

@@ -7,16 +7,23 @@
         <%- header_tpl({site_title = site_title}) %>
         <main>
             <h1>
-                <img class="title_icon" src="<%= icon_url %>" />
-                <%= breadcrumbs[#breadcrumbs][2] -%>:&ensp;<%= title %>
+                <img
+                    class="title_icon" src="<%= icon_url %>"
+                    alt="<%= breadcrumbs[#breadcrumbs][2] -%>" />
+                <%= title %>
             </h1>
+            <section class="toolbox">
+                <h4>Tools</h4>
+                <p><a href="<%= rdf_href %>">Download RDF document</a></p>
+                <p><a href="#">Download Laundry List [TODO]</a></p>
+            </section>
             <section id="res_lineage">
                 <h2>Classification</h2>
                 <p>
                 <% for i, bc in ipairs(breadcrumbs) do %>
                     <% cls, label = table.unpack(bc) %>
                     <% if i ~= 1 then %>
-                    <span class="breadcrump_sep">&ensp;&#x27B3;&ensp;</span>
+                    <span class="breadcrumb_sep">&#x27B3;</span>
                     <% end %>
                     <a
                         class="breadcrumb<%if i == #breadcrumbs then %> current<% end %>"
@@ -28,7 +35,6 @@
             </section>
             <section id="res_dmd">
                 <h2>Metadata</h2>
-                <p><a href="<%= rdf_href %>">Download RDF document</a></p>
                 <dl class="res_md">
                 <% for _, ol in ipairs(dmd) do %>
                     <dt>
@@ -63,10 +69,10 @@
             <% end %>
             <% if #children > 0 then %>
             <section id="res_children">
-                <h2>Contains</h2>
+                <h2>Members</h2>
                 <ul>
                 <% for _, ll in ipairs(children) do %>
-                <li>Sequence (<%= #ll %> items):<ol>
+                <li><%= ll[1].label %> (<%= #ll %> items)<ol>
                     <% for i, el in ipairs(ll) do %>
                         <li><a href="<%= el.href %>">
                         <% if el.tn then %>

templates/header.html

@@ -1,7 +1,20 @@
 <header>
     <nav>
-        <a href="/"><%= site_title %></a>
-        <a href="/cats">Categories</a>
+        <a class="nav_title" href="/"><%= site_title %></a>
+        <ul class="nav_menu">
+            <li><a href="/cats">Categories</a></li>
+            <li>
+                <form id="search_bar" action="/" method="GET">
+                    <input
+                        class="float-left" type="text" name="q" id="nav_qry_f"
+                        placeholder="Quick search">
+                    <input
+                        id="nav_search_btn" class="button-primary" type="image"
+                        alt="Search" src="/icons/round-search.svg">
+                </form>
+            </li>
+        </ul>
+        <div class="clearfix"></div>
     </nav>
 </header>