juanmanzanero/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize posts images and other improvements

Browse Source
This commit is contained in:
Juan Carlos Manzanero Domínguez
2024-06-25 17:13:28 -06:00
parent 9c3e631c78
commit ec3bccb0de
13 changed files with 80 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/mdx/astro-image.astro
View File

@ -5,9 +5,16 @@ const { src, alt } = Astro.props;
---
<Image
id="img"
src={src}
alt={alt}
width={1092}
height={986}
class="w-auto h-auto rounded-md aspect-auto"
class=".markdown-image w-auto h-auto rounded-md aspect-auto"
/>
<script>
const image = document.getElementById("img")!;
image.setAttribute("loading", "eager");
</script>

38
src/components/microblog-item.astro Normal file
View File

@ -0,0 +1,38 @@
---
import { marked } from "marked";
import formatDate from "@/utils/format-date";
import type { MicroblogsResponse, TagsResponse } from "@/utils/pocketbase";
type Props = MicroblogsResponse<unknown> & {
props: {
tags: TagsResponse[];
};
};
const props = Astro.props;
const content = marked.parse(props.content);
---
<article class="rounded-md border px-4 py-2">
<header class="mb-2">
<div class="flex items-center justify-between text-sm">
<span class="font-light">
{formatDate(new Date(props.published))}{" "}
</span>
<span class="text-sm font-thin">
{new Date(props.published).toLocaleTimeString()}
</span>
</div>
<div class="mt-1">
{
props &&
props.expand.tags &&
props.expand.tags.map(
(tag: any) =>
tag && <span class="text-sm">#{tag.name} </span>,
)
}
</div>
</header>
<main set:html={content} />
</article>

41
src/components/microblog-item.tsx
View File

@ -1,41 +0,0 @@
import ReactMarkdown from "react-markdown";
import type { MicroblogsResponse, TagsResponse } from "@/utils/pocketbase";
import formatDate from "@/utils/format-date";
type Props = MicroblogsResponse<unknown> & {
expand: {
tags: TagsResponse[];
};
};
export default function MicroblogItem(props: Props) {
return (
<article className="rounded-sm border px-4 py-2">
<header className="mb-2">
<div className="flex items-center justify-between text-sm">
<span className="font-light">
{formatDate(new Date(props.published))}{" "}
</span>
<span className="text-sm font-thin">
{new Date(props.published).toLocaleTimeString()}
</span>
</div>
<div className="mt-1">
{props.expand &&
props.expand.tags &&
props.expand.tags.map(
(tag) =>
tag && (
<span className="text-sm" key={tag.id}>
#{tag.name}{" "}
</span>
),
)}
</div>
</header>
<main>
<ReactMarkdown>{props.content}</ReactMarkdown>
</main>
</article>
);
}

7
src/components/navbar.astro
View File

