website

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

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

94a7e7c3 — pyrossh

cleanup

Files changed (7) hide show

cv.png +0 -0
islands/LemonDrop.tsx +2 -105
routes/index.tsx +8 -20
routes/posts.tsx +83 -0
static/posts/eyecandy-golang-error-reporting.md +91 -0
static/posts/gopibot-to-the-rescue.md +139 -0
static/styles.css +97 -0

cv.png ADDED Viewed

Binary file

islands/LemonDrop.tsx CHANGED Viewed

@@ -1,81 +1,14 @@
 import { useEffect, useRef } from "preact/hooks";
 import { useSignal } from "@preact/signals";
-export interface Spring {
-  p: number;
-  v: number;
-}
-export class WaveTank {
-  springs = [] as Spring[];
-  waveLength = 100;
-  k = 0.02;
-  damping = 0.02;
-  spread = 0.02;
-  constructor() {
-    for (let i = 0; i < this.waveLength; i++) {
-      this.springs[i] = {
-        p: 0,
-        v: 0,
-      };
-    }
-  }
-  update(springs: Spring[]) {
-    for (const i of springs) {
-      const a = -this.k * i.p - this.damping * i.v;
-      i.p += i.v;
-      i.v += a;
-    }
-    const leftDeltas = [];
-    const rightDeltas = [];
-    for (let t = 0; t < 8; t++) {
-      for (let i = 0; i < springs.length; i++) {
-        const prev = springs[(i - 1 + springs.length) % springs.length];
-        const next = springs[(i + 1) % springs.length];
-        leftDeltas[i] = this.spread * (springs[i].p - prev.p);
-        rightDeltas[i] = this.spread * (springs[i].p - next.p);
-      }
-      for (let i = 0; i < springs.length; i++) {
-        const prev = springs[(i - 1 + springs.length) % springs.length];
-        const next = springs[(i + 1) % springs.length];
-        prev.v += leftDeltas[i];
-        next.v += rightDeltas[i];
-        prev.p += leftDeltas[i];
-        next.p += rightDeltas[i];
-      }
-    }
-  }
-}
 function easeInCirc(x: number) {
   return 1 - Math.sqrt(1 - Math.pow(x, 2));
 }
