├── .npmrc
├── .stackblitzrc
├── .vscode
    ├── extensions.json
    └── launch.json
├── README.md
├── app.mjs
├── astro-imagetools.config.mjs
├── astro.config.mjs
├── package.json
├── public
    └── favicon.ico
├── sandbox.config.json
└── src
    ├── images
        ├── elva-480w-close-portrait.jpg
        └── elva-800w.jpg
    ├── layouts
        ├── LayoutsLayout.astro
        ├── MainLayout.astro
        └── PlaceholderLayout.astro
    ├── pages
        ├── api
        │   ├── renderBackgroundImage.astro
        │   ├── renderBackgroundPicture.astro
        │   ├── renderImg.astro
        │   └── renderPicture.astro
        ├── components
        │   ├── BackgroundImage.astro
        │   ├── BackgroundPicture.astro
        │   ├── Img.astro
        │   └── Picture.astro
        ├── index.md
        ├── layout
        │   ├── constrained.astro
        │   ├── fill.astro
        │   ├── fixed.astro
        │   └── fullWidth.astro
        └── placeholder
        │   ├── blurred.astro
        │   ├── dominantColor.astro
        │   ├── none.astro
        │   └── tracedSVG.astro
    └── styles
        └── index.css


/.npmrc:
--------------------------------------------------------------------------------
1 | ## force pnpm to hoist 
2 | shamefully-hoist = true


