website

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

7c7a9edc — pyrossh

improve index

Files changed (13) hide show

components/icons/ContactIcon.tsx +11 -0
components/icons/ProjectsIcon.tsx +11 -0
components/icons/TreeIcon.tsx +11 -0
deno.json +1 -0
design/logo.curve +0 -0
fresh.config.ts +20 -0
fresh.gen.ts +2 -0
routes/_app.tsx +15 -16
routes/_middleware.ts +13 -0
routes/index.tsx +17 -23
static/favicon.ico +0 -0
static/favicon.png +0 -0
tailwind.config.ts +2 -0

components/icons/ContactIcon.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+export default function ContactIcon({ size = "32" }) {
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size}>
+      <path
+        fill="currentColor"
+        d="M19 19H5V5h14m0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-2.5 13.25c0-1.5-3-2.25-4.5-2.25s-4.5.75-4.5 2.25V17h9M12 12.25A2.25 2.25 0 0 0 14.25 10 2.25 2.25 0 0 0 12 7.75 2.25 2.25 0 0 0 9.75 10 2.25 2.25 0 0 0 12 12.25z"
+      >
+      </path>
+    </svg>
+  );
+}

components/icons/ProjectsIcon.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+export default function ProjectsIcon({ size = "32" }) {
+  return (
+    <svg viewBox="0 0 1024 1024" width={size} height={size}>
+      <path
+        fill="currentColor"
+        d="M280 752h80c4.4 0 8-3.6 8-8V280c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8zm192-280h80c4.4 0 8-3.6 8-8V280c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8v184c0 4.4 3.6 8 8 8zm192 72h80c4.4 0 8-3.6 8-8V280c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8zm216-432H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
+      >
+      </path>
+    </svg>
+  );
+}

components/icons/TreeIcon.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+export default function TreeIcon({ size = "32" }) {
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size}>
+      <path
+        fill="currentColor"
+        d="M20.781 17.375 18.081 14H19a.999.999 0 0 0 .819-1.573l-7-10a1.001 1.001 0 0 0-1.393-.246.968.968 0 0 0-.221.231c-.025.015-7.025 10.015-7.025 10.015A1 1 0 0 0 5 14h.919l-2.7 3.375c-.24.301-.287.712-.121 1.059.167.345.518.566.902.566h7v3a1 1 0 1 0 2 0v-3h7a1.001 1.001 0 0 0 .781-1.625zM13 17v-5a1 1 0 1 0-2 0v5H6.081l2.7-3.375c.24-.301.287-.712.121-1.059A1.004 1.004 0 0 0 8 12H6.92L12 4.744 17.08 12H16a1.001 1.001 0 0 0-.78 1.625L17.92 17H13z"
+      >
+      </path>
+    </svg>
+  );
+}

deno.json CHANGED Viewed

@@ -20,6 +20,7 @@
     "tailwindcss": "npm:tailwindcss@3.3.5",
     "tailwindcss/": "npm:/tailwindcss@3.3.5/",
     "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
+    "tailwind-children": "npm:tailwind-children@0.5.0",
     "$std/": "https://deno.land/std@0.193.0/"
   },
   "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" }

design/logo.curve ADDED Viewed

Binary file

fresh.config.ts CHANGED Viewed

@@ -4,3 +4,23 @@ import tailwind from "$fresh/plugins/tailwind.ts";
 export default defineConfig({
   plugins: [tailwind()],
 });
+// import { defineConfig } from 'astro/config';
+// import mdx from '@astrojs/mdx';
+// import sitemap from '@astrojs/sitemap';
+// import prefetch from "@astrojs/prefetch";
+// // https://astro.build/config
+// export default defineConfig({
+//   site: 'https://pyros.sh/',
+//   markdown: {
+//     shikiConfig: {
+//       theme: 'dark-plus'
+//     }
+//   },
+//   integrations: [
+//     mdx(),
+//     prefetch(),
+//     sitemap()
+//   ],
+// });

fresh.gen.ts CHANGED Viewed

@@ -4,6 +4,7 @@
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
+import * as $_middleware from "./routes/_middleware.ts";
 import * as $api_joke from "./routes/api/joke.ts";
 import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $index from "./routes/index.tsx";
