diff --git a/meta.tmpl.json b/meta.tmpl.json index b9e2842..0700e9c 100644 --- a/meta.tmpl.json +++ b/meta.tmpl.json @@ -2,6 +2,8 @@ "name": "", "description": "", "icon": "", - "contacts": [], - "homepage": "" + "homepage": "", + "email": "", + "sns": [], + "card": "" } diff --git a/src/components/Contact/Contact.astro b/src/components/Contact/Contact.astro deleted file mode 100644 index 3bad623..0000000 --- a/src/components/Contact/Contact.astro +++ /dev/null @@ -1,61 +0,0 @@ ---- -import { Icon } from "astro-icon/components"; - -import { type contact, getContact } from "../../libs/contact.ts"; -import type { serviceName } from "../../types/services.ts"; -import "../../styles/global.css"; - -export type Props = { service: serviceName; id: string }; -const { service, id } = Astro.props; - -const { url, icon, color }: contact = getContact(service, id); ---- - - - - {id} - - - diff --git a/src/components/Contact/Contact.stories.ts b/src/components/Contact/Contact.stories.ts deleted file mode 100644 index 0641be3..0000000 --- a/src/components/Contact/Contact.stories.ts +++ /dev/null @@ -1,17 +0,0 @@ -import Contact from "./Contact.astro"; -import * as stories from "./story.ts"; - -export default { - title: "Contact Links", - component: Contact, -}; - -export const Bluesky = { args: stories.Bluesky }; -export const Facebook = { args: stories.Facebook }; -export const GitHub = { args: stories.GitHub }; -export const Instagram = { args: stories.Instagram }; -export const Mastodon = { args: stories.Mastodon }; -export const Misskey = { args: stories.Misskey }; -export const Posts = { args: stories.Posts }; -export const Twitter = { args: stories.Twitter }; -export const Mail = { args: stories.Mail }; diff --git a/src/components/Contact/Contact.test.ts b/src/components/Contact/Contact.test.ts deleted file mode 100644 index 4bea5c0..0000000 --- a/src/components/Contact/Contact.test.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, expect, test } from "vitest"; - -import Contact from "./Contact.astro"; -import * as stories from "./story.ts"; - -describe("Contact", () => { - describe("Valid service and ID", () => { - for (const [name, props] of Object.entries(stories)) { - test(name, async () => { - const container: AstroContainer = await AstroContainer.create(); - const result: string = await container.renderToString(Contact, { - props, - }); - - expect(result).toMatchSnapshot(); - }); - } - }); - - describe("Invalid service or ID", () => { - const invalidProps: { service: string; id: string }[] = [ - { service: "Mastodon", id: "invalid-id" }, - { service: "Misskey", id: "invalid-id" }, - { service: "invalid-service", id: "id" }, - ]; - - for (const [_, props] of Object.entries(invalidProps)) { - test(props.service, async () => { - const container: AstroContainer = await AstroContainer.create(); - - await expect( - container.renderToString(Contact, { props }), - ).rejects.toThrow(); - }); - } - }); -}); diff --git a/src/components/Contact/__snapshots__/Contact.test.ts.snap b/src/components/Contact/__snapshots__/Contact.test.ts.snap deleted file mode 100644 index 75619eb..0000000 --- a/src/components/Contact/__snapshots__/Contact.test.ts.snap +++ /dev/null @@ -1,19 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Contact > Valid service and ID > Bluesky 1`] = `" bsky.app "`; - -exports[`Contact > Valid service and ID > Facebook 1`] = `" facebook "`; - -exports[`Contact > Valid service and ID > GitHub 1`] = `" github "`; - -exports[`Contact > Valid service and ID > Instagram 1`] = `" instagram "`; - -exports[`Contact > Valid service and ID > Mail 1`] = `" mail@example.com "`; - -exports[`Contact > Valid service and ID > Mastodon 1`] = `" @Mastodon@mastodon.social "`; - -exports[`Contact > Valid service and ID > Misskey 1`] = `" @support@misskey.io "`; - -exports[`Contact > Valid service and ID > Posts 1`] = `" support "`; - -exports[`Contact > Valid service and ID > Twitter 1`] = `" twitter "`; diff --git a/src/components/Contact/story.ts b/src/components/Contact/story.ts deleted file mode 100644 index b28c40c..0000000 --- a/src/components/Contact/story.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type { Props } from "./Contact.astro"; - -export const Bluesky: Props = { - service: "Bluesky", - id: "bsky.app", -}; - -export const Facebook: Props = { - service: "Facebook", - id: "facebook", -}; - -export const GitHub: Props = { - service: "GitHub", - id: "github", -}; - -export const Instagram: Props = { - service: "Instagram", - id: "instagram", -}; - -export const Mastodon: Props = { - service: "Mastodon", - id: "@Mastodon@mastodon.social", -}; - -export const Misskey: Props = { - service: "Misskey", - id: "@support@misskey.io", -}; - -export const Posts: Props = { - service: "Posts", - id: "support", -}; - -export const Twitter: Props = { - service: "Twitter", - id: "twitter", -}; - -export const Mail: Props = { - service: "Mail", - id: "mail@example.com", -}; diff --git a/src/components/Homepage/Homepage.astro b/src/components/Homepage/Homepage.astro deleted file mode 100644 index e422424..0000000 --- a/src/components/Homepage/Homepage.astro +++ /dev/null @@ -1,77 +0,0 @@ ---- -import Svg from "@cxa/astro-inline-svg"; -import { Icon } from "astro-icon/components"; - -import "../../styles/global.css"; -import { generateQRCode } from "../../libs/qrcode.ts"; - -export type Props = Readonly<{ url: string }>; -const props: Props = Astro.props; - -const url = new URL(props.url); -const qrCode: string = await generateQRCode(props.url); ---- - - - -
- - -
- - - diff --git a/src/components/Homepage/Homepage.stories.ts b/src/components/Homepage/Homepage.stories.ts deleted file mode 100644 index 5cffc9c..0000000 --- a/src/components/Homepage/Homepage.stories.ts +++ /dev/null @@ -1,11 +0,0 @@ -import Homepage from "./Homepage.astro"; -import * as stories from "./story.ts"; - -export default { - title: "Homepage", - component: Homepage, -}; - -export const Domain = { args: stories.Domain }; -export const Path = { args: stories.Path }; -export const Japanese = { args: stories.Japanese }; diff --git a/src/components/Homepage/Homepage.test.ts b/src/components/Homepage/Homepage.test.ts deleted file mode 100644 index 5c03a63..0000000 --- a/src/components/Homepage/Homepage.test.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, expect, test } from "vitest"; - -import Homepage from "./Homepage.astro"; -import type { Props } from "./Homepage.astro"; -import * as stories from "./story.ts"; - -describe("Homepage", () => { - describe("Valid URL", () => { - for (const [name, props] of Object.entries(stories)) { - test(name, async () => { - const container: AstroContainer = await AstroContainer.create(); - const result: string = await container.renderToString(Homepage, { - props, - }); - - expect(result).toMatchSnapshot(); - }); - } - }); - - test("Invalid URL", async () => { - const container: AstroContainer = await AstroContainer.create(); - - await expect( - container.renderToString(Homepage, { - props: { url: "not-valid-url" } satisfies Props, - }), - ).rejects.toThrow(); - }); -}); diff --git a/src/components/Homepage/__snapshots__/Homepage.test.ts.snap b/src/components/Homepage/__snapshots__/Homepage.test.ts.snap deleted file mode 100644 index 8a461a1..0000000 --- a/src/components/Homepage/__snapshots__/Homepage.test.ts.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Homepage > Valid URL > Domain 1`] = `"
"`; - -exports[`Homepage > Valid URL > Japanese 1`] = `"
"`; - -exports[`Homepage > Valid URL > Path 1`] = `"
"`; diff --git a/src/components/Homepage/story.ts b/src/components/Homepage/story.ts deleted file mode 100644 index 0b3fc24..0000000 --- a/src/components/Homepage/story.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { Props } from "./Homepage.astro"; - -export const Domain: Props = { url: "https://example.com" }; -export const Path: Props = { url: "https://www.example.com/path" }; -export const Japanese: Props = { url: "https://www.example.com/パス" }; diff --git a/src/components/SNS/SNS.astro b/src/components/SNS/SNS.astro index b1533bb..d71d9b5 100644 --- a/src/components/SNS/SNS.astro +++ b/src/components/SNS/SNS.astro @@ -1,14 +1,14 @@ --- import { Icon } from "astro-icon/components"; -import { type contact, getContact } from "../../libs/contact.ts"; +import { getSNS, type sns } from "../../libs/sns.ts"; import type { serviceName } from "../../types/services.ts"; import "../../styles/global.css"; export type Props = { service: serviceName; id: string }; const { service, id } = Astro.props; -const { url, icon, color }: contact = getContact(service, id); +const { url, icon, color }: sns = getSNS(service, id); --- Valid service and ID > GitHub 1`] = `" instagram "`; -exports[`SNS > Valid service and ID > Mastodon 1`] = `" @Mastodon@mastodon.social "`; +exports[`SNS > Valid service and ID > Mastodon 1`] = `" @Mastodon@mastodon.social "`; -exports[`SNS > Valid service and ID > Misskey 1`] = `" @support@misskey.io "`; +exports[`SNS > Valid service and ID > Misskey 1`] = `" @support@misskey.io "`; exports[`SNS > Valid service and ID > Posts 1`] = `" support "`; diff --git a/src/libs/meta.test.ts b/src/libs/meta.test.ts index 5bbf099..9a3c681 100644 --- a/src/libs/meta.test.ts +++ b/src/libs/meta.test.ts @@ -7,7 +7,8 @@ test("meta", () => { name: expect.any(String), description: expect.any(String), icon: expect.any(String), - contacts: expect.any(Array), homepage: expect.any(String), + sns: expect.any(Array), + card: expect.any(String), }); }); diff --git a/src/libs/contact.ts b/src/libs/sns.ts similarity index 60% rename from src/libs/contact.ts rename to src/libs/sns.ts index 018c65f..9a3a733 100644 --- a/src/libs/contact.ts +++ b/src/libs/sns.ts @@ -4,10 +4,10 @@ const isFediverse = (service: serviceName): boolean => { return service === "Mastodon" || service === "Misskey"; }; -export type contact = Readonly<{ url: string; icon: string; color: string }>; +export type sns = Readonly<{ url: string; icon: string; color: string }>; -export const getContact = (service: serviceName, id: string): contact => { - const specified: contact = services[service]; +export const getSNS = (service: serviceName, id: string): sns => { + const specified: sns = services[service]; if (!specified) throw new Error(`Unsupported service: ${service}`); @@ -18,8 +18,9 @@ export const getContact = (service: serviceName, id: string): contact => { } } - const url: string = isFediverse(service) - ? `https://${id.split("@")[2]}/${id}` - : specified.url + id; + const url: string = `https://${ + isFediverse(service) ? id.split("@")[2] : specified.url + }/${isFediverse(service) ? `@${id.split("@")[1]}` : id}`; + return { url, icon: specified.icon, color: specified.color }; }; diff --git a/src/pages/index.astro b/src/pages/index.astro index f2e9273..d7ca6ea 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,26 +1,30 @@ --- +import Access from "../components/Access/Access.astro"; import Bio from "../components/Bio/Bio.astro"; -import Contact from "../components/Contact/Contact.astro"; -import Homepage from "../components/Homepage/Homepage.astro"; +import Card from "../components/Card/Card.astro"; +import SNS from "../components/SNS/SNS.astro"; import Layout from "../layouts/Layout.astro"; import meta from "../libs/meta.ts"; ---
-
+
-
    - { - meta.contacts.map(({ service, id }) => ( -
  • - -
    • - )) - } -
