Skip to content

Commit

Permalink
fix(articles): broken main image (#22)
Browse files Browse the repository at this point in the history
* fix(articles): broken main image

* fix(article): removed unused import

* fix(articles) update image size
  • Loading branch information
pr0xity authored Oct 7, 2024
1 parent 4e6d6cd commit 66ed122
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 75 deletions.
7 changes: 3 additions & 4 deletions src/components/NewsComp.astro
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,20 @@ const articles = await fetchArticles({
<h3 class="text-xl text-white font-bold mt-2">{article.title}</h3>
<time
datetime={article.meta.first_published_at}
class="text-sm text-gray-500"
>
class="text-sm text-gray-500">
{new Date(article.meta.first_published_at).toLocaleDateString(
"en-US",
{
year: "numeric",
month: "long",
day: "numeric",
},
}
)}
</time>
</div>
{article.main_image && (
<img
src={article.main_image.full_url}
src={article.main_image.sizes.thumbnail.url}
alt={article.main_image.alt}
class="w-24 h-24 object-cover ml-2 rounded-lg"
/>
Expand Down
7 changes: 3 additions & 4 deletions src/components/sections/NewsComp.astro
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,9 @@ const articles = await fetchArticles({
</h3>
<time
datetime={article.meta.first_published_at}
class="text-sm text-gray-500"
>
class="text-sm text-gray-500">
{new Date(
article.meta.first_published_at,
article.meta.first_published_at
).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
Expand All @@ -61,7 +60,7 @@ const articles = await fetchArticles({
</div>
{article.main_image && (
<img
src={article.main_image.full_url}
src={article.main_image.sizes.thumbnail.url}
alt={article.main_image.alt}
class="w-24 h-24 object-cover ml-2 rounded-lg"
/>
Expand Down
10 changes: 4 additions & 6 deletions src/pages/news/[slug].astro
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
---
import type { Article } from "../../utils";
import H1 from "../../components/H1.astro";
import Main from "../../components/Main.astro";
import Layout from "../../layouts/Layout.astro";
Expand Down Expand Up @@ -33,7 +31,7 @@ const processEmbedTags = (html: string) => {
/<embed[^>]+embedtype="image"[^>]+id="(\d+)"[^>]+alt="([^"]+)"[^>]*>/g,
(match, id, alt) => {
return `<img src="${imageBaseUrl}${id}" alt="${alt}"/>`;
},
}
);
};
Expand Down Expand Up @@ -62,8 +60,7 @@ const finishedHtml = processEmbedTags(article.body);
<!-- Publish Date -->
<time
datetime={article.meta.first_published_at}
class="text-sm text-gray-500 mb-2 block"
>
class="text-sm text-gray-500 mb-2 block">
{new Date(article.meta.first_published_at).toLocaleDateString()}
</time>
<!-- Author -->
Expand All @@ -83,7 +80,8 @@ const finishedHtml = processEmbedTags(article.body);
{
article.main_image && (
<img
src={article.main_image.full_url}
src={article.main_image.sizes.large.url}
srcset={`${article.main_image.sizes.large.url} 500w, ${article.main_image.sizes.extra_large.url} 1000w`}
alt={article.main_image.alt}
class="w-auto h-auto mb-4"
/>
Expand Down
147 changes: 86 additions & 61 deletions src/utils/articles.ts
Original file line number Diff line number Diff line change
@@ -1,88 +1,113 @@
export interface Article {
id: number;
meta: {
type: string;
detail_url: string;
html_url: string;
slug: string;
first_published_at: string;
};
title: string;
intro: string;
body: string;
contributors: Array<{
id: number;
meta: {
type: string;
detail_url: string;
html_url: string;
slug: string;
first_published_at: string;
};
name: string;
contribution_type: string;
image?: string;
}>;
tags: Array<{
id: number;
name: string;
slug: string;
}>;
main_image?: {
title: string;
intro: string;
body: string;
contributors: Array<{
id: number;
name: string;
contribution_type: string;
image?: string;
}>;
tags: Array<{
id: number;
name: string;
slug: string;
}>;
main_image?: {
alt: string;
url: string;
sizes: {
thumbnail: {
url: string;
width: number;
height: number;
};
small: {
url: string;
width: number;
height: number;
};
medium: {
url: string;
full_url: string;
width: number;
height: number;
alt: string;
};
large: {
url: string;
width: number;
height: number;
};
extra_large: {
url: string;
width: number;
height: number;
};
};
};
}

export interface FetchArticlesProps {
api_url: string;
limit?: number;
offset?: number;
tags?: string[];
api_url: string;
limit?: number;
offset?: number;
tags?: string[];
}

export const fetchArticles = async ({
api_url,
tags = [],
limit = 6,
offset = 0,
api_url,
tags = [],
limit = 6,
offset = 0,
}: FetchArticlesProps): Promise<Article[]> => {
const url = new URL(`${api_url}api/v2/news/`);
url.searchParams.set("fields", "title,tags,first_published_at,main_image");
url.searchParams.set("limit", limit.toString(10));
url.searchParams.set("offset", offset.toString(10));
const url = new URL(`${api_url}api/v2/news/`);
url.searchParams.set("fields", "title,tags,first_published_at,main_image");
url.searchParams.set("limit", limit.toString(10));
url.searchParams.set("offset", offset.toString(10));

if (tags?.length) {
url.searchParams.set("tags", tags.join(","));
}
if (tags?.length) {
url.searchParams.set("tags", tags.join(","));
}

const response = await fetch(url.toString());
const data = await response.json();
const articles: Article[] = data.items;
return articles;
const response = await fetch(url.toString());
const data = await response.json();
const articles: Article[] = data.items;
return articles;
};

export const fetchArticleIdBySlug = async ({
slug,
api_url,
slug,
api_url,
}: {
slug: string;
api_url: string;
slug: string;
api_url: string;
}): Promise<number | null> => {
const response = await fetch(`${api_url}api/v2/news/?&slug=${slug}`);
const data = await response.json();
const articles: Article[] = data.items;
if (articles.length > 0) {
return articles[0].id;
} else {
return null;
}
const response = await fetch(`${api_url}api/v2/news/?&slug=${slug}`);
const data = await response.json();
const articles: Article[] = data.items;
if (articles.length > 0) {
return articles[0].id;
} else {
return null;
}
};

export const fetchArticleById = async ({
id,
api_url,
id,
api_url,
}: {
id: number;
api_url: string;
id: number;
api_url: string;
}): Promise<Article> => {
const response = await fetch(`${api_url}api/v2/news/${id}/`);
const data = await response.json();
return data;
const response = await fetch(`${api_url}api/v2/news/${id}/`);
const data = await response.json();
return data;
};

0 comments on commit 66ed122

Please sign in to comment.