Update Projects Page

Data/Projects/ProjectsList.json

@@ -1,4 +1,5 @@
 [{
+    "id": "seechen.github.io",
     "project_name": "seechen_github_io",
     "project_labels": ["_spa_", "_spa_full_", "_websites_"],
     "project_repo": {
@@ -7,8 +8,9 @@
         "gitee": "none"
     },
     "project_license": "GNU GPL-3.0",
-    "project_Img": "/File/Image/Lens/bg.jpg"
+    "project_Img": "/File/Projects/default-bg.jpg"
 }, {
+    "id": "multi-level_traffic_routing",
     "project_name": "multi_level_traffic_routing",
     "project_labels": [
         "_lazy_loading_", 
@@ -25,5 +27,18 @@
         "gitee": "none"
     },
     "project_license": "none",
-    "project_Img": "/File/Image/Lens/bg.jpg"
+    "project_Img": "/File/Projects/default-bg.jpg"
+}, {
+    "id": "WanderSnap",
+    "project_name": "wander_snap",
+    "project_labels": [
+        "_comprehensive_"
+    ],
+    "project_repo": {
+        "github": "https://github.com/SeeChen/WanderSnap",
+        "gitlab": "none",
+        "gitee": "none"
+    },
+    "project_license": "Apache-2.0",
+    "project_Img": "/File/Projects/default-bg.jpg"
 }]

Data/Projects/seechen.github.io/general.json

@@ -0,0 +1,36 @@
+{
+    "Intro": "",
+    "Git": [{
+        "sites": "github",
+        "https": "https://github.com/SeeChen/seechen.github.io.git",
+        "ssh": "[email protected]:SeeChen/seechen.github.io.git",
+        "download": "https://github.com/SeeChen/seechen.github.io/archive/refs/heads/main.zip",
+        "target_repo": "https://github.com/SeeChen/seechen.github.io"
+    }],
+    "Features": "",
+    "Guide": "",
+    "Documentation": "",
+    "License": "GNU_GPL-3.0",
+    "Community": "",
+    "Faqs": "",
+    "Update": "",
+    "Author": [{
+        "name": "SEECHEN LEE",
+        "image": "https://avatars.githubusercontent.com/u/39422761?v=4",
+        "location": {
+            "zh": "马来西亚",
+            "en": "Malaysia"
+        },
+        "school": {
+            "zh": "北京理工大学",
+            "en": "Beijing Institute of Technology"
+        },
+        "company": {
+            "zh": "--",
+            "en": "--"
+        },
+        "websites": "https://seechen.github.io",
+        "github": "https://github.com/SeeChen",
+        "email": "[email protected]"
+    }]
+}

File/Projects/seechen.github.io/Intro-en.txt

@@ -0,0 +1,15 @@
+
+seechen.github.io
+
+This website is hosted on Github Pages (github.io) and developed using HTML5 + CSS3 + Native JavaScript.
+
+It is a Single Page Application (SPA), with all code available in the Github repository. All of the implementation has been independently completed by the author. While no open-source libraries were directly used, certain solutions were adapted from forum discussions and optimized for the website’s specific logic (some optimizations might still require refinement). Additionally, AI tools were occasionally leveraged to assist with code improvements and debugging.
+
+The repository for this project was initially created on August 25, 2021, and has recently undergone significant updates.
+
+This website serves as a personal challenge for the author to explore and understand modern JavaScript and CSS features. The current objective is to develop and maintain the entire website solely with native JavaScript and CSS, without relying on any frameworks or external libraries.
+
+If you have any suggestions or ideas for improvement, please feel free to visit my Github repository and submit an Issue. Your feedback and support would be greatly appreciated!
+
+
+    Last Modified by SeeChen @ 30-NOV-2024 22:00 UTC +08:00.

File/Projects/seechen.github.io/Intro-zh.txt

