feat: add layout and use sn pro font

axelburks · Apr 26, 2024 · 7e87a48 · 7e87a48
1 parent 97339cf
commit 7e87a48
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 49 deletions.
diff --git a/lib/views/error.tsx b/lib/views/error.tsx
@@ -1,30 +1,8 @@
 import type { FC } from 'hono/jsx';
 
+import { Layout } from '@/views/layout';
 import { gitHash, gitDate } from '@/utils/git-hash';
 
-const Layout: FC = (props) => (
-    <html>
-        <head>
-            <title>Welcome to RSSHub!</title>
-            <script src="https://cdn.tailwindcss.com"></script>
-            <style>
-                {`
-                details::-webkit-scrollbar {
-                    width: 0.25rem;
-                }
-                details::-webkit-scrollbar-thumb {
-                    border-radius: 0.125rem;
-                    background-color: #e4e4e7;
-                }
-                details::-webkit-scrollbar-thumb:hover {
-                    background-color: #a1a1aa;
-                }`}
-            </style>
-        </head>
-        <body className="antialiased text-zinc-700">{props.children}</body>
-    </html>
-);
-
 const Index: FC<{
     requestPath: string;
     message: string;

diff --git a/lib/views/index.tsx b/lib/views/index.tsx
@@ -1,34 +1,12 @@
 import type { FC } from 'hono/jsx';
 
+import { Layout } from '@/views/layout';
 import { config } from '@/config';
 import { gitHash, gitDate } from '@/utils/git-hash';
 import { getDebugInfo } from '@/utils/debug-info';
 
 const startTime = Date.now();
 
-const Layout: FC = (props) => (
-    <html>
-        <head>
-            <title>Welcome to RSSHub!</title>
-            <script src="https://cdn.tailwindcss.com"></script>
-            <style>
-                {`
-                details::-webkit-scrollbar {
-                    width: 0.25rem;
-                }
-                details::-webkit-scrollbar-thumb {
-                    border-radius: 0.125rem;
-                    background-color: #e4e4e7;
-                }
-                details::-webkit-scrollbar-thumb:hover {
-                    background-color: #a1a1aa;
-                }`}
-            </style>
-        </head>
-        <body className="antialiased text-zinc-700">{props.children}</body>
-    </html>
-);
-
 const Index: FC<{ debugQuery: string | undefined }> = ({ debugQuery }) => {
     const debug = getDebugInfo();
 
@@ -166,13 +144,13 @@ const Index: FC<{ debugQuery: string | undefined }> = ({ debugQuery }) => {
                 <p className="text-xl font-medium text-zinc-600">Everything is RSSible</p>
                 <div className="font-bold space-x-4 text-sm">
                     <a target="_blank" href="https://docs.rsshub.app">
-                        <button className="text-white bg-[#F5712C] hover:bg-[#DD4A15] py-2 px-4 rounded-full">View Docs</button>
+                        <button className="text-white bg-[#F5712C] hover:bg-[#DD4A15] py-2 px-4 rounded-full transition-colors">View Docs</button>
                     </a>
                     <a target="_blank" href="https://github.com/DIYgod/RSSHub">
-                        <button className="bg-zinc-200 hover:bg-zinc-300 py-2 px-4 rounded-full">View on GitHub</button>
+                        <button className="bg-zinc-200 hover:bg-zinc-300 py-2 px-4 rounded-full transition-colors">View on GitHub</button>
                     </a>
                     <a target="_blank" href="https://docs.rsshub.app/sponsor" className="text-[#F5712C]">
-                        <button className="text-white bg-red-500 hover:bg-red-600 py-2 px-4 rounded-full">❤️ Sponsor</button>
+                        <button className="text-white bg-red-500 hover:bg-red-600 py-2 px-4 rounded-full transition-colors">❤️ Sponsor</button>
                     </a>
                 </div>
                 {info.showDebug ? (

diff --git a/lib/views/layout.tsx b/lib/views/layout.tsx
@@ -0,0 +1,50 @@
+import type { FC } from 'hono/jsx';
+
+export const Layout: FC = (props) => (
+    <html>
+        <head>
+            <title>Welcome to RSSHub!</title>
+            <script src="https://cdn.tailwindcss.com"></script>
+            <style>
+                {`
+                details::-webkit-scrollbar {
+                    width: 0.25rem;
+                }
+                details::-webkit-scrollbar-thumb {
+                    border-radius: 0.125rem;
+                    background-color: #e4e4e7;
+                }
+                details::-webkit-scrollbar-thumb:hover {
+                    background-color: #a1a1aa;
+                }
+
+                @font-face {
+                    font-family: SN Pro;
+                    font-style: normal;
+                    font-display: swap;
+                    font-weight: 400;
+                    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-400-normal.woff2) format(woff2);
+                }
+                @font-face {
+                    font-family: SN Pro;
+                    font-style: normal;
+                    font-display: swap;
+                    font-weight: 500;
+                    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-500-normal.woff2) format(woff2);
+                }
+                @font-face {
+                    font-family: SN Pro;
+                    font-style: normal;
+                    font-display: swap;
+                    font-weight: 700;
+                    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-700-normal.woff2) format(woff2);
+                }
+                body {
+                    font-family: SN Pro, sans-serif;
+                }
+                `}
+            </style>
+        </head>
+        <body className="antialiased text-zinc-700">{props.children}</body>
+    </html>
+);