Update

2022-04-30 21:12:41 +08:00 · 2022-04-30 21:12:41 +08:00 · 9bc4b7c43e
parent 1137c36987
commit 9bc4b7c43e
10 changed files with 612 additions and 519 deletions
--- a/index.html
+++ b/index.html
@ -1,35 +1,49 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-
  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
-    <meta name="renderer" content="webkit">
-    <meta name="force-rendering" content="webkit">
-    <meta name="backend-renderer" content="LitePage">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preconnect" href="https://i.186526.xyz">
-    <link rel="preconnect" href="https://storage.186526.xyz">
-    <link rel="icon" href="https://i.186526.xyz/avatar">
+    <head>
+      <meta charset="utf-8" />
+      <meta
+        name="viewport"
+        content="width=device-width,initial-scale=1,maximum-scale=1"
+      />
+      <meta name="renderer" content="webkit" />
+      <meta name="force-rendering" content="webkit" />
+      <meta name="backend-renderer" content="LitePage" />
+      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+      <link rel="preconnect" href="https://i.186526.xyz" />
+      <link rel="preconnect" href="https://storage.186526.xyz" />
+      <link rel="icon" href="https://i.186526.xyz/avatar" />
      <link
        href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@500&amp;family=Fira+Mono&amp;family=Ubuntu&amp;family=Roboto&amp;display=swap"
-      rel="stylesheet">
+        rel="stylesheet"
+      />
      <title>It's me, 186526!</title>
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&amp;display=swap" rel="stylesheet">
+      <link
+        href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
+        rel="stylesheet"
+      />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&amp;display=swap"
+        rel="stylesheet"
+      />
      <script type="module" src="./src/main.ts"></script>
-    <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-PVVC00CJ26"></script>
+      <script
+        async=""
+        src="https://www.googletagmanager.com/gtag/js?id=G-PVVC00CJ26"
+      ></script>

-    <meta name="description" content="It's me, 186526! | 186526 的自留地">
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="It's me, 186526! | 186526.xyz">
-    <meta name="og:description" content="It's me, 186526! | 186526 的自留地">
+      <meta name="description" content="It's me, 186526! | 186526 的自留地" />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="It's me, 186526! | 186526.xyz" />
+      <meta
+        name="og:description"
+        content="It's me, 186526! | 186526 的自留地"
+      />

