Use lux 5 to provide the design

Co-authored-by: Christina Chortaria <christinach@users.noreply.github.com>
pulibrary · Apr 15, 2024 · 3609aab · 3609aab
1 parent b84d561
commit 3609aab
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 75 deletions.
diff --git a/.tool-versions b/.tool-versions
@@ -0,0 +1 @@
+ruby 2.7.4
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,47 +4,31 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <title>{{ site.title | default: site.github.repository_name }} by {{ site.github.owner_name }}</title>
-    <link href='https://fonts.googleapis.com/css?family=Arvo:400,700,400italic' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="https://unpkg.com/lux-design-system@5.0.2/dist/style.css">
     <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
-    <script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script>
-    <!--[if lt IE 9]>
-    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
+    <script src="{{ '/assets/js/node-environment-for-vuex.js?v=' | append: site.github.build_revision | relative_url }}"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "vue": "https://unpkg.com/vue@3.2.47/dist/vue.esm-browser.prod.js",
+          "lux-design-system": "https://unpkg.com/lux-design-system@5.0.2/dist/lux-styleguidist.mjs"
+        }
+      }
+    </script>
+    <script type="module" src="{{ '/assets/js/main.js?v=' | append: site.github.build_revision | relative_url }}"></script>
   </head>
-  <body>
-    <div class="wrapper">
-      <header>
-        <h1 class="header"><a href="/">{{ site.title | default: site.github.repository_name }}</a></h1>
-        {% if site.description %}
-          <p class="header">{{ site.description }}</p>
-        {% endif %}
-        <ul>
-          {% if site.show_downloads %}
-            <li class="download"><a class="buttons" href="{{ site.github.zip_url }}">Download ZIP</a></li>
-            <li class="download"><a class="buttons" href="{{ site.github.tar_url }}">Download TAR</a></li>
-          {% endif %}
-          {% if site.website_link %}
-            <li><a class="buttons website" href="{{ site.website_link }}">PUL</a></li>
-          {% endif %}
+  <body id="app">
+      <lux-library-header app-name="{{ site.title | default: site.github.repository_name }}" abbr-name="PUL Systems" app-url="/" theme="dark">
+        <lux-menu-bar type="main-menu" :menu-items="[
+            {name: 'PUL on Github', component: 'PUL on Github', href: '{{ site.github.owner_url }}'},
+          ]"
+        ></lux-menu-bar>
+      </lux-library-header>
 
-          <li><a class="buttons github" href="{{ site.github.owner_url }}">PUL on GitHub</a></li>
-        </ul>
-      </header>
-
-      <section>
+      <lux-wrapper type="main">
         {{ content }}
-      </section>
-    </div>
-    <!--[if !IE]><script>fixScale(document);</script><![endif]-->
-    {% if site.google_analytics %}
-      <script type="text/javascript">
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-        ga('create', '{{ site.google_analytics }}', 'auto');
-        ga('send', 'pageview');
-      </script>
-    {% endif %}
+      </lux-wrapper>
+
+      <lux-library-footer></lux-library-footer>
   </body>
 </html>
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -3,42 +3,27 @@
 
 @import "{{ site.theme }}";
 
-header li {
-	background: #E87722;
-	background: -moz-linear-gradient(top, #E87722 0%, #C35F14 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
-	background: -webkit-linear-gradient(top, #E87722 0%,#C35F14 100%);
-	background: -o-linear-gradient(top, #E87722 0%,#C35F14 100%);
-	background: -ms-linear-gradient(top, #E87722 0%,#C35F14 100%);
-	background: linear-gradient(top, #E87722 0%,#C35F14 100%);
-	border: 0;
-	box-shadow: none;
+ul.post-list {
+	list-style: none;
+}
 
-	&:hover {
-		background: #C35F14;
-		background: -moz-linear-gradient(top, #C35F14 0%, #95480f 100%);
-		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
-		background: -webkit-linear-gradient(top, #C35F14 0%,#95480f 100%);
-		background: -o-linear-gradient(top, #C35F14 0%,#95480f 100%);
-		background: -ms-linear-gradient(top, #C35F14 0%,#95480f 100%);
-		background: linear-gradient(top, #C35F14 0%,#95480f 100%);
-		border: 0;
-		box-shadow: none;
-	}
+img {
+	max-width: 100%;
 }
 
-a.website {
-  background: none;
+body {
+	font-family: var(--font-family-text);
 }
 
-// p.post-meta {
-// 	margin: 0;
-// }
+main ul,
+main li,
+main ol,
+main table,
+main dl,
+main p {
+	margin: 11px 0 16px;
+}
 
-section ul.post-list {
-	list-style: none;
-	li h2, li p {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
+p {
+	line-height: var(--line-height-base);
 }
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import lux from 'lux-design-system';
+
+const app = createApp({});
+app.use(lux)
+   .mount('#app');
diff --git a/assets/js/node-environment-for-vuex.js b/assets/js/node-environment-for-vuex.js
@@ -0,0 +1,7 @@
+// The vuex packaged with lux 5 assumes that it
+// is in a node environment, rather than a browser
+window.process = {
+    env: {
+        NODE_ENV: 'production'
+    }
+};
diff --git a/index.html b/index.html
@@ -3,15 +3,18 @@
 layout: default
 ---
 
-<h3>Princeton University Library IT</h3>
+<lux-heading level="h1" hidden="true">Recent posts</lux-heading>
 
 <ul class="post-list">
   {% for post in site.posts %}
     <li>
-      <p class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</p>
-      {{ post.excerpt }}
-      <p class="post-meta"><a class="post-link" href="{{ post.url | prepend: site.baseurl }}">More...</a></p>
-      <br/>
+      <lux-card size="full-width">
+        <lux-card-content>
+          <p class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</p>
+          {{ post.excerpt }}
+          <p class="post-meta"><lux-hyperlink href="{{ post.url | prepend: site.baseurl }}" variation="button solid">More about {{post.title}}...</lux-hyperlink></p>
+        </lux-card-content>
+      </lux-card>
     </li>
   {% endfor %}
 </ul>