feat: some shit
This commit is contained in:
60
src/components/HeroCard.astro
Normal file
60
src/components/HeroCard.astro
Normal file
@ -0,0 +1,60 @@
|
||||
---
|
||||
import markdownToText from "@helpers/markdownToText";
|
||||
import { Card } from "./card";
|
||||
import { useTranslatedPath } from "@i18n/utils";
|
||||
import Image from "@components/Image.astro";
|
||||
|
||||
interface Props {
|
||||
post: {
|
||||
data: {
|
||||
title: string;
|
||||
icon?: string;
|
||||
headerImg?: string;
|
||||
};
|
||||
collection: string;
|
||||
slug: string;
|
||||
body: string;
|
||||
};
|
||||
}
|
||||
|
||||
const {
|
||||
data: { title, headerImg, icon },
|
||||
collection,
|
||||
body,
|
||||
slug,
|
||||
} = Astro.props.post;
|
||||
|
||||
const translatePath = useTranslatedPath(Astro);
|
||||
|
||||
const imagePath = `../content/${collection}/${slug.split("/")[0]}/${headerImg}`;
|
||||
|
||||
const image = headerImg && (await import(imagePath)).default;
|
||||
|
||||
const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
|
||||
---
|
||||
|
||||
<Card
|
||||
classes={`grid gradient border-1 border-neutral overflow-hidden ${image ? "grid-rows-[200px_1fr] sm:grid-rows-none sm:grid-cols-[1fr_200px]" : ""}`}
|
||||
>
|
||||
<Card.Content classes="px-8 py-7 order-last sm:order-first">
|
||||
<Card.Title classes="text-4xl flex items-center gap-2">
|
||||
{icon && <img src={icon} class="h-6" />}
|
||||
{title}
|
||||
</Card.Title>
|
||||
<Card.Description>
|
||||
{markdownToText(body).slice(0, 200)}
|
||||
</Card.Description>
|
||||
<Card.ReadMoreButton link={link} />
|
||||
</Card.Content>
|
||||
{
|
||||
image?.format && (
|
||||
<a href={link}>
|
||||
<Image
|
||||
src={image}
|
||||
alt={"cover for " + title}
|
||||
class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
</Card>
|
||||
@ -1,46 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Card from "./Card.svelte";
|
||||
|
||||
export let title: string;
|
||||
export let subtitle: string;
|
||||
export let image: string;
|
||||
export let description: string;
|
||||
export let link: string;
|
||||
</script>
|
||||
|
||||
<Card></Card>
|
||||
|
||||
<style>
|
||||
.hero-card-wrapper {
|
||||
display: flex;
|
||||
border-radius: var(--border-radius-md);
|
||||
background-color: var(--background);
|
||||
border: solid thin var(--outline);
|
||||
}
|
||||
|
||||
.hero-card-image {
|
||||
flex: 1;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: var(--border-radius-md) 0px 0px var(--border-radius-md);
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.hero-card-content {
|
||||
flex: 1;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,18 @@
|
||||
---
|
||||
import type { ImageMetadata } from "astro";
|
||||
import { Image as AstroImage } from "astro:assets";
|
||||
import { Picture as AstroImage } from "astro:assets";
|
||||
interface Props {
|
||||
src: ImageMetadata;
|
||||
alt: string;
|
||||
class?: string;
|
||||
caption?: string;
|
||||
maxWidth?: number;
|
||||
}
|
||||
|
||||
const { src: image, alt, maxWidth } = Astro.props;
|
||||
|
||||
console.log({ image, alt, maxWidth });
|
||||
|
||||
const sizes = [
|
||||
{
|
||||
width: 240,
|
||||
@ -32,14 +35,9 @@ const sizes = [
|
||||
<AstroImage
|
||||
src={image}
|
||||
alt={alt}
|
||||
class={Astro.props.class}
|
||||
widths={sizes.map((size) => size.width)}
|
||||
sizes={sizes
|
||||
.map((size) => `${size.media || "100vw"} ${size.width}px`)
|
||||
.join(", ")}
|
||||
/>
|
||||
|
||||
<style>
|
||||
img {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
391
src/components/ImageGallery.svelte
Normal file
391
src/components/ImageGallery.svelte
Normal file
@ -0,0 +1,391 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { fade } from "svelte/transition";
|
||||
import normalizeWheel from "@helpers/normalizeWheel";
|
||||
let images = [];
|
||||
let progress = [];
|
||||
let currentIndex = -1;
|
||||
const maxZoom = 5;
|
||||
import { swipe } from "svelte-gestures";
|
||||
|
||||
const mod = (a: number, b: number) => ((a % b) + b) % b;
|
||||
|
||||
const lerp = (a: number, b: number, t: number) => a * t + b * (1 - t);
|
||||
|
||||
const addIndex = (offset: number) => {
|
||||
return setIndex(mod(currentIndex + offset, images.length));
|
||||
};
|
||||
|
||||
let mx = 0,
|
||||
my = 0,
|
||||
_mx = 0,
|
||||
_my = 0,
|
||||
scale = 1;
|
||||
|
||||
const setIndex = (index: number) => {
|
||||
mx = window.innerWidth / 2;
|
||||
my = window.innerHeight / 2;
|
||||
scale = 1;
|
||||
if (index < 0) {
|
||||
document.body.style.overflowY = "auto";
|
||||
} else {
|
||||
document.body.style.overflowY = "hidden";
|
||||
}
|
||||
currentIndex = index;
|
||||
};
|
||||
|
||||
const handleKeyDown = ({ key }) => {
|
||||
if (currentIndex < 0) return;
|
||||
if (key === "Escape" && currentIndex > -1) setIndex(-1);
|
||||
if (key === "ArrowLeft") addIndex(-1);
|
||||
if (key === "ArrowRight") addIndex(+1);
|
||||
};
|
||||
|
||||
const handleOriginalLoading = async (image) => {
|
||||
if (!image.startedLoading) {
|
||||
image.startedLoading = true;
|
||||
let cIndex = currentIndex;
|
||||
if (image.original) {
|
||||
const response = await fetch(image.original, {
|
||||
headers: {
|
||||
"Accept-Encoding": "gzip, deflate, br",
|
||||
"Content-Type":
|
||||
"image/avif,image/webp,image/apng,image/svg+xml,image/jpeg,image/png,image/*,*/*;q=0.8",
|
||||
},
|
||||
});
|
||||
const total = Number(response.headers.get("content-length"));
|
||||
const reader = response.body.getReader();
|
||||
let bytesReceived = 0;
|
||||
let chunks = [];
|
||||
console.log("[SLIDER] started loading " + image.original);
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) {
|
||||
console.log("[SLIDER] Image complete");
|
||||
break;
|
||||
}
|
||||
chunks.push(value);
|
||||
if (total) {
|
||||
bytesReceived += value.length;
|
||||
progress[cIndex] = bytesReceived / total;
|
||||
console.log(
|
||||
"[SLIDER] " + Math.floor(progress[cIndex] * 1000) / 10 + "%",
|
||||
);
|
||||
progress = progress;
|
||||
}
|
||||
}
|
||||
|
||||
const b = new Blob(chunks);
|
||||
images[cIndex].loaded = URL.createObjectURL(b);
|
||||
images = images;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function handleSwipe(ev: any) {
|
||||
if (currentIndex === -1) return;
|
||||
if (ev.detail.direction === "right") addIndex(-1);
|
||||
if (ev.detail.direction === "left") addIndex(+1);
|
||||
}
|
||||
|
||||
const handleScroll = (ev: WheelEvent) => {
|
||||
const { pixelY } = normalizeWheel(ev);
|
||||
scale = Math.min(Math.max(scale - pixelY / 100, 1), maxZoom);
|
||||
if (scale > 3) {
|
||||
handleOriginalLoading(images[currentIndex]);
|
||||
}
|
||||
};
|
||||
|
||||
let isUpdating = false;
|
||||
const update = () => {
|
||||
isUpdating && requestAnimationFrame(update);
|
||||
|
||||
let dist = Math.abs(mx - _mx) + Math.abs(my - _my);
|
||||
|
||||
if (dist < 0.1 || scale == 1) {
|
||||
mx = _mx;
|
||||
my = _my;
|
||||
isUpdating = false;
|
||||
} else {
|
||||
let s = (0.2 + (1 - scale / maxZoom) * 0.8) * 0.3;
|
||||
mx = lerp(mx, _mx, 1 - s);
|
||||
my = lerp(my, _my, 1 - s);
|
||||
}
|
||||
};
|
||||
|
||||
const startUpdate = () => {
|
||||
if (!isUpdating && scale !== 1) {
|
||||
isUpdating = true;
|
||||
update();
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseMove = (ev: MouseEvent) => {
|
||||
_mx = ev.clientX;
|
||||
_my = ev.clientY;
|
||||
startUpdate();
|
||||
};
|
||||
|
||||
const handlePointerMove = () => {
|
||||
// console.log(ev);
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
const wrappers = Array.prototype.slice.call(
|
||||
document.querySelectorAll("[data-image-component]"),
|
||||
);
|
||||
console.log({ wrappers });
|
||||
|
||||
images = wrappers.map((image, i: number) => {
|
||||
console.log({ image });
|
||||
image.classList.add("image-active");
|
||||
image.addEventListener("click", () => setIndex(i));
|
||||
image.addEventListener("touch", () => setIndex(i));
|
||||
image.style.cursor = "pointer";
|
||||
|
||||
image.addEventListener("error", () => {
|
||||
console.log("Error loading", image);
|
||||
});
|
||||
|
||||
let exif = null;
|
||||
|
||||
try {
|
||||
let rawExif = image.getAttribute("data-exif");
|
||||
exif = JSON.parse(rawExif);
|
||||
} catch (error) {
|
||||
// No biggie
|
||||
}
|
||||
|
||||
return {
|
||||
exif,
|
||||
// preview: preview.getAttribute("src"),
|
||||
src: image.getAttribute("srcset"),
|
||||
alt: image.getAttribute("alt"),
|
||||
sizes: image.getAttribute("sizes"),
|
||||
original: image.getAttribute("data-original"),
|
||||
originalLoaded: false,
|
||||
};
|
||||
});
|
||||
|
||||
return () => {
|
||||
wrappers.forEach(({ children: [_, image] }, i: number) => {
|
||||
image.removeEventListener("click", () => setIndex(i));
|
||||
});
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleKeyDown} />
|
||||
|
||||
<div class="image-wrapper">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div class="gallery-wrapper" class:visible={currentIndex > -1}>
|
||||
{#if images.length > 1}
|
||||
<div class="controls">
|
||||
{#each images as _, i}
|
||||
<button
|
||||
class:active={currentIndex === i}
|
||||
on:click={() => {
|
||||
currentIndex = i;
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button class="left" on:click={() => addIndex(-1)}><</button>
|
||||
<button class="right" on:click={() => addIndex(+1)}>></button>
|
||||
<button class="close" on:click={() => setIndex(-1)}>X</button>
|
||||
|
||||
{#if currentIndex > -1}
|
||||
<div
|
||||
class="image"
|
||||
use:swipe
|
||||
on:swipe={handleSwipe}
|
||||
on:wheel|passive={handleScroll}
|
||||
on:mousemove={handleMouseMove}
|
||||
on:pointermove={handlePointerMove}
|
||||
>
|
||||
{#if progress[currentIndex] && progress[currentIndex] < 0.99}
|
||||
<div
|
||||
transition:fade
|
||||
id="progress"
|
||||
style={`transform: scaleX(${progress[currentIndex]});`}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<img
|
||||
class="background"
|
||||
src={images[currentIndex].preview}
|
||||
alt="background blur"
|
||||
/>
|
||||
|
||||
<span>
|
||||
<img
|
||||
style={`transform: scale(${scale}); transform-origin: ${
|
||||
window.innerWidth - mx
|
||||
}px ${window.innerHeight - my}px`}
|
||||
srcset={images[currentIndex].loaded ? "" : images[currentIndex].src}
|
||||
src={images[currentIndex].loaded}
|
||||
alt={images[currentIndex].alt}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{#if images[currentIndex].exif}
|
||||
{@const exif = images[currentIndex].exif}
|
||||
<div class="exif" on:click={() => console.log(exif)}>
|
||||
{#if "FocalLength" in exif}
|
||||
{exif.FocalLength}mm |
|
||||
{/if}
|
||||
|
||||
{#if "FNumber" in exif}
|
||||
<i>f</i>{exif.FNumber} |
|
||||
{/if}
|
||||
|
||||
{#if "ExposureTime" in exif}
|
||||
{exif.ExposureTime.replace(" s", "s")} |
|
||||
{/if}
|
||||
|
||||
{#if "Date" in exif}
|
||||
{exif.Date}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#progress {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 10px;
|
||||
z-index: 99;
|
||||
left: 47px;
|
||||
background-color: black;
|
||||
width: calc(100% - 94px);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.gallery-wrapper {
|
||||
position: fixed;
|
||||
z-index: 199;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: rgba(24, 24, 24, 0.99);
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.gallery-wrapper.visible {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image > span {
|
||||
height: calc(100vh - 70px);
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.image img {
|
||||
position: relative;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 98;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
transform-origin 0.1s linear;
|
||||
}
|
||||
|
||||
.image > .background {
|
||||
filter: brightness(0.2);
|
||||
position: absolute;
|
||||
opacity: 0.3;
|
||||
width: 100%;
|
||||
z-index: 98;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.controls {
|
||||
width: fit-content;
|
||||
left: 50vw;
|
||||
transform: translateX(-50%);
|
||||
background: black;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.controls > button {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-style: none;
|
||||
background: black;
|
||||
border: solid 1px white;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.controls > button.active {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.exif {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 50vw;
|
||||
transform: translateX(-50%);
|
||||
z-index: 99;
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
font-size: 0.8em;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.gallery-wrapper > button {
|
||||
background: black;
|
||||
color: white;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
position: fixed;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
122
src/components/ImageSlider.svelte
Normal file
122
src/components/ImageSlider.svelte
Normal file
@ -0,0 +1,122 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let slot: HTMLDivElement;
|
||||
let images: HTMLImageElement[];
|
||||
|
||||
export let title: string;
|
||||
|
||||
let altText: string;
|
||||
let height: number;
|
||||
let loaded = false;
|
||||
|
||||
function hide(img: HTMLImageElement) {
|
||||
img.classList.remove("active");
|
||||
}
|
||||
|
||||
function show(img: HTMLImageElement) {
|
||||
img.classList.add("active");
|
||||
if (img?.alt) altText = img.alt;
|
||||
else altText = "";
|
||||
height = img.getBoundingClientRect().height;
|
||||
setTimeout(() => {
|
||||
height = img.getBoundingClientRect().height;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
let index = 0;
|
||||
function setIndex(i: number) {
|
||||
if (i < 0) i = images.length - 1;
|
||||
if (i >= images.length) i = 0;
|
||||
hide(images[index]);
|
||||
index = i;
|
||||
show(images[index]);
|
||||
}
|
||||
|
||||
$: if (slot) {
|
||||
images = Array.from(slot.querySelectorAll("img"));
|
||||
if (images?.length) {
|
||||
images.forEach(hide);
|
||||
show(images[index]);
|
||||
images[index].onload = () => {
|
||||
loaded = true;
|
||||
height = images[index].getBoundingClientRect().height;
|
||||
};
|
||||
}
|
||||
setTimeout(() => {
|
||||
loaded = true;
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="wrapper grid overflow-hidden rounded-xl border border-light"
|
||||
class:title
|
||||
class:loaded
|
||||
style={`--height:${height}px`}
|
||||
>
|
||||
{#if title}
|
||||
<div class="flex items-center p-x-4 bg">
|
||||
<h3>{title}</h3>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="images" bind:this={slot}>
|
||||
<slot />
|
||||
</div>
|
||||
<div class="p-2 flex place-content-between bg">
|
||||
<p>{index + 1}/{images?.length}</p>
|
||||
{#if altText}
|
||||
<p class="text-right">{altText}</p>
|
||||
{/if}
|
||||
<div class="overflow-hidden rounded-md bg-light gap-2 flex p-1">
|
||||
<button
|
||||
class="flex-1 i-tabler-arrow-left"
|
||||
aria-label="previous image"
|
||||
on:click={() => setIndex(index - 1)}
|
||||
/>
|
||||
<button
|
||||
class="flex-1 i-tabler-arrow-right"
|
||||
aria-label="next image"
|
||||
on:click={() => setIndex(index + 1)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
grid-template-rows: 1fr 40px;
|
||||
transition: height 0.3s;
|
||||
}
|
||||
|
||||
.wrapper :global(.image-wrapper) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.wrapper.title {
|
||||
grid-template-rows: 40px 1fr 40px;
|
||||
}
|
||||
|
||||
.loaded {
|
||||
height: calc(var(--height) + 40px);
|
||||
}
|
||||
|
||||
.wrapper.title.loaded {
|
||||
height: calc(var(--height) + 80px);
|
||||
}
|
||||
|
||||
.images :global(img) {
|
||||
border-radius: 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.images :global(.active) {
|
||||
position: relative;
|
||||
display: block !important;
|
||||
opacity: 1;
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
display 0.3s 0.3s;
|
||||
}
|
||||
</style>
|
||||
33
src/components/LinkCard.astro
Normal file
33
src/components/LinkCard.astro
Normal file
@ -0,0 +1,33 @@
|
||||
---
|
||||
interface Props {
|
||||
link: string;
|
||||
title: string;
|
||||
icon?: string;
|
||||
}
|
||||
---
|
||||
|
||||
<a
|
||||
href={Astro.props.link}
|
||||
class="rounded-diag-md border border-neutral p-4 overflow-hidden flex items-center justify-center pacity-50"
|
||||
>
|
||||
<h2
|
||||
class="text-2xl flex gap-3 transition-gap items-center line-clamp text-ellipsis overflow-hidden"
|
||||
>
|
||||
{Astro.props.title}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-circle-arrow-right"
|
||||
><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
|
||||
d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18"></path><path d="M16 12l-4 -4"
|
||||
></path><path d="M16 12h-8"></path><path d="M12 16l4 -4"></path></svg
|
||||
>
|
||||
</h2>
|
||||
</a>
|
||||
@ -16,6 +16,7 @@
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<title>home icon</title>
|
||||
<path
|
||||
id="l1"
|
||||
d="M1 1H30C41.0457 1 50 9.95431 50 21V50H21C9.9543 50 1 41.0457 1 30V1Z"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
@ -10,7 +10,7 @@ const t = useTranslations(Astro);
|
||||
---
|
||||
|
||||
<Card
|
||||
classes="googley-eye-target relative rounded-diag-md border border-light gradient grid grid-cols-[250px_1fr] h-[180px] my-8xl"
|
||||
classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid grid-cols-[250px_1fr] h-[180px] mt-8"
|
||||
>
|
||||
<div class="image">
|
||||
<Image src={MaxImg} alt="its mee" maxWidth={700} />
|
||||
@ -39,6 +39,16 @@ const t = useTranslations(Astro);
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.image::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 80%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(-12deg, var(--background) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.image > :global(img) {
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
@ -50,7 +60,7 @@ const t = useTranslations(Astro);
|
||||
}
|
||||
.eye.left {
|
||||
top: 29%;
|
||||
right: 27%;
|
||||
right: 28%;
|
||||
}
|
||||
.eye.right {
|
||||
top: 31%;
|
||||
|
||||
45
src/components/SmallCard.astro
Normal file
45
src/components/SmallCard.astro
Normal file
@ -0,0 +1,45 @@
|
||||
---
|
||||
import markdownToText from "@helpers/markdownToText";
|
||||
|
||||
interface Props {
|
||||
post: {
|
||||
data: {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
tags: string[];
|
||||
};
|
||||
collection: string;
|
||||
body: string;
|
||||
slug: string;
|
||||
};
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
---
|
||||
|
||||
<a
|
||||
href={`/${post.collection}/${post.slug.split("/").pop()}`}
|
||||
class="rounded-diag-md border border-neutral p-4 overflow-hidden"
|
||||
>
|
||||
<h2
|
||||
class="text-2xl flex gap-2 items-center line-clamp text-ellipsis overflow-hidden"
|
||||
>
|
||||
{post.data.icon && <img src={post.data.icon} class="h-6" />}
|
||||
{post.data.title}
|
||||
</h2>
|
||||
<p class="text-ellipsis overflow-hidden line-clamp-2">
|
||||
{post.data.description || markdownToText(post.body).slice(0, 200)}
|
||||
</p>
|
||||
{
|
||||
post.data.tags && (
|
||||
<div class="flex gap-2 mt-2">
|
||||
{post.data.tags.map((tag) => (
|
||||
<span class="text-xs border border-neutral p-2 rounded-md">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</a>
|
||||
21
src/components/arrows/ArrowA.astro
Normal file
21
src/components/arrows/ArrowA.astro
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
import { useTranslations } from "@i18n/utils";
|
||||
const t = useTranslations(Astro);
|
||||
---
|
||||
|
||||
<div class="arrow flex items-center gap-2">
|
||||
<img src="/images/arrow_a.svg" alt="Arrow" />
|
||||
<p class="text-xl">{t("latest-projects")}</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.arrow {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: rotate(10deg) translateX(110%) translateY(50px);
|
||||
}
|
||||
.arrow > p {
|
||||
color: #414152;
|
||||
transform: rotate(15deg) translateY(16px) translateX(4px);
|
||||
}
|
||||
</style>
|
||||
21
src/components/arrows/ArrowB.astro
Normal file
21
src/components/arrows/ArrowB.astro
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
import { useTranslations } from "@i18n/utils";
|
||||
const t = useTranslations(Astro);
|
||||
---
|
||||
|
||||
<div class="arrow flex items-center gap-2">
|
||||
<p class="text-xl">{t("latest-posts")}</p>
|
||||
<img src="/images/arrow_b.svg" alt="Arrow" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.arrow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: translateX(-110%) translateY(-160px);
|
||||
}
|
||||
.arrow > p {
|
||||
color: #414152;
|
||||
transform: rotate(-26deg) translateY(34px) translateX(-10px);
|
||||
}
|
||||
</style>
|
||||
@ -2,6 +2,6 @@
|
||||
export let classes = "";
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col gap-4 {classes} w-[66%]">
|
||||
<div class="flex flex-2 flex-col gap-4 {classes}">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<script lang="ts">
|
||||
export let alt: string;
|
||||
export let src: string;
|
||||
export let width: number;
|
||||
export let height: number;
|
||||
export let width: number | undefined;
|
||||
export let height: number | undefined;
|
||||
</script>
|
||||
|
||||
<img {src} {alt} {width} {height} />
|
||||
<img {src} {alt} {width} {height} class="flex-1" />
|
||||
|
||||
<style>
|
||||
img {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<script lang="ts">
|
||||
export let link: string;
|
||||
export let text = "read more";
|
||||
</script>
|
||||
|
||||
<a
|
||||
href={link}
|
||||
data-astro-prefetch
|
||||
class="bg-light p-2 text-s rounded-md px-4 flex flex-0 items-center gap-2 w-fit"
|
||||
>
|
||||
read more <span class="i-tabler-arrow-right inline-block w-4 h-4" />
|
||||
>{text}<span class="i-tabler-arrow-right inline-block w-4 h-4" />
|
||||
</a>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
export let classes = "";
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl">
|
||||
<h2 class="text-3xl {classes}">
|
||||
<slot />
|
||||
</h2>
|
||||
|
||||
@ -2,18 +2,8 @@
|
||||
export let classes = "flex bg";
|
||||
</script>
|
||||
|
||||
<div class="relative rounded-diag-md {classes} noise">
|
||||
<div
|
||||
class="relative rounded-diag-md {classes} noise card-wrapper items-stretch"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card-wrapper {
|
||||
align-items: stretch;
|
||||
|
||||
min-height: 200px;
|
||||
border: solid thin var(--outline);
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user