-    <link rel="manifest" href="./manifest.json">
+      <link rel="manifest" href="./manifest.json" />

      <script>
        (function () {
@ -37,17 +51,26 @@
            var sys = {};
            var ua = navigator.userAgent.toLowerCase();
            var s;
-          (s = ua.match(/edge\/([\d.]+)/)) ? sys.edge = s[1] :
-            (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1] :
-              (s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
-                (s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
-                  (s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :
-                    (s = ua.match(/opera.([\d.]+)/)) ? sys.opera = s[1] :
-                      (s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;
+            (s = ua.match(/edge\/([\d.]+)/))
+              ? (sys.edge = s[1])
+              : (s = ua.match(/rv:([\d.]+)\) like gecko/))
+              ? (sys.ie = s[1])
+              : (s = ua.match(/msie ([\d.]+)/))
+              ? (sys.ie = s[1])
+              : (s = ua.match(/firefox\/([\d.]+)/))
+              ? (sys.firefox = s[1])
+              : (s = ua.match(/chrome\/([\d.]+)/))
+              ? (sys.chrome = s[1])
+              : (s = ua.match(/opera.([\d.]+)/))
+              ? (sys.opera = s[1])
+              : (s = ua.match(/version\/([\d.]+).*safari/))
+              ? (sys.safari = s[1])
+              : 0;

            if (sys.edge) return { broswer: "Edge", version: sys.edge };
            if (sys.ie) return { broswer: "IE", version: sys.ie };
-          if (sys.firefox) return { broswer: "Firefox", version: sys.firefox };
+            if (sys.firefox)
+              return { broswer: "Firefox", version: sys.firefox };
            if (sys.chrome) return { broswer: "Chrome", version: sys.chrome };
            if (sys.opera) return { broswer: "Opera", version: sys.opera };
            if (sys.safari) return { broswer: "Safari", version: sys.safari };
@ -58,17 +81,20 @@
          var broswerUA = getBroswer();

          if (broswerUA.broswer == "IE") {
-          document.body.innerHTML = '<div class="toast">去他妈的Internet Explorer，请使用现代浏览器访问该站点，例如<a href="http://aka.186526.xyz/Chrome">Chrome</a>、<a href="http://aka.186526.xyz/Firefox">Firefox</a>。</div>' + document.body.innerHTML;
+            document.body.innerHTML =
+              '<div class="toast">去他妈的Internet Explorer，请使用现代浏览器访问该站点，例如<a href="http://aka.186526.xyz/Chrome">Chrome</a>、<a href="http://aka.186526.xyz/Firefox">Firefox</a>。</div>' +
+              document.body.innerHTML;
          } else if (broswerUA.broswer == "chrome" && broswerUA.version <= 60) {
-          document.body.innerHTML = '<div class="toast">摆脱旧版Chrome，请使用新版<a href="http://aka.186526.xyz/Chrome">Chrome</a>访问该站点。</div>' + document.body.innerHTML;
+            document.body.innerHTML =
+              '<div class="toast">摆脱旧版Chrome，请使用新版<a href="http://aka.186526.xyz/Chrome">Chrome</a>访问该站点。</div>' +
+              document.body.innerHTML;
          }
-      })()
+        })();
      </script>
    </head>

-<body>
+    <body>
      <app>
-
        <background>
          <p>PID @ 78361641</p>
        </background>
@ -76,32 +102,44 @@
        <header>
          <img src="./avatar.png" alt="avatar" width="100px" />
          <div>
-        <h1><a href="https://186526.xyz" title="186526.xyz - It's me, 186526!">It's me, 186526!</a></h1>
-        <description>一个啥都不会的屑</description>
+            <h1>
+              <a href="https://186526.xyz" title="186526.xyz - It's me, 186526!"
+                >It's me, 186526!</a
+              >
+            </h1>
+            <p><description>一个啥都不会的屑</description></p>
          </div>
        </header>

        <contents>
          <group id="channel">
            <card id="blog">
-          <a href="https://blog.186526.xyz" alt="186526's Blog"><img
-              src='https://storage.186526.xyz/home-app/assets/hexo.svg' /></a>
+              <a href="https://blog.186526.xyz" alt="186526's Blog"
+                ><img src="https://storage.186526.xyz/home-app/assets/hexo.svg"
+              /></a>
            </card>
            <card id="status">
-          <a href="https://status.186526.eu.org/" alt="186526's Status"><img
-              src="https://storage.186526.xyz/home-app/assets/uptimerobot.ico" /></a>
+              <a href="https://status.186526.eu.org/" alt="186526's Status"
+                ><img
+                  src="https://storage.186526.xyz/home-app/assets/uptimerobot.ico"
+              /></a>
            </card>
            <card id="dn42">
-          <a href="https://net.186526.xyz" alt="186526 Network @ DN42"><img
-              src="https://storage.186526.xyz/home-app/assets/dn42.png" /></a>
+              <a href="https://net.186526.xyz" alt="186526 Network @ DN42"
+                ><img src="https://storage.186526.xyz/home-app/assets/dn42.png"
+              /></a>
            </card>
            <card id="github">
-          <a href="https://github.com/186526" alt="Github"><img
-              src="https://storage.186526.xyz/home-app/assets/github.svg" /></a>
+              <a href="https://github.com/186526" alt="Github"
+                ><img
+                  src="https://storage.186526.xyz/home-app/assets/github.svg"
+              /></a>
            </card>
            <card id="telegram">
-          <a href="https://t.me/real186526" alt="Telegram"><img
-              src="https://storage.186526.xyz/home-app/assets/telegram.svg" /></a>
+              <a href="https://t.me/real186526" alt="Telegram"
+                ><img
+                  src="https://storage.186526.xyz/home-app/assets/telegram.svg"
+              /></a>
            </card>
            <card id="email">
              <a href="mailto:admin@186526.xyz" alt="Email">
@ -111,58 +149,97 @@
          </group>
          <group id="friend">
            <card>
-          <a href="https://zikin.org/" alt="Zikin的独立博客 - 青春大概如你所说"><img
-              src="https://cdn.jsdelivr.net/gh/ZikinCDN/img@latest/2021/logo.jpg" /></a>
+              <a
+                href="https://zikin.org/"
+                alt="Zikin的独立博客 - 青春大概如你所说"
+                ><img
+                  src="https://cdn.jsdelivr.net/gh/ZikinCDN/img@latest/2021/logo.jpg"
+              /></a>
            </card>
            <card>
-          <a href="https://blog.skrshadow.cn/" alt="Skrshadow - 是红雨, 斯哈斯哈"><img
-              src="https://sdn.geekzu.org/avatar/e2027c37ef15b736cf3ee8b7803216c4" /></a>
+              <a
+                href="https://blog.skrshadow.cn/"
+                alt="Skrshadow - 是红雨, 斯哈斯哈"
+                ><img
+                  src="https://sdn.geekzu.org/avatar/e2027c37ef15b736cf3ee8b7803216c4"
+              /></a>
            </card>
            <card>
-          <a href="https://radium-bit.github.io/" alt="Radium-bit"><img
-              src="https://cdn.jsdelivr.net/gh/radium-bit/res@latest/avatar.webp" /></a>
+              <a href="https://radium-bit.github.io/" alt="Radium-bit"
+                ><img
+                  src="https://cdn.jsdelivr.net/gh/radium-bit/res@latest/avatar.webp"
+              /></a>
            </card>
            <card>
-          <a href="https://jimmyqin.com/" alt="JimmyQin's Blog"><img src="https://jimmyqin.com/images/avatar.png" /></a>
+              <a href="https://jimmyqin.com/" alt="JimmyQin's Blog"
+                ><img src="https://jimmyqin.com/images/avatar.png"
+              /></a>
            </card>
            <card>
-          <a href="https://laple.me" alt="Lapis Apple - 一个回收站，里面住着Lapis Apple。"><img
-              src="https://storage.186526.xyz/home-app/assets/lsp.avatar.png" /></a>
+              <a
+                href="https://laple.me"
+                alt="Lapis Apple - 一个回收站，里面住着Lapis Apple。"
+                ><img
+                  src="https://storage.186526.xyz/home-app/assets/lsp.avatar.png"
+              /></a>
            </card>
            <card>
-          <a href="https://blog.maxelbk.eu.org" alt="Maxel Black - Code & write what we want."><img
-              src="https://blog.maxelbk.eu.org/r/maxel.jpg" /></a>
+              <a
+                href="https://blog.maxelbk.eu.org"
+                alt="Maxel Black - Code & write what we want."
+                ><img src="https://blog.maxelbk.eu.org/r/maxel.jpg"
+              /></a>
            </card>
          </group>
          <group id="footer">
            <div>
              <a href="https://i.186526.xyz/pgp_keys.asc">
-            <img alt="Keybase PGP" src="https://blog.186526.xyz/shields.io/keybase/pgp/186526">
+                <img
+                  alt="Keybase PGP"
+                  src="https://blog.186526.xyz/shields.io/keybase/pgp/186526"
+                />
              </a>
-          <a href="https://icp.gov.moe/?keyword=20218600"><img alt="Moe ICP 20218600"
-              src="https://blog.186526.xyz/shields.io/badge/%E8%90%8CICP%E5%A4%87-20218600-blue" /></a>
+              <a href="https://icp.gov.moe/?keyword=20218600"
+                ><img
+                  alt="Moe ICP 20218600"
+                  src="https://blog.186526.xyz/shields.io/badge/%E8%90%8CICP%E5%A4%87-20218600-blue"
+              /></a>

-          <a href="https://status.186526.eu.org/"><img
-              src="https://blog.186526.xyz/shields.io/uptimerobot/ratio/m786767672-6913a353d708838f195d30d8" /></a>
+              <a href="https://status.186526.eu.org/"
+                ><img
+                  src="https://blog.186526.xyz/shields.io/uptimerobot/ratio/m786767672-6913a353d708838f195d30d8"
+              /></a>

              <a alt="CI Status" href="https://ci.186526.xyz/186526/home-app">
-            <img src="https://ci.186526.xyz/api/badges/186526/home-app/status.svg" />
+                <img
+                  src="https://ci.186526.xyz/api/badges/186526/home-app/status.svg"
+                />
              </a>
            </div>

-        <p>Running on <a href="https://net.186526.xyz">186526 Network</a>.</p>
-        <p>Copyright © 2021
-          186526.xyz All rights Reserved.</p>
+            <p>
+              Running on <a href="https://net.186526.xyz">186526 Network</a>.
+            </p>
+            <p>Copyright © 2020 - Now 186526.xyz All rights Reserved.</p>
          </group>
        </contents>
-
      </app>
-</body>
+    </body>

-<none id="description-list">
+    <none id="description-list">
      <p>一个啥都不会的屑</p>
-  <p>LSP, Verified by <img src="https://storage.186526.xyz/home-app/assets/lama.avatar.png" alt="lama3l9r's avatar" />
-    and <img src="https://storage.186526.xyz/home-app/assets/lsp.avatar.png" alt="lsp's avatar" /></p>
+      <p>
+        LSP, Verified by
+        <img
+          src="https://storage.186526.xyz/home-app/assets/lama.avatar.png"
+          alt="lama3l9r's avatar"
+        />
+        and
+        <img
+          src="https://storage.186526.xyz/home-app/assets/lsp.avatar.png"
+          alt="lsp's avatar"
+        />
+      </p>
      <p>Less code, more bug.</p>
      <p>Arknights Player</p>
      <p>btw, I use arch</p>
@ -172,10 +249,10 @@
      <p>DN42 贴(pi)贴(er)请求中...</p>
      <p>大陆北方网友</p>
      <p>Linux user ✗ KVM user ✓</p>
-  <p>世界一级<br>拖延症证书持有者</p>
+      <p>世界一级拖延症证书持有者</p>
      <p>想拥有强大的自制力</p>
+      <p>想做好自己</p>
      <p>wowaka, 晚安.</p>
-</none>
-</head>
-
+    </none>
+  </head>
 </html>
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,9 +1,9 @@
 module.exports = {
  plugins: [
    require("postcss-css-variables")(),
-        require('autoprefixer')(),
-        require('cssnano')({
-            preset: 'default',
+    require("autoprefixer")(),
+    require("cssnano")({
+      preset: "default",
    }),
-    ]
-}
+  ],
+};
--- a/public/sw.js
+++ b/public/sw.js
@ -1,16 +1,14 @@
-importScripts(
-    'workbox/workbox-sw.js',
-);
-self.addEventListener('install', (e) => {
+importScripts("workbox/workbox-sw.js");
+self.addEventListener("install", (e) => {
  self.skipWaiting();
 });

 if (workbox) {
  workbox.core.setCacheNameDetails({
-        prefix: 'home-app',
-        suffix: '0.0.3',
-        precache: 'precache',
-        runtime: 'runtime',
+    prefix: "home-app",
+    suffix: "0.0.3",
+    precache: "precache",
+    runtime: "runtime",
  });
  workbox.routing.registerRoute(
    /\/assets/,
@ -20,30 +18,30 @@ if (workbox) {
          maxAgeSeconds: 24 * 60 * 60,
        }),
      ],
-            cacheName: 'assets',
-        }),
+      cacheName: "assets",
+    })
  );
  workbox.routing.registerRoute(
-        '/manifest.json',
+    "/manifest.json",
    new workbox.strategies.StaleWhileRevalidate({
      plugins: [
        new workbox.expiration.Plugin({
          maxAgeSeconds: 7 * 24 * 60 * 60,
        }),
      ],
-            cacheName: 'assets',
-        }),
+      cacheName: "assets",
+    })
  );
  workbox.routing.registerRoute(
-        '/',
+    "/",
    new workbox.strategies.StaleWhileRevalidate({
      plugins: [
        new workbox.expiration.Plugin({
          maxAgeSeconds: 60 * 60 * 24,
        }),
      ],
-            cacheName: 'assets',
-        }),
+      cacheName: "assets",
+    })
  );
  workbox.routing.registerRoute(
    /\**/,
@ -53,8 +51,7 @@ if (workbox) {
          maxAgeSeconds: 60 * 60 * 24,
        }),
      ],
