Merge pull request #347 from creativecommons/specimen-index

TimidRobot · web-flow · commit 919a6c3e5dbd · 2025-04-30T08:22:00.000-07:00
Add specimen index
diff --git a/docs/index.html b/docs/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
 <head>
 <title>Vocabulary - Docs</title>
-  
+
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <link rel="stylesheet" media="all" href="style.css" />
@@ -26,10 +26,10 @@ <h1>Vocabulary</h1>
 
 <nav>
 <ul>
-    <li><a href="#introduction" class="active">Introduction</a></li>
+  <li><a href="#introduction" class="active">Introduction</a></li>
   <li><a href="#installation">Installation</a></li>
   <li><a href="#components">Components</a></li>
-
+  <li><a href="#specimen">Specimen Index</a></li>
 </ul>
 
 </nav>
@@ -82,7 +82,7 @@ <h4>A prototype contains:</h4>
 
 <h3 id="upstream-downstream-change-flow">Upstream/Downstream Change Flow</h3>
 
-This enables two modes of build work. 
+This enables two modes of build work.
 
 <h4>A: upstream → downstream</h4>
 <ol>
@@ -121,25 +121,25 @@ <h3>02. CSS Installation</h3>
 
 <pre>
 <code class="lang-html">
-    
+
 <link rel="stylesheet" media="all" href="PATH/TO/style.css" />
-    
+
 </code>
 </pre>
 
 
 
 <p>Include <span class="distinct">vocabulary.css</span> from within <span class="distinct">style.css</span> via a <a href="#">CSS @layer import</a> at the top of the file.</p>
 
-<aside> 
+<aside>
     <p>CSS Layers provide a reliable, and safely overridable cascade of rulesets.</p>
 </aside>
 
 <pre>
 <code class="lang-css">
-    
+
 @import 'PATH/TO/vocabulary/css/vocabulary.css' layer(vocabulary);
-    
+
 </code>
 </pre>
 
@@ -149,11 +149,11 @@ <h3>02. CSS Installation</h3>
 
 <pre>
 <code class="lang-css">
-    
+
 @import 'PATH/TO/vocabulary/css/vocabulary.css' layer(vocabulary);
 @import 'PATH/TO/vocabulary/css/vocabulary-tests.css' layer(vocabulary-tests);
-    
-    
+
+
 </code>
 </pre>
 
@@ -170,7 +170,7 @@ <h3>03. JS Installation</h3>
 
 <script src="PATH/TO/vocabulary/js/vocabulary.js"></script>
 
-        
+
 </code>
 </pre>
 
@@ -198,15 +198,15 @@ <h3 id="global-header">Header - Global Area</h3><a class="permalink" href="#glob
 
 <p>The Global Header component contains several sub-elements.</p>
 <ul>
-  
+
   <li>
     Masthead
     <ul>
       <li>Entity Logo</li>
       <li>Primary Nav Menu</li>
       <li>Ancillary Nav Menu</li>
     </ul>
-  </li> 
+  </li>
   <li>
     Explore Panel (Explore CC)
     <ul>
@@ -300,7 +300,7 @@ <h2>Our Work Relies On You!</h2>
 
 </header>
 
-      
+
 </code>
 </pre>
 
@@ -394,7 +394,7 @@ <h2>Support Our Work</h2>
 
 </footer>
 
-      
+
 </code>
 </pre>
 
@@ -454,7 +454,7 @@ <h4>Expected Contexts</h4>
 <code class="lang-html">
 
   <article class="attention">
-  
+
    content here
 
   </article>
@@ -576,7 +576,7 @@ <h4>Expected Contexts</h4>
   <article class="posts">
 
   <h2>Title Here</h2>
-  
+
     <article class="story">
       <header>
       <h3><a href="#">Title Here</a></h3>
@@ -797,7 +797,7 @@ <h2>Title</h2>
     <h3 class="stat">55+ million articles</h3>
     <p>Descriptive text here</p>
   </article>
- 
+
 
 </code>
 </pre>
@@ -961,7 +961,7 @@ <h1>Title Here</h1>
     <span class="categories">  <!-- optional -->
       <a href="#">Open Culture</a>
     </span>
-  
+
   </header>
 
 </code>
@@ -991,13 +991,19 @@ <h1>Name</h1>
      <div class="bio">
        <p>Bio here</p>
      </div>
-  
+
   </header>
 
 </code>
 </pre>
 
 
+<h2 id="specimen">Specimen Index</h2><a class="permalink" href="#specimen">permalink</a>
+
+<ul>
+  <li><a href="specimen/index.html">Vocabulary Specimens</a></li>
+</ul>
+
 </main>
 
 
diff --git a/netlify-deploy.sh b/netlify-deploy.sh
@@ -10,13 +10,29 @@ E107="$(printf "\033[107m")"    # bright white background
 
 #### FUNCTIONS ################################################################
 
+build_specimen_index() {
+    print_header 'Build Vocabulary Specimens index'
+    build_specimen_index_file > docs/specimen/index.html
+    echo 'done.'
+    echo
+}
+
+build_specimen_index_file() {
+    local _file _relative
+    head -n14 specimen/index.html
+    for _file in docs/specimen/contexts/*.html
+    do
+        _relative="${_file#docs/specimen/}"
+        echo "      <li><a href='${_relative}'>${_relative}</a></li>"
+    done
+    echo "    </ul>\n  </main>\n</body>\n</html>"
+}
 
 print_header() {
     # Print 80 character wide black on white heading with time
     printf "${E30}${E107}# %-69s$(date '+%T') ${E0}\n" "${@}"
 }
 
-
 remove_previous_from_docs() {
     # shellcheck disable=SC2016
     print_header 'Remove previous publish from the `docs/` directory'
@@ -26,7 +42,6 @@ remove_previous_from_docs() {
     echo
 }
 
-
 publish_to_docs() {
     # shellcheck disable=SC2016
     print_header 'Publish to the `docs/` directory'
@@ -37,8 +52,8 @@ publish_to_docs() {
     echo
 }
 
-
 #### MAIN #####################################################################
 
 remove_previous_from_docs
 publish_to_docs
+build_specimen_index
diff --git a/specimen/index.html b/specimen/index.html
@@ -1,20 +1,19 @@
 <!DOCTYPE html>
+<!-- Changes to this file may require changes to netlify-deploy.sh
+     That script assumes the <ul>, below, appears on a specific line -->
 <html lang="en-US">
 <head>
-<title>Vocabulary - Specimens</title>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-
-<!-- <link rel="stylesheet" media="all" href="style.css"> -->
-
+  <title>Vocabulary - Specimens</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" media="all" href="/style.css">
 </head>
 <body>
-
-<h1>Vocabulary Specimens</h1>
-
-<ul>
-    <li><a href="#">item</a></li>
-</ul>
-
+  <main>
+    <h1>Vocabulary Specimens</h1>
+    <ul>
+        <li><a href="#">item</a></li>
+    </ul>
+  </main>
 </body>
 </html>