--------------------------------------------------------------------------------
/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 |   "startCommand": "npm start",
3 |   "env": {
4 |     "ENABLE_CJS_IMPORTS": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Astro ImageTools Live Examples
2 | 
3 | This repository contains source code for the [**Astro ImageTools Demo**](https://astro-imagetools-demo.vercel.app) website.
4 | 
5 | 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.
6 | 


--------------------------------------------------------------------------------
/app.mjs:
--------------------------------------------------------------------------------
 1 | import fs from "fs";
 2 | import http from "http";
 3 | import { middleware } from "astro-imagetools/ssr";
 4 | import { handler as ssrHandler } from "./dist/server/entry.mjs";
 5 | 
 6 | http
 7 |   .createServer(async function (req, res) {
 8 |     await ssrHandler(req, res, async (err) => {
 9 |       if (err) {
10 |         res.writeHead(500);
11 |         res.end(err.toString());
12 |       } else {
13 |         const assetPath = `./dist/client${req.url}`;
14 | 
15 |         if (fs.existsSync(assetPath)) {
16 |           const buffer = await fs.promises.readFile(assetPath);
17 | 
18 |           res.writeHead(200);
19 |           res.end(buffer);
20 |         } else {
21 |           const buffer = await middleware(req, res);
22 | 
23 |           if (buffer) {
24 |             res.writeHead(200);
25 |             res.end(buffer);
26 |           } else {
27 |             res.writeHead(404);
28 |             res.end();
29 |           }
30 |         }
31 |       }
32 |     });
33 |   })
34 |   .listen(8080);
35 | 
36 | console.log("Listening to Port 8080");
37 | 


--------------------------------------------------------------------------------
/astro-imagetools.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "astro-imagetools/config";
2 | 
3 | export default defineConfig({});
4 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "astro/config";
 2 | import { astroImageTools } from "astro-imagetools";
 3 | 
 4 | // https://astro.build/config
 5 | export default defineConfig({
 6 |   vite: {
 7 |     plugins: [
 8 |       {
 9 |         name: "import.meta.url-transformer",
10 |         transform: (code, id) => {
11 |           if (id.endsWith(".astro"))
12 |             return code.replace(/import.meta.url/g, `"${id}"`);
13 |         },
14 |       },
15 |     ],
16 |   },
17 | 
18 |   experimental: {
19 |     integrations: true,
20 |   },
21 | 
22 |   integrations: [astroImageTools],
23 | });
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "dev": "astro dev",
 4 |     "start": "astro dev",
 5 |     "build": "astro build",
 6 |     "preview": "astro preview"
 7 |   },
 8 |   "dependencies": {
 9 |     "astro-spa": "^1.3.9",
10 |     "react": "^18.1.0",
11 |     "react-dom": "^18.1.0"
12 |   },
13 |   "devDependencies": {
14 |     "@astrojs/lit": "^0.1.2",
15 |     "@astrojs/preact": "^0.1.2",
16 |     "@astrojs/react": "^0.1.1",
17 |     "@astrojs/solid-js": "^0.1.2",
18 |     "@astrojs/svelte": "^0.1.2",
19 |     "@astrojs/vue": "^0.1.3",
20 |     "astro": "^1.0.0-beta.20",
21 |     "astro-imagetools": "workspace:^0.5.8"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RafidMuhymin/astro-image-demo/0ee3c242c24c204544d18e884a5312c5789bcacf/public/favicon.ico


--------------------------------------------------------------------------------
/sandbox.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "infiniteLoopProtection": true,
 3 |   "hardReloadOnChange": false,
 4 |   "view": "browser",
 5 |   "template": "node",
 6 |   "container": {
 7 |     "port": 3000,
 8 |     "startScript": "start",
 9 |     "node": "16"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/images/elva-480w-close-portrait.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RafidMuhymin/astro-image-demo/0ee3c242c24c204544d18e884a5312c5789bcacf/src/images/elva-480w-close-portrait.jpg


--------------------------------------------------------------------------------
/src/images/elva-800w.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RafidMuhymin/astro-image-demo/0ee3c242c24c204544d18e884a5312c5789bcacf/src/images/elva-800w.jpg


--------------------------------------------------------------------------------
/src/layouts/LayoutsLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Picture } from "astro-imagetools/components";
 3 | import MainLayout from "./MainLayout.astro";
 4 | 
 5 | const { layout, importMetaUrl } = Astro.props;
 6 | ---
 7 | 
 8 | <MainLayout {importMetaUrl}>
 9 |   <h1><code>{layout}</code> Layout Example</h1>
10 | 
11 |   <br />
12 | 
13 |   <Picture src="https://picsum.photos/1024/768/" alt="A random image" {layout}
14 |   />
15 | </MainLayout>
16 | 


--------------------------------------------------------------------------------
/src/layouts/MainLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Spa } from "astro-spa";
 3 | import "../styles/index.css";
 4 | 
 5 | const { importMetaUrl } = Astro.props as { importMetaUrl: string };
 6 | 
 7 | const path =
 8 |   Astro.props.content?.path ||
 9 |   importMetaUrl?.slice(importMetaUrl.indexOf("/pages/") + 7);
10 | 
11 | const GitHubURL = `https://github.com/RafidMuhymin/astro-imagetools/tree/main/demo/src/pages/${path}`;
12 | ---
13 | 
14 | <html>
15 |   <head>
16 |     <link
17 |       rel="stylesheet"
18 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap-reboot.min.css"
19 |       crossorigin="anonymous"
20 |     />
21 |   </head>
22 | 
23 |   <body>
24 |     <main>
25 |       <svg
26 |         xmlns="http://www.w3.org/2000/svg"
27 |         width="100"
28 |         height="100"
29 |         viewBox="0 0 250 250"
30 |         fill="#151513"
31 |         class="view-source"
32 |       >
33 |         <a title="View Source" href={GitHubURL}>
34 |           <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff"></path>
35 |           <path
36 |             class="view-source_arm___1DMT"
37 |             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"
38 |           ></path>
39 |           <path
40 |             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"
41 |           ></path>
42 |         </a>
43 |       </svg>
44 | 
45 |       <slot />
46 |     </main>
47 | 
48 |     <Spa />
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/src/layouts/PlaceholderLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Picture } from "astro-imagetools/components";
 3 | import MainLayout from "./MainLayout.astro";
 4 | 
 5 | const { placeholder, importMetaUrl } = Astro.props;
 6 | ---
 7 | 
 8 | <MainLayout {importMetaUrl}>
 9 |   <h1><code>{placeholder}</code> Placeholder Example</h1>
10 | 
11 |   <br />
12 | 
13 |   <Picture
14 |     src="https://picsum.photos/1024/768/"
15 |     alt="A random image"
16 |     {placeholder}
17 |   />
18 | </MainLayout>
19 | 


