Compare commits
13 Commits
d9eb17573b
...
59b7e373d8
| Author | SHA1 | Date | |
|---|---|---|---|
|
59b7e373d8 | ||
|
|
87ccaf47b4 | ||
|
|
afb0409fe7 | ||
|
|
2381a12d64 | ||
|
|
ed3cc87a41 | ||
|
|
2e8f6ec459 | ||
|
|
3fd1fea6a4 | ||
|
|
30469922cf | ||
|
|
c8292582f0 | ||
|
|
9e9e00d119 | ||
|
|
c63cf4371f | ||
|
|
c6ae31f58b | ||
|
|
364183f989 |
31
README.md
31
README.md
@@ -1,6 +1,6 @@
|
||||
# 🚀 AstroWind
|
||||
|
||||
<img src="https://raw.githubusercontent.com/onwidget/.github/main/resources/astrowind/lighthouse-score.png" align="right"
|
||||
<img src="https://raw.githubusercontent.com/arthelokyo/.github/main/resources/astrowind/lighthouse-score.png" align="right"
|
||||
alt="AstroWind Lighthouse Score" width="100" height="358">
|
||||
|
||||
🌟 _Most *starred* & *forked* Astro theme in 2022, 2023 & 2024_. 🌟
|
||||
@@ -17,15 +17,15 @@
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
|
||||
[](https://github.com/onwidget)
|
||||
[](https://github.com/onwidget/astrowind/blob/main/LICENSE.md)
|
||||
[](https://github.com/onwidget)
|
||||
[](https://github.com/onwidget/astrowind#contributing)
|
||||
[](https://snyk.io/test/github/onwidget/astrowind)
|
||||
[](https://github.com/onwidget/astrowind)
|
||||
[](https://github.com/onwidget/astrowind)
|
||||
[](https://github.com/arthelokyo)
|
||||
[](https://github.com/arthelokyo/astrowind/blob/main/LICENSE.md)
|
||||
[](https://github.com/arthelokyo)
|
||||
[](https://github.com/arthelokyo/astrowind#contributing)
|
||||
[](https://snyk.io/test/github/arthelokyo/astrowind)
|
||||
[](https://github.com/arthelokyo/astrowind)
|
||||
[](https://github.com/arthelokyo/astrowind)
|
||||
|
||||
<br>
|
||||
|
||||
@@ -60,15 +60,14 @@
|
||||
|
||||
We're embarking on an exciting journey with **AstroWind 2.0**, and we want you to be a part of it! We're currently taking the first steps in developing this new version and your insights are invaluable. Join the discussion and share your feedback, ideas, and suggestions to help shape the future of **AstroWind**. Let's make **AstroWind 2.0** even better, together!
|
||||
|
||||
[Share Your Feedback in Our Discussion!](https://github.com/onwidget/astrowind/discussions/392)
|
||||
[Share Your Feedback in Our Discussion!](https://github.com/arthelokyo/astrowind/discussions/392)
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
## TL;DR
|
||||
|
||||
```shell
|
||||
npm create astro@latest -- --template onwidget/astrowind
|
||||
npm create astro@latest -- --template arthelokyo/astrowind
|
||||
```
|
||||
|
||||
## Getting started
|
||||
@@ -138,7 +137,7 @@ There's nothing special about `src/components/`, but that's where we like to put
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory if they do not require any transformation or in the `assets/` directory if they are imported directly.
|
||||
|
||||
[](https://githubbox.com/onwidget/astrowind/tree/main) [](https://gitpod.io/?on=gitpod#https://github.com/onwidget/astrowind) [](https://stackblitz.com/github/onwidget/astrowind)
|
||||
[](https://githubbox.com/arthelokyo/astrowind/tree/main) [](https://gitpod.io/?on=gitpod#https://github.com/arthelokyo/astrowind) [](https://stackblitz.com/github/arthelokyo/astrowind)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file `README.md`. Update `src/config.yaml` and contents. Have fun!
|
||||
|
||||
@@ -266,13 +265,13 @@ prefer.
|
||||
|
||||
Clone this repository on your own GitHub account and deploy it to Netlify:
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/onwidget/astrowind)
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/arthelokyo/astrowind)
|
||||
|
||||
#### Deploy to Vercel
|
||||
|
||||
Clone this repository on your own GitHub account and deploy to Vercel:
|
||||
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fonwidget%2Fastrowind)
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Farthelokyo%2Fastrowind)
|
||||
|
||||
<br>
|
||||
|
||||
@@ -296,7 +295,7 @@ That would be very useful for all of us and we would be happy to listen and take
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
Initially created by **onWidget** and maintained by a community of [contributors](https://github.com/onwidget/astrowind/graphs/contributors).
|
||||
Initially created by **Arthelokyo** and maintained by a community of [contributors](https://github.com/arthelokyo/astrowind/graphs/contributors).
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@@ -68,6 +68,9 @@ import { UI } from 'astrowind:config';
|
||||
if (defaultTheme.endsWith(':only')) {
|
||||
return;
|
||||
}
|
||||
|
||||
Observer.removeAnimationDelay();
|
||||
|
||||
document.documentElement.classList.toggle('dark');
|
||||
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
||||
});
|
||||
@@ -167,6 +170,7 @@ import { UI } from 'astrowind:config';
|
||||
observer: null,
|
||||
delayBetweenAnimations: 100,
|
||||
animationCounter: 0,
|
||||
elements: null,
|
||||
|
||||
start() {
|
||||
const selectors = [
|
||||
@@ -179,7 +183,7 @@ import { UI } from 'astrowind:config';
|
||||
'[class$=" intersect"]',
|
||||
];
|
||||
|
||||
const elements = Array.from(document.querySelectorAll(selectors.join(',')));
|
||||
this.elements = Array.from(document.querySelectorAll(selectors.join(',')));
|
||||
|
||||
const getThreshold = (element) => {
|
||||
if (element.classList.contains('intersect-full')) return 0.99;
|
||||
@@ -188,7 +192,7 @@ import { UI } from 'astrowind:config';
|
||||
return 0;
|
||||
};
|
||||
|
||||
elements.forEach((el) => {
|
||||
this.elements.forEach((el) => {
|
||||
el.setAttribute('no-intersect', '');
|
||||
el._intersectionThreshold = getThreshold(el);
|
||||
});
|
||||
@@ -241,10 +245,25 @@ import { UI } from 'astrowind:config';
|
||||
|
||||
this.observer = new IntersectionObserver(callback.bind(this), { threshold: [0, 0.25, 0.5, 0.99] });
|
||||
|
||||
elements.forEach((el) => {
|
||||
this.elements.forEach((el) => {
|
||||
this.observer.observe(el);
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
REF: #643;
|
||||
We need to remove the delay to fix flickering/delay
|
||||
when toggling the theme. Observer only removes them
|
||||
after data-animated is gone (out of view).
|
||||
*/
|
||||
removeAnimationDelay() {
|
||||
this.elements.forEach((el) => {
|
||||
if (el.getAttribute('data-animated') === 'true') {
|
||||
el.style.transitionDelay = '';
|
||||
el.style.animationDelay = '';
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
Observer.start();
|
||||
|
||||
@@ -15,9 +15,9 @@
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="ltr:ml-auto rtl:mr-auto w-[5.6rem] h-[1.25rem] ml-auto bg-contain inline-block bg-[url(https://img.shields.io/github/stars/onwidget/astrowind.svg?style=social&label=Stars&maxAge=86400)]"
|
||||
class="ltr:ml-auto rtl:mr-auto w-[5.6rem] h-[1.25rem] ml-auto bg-contain inline-block bg-[url(https://img.shields.io/github/stars/arthelokyo/astrowind.svg?style=social&label=Stars&maxAge=86400)]"
|
||||
title="If you like AstroWind, give us a star."
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
href="https://github.com/arthelokyo/astrowind"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -23,8 +23,8 @@ metadata:
|
||||
height: 628
|
||||
type: website
|
||||
twitter:
|
||||
handle: '@onwidget'
|
||||
site: '@onwidget'
|
||||
handle: '@arthelokyo'
|
||||
site: '@arthelokyo'
|
||||
cardType: summary_large_image
|
||||
|
||||
i18n:
|
||||
|
||||
@@ -12,196 +12,24 @@ metadata:
|
||||
canonical: https://astrowind.vercel.app/astrowind-template-in-depth
|
||||
---
|
||||
|
||||
import DListItem from '~/components/ui/DListItem.astro';
|
||||
import ToggleTheme from '~/components/common/ToggleTheme.astro';
|
||||
## Mauris velit laoreet vitae cursus augue
|
||||
|
||||
## Overview
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. **Pellentesque** euismod, nibh ac aliquam aliquam, dui nulla ultrices erat, sit amet dictum nisl ex id nunc. Sed malesuada, orci vitae tempus euismod, nunc erat semper nisi, in aliquet nibh nisl eget nulla. Donec eget ipsum vitae nibh blandit consequat. Donec facilisis, nibh id aliquam fermentum, mi lorem molestie nisl, id posuere nisi nisi at nulla.
|
||||
|
||||
It can be a somewhat daunting task trying to get a handle on _AstroWind_ internals, and particularly various points of usage.
|
||||
Duis euismod, nulla sit amet mattis euismod, nibh nunc rhoncus nibh, id interdum nunc nisl id lorem. Donec id nunc quis nulla aliquam cursus. Integer vitae nunc nunc. Sed sed nulla vitae nibh interdum gravida. Sed a nunc nibh.
|
||||
|
||||
This page outlines and clarifies some of the techniques found in _AstroWind_. Use it as a guide for further modification, or an instructional for techniques to use in your own endeavors.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer euismod, nunc eu lobortis mattis, lectus sem sagittis nunc, id laoreet nunc metus id lectus. Sed consectetur, urna at euismod consectetur, nunc nisi bibendum nibh, ut rhoncus nibh nunc vel mi.
|
||||
|
||||
## Styling
|
||||
Nam eget nunc massa. Nulla facilisi. Sed a ligula vel nunc porta sollicitudin. **Pellentesque** vel mauris vitae nibh varius feugiat. Fusce eget nunc id ligula bibendum venenatis.
|
||||
|
||||
As the name suggests, _AstroWind_ relies on _TailWind_ for styling. Furthermore, _AstroWind_ defines custom low level style settings which are incorporated into _TailWind_ seamlessly, and which provides consistency for higher level styling constructs, as well as enabling dark mode.
|
||||
### Nisi rutrum eros euismod
|
||||
|
||||
The styling mechanism consists of the following files (all paths are prefixed with `/src/` ):
|
||||
Maecenas eget justo sed nibh consequat vulputate. Sed euismod neque vel nunc rhoncus, nec tincidunt nisl laoreet. Sed euismod justo id nulla varius, id cursus nibh tincidunt. Sed euismod est et nunc consectetur, id tempus nibh euismod.
|
||||
|
||||
<DListItem dt="assets/styles/tailwind.css">
|
||||
This file is essentially an extension of _TailWind's_ base.css. High-level component styles are defined here. Note
|
||||
also styling on elements selected by 'attribute' selectors at the bottom of the files, particularly those selected by
|
||||
'data' attributes.
|
||||
</DListItem>
|
||||
<DListItem dt="components/CustomStyles.astro">
|
||||
Defines custom colors and fonts. For these to take effect in the 'base.css' file, they need to be loaded in the html
|
||||
header section. See next.
|
||||
</DListItem>
|
||||
<DListItem dt="layouts/Layout.astro">
|
||||
This layout is used for all of the pages rendered by _AstroWind_. The contents of _tailwind.css_ and
|
||||
_CustomStyles.astro_ component, described above, is injected into the html header.
|
||||
</DListItem>
|
||||
In hac habitasse platea dictumst. Integer euismod, nunc eu lobortis mattis, lectus sem sagittis nunc, id laoreet nunc metus id lectus. Aenean sagittis, ligula vel blandit aliquam, nisl nunc euismod elit, nec tincidunt lectus nunc vitae nunc. Sed euismod justo id nulla varius, id cursus nibh tincidunt. Sed euismod est et nunc consectetur, id tempus nibh euismod.
|
||||
|
||||
### Dark Mode
|
||||
### Nisi rutrum eros euismod
|
||||
|
||||
_Dark Mode_ is triggered by the little 'sunlight' icon:<ToggleTheme/>in the page header. It is defined in the _components/common/ToggleTheme.astro_, but the event is attached and the action defined in _components/common/BasicScripts.astro_ in the following snippet:
|
||||
Quisque euismod lectus ac nunc dictum, id eleifend nunc euismod. Sed euismod, nunc eu lobortis mattis, lectus sem sagittis nunc, id laoreet nunc metus id lectus. Sed consectetur, urna at euismod consectetur, nunc nisi bibendum nibh, ut rhoncus nibh nunc vel mi.
|
||||
|
||||
```javascript
|
||||
attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
|
||||
if (defaultTheme.endsWith(':only')) {
|
||||
return;
|
||||
}
|
||||
document.documentElement.classList.toggle('dark');
|
||||
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
||||
});
|
||||
```
|
||||
|
||||
Note that this is a client event. _BasicScripts.astro_ defines several other client-side functionality as well as this one.
|
||||
|
||||
## Advanced Slot Usage
|
||||
|
||||
_slots_ are part of the component implementation, which is a common concept among many frameworks, including _Astrojs_. The typical slot definition in a component looks like this:
|
||||
|
||||
```astro
|
||||
---
|
||||
// (file: MyComponent.astro)
|
||||
const { title } = Astro.props;
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
---
|
||||
|
||||
<div>
|
||||
<h2>{title}</h2>
|
||||
<slot />
|
||||
<!-- slot contents injected here -->
|
||||
<div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
And in usage elsewhere:
|
||||
|
||||
```astro
|
||||
import MyComponent from "~/components/MyComponent"; ...
|
||||
<MyComponent someArg="A Slot example">
|
||||
<p>This content will be displayed in the slot</p>
|
||||
</MyComponent>
|
||||
```
|
||||
|
||||
### Alternate usage
|
||||
|
||||
There's another way we can use slots, useful particularly when a component can have markdown content is as follows (study carefully...):
|
||||
|
||||
```astro
|
||||
---
|
||||
// (file: MyComponent.astro)
|
||||
|
||||
const { title } = Astro.props;
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
const content: string = await Astro.props.render('default');
|
||||
---
|
||||
|
||||
// renders the html to the 'content' variable
|
||||
<div>
|
||||
<h2>{title}</h2>
|
||||
<div set:html={content} />
|
||||
<!-- slot contents injected here -->
|
||||
<div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Whoa!! What's going on here?
|
||||
|
||||
Notice there is no slot definition in the html portion of the component. Instead, what we do is have _Astro_ render the slot content (here, the 'default' content, but you can also render named slots) into a variable, and then use that content in a _div_ (for instance).
|
||||
|
||||
So, if the usage is in a markdown file, like so:
|
||||
|
||||
```mdx
|
||||
import MyComponent from '../../components/MyComponent';
|
||||
|
||||
# Using the above component in a .mdx file (that can take components)
|
||||
|
||||
{' '}
|
||||
|
||||
<MyComponent title="This is a slot implementor">### Here is some markdown content - With a bullet item.</MyComponent>
|
||||
```
|
||||
|
||||
_MyComponent_ renders the markdown to html and then injects it into the div.
|
||||
|
||||
This actually has a big advantage -- consider that with the normal usage you don't have access to the slot contents: _Astro_ just plops the content into the _<slot/>_ tag. Using this method, however, allows you to access the content and further manipulate it before it gets inserted into the html.
|
||||
|
||||
This allows a great deal of flexibility in component design.
|
||||
|
||||
### Yet Another Step
|
||||
|
||||
Now, we get to the techniques used in _AstroWind_, we'll use the _pages/index.astro_ file to illustrate.
|
||||
|
||||
You'll note that the index file imports a lot of components, each one roughly analogous to a panel in the index page. Each of these components, in turn, is instantiated sequentially throughout the page. But, you'll notice that some of them use this kind of construct (we'll use the last section, _CallToAction_, as it is most illustrative of the technique):
|
||||
|
||||
```astro
|
||||
<CallToAction
|
||||
callToAction={{
|
||||
text: 'Get template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
icon: 'tabler:download',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="subtitle">
|
||||
Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't waste
|
||||
more time! :P
|
||||
</Fragment>
|
||||
</CallToAction>
|
||||
```
|
||||
|
||||
Some things to note, here:
|
||||
|
||||
<DListItem dt="The <em>callToAction</em> argument">
|
||||
This argument is actually being passed a javascript object -- not a string. (However, in the TS definition, it could
|
||||
be a string...)
|
||||
</DListItem>
|
||||
<DListItem dt="There are several <em>Fragment</em> children">
|
||||
Furthermore, these <Fragment/> elements each have a _slot="(value)"_ specifier.
|
||||
</DListItem>
|
||||
|
||||
The latter seems odd, because <Fragment/> is a built-in component over which you have no control, and doesn't have a provision for rendering slots, <em>per se</em>.
|
||||
|
||||
The answer lies in a paragraph in the _Astro_ docs, slots section, which states:
|
||||
|
||||
> Use a `slot="my-slot"` attribute on the child element that you want to pass through to a matching slot `name="my-slot" />` placeholder in your component.
|
||||
|
||||
That's pretty concise and a bit of a head-scratcher to read, but basically what it says is that:
|
||||
|
||||
1. Given a component that defines a slot:
|
||||
1. you can reference a slot from a child element of that component and,
|
||||
1. provide content to the parent component's slot from the child by naming the slot in the child with a `slot="<slot-name>"` property assignment, where the _slot-name_ is the parent's slot.
|
||||
|
||||
So, in the example above, the _CallToAction_ component defines the _subtitle_ slot, and the following _<Fragment slot="subtitle">_ populates the slot with the following content:
|
||||
|
||||
```astro
|
||||
<Fragment slot="subtitle">
|
||||
Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't waste
|
||||
more time! :P
|
||||
</Fragment>
|
||||
```
|
||||
|
||||
And, the _CallToAction_ component defines and renders it thusly:
|
||||
|
||||
```astro
|
||||
---
|
||||
//...
|
||||
const { subtitle = await Astro.slots.render('subtitle') } = Astro.props;
|
||||
---
|
||||
|
||||
//...
|
||||
{subtitle && <p class="text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
|
||||
//...
|
||||
```
|
||||
|
||||
There's a lot to wrap your head around, here.
|
||||
|
||||
Notice first that _subtitle_ is defined as a prop/argument, but it's being processed as a slot. Interestingly, prop args and slots seem to be somewhat interchangeable: if the subtitle was just a string, it would simply take that assignment. The main difference is that if you render them independently, you have to call the render with an _await_ modifier.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed euismod est et nunc consectetur, id tempus nibh euismod.
|
||||
|
||||
@@ -23,7 +23,7 @@ const { metadata } = Astro.props;
|
||||
actions={[
|
||||
{
|
||||
text: 'Download',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
},
|
||||
]}
|
||||
showToggleTheme
|
||||
|
||||
@@ -115,7 +115,7 @@ export const headerData = {
|
||||
href: '#',
|
||||
},
|
||||
],
|
||||
actions: [{ text: 'Download', href: 'https://github.com/onwidget/astrowind', target: '_blank' }],
|
||||
actions: [{ text: 'Download', href: 'https://github.com/arthelokyo/astrowind', target: '_blank' }],
|
||||
};
|
||||
|
||||
export const footerData = {
|
||||
@@ -174,9 +174,9 @@ export const footerData = {
|
||||
{ ariaLabel: 'Instagram', icon: 'tabler:brand-instagram', href: '#' },
|
||||
{ ariaLabel: 'Facebook', icon: 'tabler:brand-facebook', href: '#' },
|
||||
{ ariaLabel: 'RSS', icon: 'tabler:rss', href: getAsset('/rss.xml') },
|
||||
{ ariaLabel: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/onwidget/astrowind' },
|
||||
{ ariaLabel: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/arthelokyo/astrowind' },
|
||||
],
|
||||
footNote: `
|
||||
Made by <a class="text-blue-600 underline dark:text-muted" href="https://github.com/onwidget"> onWidget</a> · All rights reserved.
|
||||
Made by <a class="text-blue-600 underline dark:text-muted" href="https://github.com/arthelokyo"> Arthelokyo</a> · All rights reserved.
|
||||
`,
|
||||
};
|
||||
|
||||
@@ -15,10 +15,10 @@ import Button from '~/components/ui/Button.astro';
|
||||
import Image from '~/components/common/Image.astro';
|
||||
|
||||
const appStoreImg = '~/assets/images/app-store.png';
|
||||
const appStoreDownloadLink = 'https://github.com/onwidget/astrowind';
|
||||
const appStoreDownloadLink = 'https://github.com/arthelokyo/astrowind';
|
||||
|
||||
const googlePlayImg = '~/assets/images/google-play.png';
|
||||
const googlePlayDownloadLink = 'https://github.com/onwidget/astrowind';
|
||||
const googlePlayDownloadLink = 'https://github.com/arthelokyo/astrowind';
|
||||
|
||||
const metadata = {
|
||||
title: 'Mobile App Homepage',
|
||||
@@ -240,7 +240,7 @@ const metadata = {
|
||||
callToAction={{
|
||||
target: '_blank',
|
||||
text: 'Read more testimonials',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
icon: 'tabler:chevron-right',
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -26,7 +26,7 @@ const metadata = {
|
||||
{ text: 'Resume', href: '#resume' },
|
||||
{ text: 'Porfolio', href: '#porfolio' },
|
||||
{ text: 'Blog', href: '#blog' },
|
||||
{ text: 'Github', href: 'https://github.com/onwidget' },
|
||||
{ text: 'Github', href: 'https://github.com/arthelokyo' },
|
||||
]}
|
||||
actions={[
|
||||
{
|
||||
|
||||
@@ -42,7 +42,7 @@ const metadata = {
|
||||
<Hero2
|
||||
tagline="SaaS Web Demo"
|
||||
actions={[
|
||||
{ variant: 'primary', target: '_blank', text: 'Get Started', href: 'https://github.com/onwidget/astrowind' },
|
||||
{ variant: 'primary', target: '_blank', text: 'Get Started', href: 'https://github.com/arthelokyo/astrowind' },
|
||||
{ text: 'Learn more', href: '#features' },
|
||||
]}
|
||||
image={{
|
||||
@@ -51,9 +51,8 @@ const metadata = {
|
||||
}}
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Simplify web design with Astrowind: <br /> your ultimate <span class="text-accent dark:text-white"
|
||||
>SaaS</span
|
||||
> companion<br />
|
||||
Simplify web design with Astrowind: <br /> your ultimate <span class="text-accent dark:text-white">SaaS</span> companion<br
|
||||
/>
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="subtitle">
|
||||
|
||||
@@ -28,7 +28,7 @@ const metadata = {
|
||||
variant: 'primary',
|
||||
target: '_blank',
|
||||
text: 'Get templates',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
icon: 'tabler:download',
|
||||
},
|
||||
{ text: 'Learn more', href: '#features' },
|
||||
@@ -302,7 +302,7 @@ const metadata = {
|
||||
variant: 'primary',
|
||||
target: '_blank',
|
||||
text: 'Get templates',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
icon: 'tabler:download',
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -26,7 +26,7 @@ const metadata = {
|
||||
{
|
||||
variant: 'primary',
|
||||
text: 'Get template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
target: '_blank',
|
||||
icon: 'tabler:download',
|
||||
},
|
||||
@@ -381,7 +381,7 @@ const metadata = {
|
||||
{
|
||||
variant: 'primary',
|
||||
text: 'Get template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
target: '_blank',
|
||||
icon: 'tabler:download',
|
||||
},
|
||||
|
||||
@@ -33,7 +33,7 @@ const metadata = {
|
||||
{
|
||||
variant: 'primary',
|
||||
text: 'Download Template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
icon: 'tabler:download',
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -33,7 +33,7 @@ const metadata = {
|
||||
{
|
||||
variant: 'primary',
|
||||
text: 'Download Template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
icon: 'tabler:download',
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -33,7 +33,7 @@ const metadata = {
|
||||
{
|
||||
variant: 'primary',
|
||||
text: 'Download Template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
icon: 'tabler:download',
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -33,7 +33,7 @@ const metadata = {
|
||||
{
|
||||
variant: 'primary',
|
||||
text: 'Download Template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
icon: 'tabler:download',
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -33,7 +33,7 @@ const metadata = {
|
||||
{
|
||||
variant: 'primary',
|
||||
text: 'Download Template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
icon: 'tabler:download',
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -33,7 +33,7 @@ const metadata = {
|
||||
{
|
||||
variant: 'primary',
|
||||
text: 'Download Template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
icon: 'tabler:download',
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -203,7 +203,7 @@ const metadata = {
|
||||
callToAction={{
|
||||
target: '_blank',
|
||||
text: 'More testimonials...',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
href: 'https://github.com/arthelokyo/astrowind',
|
||||
icon: 'tabler:chevron-right',
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { isUnpicCompatible, unpicOptimizer, astroAssetsOptimizer } from './images-optimization';
|
||||
import type { ImageMetadata } from 'astro';
|
||||
import type { OpenGraph } from '@astrolib/seo';
|
||||
import type { ImagesOptimizer } from './images-optimization';
|
||||
/** The optimized image shape returned by our ImagesOptimizer */
|
||||
type OptimizedImage = Awaited<ReturnType<ImagesOptimizer>>[0];
|
||||
|
||||
const load = async function () {
|
||||
let images: Record<string, () => Promise<unknown>> | undefined = undefined;
|
||||
@@ -71,7 +74,7 @@ export const adaptOpenGraphImages = async (
|
||||
};
|
||||
}
|
||||
|
||||
let _image;
|
||||
let _image: OptimizedImage | undefined;
|
||||
|
||||
if (
|
||||
typeof resolvedImage === 'string' &&
|
||||
@@ -84,9 +87,7 @@ export const adaptOpenGraphImages = async (
|
||||
typeof resolvedImage !== 'string' && resolvedImage?.width <= defaultWidth
|
||||
? [resolvedImage?.width, resolvedImage?.height]
|
||||
: [defaultWidth, defaultHeight];
|
||||
_image = (
|
||||
await astroAssetsOptimizer(resolvedImage, [dimensions[0]], dimensions[0], dimensions[1], 'jpg')
|
||||
)[0];
|
||||
_image = (await astroAssetsOptimizer(resolvedImage, [dimensions[0]], dimensions[0], dimensions[1], 'jpg'))[0];
|
||||
}
|
||||
|
||||
if (typeof _image === 'object') {
|
||||
|
||||
Reference in New Issue
Block a user