-const waveTank = new WaveTank();
 function LemonDrop() {
-  const SVG_WIDTH = 100;
   const counter = useSignal(0);
   const dropy = useSignal(60);
-  const width = useSignal(SVG_WIDTH);
-  const widthRef = useRef(width.value);
-  const springs = useSignal(waveTank.springs);
   const requestIdRef = useRef<number>();
-  const grid = SVG_WIDTH / waveTank.waveLength;
-  const points = [
-    [0, 100],
-    [0, 0],
-    ...springs.value.map((x, i) => [i * grid, x.p]),
-    [width.value, 0],
-    [width.value, 100],
-  ];
-  const springsPath = `${points.map((x) => x.join(",")).join(" ")}`;
   const juice = `M18 ${63 + counter.value} C15 ${63 + counter.value} 16 ${
     63 + counter.value
   } 12 61L9 56C2 33 62 -3 80 12C103 27 44 56 29 58C27 58 25 59 24 61C20 ${
@@ -93,49 +26,13 @@ function LemonDrop() {
       counter.value = easeInCirc(1 - saw) * amp * 0.1;
       dropy.value = 70 + Math.pow(saw - 0.6, 2) * 10000;
     }
-  }
-  function update(timestamp: number) {
-    updateJuice(timestamp);
-    waveTank.update(waveTank.springs);
-    springs.value = [...waveTank.springs];
-    const offset = 500;
-    const saw = (timestamp + offset) / 2000 -
-      Math.floor((timestamp + offset) / 2000);
-    if (saw < 0.01) {
-      drop();
-    }
-    requestIdRef.current = globalThis.requestAnimationFrame(update);
+    requestIdRef.current = globalThis.requestAnimationFrame(updateJuice);
-  }
-  function resize() {
-    width.value = document.body.clientWidth;
-  }
-  function drop() {
-    const dropPosition = Math.round(
-      ((widthRef.current / 2 - 30) / widthRef.current) * 100,
-    );
-    waveTank.springs[dropPosition].p = -60;
   }
   useEffect(() => {
-    widthRef.current = width.value;
-  }, [width.value]);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    if (mediaQuery.matches) {
-      return;
-    }
-    requestIdRef.current = requestAnimationFrame(update);
+    requestIdRef.current = requestAnimationFrame(updateJuice);
-    globalThis.addEventListener("resize", resize);
-    resize();
     return () => {
-      globalThis.removeEventListener("resize", resize);
       if (requestIdRef.current !== undefined) {
         cancelAnimationFrame(requestIdRef.current);
       }

routes/index.tsx CHANGED Viewed

@@ -103,22 +103,10 @@ export default function Home() {
                 <HardwareIcon size="32" />
                 <h2>Hardware</h2>
               </div>
-              <ul class="grid gap-2 grid-cols-2 text-center mt-4 ml-2 heir-a:text-blue-900 child:bg-gray-200 child:p-1">
+              <ul class="grid gap-2 grid-cols-1 text-center mt-4 heir-a:text-blue-900 child:bg-gray-200 child:p-1">
-                <li>
-                  <strong>Laptop:</strong> M2 Macbook Air
-                </li>
-                <li>
-                  <strong>CPU:</strong> Apple Silicon M2
-                </li>
-                <li>
-                  <strong>RAM:</strong> 16GB
+                <li>M2 Macbook Air</li>
-                </li>
-                <li>
-                  <strong>SSD:</strong> 512GB
-                </li>
                 <li>Raspberry Pi 4B</li>
                 <li>Raspberry Pi Zero 2W</li>
-                <li>M5Stack</li>
               </ul>
             </section>
             <section>
@@ -126,7 +114,7 @@ export default function Home() {
                 <SoftwareIcon size="32" />
                 <h2>Software</h2>
               </div>
-              <ul class="grid gap-2 grid-cols-3 text-center mt-4 ml-2 heir-a:text-blue-900 child:bg-gray-200 child:p-1">
+              <ul class="grid gap-2 grid-cols-3 text-center mt-4 heir-a:text-blue-900 child:bg-gray-200 child:p-1">
                 <li>
                   <a
                     href="https://github.com/exelban/stats"
@@ -142,7 +130,7 @@ export default function Home() {
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    Brave Browser
+                    Brave
                   </a>
                 </li>
                 <li>
@@ -169,7 +157,7 @@ export default function Home() {
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    Fish Shell
+                    Fish
                   </a>
                 </li>
                 <li>
@@ -187,7 +175,7 @@ export default function Home() {
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    Color Slurp
+                    Slurp
                   </a>
                 </li>
                 <li>
@@ -206,7 +194,7 @@ export default function Home() {
                 <TreeIcon size="36" />
                 <h2>Interests</h2>
               </div>
-              <ul class="grid gap-2 grid-cols-3 text-center mt-4 ml-2 child:bg-slate-100 child:p-1">
+              <ul class="grid gap-2 grid-cols-3 text-center mt-4 child:bg-slate-100 child:p-1">
                 <li>HTML</li>
                 <li>CSS</li>
                 <li>Tailwind</li>
@@ -226,7 +214,7 @@ export default function Home() {
                 <ContactIcon size="36" />
                 <h2>Contact</h2>
               </div>
-              <ul class="grid gap-2 grid-cols-1 text-lg text-left mt-4 ml-2 heir-strong:mr-2 child:bg-slate-100 child:p-2">
+              <ul class="grid gap-2 grid-cols-1 text-lg text-left mt-4 heir-strong:mr-2 child:bg-slate-100 child:p-2">
                 <li>
                   <strong>Email:</strong>
                   <span>pyros2097@gmail.com</span>

routes/posts.tsx CHANGED Viewed

@@ -1,5 +1,49 @@
 import { Head } from "$fresh/runtime.ts";
+// const files = await Astro.glob("./**/*.{md,mdx}");
+// const posts = files.map(({ frontmatter: item }) => ({
+//   id: item.title.toLowerCase().replaceAll(" ", "-"),
+//   title: item.title,
+//   date: new Date(item.date),
+// }));
+// ---
+// <style>
+//   .container {
+//     display: flex;
+//     flex-direction: column;
+//     min-height: calc(100vh - 120px);
+//   }
+//   .row {
+//     display: flex;
+//     flex-direction: row;
+//     align-items: center;
+//     margin-top: 1.5rem;
+//     line-height: 1.5rem;
+//     & span {
+//       width: 9rem;
+//     }
+//     & a {
+//       margin-left: 2rem;
+//       text-decoration: none;
+//       color: black;
+//       border-bottom: 2px solid black;
+//       &:hover,
+//       &:visited {
+//         text-decoration: none;
+//       }
+//       @media (--mobile) {
+//         margin-left: 0rem;
+//       }
+//     }
+//   }
+// </style>
 export default function Posts() {
   return (
     <div class="mx-auto">
@@ -8,6 +52,45 @@ export default function Posts() {
         <meta name="description" content="Peter John's Posts" />
       </Head>
       <div class="px-4 py-40 mx-auto">TBD</div>
+      {
+        /* <div slot="body" class="container">
+        {
+          posts.map((post) => (
+            <div class="row">
+              <span>{post.date.toISOString().split("T")[0]}</span>
+              <a href={`/blog/${post.date.getFullYear()}/${post.id}`}>
+                {post.title}
+              </a>
+            </div>
+          ))
+        }
+      </div> */
+      }
     </div>
   );
 }
+// ---
+// const { title, description, image, date, tags } = Astro.props.frontmatter;
+// ---
+// <title slot="head">pyros.sh | {title}</title>
+// <meta slot="head" name="description" content={description} />
+// <meta slot="head" name="keywords" content={tags} />
+// <div slot="body" class="post-page">
+//   <div class="title-container">
+//     <div>
+//       <h1>{title}</h1>
+//       <h2>{description}</h2>
+//     </div>
+//     <div class="date">
+//       <h3>{date}</h3>
+//     </div>
+//   </div>
+//   <div class="tags-container">
+//     {tags.map((text) => <Tag text={text} />)}
+//   </div>
+//   <div>
+//     <slot />
+//   </div>
+// </div>

static/posts/eyecandy-golang-error-reporting.md ADDED Viewed

@@ -0,0 +1,91 @@
+---
+layout: ../../../layouts/post.astro
+title: Eyecandy golang error reporting
+description: Better error messages logging in golang
+image: ../../../assets/images/terminal1.png
+date: September 17, 2016
+tags:
+  - golang
+  - error
+  - formatting
+---
+We at playlyfe wanted to get an email report as soon as an error occurred on our production servers. Since golang does not have
+stack traces with its inbuilt error mechanism we had to find a quick and simple solution which wouldn’t require too much refactoring
+of our existing codebase. So this is how we went about accomplishing this task. First we decided to wrap our errors so that we can
+get the runtime stack whenever an error occurs.
+We first started using this, https://github.com/go-errors/errors
+but soon found out that it wasn’t exactly suited for our use case. So we created this minimalistic and easy approach to wrap all our
+existing errors. First we decided to wrap our errors so that we can get the runtime stack whenever an error occurs.
+```go
+package utils
+import (
+    "bytes"
+    "database/sql"
+    "runtime"
+)
+type WrappedError struct {
+    Err error
+    StackTrace string
+}
+func(e * WrappedError) Error() string {
+    return e.Err.Error()
+}
+func E(e error) error {
+    switch e.(type) {
+    case *WrappedError:
+        return e
+    case nil:
+        return nil
+    default:
+        stackTrace := make([]byte , 1 << 16)
+        runtime.Stack(stackTrace, false)
+        buffer := &bytes.Buffer{}
+        for _ , a := range stackTrace {
+            if a != 0 {
+                buffer.WriteByte(a)
+            }
+        }
+        return &WrappedError {
+            Err: e,
+            StackTrace: buffer.String(),
+        }
+    }
+}
+```
+But then just sending the error stack in plain format to our emails wasn’t going to be nice to read at all. We needed more
+information like context and session information and things like that. On top of that I also wanted to make our stack traces
+prettier so that it would easier to figure out where the error started from.
+So to parse the error stack trace I found this cool library which does that for and on top of that it also themes it very well
+https://github.com/maruel/panicparse
+But then it didn’t properly expose an API to do it properly and after a few dabblings here,
+https://github.com/maruel/panicparse/issues/8
+with the developer and +1’s we got a proper api which I could use.
+And now I haz got a prettier stack traces like this,
+![Terminal 1](../../../assets/images/terminal1.png)
+So great I got ANSI coloring setup and the errors look great in our console but what about our
+mails. Of course this wasn’t going to work since emails primarily render text and HTML only, and
+ANSI color codes was going to make our messages a mess.
+So then I went about digging github for an ANSI terminal codes to HTML converter so that it would
+look exactly like this in my mail. And then I found this cool go library which does that,
+https://github.com/buildkite/terminal
+Now all emails require inline CSS or else they wouldn’t work so then I had to find out a way to do that too.
+And this was it,
+https://github.com/aymerick/douceur
+Finally after messing around with so many libraries I got around to getting it to work and this is how it looks in my email,
+![Email 1](../../../assets/images/email1.png)

static/posts/gopibot-to-the-rescue.md ADDED Viewed

@@ -0,0 +1,139 @@
+---
+layout: ../../../layouts/post.astro
+title: Gopibot to the rescue
+description: A slackbot for deploying your applications (chatops)
+image: ../../../assets/images/gopibot.png
+date: October 04, 2017
+tags:
+  - nodejs
+  - slack
+  - bot
+  - chatops
+---
+High Ho Gopibot away!
+Everybody please meet Gopibot our chatops bot which I built at Numberz to help us deploy our countless microservices to QA.
+![Gopibot 1](../../../assets/images/gopibot.png)
+So here is the backstory,
+I was one of the developers who had access to our QA and Prod servers and the other person was the Head of Engineering and he is generally a busy guy.
+So whenever there is a change that needs to be deployed everyone comes to me and tells me to deploy their microservice/frontend to the QA and blatantly
+interrupts my awesome coding cycle.
+Alright then, I break off from my flow, ssh into the server and start running the deploy command. And all of you jsdev wannabes who have worked with
+react and webpack will know the horrors about deploying frontend code right. It takes forever so I have to wait there looking at the console along with
+the dev who wanted me to deploy it (lets call him kokill for now). So kokill and I patiently wait for the webpack build to finish. 1m , 2m, 3m and WTH
+15m. And then its built and the new frontend is deployed to QA. YES! Now I can continue with my work. But wait then some other dev comes likes call him
+(D-Ne0) and he asks to deploy something else and again the same process of ssh’ing the server and another wait. This got repetitive and irritating. Then
+I started searching for solutions to the problem and looked high and low and thought that CI/CD is the only thing that can solve this problem. But then
+I saw something new called ChatOps where developers have chatbots to talk to automate this manual work. Just like we have bots these days to help you
+out in your work like getting your laundry, grocery and making orders.
+So I decided to take a shot at this in my free time. And it seems it was simpler than I thought and decided to use Slack our primary team communication
+platform. We used it daily for everything and I thought why not have a specific channel just where the bot resides and people could talk to the bot.
+Since we are typically a nodejs shop I decided to find a way to send messages to a slack bot. And slack has this really great sdk for nodejs.
+https://github.com/slackapi/node-slack-sdk
+First I went and created the bot in my slack team settings. And then wrote a script which would allow it to read messages from the channel it was added.
+Here is the simple script,
+```js
+const RtmClient = require("@slack/client").RtmClient;
+const RTM_EVENTS = require("@slack/client").RTM_EVENTS;
+const CLIENT_EVENTS = require("@slack/client").CLIENT_EVENTS;
+const bot_token = process.env.SLACK_BOT_TOKEN;
+const rtm = new RtmClient(bot_token);
+const COMMANDS = {
+  web: "ssh -i qa.pem user@url docker pull image-name && docker rm -f container-id && docker run -d image-name",
+};
+let deploymentInProgress = false;
+let counter = 0;
+rtm.on(RTM_EVENTS.MESSAGE, (event) => {
+  console.log("Got event", event);
+  if (
+    (event.subtype === "message_changed" || event.subtype === "message_deleted") &&
+    event.text &&
+    event.text.indexOf("$slackBotId") > -1
+  ) {
+    return rtm.sendMessage("Please dont change the message and expect me to correct your past mistakes", event.channel);
+  }
+  if (event.subtype) {
+    return;
+  }
+  if (event.type === "message" && event.text && event.text.indexOf("$slackBotId") > -1) {
+    if (deploymentInProgress === true) {
+      counter = counter + 1;
+      if (counter > 3) {
+        counter = 0;
+        return rtm.sendMessage("Stop bugging me noob or I'll tell to raise you bugs", event.channel);
+      }
+      return rtm.sendMessage("I am already processing a deploy request please wait", event.channel);
+    }
+    var input = event.text.trim().replace("$slackBotId ", "");
+    console.log("Got input", input);
+    const arr = input.split(" ");
+    arr.forEach((word) => {
+      word = word.replace(/\s/g, "");
+    });
+    const currCommand = arr[0];
+    if (COMMANDS.indexOf(currCommand) > -1) {
+      rtm.sendMessage("Starting to deploy ${currCommand}", event.channel);
+      const ssh = spawn(COMMANDS[currCommand]);
+      deploymentInProgress = true;
+      ssh.stdout.on("data", (data) => {
+        rtm.sendMessage(data, event.channel);
+      });
+      ssh.stderr.on("data", (data) => {
+        rtm.sendMessage(data, event.channel);
+      });
+      ssh.on("close", (code) => {
+        deploymentInProgress = false;
+        if (code === 0) {
+          console.log("Deployed Successfully", currCommand);
+          rtm.sendMessage("Deployed Successfully " + currCommand, event.channel);
+        } else {
+          console.log("child process exited with code ", code);
+          rtm.sendMessage("child process exited with code " + code);
+        }
+      });
+      return;
+    } else {
+      counter = counter + 1;
+      if (counter > 3) {
+        counter = 0;
+        return rtm.sendMessage("Stop bugging me noob or I'll tell <@U30TXGLS1|gopi> to raise you bugs", event.channel);
+      }
+      return rtm.sendMessage(
+        `command '${event.text} ' not found.You need to specify one of these commands [${COMMANDS.map((v, k) => k).join(
+          ","
+        )} ]`,
+        event.channel
+      );
+    }
+  }
+});
+console.log("Starting deploybot");
+rtm.start();
+```
+So what the bot does is when someone mentions the bot with a command to run. It first checks if the command is defined in our COMMANDS map and then if
+it is, it executes the corresponding shell command for it on our QA server and then gives back progress/error/finished messages back to the channel so
+that everyone will be notified that someone had done a deployment. This is how it looks like,
+![Gopibot 2](../../../assets/images/gopibot.png)
+Anyways to just have a boring bot that just runs boring commands was kinda boring. I thought of spicing up the bot interaction by making it say weird
+things if you keep giving it invalid commands. Making it more of a life like bot.
+Initially the bot was called deploybot and had a rocket icon but then there was our QA/Bug creator/Hell Raiser/Injoker in our team so I thought creating
+a mini him would be better and give the bot a real person’s personality and it worked and people kind a started talking to bot some random stuff and
+all.
+Further on we can maybe introduce natural language processing and deep learning to make the bot learn from our messages and not just take a single
+command. Like instead of me saying @gopibot cfm I can say @gopibot please deploy our cashflow server or please revert the deployment to the previous
+version and things like that.

static/styles.css CHANGED Viewed

@@ -5,4 +5,101 @@
 @page {
   size: A4;
   margin: 0;
+}
+.post-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  & code {
+    font-family: Menlo, Monaco, Courier New, monospace;
+    font-size: 0.9em;
+  }
+  & p {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  & pre {
+    max-width: 64rem;
+    font-family: monospace;
+    font-size: 14px;
+    border-radius: 16px;
+    padding: 16px;
+    margin: 8px;
+    line-height: 20px;
+    overflow-x: auto;
+  }
+  & img {
+    width: auto;
+    @media (--mobile) {
+      width: 100%;
+    }
+  }
+  & .title-container {
+    display: flex;
+    flex: 1;
+    font-family: serif;
+    flex-direction: column;
+    & h1 {
+      color: var(--black-light);
+      margin: 0;
+      line-height: 3rem;
+    }
+    & h2 {
+      color: var(--yellow-dark);
+      font-size: 1.5rem;
+      font-weight: 500;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+    & h3 {
+      color: var(--black-light);
+      font-size: 1.5rem;
+      font-weight: 500;
+      margin: 0;
+    }
+    & .date {
+      display: flex;
+      flex: 1;
+      flex-direction: row;
+      justify-content: flex-end;
+      margin-right: var(--space-10);
+      @media (--mobile) {
+        justify-content: flex-start;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+  & .tags-container {
+    margin-top: var(--space-1);
+    margin-bottom: var(--space-1);
+    @media (--mobile) {
+      margin-top: var(--space-4);
+      margin-bottom: var(--space-4);
+    }
+  }
+}
+.tag {
+  background-color: var(--black-light);
+  color: white;
+  display: inline-block;
+  padding-left: 8px;
+  padding-right: 8px;
+  text-align: center;
+  margin-right: 1rem;
 }

~repos /website

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

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