Skip to content

Commit

Permalink
refactor(ts): Enhance the TypeScript types (#27)
Browse files Browse the repository at this point in the history
Avoid slow types and make objects read-only.
5ouma authored Nov 10, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent bf87e2b commit 82a151b
Showing 6 changed files with 34 additions and 26 deletions.
8 changes: 4 additions & 4 deletions src/components/Bio/Bio.astro
Original file line number Diff line number Diff line change
@@ -8,15 +8,15 @@ export type Props = {
description: string;
icon: string;
};
const props = Astro.props;
const { name, description, icon } = Astro.props;
---

<div id="bio">
<div id="profile">
<Image src={props.icon} alt={`${props.name}'s avatar`} inferSize={true} />
<h1>{props.name}</h1>
<Image src={icon} alt={`${name}'s avatar`} inferSize={true} />
<h1>{name}</h1>
</div>
<p>{props.description}</p>
<p>{description}</p>
</div>

<style>
21 changes: 11 additions & 10 deletions src/components/Contact/Contact.astro
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
import { Icon } from "astro-icon/components";
import { getContact } from "../../libs/contact.ts";
import type { service } from "../../types/services.ts";
import { type contact, getContact } from "../../libs/contact.ts";
import type { serviceName } from "../../types/services.ts";
import "../../styles/global.css";
export type Props = { service: service; id: string };
const props = Astro.props;
export type Props = { service: serviceName; id: string };
const { service, id } = Astro.props;
const contact = getContact(props.service, props.id);
const { url, icon, color }: contact = getContact(service, id);
---

<a
href={contact.url}
href={url}
target="_blank"
rel="noopener noreferrer"
aria-label={`Go to ${props.id}'s profile on ${props.service}`}
aria-label={`Go to ${id}'s profile on ${service}`}
>
<Icon id="icon" name={contact.icon} />
<span>{props.id}</span>
<Icon id="icon" name={icon} />
<span>{id}</span>
</a>

<style define:vars={{ "accent-color": contact.color }}>
<style define:vars={{ "accent-color": color }}>
a {
display: inline-flex;
align-items: center;
@@ -33,6 +33,7 @@ const contact = getContact(props.service, props.id);
transition:
color 0.3s ease-in-out,
border-color 0.3s ease-in-out;

&:hover,
&:focus-visible {
color: color-mix(in srgb, var(--accent-color) 20%, var(--foreground));
5 changes: 3 additions & 2 deletions src/components/Homepage/Homepage.astro
Original file line number Diff line number Diff line change
@@ -5,8 +5,8 @@ import { Icon } from "astro-icon/components";
import "../../styles/global.css";
import { generateQRCode } from "../../libs/qrcode.ts";
export type Props = { url: string };
const props = Astro.props;
export type Props = Readonly<{ url: string }>;
const props: Props = Astro.props;
const url = new URL(props.url);
const qrCode: string = await generateQRCode(props.url);
@@ -35,6 +35,7 @@ const qrCode: string = await generateQRCode(props.url);
align-items: center;
gap: 0.3rem;
text-decoration: none;

&:hover div,
&:focus-visible div {
border-color: color-mix(in srgb, var(--foreground) 60%, transparent);
8 changes: 4 additions & 4 deletions src/libs/contact.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { type service, services } from "../types/services";
import { type serviceName, services } from "../types/services";

const isFediverse = (service: service): boolean => {
const isFediverse = (service: serviceName): boolean => {
return service === "Mastodon" || service === "Misskey";
};

type contact = { url: string; icon: string; color: string };
export type contact = Readonly<{ url: string; icon: string; color: string }>;

export const getContact = (service: service, id: string): contact => {
export const getContact = (service: serviceName, id: string): contact => {
const specified: contact = services[service];

if (!specified) throw new Error(`Unsupported service: ${service}`);
8 changes: 4 additions & 4 deletions src/types/meta.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type { service } from "./services.ts";
import type { serviceName } from "./services.ts";

export type meta = {
export type meta = Readonly<{
name: string;
description: string;
icon: string;
contacts: { service: service; id: string }[];
contacts: Readonly<{ service: serviceName; id: string }>[];
homepage: string;
};
}>;
10 changes: 8 additions & 2 deletions src/types/services.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
type info = {
url: string;
icon: string;
color: string;
};

export const services = {
Bluesky: {
url: "https://bsky.app/profile/",
@@ -44,6 +50,6 @@ export const services = {
icon: "mingcute:mail-line",
color: "",
},
};
} as const satisfies Record<string, info>;

export type service = keyof typeof services;
export type serviceName = keyof typeof services;

0 comments on commit 82a151b

Please sign in to comment.