@ -1,8 +1,8 @@
---
import { navItems } from "@/utils/nav-links";
import MobileMenu from "@/components/mobile-menu";
import logo from "@/assets/logo.png";
import { Image } from "astro:assets";
import { navItems } from "@/utils/nav-links";
import MobileMenu from "@/components/mobile-menu";
import LinkButton from "@/components/link-button";
---
@ -23,6 +23,7 @@ import LinkButton from "@/components/link-button";
src={logo}
width={80}
height={80}
loading="eager"
class="w-auto h-auto"
alt="juancmandev logo"
/>
@ -31,7 +32,7 @@ import LinkButton from "@/components/link-button";
<section class="hidden items-center md:flex">
<ul class="flex items-center gap-1">
{
navItems.map((navItem) => (
navItems.map((navItem: any) => (
<li class="w-max h-max">
<LinkButton
variant="link"

2
src/pages/[...slug].astro
View File

@ -11,7 +11,7 @@ interface Props {
export async function getStaticPaths() {
const allPages = await getCollection("pages");
return allPages.map((page) => ({
return allPages.map((page: CollectionEntry<"pages">) => ({
params: { slug: page.slug },
props: { page },
}));

8
src/pages/blog/index.astro
View File

@ -1,13 +1,11 @@
---
import PostItem from "@/components/post-item";
import Layout from "@/layouts/Layout.astro";
import { sortContentByDate } from "@/utils/sorts";
import { getCollection } from "astro:content";
const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
allPosts.sort(
(a, b) =>
Date.parse(b.data.date.toString()) - Date.parse(a.data.date.toString()),
);
sortContentByDate(allPosts);
---
<Layout title="Blog" description="Check my projects.">
@ -17,7 +15,7 @@ allPosts.sort(
</section>
<ul class="mt-4 flex flex-col gap-4">
{
allPosts.map((blogpost) => (
allPosts.map((blogpost: any) => (
<li>
<PostItem
type="blog"

15
src/pages/index.astro
View File

@ -3,22 +3,17 @@ import Layout from "@/layouts/Layout.astro";
import LinkButton from "@/components/link-button";
import { getCollection } from "astro:content";
import PostItem from "@/components/post-item";
import { sortContentByDate } from "@/utils/sorts";
const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
allPosts.sort(
(a, b) =>
Date.parse(b.data.date.toString()) - Date.parse(a.data.date.toString()),
);
sortContentByDate(allPosts);
const last3Blogs = allPosts.slice(0, 3);
const allProjects = await getCollection(
"portfolio",
({ data }) => data.draft !== true,
);
allProjects.sort(
(a, b) =>
Date.parse(b.data.date.toString()) - Date.parse(a.data.date.toString()),
);
sortContentByDate(allProjects);
const last3Projects = allProjects.slice(0, 3);
---
@ -46,7 +41,7 @@ const last3Projects = allProjects.slice(0, 3);
<h2 class="text-3xl">Latest posts</h2>
<ul class="mt-4 flex flex-col gap-4">
{
last3Blogs.map((blogpost) => (
last3Blogs.map((blogpost: any) => (
<li>
<PostItem
type="blog"
@ -66,7 +61,7 @@ const last3Projects = allProjects.slice(0, 3);
<h2 class="text-3xl">Latest projects</h2>
<ul class="mt-4 flex flex-col gap-4">
{
last3Projects.map((project) => (
last3Projects.map((project: any) => (
<li>
<PostItem
type="portfolio"

2
src/pages/microblog.astro
View File

@ -1,5 +1,5 @@
---
import MicroblogItem from "@/components/microblog-item";
import MicroblogItem from "@/components/microblog-item.astro";
import Layout from "@/layouts/Layout.astro";
import { createServerClient } from "@/utils/pocketbase";

8
src/pages/portfolio/index.astro
View File

@ -1,16 +1,14 @@
---
import PostItem from "@/components/post-item";
import Layout from "@/layouts/Layout.astro";
import { sortContentByDate } from "@/utils/sorts";
import { getCollection } from "astro:content";
const allProjects = await getCollection(
"portfolio",
({ data }) => data.draft !== true,
);
allProjects.sort(
(a, b) =>
Date.parse(b.data.date.toString()) - Date.parse(a.data.date.toString()),
);
sortContentByDate(allProjects);
---
<Layout title="Blog" description="Long format about thoughts and other topics.">
@ -20,7 +18,7 @@ allProjects.sort(
</section>
<ul class="mt-4 flex flex-col gap-4">
{
allProjects.map((project) => (
allProjects.map((project: any) => (
<li>
<PostItem
type="portfolio"

1
src/utils/nav-links.tsx → src/utils/nav-links.ts
View File

@ -12,7 +12,6 @@ export const navItems: TNavItem[] = [
label: "Portfolio",
to: "/portfolio",
},
{
label: "Microblog",
to: "/microblog",

6
src/utils/sorts.ts Normal file
View File

@ -0,0 +1,6 @@
export function sortContentByDate(array: any[]) {
array.sort(
(a: any, b: any) =>
Date.parse(b.data.date.toString()) - Date.parse(a.data.date.toString()),
);
}