{image && (
-
-
+
Elevate your online presence with our
Beautiful Website Templates @@ -112,7 +112,7 @@ const metadata = { }, ]} image={{ - src: import('~/assets/images/colors.jpg'), + src: '~/assets/images/colors.jpg', alt: 'Colorful Image', }} /> diff --git a/src/pages/index.astro b/src/pages/index.astro index 596e468..9e07068 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -24,7 +24,7 @@ const metadata = {
Free template for creating websites with
@@ -96,8 +96,9 @@ const metadata = {
@@ -133,6 +134,43 @@ const metadata = {
+
+
+
+
+
+
+
+
+
+
+
@@ -174,19 +212,19 @@ const metadata = {
{
title: 'Step 1: Download',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.',
+ 'Kickstart with GitHub! Either fork the AstroWind template or simply click \'Use this template\'. Your canvas awaits, ready for your digital masterpiece. In just a few clicks, you\'ve already set the foundation.',
icon: 'tabler:package',
},
{
title: 'Step 2: Add content',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla.',
+ 'Pour your vision into it. Add images, text, and all that jazz to breathe life into your digital space. Remember, it\'s the content that tells your story, so make it captivating.',
icon: 'tabler:letter-case',
},
{
title: 'Step 3: Customize styles',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus.',
+ 'Give it your personal touch. Tailor colors, fonts, and layouts until it feels just right. Your unique flair, amplified by AstroWind! Precision in design ensures a seamless user experience.',
icon: 'tabler:paint',
},
{
@@ -195,7 +233,7 @@ const metadata = {
},
]}
image={{
- src: import('~/assets/images/creativity.jpg'),
+ src: 'https://images.unsplash.com/photo-1616198814651-e71f960c3180?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80',
alt: 'Steps image',
}}
/>
@@ -210,55 +248,55 @@ const metadata = {
{
title: 'Headers',
description:
- 'In general, Headers contain information that makes it easier for visitors to interact with the website.',
+ 'Ever tried driving without GPS? Boom! That\'s why websites need headers for direction.',
icon: 'flat-color-icons:template',
},
{
title: 'Heros',
description:
- 'If you want your website to get more than its fair share of visitors, the Hero section needs to be stellar.',
+ 'Picture a superhero landing – epic, right? That\'s the job of a Hero section, making grand entrances!',
icon: 'flat-color-icons:gallery',
},
{
title: 'Features',
description:
- 'Display your product in action and how the Features actually create a solution for your target customer.',
+ 'Where websites strut their stuff and show off superpowers. No holding back on the bragging rights here!',
icon: 'flat-color-icons:approval',
},
{
title: 'Content',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
+ 'Dive into the meat and potatoes of a site; without it, you\'d just be window shopping. Content is king.',
icon: 'flat-color-icons:document',
},
{
title: 'Call-to-Action',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
+ 'That enthusiastic friend who\'s always urging, "Do it! Do it!"? Yeah, that\'s this button nudging you towards adventure.',
icon: 'flat-color-icons:advertising',
},
{
title: 'Pricing',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
+ 'Behold the dessert menu of the website world. Tempting choices await, can you resist?',
icon: 'flat-color-icons:currency-exchange',
},
{
title: 'Testimonial',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
+ 'Step into the gossip corner! Here, other visitors spill the beans and share the juicy details.',
icon: 'flat-color-icons:voice-presentation',
},
{
title: 'Contact',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
+ 'Like a digital mailbox, but faster! Drop a line, ask a question, or send a virtual high-five. Ding! Message in.',
icon: 'flat-color-icons:business-contact',
},
{
title: 'Footers',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
+ 'The footer\'s like the credits of a movie but sprinkled with easter eggs. Time to hunt!',
icon: 'flat-color-icons:database',
},
]}
@@ -285,6 +323,11 @@ const metadata = {
subtitle="Duis turpis dui, fringilla mattis sem nec, fringilla euismod neque. Morbi tincidunt lacus nec tortor scelerisque pulvinar."
tagline="FAQs"
items={[
+ {
+ title: "Why AstroWind?",
+ description:
+ "Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.",
+ },
{
title: 'What do I need to start?',
description:
@@ -300,11 +343,6 @@ const metadata = {
description:
"A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.",
},
- {
- title: "What's an example of when you changed your mind?",
- description:
- "Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.",
- },
{
title: 'What is something that you would like to try again?',
description:
diff --git a/src/pages/landing/mobile-app.astro b/src/pages/landing/mobile-app.astro
index 5bd925c..d0f4257 100644
--- a/src/pages/landing/mobile-app.astro
+++ b/src/pages/landing/mobile-app.astro
@@ -40,7 +40,7 @@ const metadata = {
Free template for create your website
with @@ -91,7 +91,7 @@ const metadata = { }, ]} image={{ - src: import('~/assets/images/colors.jpg'), + src: 'https://images.unsplash.com/photo-1521517407911-565264e7d82d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80', alt: 'Colorful Image', }} /> @@ -99,6 +99,7 @@ const metadata = {
@@ -140,7 +141,6 @@ const metadata = {
@@ -202,7 +202,7 @@ const metadata = {
name: 'Cary Kennedy',
job: 'Film director',
image: {
- src: import('~/assets/images/colors.jpg'),
+ src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Cary Kennedy Image',
},
},
@@ -212,7 +212,7 @@ const metadata = {
name: 'Josh Wilkinson',
job: 'Product Manager',
image: {
- src: import('~/assets/images/vintage.jpg'),
+ src: 'https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Josh Wilkinson Image',
},
},
@@ -222,7 +222,7 @@ const metadata = {
name: 'Sidney Hansen',
job: 'Decorator',
image: {
- src: import('~/assets/images/caos.jpg'),
+ src: 'https://images.unsplash.com/photo-1512361436605-a484bdb34b5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Sidney Hansen Image',
},
},
diff --git a/src/pages/landing/saas.astro b/src/pages/landing/saas.astro
index 52c3329..50e7314 100644
--- a/src/pages/landing/saas.astro
+++ b/src/pages/landing/saas.astro
@@ -3,6 +3,7 @@ import Layout from '~/layouts/PageLayout.astro';
import Header from '~/components/widgets/Header.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
+import Features from '~/components/widgets/Features.astro';
import Steps2 from '~/components/widgets/Steps2.astro';
import Content from '~/components/widgets/Content.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
@@ -39,7 +40,7 @@ const metadata = {
Free template for
@@ -56,6 +57,51 @@ const metadata = {
+
+
+
@@ -115,7 +161,7 @@ const metadata = {
},
]}
image={{
- src: import('~/assets/images/caos.jpg'),
+ src: 'https://images.unsplash.com/photo-1531973486364-5fa64260d75b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1658&q=80',
alt: 'Colorful Image',
}}
>
@@ -153,7 +199,7 @@ const metadata = {
},
]}
image={{
- src: import('~/assets/images/caos.jpg'),
+ src: 'https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Colorful Image',
}}
>
diff --git a/src/pages/landing/startup.astro b/src/pages/landing/startup.astro
index 0db6b20..0f06c3b 100644
--- a/src/pages/landing/startup.astro
+++ b/src/pages/landing/startup.astro
@@ -43,14 +43,18 @@ const metadata = {
-
+
diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index 6e62aed..2a6f817 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -178,7 +178,7 @@ const metadata = {
},
]}
image={{
- src: import('~/assets/images/creativity.jpg'),
+ src: 'https://images.unsplash.com/photo-1536816579748-4ecb3f03d72a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80',
alt: 'Steps image',
}}
/>
diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts
index ba1117d..0fa45d6 100644
--- a/src/pages/rss.xml.ts
+++ b/src/pages/rss.xml.ts
@@ -16,7 +16,7 @@ export const get = async () => {
return rss({
title: `${SITE_CONFIG.name}’s Blog`,
- description: METADATA_CONFIG?.description,
+ description: METADATA_CONFIG?.description || "",
site: import.meta.env.SITE,
items: posts.map((post) => ({
diff --git a/src/pages/services.astro b/src/pages/services.astro
index c361266..d44661c 100644
--- a/src/pages/services.astro
+++ b/src/pages/services.astro
@@ -27,7 +27,7 @@ const metadata = {
@@ -104,7 +104,7 @@ const metadata = {
name: 'Emily Kennedy',
job: 'Front-end developer',
image: {
- src: import('~/assets/images/colors.jpg'),
+ src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Emily Kennedy Image',
},
},
@@ -113,7 +113,7 @@ const metadata = {
name: 'Sarah Hansen',
job: 'Photographer',
image: {
- src: import('~/assets/images/caos.jpg'),
+ src: 'https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Sarah Hansen Image',
},
},
@@ -122,7 +122,7 @@ const metadata = {
name: 'Mark Wilkinson',
job: 'Small business owner',
image: {
- src: import('~/assets/images/vintage.jpg'),
+ src: 'https://images.unsplash.com/photo-1512361436605-a484bdb34b5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Mark Wilkinson Image',
},
},
diff --git a/src/utils/blog.ts b/src/utils/blog.ts
index 5be45da..24ab7dd 100644
--- a/src/utils/blog.ts
+++ b/src/utils/blog.ts
@@ -162,18 +162,16 @@ export const findLatestPosts = async ({ count }: { count?: number }): Promise
- async ({ paginate }) => {
- if (!isBlogEnabled || !isBlogListRouteEnabled) return [];
- return paginate(await fetchPosts(), {
- params: { blog: BLOG_BASE || undefined },
- pageSize: blogPostsPerPage,
- });
- };
+export const getStaticPathsBlogList = async ({ paginate }) => {
+ if (!isBlogEnabled || !isBlogListRouteEnabled) return [];
+ return paginate(await fetchPosts(), {
+ params: { blog: BLOG_BASE || undefined },
+ pageSize: blogPostsPerPage,
+ });
+};
/** */
-export const getStaticPathsBlogPost = () => async () => {
+export const getStaticPathsBlogPost = async () => {
if (!isBlogEnabled || !isBlogPostRouteEnabled) return [];
return (await fetchPosts()).map((post) => ({
params: {
@@ -184,49 +182,45 @@ export const getStaticPathsBlogPost = () => async () => {
};
/** */
-export const getStaticPathsBlogCategory =
- () =>
- async ({ paginate }) => {
- if (!isBlogEnabled || !isBlogCategoryRouteEnabled) return [];
+export const getStaticPathsBlogCategory = async ({ paginate }) => {
+ if (!isBlogEnabled || !isBlogCategoryRouteEnabled) return [];
- const posts = await fetchPosts();
- const categories = new Set();
- posts.map((post) => {
- typeof post.category === 'string' && categories.add(post.category.toLowerCase());
- });
+ const posts = await fetchPosts();
+ const categories = new Set();
+ posts.map((post) => {
+ typeof post.category === 'string' && categories.add(post.category.toLowerCase());
+ });
- return Array.from(categories).map((category: string) =>
- paginate(
- posts.filter((post) => typeof post.category === 'string' && category === post.category.toLowerCase()),
- {
- params: { category: category, blog: CATEGORY_BASE || undefined },
- pageSize: blogPostsPerPage,
- props: { category },
- }
- )
- );
- };
+ return Array.from(categories).map((category: string) =>
+ paginate(
+ posts.filter((post) => typeof post.category === 'string' && category === post.category.toLowerCase()),
+ {
+ params: { category: category, blog: CATEGORY_BASE || undefined },
+ pageSize: blogPostsPerPage,
+ props: { category },
+ }
+ )
+ );
+};
/** */
-export const getStaticPathsBlogTag =
- () =>
- async ({ paginate }) => {
- if (!isBlogEnabled || !isBlogTagRouteEnabled) return [];
+export const getStaticPathsBlogTag = async ({ paginate }) => {
+ if (!isBlogEnabled || !isBlogTagRouteEnabled) return [];
- const posts = await fetchPosts();
- const tags = new Set();
- posts.map((post) => {
- Array.isArray(post.tags) && post.tags.map((tag) => tags.add(tag.toLowerCase()));
- });
+ const posts = await fetchPosts();
+ const tags = new Set();
+ posts.map((post) => {
+ Array.isArray(post.tags) && post.tags.map((tag) => tags.add(tag.toLowerCase()));
+ });
- return Array.from(tags).map((tag: string) =>
- paginate(
- posts.filter((post) => Array.isArray(post.tags) && post.tags.find((elem) => elem.toLowerCase() === tag)),
- {
- params: { tag: tag, blog: TAG_BASE || undefined },
- pageSize: blogPostsPerPage,
- props: { tag },
- }
- )
- );
- };
+ return Array.from(tags).map((tag: string) =>
+ paginate(
+ posts.filter((post) => Array.isArray(post.tags) && post.tags.find((elem) => elem.toLowerCase() === tag)),
+ {
+ params: { tag: tag, blog: TAG_BASE || undefined },
+ pageSize: blogPostsPerPage,
+ props: { tag },
+ }
+ )
+ );
+};
diff --git a/src/utils/images-optimization.ts b/src/utils/images-optimization.ts
new file mode 100644
index 0000000..a465c94
--- /dev/null
+++ b/src/utils/images-optimization.ts
@@ -0,0 +1,321 @@
+import { getImage } from 'astro:assets';
+import { transformUrl, parseUrl } from 'unpic';
+
+import type { ImageMetadata } from 'astro';
+import type { HTMLAttributes } from 'astro/types';
+
+type Layout = 'fixed' | 'constrained' | 'fullWidth' | 'cover' | 'responsive' | 'contained';
+
+export interface AttributesProps extends HTMLAttributes<'img'> {}
+
+export interface ImageProps extends Omit, 'src'> {
+ src?: string | ImageMetadata | null;
+ width?: string | number | null;
+ height?: string | number | null;
+ alt?: string | null;
+ loading?: 'eager' | 'lazy' | null;
+ decoding?: 'sync' | 'async' | 'auto' | null;
+ style?: string;
+ srcset?: string | null;
+ sizes?: string | null;
+ fetchpriority?: 'high' | 'low' | 'auto' | null;
+
+ layout?: Layout;
+ widths?: number[] | null;
+ aspectRatio?: string | number | null;
+}
+
+export type ImagesOptimizer = (
+ image: ImageMetadata | string,
+ breakpoints: number[],
+ width?: number,
+ height?: number
+) => Promise>;
+
+/* ******* */
+const config = {
+ // FIXME: Use this when image.width is minor than deviceSizes
+ imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+
+ deviceSizes: [
+ 640, // older and lower-end phones
+ 750, // iPhone 6-8
+ 828, // iPhone XR/11
+ 960, // older horizontal phones
+ 1080, // iPhone 6-8 Plus
+ 1280, // 720p
+ 1668, // Various iPads
+ 1920, // 1080p
+ 2048, // QXGA
+ 2560, // WQXGA
+ 3200, // QHD+
+ 3840, // 4K
+ 4480, // 4.5K
+ 5120, // 5K
+ 6016, // 6K
+ ],
+
+ formats: ['image/webp'],
+};
+
+const computeHeight = (width: number, aspectRatio: number) => {
+ return Math.floor(width / aspectRatio);
+};
+
+const parseAspectRatio = (aspectRatio: number | string | null | undefined): number | undefined => {
+ if (typeof aspectRatio === 'number') return aspectRatio;
+
+ if (typeof aspectRatio === 'string') {
+ const match = aspectRatio.match(/(\d+)\s*[/:]\s*(\d+)/);
+
+ if (match) {
+ const [, num, den] = match.map(Number);
+ if (den && !isNaN(num)) return num / den;
+ } else {
+ const numericValue = parseFloat(aspectRatio);
+ if (!isNaN(numericValue)) return numericValue;
+ }
+ }
+
+ return undefined;
+};
+
+/**
+ * Gets the `sizes` attribute for an image, based on the layout and width
+ */
+export const getSizes = (width?: number, layout?: Layout): string | undefined => {
+ if (!width || !layout) {
+ return undefined;
+ }
+ switch (layout) {
+ // If screen is wider than the max size, image width is the max size,
+ // otherwise it's the width of the screen
+ case `constrained`:
+ return `(min-width: ${width}px) ${width}px, 100vw`;
+
+ // Image is always the same width, whatever the size of the screen
+ case `fixed`:
+ return `${width}px`;
+
+ // Image is always the width of the screen
+ case `fullWidth`:
+ return `100vw`;
+
+ default:
+ return undefined;
+ }
+};
+
+const pixelate = (value?: number) => (value || value === 0 ? `${value}px` : undefined);
+
+const getStyle = ({
+ width,
+ height,
+ aspectRatio,
+ layout,
+ objectFit = 'cover',
+ objectPosition = 'center',
+ background,
+}: {
+ width?: number;
+ height?: number;
+ aspectRatio?: number;
+ objectFit?: string;
+ objectPosition?: string;
+ layout?: string;
+ background?: string;
+}) => {
+ const styleEntries: Array<[prop: string, value: string | undefined]> = [
+ ['object-fit', objectFit],
+ ['object-position', objectPosition],
+ ];
+
+ // If background is a URL, set it to cover the image and not repeat
+ if (background?.startsWith('https:') || background?.startsWith('http:') || background?.startsWith('data:')) {
+ styleEntries.push(['background-image', `url(${background})`]);
+ styleEntries.push(['background-size', 'cover']);
+ styleEntries.push(['background-repeat', 'no-repeat']);
+ } else {
+ styleEntries.push(['background', background]);
+ }
+ if (layout === 'fixed') {
+ styleEntries.push(['width', pixelate(width)]);
+ styleEntries.push(['height', pixelate(height)]);
+ styleEntries.push(['object-position', 'top left']);
+ }
+ if (layout === 'constrained') {
+ styleEntries.push(['max-width', pixelate(width)]);
+ styleEntries.push(['max-height', pixelate(height)]);
+ styleEntries.push(['aspect-ratio', aspectRatio ? `${aspectRatio}` : undefined]);
+ styleEntries.push(['width', '100%']);
+ }
+ if (layout === 'fullWidth') {
+ styleEntries.push(['width', '100%']);
+ styleEntries.push(['aspect-ratio', aspectRatio ? `${aspectRatio}` : undefined]);
+ styleEntries.push(['height', pixelate(height)]);
+ }
+ if (layout === 'responsive') {
+ styleEntries.push(['width', '100%']);
+ styleEntries.push(['height', 'auto']);
+ styleEntries.push(['aspect-ratio', aspectRatio ? `${aspectRatio}` : undefined]);
+ }
+ if (layout === 'contained') {
+ styleEntries.push(['max-width', '100%']);
+ styleEntries.push(['max-height', '100%']);
+ styleEntries.push(['object-fit', 'contain']);
+ styleEntries.push(['aspect-ratio', aspectRatio ? `${aspectRatio}` : undefined]);
+ }
+ if (layout === 'cover') {
+ styleEntries.push(['max-width', '100%']);
+ styleEntries.push(['max-height', '100%']);
+ }
+
+ const styles = Object.fromEntries(styleEntries.filter(([, value]) => value));
+
+ return Object.entries(styles)
+ .map(([key, value]) => `${key}: ${value};`)
+ .join(' ');
+};
+
+const getBreakpoints = ({
+ width,
+ breakpoints,
+ layout,
+}: {
+ width?: number;
+ breakpoints?: number[];
+ layout: Layout;
+}): number[] => {
+ if (layout === 'fullWidth' || layout === 'cover' || layout === 'responsive' || layout === 'contained') {
+ return breakpoints || config.deviceSizes;
+ }
+ if (!width) {
+ return [];
+ }
+ const doubleWidth = width * 2;
+ if (layout === 'fixed') {
+ return [width, doubleWidth];
+ }
+ if (layout === 'constrained') {
+ return [
+ // Always include the image at 1x and 2x the specified width
+ width,
+ doubleWidth,
+ // Filter out any resolutions that are larger than the double-res image
+ ...(breakpoints || config.deviceSizes).filter((w) => w < doubleWidth),
+ ];
+ }
+
+ return [];
+};
+
+/* ** */
+export const astroAsseetsOptimizer: ImagesOptimizer = async (image, breakpoints) => {
+ if (!image || typeof image === 'string') {
+ return [];
+ }
+
+ return Promise.all(
+ breakpoints.map(async (w: number) => {
+ const url = (await getImage({ src: image, width: w })).src;
+ return {
+ src: url,
+ width: w,
+ };
+ })
+ );
+};
+
+/* ** */
+export const unpicOptimizer: ImagesOptimizer = async (image, breakpoints, width, height) => {
+ if (!image || typeof image !== 'string') {
+ return [];
+ }
+
+ const urlParsed = parseUrl(image);
+ if (!urlParsed) {
+ return [];
+ }
+
+ return Promise.all(
+ breakpoints.map(async (w: number) => {
+ const url =
+ (await transformUrl({
+ url: image,
+ width: w,
+ height: width && height ? computeHeight(w, width / height) : height,
+ cdn: urlParsed.cdn,
+ })) || image;
+ return {
+ src: String(url),
+ width: w,
+ };
+ })
+ );
+};
+
+/* ** */
+export async function getImagesOptimized(
+ image: ImageMetadata | string,
+ { src: _, width, height, sizes, aspectRatio, widths, layout = 'constrained', style = '', ...rest }: ImageProps,
+ transform: ImagesOptimizer = () => Promise.resolve([])
+): Promise<{ src: string; attributes: AttributesProps }> {
+ if (typeof image !== 'string') {
+ width ||= Number(image.width) || undefined;
+ height ||= typeof width === 'number' ? computeHeight(width, image.width / image.height) : undefined;
+ }
+
+ width = (width && Number(width)) || undefined;
+ height = (height && Number(height)) || undefined;
+
+ widths ||= config.deviceSizes;
+ sizes ||= getSizes(Number(width) || undefined, layout);
+ aspectRatio = parseAspectRatio(aspectRatio);
+
+ // Calculate dimensions from aspect ratio
+ if (aspectRatio) {
+ if (width) {
+ if (height) {
+ /* empty */
+ } else {
+ height = width / aspectRatio;
+ }
+ } else if (height) {
+ width = Number(height * aspectRatio);
+ } else if (layout !== 'fullWidth') {
+ // Fullwidth images have 100% width, so aspectRatio is applicable
+ console.error('When aspectRatio is set, either width or height must also be set');
+ console.error('Image', image);
+ }
+ } else if (width && height) {
+ aspectRatio = width / height;
+ } else if (layout !== 'fullWidth') {
+ // Fullwidth images don't need dimensions
+ console.error('Either aspectRatio or both width and height must be set');
+ console.error('Image', image);
+ }
+
+ let breakpoints = getBreakpoints({ width: width, breakpoints: widths, layout: layout });
+ breakpoints = [...new Set(breakpoints)].sort((a, b) => a - b);
+
+ const srcset = (await transform(image, breakpoints, Number(width) || undefined, Number(height) || undefined))
+ .map(({ src, width }) => `${src} ${width}w`)
+ .join(', ');
+
+ return {
+ src: typeof image === 'string' ? image : image.src,
+ attributes: {
+ width: width,
+ height: height,
+ srcset: srcset || undefined,
+ sizes: sizes,
+ style: `${getStyle({
+ width: width,
+ height: height,
+ aspectRatio: aspectRatio,
+ layout: layout,
+ })}${style ?? ''}`,
+ ...rest,
+ },
+ };
+}
diff --git a/src/utils/images.ts b/src/utils/images.ts
index bd8bacb..daafedb 100644
--- a/src/utils/images.ts
+++ b/src/utils/images.ts
@@ -1,11 +1,11 @@
-import { getImage } from '@astrojs/image';
-import type { OpenGraph } from '@astrolib/seo/src/types';
+import { getImage } from 'astro:assets';
import type { ImageMetadata } from 'astro';
+import type { OpenGraph } from '@astrolib/seo/src/types';
const load = async function () {
let images: Record Promise> | undefined = undefined;
try {
- images = import.meta.glob('~/assets/images/**');
+ images = import.meta.glob('~/assets/images/**/*.{jpeg,jpg,png,tiff,webp,gif,svg,JPEG,JPG,PNG,TIFF,WEBP,GIF,SVG}');
} catch (e) {
// continue regardless of error
}
@@ -21,24 +21,27 @@ export const fetchLocalImages = async () => {
};
/** */
-export const findImage = async (imagePath?: string) => {
+export const findImage = async (imagePath?: string | ImageMetadata | null): Promise => {
+ // Not string
if (typeof imagePath !== 'string') {
- return null;
+ return imagePath;
}
+ // Absolute paths
if (imagePath.startsWith('http://') || imagePath.startsWith('https://') || imagePath.startsWith('/')) {
return imagePath;
}
- if (!imagePath.startsWith('~/assets')) {
- return null;
- } // For now only consume images using ~/assets alias (or absolute)
+ // Relative paths or not "~/assets/"
+ if (!imagePath.startsWith('~/assets/images')) {
+ return imagePath;
+ }
const images = await fetchLocalImages();
const key = imagePath.replace('~/', '/src/');
return images && typeof images[key] === 'function'
- ? ((await images[key]()) as { default: unknown })['default']
+ ? ((await images[key]()) as { default: ImageMetadata })['default']
: null;
};
@@ -91,4 +94,4 @@ export const adaptOpenGraphImages = async (
);
return { ...openGraph, ...(adaptedImages ? { images: adaptedImages } : {}) };
-};
+};
\ No newline at end of file
diff --git a/src/utils/tasks.mjs b/src/utils/tasks.mjs
new file mode 100644
index 0000000..9e17809
--- /dev/null
+++ b/src/utils/tasks.mjs
@@ -0,0 +1,53 @@
+import fs from 'node:fs';
+import os from 'node:os';
+
+const tasksIntegration = () => {
+ let config;
+ return {
+ name: 'AstroWind:tasks',
+
+ hooks: {
+ 'astro:config:done': async ({ config: cfg }) => {
+ config = cfg;
+ },
+
+ 'astro:build:done': async () => {
+ try {
+ const outDir = config.outDir;
+ const publicDir = config.publicDir;
+ const sitemapName = 'sitemap-index.xml';
+ const sitemapFile = new URL(sitemapName, outDir);
+ const robotsTxtFile = new URL('robots.txt', publicDir);
+ const robotsTxtFileInOut = new URL('robots.txt', outDir);
+
+ const hasIntegration =
+ Array.isArray(config?.integrations) &&
+ config.integrations?.find((e) => e?.name === '@astrojs/sitemap') !== undefined;
+ const sitemapExists = fs.existsSync(sitemapFile);
+
+ if (hasIntegration && sitemapExists) {
+ const robotsTxt = fs.readFileSync(robotsTxtFile, { encoding: 'utf8', flags: 'a+' });
+ const sitemapUrl = new URL(sitemapName, String(new URL(config.base, config.site)));
+ const pattern = /^Sitemap:(.*)$/m;
+
+ if (!pattern.test(robotsTxt)) {
+ fs.appendFileSync(robotsTxtFileInOut, `${os.EOL}${os.EOL}Sitemap: ${sitemapUrl}`, {
+ encoding: 'utf8',
+ flags: 'w',
+ });
+ } else {
+ fs.writeFileSync(robotsTxtFileInOut, robotsTxt.replace(pattern, `Sitemap: ${sitemapUrl}`), {
+ encoding: 'utf8',
+ flags: 'w',
+ });
+ }
+ }
+ } catch (err) {
+ /* empty */
+ }
+ },
+ },
+ };
+};
+
+export default tasksIntegration;
diff --git a/src/components/common/Image.astro b/src/components/common/Image.astro
new file mode 100644
index 0000000..019d6a5
--- /dev/null
+++ b/src/components/common/Image.astro
@@ -0,0 +1,52 @@
+---
+import { findImage } from '~/utils/images';
+import {
+ getImagesOptimized,
+ astroAsseetsOptimizer,
+ unpicOptimizer,
+ type ImageProps,
+ type AttributesProps
+} from '~/utils/images-optimization';
+
+type Props = ImageProps;
+type ImageType = {
+ src: string;
+ attributes: AttributesProps;
+}
+
+const props = Astro.props;
+
+if (props.alt === undefined || props.alt === null) {
+ throw new Error();
+}
+
+if (typeof props.width === 'string') {
+ props.width = parseInt(props.width);
+}
+
+if (typeof props.height === 'string') {
+ props.height = parseInt(props.height);
+}
+
+if (!props.loading) {
+ props.loading = 'lazy';
+}
+
+if (!props.decoding) {
+ props.decoding = 'async';
+}
+
+const _image = await findImage(props.src);
+
+let image: ImageType | undefined = undefined;
+
+if (_image !== null && typeof _image === 'object') {
+ image = await getImagesOptimized(_image, props, astroAsseetsOptimizer);
+} else if (typeof _image === 'string' && (_image.startsWith('http://') || _image.startsWith('https://'))) {
+ image = await getImagesOptimized(_image, props, unpicOptimizer);
+} else if (_image) {
+ image = await getImagesOptimized(_image, props);
+}
+---
+
+{!image ? 
}
diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
index ade72f1..6f3d210 100644
--- a/src/components/widgets/Content.astro
+++ b/src/components/widgets/Content.astro
@@ -1,9 +1,9 @@
---
import { Icon } from 'astro-icon/components';
-import { Picture } from '@astrojs/image/components';
import type { Content } from '~/types';
import Headline from '../ui/Headline.astro';
import WidgetWrapper from '../ui/WidgetWrapper.astro';
+import Image from '~/components/common/Image.astro';
const {
title = await Astro.slots.render('title'),
@@ -70,13 +70,13 @@ const {
{typeof image === 'string' ? (
)}
{title && (
-
+
))
diff --git a/src/components/widgets/Steps.astro b/src/components/widgets/Steps.astro
index deb9a1e..652efbe 100644
--- a/src/components/widgets/Steps.astro
+++ b/src/components/widgets/Steps.astro
@@ -1,8 +1,8 @@
---
-import { Picture } from '@astrojs/image/components';
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
import Timeline from "~/components/ui/Timeline.astro";
import Headline from "~/components/ui/Headline.astro";
+import Image from '~/components/common/Image.astro';
import type { Steps } from "~/types";
const {
@@ -37,13 +37,13 @@ const {
(typeof image === 'string' ? (
+
{title}
-
+
)}
Beautiful Website Templates @@ -112,7 +112,7 @@ const metadata = { }, ]} image={{ - src: import('~/assets/images/colors.jpg'), + src: '~/assets/images/colors.jpg', alt: 'Colorful Image', }} /> diff --git a/src/pages/index.astro b/src/pages/index.astro index 596e468..9e07068 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -24,7 +24,7 @@ const metadata = {
Ad vix debet docendi
+ Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te + euismod tacimates. +with @@ -91,7 +91,7 @@ const metadata = { }, ]} image={{ - src: import('~/assets/images/colors.jpg'), + src: 'https://images.unsplash.com/photo-1521517407911-565264e7d82d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80', alt: 'Colorful Image', }} /> @@ -99,6 +99,7 @@ const metadata = {
@@ -56,6 +57,51 @@ const metadata = {
+
+