--------------------------------------------------------------------------------
/src/pages/api/renderBackgroundImage.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { ImageSupportDetection } from "astro-imagetools/components";
 3 | import { renderBackgroundImage } from "astro-imagetools/api";
 4 | import MainLayout from "../../layouts/MainLayout.astro";
 5 | 
 6 | const { link, style, htmlElement } = await renderBackgroundImage({
 7 |   src: "https://picsum.photos/1024/768/",
 8 |   content: `<p>
 9 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, nisi!
10 |       Commodi, dolor hic omnis debitis natus eaque nisi magni corrupti earum
11 |       aliquam at quidem dolorum?
12 |     </p>
13 | 
14 |     <p>
15 |       Eos facere amet nesciunt! Vero, culpa eaque quasi ullam atque alias
16 |       repudiandae facere placeat ipsam recusandae quam minus nemo officia
17 |       reiciendis dicta quaerat maiores omnis.
18 |     </p>
19 | 
20 |     <p>
21 |       Pariatur doloribus, facilis enim accusamus velit, amet ducimus dolorum
22 |       unde numquam doloremque eveniet eum et error, quod quas fugit commodi
23 |       suscipit sequi. At, deleniti nihil.
24 |     </p>
25 |     
26 |     <p>
27 |       Laborum voluptate maxime dicta alias minus nam, doloribus accusantium
28 |       veritatis perferendis, expedita eaque. Deleniti deserunt, iure dolorum
29 |       itaque fugiat assumenda ullam amet asperiores soluta ipsam!
30 |     </p>
31 |     
32 |     <p>
33 |       Veniam qui ad, illo fuga autem voluptatibus iusto cum reprehenderit error.
34 |       Nemo nisi laborum blanditiis, accusamus dolores harum labore perspiciatis.
35 |       Nesciunt, repellat mollitia. Rem, labore?
36 |     </p>`,
37 | });
38 | ---
39 | 
40 | <ImageSupportDetection />
41 | 
42 | <MainLayout importMetaUrl={import.meta.url}>
43 |   <h1>Astro ImageTools <code>{"renderBackgroundImage"}</code> API Example</h1>
44 | 
45 |   <br />
46 | 
47 |   <Fragment set:html={link + style + htmlElement} />
48 | </MainLayout>
49 | 


--------------------------------------------------------------------------------
/src/pages/api/renderBackgroundPicture.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { renderBackgroundPicture } from "astro-imagetools/api";
 3 | import MainLayout from "../../layouts/MainLayout.astro";
 4 | 
 5 | const { link, style, htmlElement } = await renderBackgroundPicture({
 6 |   src: "https://picsum.photos/1024/768/",
 7 |   content: `<p>
 8 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, nisi!
 9 |       Commodi, dolor hic omnis debitis natus eaque nisi magni corrupti earum
10 |       aliquam at quidem dolorum?
11 |     </p>
12 | 
13 |     <p>
14 |       Eos facere amet nesciunt! Vero, culpa eaque quasi ullam atque alias
15 |       repudiandae facere placeat ipsam recusandae quam minus nemo officia
16 |       reiciendis dicta quaerat maiores omnis.
17 |     </p>
18 | 
19 |     <p>
20 |       Pariatur doloribus, facilis enim accusamus velit, amet ducimus dolorum
21 |       unde numquam doloremque eveniet eum et error, quod quas fugit commodi
22 |       suscipit sequi. At, deleniti nihil.
23 |     </p>
24 |     
25 |     <p>
26 |       Laborum voluptate maxime dicta alias minus nam, doloribus accusantium
27 |       veritatis perferendis, expedita eaque. Deleniti deserunt, iure dolorum
28 |       itaque fugiat assumenda ullam amet asperiores soluta ipsam!
29 |     </p>
30 |     
31 |     <p>
32 |       Veniam qui ad, illo fuga autem voluptatibus iusto cum reprehenderit error.
33 |       Nemo nisi laborum blanditiis, accusamus dolores harum labore perspiciatis.
34 |       Nesciunt, repellat mollitia. Rem, labore?
35 |     </p>`,
36 | });
37 | ---
38 | 
39 | <MainLayout importMetaUrl={import.meta.url}>
40 |   <h1>Astro ImageTools <code>{"renderBackgroundPicture"}</code> API Example</h1>
41 | 
42 |   <br />
43 | 
44 |   <Fragment set:html={link + style + htmlElement} />
45 | </MainLayout>
46 | 


