Skip to content

Commit 976fe3d

Browse files
maxphillipsdevmaxphillipsdev
committed
update styles
1 parent 123cc2d commit 976fe3d

File tree

9 files changed

+37
-47
lines changed

9 files changed

+37
-47
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,3 @@ jobs:
2121

2222
- name: Install dependencies
2323
run: pnpm install --frozen-lockfile
24-
25-
- name: Lint
26-
run: pnpm check

‎src/content/blog/exploring-rn.mdx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,6 @@
11
---
2-
title: React-Native's build system
3-
description: How does a React Native app start?
2+
title: React-Native's build system diagram
3+
description: A small diagram outlining React Native's build system.
44
pubDate: August 12, 2023
55
---
6-
7-
How does React Native, _React Native??_
8-
9-
React Native is a pretty cool tool, although when learning it I encountered a rather strange difficulty curve:
10-
![](/rn-frustration.png)
11-
12-
Yeah, a bit strange :(
13-
14-
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.
15-
16-
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)
17-
18-
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.
19-
20-
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.
21-
22-
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 :)
236
![](/rn-intro.png)

‎src/content/blog/gatsby-image-blur.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ description: An older article on progressive image enhancement.
44
pubDate: "April 2, 2021"
55
---
66

7-
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.
8-
97
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.
108

119
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.

‎src/layouts/Base.astro‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const { title, description, heroImage } = Astro.props;
1515
<!DOCTYPE html>
1616
<html
1717
lang="en"
18-
class="dark h-full bg-slate-1 text-slate-12 transition-colors ease-in-out"
1918
>
2019
<head>
2120
<BaseHead
@@ -45,7 +44,7 @@ const { title, description, heroImage } = Astro.props;
4544
window.localStorage.setItem("theme", theme);
4645
</script>
4746
</head>
48-
<body class="h-full">
47+
<body class="mx-auto max-w-[80ch] bg-slate-1 text-slate-12 h-screen decoration-crimson-9">
4948
<main class="flex h-full flex-col gap-6 p-6">
5049
<Header title={title} />
5150
<div class="no-scrollbar w-full overflow-y-auto">

‎src/layouts/BlogPost.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const buildOGURL = (slug: string | undefined) => {
1919
<article class="flex w-full flex-col items-center gap-6">
2020
{title && <h1 class="text-center text-4xl font-bold">{title}</h1>}
2121
<img
22-
src={heroImage || buildOGURL(slug)}
22+
src={heroImage}
2323
alt=""
2424
class="mb-6 w-full rounded-xl border border-slate-3 shadow-lg md:max-w-4xl"
2525
/>

‎src/pages/blog/[...slug].astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import { CollectionEntry, getCollection } from "astro:content";
3-
import BlogPost, { buildOGURL } from "../../layouts/BlogPost.astro";
3+
import BlogPost from "../../layouts/BlogPost.astro";
44
55
export async function getStaticPaths() {
66
const posts = await getCollection("blog");
@@ -15,7 +15,7 @@ const post = Astro.props;
1515
const { Content } = await post.render();
1616
---
1717

18-
<BlogPost {...post.data} slug={post.slug} heroImage={buildOGURL(post.slug)}>
18+
<BlogPost {...post.data} slug={post.slug} heroImage={post.heroImage}>
1919
<Content />
2020
<script src="https://giscus.app/client.js"
2121
data-repo="maxphillipsdev/blog"

‎src/pages/blog/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const BASE_CARD_STYLES =
2727
{
2828
posts.map((post) => (
2929
<li>
30-
<a href={`/blog/${post.slug}/`} class="flex space-x-1">
30+
<a href={`/blog/${post.slug}/`} class="flex space-x-1 hover:underline">
3131
<p>→</p>
3232
<p>{post.data.title}</p>
3333
<FormattedDate date={post.data.pubDate} />

‎src/pages/index.astro‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,41 @@
11
---
22
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
33
import Layout from "../layouts/Base.astro";
4+
5+
import { getCollection } from "astro:content";
6+
import FormattedDate from "../components/FormattedDate.astro";
7+
8+
const posts = (await getCollection("blog")).sort(
9+
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
10+
);
411
---
512

613
<Layout
714
title={SITE_TITLE}
815
description={SITE_DESCRIPTION}
916
heroImage={"/placeholder-about.png"}
1017
>
11-
<article
12-
class="prose-slate flex max-w-none flex-col items-center text-justify text-lg"
13-
>
14-
<h2>Hi I'm Max</h2>
15-
<p>I'm a software fella who codes things.</p>
16-
<br/>
17-
<p>Some stuff I've done / am doing:</p>
18-
<div class="text-left">
19-
<ul>
20-
<li>– Working at Channel 9 on the <a href="https://www.9now.com.au/" class="underline">9Now</a> Smart TV app.</li>
21-
<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>
22-
<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>
23-
<li>– Forgetting to update this blog.</li>
18+
<h2 class="font-bold mb-3 shadow-sky-5 drop-shadow-lg">About me</h2>
19+
<p>
20+
Software engineer with focus on frontend, mainly Smart/Connected TVs and web.
21+
</p>
22+
<p>
23+
Based in Sydney Australia. Previously in Den Haag, The Netherlands.
24+
</p>
25+
<br class=""/>
26+
27+
<h2 class="font-bold mb-3">Writing</h2>
28+
<ul class="list-disc list-inside">
29+
{
30+
posts.map((post) => (
31+
<li>
32+
<a href={`/blog/${post.slug}/`} class="hover:underline decoration-wavy decoration-crimson-9">
33+
{post.data.title}
34+
•
35+
<FormattedDate date={post.data.pubDate} />
36+
</a>
37+
</li>
38+
))
39+
}
2440
</ul>
25-
</div>
26-
<br/>
27-
</article>
2841
</Layout>

‎tailwind.config.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ module.exports = {
88
colors: {},
99
extend: {
1010
fontFamily: {
11-
sans: ["Inter", "sans-serif"],
11+
sans: ["system-ui", "Inter", "sans-serif"],
1212
mono: ["JetBrains Mono", "monospace"],
1313
},
1414
},

0 commit comments

Comments
 (0)