martials/martials.no
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Links page.

Browse Source 
Icons using npm package instead of svgs.

Props and types.

Signed-off-by: Martin Berg Alstad <git@martials.no>
This commit is contained in:
Martin Berg Alstad
2024-10-06 13:27:18 +02:00
parent ebd59fe40e
commit beefabb908
27 changed files with 656 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Footer.astro
View File

@ -1,9 +1,17 @@
---
import GiteaLink from "./links/GiteaLink.astro"
import ExternalLink from "./links/ExternalLink.astro"
import PajamasIcon from "./icons/PajamasIcon.astro"
import * as m from "@/paraglide/messages"
const gitUrl = import.meta.env.GIT_URL
const statusUrl = import.meta.env.STATUS_URL
---
<div class="divider"></div>
<div class="mx-auto py-5">
<div class="mx-auto py-5 flex flex-col gap-1 items-center">
<GiteaLink href={gitUrl} />
<ExternalLink href={statusUrl} class="flex items-center" title="Status">
<PajamasIcon name="pajamas:status-health" class="w-6 h-6 mr-2" />
{m.status()}
</ExternalLink>
</div>

2
src/components/Greeting.astro
View File

@ -18,3 +18,5 @@ import "@/styles/global.css"
</div>
<Image src={me} alt="Me on a hike" width="400" height="400" class="p-5 mx-auto" />
</div>
<!-- Mastodon verification -->
<a rel="me" href="https://snabelen.no/@Martials" class="hidden">Mastodon</a>

10
src/components/icons/Gitea.astro Normal file
View File

@ -0,0 +1,10 @@
---
import PajamasIcon from "./PajamasIcon.astro"
interface Props {
class?: string
}
const { class: clazz } = Astro.props
---
<PajamasIcon name="pajamas:gitea" class={clazz}></PajamasIcon>

12
src/components/icons/PajamasIcon.astro Normal file
View File

@ -0,0 +1,12 @@
---
import type { PajamasIcon } from "@/types/icons"
import type { ComponentProps } from "@/types/props"
import { Icon } from "astro-icon/components"
interface Props extends ComponentProps {
name: PajamasIcon
}
const { name, class: clazz, ...props } = Astro.props
---
<Icon name={name} class:list={[clazz]} {...props} />

10
src/components/links/ExternalLink.astro
View File

