Update dependencies, remove Picture
This commit is contained in:
prototypa
20
package.json
20
package.json
@ -14,8 +14,8 @@
|
||||
"subfont": "subfont -ir --no-fallbacks --silent --root dist"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/image": "^0.10.0",
|
||||
"@astrojs/mdx": "^0.11.5",
|
||||
"@astrojs/image": "^0.11.6",
|
||||
"@astrojs/mdx": "^0.11.6",
|
||||
"@astrojs/partytown": "^1.0.1",
|
||||
"@astrojs/rss": "^1.0.3",
|
||||
"@astrojs/sitemap": "^1.0.0",
|
||||
@ -24,22 +24,22 @@
|
||||
"@astrolib/seo": "^0.2.1",
|
||||
"@fontsource/inter": "^4.5.14",
|
||||
"@tailwindcss/typography": "^0.5.8",
|
||||
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
||||
"@typescript-eslint/parser": "^5.42.1",
|
||||
"astro": "^1.6.8",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"astro": "^1.6.10",
|
||||
"astro-icon": "^0.8.0",
|
||||
"eslint": "^8.27.0",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-plugin-astro": "^0.21.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.6.1",
|
||||
"limax": "^v2.1.0",
|
||||
"limax": "^2.1.0",
|
||||
"mdast-util-to-string": "^3.1.0",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-astro": "^0.7.0",
|
||||
"reading-time": "^1.5.0",
|
||||
"sharp": "^0.31.2",
|
||||
"subfont": "^6.12.2",
|
||||
"tailwindcss": "^3.2.3",
|
||||
"typescript": "^4.8.4"
|
||||
"tailwindcss": "^3.2.4",
|
||||
"typescript": "^4.9.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.15.0 || >=16.0.0"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
import Picture from '~/components/core/Picture.astro';
|
||||
import { Picture } from '@astrojs/image/components'
|
||||
|
||||
import { findImage } from '~/utils/images';
|
||||
import { getPermalink } from '~/utils/permalinks';
|
||||
@ -11,14 +11,18 @@ const image = await findImage(post.image);
|
||||
|
||||
<article class="mb-6 transition">
|
||||
<div class="relative h-0 pb-[56.25%] lg:h-64 overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
|
||||
<Picture
|
||||
src={image}
|
||||
class="object-cover w-full lg:h-64 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 900]}
|
||||
sizes="(max-width: 900px) 400px, 900px"
|
||||
alt={post.title}
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
{
|
||||
image && (
|
||||
<Picture
|
||||
src={image}
|
||||
class="object-cover w-full lg:h-64 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 900]}
|
||||
sizes="(max-width: 900px) 400px, 900px"
|
||||
alt={post.title}
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
|
||||
<a
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
import Picture from '~/components/core/Picture.astro';
|
||||
import { Picture } from '@astrojs/image/components';
|
||||
import PostTags from '~/components/atoms/Tags.astro';
|
||||
|
||||
import { getPermalink } from '~/utils/permalinks';
|
||||
@ -16,14 +16,16 @@ const image = await findImage(post.image);
|
||||
image && (
|
||||
<a class="relative block group" href={getPermalink(post.slug, 'post')}>
|
||||
<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
|
||||
<Picture
|
||||
src={image}
|
||||
class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 900]}
|
||||
sizes="(max-width: 900px) 400px, 900px"
|
||||
alt={post.title}
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
{image && (
|
||||
<Picture
|
||||
src={image}
|
||||
class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 900]}
|
||||
sizes="(max-width: 900px) 400px, 900px"
|
||||
alt={post.title}
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
import Picture from '~/components/core/Picture.astro';
|
||||
import { Picture } from '@astrojs/image/components'
|
||||
import PostTags from '~/components/atoms/Tags.astro';
|
||||
import SocialShare from '~/components/atoms/SocialShare.astro';
|
||||
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
---
|
||||
import { getPicture } from '@astrojs/image';
|
||||
|
||||
const {
|
||||
src,
|
||||
alt,
|
||||
sizes,
|
||||
widths,
|
||||
aspectRatio = 1,
|
||||
formats = ['avif', 'webp'],
|
||||
loading = 'lazy',
|
||||
decoding = 'async',
|
||||
class: className = '',
|
||||
...attrs
|
||||
} = Astro.props;
|
||||
|
||||
let picture = null;
|
||||
try {
|
||||
picture =
|
||||
src &&
|
||||
(await getPicture({
|
||||
src,
|
||||
widths,
|
||||
formats,
|
||||
aspectRatio,
|
||||
}));
|
||||
} catch (e) {
|
||||
// continue regardless of error
|
||||
}
|
||||
|
||||
const { image = {}, sources = [] } = picture || {};
|
||||
---
|
||||
|
||||
{
|
||||
src && image?.src && (
|
||||
<picture {...attrs}>
|
||||
{sources.map((attrs) => (
|
||||
<source {...attrs} sizes={sizes} />
|
||||
))}
|
||||
<img {...image} {loading} {decoding} {alt} class={className} />
|
||||
</picture>
|
||||
)
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon';
|
||||
import Picture from '~/components/core/Picture.astro';
|
||||
import { Picture } from '@astrojs/image/components'
|
||||
---
|
||||
|
||||
<section>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon';
|
||||
import Picture from '~/components/core/Picture.astro';
|
||||
import { Picture } from '@astrojs/image/components'
|
||||
---
|
||||
|
||||
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
|
||||
|
||||
Reference in New Issue
Block a user