Skip to content

Commit

Permalink
updated image processing to get rid of Picture and Image components f…
Browse files Browse the repository at this point in the history 
…or both url and file
  • Loading branch information
@chadananda
chadananda committed Apr 24, 2024
1 parent fcb492c commit adf4523
Show file tree
Hide file tree
Showing 18 changed files with 442 additions and 266 deletions.
4 changes: 2 additions & 2 deletions astro.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import svelte from '@astrojs/svelte';
import markdoc from "@astrojs/markdoc";
import site from './src/data/site.json'; // for branding
// import icon from "astro-icon";
import minify from 'astro-min';
// import minify from 'astro-min';
// import compress from "astro-compress";
// import partytown from '@astrojs/partytown';
import react from "@astrojs/react";
Expand Down Expand Up @@ -70,7 +70,7 @@ export default defineConfig({
}),
// icon(),
// compress(),
minify(minifyConfig),
// minify(minifyConfig),
// partytown()
react(), db()],
experimental: {
Expand Down
95 changes: 47 additions & 48 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,51 +22,49 @@
"moveimages": "node ./src/scripts/_moveimages_s3.js"
},
"dependencies": {
"@astrojs/db": "^0.10.1",
"@astrojs/markdoc": "^0.10.0",
"@astrojs/mdx": "^2.2.2",
"@astrojs/react": "^3.1.0",
"@astrojs/db": "^0.10.6",
"@astrojs/markdoc": "^0.11.0",
"@astrojs/mdx": "^2.3.1",
"@astrojs/react": "^3.3.1",
"@astrojs/rss": "^4.0.5",
"@astrojs/sitemap": "^3.1.2",
"@astrojs/sitemap": "^3.1.4",
"@astrojs/tailwind": "^5.1.0",
"@astrojs/vercel": "^7.5.0",
"@cartamd/plugin-attachment": "^3.1.0",
"@cartamd/plugin-code": "^3.0.1",
"@cartamd/plugin-emoji": "^3.1.0",
"@cartamd/plugin-slash": "^3.1.0",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@astrojs/vercel": "^7.5.4",
"@cartamd/plugin-attachment": "^4.0.0",
"@cartamd/plugin-code": "^4.0.3",
"@cartamd/plugin-emoji": "^4.0.1",
"@cartamd/plugin-slash": "^4.0.1",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/svelte-fontawesome": "^0.2.2",
"@libsql/client": "^0.6.0",
"@nextlint/svelte": "^2.3.2",
"@octokit/rest": "^20.0.2",
"@tiptap/core": "^2.2.4",
"@tiptap/extension-blockquote": "^2.2.4",
"@tiptap/extension-bubble-menu": "^2.2.4",
"@tiptap/extension-document": "^2.2.4",
"@tiptap/extension-floating-menu": "^2.2.4",
"@tiptap/extension-image": "^2.2.4",
"@tiptap/extension-paragraph": "^2.2.4",
"@tiptap/extension-text": "^2.2.4",
"@tiptap/extension-typography": "^2.2.4",
"@tiptap/extension-underline": "^2.2.4",
"@tiptap/pm": "^2.2.4",
"@tiptap/react": "^2.2.4",
"@tiptap/starter-kit": "^2.2.4",
"@types/react": "^18.2.73",
"@types/react-dom": "^18.2.23",
"@nextlint/svelte": "^3.1.0",
"@octokit/rest": "^20.1.0",
"@tiptap/core": "^2.3.0",
"@tiptap/extension-blockquote": "^2.3.0",
"@tiptap/extension-bubble-menu": "^2.3.0",
"@tiptap/extension-document": "^2.3.0",
"@tiptap/extension-floating-menu": "^2.3.0",
"@tiptap/extension-image": "^2.3.0",
"@tiptap/extension-paragraph": "^2.3.0",
"@tiptap/extension-text": "^2.3.0",
"@tiptap/extension-typography": "^2.3.0",
"@tiptap/extension-underline": "^2.3.0",
"@tiptap/pm": "^2.3.0",
"@tiptap/react": "^2.3.0",
"@tiptap/starter-kit": "^2.3.0",
"@types/react": "^18.2.79",
"@types/react-dom": "^18.2.25",
"@vercel/analytics": "^1.2.2",
"@vercel/node": "^3.0.11",
"@vercel/postgres": "^0.7.2",
"@vercel/node": "^3.0.27",
"@vercel/postgres": "^0.8.0",
"@vercel/speed-insights": "^1.0.10",
"argon2": "^0.40.1",
"astro": "^4.5.12",
"astro-compress": "^2.2.21",
"astro": "^4.6.4",
"astro-feather-icons": "^1.0.2",
"astro-min": "^1.2.6",
"astro-navbar": "^2.3.1",
"astro-navbar": "^2.3.2",
"astro-seo": "^0.8.3",
"bcryptjs": "^2.4.3",
"carta-md": "^3.6.1",
"carta-md": "^4.0.0",
"fast-glob": "^3.3.2",
"formidable": "^3.5.1",
"fs-extra": "^11.2.0",
Expand All @@ -79,33 +77,34 @@
"oslo": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.72.0",
"simple-icons-astro": "^11.11.0",
"svelte": "^4.2.12",
"sass": "^1.75.0",
"simple-icons-astro": "^11.13.0",
"svelte": "^4.2.15",
"svelte-tiptap": "^1.1.2",
"tailwindcss": "^3.4.3",
"tiptap-markdown": "^0.8.10",
"vercel": "^34.0.0"
"vercel": "^34.1.1"
},
"devDependencies": {
"@astrojs/svelte": "^5.2.0",
"@fontsource-variable/inter": "^5.0.17",
"@astrojs/svelte": "^5.4.0",
"@fontsource-variable/inter": "^5.0.18",
"@markdoc/markdoc": "^0.4.0",
"@tailwindcss/typography": "^0.5.12",
"astro-critical-css": "^0.0.4",
"aws-sdk": "^2.1589.0",
"aws-sdk": "^2.1605.0",
"axios": "^1.6.8",
"chalk": "^5.3.0",
"dotenv": "^16.4.5",
"elevenlabs": "^0.2.2",
"elevenlabs": "^0.3.0",
"esbuild": "^0.20.2",
"eslint": "^9.0.0",
"inquirer": "^9.2.17",
"eslint": "^9.1.1",
"inquirer": "^9.2.19",
"install": "^0.13.0",
"js-yaml": "^4.1.0",
"npm": "^10.5.0",
"openai": "^4.31.0",
"npm": "^10.5.2",
"openai": "^4.38.3",
"p-limit": "^5.0.0",
"slugify": "^1.6.6"
"slugify": "^1.6.6",
"zod": "^3.23.4"
}
}
45 changes: 16 additions & 29 deletions src/components/article/JSONLD.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,15 @@
import brand from '@data/site.json';
import { SEO, TwitterCardType } from "astro-seo";
import { getImage } from "astro:assets";
import { getArticleAudioPath, getArticleTranslations, getArticleURL, getCategory, getTeamMember } from '@utils/utils.js';
import { getArticleAudioPath, getArticleTranslations, getArticleURL, generateArticleImage } from '@utils/utils.js';
// type Props = CollectionEntry<'article'>['data'];
const { title, description, desc_125, keywords, language, video_main, post_type, audio, audio_duration, url:slug, image } = Astro.props;
const { post, title, description, desc_125, keywords, language, video_main, post_type, audio, audio_duration, url:slug, image } = Astro.props;
const category = Astro.props.category || await getCategory(Astro.props.category);
const author = Astro.props.author || await getTeamMember(Astro.props.authorid);
const category = Astro.props.category;
const author = Astro.props.author;
// const topics = await getEntries(Astro.props.topics);
const topics = Astro.props.topics; // || await filterTopics(Astro.props.topics); // because topics are no longer references
// console.log('topicsList', topics);
// const image = Astro.props.image; // image path of processed image
// for some reason dateModified is not always rendering correctly in Astro
let datePublished = Astro.props.datePublished;
Expand All @@ -36,34 +34,23 @@ const pageURL = getArticleURL(Astro);
const siteURL = new URL(pageURL).origin.replace(/\/$/, '');
const authorSlug = author?.data?.name ? author.id : brand.siteName;
const authorURL = `${siteURL}/author/${authorSlug}`;
const authorURL = `${siteURL}/authors/${authorSlug}`;
// format image for large twitter card
let twitLarge, twitLargeImage;
// console.log('image', image);
if (image) twitLarge = await getImage({ src:image.src, format:"webp", width:600, height:314 });
// console.log('twitLarge', twitLarge);
twitLargeImage = twitLarge ? { url: `${siteURL}${twitLarge.src}`,
width: twitLarge.attributes.width,
height: twitLarge.attributes.height,
} : false;
var video = video_main ? {
url: video_main.videoURL, title: video_main.title, description: video_main.description,
duration: video_main.duration, image: video_main.image, transcript: video_main.transcript,
} : null;
let largeImage, coverImage: {url: '', width: 0, height:0, alt:''};
if (image) {
largeImage = await getImage({ src: image.src, format: "jpeg", width: 1200, height: 600, });
coverImage = {
url: `${siteURL}${largeImage.src}`, alt: desc_125,
width: largeImage.attributes.width, height: largeImage.attributes.height
};
} else console.error('Null image in', slug, image);
// console.log('coverImage', coverImage);
// format image for large twitter card
// console.log('image', image.src);
const twitLargeImage = await generateArticleImage(image.src, post, siteURL, 600,314,'webp',80);
const largeImage = await generateArticleImage(image.src, post, siteURL, 1200,600,'jpeg',80);
const coverImage = await generateArticleImage(image.src, post, siteURL, 1200,600,'jpeg',80); // 1200x600 is the recommended size for OpenGraph images
// console.log('coverImage',coverImage);
let podcast = null;
if (audio) {
Expand All @@ -76,7 +63,7 @@ if (audio) {
duration: audio_duration,
episodeNumber: 1,
seriesName: brand.siteName,
imageURL: coverImage?.url
imageURL: coverImage?.src
}
};
Expand Down Expand Up @@ -145,7 +132,7 @@ const twitterHeaders = twitLargeImage ? {
card: "summary_large_image" as TwitterCardType,
title: title, // max 55 characters
description: desc_125, // max 125 characters
image: twitLargeImage?.url, // 2:1 aspect ratio, min 300x157, max 4096x4096 JPG, PNG, WEBP, and GIF
image: twitLargeImage?.src, // 2:1 aspect ratio, min 300x157, max 4096x4096 JPG, PNG, WEBP, and GIF
imageAlt: coverImage?.alt, // Alt text for the Twitter card image
imageWidth: twitLargeImage?.width,
imageHeight: twitLargeImage?.height,
Expand All @@ -160,7 +147,7 @@ var openGraphHeaders = {
type: post_type.toLowerCase(),
title: title,
description: description, // max 155 characters
image: coverImage?.url, // 1.91:1 aspect ratio, min 300x157, max 4096x4096 JPG, PNG, WEBP, and GIF
image: coverImage?.src, // 1.91:1 aspect ratio, min 300x157, max 4096x4096 JPG, PNG, WEBP, and GIF
imageAlt: coverImage?.alt,
imageWidth: coverImage?.width,
imageHeight: coverImage?.height,
Expand Down
Loading

0 comments on commit adf4523

Please sign in to comment.