feat: add tools page template

languages/en.yml

@@ -15,6 +15,8 @@ links: Links
 link: Link
 photos: Photos
 photo: Photo
+tool: Tool
+tools: Tools
 search: Search...
 prev: Prev
 next: Next

languages/zh-CN.yml

@@ -15,6 +15,8 @@ links: 友链
 link: 友链
 photos: 相册
 photo: 照片
+tool: 工具
+tools: 工具
 search: 搜索...
 prev: 上一页
 next: 下一页

languages/zh-TW.yml

@@ -15,6 +15,8 @@ links: 友鏈
 link: 友鏈
 photos: 相簿
 photo: 照片
+tool: 工具
+tools: 工具
 search: 搜尋...
 prev: 上一頁
 next: 下一頁

layout/_partial/scripts.ejs

@@ -40,20 +40,25 @@
         <% } %>
     <% } %>
 
-    <!-- category-page -->
+    <!-- categories page -->
     <% if (is_current('/categories') || is_current('/category')) { %>
         <%- __js('js/page/category-page.js') %>
     <% } %>
 
-    <!-- links-page -->
+    <!-- links page -->
     <% if (is_current('/links') || is_current('/link')) { %>
         <%- __js('js/page/links-page.js') %>
     <% } %>
 
-    <!-- photos-page -->
+    <!-- photos page -->
     <% if (is_current('/photos') || is_current('/photo')) { %>
         <%- __js('js/page/photos-page.js') %>
     <% } %>
+
+    <!-- tools page -->
+    <% if (is_current('/tools') || is_current('/tool')) { %>
+        <%- __js('js/page/tools-page.js') %>
+    <% } %>
 </div>
 
 <!-- mermaid -->

layout/_template/page-template.ejs

@@ -5,6 +5,7 @@ const { links: links_data, photos: photos_data, tools: tools_data } = theme?.sou
 
 let current_page_data = null
 let current_page_template = null
+let is_tools_page = false
 
 if (page_title === 'links' || page_title === 'link') {
   current_page_data = links_data
@@ -19,12 +20,12 @@ if (page_title === 'photos' || page_title === 'photo') {
 if (page_title === 'tools' || page_title === 'tool') {
   current_page_data = tools_data
   current_page_template = 'tools-nav'
+  is_tools_page = true
 }
-
-const max_content = page_title === 'tools' ? 'max-content' : ''
 %>
 <div class="fade-in-down-animation">
-    <div class="page-template-container border-box">
+    <div class="page-template-container border-box <%= is_tools_page ? 'max-content' : '' %>">
+        <!-- page top -->
         <% if (page?.page_cover) { %>
             <div class="page-template-top border-box"
                  style="height: <%= page?.page_cover_height ? page?.page_cover_height + 'px' : '200px' %>"
@@ -35,6 +36,7 @@ const max_content = page_title === 'tools' ? 'max-content' : ''
             </div>
         <% } %>
 
+        <!-- page bottom -->
         <div class="page-template-bottom border-box">
             <!-- use page template -->
             <% if (use_page_template && current_page_data && current_page_template) { %>

layout/_template/tools-nav.ejs

@@ -1,3 +1,50 @@
 <div class="tools-nav-box border-box">
-    Tools Nav
+    <ul class="tools-nav-list">
+        <% for (let i = 0; i < theme.source_data.tools.length; i++) { %>
+            <% const tool = theme.source_data.tools[i] %>
+            <% const anchor_id = tool.category + i %>
+            <% if (tool?.category) { %>
+                <li class="tool-nav-category text-ellipsis border-box <%= i === 0 ? 'active' : '' %>"
+                    data-anchor="<%= anchor_id %>"
+                >
+                    <%= tool.category %>
+                </li>
+            <% } %>
+        <% } %>
+    </ul>
+    <ul class="tool-item-list border-box">
+        <% for (let i = 0; i < theme.source_data.tools.length; i++) { %>
+            <% const tool = theme.source_data.tools[i] %>
+            <% const anchor_id = tool.category + i %>
+            <% if (tool?.category) { %>
+                <li class="tool-category-name text-ellipsis border-box" id="<%= anchor_id %>">
+                    <span class="category-name text-ellipsis"><%= tool.category %></span>
+                    <i class="fa-solid fa-chevron-down fold"></i>
+                </li>
+            <% } else { %>
+                <li class="tool-item border-box">
+                    <a class="a-wrap border-box" href="<%= tool?.link %>">
+                        <div class="top border-box">
+                            <div class="logo border-box flex-center">
+                                <i class="icon fas fa-tools text-color-4"></i>
+                                <img src="<%- url_for(tool?.image) %>"
+                                     onerror="this.style.display = 'none'"
+                                >
+                            </div>
+                            <div class="name flex-start border-box text-ellipsis">
+                                <div class="border-box text-color-3 text-ellipsis">
+                                    <%= tool?.name %>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bottom flex-start border-box text-ellipsis">
+                            <div class="border-box text-color-4 text-ellipsis">
+                                <%= tool?.description %>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+            <% } %>
+        <% } %>
+    </ul>
 </div>

source/css/common/basic.styl

@@ -187,6 +187,26 @@ img {
 }
 
 
+// ======================================================================
+// flex start
+// ======================================================================
+.flex-start {
+  display flex
+  align-items center
+  justify-content flex-start
+}
+
+
+// ======================================================================
+// flex end
+// ======================================================================
+.flex-end {
+  display flex
+  align-items center
+  justify-content flex-end
+}
+
+
 // ======================================================================
 // border box
 // ======================================================================
@@ -206,6 +226,30 @@ img {
 }
 
 
+// ======================================================================
+// text color 2
+// ======================================================================
+.text-color-2 {
+  color var(--text-color-2)
+}
+
+
+// ======================================================================
+// text color 3
+// ======================================================================
+.text-color-3 {
+  color var(--text-color-3)
+}
+
+
+// ======================================================================
+// text color 4
+// ======================================================================
+.text-color-4 {
+  color var(--text-color-4)
+}
+
+
 // ======================================================================
 // clear float
 // ======================================================================