-            cacheName: 'assets',
-        }),
+      cacheName: "assets",
+    })
  );
 }
-
--- a/src/main.ts
+++ b/src/main.ts
@ -11,9 +11,10 @@ window.addEventListener("load", (_ev) => {
    shuffle: true,
    typeSpeed: 60,
    backDelay: 2000,
-		fadeOut: false,
+    fadeOut: true,
    loop: true,
-		showCursor: false,
+    showCursor: true,
+    smartBackspace: true,
  });

  document.querySelectorAll("[alt]").forEach((Elem) => {
--- a/src/styles/base.css
+++ b/src/styles/base.css
@ -5,7 +5,7 @@
  --font-size-main: 3.045rem;
  --font-size-description: 1.245rem;
  --lineheight-description: 1.845rem;
-	--box-color: #f2f2f2;
+  --box-color: rgba(242, 242, 242, 0.5);
  --working-color: #137333;
  --working-color-background: #e6f4ea;
  --error-color-background: #fce8e6;
@ -39,7 +39,7 @@ p {
 }

 body {
-	margin: 6rem 5vw;
+  margin: 20vh calc(10vw - 0.5rem);
  font-family: Roboto, Noto Sans SC, sans-serif;
  color: var(--font-color);
  background-color: var(--background-color);
@ -65,7 +65,7 @@ a {

@media screen and (max-width: 480px) {
  body {
-		margin: 6rem 2vw;
+    margin: 20vh calc(4vw - 0.5rem);
  }

  .toast {
--- a/src/styles/contents.css
+++ b/src/styles/contents.css
@ -1,18 +1,15 @@
 contents {
 	display: flex;
-    position: absolute;
-    top: 75vh;
+	position: relative;
+	top: 32.5vh;

 	right: 0vh;
 	left: 0vh;

-    margin: 0vh calc(5vw - 0.5rem);
-
 	justify-content: center;
 	align-items: flex-start;
 	flex-direction: column;
 	flex-wrap: nowrap;
-
 }

 contents > group {
@ -37,6 +34,8 @@ card {
 	align-content: center;
 	justify-content: center;
 	align-items: center;
+
+	backdrop-filter: blur(15px);
 }

 card > a > img {
@ -69,9 +68,14 @@ group#footer > * {
 	}
 }

+@media screen and (max-width: 1024px) {
+	contents {
+		top: 27.5vh;
+	}
+}

@media screen and (max-width: 480px) {
 	contents {
-		margin: 0 calc(2vw - 0.5rem);
+		top: 20vh;
 	}
 }
--- a/src/styles/header.css
+++ b/src/styles/header.css
@ -7,6 +7,11 @@ header > div {
 	align-content: stretch;
 }

+header p {
+	margin-block-start: 0em;
+	margin-block-end: 0em;
+}
+
 header > div h1 {
 	margin-block-start: 0em;
 	margin-block-end: 0em;
@ -54,10 +59,16 @@ header > img {
 		align-items: center;
 	}
 }
-@media screen and (max-width: 480px) {
+
+@media screen and (max-width: 1024px) {
 	header {
 		width: -moz-available;
 		width: -webkit-fill-available;
 		width: fill-available;
 	}
 }
+@media screen and (max-width: 480px) {
+	header {
+		min-height: 30vh;
+	}
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -1,20 +1,23 @@
-import child_process from "child_process"
-import legacy from '@vitejs/plugin-legacy';
+import child_process from "child_process";
+import legacy from "@vitejs/plugin-legacy";

 /**
 * @type {import('vite').UserConfig}
 */
 const config = {
-    base: './',
+  base: "./",
  define: {
-        '__APP_VERSION': child_process.execSync('git rev-parse --short HEAD').toString().replace("\n",""),
-        '__APP_BUILD_TIME': Math.floor(Date.now() / 1000),
+    __APP_VERSION: child_process
+      .execSync("git rev-parse --short HEAD")
+      .toString()
+      .replace("\n", ""),
+    __APP_BUILD_TIME: Math.floor(Date.now() / 1000),
  },
  plugins: [
    legacy({
-            targets: ['ie >= 11'],
-            additionalLegacyPolyfills: ['regenerator-runtime/runtime']
-        })
-    ]
-}
-export default config
+      targets: ["ie >= 11"],
+      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
+    }),
+  ],
+};
+export default config;