add animation for pages shaking

fwqaaq · Jul 25, 2023 · 3c343f0 · 3c343f0
1 parent 6010c5a
commit 3c343f0
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 30 deletions.
diff --git a/deno.jsonc b/deno.jsonc
@@ -1,7 +1,8 @@
 {
   "tasks": {
     "dev": "deno run --watch --allow-net --allow-write --allow-read  main.js",
-    "build": "deno run --allow-net --allow-write --allow-read  main.js"
+    "build": "deno run --allow-net --allow-write --allow-read  main.js",
+    "preview": "deno run --allow-all util/http.js"
   },
   "fmt": {
     // "useTabs": true,

diff --git a/index.html b/index.html
@@ -8,9 +8,9 @@
     <meta name="keywords" content="HTML, CSS, JavaScript, TypeScript, Vue, Git...">
     <meta name="theme-color" content="rgba(25, 24, 48)">
     <title> fwqaaq Blog </title>
-    <link rel="stylesheet" href="/./public/css/index.css">
+    <link rel="stylesheet" href="/public/css/index.css">
     <link rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon">
-    <script src="/public/JavaScript/index.js"></script>
+    <script type="modules" src="/public/JavaScript/index.js"></script>
 </head>
 
 <body>

diff --git a/main.js b/main.js
@@ -139,6 +139,7 @@ async function Home() {
       time: convertToUSA(date),
       tags: aTags,
     })
+
     if ((index + 1) % 8 === 0 || index + 1 === metasLength) {
       const cur = index + 1 === metasLength
         ? lastPage
@@ -153,6 +154,9 @@ async function Home() {
         content + process,
       )
 
+      // Reset the content
+      content = ""
+
       // Generate the home dir
       if (cur !== 1) await ensureDir(new URL(`${cur}/`, homeDest))
       const url = cur === 1

diff --git a/public/JavaScript/index.js b/public/JavaScript/index.js
@@ -1,11 +1,23 @@
 
+const regex = /([\s\S]*\<\/head\>)[\s\S]*?([\s\S]*)/
 
 document.addEventListener('DOMContentLoaded', () => {
 
   if (location.pathname.includes('/home') || location.pathname === '/') {
-    console.log(location.pathname)
     return
   }
+
+  document.body.insertAdjacentHTML("beforeend", `<header>
+        <a href="https://github.com/fwqaaq" target="_blank">
+            <img src="https://avatars.githubusercontent.com/u/82551626?v=4" loading="lazy" alt="me" srcset="">
+        </a>
+        <nav class="header-nav">
+            <a href="/">Home</a>
+            <a class="router" href="">About</a>
+            <a class="router" href="/./archive/index.html">Archive</a>
+            <a class="router" href="/./tags/index.html">Tag</a>
+        </nav>
+    </header>`)
   document.body.addEventListener('click', (e) => {
     if (e.target.matches('a') && e.target.href.includes('/./')) {
       useRoute(e)
@@ -17,30 +29,26 @@ document.addEventListener('DOMContentLoaded', () => {
   renderPage()
 })
 
-const renderPage = async () => {
+const renderPage = async (e) => {
+  // hash change, do nothing
+  if (e && e.type === "popstate" && location.hash) return
+
+  document.body.classList.add('loading')
+
   const path = location.pathname
   const res = await fetch(path)
   const html = await res.text()
 
-  const regex = /([\s\S]*\<\/head\>)[\s\S]*?([\s\S]*)/
   const [, , body] = html.match(regex)
 
-  document.body.innerHTML = `
-      <header>
-        <a href="https://github.com/fwqaaq" target="_blank">
-            <img src="https://avatars.githubusercontent.com/u/82551626?v=4" loading="lazy" alt="me" srcset="">
-        </a>
-        <nav class="header-nav">
-            <a href="/">Home</a>
-            <a class="router" href="">About</a>
-            <a class="router" href="/./archive/index.html">Archive</a>
-            <a class="router" href="/./tags/index.html">Tag</a>
-        </nav>
-    </header>
-    <main>
-        ${body}
-    </main>
-    <footer>© 2020 ~ 2023 ❤️ fwqaaq</footer>`
+  const fragment = document.createDocumentFragment()
+  const main = document.createElement('main')
+  const footer = document.createElement('footer')
+  footer.innerHTML = `© 2020 ~ 2023 ❤️ fwqaaq`
+  main.innerHTML = body
+  fragment.append(mian, footer)
+
+  setTimeout(() => { document.body.classList.remove('loading') }, 200)
 }
 
 /**

diff --git a/public/css/index.css b/public/css/index.css
@@ -4,17 +4,50 @@ body {
   margin: 0%;
   font-size: 18px;
   scroll-behavior: smooth;
-  background-color: rgb(220, 216, 208);
+  background-color: var(--theme-bg);
 }
 
 body {
-  height: 100%;
+  position: relative;
+}
+
+.loading::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: var(--theme-bg);
+  z-index: 1;
+}
+
+.loading::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50vh;
+  left: 50%;
+  width: 60px;
+  height: 60px;
+  margin: -30px 0 0 -30px;
+  border-radius: 50%;
+  border-inline-start: 6px solid rgb(7, 88, 88);
+  animation: spin 1s linear infinite;
+  z-index: 2;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+    opacity: 0;
+  }
 }
 
 :root {
   --header-height: 4rem;
-  --theme-bg: rgba(25, 24, 48);
-  --theme-color: var(--theme-bg);
+  --theme-bg: rgb(220, 216, 208);
+  --theme-color: rgb(25, 24, 48);
   --header-hover: rgba(72, 69, 138, 0.9);
   --header-color: rgb(240, 238, 233);
   --color-a-link: rgba(0, 93, 73, 0.7);
@@ -39,7 +72,7 @@ header {
   height: var(--header-height);
   justify-content: space-between;
   align-items: center;
-  background-color: var(--theme-bg);
+  background-color: var(--theme-color);
 
   & a {
     width: calc(var(--header-height) - 1rem);
@@ -114,9 +147,9 @@ main .pages {
 
 footer {
   position: fixed;
-  width: 100vw;
+  width: 100%;
   bottom: 0%;
   text-align: center;
-  background-color: var(--theme-bg);
+  background-color: var(--theme-color);
   color: var(--header-color);
 }
diff --git a/util/http.js b/util/http.js
@@ -8,12 +8,17 @@ const port = 3000
  */
 const handler = async (request) => {
   let reqUrl = new URL(request.url).pathname
+  let ext = reqUrl.split(".").pop()
+  if (ext === "css") ext = "text/css"
+  else if (ext === "js") ext = "text/javascript"
+  else if (ext === "html" || ext === '/') ext = "text/html"
+  else ext = '*'
   if (reqUrl.endsWith("/")) reqUrl += "index.html"
 
   const file = await Deno.readFile(`./dist${reqUrl}`)
 
   return new Response(new TextDecoder().decode(file), {
-    headers: { "content-type": "*" },
+    headers: { "content-type": ext },
   })
 }