--------------------------------------------------------------------------------
/src/pages/api/renderImg.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { renderImg } from "astro-imagetools/api";
 3 | import MainLayout from "../../layouts/MainLayout.astro";
 4 | 
 5 | const { link, style, img } = await renderImg({
 6 |   src: "https://picsum.photos/1024/768/",
 7 |   alt: "A random image",
 8 | });
 9 | ---
10 | 
11 | <MainLayout importMetaUrl={import.meta.url}>
12 |   <h1>Astro ImageTools <code>{"renderImg"}</code> API Example</h1>
13 | 
14 |   <br />
15 | 
16 |   <Fragment set:html={link + style + img} />
17 | </MainLayout>
18 | 


--------------------------------------------------------------------------------
/src/pages/api/renderPicture.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { renderPicture } from "astro-imagetools/api";
 3 | import MainLayout from "../../layouts/MainLayout.astro";
 4 | 
 5 | const { link, style, picture } = await renderPicture({
 6 |   src: "https://picsum.photos/1024/768/",
 7 |   alt: "A random image",
 8 | });
 9 | ---
10 | 
11 | <MainLayout importMetaUrl={import.meta.url}>
12 |   <h1>Astro ImageTools <code>{"renderPicture"}</code> API Example</h1>
13 | 
14 |   <br />
15 | 
16 |   <Fragment set:html={link + style + picture} />
17 | </MainLayout>
18 | 


--------------------------------------------------------------------------------
/src/pages/components/BackgroundImage.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import {
 3 |   BackgroundImage,
 4 |   ImageSupportDetection,
 5 | } from "astro-imagetools/components";
 6 | import MainLayout from "../../layouts/MainLayout.astro";
 7 | ---
 8 | 
 9 | <ImageSupportDetection />
10 | 
11 | <MainLayout importMetaUrl={import.meta.url}>
12 |   <h1>
13 |     Astro ImageTools <code>{"<BackgroundImage />"}</code> Component Example
14 |   </h1>
15 | 
16 |   <br />
17 | 
18 |   <BackgroundImage src="https://picsum.photos/1024/768/">
19 |     <p>
20 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, nisi!
21 |       Commodi, dolor hic omnis debitis natus eaque nisi magni corrupti earum
22 |       aliquam at quidem dolorum?
23 |     </p>
24 |     <p>
25 |       Eos facere amet nesciunt! Vero, culpa eaque quasi ullam atque alias
26 |       repudiandae facere placeat ipsam recusandae quam minus nemo officia
27 |       reiciendis dicta quaerat maiores omnis.
28 |     </p>
29 |     <p>
30 |       Pariatur doloribus, facilis enim accusamus velit, amet ducimus dolorum
31 |       unde numquam doloremque eveniet eum et error, quod quas fugit commodi
32 |       suscipit sequi. At, deleniti nihil.
33 |     </p>
34 |     <p>
35 |       Laborum voluptate maxime dicta alias minus nam, doloribus accusantium
36 |       veritatis perferendis, expedita eaque. Deleniti deserunt, iure dolorum
37 |       itaque fugiat assumenda ullam amet asperiores soluta ipsam!
38 |     </p>
39 |     <p>
40 |       Veniam qui ad, illo fuga autem voluptatibus iusto cum reprehenderit error.
41 |       Nemo nisi laborum blanditiis, accusamus dolores harum labore perspiciatis.
42 |       Nesciunt, repellat mollitia. Rem, labore?
43 |     </p>
44 |   </BackgroundImage>
45 | </MainLayout>
46 | 


--------------------------------------------------------------------------------
/src/pages/components/BackgroundPicture.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { BackgroundPicture } from "astro-imagetools/components";
 3 | import MainLayout from "../../layouts/MainLayout.astro";
 4 | ---
 5 | 
 6 | <MainLayout importMetaUrl={import.meta.url}>
 7 |   <h1>
 8 |     Astro ImageTools <code>{"<BackgroundPicture />"}</code> Component Example
 9 |   </h1>