@@ -15,6 +16,7 @@ const manifest = {
   routes: {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
+    "./routes/_middleware.ts": $_middleware,
     "./routes/api/joke.ts": $api_joke,
     "./routes/greet/[name].tsx": $greet_name_,
     "./routes/index.tsx": $index,

routes/_app.tsx CHANGED Viewed

@@ -1,27 +1,26 @@
-import { AppProps } from "$fresh/server.ts";
+import { PageProps } from "$fresh/server.ts";
+import { asset } from "$fresh/runtime.ts";
 import Footer from "../components/Footer.tsx";
 import Header from "../components/Header.tsx";
-// const SEO = () => (
-//   <title>fres</title>
-//   <link rel="canonical" href={Astro.url} />
-//     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-//     <link rel="icon" type="image/png" href="/favicon.png" />
-//     <meta name="author" content="pyrossh" />
-//     <meta name="keywords" content="pyros.sh,pyrossh,astro,website" />
-//     <meta property="og:site_name" content="pyros.sh" />
-//     <meta property="og:type" content="website" />
-//     <meta property="og:url" content={Astro.url} />
-//     <meta property="og:site_name" content="pyros.sh" />
-// )
-export default function App({ Component }: AppProps) {
+export default function App({ Component, url }: PageProps) {
   return (
     <html lang="en" class="h-full w-full">
       <head>
+        <title>pyros.sh</title>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <meta name="author" content="pyrossh" />
+        <meta name="keywords" content="pyros.sh,pyrossh,astro,website" />
+        <meta property="og:site_name" content="pyros.sh" />
+        <meta property="og:type" content="website" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="canonical" href={url.toString()} />
+        <meta property="og:url" content={url.toString()} />
+        <meta property="og:site_name" content="pyros.sh" />
+        <link rel="icon" type="image/png" href={asset("/favicon.png")} />
-        <link rel="stylesheet" href="/styles.css" />
+        <link rel="stylesheet" href={asset("/styles.css")} />
       </head>
       <body class="leading-8 flex flex-1 flex-col font-normal text-lg sm:leading-7 m-0 bg-black-lighter">
         <Header />

routes/_middleware.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { FreshContext } from "$fresh/server.ts";
+import { createReporter } from "https://deno.land/x/g_a/mod.ts";
+const report = createReporter({
+  id: "UA-31541587-1",
+});
+export async function handler(req: Request, ctx: FreshContext) {
+  const start = performance.now();
+  const resp = await ctx.next();
+  report(req, { remoteAddr: ctx.remoteAddr }, resp, start, null);
+  return resp;
+}

routes/index.tsx CHANGED Viewed

@@ -1,20 +1,15 @@
 import { useSignal } from "@preact/signals";
 import { Handlers } from "$fresh/server.ts";
 import Slide from "../components/Slide.tsx";
+import ProjectsIcon from "../components/icons/ProjectsIcon.tsx";
-import Counter from "../islands/Counter.tsx";
+import TreeIcon from "../components/icons/TreeIcon.tsx";
+import ContactIcon from "../components/icons/ContactIcon.tsx";
 import { asset, Head } from "$fresh/runtime.ts";
 export const handler: Handlers = {
   async GET(req, ctx) {
     return await ctx.render();
   },
-  async POST(req, ctx) {
-    const form = await req.formData();
-    return new Response(null, {
-      status: 303,
-      headers: { location: "/" },
-    });
-  },
 };
 export default function Home() {
@@ -53,8 +48,8 @@ export default function Home() {
           </p>
         </div>
         <div>
-          <div class="flex items-center mt-4 mb-4">
+          <div class="flex items-center mt-8 mb-4 [&>svg]:mr-2">
-            {/* <Icon name="ant-design:project-outlined" /> */}
+            <ProjectsIcon size="36" />
             <h2 class="my-0 text-3xl font-bold">Projects</h2>
           </div>
           <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
@@ -122,8 +117,8 @@ export default function Home() {
               </p>
             </Slide>
             <section class="flex flex-col flex-1">
-              <div class="text-3xl font-bold">
+              <div class="flex text-3xl font-bold child-svg:mr-2">
-                {/* <Icon name="typcn:tree" /> */}
+                <TreeIcon size="36" />
                 Interests
               </div>
               <div class="ml-1 mt-6 mb-4">
@@ -145,30 +140,29 @@ export default function Home() {
               </ul>
             </section>
             <section class="flex flex-col flex-1">
-              <div class="text-3xl font-bold">
+              <div class="flex text-3xl font-bold child-svg:mr-2">
-                {/* <Icon name="mdi:contact-outline" /> */}
+                <ContactIcon size="36" />
                 Contact
               </div>
               <div class="ml-1 mt-6 mb-4">
                 You can contact me through any of these methods
               </div>
-              <ul class="grid gap-1 grid-cols-1 ml-4 [&>li]:list-disc [&>li]:px-0 [&>li]:py-1 [&>a]:ml-4">
+              <div class="child:flex child:mb-3 child:ml-2 heir-a:ml-4 heir-a:text-blue">
-                <li>
+                <div>
                   Email:
                   <a href="mailto:pyros2097@gmail.com">pyros2097@gmail.com</a>
-                </li>
+                </div>
-                <li>
+                <div>
                   Github:
                   <a href="https://github.com/pyrossh">pyrossh</a>
-                </li>
+                </div>
-                <li>
+                <div>
                   LinkedIn:
                   <a href="https://www.linkedin.com/in/peter-john-in">
-                    {" "}
                     pyrossh
                   </a>
-                </li>
+                </div>
-              </ul>
+              </div>
             </section>
           </div>
         </div>

static/favicon.ico DELETED Viewed

Binary file

static/favicon.png ADDED Viewed

Binary file

tailwind.config.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import { type Config } from "tailwindcss";
+import children from "tailwind-children";
 export default {
+  plugins: [children],
   content: ["{routes,islands,components}/**/*.{ts,tsx}"],
   theme: {
     fontFamily: {

~repos /website

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.