Refactor css styles & Faster Font loading

Kathund · Feb 7, 2024 · 67525d5 · 67525d5
1 parent 65be6ba
commit 67525d5
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 30 deletions.
diff --git a/src/endpoints/file.ts b/src/endpoints/file.ts
@@ -9,13 +9,13 @@ export default (app: Application) => {
   app.get('/:name', async (req: Request, res: Response) => {
     try {
       const fileName = req.params.name;
+      if (fileName === 'favicon.ico') return;
       apiMessage(req.path, `User is trying to get a file - ${fileName}`);
       const fileNamePattern = /^[a-zA-Z0-9_-]+\.[a-zA-Z0-9]+$/;
       if (!fileNamePattern.test(fileName)) {
         return res.status(400).json({ error: 'Invalid file name' });
       }
       const dir = resolve(dirname(''), 'src/files');
-      errorMessage(dir);
       if (!existsSync(dir)) {
         mkdirSync(dir, { recursive: true });
       }
@@ -31,13 +31,14 @@ export default (app: Application) => {
           name: fileName.split('.')[0],
           timestamp: {
             raw: stats.birthtimeMs,
-            date: getDate(stats.birthtimeMs),
-            time: getTime(stats.birthtimeMs),
+            unix: stats.birthtimeMs,
             utc: getTime(stats.birthtimeMs, 'UTC'),
           },
           size: getFileSize(stats.size),
         },
         img: `${url}/raw/${fileName}`,
+        getTime: getTime,
+        getDate: getDate,
       });
     } catch (err) {
       errorMessage(err as string);

diff --git a/src/endpoints/raw.ts b/src/endpoints/raw.ts
@@ -7,13 +7,13 @@ export default (app: Application) => {
   app.get('/raw/:name', async (req: Request, res: Response) => {
     try {
       const fileName = req.params.name;
+      if (fileName === 'favicon.ico') return;
       apiMessage(req.path, `User is trying to get a file - ${fileName}`);
       const fileNamePattern = /^[a-zA-Z0-9_-]+\.[a-zA-Z0-9]+$/;
       if (!fileNamePattern.test(fileName)) {
         return res.status(400).json({ error: 'Invalid file name' });
       }
       const dir = resolve(dirname(''), 'src/files');
-      errorMessage(dir);
       if (!existsSync(dir)) {
         mkdirSync(dir, { recursive: true });
       }

diff --git a/src/functions.ts b/src/functions.ts
@@ -40,9 +40,9 @@ export const getFileSize = (size: number) => {
   };
 };
 
-export const getDate = (timeStamp: number) => {
+export const getDate = (timeStamp: number, timeZone?: string) => {
   const date = new Date(timeStamp);
-  return date.toDateString();
+  return date.toLocaleDateString('en-US', { timeZone: timeZone });
 };
 
 export const getTime = (timeStamp: number, timeZone?: string) => {

diff --git a/src/public/css/fonts/Inter.woff2 b/src/public/css/fonts/Inter.woff2
diff --git a/src/public/css/index.css b/src/public/css/index.css
@@ -1,4 +1,11 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/Inter.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 
 *,
 *::before,
@@ -11,30 +18,29 @@
 body {
   font-family: 'Inter', sans-serif;
   background-color: #dcdcdc;
+  justify-content: center;
+  align-items: center;
   color: #343434;
-  font-size: 24;
   height: 100vh;
-  width: 100vw;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  width: 100vw;
 }
 
 img,
 video {
+  filter: drop-shadow(#00000080 16px 16px 18px);
   border-radius: 16px 16px 0 0;
   max-width: 75vw;
   height: auto;
-  justify-self: center;
-  align-self: center;
+
 }
 
 .text {
+  filter: drop-shadow(#00000080 16px 16px 18px);
+  border-radius: 0 0 16px 16px;
+  background-color: #bfb9b9;
   text-align: center;
-  margin: 0 auto;
   padding: 20px;
-  background-color: #bfb9b9;
-  border-radius: 0 0 16px 16px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -49,27 +55,25 @@ video {
 }
 
 .tooltip {
-  position: relative;
   display: inline-block;
+  position: relative;
 }
 
-/* Tooltip text */
 .tooltip .tooltiptext {
-  visibility: hidden;
   background-color: black;
-  color: #fff;
+  visibility: hidden;
   text-align: center;
-  padding: 5px 0;
-  border-radius: 6px;
-
-  width: 160px;
-  bottom: 100%;
-  left: 50%;
   margin-left: -60px;
+  border-radius: 6px;
   position: absolute;
+  padding: 5px 0;
+  color: #fff;
+  bottom: 100%;
+  width: 160px;
   z-index: 1;
+  left: 50%;
 }
 
 .tooltip:hover .tooltiptext {
   visibility: visible;
-}
+}
diff --git a/src/public/files/favicon.ico b/src/public/files/favicon.ico
diff --git a/src/views/pages/index.ejs b/src/views/pages/index.ejs
@@ -4,7 +4,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Image - <%= data.name %></title>
+  <title>File - <%= data.name %></title>
+  <link rel="icon" type="image/x-icon" href="files/favicon.ico">
   <link rel="stylesheet" href="css/index.css">
   <meta name="robots" content="noindex">
   <meta name="twitter:card" content="summary_large_image" />
@@ -27,10 +28,10 @@
           <div class="text">
             <h1>Name - <%= data.name %></h1>
             <div class="tooltip">
-              <h1>Time - <%= data.timestamp.time %></h1>
+              <h1>Time - <%= getTime(data.timestamp.unix, Intl.DateTimeFormat().resolvedOptions().timeZone) %></h1>
               <span class="tooltiptext">UTC - <%= data.timestamp.utc %></span>
             </div>
-            <h1>Date - <%= data.timestamp.date %></h1>
+            <h1>Date - <%= getDate(data.timestamp.unix, Intl.DateTimeFormat().resolvedOptions().timeZone) %></h1>
             <h1>Size - <%= data.size.dynamic %></h1>
           </div>
   </main>