mirror of
https://codeberg.org/JasterV/jaster.xyz.git
synced 2026-04-26 18:10:01 +00:00
[fix] Typescript types
This commit is contained in:
JasterV
parent
de6a31c290
commit
162296bfe0
5 changed files with 100 additions and 100 deletions
91
src/components/Header.astro
Normal file
91
src/components/Header.astro
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import profileImage from "@assets/profile.jpeg";
|
||||
---
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<span>|</span>
|
||||
<a href="/">Home</a>
|
||||
<span>|</span>
|
||||
<a href="/blog">Blog</a>
|
||||
<span>|</span>
|
||||
<a href="https://github.com/JasterV">
|
||||
<Icon size="1.5rem" name="mdi:github" />
|
||||
</a>
|
||||
<a href="https://linkedin.com/in/jaster-victor/">
|
||||
<Icon size="1.5rem" name="mdi:linkedin" />
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="profile">
|
||||
<a href="/">
|
||||
<div class="profile-image-wrapper">
|
||||
<Image src={profileImage} alt="profile image" class="profile-image" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>Victor Martinez</h2>
|
||||
<p class="description">/* Be a catalyst for change */</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--text-color-light);
|
||||
font-size: 0.9rem;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding-top: 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.profile-image-wrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-image-wrapper:hover {
|
||||
border-color: var(--violet300);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: -35%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 636px) {
|
||||
header {
|
||||
flex-direction: row-reverse;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +1,16 @@
|
|||
---
|
||||
import type { ImageMetadata } from "astro";
|
||||
import { getImage, Image } from "astro:assets";
|
||||
import profileImage from "@assets/profile.jpeg";
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
import { getImage } from "astro:assets";
|
||||
import Header from "@components/Header.astro";
|
||||
import "@styles/global.scss";
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
title: string;
|
||||
backgroundImage: ImageMetadata;
|
||||
}
|
||||
|
||||
const { title, backgroundImage } = Astro.props;
|
||||
|
||||
const optimizedBgImage = await getImage({ src: backgroundImage });
|
||||
|
||||
const backgroundImageUrl = `url('${optimizedBgImage.src}')`;
|
||||
---
|
||||
|
||||
|
|
@ -28,38 +24,7 @@ const backgroundImageUrl = `url('${optimizedBgImage.src}')`;
|
|||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<nav>
|
||||
<span>|</span>
|
||||
<a href="/">Home</a>
|
||||
<span>|</span>
|
||||
<a href="/blog">Blog</a>
|
||||
<span>|</span>
|
||||
|
||||
<a href="https://github.com/JasterV">
|
||||
<Icon size="1.5rem" name="mdi:github" />
|
||||
</a>
|
||||
<a href="https://linkedin.com/in/jaster-victor/">
|
||||
<Icon size="1.5rem" name="mdi:linkedin" />
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="profile">
|
||||
<a href="/">
|
||||
<div class="profile-image-wrapper">
|
||||
<Image
|
||||
src={profileImage}
|
||||
alt="profile image"
|
||||
class="profile-image"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>Victor Martinez</h2>
|
||||
<p class="description">/* Be a catalyst for change */</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<Header />
|
||||
|
||||
<main>
|
||||
<slot />
|
||||
|
|
@ -118,60 +83,4 @@ const backgroundImageUrl = `url('${optimizedBgImage.src}')`;
|
|||
margin-top: auto;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--text-color-light);
|
||||
font-size: 0.9rem;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding-top: 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.profile-image-wrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-image-wrapper:hover {
|
||||
border-color: var(--violet300);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: -35%;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 636px) {
|
||||
header {
|
||||
flex-direction: row-reverse;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ type Props = CollectionEntry<"blog">["data"];
|
|||
const { title, pubDate, image } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout backgroundImage={backgroundImage}>
|
||||
<BaseLayout title={title} backgroundImage={backgroundImage}>
|
||||
<article>
|
||||
<header>
|
||||
<Image src={image} width="90" alt="Header pic" />
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { type CollectionEntry, getCollection } from "astro:content";
|
|||
import PostLayout from "../../layouts/PostLayout.astro";
|
||||
import { render } from "astro:content";
|
||||
|
||||
type Props = CollectionEntry<"Blog">;
|
||||
type Post = CollectionEntry<"Blog">;
|
||||
type Props = CollectionEntry<"blog">;
|
||||
type Post = CollectionEntry<"blog">;
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("blog");
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import backgroundImage from "@assets/blog-bg.jpg";
|
|||
import { type CollectionEntry, getCollection } from "astro:content";
|
||||
import FormattedDate from "@components/FormattedDate.astro";
|
||||
|
||||
type PostEntry = CollectionEntry<"Blog">;
|
||||
type PostEntry = CollectionEntry<"blog">;
|
||||
|
||||
const posts: PostEntry[] = await getCollection("blog");
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ const sortedPosts = posts.sort(
|
|||
);
|
||||
---
|
||||
|
||||
<Layout title="Blog" , backgroundImage={backgroundImage}>
|
||||
<Layout title="Blog" backgroundImage={backgroundImage}>
|
||||
<div class="post-cards">
|
||||
{
|
||||
sortedPosts.map((post) => (
|
||||
|
|
|
|||
Loading…
Reference in a new issue