clean refs
This commit is contained in:
parent
c279fe35cb
commit
0f67bdcf3c
@ -1,17 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true,
|
||||
browser: true,
|
||||
es2020: true,
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 2022,
|
||||
sourceType: "module",
|
||||
},
|
||||
plugins: ["unicorn"],
|
||||
extends: ["eslint:recommended"],
|
||||
rules: {
|
||||
"unicorn/prefer-node-protocol": "error",
|
||||
},
|
||||
};
|
||||
65
ref/astro-imagetools/.github/workflows/ci.yml
vendored
65
ref/astro-imagetools/.github/workflows/ci.yml
vendored
@ -1,65 +0,0 @@
|
||||
name: CI
|
||||
on:
|
||||
pull_request:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
jobs:
|
||||
lint:
|
||||
env:
|
||||
ASTRO_TELEMETRY_DISABLED: true
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Setup PNPM
|
||||
uses: pnpm/action-setup@v2.2.1
|
||||
|
||||
- name: Setup node
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
cache: "pnpm"
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Prettier
|
||||
run: pnpm run format:check
|
||||
|
||||
- name: ESLint
|
||||
run: pnpm run lint
|
||||
|
||||
test:
|
||||
name: "Test: ${{ matrix.os }} (node@${{ matrix.node_version }})"
|
||||
env:
|
||||
ASTRO_TELEMETRY_DISABLED: true
|
||||
runs-on: ${{ matrix.os }}
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
os: [ubuntu-latest]
|
||||
node_version: [14, 16]
|
||||
include:
|
||||
- os: windows-latest
|
||||
node_version: 16
|
||||
- os: macos-latest
|
||||
node_version: 16
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Setup PNPM
|
||||
uses: pnpm/action-setup@v2.2.1
|
||||
|
||||
- name: Setup node@${{ matrix.node_version }}
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ matrix.node_version }}
|
||||
cache: "pnpm"
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter astro-imagetools run test
|
||||
20
ref/astro-imagetools/.gitignore
vendored
20
ref/astro-imagetools/.gitignore
vendored
@ -1,20 +0,0 @@
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# build output
|
||||
dist/
|
||||
|
||||
# logs
|
||||
*.log
|
||||
|
||||
# npm
|
||||
package-lock.json
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
# env
|
||||
*.env
|
||||
|
||||
# astro-imagetools
|
||||
packages/astro-imagetools/astroViteConfigs.js
|
||||
@ -1,2 +0,0 @@
|
||||
## force pnpm to hoist
|
||||
shamefully-hoist = true
|
||||
@ -1,2 +0,0 @@
|
||||
pnpm-lock.yaml
|
||||
demo/dist
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"overrides": [
|
||||
{
|
||||
"files": "**/*.astro",
|
||||
"options": { "parser": "astro" }
|
||||
}
|
||||
],
|
||||
"plugins": ["prettier-plugin-astro"]
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 Rafid Muhymin Wafi
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1 +0,0 @@
|
||||
packages/astro-imagetools/README.md
|
||||
@ -1,2 +0,0 @@
|
||||
## force pnpm to hoist
|
||||
shamefully-hoist = true
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"startCommand": "npm start",
|
||||
"env": {
|
||||
"ENABLE_CJS_IMPORTS": true
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
# Astro ImageTools Live Examples
|
||||
|
||||
This repository contains source code for the [**Astro ImageTools Demo**](https://astro-imagetools-demo.vercel.app) website.
|
||||
|
||||
The demo displays live examples of the components and APIs provided by the [**Astro ImageTools**](https://npmjs.com/package/astro-imagetools) library and the **Layouts** and **Placeholders** supported by the library.
|
||||
@ -1,3 +0,0 @@
|
||||
import { defineConfig } from "astro-imagetools/config";
|
||||
|
||||
export default defineConfig({});
|
||||
@ -1,23 +0,0 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
import { astroImageTools } from "astro-imagetools";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
vite: {
|
||||
plugins: [
|
||||
{
|
||||
name: "import.meta.url-transformer",
|
||||
transform: (code, id) => {
|
||||
if (id.endsWith(".astro"))
|
||||
return code.replace(/import.meta.url/g, `"${id}"`);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
experimental: {
|
||||
integrations: true,
|
||||
},
|
||||
|
||||
integrations: [astroImageTools],
|
||||
});
|
||||
@ -1,23 +0,0 @@
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro-spa": "^1.3.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/lit": "^1.1.2",
|
||||
"@astrojs/preact": "^2.0.2",
|
||||
"@astrojs/react": "^2.0.2",
|
||||
"@astrojs/solid-js": "^2.0.2",
|
||||
"@astrojs/svelte": "^2.0.1",
|
||||
"@astrojs/vue": "^2.0.1",
|
||||
"astro": "^2.0.6",
|
||||
"astro-imagetools": "workspace:^0.9.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
@ -1,11 +0,0 @@
|
||||
{
|
||||
"infiniteLoopProtection": true,
|
||||
"hardReloadOnChange": false,
|
||||
"view": "browser",
|
||||
"template": "node",
|
||||
"container": {
|
||||
"port": 3000,
|
||||
"startScript": "start",
|
||||
"node": "16"
|
||||
}
|
||||
}
|
||||
1
ref/astro-imagetools/demo/src/env.d.ts
vendored
1
ref/astro-imagetools/demo/src/env.d.ts
vendored
@ -1 +0,0 @@
|
||||
/// <reference types="astro/client" />
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
@ -1,15 +0,0 @@
|
||||
---
|
||||
import { Picture } from "astro-imagetools/components";
|
||||
import MainLayout from "./MainLayout.astro";
|
||||
|
||||
const { layout, importMetaUrl } = Astro.props;
|
||||
---
|
||||
|
||||
<MainLayout {importMetaUrl}>
|
||||
<h1><code>{layout}</code> Layout Example</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<Picture src="https://picsum.photos/1024/768/" alt="A random image" {layout}
|
||||
/>
|
||||
</MainLayout>
|
||||
@ -1,57 +0,0 @@
|
||||
---
|
||||
import { Spa } from "astro-spa";
|
||||
import "../styles/index.css";
|
||||
|
||||
const { importMetaUrl } = Astro.props as { importMetaUrl: string };
|
||||
|
||||
const path =
|
||||
Astro.props.content?.path ||
|
||||
importMetaUrl?.slice(importMetaUrl.indexOf("/pages/") + 7);
|
||||
|
||||
const GitHubURL = `https://github.com/RafidMuhymin/astro-imagetools/tree/main/demo/src/pages/${path}`;
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap-reboot.min.css"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<!-- Unset bootstrap image resets -->
|
||||
<style is:global>
|
||||
img, svg {
|
||||
vertical-align: unset;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 250 250"
|
||||
fill="#151513"
|
||||
class="view-source"
|
||||
>
|
||||
<a title="View Source" href={GitHubURL}>
|
||||
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff"></path>
|
||||
<path
|
||||
class="view-source_arm___1DMT"
|
||||
d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
|
||||
></path>
|
||||
<path
|
||||
d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
|
||||
></path>
|
||||
</a>
|
||||
</svg>
|
||||
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<Spa />
|
||||
</body>
|
||||
</html>
|
||||
@ -1,18 +0,0 @@
|
||||
---
|
||||
import { Picture } from "astro-imagetools/components";
|
||||
import MainLayout from "./MainLayout.astro";
|
||||
|
||||
const { placeholder, importMetaUrl } = Astro.props;
|
||||
---
|
||||
|
||||
<MainLayout {importMetaUrl}>
|
||||
<h1><code>{placeholder}</code> Placeholder Example</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<Picture
|
||||
src="https://picsum.photos/1024/768/"
|
||||
alt="A random image"
|
||||
{placeholder}
|
||||
/>
|
||||
</MainLayout>
|
||||
@ -1,48 +0,0 @@
|
||||
---
|
||||
import { ImageSupportDetection } from "astro-imagetools/components";
|
||||
import { renderBackgroundImage } from "astro-imagetools/api";
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
|
||||
const { link, style, htmlElement } = await renderBackgroundImage({
|
||||
src: "https://picsum.photos/1024/768/",
|
||||
content: `<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, nisi!
|
||||
Commodi, dolor hic omnis debitis natus eaque nisi magni corrupti earum
|
||||
aliquam at quidem dolorum?
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eos facere amet nesciunt! Vero, culpa eaque quasi ullam atque alias
|
||||
repudiandae facere placeat ipsam recusandae quam minus nemo officia
|
||||
reiciendis dicta quaerat maiores omnis.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Pariatur doloribus, facilis enim accusamus velit, amet ducimus dolorum
|
||||
unde numquam doloremque eveniet eum et error, quod quas fugit commodi
|
||||
suscipit sequi. At, deleniti nihil.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Laborum voluptate maxime dicta alias minus nam, doloribus accusantium
|
||||
veritatis perferendis, expedita eaque. Deleniti deserunt, iure dolorum
|
||||
itaque fugiat assumenda ullam amet asperiores soluta ipsam!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Veniam qui ad, illo fuga autem voluptatibus iusto cum reprehenderit error.
|
||||
Nemo nisi laborum blanditiis, accusamus dolores harum labore perspiciatis.
|
||||
Nesciunt, repellat mollitia. Rem, labore?
|
||||
</p>`,
|
||||
});
|
||||
---
|
||||
|
||||
<ImageSupportDetection />
|
||||
|
||||
<MainLayout importMetaUrl={import.meta.url}>
|
||||
<h1>Astro ImageTools <code>{"renderBackgroundImage"}</code> API Example</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<Fragment set:html={link + style + htmlElement} />
|
||||
</MainLayout>
|
||||
@ -1,45 +0,0 @@
|
||||
---
|
||||
import { renderBackgroundPicture } from "astro-imagetools/api";
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
|
||||
const { link, style, htmlElement } = await renderBackgroundPicture({
|
||||
src: "https://picsum.photos/1024/768/",
|
||||
content: `<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, nisi!
|
||||
Commodi, dolor hic omnis debitis natus eaque nisi magni corrupti earum
|
||||
aliquam at quidem dolorum?
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eos facere amet nesciunt! Vero, culpa eaque quasi ullam atque alias
|
||||
repudiandae facere placeat ipsam recusandae quam minus nemo officia
|
||||
reiciendis dicta quaerat maiores omnis.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Pariatur doloribus, facilis enim accusamus velit, amet ducimus dolorum
|
||||
unde numquam doloremque eveniet eum et error, quod quas fugit commodi
|
||||
suscipit sequi. At, deleniti nihil.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Laborum voluptate maxime dicta alias minus nam, doloribus accusantium
|
||||
veritatis perferendis, expedita eaque. Deleniti deserunt, iure dolorum
|
||||
itaque fugiat assumenda ullam amet asperiores soluta ipsam!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Veniam qui ad, illo fuga autem voluptatibus iusto cum reprehenderit error.
|
||||
Nemo nisi laborum blanditiis, accusamus dolores harum labore perspiciatis.
|
||||
Nesciunt, repellat mollitia. Rem, labore?
|
||||
</p>`,
|
||||
});
|
||||
---
|
||||
|
||||
<MainLayout importMetaUrl={import.meta.url}>
|
||||
<h1>Astro ImageTools <code>{"renderBackgroundPicture"}</code> API Example</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<Fragment set:html={link + style + htmlElement} />
|
||||
</MainLayout>
|
||||
@ -1,17 +0,0 @@
|
||||
---
|
||||
import { renderImg } from "astro-imagetools/api";
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
|
||||
const { link, style, img } = await renderImg({
|
||||
src: "https://picsum.photos/1024/768/",
|
||||
alt: "A random image",
|
||||
});
|
||||
---
|
||||
|
||||
<MainLayout importMetaUrl={import.meta.url}>
|
||||
<h1>Astro ImageTools <code>{"renderImg"}</code> API Example</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<Fragment set:html={link + style + img} />
|
||||
</MainLayout>
|
||||
@ -1,17 +0,0 @@
|
||||
---
|
||||
import { renderPicture } from "astro-imagetools/api";
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
|
||||
const { link, style, picture } = await renderPicture({
|
||||
src: "https://picsum.photos/1024/768/",
|
||||
alt: "A random image",
|
||||
});
|
||||
---
|
||||
|
||||
<MainLayout importMetaUrl={import.meta.url}>
|
||||
<h1>Astro ImageTools <code>{"renderPicture"}</code> API Example</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<Fragment set:html={link + style + picture} />
|
||||
</MainLayout>
|
||||
@ -1,45 +0,0 @@
|
||||
---
|
||||
import {
|
||||
BackgroundImage,
|
||||
ImageSupportDetection,
|
||||
} from "astro-imagetools/components";
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
---
|
||||
|
||||
<ImageSupportDetection />
|
||||
|
||||
<MainLayout importMetaUrl={import.meta.url}>
|
||||
<h1>
|
||||
Astro ImageTools <code>{"<BackgroundImage />"}</code> Component Example
|
||||
</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<BackgroundImage src="https://picsum.photos/1024/768/">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, nisi!
|
||||
Commodi, dolor hic omnis debitis natus eaque nisi magni corrupti earum
|
||||
aliquam at quidem dolorum?
|
||||
</p>
|
||||
<p>
|
||||
Eos facere amet nesciunt! Vero, culpa eaque quasi ullam atque alias
|
||||
repudiandae facere placeat ipsam recusandae quam minus nemo officia
|
||||
reiciendis dicta quaerat maiores omnis.
|
||||
</p>
|
||||
<p>
|
||||
Pariatur doloribus, facilis enim accusamus velit, amet ducimus dolorum
|
||||
unde numquam doloremque eveniet eum et error, quod quas fugit commodi
|
||||
suscipit sequi. At, deleniti nihil.
|
||||
</p>
|
||||
<p>
|
||||
Laborum voluptate maxime dicta alias minus nam, doloribus accusantium
|
||||
veritatis perferendis, expedita eaque. Deleniti deserunt, iure dolorum
|
||||
itaque fugiat assumenda ullam amet asperiores soluta ipsam!
|
||||
</p>
|
||||
<p>
|
||||
Veniam qui ad, illo fuga autem voluptatibus iusto cum reprehenderit error.
|
||||
Nemo nisi laborum blanditiis, accusamus dolores harum labore perspiciatis.
|
||||
Nesciunt, repellat mollitia. Rem, labore?
|
||||
</p>
|
||||
</BackgroundImage>
|
||||
</MainLayout>
|
||||
@ -1,40 +0,0 @@
|
||||
---
|
||||
import { BackgroundPicture } from "astro-imagetools/components";
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
---
|
||||
|
||||
<MainLayout importMetaUrl={import.meta.url}>
|
||||
<h1>
|
||||
Astro ImageTools <code>{"<BackgroundPicture />"}</code> Component Example
|
||||
</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<BackgroundPicture src="https://picsum.photos/1024/768/">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, nisi!
|
||||
Commodi, dolor hic omnis debitis natus eaque nisi magni corrupti earum
|
||||
aliquam at quidem dolorum?
|
||||
</p>
|
||||
<p>
|
||||
Eos facere amet nesciunt! Vero, culpa eaque quasi ullam atque alias
|
||||
repudiandae facere placeat ipsam recusandae quam minus nemo officia
|
||||
reiciendis dicta quaerat maiores omnis.
|
||||
</p>
|
||||
<p>
|
||||
Pariatur doloribus, facilis enim accusamus velit, amet ducimus dolorum
|
||||
unde numquam doloremque eveniet eum et error, quod quas fugit commodi
|
||||
suscipit sequi. At, deleniti nihil.
|
||||
</p>
|
||||
<p>
|
||||
Laborum voluptate maxime dicta alias minus nam, doloribus accusantium
|
||||
veritatis perferendis, expedita eaque. Deleniti deserunt, iure dolorum
|
||||
itaque fugiat assumenda ullam amet asperiores soluta ipsam!
|
||||
</p>
|
||||
<p>
|
||||
Veniam qui ad, illo fuga autem voluptatibus iusto cum reprehenderit error.
|
||||
Nemo nisi laborum blanditiis, accusamus dolores harum labore perspiciatis.
|
||||
Nesciunt, repellat mollitia. Rem, labore?
|
||||
</p>
|
||||
</BackgroundPicture>
|
||||
</MainLayout>
|
||||
@ -1,12 +0,0 @@
|
||||
---
|
||||
import { Img } from "astro-imagetools/components";
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
---
|
||||
|
||||
<MainLayout importMetaUrl={import.meta.url}>
|
||||
<h1>Astro ImageTools <code>{"<Img />"}</code> Component Example</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<Img src="https://picsum.photos/1024/768/" alt="A random image" />
|
||||
</MainLayout>
|
||||
@ -1,12 +0,0 @@
|
||||
---
|
||||
import { Picture } from "astro-imagetools/components";
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
---
|
||||
|
||||
<MainLayout importMetaUrl={import.meta.url}>
|
||||
<h1>Astro ImageTools <code>{"<Picture />"}</code> Component Example</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<Picture src="https://picsum.photos/1024/768/" alt="A random image" />
|
||||
</MainLayout>
|
||||
@ -1,78 +0,0 @@
|
||||
---
|
||||
path: index.md
|
||||
layout: ../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
# Image Optimization in Astro with Astro ImageTools
|
||||
|
||||
This page demonstrates the usage of the [astro-imagetools](https://www.npmjs.com/package/astro-imagetools) library with live examples.
|
||||
|
||||
<hr />
|
||||
|
||||
## Components
|
||||
|
||||
- [`<Img />` Component](/components/Img)
|
||||
- [`<Picture />` Component](/components/Picture)
|
||||
- [`<BackgroundImage />` Component](/components/BackgroundImage)
|
||||
- [`<BackgroundPicture />` Component](/components/BackgroundPicture)
|
||||
|
||||
## APIs
|
||||
|
||||
- [`renderImg` API](/api/renderImg)
|
||||
- [`renderPicture` API](/api/renderPicture)
|
||||
- [`renderBackgroundImage` API](/api/renderBackgroundImage)
|
||||
- [`renderBackgroundPicture` API](/api/renderBackgroundPicture)
|
||||
|
||||
## Layout
|
||||
|
||||
The `layout` property tells the image to respond differently depending on the device size or the container size.
|
||||
|
||||
Select a layout below and try resizing the window or rotating your device to see how the image reacts.
|
||||
|
||||
- [Constrained Layout](/layout/constrained)
|
||||
- [Fixed Layout](/layout/fixed)
|
||||
- [Full Width Layout](/layout/fullWidth)
|
||||
- [Fill Layout](/layout/fill)
|
||||
|
||||
<hr />
|
||||
|
||||
## Placeholder
|
||||
|
||||
The `placeholder` property tells the image what to show while loading.
|
||||
|
||||
- [Blurred Placeholder](/placeholder/blurred)
|
||||
- [Dominant Color Placeholder](/placeholder/dominantColor)
|
||||
- [Traced SVG Placeholder](/placeholder/tracedSVG)
|
||||
- [No Placeholder](/placeholder/none)
|
||||
|
||||
<hr />
|
||||
|
||||
## Internal Image
|
||||
|
||||
The following is an example of a reference to an internal image in the `src` directory (`../images/elva-800w.jpg`).
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
## External Image
|
||||
|
||||
The following is an example of a reference to an external image (`https://picsum.photos/1024/768`).
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
## Image in /public
|
||||
|
||||
This image is in the public directory (`/images/public.jpeg`).
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
## Learn More
|
||||
|
||||
You can optionally configure many more things!
|
||||
|
||||
Checkout the [Astro ImageTools](https://astro-imagetools-docs.vercel.app/) documentation to learn more.
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
import LayoutsLayout from "../../layouts/LayoutsLayout.astro";
|
||||
---
|
||||
|
||||
<LayoutsLayout layout="constrained" importMetaUrl={import.meta.url} />
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
import LayoutsLayout from "../../layouts/LayoutsLayout.astro";
|
||||
---
|
||||
|
||||
<LayoutsLayout layout="fill" importMetaUrl={import.meta.url} />
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
import LayoutsLayout from "../../layouts/LayoutsLayout.astro";
|
||||
---
|
||||
|
||||
<LayoutsLayout layout="fixed" importMetaUrl={import.meta.url} />
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
import LayoutsLayout from "../../layouts/LayoutsLayout.astro";
|
||||
---
|
||||
|
||||
<LayoutsLayout layout="fullWidth" importMetaUrl={import.meta.url} />
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
import PlaceholderLayout from "../../layouts/PlaceholderLayout.astro";
|
||||
---
|
||||
|
||||
<PlaceholderLayout placeholder="blurred" importMetaUrl={import.meta.url} />
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
import PlaceholderLayout from "../../layouts/PlaceholderLayout.astro";
|
||||
---
|
||||
|
||||
<PlaceholderLayout placeholder="dominantColor" importMetaUrl={import.meta.url} />
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
import PlaceholderLayout from "../../layouts/PlaceholderLayout.astro";
|
||||
---
|
||||
|
||||
<PlaceholderLayout placeholder="none" importMetaUrl={import.meta.url} />
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
import PlaceholderLayout from "../../layouts/PlaceholderLayout.astro";
|
||||
---
|
||||
|
||||
<PlaceholderLayout placeholder="tracedSVG" importMetaUrl={import.meta.url} />
|
||||
@ -1,19 +0,0 @@
|
||||
main {
|
||||
padding: 1.5rem;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
code::before {
|
||||
content: "`";
|
||||
}
|
||||
|
||||
code::after {
|
||||
content: "`";
|
||||
}
|
||||
|
||||
.view-source {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
# Expose Astro dependencies for `pnpm` users
|
||||
shamefully-hoist=true
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"startCommand": "npm start",
|
||||
"env": {
|
||||
"ENABLE_CJS_IMPORTS": true
|
||||
}
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
# Astro ImageTools Docs <img align="right" valign="center" height="52" width="39" src="https://raw.githubusercontent.com/withastro/astro/main/assets/brand/logo.svg" alt="Astro logo" />
|
||||
|
||||
To all who come to this happy place: welcome.
|
||||
|
||||
This is the repo for [https://astro-imagetools-docs.vercel.app/](https://astro-imagetools-docs.vercel.app/).
|
||||
This repo contains all the source code to build the docs site.
|
||||
|
||||
## We are Astro
|
||||
|
||||
Astro is a site builder for the web platform.
|
||||
We want everyone to be successful building sites, and that means helping everyone understand how Astro works.
|
||||
|
||||
## You are Awesome
|
||||
|
||||
You can also help make the docs awesome.
|
||||
Your feedback is welcome.
|
||||
Your writing, editing, translating, designing, and developing skills are welcome.
|
||||
You being a part of our community is welcome.
|
||||
|
||||
## Chat with Us
|
||||
|
||||
You can learn more about Astro, get support, and meet other devs in [our Discord community](https://astro.build/chat).
|
||||
|
||||
## Raise an Issue
|
||||
|
||||
Is something missing?
|
||||
Is something wrong?
|
||||
Could something be better?
|
||||
Issues are a quick way for you to offer us feedback about the docs.
|
||||
|
||||
Before you share, please [see if your issue has already been reported](https://github.com/RafidMuhymin/astro-imagetools/issues).
|
||||
|
||||
## Edit a Page
|
||||
|
||||
Every page on [https://astro-imagetools-docs.vercel.app/](https://astro-imagetools-docs.vercel.app/) has an **Edit this page** button in the sidebar.
|
||||
You can click that button to edit the source code for that page in **GitHub**.
|
||||
|
||||
After you make your changes, click **Commit changes**.
|
||||
This will automatically create a [fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) of the docs in your GitHub account with the changes.
|
||||
|
||||
Once your edits are ready in GitHub, follow the prompts to **create a pull request** and submit your changes for review.
|
||||
|
||||
## Develop
|
||||
|
||||
To begin developing locally, checkout this project from your machine.
|
||||
|
||||
```shell
|
||||
git clone git@github.com:RafidMuhymin/astro-imagetools.git
|
||||
```
|
||||
|
||||
You can install and run the project locally using [pnpm](https://pnpm.io/). Head to [the pnpm installation guide](https://pnpm.io/installation) to get that set up. Then, run the following from your terminal:
|
||||
|
||||
```shell
|
||||
pnpm install
|
||||
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
If you’re copying these instructions, remember to [configure this project as a fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-for-a-fork).
|
||||
|
||||
```shell
|
||||
git remote add upstream git@github.com:RafidMuhymin/astro-imagetools.git
|
||||
```
|
||||
|
||||
At any point, create a branch for your contribution.
|
||||
We are not strict about branch names.
|
||||
|
||||
```shell
|
||||
git checkout -b add/klingon-language
|
||||
```
|
||||
|
||||
That’s it.
|
||||
As you [open a pull request](https://github.com/withastro/astro/compare), please include a clear title and description.
|
||||
|
||||
```markdown
|
||||
# Add Klingon language to Getting Started page
|
||||
|
||||
This adds the Klingon language and also updates the sidebar and language selection components.
|
||||
```
|
||||
|
||||
Thank you for helping make the docs awesome.
|
||||
And please, [come chat with us](https://astro.build/chat) if you have any questions.
|
||||
|
||||
## Deploy
|
||||
|
||||
Every pull request generates a preview using **Vercel** for anyone to see.
|
||||
|
||||
Use the **Deploy Preview** of your pull request to review and share your changes.
|
||||
|
||||
The docs site will be automatically updated whenever pull requests are merged.
|
||||
|
||||
## Next Steps
|
||||
|
||||
- [Read the docs](https://astro-imagetools-docs.vercel.app/)
|
||||
- [Fork the project](https://github.com/RafidMuhymin/astro-imagetools/fork)
|
||||
- [Raise an issue](https://github.com/RafidMuhymin/astro-imagetools/issues/new)
|
||||
- [Discuss the docs](https://discord.gg/cZDZU3hJHc)
|
||||
@ -1,25 +0,0 @@
|
||||
import mdx from "@astrojs/mdx";
|
||||
import react from "@astrojs/react";
|
||||
import preact from "@astrojs/preact";
|
||||
import { defineConfig } from "astro/config";
|
||||
import AutoImport from "unplugin-auto-import/vite";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://astro-imagetools-docs.vercel.app/",
|
||||
integrations: [preact(), react(), mdx()],
|
||||
vite: {
|
||||
plugins: [
|
||||
AutoImport({
|
||||
include: [/\.astro$/, /\.mdx$/],
|
||||
imports: [
|
||||
{
|
||||
"@astrojs/markdown-component": [["default", "Markdown"]],
|
||||
"/src/components/CodeExample.astro": [["default", "CodeExample"]],
|
||||
},
|
||||
],
|
||||
dts: "./auto-imports.d.ts",
|
||||
}),
|
||||
],
|
||||
},
|
||||
});
|
||||
7
ref/astro-imagetools/docs/auto-imports.d.ts
vendored
7
ref/astro-imagetools/docs/auto-imports.d.ts
vendored
@ -1,7 +0,0 @@
|
||||
// Generated by 'unplugin-auto-import'
|
||||
export {};
|
||||
|
||||
declare global {
|
||||
const CodeExample: typeof import("../../../src/components/CodeExample.astro")["default"];
|
||||
const Markdown: typeof import("@astrojs/markdown-component")["default"];
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "@example/docs",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@algolia/client-search": "^4.14.3",
|
||||
"@astrojs/markdown-component": "^1.0.2",
|
||||
"@astrojs/mdx": "^0.14.0",
|
||||
"@docsearch/css": "^3.3.2",
|
||||
"@docsearch/react": "^3.3.2",
|
||||
"@types/react": "^18.0.26",
|
||||
"preact": "^10.11.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"unplugin-auto-import": "^0.9.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/preact": "^0.2.0",
|
||||
"@astrojs/react": "^0.2.1",
|
||||
"astro": "^1.9.2"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 731 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,3 +0,0 @@
|
||||
Array.from(document.getElementsByTagName("pre")).forEach((element) => {
|
||||
element.setAttribute("tabindex", "0");
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"infiniteLoopProtection": true,
|
||||
"hardReloadOnChange": false,
|
||||
"view": "browser",
|
||||
"template": "node",
|
||||
"container": {
|
||||
"port": 3000,
|
||||
"startScript": "start",
|
||||
"node": "14"
|
||||
}
|
||||
}
|
||||
@ -1,83 +0,0 @@
|
||||
---
|
||||
import { Code } from "astro/components";
|
||||
|
||||
const { values, global, api, component } = Astro.props;
|
||||
|
||||
const isJS = component ? false : true;
|
||||
|
||||
const isGlobal = global;
|
||||
|
||||
const comment = (text) => (isJS ? `// ${text}` : `<!-- ${text} -->`) + "\n";
|
||||
|
||||
function formatValue(value) {
|
||||
let formattedValue = ["number", "boolean", "function"].includes(typeof value)
|
||||
? `${value}`
|
||||
: Array.isArray(value)
|
||||
? `${value[0]}`
|
||||
: typeof value === "string" &&
|
||||
(value.startsWith("{") || value.startsWith("["))
|
||||
? value
|
||||
: `"${value}"`;
|
||||
|
||||
if (typeof value === "function") {
|
||||
formattedValue = formattedValue.replaceAll(/\n\s+/g, "\n ");
|
||||
|
||||
formattedValue = formattedValue.replace(/\n\s+\}$/, "\n }");
|
||||
}
|
||||
|
||||
if (component) {
|
||||
(formattedValue.startsWith("{") ||
|
||||
formattedValue.startsWith("[") ||
|
||||
["number", "boolean", "function"].includes(typeof value) ||
|
||||
Array.isArray(value)) &&
|
||||
(formattedValue = `{${formattedValue}}`);
|
||||
}
|
||||
|
||||
return formattedValue;
|
||||
}
|
||||
|
||||
function code(props, { api, component }) {
|
||||
const builtProps = Object.keys(props)
|
||||
.filter((key) =>
|
||||
isGlobal
|
||||
? ["src", "alt", "tag", "content", "artDirectives"].includes(key)
|
||||
? false
|
||||
: true
|
||||
: true
|
||||
)
|
||||
.map((key) =>
|
||||
key === "comment"
|
||||
? `/* ${props[key]} */`
|
||||
: key + (isJS ? ": " : "=") + `${formatValue(props[key])}`
|
||||
)
|
||||
.join(`${isJS ? "," : ""}\n `);
|
||||
|
||||
return (
|
||||
`${
|
||||
isJS
|
||||
? isGlobal
|
||||
? `export default defineConfig({`
|
||||
: `const renderedHTML = await ${api}({`
|
||||
: `<${component}`
|
||||
}
|
||||
${builtProps}${isJS ? "," : ""}
|
||||
${isJS ? `});` : `/>`}` + "\n"
|
||||
);
|
||||
}
|
||||
|
||||
const codeBlock = values
|
||||
.map((value) =>
|
||||
value === ""
|
||||
? "\n"
|
||||
: typeof value === "string"
|
||||
? comment(value)
|
||||
: Array.isArray(value)
|
||||
? isJS
|
||||
? value.filter((value) => value !== "---").join("\n") + "\n"
|
||||
: value.join("\n") + "\n"
|
||||
: code(value, { api, component })
|
||||
)
|
||||
.join("");
|
||||
---
|
||||
|
||||
<Code code={codeBlock} lang={isJS ? "js" : "astro"} />
|
||||
@ -1,107 +0,0 @@
|
||||
---
|
||||
import Src from "@config/src.astro";
|
||||
import Alt from "@config/alt.astro";
|
||||
import Tag from "@config/tag.astro";
|
||||
import Content from "@config/content.astro";
|
||||
import Sizes from "@config/sizes.astro";
|
||||
import Preload from "@config/preload.astro";
|
||||
import Loading from "@config/loading.astro";
|
||||
import Decoding from "@config/decoding.astro";
|
||||
import Attributes from "@config/attributes.astro";
|
||||
import Layout from "@config/layout.astro";
|
||||
import Placeholder from "@config/placeholder.astro";
|
||||
import BreakPoints from "@config/breakpoints.astro";
|
||||
import ObjectFit from "@config/objectFit.astro";
|
||||
import ObjectPosition from "@config/objectPosition.astro";
|
||||
import BackgroundSize from "@config/backgroundSize.astro";
|
||||
import BackgroundPosition from "@config/backgroundPosition.astro";
|
||||
import Format from "@config/format.astro";
|
||||
import FallbackFormat from "@config/fallbackFormat.astro";
|
||||
import IncludeSourceFormat from "@config/includeSourceFormat.astro";
|
||||
import FormatOptions from "@config/formatOptions.astro";
|
||||
import FadeInTransition from "@config/fadeInTransition.astro";
|
||||
import ArtDirectives from "@config/artDirectives.astro";
|
||||
import CacheDir from "@config/cacheDir.astro";
|
||||
import AssetFileNames from "@config/assetFileNames.astro";
|
||||
import Flip from "@config/flip.astro";
|
||||
import Flop from "@config/flop.astro";
|
||||
import Invert from "@config/invert.astro";
|
||||
import Flatten from "@config/flatten.astro";
|
||||
import Normalize from "@config/normalize.astro";
|
||||
import Grayscale from "@config/grayscale.astro";
|
||||
import Hue from "@config/hue.astro";
|
||||
import Saturation from "@config/saturation.astro";
|
||||
import Brightness from "@config/brightness.astro";
|
||||
import Width from "@config/width.astro";
|
||||
import Height from "@config/height.astro";
|
||||
import Aspect from "@config/aspect.astro";
|
||||
import Background from "@config/background.astro";
|
||||
import Tint from "@config/tint.astro";
|
||||
import Blur from "@config/blur.astro";
|
||||
import Median from "@config/median.astro";
|
||||
import Rotate from "@config/rotate.astro";
|
||||
import Quality from "@config/quality.astro";
|
||||
import Fit from "@config/fit.astro";
|
||||
import Kernel from "@config/kernel.astro";
|
||||
import Position from "@config/position.astro";
|
||||
|
||||
const { props } = Astro;
|
||||
|
||||
const isGlobal = props.global;
|
||||
|
||||
const { api, component } = props;
|
||||
|
||||
const isBackground =
|
||||
component?.startsWith("Background") || api?.startsWith("renderBackground");
|
||||
|
||||
const isBackgroundImage =
|
||||
component === "BackgroundImage" || api === "renderBackgroundImage";
|
||||
|
||||
const isNotImg = component !== "Img" && api !== "renderImg";
|
||||
---
|
||||
|
||||
{!isGlobal && <Src {...props} />}
|
||||
{!isGlobal && !isBackground && <Alt {...props} />}
|
||||
{!isGlobal && isBackground && <Tag {...props} />}
|
||||
{!isGlobal && api && isBackground && <Content {...props} />}
|
||||
{!isBackgroundImage && <Sizes {...props} />}
|
||||
<Preload {...props} />
|
||||
{!isBackgroundImage && <Loading {...props} />}
|
||||
{!isBackgroundImage && <Decoding {...props} />}
|
||||
<Attributes {...props} />
|
||||
{!isBackground && <Layout {...props} />}
|
||||
<Placeholder {...props} />
|
||||
<BreakPoints {...props} />
|
||||
{!isBackgroundImage && <ObjectFit {...props} />}
|
||||
{!isBackgroundImage && <ObjectPosition {...props} />}
|
||||
{isBackgroundImage && <BackgroundSize {...props} />}
|
||||
{isBackgroundImage && <BackgroundPosition {...props} />}
|
||||
<Format {...props} />
|
||||
{isNotImg && <FallbackFormat {...props} />}
|
||||
{isNotImg && <IncludeSourceFormat {...props} />}
|
||||
<FormatOptions {...props} />
|
||||
{isNotImg && !isBackgroundImage && <FadeInTransition {...props} />}
|
||||
{!isGlobal && isNotImg && <ArtDirectives {...props} />}
|
||||
{isGlobal && <CacheDir {...props} />}
|
||||
{isGlobal && <AssetFileNames {...props} />}
|
||||
<Flip {...props} />
|
||||
<Flop {...props} />
|
||||
<Invert {...props} />
|
||||
<Flatten {...props} />
|
||||
<Normalize {...props} />
|
||||
<Grayscale {...props} />
|
||||
<Hue {...props} />
|
||||
<Saturation {...props} />
|
||||
<Brightness {...props} />
|
||||
<Width {...props} />
|
||||
<Height {...props} />
|
||||
<Aspect {...props} />
|
||||
<Background {...props} />
|
||||
<Tint {...props} />
|
||||
<Blur {...props} />
|
||||
<Median {...props} />
|
||||
<Rotate {...props} />
|
||||
<Quality {...props} />
|
||||
<Fit {...props} />
|
||||
<Kernel {...props} />
|
||||
<Position {...props} />
|
||||
@ -1,22 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `alt`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
The alternative text to display if the image fails to load.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/elva-800w.jpg",
|
||||
alt: "A father holiding his beloved daughter in his arms",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,115 +0,0 @@
|
||||
---
|
||||
const { api, component } = Astro.props;
|
||||
|
||||
const dynamicText = component
|
||||
? `${"`"}<${component} />${"`"} component`
|
||||
: `${"`"}render${api}${"`"} API`;
|
||||
|
||||
const isPicture =
|
||||
Astro.props.component === "Picture" || Astro.props.api === "renderPicture";
|
||||
|
||||
const isBackgroundImage =
|
||||
Astro.props.component === "BackgroundImage" ||
|
||||
Astro.props.api === "renderBackgroundImage";
|
||||
---
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `artDirectives`
|
||||
|
||||
**Type:** `ArtDirective[]`
|
||||
</Markdown>
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
{isPicture ? (
|
||||
<Markdown is:raw>
|
||||
*An `ArtDirective` object can take all the props supported by the{" "}
|
||||
{<Fragment set:html={dynamicText} />} except `alt`, `preload`, `loading`,
|
||||
`decoding`, `attributes`, `layout`, and `fadeInTransition`. The only
|
||||
addition is `media`. Only the [`src`](#src) and [`media`](#media) properties
|
||||
are required.*
|
||||
</Markdown>
|
||||
) : isBackgroundImage ? (
|
||||
<Markdown is:raw>
|
||||
*An `ArtDirective` object can take all the props supported by the{" "}
|
||||
{<Fragment set:html={dynamicText} />} except `attributes`. The only addition
|
||||
is `media`. Only the [`src`](#src) and [`media`](#media) properties are
|
||||
required.*
|
||||
</Markdown>
|
||||
) : (
|
||||
<Markdown is:raw>
|
||||
*An `ArtDirective` object can take all the props supported by the{" "}
|
||||
{<Fragment set:html={dynamicText} />} except `preload`, `loading`,
|
||||
`decoding`, `attributes`, and `fadeInTransition`. The only addition is
|
||||
`media`. Only the [`src`](#src) and [`media`](#media) properties are
|
||||
required.*
|
||||
</Markdown>
|
||||
)}
|
||||
|
||||
<Markdown is:raw>
|
||||
**Default:** `undefined`
|
||||
|
||||
The list of art directions to be applied to the generated picture.
|
||||
|
||||
**Code Example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "/src/images/landscape.jpg",
|
||||
alt: "alt text",
|
||||
artDirectives: `[
|
||||
{
|
||||
media: "(max-aspect-ratio: 3/2)",
|
||||
src: "/src/images/portrait.jpg",
|
||||
breakpoints: [256, 384, 576],
|
||||
width: 768,
|
||||
height: 1024,
|
||||
format: ["avif"],
|
||||
fallbackFormat: "webp",
|
||||
includeSourceFormat: false,
|
||||
},
|
||||
]`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
#### `media`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
The CSS media query to use to define the art direction.
|
||||
|
||||
**Code Example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "/src/image/landscape.jpg",
|
||||
alt: "A landscape image",
|
||||
rotate: 22.5,
|
||||
artDirectives: `[
|
||||
{
|
||||
src: "/src/image/dark-potrait.jpg",
|
||||
media: "(prefers-color-scheme: dark) and (orientation: portrait)",
|
||||
},
|
||||
{
|
||||
src: "/src/image/light-potrait.jpg",
|
||||
media: "(prefers-color-scheme: light) and (orientation: portrait)",
|
||||
},
|
||||
{
|
||||
src: "/src/image/dark-landscape.jpg",
|
||||
media: "(prefers-color-scheme: dark) and (orientation: landscape)",
|
||||
},
|
||||
]`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `aspect` | `ar`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** _The aspect ratio of the source image_
|
||||
|
||||
Resizes the image to be the specified aspect ratio. If `height` and `width` are both provided, this will be ignored. If `height` is provided, the `height` will be scaled accordingly. If `width` is provided, the height will be scaled accordingly. If neither height nor width are provided, the image will be cropped to the given `aspect` ratio.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
aspect: 4 / 3,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,26 +0,0 @@
|
||||
<Markdown is:raw>
|
||||
### `assetFileNames`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `_astro/[name]@[width].[hash][extname]`
|
||||
|
||||
The file name pattern for the image assets generated. This config can be used as an alternative to `vite.build.rollupOptions.output.assetFileNames` so that the pattern only applies to assets generated by `astro-imagetools`. Patterns support the following placeholders:
|
||||
|
||||
- `[name]` - the name of the asset (basename of the source file unless the source was a data URI, in which case it's the hash of the data)
|
||||
- `[width]` - the width descriptor of the image asset
|
||||
- `[hash]` - the hash of the asset path. A specific length can be specified by appending a colon and the desired length, e.g. `[hash:8]`
|
||||
- `[ext]` - the extension of the asset (without the leading `.`)
|
||||
- `[extname]` - the extension of the asset (with the leading `.`)
|
||||
|
||||
> **Note:** Currently, the hash is generated from the asset path, not the asset content. This means that if you change the asset content, the hash will not change. It will be fixed in a future release.
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
assetFileNames: "_astro/[name]@[width].[extname]",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,116 +0,0 @@
|
||||
---
|
||||
const isImg =
|
||||
Astro.props.component === "Img" || Astro.props.api === "renderImg";
|
||||
|
||||
const isPicture =
|
||||
Astro.props.component === "Picture" || Astro.props.api === "renderPicture";
|
||||
|
||||
const isBackgroundImage =
|
||||
Astro.props.component === "BackgroundImage" ||
|
||||
Astro.props.api === "renderBackgroundImage";
|
||||
---
|
||||
|
||||
<Markdown is:raw>
|
||||
### `attributes`
|
||||
|
||||
**Type:**
|
||||
</Markdown>
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
{isImg ? (
|
||||
<Markdown is:raw>
|
||||
```ts
|
||||
declare interface Attributes {
|
||||
style?: Record<any, any>;
|
||||
link?: Omit<Record<any, any>, "as" | "rel" | "imagesizes" | "imagesrcset">;
|
||||
img?: Omit<
|
||||
Record<any, any>,
|
||||
| "src"
|
||||
| "alt"
|
||||
| "srcset"
|
||||
| "sizes"
|
||||
| "width"
|
||||
| "height"
|
||||
| "loading"
|
||||
| "decoding"
|
||||
>;
|
||||
}
|
||||
```
|
||||
</Markdown>
|
||||
) : isPicture ? (
|
||||
<Markdown is:raw>
|
||||
```ts
|
||||
declare interface Attributes {
|
||||
picture?: Record<any, any>;
|
||||
style?: Record<any, any>;
|
||||
link?: Omit<Record<any, any>, "as" | "rel" | "imagesizes" | "imagesrcset">;
|
||||
img?: Omit<
|
||||
Record<any, any>,
|
||||
| "src"
|
||||
| "alt"
|
||||
| "srcset"
|
||||
| "sizes"
|
||||
| "width"
|
||||
| "height"
|
||||
| "loading"
|
||||
| "decoding"
|
||||
>;
|
||||
}
|
||||
```
|
||||
</Markdown>
|
||||
) : isBackgroundImage ? (
|
||||
<Markdown is:raw>
|
||||
```ts
|
||||
declare interface Attributes {
|
||||
container?: Record<any, any>;
|
||||
style?: Record<any, any>;
|
||||
link?: Omit<Record<any, any>, "as" | "rel" | "imagesizes" | "imagesrcset">;
|
||||
}
|
||||
```
|
||||
</Markdown>
|
||||
) : (
|
||||
<Markdown is:raw>
|
||||
```ts
|
||||
declare interface Attributes {
|
||||
container?: Record<any, any>;
|
||||
picture?: Record<any, any>;
|
||||
style?: Record<any, any>;
|
||||
link?: Omit<Record<any, any>, "as" | "rel" | "imagesizes" | "imagesrcset">;
|
||||
img?: Omit<
|
||||
Record<any, any>,
|
||||
| "src"
|
||||
| "alt"
|
||||
| "srcset"
|
||||
| "sizes"
|
||||
| "width"
|
||||
| "height"
|
||||
| "loading"
|
||||
| "decoding"
|
||||
>;
|
||||
}
|
||||
```
|
||||
</Markdown>
|
||||
)}
|
||||
|
||||
<Markdown is:raw>
|
||||
**Default:** `{}`
|
||||
|
||||
The HTML attributes to add to the generate elements. If the `class`, `style`, and `onload` attributes are present, the values passed via this config will be merged.
|
||||
|
||||
**Code Example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
attributes: `{
|
||||
link: {
|
||||
fetchpriority: "high"
|
||||
}
|
||||
}`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,52 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `background`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
This instructs various props (e.g. [`rotate`](#rotate)) to use the specified color when filling empty spots in the image.
|
||||
|
||||
> **Note:** This prop does nothing on it's own, it has to be used in conjunction with another prop.
|
||||
|
||||
**Code example:**
|
||||
|
||||
The below example demonstrates all the posible cases when the `background` prop is used.
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
[
|
||||
// The below hack is used to not break syntax highlighting
|
||||
"--" + "-",
|
||||
'const src = "https://picsum.photos/1024/768";',
|
||||
'const alt = "A random image";',
|
||||
"--" + "-",
|
||||
],
|
||||
"",
|
||||
{
|
||||
src: [`src`],
|
||||
alt: [`alt`],
|
||||
flatten: true,
|
||||
background: "#FFFFFFAA",
|
||||
},
|
||||
"",
|
||||
{
|
||||
src: [`src`],
|
||||
alt: [`alt`],
|
||||
rotate: 90,
|
||||
background: "hsl(360, 100%, 50%)",
|
||||
},
|
||||
"",
|
||||
{
|
||||
src: [`src`],
|
||||
alt: [`alt`],
|
||||
width: 800,
|
||||
height: 450,
|
||||
fit: "contain",
|
||||
background: "crimson",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,22 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `backgroundPosition`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `50% 50%`
|
||||
|
||||
The value of the `background-position` CSS property of the generated background image sets.
|
||||
|
||||
**Code Example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
backgroundPosition: "50% 50%",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,22 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `backgroundSize`
|
||||
|
||||
**Type:** `"fill" | "contain" | "cover" | "none" | "scale-down"`
|
||||
|
||||
**Default:** `cover`
|
||||
|
||||
The value of the `background-size` CSS property of the generated background image sets.
|
||||
|
||||
**Code Example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
backgroundSize: "cover",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,39 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `blur`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Blurs the image. If the value is `true`, it performs a _fast blur_. When a `number` between `0.3` and `1000` is provided, it performs a more accurate _gaussian blur_.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
[
|
||||
// The below hack is used to not break syntax highlighting
|
||||
"--" + "-",
|
||||
'const src = "https://picsum.photos/1024/768";',
|
||||
'const alt = "A random image";',
|
||||
"--" + "-",
|
||||
],
|
||||
"",
|
||||
{
|
||||
src: ["src"],
|
||||
alt: ["alt"],
|
||||
blur: true,
|
||||
comment: "A fast blur will be performed",
|
||||
},
|
||||
"",
|
||||
{
|
||||
src: ["src"],
|
||||
alt: ["alt"],
|
||||
blur: 100,
|
||||
comment: "A more accurate blur will be performed",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,44 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `breakpoints`
|
||||
|
||||
**Type:** `number[] | { count?: number; minWidth?: number; maxWidth?: number }`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
An array of widths in pixels to generate image sets for. If not provided, the breakpoints
|
||||
will be calculated automatically.
|
||||
|
||||
If an object is passed then the breakpoints will be calculated automatically based
|
||||
on the values of the `count`,
|
||||
`minWidth`, and `maxWidth` properties. The `count` property is to specify the number
|
||||
of breakpoints to generate. The `minWidth` and `maxWidth` properties are to specify
|
||||
the widths to generate in the range between their values.
|
||||
|
||||
When an object is passed or the `breakpoints` prop is not provided, the breakpoints
|
||||
are calculated using a simple formula/algorithm. Instead of explaining the complete
|
||||
algorithm here, I am linking to the [code](https://github.com/RafidMuhymin/astro-imagetools/blob/main/packages/astro-imagetools/utils/getBreakpoints.js).
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
"number[] type",
|
||||
{
|
||||
src: "https://picsum.photos/1600/900",
|
||||
alt: "A random image",
|
||||
breakpoints: `[200, 400, 800, 1600]`,
|
||||
},
|
||||
"",
|
||||
"{ count?: number; minWidth?: number; maxWidth?: number } type",
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
breakpoints: `{ count: 3, minWidth: 300, maxWidth: 1024 }`,
|
||||
comment:
|
||||
"three breakpoints will be generated ranging from 300px to 1024px",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `brightness`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Adjusts the images `brightness` with the given brightness multiplier. Commonly used together with [`hue`](#hue) and [`saturation`](#saturation).
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
brightness: 0.5,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,21 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `cacheDir`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `./node_modules/.cache/astro-imagetools` (most of the time)
|
||||
|
||||
Where the cached images will be saved to. If not passed the default cache directory will be located using the [`find-cache-dir`](https://www.npmjs.com/package/find-cache-dir) library.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
cacheDir: `/.cache`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,22 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `content`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
The content of the html element to apply the generated background image sets to.
|
||||
|
||||
**Code Example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
content: [`await fetch(import.meta.env.CONTENT_URL).then(r => r.text())`],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,24 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `decoding`
|
||||
|
||||
**Type:** `"async" | "sync" | "auto" | null`
|
||||
|
||||
**Default:** `"async"`
|
||||
|
||||
The value of the `decoding` attribute of the generated `<img />` element. If `null`
|
||||
is provided, the `decoding` attribute will be omitted.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
decoding: "async",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,45 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `fadeInTransition`
|
||||
|
||||
**Type:** `boolean | { delay?: string; duration?: string; timingFunction?: string; }`
|
||||
|
||||
**Default:** `true | { delay: "0s"; duration?: "1s"; timingFunction: "ease"; }`
|
||||
|
||||
Whether or not to fade in the image when it is loaded. If an object is passed with the `delay`, `duration`, and `timingFunction` properties, the values will be used as values for the [`transition-delay`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay), [`transition-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration), and [`transition-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) CSS properties, respectively.
|
||||
|
||||
> **Note:** This prop is only available when the `placeholder` prop of at least one source is not `"none"`.
|
||||
|
||||
**Code Example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
[
|
||||
// The below hack is used to not break syntax highlighting
|
||||
"--" + "-",
|
||||
'const src = "https://picsum.photos/1024/768";',
|
||||
'const alt = "A random image";',
|
||||
"--" + "-",
|
||||
],
|
||||
"",
|
||||
"boolean type",
|
||||
{
|
||||
src: [`src`],
|
||||
alt: [`alt`],
|
||||
fadeInTransition: false,
|
||||
},
|
||||
"",
|
||||
"{ delay: string; duration: string; timingFunction: string; } type",
|
||||
{
|
||||
src: [`src`],
|
||||
alt: [`alt`],
|
||||
fadeInTransition: `{
|
||||
delay: "0.5s",
|
||||
duration: "0.5s",
|
||||
timingFunction: "linear",
|
||||
}`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,24 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `fallbackFormat`
|
||||
|
||||
**Type:** `format`
|
||||
|
||||
**Default:** _The format of the source image_
|
||||
|
||||
The format the browser will fallback to if the other formats are not supported.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
format: `["webp", "jpg"]`,
|
||||
fallbackFormat: "png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,27 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `fit`
|
||||
|
||||
**Type:** `"cover" | "contain" | "fill" | "inside" | "outside"`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
When both `width` and `height` are provided, this directive can be used to specify the method by which the image should fit.
|
||||
|
||||
> **Note:** The empty parts are filled with the color specified in the [`background`](#background) prop.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
width: 800,
|
||||
height: 450,
|
||||
fit: "contain",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `flatten`
|
||||
|
||||
**Type:** `boolean`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Whether to remove the alpha channel of the image or not, reducing filesize. Transparent pixels will be merged with the color set by [`background`](#background).
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
flatten: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `flip`
|
||||
|
||||
**Type:** `boolean`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Flip the image about the vertical axis. This step is always performed **after** any rotation.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
flip: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `flop`
|
||||
|
||||
**Type:** `boolean`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Flop the image about the vertical axis. This step is always performed **after** any rotation.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
flop: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,44 +0,0 @@
|
||||
---
|
||||
const isImg =
|
||||
Astro.props.component === "Img" || Astro.props.api === "renderImg";
|
||||
---
|
||||
|
||||
<Markdown is:raw>
|
||||
### `format`
|
||||
</Markdown>
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
{isImg ? (
|
||||
<Markdown is:raw>
|
||||
**Type:** `"heic" | "heif" | "avif" | "jpg" | "jpeg" | "png" | "tiff" |
|
||||
"webp" | "gif"` **Default:** _The format of the source image_ The format to
|
||||
generate image sets for.
|
||||
</Markdown>
|
||||
) : (
|
||||
<Markdown is:raw>
|
||||
**Type:** `format | format[] | [] | null` **`format`:** `"heic" | "heif" |
|
||||
"avif" | "jpg" | "jpeg" | "png" | "tiff" | "webp" | "gif"` **Default:**
|
||||
`["avif", "webp"]` The image format or formats to generate image sets for.
|
||||
If `format` is set to `null` or `[]`, no _additional_ image set will be
|
||||
generated. > **Note:** Passing `[]` or `null` does not necessarily mean that
|
||||
no image sets will be generated. Image sets will still be generated for the
|
||||
source format if `includeSourceFormat` is set to `true` (which is the
|
||||
default value) and for the format specified in the `fallbackFormat` prop
|
||||
(the default value is the source format).
|
||||
</Markdown>
|
||||
)}
|
||||
|
||||
<Markdown is:raw>
|
||||
**Code Example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
format: isImg ? "webp" : `["avif", "webp"]`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,274 +0,0 @@
|
||||
---
|
||||
const { api, component } = Astro.props;
|
||||
|
||||
const isImg = api === "renderImg" || component === "Img";
|
||||
|
||||
const dynamicText = component
|
||||
? `${"`"}<${component} />${"`"} component`
|
||||
: `${"`"}render${api}${"`"} API`;
|
||||
|
||||
declare interface ConfigOptions {
|
||||
src: string;
|
||||
alt: string;
|
||||
placeholder: string;
|
||||
format: string | string[];
|
||||
fallbackFormat?: string;
|
||||
includeSourceFormat?: boolean;
|
||||
formatOptions: string;
|
||||
}
|
||||
|
||||
const configOptions = {
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
placeholder: "tracedSVG",
|
||||
} as ConfigOptions;
|
||||
|
||||
configOptions.format = isImg ? "webp" : [`["webp", "jpg"]`];
|
||||
isImg || (configOptions.fallbackFormat = "png");
|
||||
isImg || (configOptions.includeSourceFormat = false);
|
||||
configOptions.formatOptions = isImg
|
||||
? `{
|
||||
webp: quality: 50,
|
||||
}`
|
||||
: `{
|
||||
jpg: {
|
||||
quality: 80,
|
||||
},
|
||||
png: {
|
||||
quality: 80,
|
||||
},
|
||||
webp: {
|
||||
quality: 50,
|
||||
},
|
||||
tracedSVG: {
|
||||
options: {
|
||||
background: "#fff",
|
||||
color: "#000",
|
||||
turnPolicy: "black",
|
||||
turdSize: 1,
|
||||
alphaMax: 1,
|
||||
optCurve: true,
|
||||
threshold: 100,
|
||||
blackOnWhite: false,
|
||||
},
|
||||
},
|
||||
}`;
|
||||
---
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `formatOptions`
|
||||
|
||||
<p><strong style="font-size: large;">Type</strong></p>
|
||||
|
||||
_`formatOptions` is an object that takes config options for all the supported formats: `heic`, `heif`, `avif`, `jpg`, `jpeg`, `png`, `tiff`, `webp`, `gif`, and `tracedSVG`._
|
||||
|
||||
_The supported config options of all the formats except `tracedSVG` are: [`flip`](#flop), [`flop`](#flip), [`invert`](#invert), [`flatten`](#flatten), [`normalize`](#normalize), [`grayscale`](#grayscale), [`hue`](#hue), [`saturation`](#saturation), [`brightness`](#brightness), [`width`](#width), [`height`](#height), [`aspect`](#aspect), [`background`](#background), [`tint`](#tint), [`blur`](#blur), [`median`](#median), [`rotate`](#rotate), [`quality`](#quality), [`fit`](#fit), [`kernel`](#kernel), [`position`](#position)._
|
||||
|
||||
_The config options supported by the [`tracedSVG`](#tracedSVG) format are listed below._
|
||||
|
||||
**Default:** _The default values for the all the formats except `tracedSVG` are inherited from the direct configs of the {<Fragment set:html={dynamicText} />}. And for more information on the `tracedSVG` property, see the [`PotraceOptions`](#potraceoptions) interface._
|
||||
|
||||
The configuration options for the different formats. These configuration options will be respected when generating image sets for different formats.
|
||||
|
||||
The `tracedSVG` config object is used only when the `placeholder` prop is set to `"tracedSVG"`.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample {...Astro.props} values={[configOptions]} />
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
#### `tracedSVG`
|
||||
|
||||
All the properties of the `tracedSVG` property are the configuration options supported by the [`node-potrace`](https://npmjs.com/package/node-potrace) library. These options are used to generate traced SVGs when the `placeholder` prop is set to `"tracedSVG"`. All the properties defined below are optional.
|
||||
|
||||
> **Note:** Most of the below _jargons_ are taken from the [`potrace`](https://npmjs.com/package/potrace) documentation. I have tried my best to simplify the config options and make the documentation as simple and clear as possible.
|
||||
>
|
||||
> If you want to go deeper into this, check the [Technical documentation](http://potrace.sourceforge.net/#technical) of the original C [`potrace`](http://potrace.sourceforge.net/) library.
|
||||
>
|
||||
> If you have a good knowledge on the `potrace` library and about bitmap tracing and posterizing, please consider contributing to update the documentation of this section.
|
||||
|
||||
##### `function`
|
||||
|
||||
**Type:** `"trace" | "posterize"`
|
||||
|
||||
**Default:** `"trace"`
|
||||
|
||||
Which method of the `node-potrace` library to use. The `posterize` method is basically _tracing_ the image multiple times to produce a more accurate result. See this [example](https://www.npmjs.com/package/potrace#example-and-demo) for more information.
|
||||
|
||||
##### `options`
|
||||
|
||||
###### `turnPolicy`
|
||||
|
||||
**Type:** `"black" | "white" | "left" | "right" | "minority" | "majority"`
|
||||
|
||||
**Default:** `"minority"`
|
||||
|
||||
How to resolve ambiguities in path decomposition. Refer to the [**potrace-algorithm**](http://potrace.sourceforge.net/potrace.pdf) documentaion (PDF, page 4) for more information.
|
||||
|
||||
###### `turdSize`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** `2`
|
||||
|
||||
Suppress speckles of up to this size.
|
||||
|
||||
###### `alphaMax`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** `1`
|
||||
|
||||
Corner threshold parameter.
|
||||
|
||||
###### `optCurve`
|
||||
|
||||
**Type:** `boolean`
|
||||
|
||||
**Default:** `true`
|
||||
|
||||
Curve optimization.
|
||||
|
||||
###### `optTolerance`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** `0.2`
|
||||
|
||||
Curve optimization tolerance.
|
||||
|
||||
###### `threshold`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** `-1`
|
||||
|
||||
_When `function` is `"trace"` :_
|
||||
|
||||
Threshold below which color is considered black. Should be a number between 0 and 255 or `-1` in which case threshold will be selected automatically using [Algorithm For Multilevel Thresholding](http://www.iis.sinica.edu.tw/page/jise/2001/200109_01.pdf).
|
||||
|
||||
_When `function` is `"posterize"` :_
|
||||
|
||||
Breaks image into foreground and background (and only foreground being broken into desired number of layers). Basically when provided it becomes a threshold for last (least opaque) layer and then `steps - 1` intermediate thresholds calculated. If **steps** is an array of thresholds and every value from the array is lower (or larger if **blackOnWhite** parameter set to `false`) than threshold - threshold will be added to the array, otherwise just ignored.
|
||||
|
||||
###### `blackOnWhite`
|
||||
|
||||
**Type:** `boolean`
|
||||
|
||||
**Default:** `true`
|
||||
|
||||
Specifies colors by which side from threshold should be turned into vector shape.
|
||||
|
||||
###### `color`
|
||||
|
||||
**Type:** `"auto" | string`
|
||||
|
||||
**Default:** `"auto"`
|
||||
|
||||
Fill color for the traced image. If `"auto"` is provided, the color will be black or white depending on the `blackOnWhite` property.
|
||||
|
||||
<h6 id="svg-background"><code>background</code></h6>
|
||||
|
||||
**Type:** `"transparent" | string`
|
||||
|
||||
**Default:** `"transparent"`
|
||||
|
||||
Background color of the traced image. If `"transparent"` is provided, no background will be present.
|
||||
|
||||
###### `fill`
|
||||
|
||||
**Type:** `"spread" | "dominant" | "median" | "mean"`
|
||||
|
||||
Determines how fill color for each layer should be selected.
|
||||
|
||||
- `dominant` - Most frequent color in range (used by default),
|
||||
- `mean` - Arithmetic mean (average),
|
||||
- `median` - Median color,
|
||||
- `spread` - Ignores color information of the image and just spreads colors equally in range between 0 and `threshold` (or `threshold` and ..255 if `blackOnWhite` is set to `false`).
|
||||
|
||||
> **Note:** This option is available only when `function` is `"posterize"`.
|
||||
|
||||
###### `ranges`
|
||||
|
||||
**Type:** `"auto" | "equal"`
|
||||
|
||||
How color stops for each layer should be selected. Ignored if `steps` is an array. Possible values are:
|
||||
|
||||
- `auto` - Performs automatic thresholding (using [Algorithm For Multilevel Thresholding](http://www.iis.sinica.edu.tw/page/jise/2001/200109_01.pdf)). Preferable method for already posterized sources, but takes long time to calculate 5 or more thresholds (exponential time complexity) _(used by default)_
|
||||
- `equal` - Ignores color information of the image and breaks available color space into equal chunks
|
||||
|
||||
> **Note:** This option is available only when `function` is `"posterize"`.
|
||||
|
||||
###### `steps`
|
||||
|
||||
**Type:** `number | number[]`
|
||||
|
||||
Specifies desired number of layers in resulting image. If a number provided - thresholds for each layer will be automatically calculated according to `ranges` property. If an array provided it expected to be an array with precomputed thresholds for each layer (in range between 0 and 255).
|
||||
|
||||
> **Note:** This option is available only when `function` is `"posterize"`.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
[
|
||||
// The below hack is used to not break syntax highlighting
|
||||
"--" + "-",
|
||||
'const src = "https://picsum.photos/1024/768";',
|
||||
'const alt = "A random image";',
|
||||
'const placeholder = "tracedSVG";',
|
||||
"",
|
||||
"const traceOptions = {",
|
||||
' background: "#fff",',
|
||||
' color: "#000",',
|
||||
' turnPolicy: "black",',
|
||||
" turdSize: 1,",
|
||||
" alphaMax: 1,",
|
||||
" optCurve: true,",
|
||||
" threshold: 100,",
|
||||
" blackOnWhite: false,",
|
||||
"};",
|
||||
"",
|
||||
"const posterizeOptions = {",
|
||||
' fill: "spread",',
|
||||
" steps: [0, 50, 100],",
|
||||
' ranges: "equal",',
|
||||
"};",
|
||||
"--" + "-",
|
||||
],
|
||||
"",
|
||||
{
|
||||
src: [`src`],
|
||||
alt: [`alt`],
|
||||
placeholder: [`placeholder`],
|
||||
comment: [`tracing SVG`],
|
||||
formatOptions: `{
|
||||
tracedSVG: {
|
||||
function: "trace",
|
||||
options: traceOptions,
|
||||
},
|
||||
}`,
|
||||
},
|
||||
"",
|
||||
{
|
||||
src: [`src`],
|
||||
alt: [`alt`],
|
||||
placeholder: [`placeholder`],
|
||||
comment: [`posterizing SVG`],
|
||||
formatOptions: `{
|
||||
tracedSVG: {
|
||||
function: "posterize",
|
||||
options: {
|
||||
...traceOptions,
|
||||
...posterizeOptions,
|
||||
},
|
||||
},
|
||||
}`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,25 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `grayscale`
|
||||
|
||||
**Type:** `boolean`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Converts the image to an 8-bit grayscale image.
|
||||
|
||||
> **Note:** If `true` the image will be converted to the `b-w` colorspace, meaning the resulting image will only have one channel.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
grayscale: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,25 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `height` | `h`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** _The height of the source image_
|
||||
|
||||
Resizes the image to be the specified amount of pixels tall. If not given the `width` will be scaled accordingly.
|
||||
|
||||
> **Note:** The specified `height` will be used to resize the source image when loading it. The final heights of the image will be based on the final calculated [`breakpoints`](#breakpoints).
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
height: 300,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `hue`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Adjusts the images `hue` rotation by the given number of degrees. Commonly used together with [`saturation`](#saturation) and [`brightness`](#brightness).
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
hue: -30,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,24 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `includeSourceFormat`
|
||||
|
||||
**Type:** `boolean`
|
||||
|
||||
**Default:** `true`
|
||||
|
||||
Whether to generate image set for the source format or not.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "/src/images/image.tiff",
|
||||
alt: "A random image",
|
||||
fallbackFormat: "png",
|
||||
includeSourceFormat: false,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `invert`
|
||||
|
||||
**Type:** `boolean`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Produces a **negative** of the image.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
invert: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `kernel`
|
||||
|
||||
**Type:** `"nearest" | "cubic" | "mitchell" | "lanczos2" | "lanczos3"`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
The interpolation kernel to use when resizing the images.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
kernel: "lanczos3",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,40 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `layout`
|
||||
|
||||
**Type:** `"constrained" | "fixed" | "fullWidth" | "fill"`
|
||||
|
||||
**Default:** `"constrained"`
|
||||
|
||||
The layout mode to determine the resizing behavior of the image in the
|
||||
browser.
|
||||
|
||||
In `constrained` mode, the image will occupy full width of the container
|
||||
with `max-width` set to 100% its width. The height of the image will be calculated
|
||||
based on the aspect ratio of the image. The image will be scaled down to fit the
|
||||
container but won't be enlarged.
|
||||
|
||||
In `fixed` mode, the image will have a fixed width
|
||||
and height. The `width` and `height` props will be used to set the width and height
|
||||
of the image. The image won't be scaled down nor enlarged.
|
||||
|
||||
In `fullWidth` mode,
|
||||
the image will be scaled up or down to occupy the full width of the container.
|
||||
The height of the image will be calculated based on the aspect ratio of the image.
|
||||
|
||||
In `fill` mode, the image will be scaled up or down to fill the entire width and
|
||||
height of the container.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
layout: "constrained",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,24 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `loading`
|
||||
|
||||
**Type:** `"lazy" | "eager" | "auto" | null`
|
||||
|
||||
**Default:** `preload ? "eager" : "lazy"`
|
||||
|
||||
The value of the `loading` attribute of the generated `<img />` element. If `null`
|
||||
is provided, the `loading` attribute will be omitted.
|
||||
|
||||
**Code Example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
loading: "lazy",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,39 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `median`
|
||||
|
||||
**Type:** `number | boolean`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Applies a median filter. This is commonly used to remove noise from images.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
[
|
||||
// The below hack is used to not break syntax highlighting
|
||||
"--" + "-",
|
||||
'const src = "https://picsum.photos/1024/768";',
|
||||
'const alt = "A random image";',
|
||||
"--" + "-",
|
||||
],
|
||||
"",
|
||||
"boolean type",
|
||||
{
|
||||
src: ["src"],
|
||||
alt: ["alt"],
|
||||
median: true,
|
||||
},
|
||||
"",
|
||||
"number type",
|
||||
{
|
||||
src: ["src"],
|
||||
alt: ["alt"],
|
||||
median: 50,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `normalize`
|
||||
|
||||
**Type:** `boolean`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
**Normalizes** the image by stretching its luminance to cover the full dynamic range. This Enhances the output image contrast.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
normalize: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `objectFit`
|
||||
|
||||
**Type:** `"fill" | "contain" | "cover" | "none" | "scale-down"`
|
||||
|
||||
**Default:** `cover`
|
||||
|
||||
The value of the `object-fit` CSS property of the generated `<img />` element.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
objectFit: "cover",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `objectPosition`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `50% 50%`
|
||||
|
||||
The value of the `object-position` CSS property of the generated `<img />` element.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
objectPosition: "50% 50%",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,35 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `placeholder`
|
||||
|
||||
**Type:** `"dominantColor" | "blurred" | "tracedSVG" | "none"`
|
||||
|
||||
**Default:** `"blurred"`
|
||||
|
||||
The placeholder to be displayed while the image is loading.
|
||||
|
||||
If `placeholder` is set to `"dominantColor"`, the dominant color of the source
|
||||
image will be used as the placeholder.
|
||||
|
||||
If the value is set to `"blurred"`, a very low-resolution version of the
|
||||
provided image will be enlarged and used as the placeholder.
|
||||
|
||||
If the value is set to `"tracedSVG"`, a traced SVG of the image will be used
|
||||
as the placeholder. If the value is set to `"none"`, no placeholder will be
|
||||
displayed.
|
||||
|
||||
> **Note:** If the value is set to `"tracedSVG"`, the placeholder can be customized to be a **Posterized SVG** too. See the [**formatOptions**](#formatOptions) prop for more details.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
placeholder: "blurred",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,28 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `position`
|
||||
|
||||
**Type:** `"top" | "right top" | "right" | "right bottom" | "bottom" | "left bottom" | "left" | "left top" | "north" | "northeast" | "east" | "southeast" | "south" | "southwest" | "west" | "northwest" | "center" | "centre" | "cover" | "entropy" | "attention"`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
When both `width` and `height` are provided **AND** `fit` is is set to `cover` or `contain`, this directive can be used to set the position of the image.
|
||||
|
||||
> See `sharp`'s [resize options](https://sharp.pixelplumbing.com/api-resize#resize) for more information.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
width: 800,
|
||||
height: 450,
|
||||
fit: "contain",
|
||||
position: "attention",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,25 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `preload`
|
||||
|
||||
**Type:** `"heic" | "heif" | "avif" | "jpg" | "jpeg" | "png" | "tiff" | "webp" | "gif"`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Which format of image set to preload.
|
||||
|
||||
> **Note:** It's not reasonable to preload multiple formats of the same image. And due to the factors like file size and browser support, it's not possible to pick the best format automatically.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
preload: "webp",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,27 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `quality`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
All formats (except `gif`) allow the quality to be adjusted by setting this directive.
|
||||
|
||||
The argument must be a number between `0` and `100`.
|
||||
|
||||
> See sharps [Output options](https://sharp.pixelplumbing.com/api-output) for default quality values.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
quality: 50,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,25 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `rotate`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Rotate the image by the specified number of degrees.
|
||||
|
||||
> **Note:** The empty parts are filled with the color specified in the [`background`](#background) prop.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
rotate: 90,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `saturation`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Adjusts the images `saturation` with the given saturation multiplier. Commonly used together with [`hue`](#hue) and [`brightness`](#brightness).
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
saturation: 0.5,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,36 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `sizes`
|
||||
|
||||
**Type:** `string` or `(breakpoints: number[]) => string`
|
||||
|
||||
**Default:** `` (breakpoints) => `(min-width: ${breakpoints[breakpopints.length - 1]}px) ${breakpoints[breakpopints.length - 1]}px, 100vw ``
|
||||
|
||||
A string or function that returns a string suitable for the value of the `sizes`
|
||||
attribute of the generated `<img />` element. The final calculated breakpoints
|
||||
are passed to the function as a parameter.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
"string type",
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
sizes: "(min-width: 1024px) 1024px, 100vw",
|
||||
},
|
||||
"",
|
||||
"function type",
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
sizes: (breakpoints) => {
|
||||
const maxWidth = breakpoints[breakpoints.length - 1];
|
||||
return `(min-width: ${maxWidth}px) ${maxWidth}px, 100vw`;
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,53 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `src`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
The path to the source image. If local, the path must be relative to the project root. Remote URLs and Data URIs are also supported.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
"Local Image",
|
||||
{ src: "/src/images/image.jpg", alt: "A local image" },
|
||||
"",
|
||||
"Remote URL",
|
||||
{ src: "https://example.com/image.jpg", alt: "A remote image" },
|
||||
"",
|
||||
"Data URI",
|
||||
{
|
||||
src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
|
||||
alt: "A base64 encoded image",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Markdown is:raw>
|
||||
#### SSR Usage
|
||||
|
||||
In `SSR` mode, if you are using local images, you have to generate assets for them first and then you have to pass the path to the assets to the `src` property.
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
[
|
||||
// The below hack is used to not break syntax highlighting
|
||||
"--" + "-",
|
||||
`import src from "../path/to/source_image.jpg";`,
|
||||
"--" + "-",
|
||||
],
|
||||
"",
|
||||
{ src: ["src"], alt: "A local image in SSR mode" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Markdown is:raw>
|
||||
> The `raw` query parameter has been used to tell the internal Vite plugin to emit the asset from the source image unchanged.
|
||||
</Markdown>
|
||||
@ -1,22 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `tag`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `section`
|
||||
|
||||
Which html tag to use for the html element to apply the generated background image sets to.
|
||||
|
||||
**Code Example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
tag: "section",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `tint`
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
**Default:** `undefined`
|
||||
|
||||
Tints the image using the provided chroma while preserving the image luminance. If the image has an alpha channel it will be untouched.
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
tint: "rgba(10,33,127)",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,25 +0,0 @@
|
||||
<!-- prettier-ignore -->
|
||||
<Markdown is:raw>
|
||||
### `width` | `w`
|
||||
|
||||
**Type:** `number`
|
||||
|
||||
**Default:** _The width of the source image_
|
||||
|
||||
Resizes the image to be the specified amount of pixels wide. If not given the `height` will be scaled accordingly.
|
||||
|
||||
> **Note:** The specified `width` will be used to resize the source image when loading it. The final widths of the image will be based on the final calculated [`breakpoints`](#breakpoints).
|
||||
|
||||
**Code example:**
|
||||
</Markdown>
|
||||
|
||||
<CodeExample
|
||||
{...Astro.props}
|
||||
values={[
|
||||
{
|
||||
src: "https://picsum.photos/1024/768",
|
||||
alt: "A random image",
|
||||
width: 1024,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -1,176 +0,0 @@
|
||||
---
|
||||
// fetch all commits for just this page's path
|
||||
const path = "docs/" + Astro.props.path;
|
||||
const url = `https://api.github.com/repos/withastro/astro/commits?path=${path}`;
|
||||
const commitsURL = `https://github.com/withastro/astro/commits/main/${path}`;
|
||||
|
||||
async function getCommits(url) {
|
||||
try {
|
||||
const token: string = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN;
|
||||
|
||||
if (!token) {
|
||||
throw new Error(
|
||||
'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'
|
||||
);
|
||||
}
|
||||
|
||||
const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`;
|
||||
|
||||
const res = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: auth,
|
||||
"User-Agent": "astro-docs/1.0",
|
||||
},
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(
|
||||
`Request to fetch commits failed. Reason: ${res.statusText}
|
||||
Message: ${data.message}`
|
||||
);
|
||||
}
|
||||
|
||||
return data;
|
||||
} catch (e) {
|
||||
console.warn(`[error] /src/components/AvatarList.astro
|
||||
${e?.message ?? e}`);
|
||||
|
||||
return new Array();
|
||||
}
|
||||
}
|
||||
|
||||
function removeDups(arr) {
|
||||
if (!arr) {
|
||||
return new Array();
|
||||
}
|
||||
|
||||
let map = new Map();
|
||||
|
||||
for (let item of arr) {
|
||||
let author = item.author;
|
||||
|
||||
// Deduplicate based on author.id
|
||||
map.set(author.id, { login: author.login, id: author.id });
|
||||
}
|
||||
|
||||
return Array.from(map.values());
|
||||
}
|
||||
|
||||
const data = await getCommits(url);
|
||||
const unique = removeDups(data);
|
||||
const recentContributors = unique.slice(0, 3); // only show avatars for the 3 most recent contributors
|
||||
const additionalContributors = unique.length - recentContributors.length; // list the rest of them as # of extra contributors
|
||||
---
|
||||
|
||||
<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
|
||||
<div class="contributors">
|
||||
<ul
|
||||
class="avatar-list"
|
||||
style={`--avatar-count: ${recentContributors.length}`}
|
||||
>
|
||||
{recentContributors.map((item) => (
|
||||
<li>
|
||||
<a href={`https://github.com/${item.login}`}>
|
||||
<img
|
||||
alt={`Contributor ${item.login}`}
|
||||
title={`Contributor ${item.login}`}
|
||||
width="64"
|
||||
height="64"
|
||||
src={`https://avatars.githubusercontent.com/u/${item.id}`}
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{additionalContributors > 0 && (
|
||||
<span>
|
||||
<a
|
||||
href={commitsURL}
|
||||
>{`and ${additionalContributors} additional contributor${
|
||||
additionalContributors > 1 ? "s" : ""
|
||||
}.`}</a>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.avatar-list {
|
||||
--avatar-size: 2.5rem;
|
||||
--avatar-count: 3;
|
||||
|
||||
display: grid;
|
||||
list-style: none;
|
||||
/* Default to displaying most of the avatar to
|
||||
enable easier access on touch devices, ensuring
|
||||
the WCAG touch target size is met or exceeded */
|
||||
grid-template-columns: repeat(
|
||||
var(--avatar-count),
|
||||
max(44px, calc(var(--avatar-size) / 1.15))
|
||||
);
|
||||
/* `padding` matches added visual dimensions of
|
||||
the `box-shadow` to help create a more accurate
|
||||
computed component size */
|
||||
padding: 0.08em;
|
||||
font-size: var(--avatar-size);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) and (any-pointer: fine) {
|
||||
.avatar-list {
|
||||
/* We create 1 extra cell to enable the computed
|
||||
width to match the final visual width */
|
||||
grid-template-columns: repeat(
|
||||
calc(var(--avatar-count) + 1),
|
||||
calc(var(--avatar-size) / 1.75)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-list li {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
}
|
||||
|
||||
.avatar-list li:hover ~ li a,
|
||||
.avatar-list li:focus-within ~ li a {
|
||||
transform: translateX(33%);
|
||||
}
|
||||
|
||||
.avatar-list img,
|
||||
.avatar-list a {
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-list a {
|
||||
transition: transform 180ms ease-in-out;
|
||||
}
|
||||
|
||||
.avatar-list img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.avatar-list a:focus {
|
||||
outline: 2px solid transparent;
|
||||
/* Double-layer trick to work for dark and light backgrounds */
|
||||
box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
|
||||
}
|
||||
|
||||
.contributors {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contributors > * + * {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
import AvatarList from "./AvatarList.astro";
|
||||
const { path } = Astro.props;
|
||||
---
|
||||
|
||||
<footer>
|
||||
<AvatarList {path} />
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding: 2rem 0;
|
||||
border-top: 3px solid var(--theme-divider);
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user