10 | 
11 |   <br />
12 | 
13 |   <BackgroundPicture src="https://picsum.photos/1024/768/">
14 |     <p>
15 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, nisi!
16 |       Commodi, dolor hic omnis debitis natus eaque nisi magni corrupti earum
17 |       aliquam at quidem dolorum?
18 |     </p>
19 |     <p>
20 |       Eos facere amet nesciunt! Vero, culpa eaque quasi ullam atque alias
21 |       repudiandae facere placeat ipsam recusandae quam minus nemo officia
22 |       reiciendis dicta quaerat maiores omnis.
23 |     </p>
24 |     <p>
25 |       Pariatur doloribus, facilis enim accusamus velit, amet ducimus dolorum
26 |       unde numquam doloremque eveniet eum et error, quod quas fugit commodi
27 |       suscipit sequi. At, deleniti nihil.
28 |     </p>
29 |     <p>
30 |       Laborum voluptate maxime dicta alias minus nam, doloribus accusantium
31 |       veritatis perferendis, expedita eaque. Deleniti deserunt, iure dolorum
32 |       itaque fugiat assumenda ullam amet asperiores soluta ipsam!
33 |     </p>
34 |     <p>
35 |       Veniam qui ad, illo fuga autem voluptatibus iusto cum reprehenderit error.
36 |       Nemo nisi laborum blanditiis, accusamus dolores harum labore perspiciatis.
37 |       Nesciunt, repellat mollitia. Rem, labore?
38 |     </p>
39 |   </BackgroundPicture>
40 | </MainLayout>
41 | 


--------------------------------------------------------------------------------
/src/pages/components/Img.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Img } from "astro-imagetools/components";
 3 | import MainLayout from "../../layouts/MainLayout.astro";
 4 | ---
 5 | 
 6 | <MainLayout importMetaUrl={import.meta.url}>
 7 |   <h1>Astro ImageTools <code>{"<Img />"}</code> Component Example</h1>
 8 | 
 9 |   <br />
10 | 
11 |   <Img src="https://picsum.photos/1024/768/" alt="A random image" />
12 | </MainLayout>
13 | 


--------------------------------------------------------------------------------
/src/pages/components/Picture.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Picture } from "astro-imagetools/components";
 3 | import MainLayout from "../../layouts/MainLayout.astro";
 4 | ---
 5 | 
 6 | <MainLayout importMetaUrl={import.meta.url}>
 7 |   <h1>Astro ImageTools <code>{"<Picture />"}</code> Component Example</h1>
 8 | 
 9 |   <br />
10 | 
11 |   <Picture src="https://picsum.photos/1024/768/" alt="A random image" />
12 | </MainLayout>
13 | 


