updated to astro v3
removed image integration in favor of native image processing removed export image from mdx to url various fixes
This commit is contained in:
Nico
parent
3ff4ad3b17
commit
5927336ae8
17 changed files with 1275 additions and 1110 deletions
|
|
@ -1,15 +1,44 @@
|
|||
---
|
||||
import { Picture } from "@astrojs/image/components";
|
||||
import { Image, getImage } from "astro:assets";
|
||||
|
||||
const { src, alt, width, height, ...attrs } = Astro.props;
|
||||
|
||||
// if h/w attributes are declared, use them. If not, use from the source file
|
||||
const imgHeight = height ? height : src.height;
|
||||
const imgWidth = width ? width : src.width;
|
||||
|
||||
// compute avif and webp format in order to use inside a <picture> element
|
||||
const imgAvif = await getImage({
|
||||
src: src,
|
||||
format: "avif",
|
||||
width: Number(imgWidth),
|
||||
height: Number(imgHeight),
|
||||
});
|
||||
const imgWebp = await getImage({
|
||||
src: src,
|
||||
format: "webp",
|
||||
width: Number(imgWidth),
|
||||
height: Number(imgHeight),
|
||||
});
|
||||
---
|
||||
|
||||
<Picture
|
||||
src={src}
|
||||
widths={[320, 640, 768]}
|
||||
aspectRatio={`${width}:${height}`}
|
||||
sizes={`(max-inline-size: ${width}px) 100vw, ${width}px`}
|
||||
formats={["avif", "webp"]}
|
||||
alt={alt ? alt : ""}
|
||||
{...attrs}
|
||||
/>
|
||||
<picture>
|
||||
<source
|
||||
srcset={imgAvif.src}
|
||||
sizes={`(max-inline-size: ${imgWidth}px) 100vw, ${imgHeight}px`}
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset={imgWebp.src}
|
||||
sizes={`(max-inline-size: ${imgWidth}px) 100vw, ${imgHeight}px`}
|
||||
type="image/webp"
|
||||
/>
|
||||
<Image
|
||||
src={src}
|
||||
width={Number(imgWidth)}
|
||||
height={Number(imgHeight)}
|
||||
format="jpg"
|
||||
alt={alt ? alt : ""}
|
||||
{...attrs}
|
||||
/>
|
||||
</picture>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,6 @@ code: true
|
|||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const basicExpression =
|
||||
"https://assets.nardu.in/basic_expression_d81b12f1ac.jpeg";
|
||||
export const shortcut = "https://assets.nardu.in/shortcut_39cc19d383.jpeg";
|
||||
|
||||
## An ever lasting battle
|
||||
|
||||
|
|
@ -25,7 +22,7 @@ So the last time I had to do a complex animation, **I took the damn time!**
|
|||
Everyone uses expressions whether they know it or not. Most of the time it's a rather transparent process for the animator. For example: when parenting a property to another one, After Effects creates an expression for us.
|
||||
|
||||
<AstroImage
|
||||
src={basicExpression}
|
||||
src="https://assets.nardu.in/basic_expression_d81b12f1ac.jpeg"
|
||||
width="728"
|
||||
height="80"
|
||||
alt="Parenting the position of the form to a null creates an expression."
|
||||
|
|
@ -36,7 +33,7 @@ Over the last updates, Adobe has made an effort to make expressions more accessi
|
|||
Those custom functions can be called through a menu once you enabled the expressions on a property. It offers organized shortcut and proper syntax to all of AE native functions and a bunch of JavaScript standard ones.
|
||||
|
||||
<AstroImage
|
||||
src={shortcut}
|
||||
src="https://assets.nardu.in/shortcut_39cc19d383.jpeg"
|
||||
width="728"
|
||||
height="322"
|
||||
alt="Alt + Click the stopwatch to access the shortcuts."
|
||||
|
|
|
|||
|
|
@ -12,13 +12,6 @@ updatedAt: "2022-12-27T12:08:00.000Z"
|
|||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const macOs =
|
||||
"https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg";
|
||||
export const windowsSettings = "https://assets.nardu.in/sci-hub-settings.jpg";
|
||||
export const windowsNetwork = "https://assets.nardu.in/sci-hub-network.jpg";
|
||||
export const windowsAdapter = "https://assets.nardu.in/sci-hub-adapter.jpg";
|
||||
export const windowsAdapterSettings =
|
||||
"https://assets.nardu.in/sci-hub-adapter-settings.jpg";
|
||||
|
||||
The current sci-hub address is: <a href="https://sci-hub.se" rel="noreferer noopener">sci-hub.se</a>
|
||||
|
||||
|
|
@ -53,7 +46,7 @@ Go to:
|
|||
From there, you can add DNS servers by clicking the + icon. Click ok and apply the new settings. You might need to restart your computer for the changes to work.
|
||||
|
||||
<AstroImage
|
||||
src={macOs}
|
||||
src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
|
||||
width="728"
|
||||
height="1060"
|
||||
alt="MacOS network and DNS settings"
|
||||
|
|
@ -74,28 +67,28 @@ Go to:
|
|||
From there, you can add DNS servers. Click save. You might need to restart your computer for the changes to work.
|
||||
|
||||
<AstroImage
|
||||
src={windowsSettings}
|
||||
src="https://assets.nardu.in/sci-hub-settings.jpg"
|
||||
width="728"
|
||||
height="319"
|
||||
alt="Windows system settings"
|
||||
/>
|
||||
|
||||
<AstroImage
|
||||
src={windowsNetwork}
|
||||
src="https://assets.nardu.in/sci-hub-network.jpg"
|
||||
width="728"
|
||||
height="803"
|
||||
alt="Windows network settings"
|
||||
/>
|
||||
|
||||
<AstroImage
|
||||
src={windowsAdapter}
|
||||
src="https://assets.nardu.in/sci-hub-adapter.jpg"
|
||||
width="728"
|
||||
height="327"
|
||||
alt="Windows network connections settings"
|
||||
/>
|
||||
|
||||
<AstroImage
|
||||
src={windowsAdapterSettings}
|
||||
src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
|
||||
width="728"
|
||||
height="434"
|
||||
alt="Windows network adapter settings"
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@ updatedAt: "2022-12-27T15:40:06.000Z"
|
|||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const wordpress = "https://assets.nardu.in/wordpress_8ee6f54b98.jpeg";
|
||||
export const strapi11ty = "https://assets.nardu.in/static_2c0d9f1eb8.jpeg";
|
||||
|
||||
## The not so easy choice
|
||||
|
||||
|
|
@ -33,7 +31,7 @@ Boy did they exceed my expectations! With almost no optimization on the static s
|
|||
### wordpress
|
||||
|
||||
<AstroImage
|
||||
src={wordpress}
|
||||
src="https://assets.nardu.in/wordpress_8ee6f54b98.jpeg"
|
||||
width="728"
|
||||
height="412"
|
||||
alt="Performance score of 53/100 on Wordpress."
|
||||
|
|
@ -44,7 +42,7 @@ Despite a lot of efforts I could not do better. I’m no expert in caching, do n
|
|||
### 11ty + strapi
|
||||
|
||||
<AstroImage
|
||||
src={strapi11ty}
|
||||
src="https://assets.nardu.in/static_2c0d9f1eb8.jpeg"
|
||||
width="728"
|
||||
height="412"
|
||||
alt="Performance score of 97/100 on jamstack."
|
||||
|
|
|
|||
|
|
@ -11,11 +11,6 @@ updatedAt: "2022-06-08T14:24:06.000Z"
|
|||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const premiereExport = "https://assets.nardu.in/video-premiere-1.jpeg";
|
||||
export const handbrakeBase = "https://assets.nardu.in/video-handbrake-1.jpeg";
|
||||
export const handbrakeVideo = "https://assets.nardu.in/video-handbrake-2.jpeg";
|
||||
export const handbrakeAudio = "https://assets.nardu.in/video-handbrake-3.jpeg";
|
||||
export const handbrakeWeb = "https://assets.nardu.in/video-handbrake-4.jpg";
|
||||
|
||||
## Let's play.
|
||||
|
||||
|
|
@ -31,7 +26,11 @@ With a good connection, users will not see the difference. But if we go down tha
|
|||
|
||||
Let's say we exported a 1920x1080 video from Premiere Pro with these basic settings:
|
||||
|
||||
<AstroImage src={premiereExport} width="673" height="800" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/video-premiere-1.jpeg"
|
||||
width="673"
|
||||
height="800"
|
||||
/>
|
||||
|
||||
It's gorgeous, it's Full HD, it's 1:30 minute of excellent editing but it's 50mb… What a shame.
|
||||
|
||||
|
|
@ -52,7 +51,11 @@ While it's not as nice as Premiere Pro, it has way more exporting capabilities.
|
|||
1. Check Web Optimized
|
||||
1. Keep MPEG-4 as the format
|
||||
|
||||
<AstroImage src={handbrakeBase} width="728" height="337" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/video-handbrake-1.jpeg"
|
||||
width="728"
|
||||
height="337"
|
||||
/>
|
||||
|
||||
### Video screen
|
||||
|
||||
|
|
@ -61,7 +64,11 @@ While it's not as nice as Premiere Pro, it has way more exporting capabilities.
|
|||
1. Choose Peak Framerate. If you don't know the framerate, keep the default setting
|
||||
1. Choose the type of video you are encoding (film, animation…)
|
||||
|
||||
<AstroImage src={handbrakeVideo} width="728" height="337" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/video-handbrake-2.jpeg"
|
||||
width="728"
|
||||
height="337"
|
||||
/>
|
||||
|
||||
### Audio screen
|
||||
|
||||
|
|
@ -72,7 +79,11 @@ If you have an audio channel, these settings are great and will not influence th
|
|||
1. Samplerate 44.1
|
||||
1. Bitrate 192 to 256 (your choice)
|
||||
|
||||
<AstroImage src={handbrakeAudio} width="728" height="337" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/video-handbrake-3.jpeg"
|
||||
width="728"
|
||||
height="337"
|
||||
/>
|
||||
|
||||
### Export!
|
||||
|
||||
|
|
@ -93,7 +104,12 @@ Webm is an html video format and VP9 is its latest codec.
|
|||
|
||||
Using Handbrake and webm/VP9, we can achieve really great compression without losing too much quality (or none at all depending on the settings). I was able to divide by 4 the size of a video using these presets:
|
||||
|
||||
<AstroImage src={handbrakeWeb} width="728" height="313" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/video-handbrake-4.jpg"
|
||||
width="728"
|
||||
height="313"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
The only down side is that it takes some time to encode. It will depend on the video length and your computing power.
|
||||
|
||||
|
|
|
|||
|
|
@ -11,13 +11,6 @@ updatedAt: "2022-12-27T12:08:00.000Z"
|
|||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const macOs =
|
||||
"https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg";
|
||||
export const windowsSettings = "https://assets.nardu.in/sci-hub-settings.jpg";
|
||||
export const windowsNetwork = "https://assets.nardu.in/sci-hub-network.jpg";
|
||||
export const windowsAdapter = "https://assets.nardu.in/sci-hub-adapter.jpg";
|
||||
export const windowsAdapterSettings =
|
||||
"https://assets.nardu.in/sci-hub-adapter-settings.jpg";
|
||||
|
||||
L'adresse actuelle de sci-hub est : [sci-hub.se](https://sci-hub.se)
|
||||
|
||||
|
|
@ -56,7 +49,7 @@ Ouvrez :
|
|||
De là, vous pouvez ajouter des serveurs DNS en cliquant sur l'icône +. Cliquez sur ok et appliquez les nouveaux paramètres. Vous devrez peut-être redémarrer votre ordinateur pour que les changements fonctionnent.
|
||||
|
||||
<AstroImage
|
||||
src={macOs}
|
||||
src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
|
||||
width="728"
|
||||
height="1060"
|
||||
alt="MacOS réglages réseau et DNS"
|
||||
|
|
@ -75,28 +68,28 @@ Ouvrez :
|
|||
1. Utiliser l’adresse de serveur DNS suivante
|
||||
|
||||
<AstroImage
|
||||
src={windowsSettings}
|
||||
src="https://assets.nardu.in/sci-hub-settings.jpg"
|
||||
width="728"
|
||||
height="319"
|
||||
alt="Réglages windows"
|
||||
/>
|
||||
|
||||
<AstroImage
|
||||
src={windowsNetwork}
|
||||
src="https://assets.nardu.in/sci-hub-network.jpg"
|
||||
width="728"
|
||||
height="803"
|
||||
alt="Windows réglages réseaux"
|
||||
/>
|
||||
|
||||
<AstroImage
|
||||
src={windowsAdapter}
|
||||
src="https://assets.nardu.in/sci-hub-adapter.jpg"
|
||||
width="728"
|
||||
height="327"
|
||||
alt="Windows régalges connections réseaux"
|
||||
/>
|
||||
|
||||
<AstroImage
|
||||
src={windowsAdapterSettings}
|
||||
src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
|
||||
width="728"
|
||||
height="434"
|
||||
alt="Windows options adaptateur réseau"
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@ updatedAt: "2022-12-27T15:40:06.000Z"
|
|||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const wordpress = "https://assets.nardu.in/wordpress_8ee6f54b98.jpeg";
|
||||
export const strapi11ty = "https://assets.nardu.in/static_2c0d9f1eb8.jpeg";
|
||||
|
||||
## La solution de non facilité
|
||||
|
||||
|
|
@ -33,7 +31,7 @@ J’en suis resté pantois ! Quasiment sans optimisation du côté statique
|
|||
### wordpress
|
||||
|
||||
<AstroImage
|
||||
src={wordpress}
|
||||
src="https://assets.nardu.in/wordpress_8ee6f54b98.jpeg"
|
||||
width="728"
|
||||
height="412"
|
||||
alt="Score de performance de 53/100 sur Wordpress."
|
||||
|
|
@ -44,7 +42,7 @@ Malgré beaucoup d’efforts, je n’ai pas pu faire mieux. Je ne suis pas un ex
|
|||
### 11ty + strapi
|
||||
|
||||
<AstroImage
|
||||
src={strapi11ty}
|
||||
src="https://assets.nardu.in/static_2c0d9f1eb8.jpeg"
|
||||
width="728"
|
||||
height="412"
|
||||
alt="Score de performance de 97/100 en Jamstack."
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ type: snippets
|
|||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const cookies1 = "https://assets.nardu.in/cookies-fig-1.jpg";
|
||||
export const cookies2 = "https://assets.nardu.in/cookies-fig-2.jpg";
|
||||
|
||||
## Vegetalian version
|
||||
|
||||
|
|
@ -76,14 +74,14 @@ Chocolate can be replaced by anything like nuts, raisins, legos... (don't eat le
|
|||
## Figures
|
||||
|
||||
<AstroImage
|
||||
src={cookies1}
|
||||
src="https://assets.nardu.in/cookies-fig-1.jpg"
|
||||
width="753"
|
||||
height="1248"
|
||||
alt="All ingredients mixed together to form a brown paste."
|
||||
/>
|
||||
<AstroImage
|
||||
src={cookies2}
|
||||
src="https://assets.nardu.in/cookies-fig-2.jpg"
|
||||
width="753"
|
||||
height="1248"
|
||||
alt="The cookies are rounded and soft after baking."
|
||||
alt="The cookies are round and soft after baking."
|
||||
/>
|
||||
|
|
@ -51,7 +51,7 @@ Tous les boutons présents utilisent ces styles comme base en guise de « r
|
|||
background-color: hotpink;
|
||||
}
|
||||
.btn-icon::before {
|
||||
content: url("~assets/svg/arrow-right-white.svg");
|
||||
content: url("./assets/svg/arrow-right-white.svg");
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
top: 50%;
|
||||
|
|
|
|||
|
|
@ -11,23 +11,16 @@ type: fragments
|
|||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const example =
|
||||
"https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg";
|
||||
export const context =
|
||||
"https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg";
|
||||
export const container =
|
||||
"https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg";
|
||||
export const banner =
|
||||
"https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg";
|
||||
export const broken =
|
||||
"https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg";
|
||||
export const result = "https://assets.nardu.in/image_bleed_6c164e82b3.jpeg";
|
||||
|
||||
## Image inline
|
||||
|
||||
On est parfois obligé d'utiliser des images dans des balises `img` plutôt que dans un `background` en css. Comment faire alors pour que l'image sorte de son conteneur pour en faire une bannière ? Exemple pratique à partir de ce même site.
|
||||
|
||||
<AstroImage src={example} width="320" height="568" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg"
|
||||
width="320"
|
||||
height="568"
|
||||
/>
|
||||
|
||||
### Contexte
|
||||
|
||||
|
|
@ -56,7 +49,11 @@ img {
|
|||
}
|
||||
```
|
||||
|
||||
<AstroImage src={context} width="320" height="568" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg"
|
||||
width="320"
|
||||
height="568"
|
||||
/>
|
||||
|
||||
### Déborder du conteneur
|
||||
|
||||
|
|
@ -70,7 +67,11 @@ Afin de faire prendre à l'image toute la largeur, on agit sur son conteneur&nbs
|
|||
}
|
||||
```
|
||||
|
||||
<AstroImage src={container} width="320" height="568" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg"
|
||||
width="320"
|
||||
height="568"
|
||||
/>
|
||||
|
||||
### Faire une bannière
|
||||
|
||||
|
|
@ -85,7 +86,11 @@ On peut alors réduire la hauteur du conteneur pour obtenir une bannière plutô
|
|||
}
|
||||
```
|
||||
|
||||
<AstroImage src={banner} width="320" height="568" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg"
|
||||
width="320"
|
||||
height="568"
|
||||
/>
|
||||
|
||||
Il faut ensuite forcer l'image à prendre toute la largeur du conteneur :
|
||||
|
||||
|
|
@ -95,7 +100,11 @@ Il faut ensuite forcer l'image à prendre toute la largeur du conteneur :
|
|||
}
|
||||
```
|
||||
|
||||
<AstroImage src={broken} width="320" height="568" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg"
|
||||
width="320"
|
||||
height="568"
|
||||
/>
|
||||
|
||||
Pas top…
|
||||
|
||||
|
|
@ -110,7 +119,11 @@ Pas top…
|
|||
}
|
||||
```
|
||||
|
||||
<AstroImage src={result} width="320" height="568" alt="" />
|
||||
<AstroImage
|
||||
src="https://assets.nardu.in/image_bleed_6c164e82b3.jpeg"
|
||||
width="320"
|
||||
height="568"
|
||||
/>
|
||||
|
||||
Cette technique s'apparente à l'utilisation d'une image de background mais en dur 😁
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ type: fragments
|
|||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const cookies1 = "https://assets.nardu.in/cookies-fig-1.jpg";
|
||||
export const cookies2 = "https://assets.nardu.in/cookies-fig-2.jpg";
|
||||
|
||||
## Version végétalienne
|
||||
|
||||
|
|
@ -76,13 +74,13 @@ Le chocolat peut-être remplacé par n'importe quoi comme des noix, des raisins
|
|||
## Figures
|
||||
|
||||
<AstroImage
|
||||
src={cookies1}
|
||||
src="https://assets.nardu.in/cookies-fig-1.jpg"
|
||||
width="753"
|
||||
height="1248"
|
||||
alt="Tous les ingrédients mélangés forment une pâte marron."
|
||||
/>
|
||||
<AstroImage
|
||||
src={cookies2}
|
||||
src="https://assets.nardu.in/cookies-fig-2.jpg"
|
||||
width="753"
|
||||
height="1248"
|
||||
alt="Les cookies cuits sont bombés et très moelleux."
|
||||
|
|
|
|||
2
src/env.d.ts
vendored
2
src/env.d.ts
vendored
|
|
@ -1,4 +1,4 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="@astrojs/image/client" />
|
||||
/// <reference types="astro/client" />
|
||||
|
||||
/// <reference path="../.astro-i18n/generated.d.ts" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue