Migrate from @astrojs/image to Astro Assets and Unpic

This commit is contained in:
prototypa
2023-08-13 17:34:30 -04:00
parent 9a350af269
commit 77817aa77e
33 changed files with 508 additions and 83 deletions

View File

@ -40,7 +40,7 @@ const metadata = {
<Hero2
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
callToAction2={{ text: 'Learn more', href: '#features' }}
image={{ src: import('~/assets/images/hero.png'), alt: 'AstroWind Hero Image' }}
image={{ src: 'https://images.unsplash.com/photo-1535303311164-664fc9ec6532?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80', alt: 'AstroWind Hero Image' }}
>
<Fragment slot="title">
Free template for <span class="hidden lg:inline">create your website <br />with</span>
@ -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 = {
<!-- Content Widget **************** -->
<Content
isReversed
items={[
{
title: 'High-Quality Designs',
@ -128,7 +129,7 @@ const metadata = {
},
]}
image={{
src: import('~/assets/images/caos.jpg'),
src: 'https://images.unsplash.com/photo-1576153192621-7a3be10b356e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80',
alt: 'Colorful Image',
}}
>
@ -140,7 +141,6 @@ const metadata = {
<!-- Content Widget **************** -->
<Content
isReversed
isAfterContent
items={[
{
@ -171,7 +171,7 @@ const metadata = {
},
]}
image={{
src: import('~/assets/images/vintage.jpg'),
src: 'https://images.unsplash.com/photo-1453738773917-9c3eff1db985?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Vintage Image',
}}
>
@ -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',
},
},

View File

@ -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 = {
<Hero2
callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
callToAction2={{ text: 'Learn more', href: '#features' }}
image={{ src: import('~/assets/images/hero.png'), alt: 'AstroWind Hero Image' }}
image={{ src: 'https://images.unsplash.com/photo-1580481072645-022f9a6dbf27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', alt: 'AstroWind Hero Image' }}
>
<Fragment slot="title">
Free template for <br />
@ -56,6 +57,51 @@ const metadata = {
</Fragment>
</Hero2>
<!-- Features Widget *************** -->
<Features
id="features"
tagline="Features"
title="Main features of our templates"
subtitle="Possess several key characteristics to effectively cater to the needs of startups and entrepreneurs."
columns={3}
items={[
{
title: 'Modern and Professional Design',
description:
'Have a contemporary design that reflects current design trends and gives a professional impression.',
icon: 'tabler:artboard',
},
{
title: 'Responsive and Mobile-Friendly',
description: 'Adapt seamlessly to different screen sizes and devices to ensure a consistent experience.',
icon: 'tabler:picture-in-picture',
},
{
title: 'Customizability',
description:
'Easily customizable, allowing users to adapt the design, colors, typography, and content to match their brand identity.',
icon: 'tabler:adjustments-horizontal',
},
{
title: 'Fast Loading Times',
description: 'Optimized for speed to ensure a smooth user experience and favorable search engine rankings.',
icon: 'tabler:rocket',
},
{
title: 'Search Engine Optimization (SEO)',
description:
'Incorporate SEO best practices in template structure and code to improve visibility in search engine results.',
icon: 'tabler:arrows-right-left',
},
{
title: 'Compatibility',
description: 'The templates work seamlessly across various content management systems and website builders.',
icon: 'tabler:plug-connected',
},
]}
/>
<!-- Content Widget **************** -->
<Content
@ -78,7 +124,7 @@ const metadata = {
},
]}
image={{
src: import('~/assets/images/caos.jpg'),
src: 'https://images.unsplash.com/photo-1620558138198-cfb9b4f3c294?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1671&q=80',
alt: 'Colorful Image',
}}
>
@ -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',
}}
>

View File

@ -43,14 +43,18 @@ const metadata = {
</Fragment>
<Fragment slot="image">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/dsTXcSeAZq8"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="width:100%"></iframe>
<div class="relative h-0 pb-[56.25%]">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/dsTXcSeAZq8"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
allowfullscreen
class="absolute top-0 left-0 w-full h-full"
>
</iframe>
</div>
</Fragment>
</Hero>