新增 PD 函式 CALC、標籤屬性 :* 與快速設置 style，修正 LENGTH 函式回傳問題。

pardnchiu · Aug 3, 2024 · 8b3e0a8 · 8b3e0a8
1 parent cb26b22
commit 8b3e0a8
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -31,8 +31,8 @@ Improving code maintainability and readability while reducing development comple
     Reduces manual DOM manipulation, allowing you to focus more on the core logic of your application.
 
 - ### 輕量級 / Lightweight:
-    全功能的實現僅用了`34KB`，確保你能在網站中輕鬆高效地使用。<br>
-    Full functionality is achieved with only `34KB`, ensuring efficient and effortless use on your website.
+    全功能的實現僅用了`35KB`，確保你能在網站中輕鬆高效地使用。<br>
+    Full functionality is achieved with only `35KB`, ensuring efficient and effortless use on your website.
 
 ## 範例 / Example
 
@@ -354,13 +354,13 @@ Improving code maintainability and readability while reducing development comple
                     backgroundColor: "steelblue",
                     color: "#fff"
                 }
-            })._click(function(){
-                alert("test")
             }, [
                 // or "<span>test</span> button"
                 "span"._("test"),
                 " button"
-            ]),
+            ])._click(function(){
+                alert("test")
+            }),
             "span.svg:._({ path: "https://xxxxxx" }),
             // 無 Lazy Loading => "img"._("https://xxxxxx"),
             "img"._({ lazyload: "https://xxxxxx" }),

diff --git a/dist/PDRenderKit.js b/dist/PDRenderKit.js
diff --git a/index.html b/index.html
@@ -7,67 +7,74 @@
 <html lang="zh-Hans-TW">
 
     <head>
+        <!-- 基本設定 -->
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <!--  -->
-        <title>PDRenderKit</title>
-        <meta name="description" content="A lightweight front-end framework designed to separate the front-end user interface and data logic. 2023 Pardn Chiu 邱敬幃">
+        <meta name="robots" content="index, follow">
+        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
         <meta name="theme-color" content="#000000">
-        <!--  -->
-        <meta property="og:title" content=">Websitemplate 網站模板 25">
-        <meta property="og:description" content="">
-        <meta property="og:image" content="">
+
+        <!-- 網頁標題與描述 -->
+        <title>PDRenderKit 輕量化前端框架</title>
+        <meta name="description" content="(JavaScript Lib) PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic. 邱敬幃 Pardn Chiu.">
+
+        <!-- Open Graph 資訊 -->
+        <meta property="og:title" content=">PDRenderKit 輕量化前端框架">
+        <meta property="og:description" content="(JavaScript Lib) PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic. 邱敬幃 Pardn Chiu.">
+        <meta property="og:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDRenderKit">
         <meta property="og:url" content="https://pardnchiu.github.io/PDRenderKit">
         <meta property="og:type" content="website">
-        <!--  -->
-        <meta property="twitter:title" content=">Websitemplate 網站模板 25">
-        <meta property="twitter:description" content="A lightweight front-end framework designed to separate the front-end user interface and data logic. 2023 Pardn Chiu 邱敬幃">
-        <meta property="twitter:image" content="">
+        <meta property="og:site_name" content="PDRenderKit 輕量化前端框架">
+
+        <!-- Twitter 卡片資訊 -->
+        <meta property="twitter:title" content=">PDRenderKit 輕量化前端框架">
+        <meta property="twitter:description" content="(JavaScript Lib) PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic. 邱敬幃 Pardn Chiu.">
+        <meta property="twitter:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDRenderKit">
+        <meta property="twitter:image:alt" content="PDRenderKit 輕量化前端框架">
         <meta property="twitter:url" content="https://pardnchiu.github.io/PDRenderKit">