@ -1,12 +1,12 @@
---
interface Props {
href: string
class?: string
import type { LinkProps } from "@/types/props"
interface Props extends LinkProps {
noStyle?: boolean
}
const { href, class: clazz } = Astro.props
const { href, noStyle = false, class: clazz, ...props } = Astro.props
---
<a href={href} target="_blank" rel="noopener" class:list={["link", clazz]}>
<a href={href} target="_blank" rel="noopener" class:list={[noStyle ? "" : "link", clazz]} {...props}>
<slot />
</a>

4
src/components/links/GiteaLink.astro
View File

@ -1,7 +1,7 @@
---
import ExternalLink from "./ExternalLink.astro"
import * as m from "../../paraglide/messages"
import Gitea from "../../icons/Gitea.astro"
import * as m from "@/paraglide/messages"
import Gitea from "../icons/Gitea.astro"
interface Props {
href: string
}

23
src/components/myLinks/LinkCard.astro Normal file
View File

@ -0,0 +1,23 @@
---
import ExternalLink from "../links/ExternalLink.astro"
import PajamasIcon from "../icons/PajamasIcon.astro"
import type { MyLink } from "./myLinks"
interface Props extends MyLink {
class?: string
}
const { title, message, url, icon, class: clazz } = Astro.props
---
<ExternalLink href={url} noStyle>
<div class:list={["card bg-neutral", clazz]}>
<div class="card-body p-5 flex flex-row items-center">
<PajamasIcon name={icon ?? "pajamas:link"} class="w-6 h-6" />
<div>
<h5 class="card-title">{title}</h5>
<p class="prose">{message}</p>
</div>
</div>
</div>
</ExternalLink>

15
src/components/myLinks/LinksPage.astro Normal file
View File

@ -0,0 +1,15 @@
---
import links from "./myLinks"
import LinkCard from "./LinkCard.astro"
import "@/styles/global.css"
import * as m from "@/paraglide/messages"
---
<h1 class="text-center">{m.myLinks()}</h1>
<div class="flex flex-col mx-auto w-fit gap-5">
{
links.map((link) => (
<LinkCard {...link} class="max-w-[500px] sm:min-w-96" />
))
}
</div>

47
src/components/myLinks/myLinks.ts Normal file
View File

@ -0,0 +1,47 @@
import type { PajamasIcon } from "@/types/icons.ts"
import * as m from "@/paraglide/messages"
const gitUrl = import.meta.env.GIT_URL
export interface MyLink {
title: string;
url: string;
message?: string;
icon?: PajamasIcon
}
export default [
{
title: "GitHub",
url: "https://github.com/emberal",
icon: "pajamas:github"
},
{
title: "Gitea",
url: `${gitUrl}/martials`,
message: m.forPersonalProjects(),
icon: "pajamas:gitea"
},
{
title: "LinkedIn",
url: "https://www.linkedin.com/in/martin-b-2a69391a3/",
icon: "pajamas:linkedin"
},
{
title: "Mastodon (Snabelen)",
url: "https://snabelen.no/@Martials",
icon: "pajamas:mastodon"
},
{
title: "Pixelfed",
url: "https://pixelfed.social/i/web/profile/261454857934868480"
},
{
title: "Steam",
url: "https://steamcommunity.com/id/martials/"
},
{
title: "Trakt.tv",
url: "https://trakt.tv/users/martials"
}
] satisfies MyLink[]

1
src/env.d.ts vendored
View File

@ -4,6 +4,7 @@
interface ImportMetaEnv {
readonly URL: string
readonly GIT_URL: string
readonly STATUS_URL: string
}
interface ImportMeta {

18
src/icons/ExternalLink.astro
View File

@ -1,18 +0,0 @@
---
// By GitLab SVGs
const props = Astro.props
---
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 16 16"
{...props}
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M10.75 1a.75.75 0 0 0 0 1.5h1.69L8.22 6.72a.75.75 0 0 0 1.06 1.06l4.22-4.22v1.69a.75.75 0 0 0 1.5 0V1zM2.5 4v9a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V8.75a.75.75 0 0 1 1.5 0V13a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4.25a.75.75 0 0 1 0 1.5H3a.5.5 0 0 0-.5.5"
clip-rule="evenodd"></path>
</svg>

18
src/icons/GitHub.astro
View File

@ -1,18 +0,0 @@
---
// By GitLab SVGs
const props = Astro.props
---
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 16 16"
{...props}
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M7.976 0A7.977 7.977 0 0 0 0 7.976c0 3.522 2.3 6.507 5.431 7.584c.392.049.538-.196.538-.392v-1.37c-2.201.49-2.69-1.076-2.69-1.076c-.343-.93-.881-1.175-.881-1.175c-.734-.489.048-.489.048-.489c.783.049 1.224.832 1.224.832c.734 1.223 1.859.88 2.3.685c.048-.538.293-.88.489-1.076c-1.762-.196-3.621-.881-3.621-3.964c0-.88.293-1.566.832-2.153c-.05-.147-.343-.978.098-2.055c0 0 .685-.196 2.201.832c.636-.196 1.322-.245 2.007-.245s1.37.098 2.006.245c1.517-1.027 2.202-.832 2.202-.832c.44 1.077.146 1.908.097 2.104a3.16 3.16 0 0 1 .832 2.153c0 3.083-1.86 3.719-3.62 3.915c.293.244.538.733.538 1.467v2.202c0 .196.146.44.538.392A7.98 7.98 0 0 0 16 7.976C15.951 3.572 12.38 0 7.976 0"
clip-rule="evenodd"></path>
</svg>

18
src/icons/Gitea.astro
View File

@ -1,18 +0,0 @@
---
// By GitLab SVGs
const props = Astro.props
---
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 16 16"
{...props}
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M15.46 3.206s.14-.003.245.102l.01.01c.064.06.258.244.285 1.074c0 2.902-1.405 5.882-1.405 5.882a9 9 0 0 1-.359.713c-.458.802-.786 1.153-.786 1.153s-.318.379-.675.595c-.415.265-.72.263-.72.263L7.247 13c-.636-.079-1.29-.736-1.927-1.578c-.47-.677-.779-1.413-.779-1.413s-2.51.034-3.675-1.394C.235 7.895.103 7.067.06 6.769q0-.012-.004-.029c-.05-.324-.285-1.873.821-2.86c.517-.496 1.148-.638 1.37-.684c.371-.081.667-.06.903-.044l.09.006c.391.035 3.99.216 3.99.216s1.532.066 2.27.056c0 0 .003 1.853.003 2.78q.105.048.211.1l.212.1V3.427q.494-.005.996-.017h.011c1.545-.036 4.528-.204 4.528-.204ZM2.113 8.026s.28.26.94.477c.43.152 1.094.231 1.094.231S3.699 7.5 3.516 6.757c-.22-.886-.4-2.398-.4-2.398s-.438-.015-.789.079c-.766.19-.98.763-.98.763s-.384.688.036 1.813c.244.672.73 1.013.73 1.013Zm8.084 3.607c.344-.023.499-.392.499-.392s1.24-2.486 1.4-2.878a.7.7 0 0 0 .046-.438c-.07-.267-.39-.412-.39-.412l-1.926-.935l-.165.339l-.18.369a.46.46 0 0 1 .128.341s.433.186.743.387c0 0 .257.135.32.425c.075.273-.04.488-.066.539l-.002.003s-.216.51-.343.774l-.004.007q-.07.144-.139.28a.454.454 0 1 1-.32-.15s.41-.84.468-1.033c0 0 .096-.24.048-.38a.47.47 0 0 0-.19-.188a6 6 0 0 0-.678-.34s-.076.068-.18.09a.5.5 0 0 1-.158.014l-.611 1.25a.46.46 0 0 1 .046.587a.46.46 0 0 1-.578.138a.46.46 0 0 1-.232-.51a.46.46 0 0 1 .44-.35L8.8 7.886a.457.457 0 0 1 .361-.744l.185-.375l.167-.341l-.579-.281s-.251-.125-.458-.072a.6.6 0 0 0-.114.039c-.189.084-.31.33-.31.33L6.668 9.293s-.124.254-.068.46c.048.252.325.397.325.397l2.874 1.4l.135.054s.114.04.262.03Z"
clip-rule="evenodd"></path>
</svg>

18
src/icons/Hamburger.astro
View File

@ -1,18 +0,0 @@
---
// By GitLab SVGs
const props = Astro.props
---
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 16 16"
{...props}
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M0 3.75A.75.75 0 0 1 .75 3h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 3.75M0 8a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8m.75 3.5a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 0-1.5z"
clip-rule="evenodd"></path>
</svg>

18
src/icons/LinkedIn.astro
View File

@ -1,18 +0,0 @@
---
// By GitLab SVGs
const props = Astro.props
---
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 16 16"
{...props}
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M3 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm1.102 4.297a1.195 1.195 0 1 0 0-2.39a1.195 1.195 0 0 0 0 2.39m1 7.516V6.234h-2v6.579zM6.43 6.234h2v.881c.295-.462.943-1.084 2.148-1.084c1.438 0 2.219.953 2.219 2.766c0 .087.008.484.008.484v3.531h-2v-3.53c0-.485-.102-1.438-1.18-1.438c-1.079 0-1.17 1.198-1.195 1.982v2.986h-2z"
clip-rule="evenodd"></path>
</svg>

17
src/icons/Mastodon.astro
View File

@ -1,17 +0,0 @@
---
// By GitLab SVGs
const props = Astro.props
---
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 16 16"
{...props}
>
<path
fill="currentColor"
d="M15.498 3.706C15.264 1.986 13.749.632 11.954.37C11.65.325 10.503.164 7.844.164h-.02c-2.66 0-3.23.161-3.533.206C2.546.625.951 1.842.565 3.582C.379 4.438.359 5.388.393 6.259C.443 7.51.453 8.756.567 10q.12 1.242.414 2.454c.368 1.49 1.856 2.731 3.314 3.237a9 9 0 0 0 4.848.253q.265-.06.525-.141c.39-.123.849-.26 1.186-.502l.01-.013l.005-.016v-1.206l-.004-.015a.04.04 0 0 0-.024-.02h-.016c-1.03.244-2.087.366-3.146.364c-1.824 0-2.314-.856-2.455-1.212a3.7 3.7 0 0 1-.213-.955a.035.035 0 0 1 .028-.036h.016a13.3 13.3 0 0 0 3.095.364q.375.002.751-.007c1.049-.03 2.154-.082 3.186-.281l.073-.016c1.627-.31 3.176-1.28 3.333-3.736c.006-.097.02-1.013.02-1.113c.002-.342.112-2.42-.015-3.697m-2.505 6.13h-1.71V5.69c0-.873-.368-1.318-1.116-1.318c-.822 0-1.234.526-1.234 1.566v2.27h-1.7v-2.27c0-1.04-.413-1.566-1.235-1.566c-.744 0-1.115.445-1.116 1.318v4.145h-1.71v-4.27q0-1.31.677-2.08c.464-.513 1.074-.776 1.83-.776q1.316 0 1.979.999l.426.706l.426-.706c.441-.666 1.103-.999 1.977-.999c.756 0 1.366.263 1.832.776q.675.77.676 2.08z"
></path>
</svg>

6
src/pages/en/links.astro
View File

@ -1,3 +1,7 @@
---
import Layout from "@/layouts/Layout.astro"
import LinksPage from "@/components/myLinks/LinksPage.astro"
---
<Layout title="My links">
<LinksPage />
</Layout>

13
src/pages/index.astro
View File

@ -3,19 +3,6 @@ import Layout from "../layouts/Layout.astro"
import Greeting from "../components/Greeting.astro"
---
<!--
One-pager
- Quick overview of me.
- Image
- Contact
- Email
- LinkedIn
- GitHub
- Education
- Experience
- Skills
- Certifications
-->
<Layout title="Velkommen">
<Greeting />
</Layout>

6
src/pages/links.astro
View File

@ -1,3 +1,7 @@
---
import Layout from "@/layouts/Layout.astro"
import LinksPage from "@/components/myLinks/LinksPage.astro"
---
<Layout title="Mine lenker">
<LinksPage />
</Layout>

3
src/types/icons.ts Normal file
View File

@ -0,0 +1,3 @@
export type Icon = "gitea" | "github" | "mastodon" | "linkedin" | "link" | "status-health"
export type PajamasIcon = `pajamas:${Icon}`

8
src/types/props.ts Normal file
View File

@ -0,0 +1,8 @@
export interface ComponentProps {
class?: string;
title?: string;
}
export interface LinkProps extends ComponentProps {
href: string;
}