[ Add ] Gallery layout (PoC)

Author: TechQuery

.travis.yml

@@ -11,9 +11,13 @@ cache:
 
 install:
   - npm install
+  - cd ${FOLDER_SOURCE}
+  - rm $(ls -F | grep [^/]$)
+  - echo ${DOMAIN} > CNAME
+  - cd ..
 script:
   - npm run build
-  - cd ${FOLDER}
+  - cd ${FOLDER_TARGET}
   - git init
   - git config user.name ${UID}
   - git config user.email ${EMAIL}

_config.yml

@@ -122,6 +122,8 @@ pwa:
     routes:
       - pattern: "!!js/regexp /\\//"
         strategy: networkFirst
+      - pattern: "!!js/regexp /\\/css\\/common.css$/"
+        strategy: networkFirst
       - pattern: "!!js/regexp /.*\\.(css|js|jpg|jpeg|png|gif|webp)$/"
         strategy: cacheFirst
       - pattern: "!!js/regexp /google.*\\.com/"

source

@@ -0,0 +1,7 @@
+<main class="card article">
+  <div class="card-content content">
+    <h1><%= page.title %></h1>
+
+    <%- partial('./widget/gallery', site) %>
+  </div>
+</main>

themes/Icarus/layout/gallery.ejs

@@ -17,7 +17,7 @@
 <% posts.filter(
   post => has_category(post, 'Activity')
 ).slice(0, 5).forEach(post => { %>
-  <a class="table-row activity-item" href="<%= post.permalink %>">
+  <a class="table-row activity-item" href="<%= url_for( post.path ) %>">
     <div class="image is-64x64">
         <img class="thumbnail" src="<%= get_thumbnail(post) %>" alt="<%= post.title %>">
     </div>

themes/Icarus/layout/widget/activity_list.ejs

@@ -1,5 +1,12 @@
-<div class="justified-gallery">
-  <% images.forEach(photo => { %>
-    <img src="<%= encodeURI( photo ) %>">
-  <% }) %>
+<div class="justified-gallery"><%
+  posts.forEach(({photos, path, title}) => {
+
+    if (! photos[0]) return;
+
+    for (let file of photos) { %>
+      <a class="gallery-item" href="<%= url_for(path + file) %>">
+        <img src="<%= url_for(path + file) %>" alt="<%= title %>">
+      </a><%
+    }
+  }) %>
 </div>

themes/Icarus/layout/widget/gallery.ejs

@@ -27,7 +27,7 @@ if ( authors ) { %>
 if ( photos[0] ) { %>
   <div class="content">
     <h3>精彩瞬间</h3>
-    <%- partial('../widget/gallery', {images: photos}) %>
+    <%- partial('../widget/gallery', {posts: [post]}) %>
   </div><%
 }
 %>