-        <meta property="twitter:site" content="">
-        <meta property="twitter:card" content="">
-        <!--  -->
+        <meta property="twitter:site" content="@pardnchiu">
+        <meta property="twitter:card" content="summary_large_image">
+
+        <!-- Mobile App 設定 -->
         <meta name="mobile-web-app-capable" content="no">
         <meta name="apple-mobile-web-app-capable" content="no">
         <meta name="apple-mobile-web-app-status-bar-style" content="default">
-        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
-        <meta name="theme-color" content="#000">
-        <!--  -->
+
+        <!-- 網站圖標 -->
         <link rel="apple-touch-icon" href="">
         <link rel="apple-touch-icon-precomposed" href="">
         <link rel="icon" href="" type="image/x-icon">
-        <!--  -->
+
+        <!-- 驗證標籤 -->
         <meta name="google-site-verification" content="YQQ2f6AchR8dcb55Az2BYd_mw4TrP0J1RApD-v2v65Y" />
-        <!--  -->
+
+        <!-- 樣式與字型 -->
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" as="style">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
-        <!--  -->
-        <link rel="stylesheet" href="https://pardnchiu.github.io/css/index.css">
-        <!--  -->
+
+        <!-- 資源預載: https://cdn.jsdelivr.net -->
         <link rel="preconnect" href="https://cdn.jsdelivr.net">
         <link rel="preload" href="https://cdn.jsdelivr.net/gh/pardnchiu/[email protected]/dist/PDMarkdownKit.js" as="script">
         <script src="./dist/PDRenderKit.js" copyright="Pardn Ltd"></script>
 
+        <!-- 資源預載: https://pardnchiu.github.io -->
+        <link rel="preconnect" href="https://pardnchiu.github.io">
+        <link rel="preload" href="https://pardnchiu.github.io/css/index.css" as="style">
+        <link rel="stylesheet" href="https://pardnchiu.github.io/css/index.css">
+
+        <!-- 本地資源 -->
         <script type="module" src="./static/js/index.js"></script>
     </head>
 
     <body id="app" class="md">
-        <!-- <span class="loader"></span> -->
-        <nav id="nav" style="max-width: 1024px;">
-            <a href="https://github.com/pardnchiu" target="_blank">
-                <!-- <i class="fa-brands fa-github"></i> -->
-                <!-- svg 插入範例 -->
-                <style>
-                    nav>a>svg {
-                        width: 1.5rem;
-                        height: 1.5rem;
-                    }
-                </style>
-                <span class="svg" src="static/image/github-brands-solid.svg"></span>
+        <nav id="nav" style="max-width: 1024px;" :test="test {{ CALC(num * 2) }}">
+            <a class="dom-temp" href="https://github.com/pardnchiu" target="_blank">
+                <i class="fa-brands fa-github"></i>
             </a>
-            <img class="head lazyload" data-src="https://pardn.io/image/head-s.jpg" alt="邱敬幃 Pardn Chiu" onclick="window.open('https://linkedin.com/in/pardnchiu')">
-            <a href="mailto:[email protected]">
+            <img class="head lazyload dom-temp" data-src="https://pardn.io/image/head-s.jpg" alt="邱敬幃 Pardn Chiu" onclick="window.open('https://linkedin.com/in/pardnchiu')">
+            <a class="dom-temp" href="mailto:[email protected]">
                 <i class="fa-regular fa-envelope"></i>
             </a>
         </nav>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "pdrenderkit",
-    "version": "1.0.2",
+    "version": "1.2.0",
     "description": "PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic.",
     "main": "dist/PDRenderKit.js",
     "scripts": {
@@ -29,6 +29,5 @@
         "url": "https://github.com/pardnchiu/PDRenderKit/issues",
         "email": "[email protected]"
     },
-    "homepage": "https://github.com/pardnchiu/PDRenderKit#readme",
-    "devDependencies": {}
+    "homepage": "https://github.com/pardnchiu/PDRenderKit#readme"
 }
diff --git a/src/*.ts b/src/*.ts
diff --git a/src/PDRenderKit.js b/src/PDRenderKit.js
diff --git a/src/dom.ts b/src/dom.ts