+
+ +
    + { + meta.sns.map(({ service, id }) => ( +
  • + +
    • + )) + } +
+
- +
@@ -34,12 +38,13 @@ import meta from "../libs/meta.ts"; } @media (max-width: 40rem) { - main { + main, + #contacts { flex-direction: column; } } - div { + #info { display: flex; flex-direction: column; justify-content: center; @@ -47,6 +52,12 @@ import meta from "../libs/meta.ts"; gap: 1.5rem; } + #contacts { + display: flex; + align-items: flex-start; + gap: 1rem; + } + ul { display: flex; flex-direction: column; diff --git a/src/test/__snapshots__/index.test.ts.snap b/src/test/__snapshots__/index.test.ts.snap index da2d7cf..d6714fa 100644 --- a/src/test/__snapshots__/index.test.ts.snap +++ b/src/test/__snapshots__/index.test.ts.snap @@ -14,6 +14,6 @@ exports[`Index 1`] = ` --> Souma
Souma's avatar

Souma

💻 Japanese minimalistic engineer who loves small tools to make daily life fun. -🏞️ Sometimes drawing pixel art.
" +🏞️ Sometimes drawing pixel art.">
Souma's avatar

Souma

💻 Japanese minimalistic engineer who loves small tools to make daily life fun. +🏞️ Sometimes drawing pixel art.
" `; diff --git a/src/types/meta.ts b/src/types/meta.ts index 36aaef1..5bec7e7 100644 --- a/src/types/meta.ts +++ b/src/types/meta.ts @@ -4,6 +4,8 @@ export type meta = Readonly<{ name: string; description: string; icon: string; - contacts: Readonly<{ service: serviceName; id: string }>[]; homepage: string; + email?: string; + sns: Readonly<{ service: serviceName; id: string }>[]; + card: string; }>; diff --git a/src/types/services.ts b/src/types/services.ts index fd0640e..e514312 100644 --- a/src/types/services.ts +++ b/src/types/services.ts @@ -6,22 +6,22 @@ type info = { export const services = { Bluesky: { - url: "https://bsky.app/profile/", + url: "bsky.app/profile", icon: "mingcute:bluesky-social-line", color: "#0285FF", }, Facebook: { - url: "https://www.facebook.com/", + url: "www.facebook.com", icon: "mingcute:facebook-line", color: "#0866FF", }, GitHub: { - url: "https://github.com/", + url: "github.com", icon: "mingcute:github-line", color: "#181717", }, Instagram: { - url: "https://www.instagram.com/", + url: "www.instagram.com", icon: "mingcute:ins-line", color: "#E4405F", }, @@ -36,20 +36,15 @@ export const services = { color: "#A1CA03", }, Posts: { - url: "https://posts.cv/", + url: "posts.cv", icon: "simple-icons:readdotcv", color: "#111111", }, Twitter: { - url: "https://twitter.com/", + url: "twitter.com", icon: "mingcute:twitter-line", color: "#1D9BF0", }, - Mail: { - url: "mailto:", - icon: "mingcute:mail-line", - color: "", - }, } as const satisfies Record; export type serviceName = keyof typeof services;