update styles

maxphillipsdev · Jan 5, 2025 · 976fe3d · 976fe3d
1 parent 123cc2d
commit 976fe3d
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 47 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -21,6 +21,3 @@ jobs:
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-
-      - name: Lint
-        run: pnpm check
diff --git a/src/content/blog/exploring-rn.mdx b/src/content/blog/exploring-rn.mdx
@@ -1,23 +1,6 @@
 ---
-title: React-Native's build system
-description: How does a React Native app start?
+title: React-Native's build system diagram
+description: A small diagram outlining React Native's build system.
 pubDate: August 12, 2023
 ---
-
-How does React Native, _React Native??_
-
-React Native is a pretty cool tool, although when learning it I encountered a rather strange difficulty curve:
-![](/rn-frustration.png)
-
-Yeah, a bit strange :(
-
-While this curve is just my own experience with React Native, I like to think I am not alone in this. Upgrades in particular [were listed as the number one pain point for React Native developers in the _State of React Native_ survey,](https://results.stateofreactnative.com/opinions/#opinions_pain_points) with debugging coming in second. More recent tools in the React Native ecosystem (such as [Expo](https://expo.dev/)) even seem designed to directly address these sorts of issues.
-
-The truth is that React Native feels kind of magical to use, and that is both a blessing and curse. Writing app logic in React and being able to run it on a mobile device it awesome, but if you stray too far off the beaten path you might start to encounter weird bugs and need to use dark spells like `BatchedBridge.spy()`, `UIManager.dispatchViewManagerCommand()`, or even [`React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;`](https://github.com/facebook/react-native/blob/9f7dfcc35ff603de42cfa5e3fa63701916a86784/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js#L37C4-L37C4) to patch them up. (ok maybe not that last one)
-
-As someone who came from the web dev side of things I was pretty reluctant to touch native code at first, but after working with it for a bit I gotta say it has helped make those earlier pain points a lot less annoying to deal with. Logbox errors seem less esoteric, upgrades seem (just a bit) less scary, and when something breaks it has made it a lot easier to know where to start looking.
-
-Anyway, that's enough preamble :) The main reason I made this post is because I wanna start sharing some of this weird React Native stuff on this blog, and I reckon a neat infographic would be a good place to start.
-
-Please let me know in the comments below what you think (or if I goofed anything up lol), and if you enjoyed it then check back soon for a follow up where I wanna cover some stuff about the React Native Bridge system :)
 ![](/rn-intro.png)
diff --git a/src/content/blog/gatsby-image-blur.mdx b/src/content/blog/gatsby-image-blur.mdx
@@ -4,8 +4,6 @@ description: An older article on progressive image enhancement.
 pubDate: "April 2, 2021"
 ---
 
-Although the subscription wall can be annoying, I think it fair to say Medium is a pretty great blogging platform. It's simple to use, feature loaded, but most importantly its really fast.
-
 A lot of different things go into making a website fast ([Check Web.Dev for more tips](https://web.dev/fast/)) but one thing that Medium does especially well is Progressive Image Loading.
 
 Progressive Image Loading, also known as the Low Quality Image Placeholder(LQIP) pattern, is simply the technique of loading a low quality version of your image first, and then lazy loading a full size version once the main page content has loaded.

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -15,7 +15,6 @@ const { title, description, heroImage } = Astro.props;
 <!DOCTYPE html>
 <html
   lang="en"
-  class="dark h-full bg-slate-1 text-slate-12 transition-colors ease-in-out"
 >
   <head>
     <BaseHead
@@ -45,7 +44,7 @@ const { title, description, heroImage } = Astro.props;
       window.localStorage.setItem("theme", theme);
     </script>
   </head>
-  <body class="h-full">
+  <body class="mx-auto max-w-[80ch] bg-slate-1 text-slate-12 h-screen decoration-crimson-9">
     <main class="flex h-full flex-col gap-6 p-6">
       <Header title={title} />
       <div class="no-scrollbar w-full overflow-y-auto">

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -19,7 +19,7 @@ export const buildOGURL = (slug: string | undefined) => {
   <article class="flex w-full flex-col items-center gap-6">
     {title && <h1 class="text-center text-4xl font-bold">{title}</h1>}
     <img
-      src={heroImage || buildOGURL(slug)}
+      src={heroImage}
       alt=""
       class="mb-6 w-full rounded-xl border border-slate-3 shadow-lg md:max-w-4xl"
     />

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -1,6 +1,6 @@
 ---
 import { CollectionEntry, getCollection } from "astro:content";
-import BlogPost, { buildOGURL } from "../../layouts/BlogPost.astro";
+import BlogPost from "../../layouts/BlogPost.astro";
 
 export async function getStaticPaths() {
   const posts = await getCollection("blog");
@@ -15,7 +15,7 @@ const post = Astro.props;
 const { Content } = await post.render();
 ---
 
-<BlogPost {...post.data} slug={post.slug} heroImage={buildOGURL(post.slug)}>
+<BlogPost {...post.data} slug={post.slug} heroImage={post.heroImage}>
   <Content />
   <script src="https://giscus.app/client.js"
           data-repo="maxphillipsdev/blog"

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -27,7 +27,7 @@ const BASE_CARD_STYLES =
       {
         posts.map((post) => (
           <li>
-            <a href={`/blog/${post.slug}/`} class="flex space-x-1">
+            <a href={`/blog/${post.slug}/`} class="flex space-x-1 hover:underline">
               <p>→</p>
               <p>{post.data.title}</p>
               <FormattedDate date={post.data.pubDate} />

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,28 +1,41 @@
 ---
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import Layout from "../layouts/Base.astro";
+
+import { getCollection } from "astro:content";
+import FormattedDate from "../components/FormattedDate.astro";
+
+const posts = (await getCollection("blog")).sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
 ---
 
 <Layout
   title={SITE_TITLE}
   description={SITE_DESCRIPTION}
   heroImage={"/placeholder-about.png"}
 >
-  <article
-    class="prose-slate flex max-w-none flex-col items-center text-justify text-lg"
-  >
-  <h2>Hi I'm Max</h2>
-  <p>I'm a software fella who codes things.</p>
-  <br/>
-  <p>Some stuff I've done / am doing:</p>
-  <div class="text-left">
-  <ul>
-    <li>– Working at Channel 9 on the <a href="https://www.9now.com.au/" class="underline">9Now</a> Smart TV app.</li>
-    <li>– Currently porting the mobile e2e testing tool <a class="underline" href="https://github.com/mobile-dev-inc/maestro/pull/2067">Maestro</a> to Apple TV (tvOS).</li>
-    <li>– Gave a <a href="https://www.youtube.com/watch?v=MIXaSbdnEZo" class="underline">conference talk</a> a while ago in Poland which was pretty cool.</li>
-    <li>– Forgetting to update this blog.</li>
+  <h2 class="font-bold mb-3 shadow-sky-5 drop-shadow-lg">About me</h2>
+  <p>
+    Software engineer with focus on frontend, mainly Smart/Connected TVs and web.
+  </p>
+  <p>
+    Based in Sydney Australia. Previously in Den Haag, The Netherlands.
+  </p>
+  <br class=""/>
+
+  <h2 class="font-bold mb-3">Writing</h2>
+  <ul class="list-disc list-inside">
+      {
+        posts.map((post) => (
+          <li>
+            <a href={`/blog/${post.slug}/`} class="hover:underline decoration-wavy decoration-crimson-9">
+              {post.data.title}
+              •
+              <FormattedDate date={post.data.pubDate} />
+            </a>
+          </li>
+        ))
+      }
   </ul>
-  </div>
-  <br/>
-  </article>
 </Layout>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -8,7 +8,7 @@ module.exports = {
     colors: {},
     extend: {
       fontFamily: {
-        sans: ["Inter", "sans-serif"],
+        sans: ["system-ui", "Inter", "sans-serif"],
         mono: ["JetBrains Mono", "monospace"],
       },
     },