feat: Added search switch in configuation

17px · Nov 3, 2023 · 227589b · 227589b
2 parents 1f70a1d + 12803e3
commit 227589b
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 65 deletions.
diff --git a/apps/dockyard/src/_config.yml b/apps/dockyard/src/_config.yml
@@ -43,3 +43,7 @@ weather:
   enable: true
   cityCode: yourWeatherCityCode
   appKey: yourWeatherAppKey
+
+# search use
+search:
+  enable: true
diff --git a/apps/dockyard/src/modules/homebar/index.less b/apps/dockyard/src/modules/homebar/index.less
@@ -2,7 +2,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
 
   >a {
     display: inline-flex;

diff --git a/apps/dockyard/src/modules/layout/index.ejs b/apps/dockyard/src/modules/layout/index.ejs
@@ -36,7 +36,9 @@
     <div>
       <%- partial('homebar') %>
       <!-- search -->
+      <% if(theme.search.enable){ %>
       <%- partial('search') %>
+      <% } %>
       <!-- navigation -->
       <%- partial('navigation') %>
       <!-- icp -->

diff --git a/apps/dockyard/src/modules/resume/index.ejs b/apps/dockyard/src/modules/resume/index.ejs
@@ -192,15 +192,8 @@
           <% page.portfolio.forEach(function(item) { %>
           <a href="<%= item.link %>" class="card">
             <div class="card-content">
-              <div class="card-image" style="background-image: url('<%= item.cover %>');">
-                <span>
-                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
-                    <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                      <circle cx="12" cy="12" r="2"></circle>
-                      <path d="M22 12c-2.667 4.667-6 7-10 7s-7.333-2.333-10-7c2.667-4.667 6-7 10-7s7.333 2.333 10 7"></path>
-                    </g>
-                  </svg>
-                </span>
+              <div class="card-image">
+                <h2><%- item.iconSVG %></h2>
               </div>
               <div class="card-info-wrapper">
                 <div class="card-info">

diff --git a/apps/dockyard/src/modules/resume/index.less b/apps/dockyard/src/modules/resume/index.less
@@ -336,42 +336,11 @@ main {
       .portfolio {
         .magic-cards {
           .card {
-            &:hover {
-              .card-image {
-                background-size: 120% 120%;
-
-                >span {
-
-                  opacity: .5;
-                  visibility: inherit;
-                }
-              }
-            }
-
             .card-image {
-              background-size: 100% 100%;
-              background-repeat: no-repeat;
-              background-position: center;
-              transition: background-size 0.3s ease-in-out;
-              border-radius: var(--radius);
-
-              >span {
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                width: 100%;
-                height: 100%;
-                padding: 8px;
-                border-radius: var(--radius);
-                visibility: hidden;
-                opacity: 0;
-                background: var(--color-bg);
-                color: var(--color-font);
-                transition: all .3s ease;
-
-                >svg {
-                  width: 24px;
-                  height: 24px;
+              h2 {
+                svg {
+                  width: 6rem;
+                  height: 6rem;
                 }
               }
             }

diff --git a/apps/dockyard/src/modules/search/index.ejs b/apps/dockyard/src/modules/search/index.ejs
@@ -16,6 +16,9 @@
     appId: "<%- config.algolia.appId %>",
     SearchOnlyAPIKey: "<%- config.algolia.SearchOnlyAPIKey %>"
   }
+  window.search = {
+    enable: "<%- theme.search.enable %>"
+  }
 </script>
 
 <!-- inject:js -->
diff --git a/apps/dockyard/src/modules/search/index.less b/apps/dockyard/src/modules/search/index.less
@@ -1,6 +1,7 @@
 .search-group {
   display: flex;
   align-items: center;
+  margin-top: 16px;
   padding-left: 6px;
   padding-right: 2px;
   height: 32px;

diff --git a/apps/dockyard/src/modules/search/index.ts b/apps/dockyard/src/modules/search/index.ts
@@ -3,20 +3,22 @@ import { SearchMask } from "./SearchMask";
 
 // 初始化搜索
 document.addEventListener("DOMContentLoaded", () => {
-  const searchMask = new SearchMask({
-    appId: window.algolia.appId,
-    SearchOnlyAPIKey: window.algolia.SearchOnlyAPIKey,
-  });
-  document.addEventListener("keydown", (e) => {
-    const ctrlOrCmdPressed = e.ctrlKey || e.metaKey;
-    if (ctrlOrCmdPressed && e.key === "k") {
-      e.preventDefault();
-      searchMask.show();
-    }
-  });
-  document
-    .querySelector(".search-group")
-    ?.addEventListener("click", function () {
-      searchMask.show();
+  if (window.search.enable === "true") {
+    const searchMask = new SearchMask({
+      appId: window.algolia.appId,
+      SearchOnlyAPIKey: window.algolia.SearchOnlyAPIKey,
     });
+    document.addEventListener("keydown", (e) => {
+      const ctrlOrCmdPressed = e.ctrlKey || e.metaKey;
+      if (ctrlOrCmdPressed && e.key === "k") {
+        e.preventDefault();
+        searchMask.show();
+      }
+    });
+    document
+      .querySelector(".search-group")
+      ?.addEventListener("click", function () {
+        searchMask.show();
+      });
+  }
 });
diff --git a/apps/dockyard/src/type.d.ts b/apps/dockyard/src/type.d.ts
@@ -8,4 +8,5 @@ interface Window {
   algolia: Record<string, string>;
   roadmapYears: Record<string, any>;
   initYear: string | number;
+  search: any;
 }
diff --git a/test/hexo-test/source/_posts/demo2.md b/test/hexo-test/source/_posts/demo2.md
@@ -0,0 +1,9 @@
+---
+title: Java Tutorial
+description: A very simple way to add structured data to a page.
+status: todo
+top: 0
+categories: 
+- Java
+keywords: "Markdown, 代码高亮 (Codes), 引用 (Blockquotes), 列表 (Lists), 图片 (Images), 表格 (Tables), Emoji, TeX(KaTeX), 流程图 (mermaid)"
+---
diff --git a/test/hexo-test/source/resume/index.md b/test/hexo-test/source/resume/index.md
@@ -1,7 +1,6 @@
 ---
 title: resume
 layout: resume
-avatar: /img/avatar.png
 name: Hi! Mozzie
 role: Full Stack
 email: [email protected]
@@ -50,19 +49,19 @@ projectExp:
 portfolio:
   - name: Web Page
     desc: A responsive modern website built using React
-    cover: /img/avatar.png
+    iconSVG: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M29.976 15.783l-2-9a1 1 0 0 0-.421-.615l-6-4A1 1 0 0 0 21 2H11a1 1 0 0 0-.555.168l-6 4a1 1 0 0 0-.421.615l-2 9a1.002 1.002 0 0 0 .018.504l3 10a1 1 0 0 0 .67.671l10 3h.006a.979.979 0 0 0 .564 0h.005l10-3a1 1 0 0 0 .671-.67l3-10a1.002 1.002 0 0 0 .018-.505zm-19.05.833l-3.91-7.819l7.282 2.648zM16 12.497L19.589 18H12.41zM19.382 20L16 26.764L12.618 20zm-1.68-8.555l7.281-2.648l-3.91 7.82zm.488-2.305l3.096-4.747l3.515 2.343zM16 8.836L12.846 4h6.308zm-2.19.304L7.2 6.736l3.514-2.343zm-4.844 8.03l-4.802-1.801l1.201-5.402zm5.104 10.207l-6.502-1.95l3.128-4.798zm7.233-6.748l3.129 4.797l-6.502 1.951zm5.332-10.662l1.2 5.402l-4.802 1.8zM4.537 17.645l4.595 1.722l-2.793 4.283zm21.124 6.005l-2.793-4.283l4.595-1.722z" fill="currentColor"></path></svg>
     link: https://www.google.com
   - name: Web Page
     desc: A responsive modern website built using React
-    cover: /img/avatar
+    iconSVG: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M30.415 16.513l-7.927-7.927a2.001 2.001 0 0 0-2.83 0L5.622 22.624a2.002 2.002 0 0 0 0 2.83L10.166 30h9.591l10.658-10.659a2.001 2.001 0 0 0 0-2.828zM18.929 28h-7.934l-3.96-3.962l6.312-6.312l7.928 7.928zm3.76-3.76l-7.928-7.928L21.074 10l7.927 7.927z" fill="currentColor"></path><path d="M11 12H8V2h3a3.003 3.003 0 0 1 3 3v4a3.003 3.003 0 0 1-3 3zm-1-2h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-1z" fill="currentColor"></path><path d="M4 2H0v2h4v2H1v2h3v2H0v2h4a2.003 2.003 0 0 0 2-2V4a2.002 2.002 0 0 0-2-2z" fill="currentColor"></path></svg>
     link: https://www.google.com
   - name: Web Page
     desc: A responsive modern website built using React
-    cover: /img/avatar
+    iconSVG: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M16 30a14 14 0 1 1 14-14a14.016 14.016 0 0 1-14 14zm0-26a12 12 0 1 0 12 12A12.014 12.014 0 0 0 16 4z" fill="currentColor"></path><path d="M15 7h2v7h-2z" fill="currentColor"></path><path d="M7 15h7v2H7z" fill="currentColor"></path><path d="M15 18h2v7h-2z" fill="currentColor"></path><path d="M18 15h7v2h-7z" fill="currentColor"></path></svg>
     link: https://www.google.com
   - name: Web Page
     desc: A responsive modern website built using React
-    cover: /img/avatar
+    iconSVG: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M9.5 8h10.6a5 5 0 1 0 0-2H9.5a5.5 5.5 0 0 0 0 11h11a3.5 3.5 0 0 1 0 7h-8.6a5 5 0 1 0 0 2h8.6a5.5 5.5 0 0 0 0-11h-11a3.5 3.5 0 0 1 0-7zM25 4a3 3 0 1 1-3 3a3 3 0 0 1 3-3zM7 28a3 3 0 1 1 3-3a3 3 0 0 1-3 3z" fill="currentColor"></path></svg>
     link: https://www.google.com
 
 ---