add 404 page

e1ohng · Aug 24, 2023 · 36167e5 · 36167e5
1 parent d252c0e
commit 36167e5
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 6 deletions.
diff --git a/functions/404.html b/functions/404.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <title>404 - Page Not Found</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            color: #333;
+            padding: 30px;
+            text-align: center;
+        }
+
+        h1 {
+            font-size: 36px;
+            margin-bottom: 20px;
+        }
+
+        p {
+            font-size: 18px;
+            margin-bottom: 30px;
+        }
+
+        a {
+            color: #007bff;
+            text-decoration: none;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>404 - Page Not Found</h1>
+    <p>Sorry, the page you are looking for does not exist.</p>
+    <p>Please check if you have entered the correct URL.</p>
+</body>
+
+</html>
diff --git a/functions/[id].js b/functions/[id].js
@@ -1,6 +1,7 @@
 /**
  * @param {string} slug
  */
+import page404 from './404.html'
 
 export async function onRequestGet(context) {
     const { request, env, params } = context;
@@ -27,7 +28,7 @@ export async function onRequestGet(context) {
     const Url = await env.DB.prepare(`SELECT url FROM links where slug = '${slug}'`).first()
 
     if (!Url) {
-        return new Response("404 Not Found", {
+        return new Response(page404, {
             status: 404,
             headers: {
                 "content-type": "text/html;charset=UTF-8",

diff --git a/functions/create.js b/functions/create.js
@@ -43,10 +43,13 @@ export async function onRequestPost(context) {
         return Response.json({ message: 'Illegal format: url.' })
     }
 
-    // 自定义slug长度检查 2<slug<10
-    if (slug && (slug.length < 2 || slug.length > 10)) {
-        return Response.json({ message: 'Illegal length: slug, (>= 2 && <= 10).' })
+    // 自定义slug长度检查 2<slug<10 是否不以文件后缀结尾
+    if (slug && (slug.length < 2 || slug.length > 10 || /.+\.[a-zA-Z]+$/.test(slug))) {
+        return Response.json({ message: 'Illegal length: slug, (>= 2 && <= 10), or not ending with a file extension.' });
     }
+
+
+
 
     try {
 
@@ -75,7 +78,7 @@ export async function onRequestPost(context) {
         const bodyUrl = new URL(url);
 
         if (bodyUrl.hostname === originurl.hostname) {
-            return Response.json({ message: 'You cannot shorten a link to the same domain.' },{
+            return Response.json({ message: 'You cannot shorten a link to the same domain.' }, {
                 status: 400
             })
         }

diff --git a/index.html b/index.html
@@ -210,7 +210,7 @@
       <details>
         <summary>自定义设置</summary>
         <div>
-          <input placeholder="Custom slug" x-model="slug" />
+          <input placeholder="slug" x-model="slug" />
           <small>Slug 默认是随机生成的短 id。</small>
         </div>
       </details>