@@ -0,0 +1,17 @@
+
+seechen.github.io
+
+
+本网站托管于 Github Pages (github.io)，使用 HTML5 + CSS3 + 原生 JavaScript 进行开发。
+
+该网页是一个 单页应用（SPA），所有代码均存储在 Github 仓库中，主要由网站作者独立编写完成。网站开发过程中未直接使用任何开源代码，但部分功能通过查阅论坛解决方案实现，并结合实际需求对代码进行了适配和（负）优化 🌚。此外，作者在某些环节中借助 AI 工具辅助代码优化和调试。
+
+本项目仓库创建于 2021年8月25日，近期进行了大量更新。
+
+网站的初衷是为了让作者深入理解 JavaScript 和 CSS 的新特性，通过构建整个网页实现逻辑的过程不断挑战自我。因此，当前的目标是完全使用原生 JavaScript 和 CSS 开发整个网站，避免依赖任何框架或库。
+
+如果您对本网站有任何建议，或者有优化网站的改进方案，欢迎访问我的 Github 仓库并提交 Issue，我将非常感激您的支持与反馈！
+
+
+
+    最后编辑: SeeChen @ 2024 年 11 月 30 日, 22:00 UTC +0800.

JavaScript/General/tools.js

@@ -77,6 +77,42 @@ export const tools = {
         }
     },
 
