Jiaocz · Jiaocz · Sep 29, 2022 · Sep 29, 2022 · Sep 29, 2022 · Sep 29, 2022
diff --git a/.env b/.env
@@ -0,0 +1 @@
+NODE_ENV=production
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+*.log
diff --git a/README.md b/README.md
@@ -4,11 +4,51 @@ Create a [Worker KV](https://dash.cloudflare.com/?to=/:account/workers/kv/namesp
 Bind this Worker KV in your Pages project in `Settings > Functions > KV namespaces bindings` with `Variable name` called `UrlShorten`,
 Done
 
+## Deploy
+### Deploy settings
+| Setting | Value |
+| -- | -- |
+| Build command | `npm run build` |
+| Build output directory | `/dist` |
+| Root directory | `/` |
+
+### Environment variables (recommended)
+You could use any node version later than 16.
+| Variable name | Value |
+| -- | -- |
+| NODE_VERSION | `16.17.1` |
+
+### Functions (necessary)
+I assume you have created a [KV namespace](https://dash.cloudflare.com/?to=/:account/workers/kv/namespaces) for this Pages project.
+| Variable name | KV namespace |
+| -- | -- |
+| UrlShorten | _the one you created_ |
+
+Other settings are not necessary.
+
 ## Add a path
 Add it to KV like:
 
 | Key | Value |
 | --- | --- |
-| path | real url |
-| /orangii | https://orangii.cn |
-| /more | https://example.org |
+| **path** | **real url** |
+| [`/blog`](https://cz.cyou/blog) | https://blog.orangii.cn |
+| `/more` | https://example.org |
+
+## Gravatar Mirror
+Check this out:
+
+![Gravatar](https://cz.cyou/avatar/02e96d02a7364a53f44168f4beb7067c)
+https://cz.cyou/avatar/02e96d02a7364a53f44168f4beb7067c
+
+## Github Static File Mirror
+Test with this README.md
+
+- Origin: [https://raw.githubusercontent.com/Jiaocz/CloudFlare-Pages-UrlShorten/feat/functions-dir/README.md](https://raw.githubusercontent.com/Jiaocz/CloudFlare-Pages-UrlShorten/feat/functions-dir/README.md)
+- Mirror: [https://cz.cyou/**gh/https://raw.githubusercontent.com/Jiaocz/CloudFlare-Pages-UrlShorten/feat/functions-dir/README.md**](https://cz.cyou/gh/https://raw.githubusercontent.com/Jiaocz/CloudFlare-Pages-UrlShorten/feat/functions-dir/README.md)
+
+Just add origin link to cz.cyou (or your deployed instance).
+`https://cz.cyou/gh/${origin_link}`
+
+## Credits
+Github Mirror function from [hunshcn/gh-proxy](https://github.com/hunshcn/gh-proxy)
diff --git a/_worker.js b/_worker.js
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@keyframes rainbow-flow {
+    from {
+        background-position: 0%;
+    }
+    to {
+        background-position: 200%;
+    }
+}
+
+.rainbow {
+    background-image: linear-gradient(90deg, rgb(240, 161, 168) 0%, rgb(240, 156, 90) 25%, rgb(131, 203, 172) 50%, rgb(240, 156, 90) 75%, rgb(240, 161, 168) 100%);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 200%;
+    animation: 2.5s linear 0s infinite normal none running rainbow-flow;;
+}
+
+code {
+    @apply bg-gray-300 rounded text-gray-800 px-1 py-0.5;
+}
+
+.title-2 {
+    @apply tracking-wider font-bold text-2xl mb-4;
+}
+
+.card {
+    @apply mx-auto rounded-xl shadow-md p-10 mt-6;
+    @apply sm:w-full lg:w-[640px];
+}
diff --git a/dist/_redirects b/dist/_redirects
@@ -0,0 +1 @@
+/credits https://orangii.cn 301
diff --git a/dist/favicon.ico b/dist/favicon.ico
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <title>多功能URL短链工具</title>
+    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-3-M/axios/0.26.0/axios.min.js" defer="defer"></script>
+</head>
+<body class="w-full bg-gray-100">
+    <header class="w-full mt-36 mb-10 text-center" id="site-header">
+        <h1 class="tracking-widest font-bold sm:text-5xl sm:tracking-wider lg:text-7xl lg:tracking-widest xl:text-8xl">
+            一个<span class="rainbow border-b-4 border-b-orange-200">多功能</span>的URL短链工具
+        </h1>
+        <p class="mt-6 tracking-wider sm:text-lg lg:text-xl xl:text-2xl">无跟踪 / 基于 Cloudflare Pages / 多种功能</p>
+    </header>
+    <section class="w-max max-w-full bg-red-100 mx-auto py-3 px-6 rounded-lg text-gray-700 my-16 font-thin">
+        <p class="tracking-wide sm:text-xs lg:text-lg"><strong class="font-bold">提示：</strong>如果你没有刻意访问本页面，那么你很可能是访问了错误的URL，来到了默认的首页。</p>
+    </section>
+    <main class="w-5/6 bg-white rounded-xl mt-28 mb-10 mx-auto p-10 shadow-lg">
+        <section id="gravatar-mirror" class="mb-16">
+            <h2 class="title-2">Gravatar 镜像</h2>
+            <p class="text-gray-600">
+                使用 <code id="this-site-gravatar-origin">本站域名/avatar</code> 替换 <code>https://www.gravatar.com/avatar/</code> 即可，其他参数均可保留。
+            </p>
+
+            <section class="card flex lg:flex-row sm:flex-col">
+                <img
+                    src="/avatar/02e96d02a7364a53f44168f4beb7067c?s=128"
+                    alt="Gravatar"
+                    class="rounded-full w-20 h-20 mr-6 flex-none sm:mb-4"
+                    id="gravatar-mirror-img"
+                />
+                <div class="flex-1 flex flex-col">
+                    <h3 class="text-lg font-bold mb-4">头像预览</h3>
+                    <p class="sm:w-full">
+                        <span>邮箱：</span>
+                        <input
+                            value="[email protected]"
+                            placeholder="请输入邮箱"
+                            type="email"
+                            class="sm:w-2/3 lg:w-[300px] border-b-2 focus:border-0 focus:ring-2 focus:rounded box-border ring-orange-400 outline-0 border-b-gray-300 active:ring-2 mb-4"
+                            id="avatar-email"
+                        />
+                    </p>
+                    <p class="text-gray-400 overflow-hidden whitespace-nowrap text-ellipsis sm:w-full lg:w-[350px]">
+                        镜像地址：
+                        <a
+                            id="gravatar-img-link"
+                            href="javascript:void(0);"
+                            target="_blank"
+                            class="border-b-2 border-dashed cursor-pointer hover:border-b-orange-200 hover:text-orange-200 transition-all"
+                        >
+                            请输入邮箱后查看
+                        </a>
+                        </span>
+                    </p>
+                </div>
+            </section>
+        </section>
+
+        <section id="gh-static-mirror" class="mb-16">
+            <h2 class="title-2">GitHub 静态文件镜像</h2>
+            <p class="text-gray-600">
+                将资源地址粘贴倒 <code id="this-site-gh-origin">本站域名/gh/</code> 后打开即可使用。
+            </p>
+
+            <section class="card">
+                <h3 class="text-xl font-bold mb-4">输入链接体验效果体验</h3>
+                <div class="flex flex-row gap-2 lg:mb-2 sm:mb-3">
+                    <input
+                        id="gh-mirror-input"
+                        class="box-border w-full border-b-2 border-b-gray-300 focus:border-0 focus:rounded focus:ring-2 ring-orange-400 outline-0"
+                        placeholder="https://github.com/Jiaocz/CloudFlare-Pages-UrlShorten/blob/main/README.md"
+                    />
+                    <button
+                        id="gh-mirror-btn"
+                        class="bg-orange-300 hover:bg-orange-500 transition-colors hover:shadow-inner active:ring-2 ring-orange-500 text-white rounded-full py-1.5 px-2.5"
+                    >
+                        →
+                    </button>
+                </div>
+                <p class="text-gray-400">
+                    * 支持 raw content, release 等，更多详情请查看 
+                    <a
+                        class="border-b-2 border-dashed"
+                        href="https://github.com/hunshcn/gh-proxy"
+                        rel="noopener nofollow noreferer"
+                        target="_blank"
+                    >
+                        hunshcn/gh-proxy
+                    </a>
+                </p> 
+            </section>
+        </section>
+
+        <section id="url-shortener">
+            <h2 class="title-2">短链服务</h2>
+            <p class="text-gray-600">
+                如果你知道一个缩短后的链接，那么直接打开就好。如果不知道的话可以点击下面的链接体验~
+            </p>
+
+            <section class="card bg-orange-50">
+                <span class="mx-auto text-center block text-4xl font-bold tracking-wide hover:scale-125 hover:-rotate-1 transition-transform rainbow">
+                    <a href="/credits" rel="noopener noreferrer">/credits</a>
+                </span>
+            </section>
+        </section>
+    </main>
+    <footer class="mb-10 text-gray-400 text-center sm:text-xs lg:text-base">
+        Copyright &copy; 2022 <a href="https://orangii.cn" rel="noopener noreferrer">Orangii</a> 
+        | <a href="https://github.com/Jiaocz/CloudFlare-Pages-UrlShorten" target="_blank" rel="noopener noreferrer">Jiaocz/CloudFlare-Pages-UrlShorten</a>
+    </footer>
+    <script>
+        // Gravatar 镜像
+        document.getElementById('this-site-gravatar-origin').innerText = `${window.location.origin}/avatar/`;
+        // 头像
+        document.getElementById('gravatar-img-link').innerText
+          = document.getElementById('gravatar-img-link').href
+          = `${window.location.origin}/avatar/02e96d02a7364a53f44168f4beb7067c?s=128`;
+        const emailChangedHandler = async () => {
+            const origin = window.location.origin;
+            const email = document.getElementById('avatar-email').value;
+            if (!email) return;
+            const img = document.getElementById('gravatar-mirror-img');
+            const url = document.getElementById('gravatar-img-link');
+            const hash = await axios.get(`/api/md5/${email}`);
+            img.src = `${origin}/avatar/${hash.data}?s=128`;
+            url.innerText = url.href = `${origin}/avatar/${hash.data}?s=128`;
+        }
+        document.getElementById('avatar-email').addEventListener('blur', emailChangedHandler);
+        // gh
+        document.getElementById('this-site-gh-origin').innerText = `${window.location.origin}/gh/`;
+        const ghGo = () => {
+            const input = document.getElementById('gh-mirror-input');
+            const url = input.value;
+            if (url) {
+                window.open(`${window.location.origin}/gh/${url}`);
+            } else {
+                alert('请输入链接');
+            }
+        }
+        document.getElementById('gh-mirror-btn').addEventListener('click', ghGo);
+    </script>
+</body>
+</html>