--------------------------------------------------------------------------------
/src/pages/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | path: index.md
 3 | layout: ../layouts/MainLayout.astro
 4 | ---
 5 | 
 6 | # Image Optimization in Astro with Astro ImageTools
 7 | 
 8 | This page demonstrates the usage of the [astro-imagetools](https://www.npmjs.com/package/astro-imagetools) library with live examples.
 9 | 
10 | <hr />
11 | 
12 | ## Components
13 | 
14 | - [`<Img />` Component](/components/Img)
15 | - [`<Picture />` Component](/components/Picture)
16 | - [`<BackgroundImage />` Component](/components/BackgroundImage)
17 | - [`<BackgroundPicture />` Component](/components/BackgroundPicture)
18 | 
19 | ## APIs
20 | 
21 | - [`renderImg` API](/api/renderImg)
22 | - [`renderPicture` API](/api/renderPicture)
23 | - [`renderBackgroundImage` API](/api/renderBackgroundImage)
24 | - [`renderBackgroundPicture` API](/api/renderBackgroundPicture)
25 | 
26 | ## Layout
27 | 
28 | The `layout` property tells the image to respond differently depending on the device size or the container size.
29 | 
30 | Select a layout below and try resizing the window or rotating your device to see how the image reacts.
31 | 
32 | - [Constrained Layout](/layout/constrained)
33 | - [Fixed Layout](/layout/fixed)
34 | - [Full Width Layout](/layout/fullWidth)
35 | - [Fill Layout](/layout/fill)
36 | 
37 | <hr />
38 | 
39 | ## Placeholder
40 | 
41 | The `placeholder` property tells the image what to show while loading.
42 | 
43 | - [Blurred Placeholder](/placeholder/blurred)
44 | - [Dominant Color Placeholder](/placeholder/dominantColor)
45 | - [Traced SVG Placeholder](/placeholder/tracedSVG)
46 | - [No Placeholder](/placeholder/none)
47 | 
48 | <hr />
49 | 
50 | ## Internal Image
51 | 
52 | The following is an example of a reference to an internal image.
53 | 
54 | ![A father holding his beloved daughter in his arms](../images//elva-800w.jpg)
55 | 
56 | <hr />
57 | 
58 | ## External Image
59 | 
60 | The following is an example of a reference to an external image.
61 | 
62 | ![A random image](https://picsum.photos/1024/768)
63 | 
64 | <hr />
65 | 
66 | ## Learn More
67 | 
68 | You can optionally configure many more things!
69 | 
70 | Checkout the [Astro ImageTools](https://astro-imagetools-docs.vercel.app/) documentation to learn more.
71 | 


--------------------------------------------------------------------------------
/src/pages/layout/constrained.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import LayoutsLayout from "../../layouts/LayoutsLayout.astro";
3 | ---
4 | 
5 | <LayoutsLayout layout="constrained" importMetaUrl={import.meta.url} />
6 | 


--------------------------------------------------------------------------------
/src/pages/layout/fill.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import LayoutsLayout from "../../layouts/LayoutsLayout.astro";
3 | ---
4 | 
5 | <LayoutsLayout layout="fill" importMetaUrl={import.meta.url} />
6 | 


--------------------------------------------------------------------------------
/src/pages/layout/fixed.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import LayoutsLayout from "../../layouts/LayoutsLayout.astro";
3 | ---
4 | 
5 | <LayoutsLayout layout="fixed" importMetaUrl={import.meta.url} />
6 | 


--------------------------------------------------------------------------------
/src/pages/layout/fullWidth.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import LayoutsLayout from "../../layouts/LayoutsLayout.astro";
3 | ---
4 | 
5 | <LayoutsLayout layout="fullWidth" importMetaUrl={import.meta.url} />
6 | 


--------------------------------------------------------------------------------
/src/pages/placeholder/blurred.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import PlaceholderLayout from "../../layouts/PlaceholderLayout.astro";
3 | ---
4 | 
5 | <PlaceholderLayout placeholder="blurred" importMetaUrl={import.meta.url} />
6 | 


--------------------------------------------------------------------------------
/src/pages/placeholder/dominantColor.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import PlaceholderLayout from "../../layouts/PlaceholderLayout.astro";
3 | ---
4 | 
5 | <PlaceholderLayout placeholder="dominantColor" importMetaUrl={import.meta.url} />
6 | 


--------------------------------------------------------------------------------
/src/pages/placeholder/none.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import PlaceholderLayout from "../../layouts/PlaceholderLayout.astro";
3 | ---
4 | 
5 | <PlaceholderLayout placeholder="none" importMetaUrl={import.meta.url} />
6 | 


--------------------------------------------------------------------------------
/src/pages/placeholder/tracedSVG.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import PlaceholderLayout from "../../layouts/PlaceholderLayout.astro";
3 | ---
4 | 
5 | <PlaceholderLayout placeholder="tracedSVG" importMetaUrl={import.meta.url} />
6 | 


--------------------------------------------------------------------------------
/src/styles/index.css:
--------------------------------------------------------------------------------
 1 | main {
 2 |   padding: 1.5rem;
 3 |   background-color: black;
 4 |   color: white;
 5 | }
 6 | 
 7 | code::before {
 8 |   content: "`";
 9 | }
10 | 
11 | code::after {
12 |   content: "`";
13 | }
14 | 
15 | .view-source {
16 |   position: fixed;
17 |   top: 0;
18 |   right: 0;
19 | }
20 | 


--------------------------------------------------------------------------------