+    getTxt: async (
+        url
+    ) => {
+        if (window.fetch) {
+            return fetch(url)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP Error! Status: ${response.status}`);
+                    }
+                    return response.text();
+                });
+        } else {
+            return new Promise(function(resolve, reject) {
+                var xhr = new XMLHttpRequest();
+                xhr.open("GET", url, true);
+
+                xhr.onreadystatechange = function() {
+                    if (xhr.readyState === 4) {
+                        if (xhr.status >= 200 && xhr.status < 300) {
+                            try {
+                                var data = xhr.responseText;
+                                resolve(data);
+                            } catch (e) {
+                                reject(e);
+                            }
+                        } else {
+                            reject(new Error(`HTTP Error! Status: ${xhr.status}`));
+                        }
+                    }
+                };
+
+                xhr.send();
+            });
+        }
+    },
+
     getTranslate: async () => {
 
         const translatePaths = {
@@ -128,7 +164,7 @@ export const tools = {
 
         window.globalValues.translateData = Object.fromEntries(translateEntries);
 
-        console.log(window.globalValues.translateData);
+        // console.log(window.globalValues.translateData);
     },
 
 }

JavaScript/Index/index.js

@@ -67,6 +67,8 @@ window.webpages = {
 
 window.myData = {
 
+    path: [],
+
     travel: {
         TravelList: {},
         LabelsMap: {},

JavaScript/Projects/projects.js

@@ -57,8 +57,11 @@ export const SeeChen_ProjectsPage = {
                 temp_ProjectBlock.children[2].children[1].children = [pro.project_license];
             }
 
+            temp_ProjectBlock.props["id"] = pro.id;
+            temp_ProjectBlock.props["data-id"] = `${pro.id}`;
+            temp_ProjectBlock.props["data-name"] = `${pro.project_name}`;
             temp_ProjectBlock.props["style"] = `
-                background: url(${pro.project_Img});
+                background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(${pro.project_Img});
                 background-size: cover;
                 background-position: center;
                 background-repeat: no-repeat;
@@ -68,6 +71,8 @@ export const SeeChen_ProjectsPage = {
         });
 
         window.globalValues.currentVDom = projectsPageLayout;
+        window.myData.projects.currentDetails = projectsPageLayout.children[3].children[0];
+
         document.querySelector("#box_contentArea").appendChild(
             window.vDom.Render(
                 projectsPageLayout
@@ -128,6 +133,8 @@ export const SeeChen_ProjectsPage = {
 
             projectDetailsDirExpand: SeeChen_ProjectsDetailsDirEvent.expandDir,
             projectDetailsDirClick: SeeChen_ProjectsDetailsDirEvent.clickDir,
+
+            projectGitCopy: SeeChen_ProjectsDetailsContentEvent.copyLink
         }
 
         Object.entries(projects_EvnetHandler).forEach(([event, handler]) => {
@@ -165,6 +172,8 @@ export const SeeChen_ProjectsPage = {
 
             projectDetailsDirExpand: SeeChen_ProjectsDetailsDirEvent.expandDir,
             projectDetailsDirClick: SeeChen_ProjectsDetailsDirEvent.clickDir,
+
+            projectGitCopy: SeeChen_ProjectsDetailsContentEvent.copyLink
         }
 
         Object.entries(projects_EvnetHandler).forEach(([event, handler]) => {
@@ -240,18 +249,145 @@ const SeeChen_ProjectsMouseEvent = {
             document.querySelector("#project_details").classList.remove("small-window");
         }
     },
-    mouseClick: (
+    mouseClick: async (
         event
     ) => {
 
         const { e } = event;
 
         if (e.target.classList.contains("project_border")) {
 
-            if ('ontouchstart' in window) {
-                document.documentElement.requestFullscreen();
+            // await window.router.route(`/projects/${e.target.dataset.id}/`, false);
+
+            var oldProjectDetails = window.myTools.deepCopy(window.myData.projects.currentDetails);
+
+            window.myData.projects.currentDetails.children[0].children[1].lang = "projectName";
+            window.myData.projects.currentDetails.children[0].children[1].children = [e.target.dataset.name];
+
+            const Template_Intro = await window.myTools.getJson("/Layout/Webpages/Projects/Intro.json");
+            const Template_Git = await window.myTools.getJson("/Layout/Webpages/Projects/Git.json");
+            const Template_License = await window.myTools.getJson("/Layout/Webpages/Projects/License.json");
+            const Template_Author = await window.myTools.getJson("/Layout/Webpages/Projects/Author.json");
+
+            var targetGeneralContent = await window.myTools.getJson(`/Data/Projects/${e.target.id}/general.json`);
+
+            // Intro
+            var temp_Intro = window.myTools.deepCopy(Template_Intro);
+            var content_Intro = await window.myTools.getTxt(`/File/Projects/${e.target.id}/Intro-${window.globalValues.language}.txt`);
+            temp_Intro.children[1].children = [content_Intro];
+
+            window.myData.projects.currentDetails.children[1].children[1].children[0].children = [temp_Intro];
+
+            // Git
+            window.myData.projects.currentDetails.children[1].children[1].children[1].children = [];
+            if (targetGeneralContent["Git"].length > 0) {
+
+                window.myData.projects.currentDetails.children[1].children[0].children[0].children[1].props["style"] = "display: initial;";
+
+                targetGeneralContent["Git"].forEach(git =>  {
+
+                    var temp_git = window.myTools.deepCopy(Template_Git);
+
+                    temp_git.children[0].children[0].props["href"] = git.target_repo;
+                    temp_git.children[0].children[0].children[0].props["src"] = `/File/Icon/ico_${git.sites}.png`;
+
+                    temp_git.children[1].children[0].children[1].children = [git.https];
+                    temp_git.children[1].children[0].children[2].props["data-link"] = [git.https];
+
+                    temp_git.children[1].children[1].children[1].children = [git.ssh];
+                    temp_git.children[1].children[1].children[2].props["data-link"] = [git.ssh];
+
+                    temp_git.children[2].children[0].props["href"] = git.download;
+
+                    temp_git.children[3].children[0].props["href"] = git.target_repo;
+                    temp_git.children[3].children[0].children = [`_view_on_${git.sites}_`];
+
+
+                    window.myData.projects.currentDetails.children[1].children[1].children[1].children.push(temp_git);
+                });
+
+            } else {
+                window.myData.projects.currentDetails.children[1].children[0].children[0].children[1].props["style"] = "display: none;";
+            }
+
+            // License
+            if (targetGeneralContent["License"] !== "--") {
+
+                const licenseValues = {
+                    "GNU_GPL-3.0": {
+                        "name": "GNU GPL-3.0",
+                        "link": "https://www.gnu.org/licenses/",
+                        "oriTxt": "https://www.gnu.org/licenses/gpl-3.0.txt"
+                    }
+                }
+
+                window.myData.projects.currentDetails.children[1].children[0].children[0].children[5].props["style"] = "display: initial;";
+
+                var temp_License = window.myTools.deepCopy(Template_License[0]);
+                var temp_License_Original = window.myTools.deepCopy(Template_License[2]);
+
+                temp_License.children[1].children[1].props["href"] = licenseValues[targetGeneralContent["License"]]["link"];
+                temp_License.children[1].children[1].children = [licenseValues[targetGeneralContent["License"]]["name"]];
+                temp_License.children[2].children[1].props["href"] = licenseValues[targetGeneralContent["License"]]["link"];
+                temp_License.children[2].children[1].children = [licenseValues[targetGeneralContent["License"]]["link"]];
+
+                window.myData.projects.currentDetails.children[1].children[1].children[5].children.push(temp_License);
+                if (window.globalValues.language !== "en") {
+                    var temp_License_Translate = window.myTools.deepCopy(Template_License[1]);
+
+                    temp_License_Translate.children[1].children[1].props["href"] = licenseValues[targetGeneralContent["License"]]["oriTxt"];
+
+                    var License_Translate = await window.myTools.getTxt(`/File/Projects/License/${targetGeneralContent["License"]}-${window.globalValues.language}.txt`);
+                    temp_License_Translate.children[2].children = [License_Translate];
+
+                    window.myData.projects.currentDetails.children[1].children[1].children[5].children.push(temp_License_Translate);
+                }
+
+                var License_Original = await window.myTools.getTxt(`/File/Projects/License/${targetGeneralContent["License"]}-en.txt`);
+                temp_License_Original.children[1].children = [License_Original];
+
+                window.myData.projects.currentDetails.children[1].children[1].children[5].children.push(temp_License_Original);
+            } else {
+                window.myData.projects.currentDetails.children[1].children[0].children[0].children[5].props["style"] = "display: none;";
             }
 
+            // Collaborator
+            window.myData.projects.currentDetails.children[1].children[1].children[9].children = [];
+            targetGeneralContent["Author"].forEach(author => {
+
+                var temp_author = window.myTools.deepCopy(Template_Author);
+
+                temp_author.children[0].children[0].props["src"] = author.image;
+                temp_author.children[0].children[1].children = [author.name];
+
+                temp_author.children[1].children[0].children = [author["location"][window.globalValues.language]];
+                temp_author.children[1].children[1].children = [author["school"][window.globalValues.language]];
+                temp_author.children[1].children[2].children = [author["company"][window.globalValues.language]];
+                temp_author.children[1].children[3].children = [author["websites"]];
+                temp_author.children[1].children[4].children = [author["github"]];
+                temp_author.children[1].children[5].children = [author["email"]];
+
+                temp_author.children[1].children[3].props["href"] = author["websites"];
+                temp_author.children[1].children[4].props["href"] = author["github"];
+                temp_author.children[1].children[5].props["href"] = `mailto:${author["email"]}`;
+
+                window.myData.projects.currentDetails.children[1].children[1].children[9].children.push(temp_author);
+            });
+
+            await window.vDom.Patch(
+                document.querySelector("div:has(> #project_details)"),
+                window.vDom.Diff(
+                    oldProjectDetails,
+                    window.myData.projects.currentDetails
+                )
+            );
+
+            document.querySelectorAll(".project_git_copy").forEach(obj => {
+                obj.addEventListener("click", (e) => {
+                    window.eventBus.emit("projectGitCopy", { e, obj });
+                });
+            });
+
             document.querySelector("#project_details").classList.add("ready-to-full");
             setTimeout(() => {
                 document.querySelector("#project_details").classList.add("full-window");
@@ -262,10 +398,11 @@ const SeeChen_ProjectsMouseEvent = {
 
 const SeeChen_ProjectsDetailsMouseEvent = {
 
-    closeClick: (
+    closeClick: async (
         event
     ) => {
 
+        // await window.router.route(`/projects/`, false);
         document.querySelector("#project_details").classList.remove("full-window");
         setTimeout(() => {
             document.querySelector("#project_details").classList.remove("ready-to-full");
@@ -300,3 +437,15 @@ const SeeChen_ProjectsDetailsDirEvent = {
         }
     }
 }
+
+const SeeChen_ProjectsDetailsContentEvent = {
+
+    copyLink: async (
+        event
+    ) => {
+        const { e, obj } = event;
+
+        await navigator.clipboard.writeText(obj.dataset.link);
+        alert("Link Copied! 链接已复制！");
+    }
+}