mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #6 from onwidget/develop

Browse Source 
Smooth scroll, canonical, astro-icons ...
This commit is contained in:
prototypa
2022-08-26 23:24:44 -04:00
committed by GitHub
parent da714f9254 ca01eecc24
commit 64270a4b8d
23 changed files with 383 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -44,7 +44,6 @@ Inside AstroWind template, you'll see the following folders and files:
| | └── ...
│ ├── components/
│ │ ├── core/
| | ├── icons/
| | └── widgets/
| | ├── Header.astro
| | ├── Footer.astro

3
package.json
View File

@ -1,7 +1,7 @@
{
"name": "@onwidget/astrowind",
"description": "A template to make your website using Astro + Tailwind CSS.",
"version": "0.1.3",
"version": "0.1.5",
"private": true,
"scripts": {
"dev": "astro dev",
@ -17,6 +17,7 @@
"@astrojs/tailwind": "^1.0.0",
"@tailwindcss/typography": "^0.5.4",
"astro": "^1.0.0",
"astro-icon": "^0.7.3",
"prettier": "^2.7.1",
"prettier-plugin-astro": "^0.5.0",
"reading-time": "^1.5.0",

8
src/assets/styles/base.css
View File

@ -7,3 +7,11 @@
@apply inline-flex items-center justify-center rounded border border-transparent font-medium text-center text-base leading-snug transition py-3 px-6 shadow-lg ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2;
}
}
[astro-icon] > * {
stroke-width: 1.5;
}
[astro-icon].icon-bold > * {
stroke-width: 2;
}

20
src/components/icons/IconArrowDownRight.astro
View File

@ -1,20 +0,0 @@
---
const { class: className = "w-5 h-5" } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
class={className}
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.75"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="7" y1="7" x2="17" y2="17"></line>
<polyline points="17 8 17 17 8 17"></polyline>
</svg>

21
src/components/icons/IconArrowRight.astro
View File

@ -1,21 +0,0 @@
---
const { class: className = "w-5 h-5" } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
class={className}
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.75"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="5" y1="12" x2="19" y2="12"></line>
<line x1="13" y1="18" x2="19" y2="12"></line>
<line x1="13" y1="6" x2="19" y2="12"></line>
</svg>

21
src/components/icons/IconFacebook.astro
View File

@ -1,21 +0,0 @@
---
const { class: className = "w-5 h-5" } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
class={className}
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.75"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
></path>
</svg>

22
src/components/icons/IconGithub.astro
View File

@ -1,22 +0,0 @@
---
const { class: className = "w-5 h-5" } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
class={className}
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.75"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
>
</path>
</svg>

21
src/components/icons/IconInstagram.astro
View File

@ -1,21 +0,0 @@
---
const { class: className = "w-5 h-5" } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
class={className}
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.75"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="4" y="4" width="16" height="16" rx="4"></rect>
<circle cx="12" cy="12" r="3"></circle>
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
</svg>

20
src/components/icons/IconMenu.astro
View File

@ -1,20 +0,0 @@
---
const { class: className = "w-5 h-5" } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
class={className}
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.75"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line class="line1 transition" x1="4" y1="8" x2="20" y2="8"></line>
<line class="line2 transition" x1="4" y1="16" x2="20" y2="16"></line>
</svg>

21
src/components/icons/IconRSS.astro
View File

@ -1,21 +0,0 @@
---
const { class: className = "w-5 h-5" } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
class={className}
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="5" cy="19" r="1"></circle>
<path d="M4 4a16 16 0 0 1 16 16"></path>
<path d="M4 11a9 9 0 0 1 9 9"></path>
</svg>

22
src/components/icons/IconSun.astro
View File

@ -1,22 +0,0 @@
---
const { class: className = "w-5 h-5" } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
class={className}
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.75"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="4"></circle>
<path
d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
></path>
</svg>

22
src/components/icons/IconTwitter.astro
View File

@ -1,22 +0,0 @@
---
const { class: className = "w-5 h-5" } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
class={className}
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.75"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"
>
</path>
</svg>

21
src/components/icons/index.js
View File

@ -1,21 +0,0 @@
import IconSun from "./IconSun.astro";
import IconGithub from "./IconGithub.astro";
import IconTwitter from "./IconTwitter.astro";
import IconFacebook from "./IconFacebook.astro";
import IconInstagram from "./IconInstagram.astro";
import IconArrowRight from "./IconArrowRight.astro";
import IconMenu from "./IconMenu.astro";
import IconArrowDownRight from "./IconArrowDownRight.astro";
import IconRSS from "./IconRSS.astro";
export {
IconSun,
IconGithub,
IconTwitter,
IconFacebook,
IconInstagram,
IconArrowRight,
IconMenu,
IconArrowDownRight,
IconRSS,
};

32
src/components/widgets/BasicFAQs.astro
View File

@ -1,5 +1,5 @@
---
import { IconArrowDownRight } from "~/components/icons";
import { Icon } from "astro-icon";
const {} = Astro.props;
---
@ -18,7 +18,10 @@ const {} = Astro.props;
<div class="space-y-8">
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
What do I need to start?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
@ -32,7 +35,10 @@ const {} = Astro.props;
</div>
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
How to install the Astro + Tailwind CSS template?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
@ -49,7 +55,10 @@ const {} = Astro.props;
</div>
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
What's something that you completely don't understand?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
@ -62,7 +71,10 @@ const {} = Astro.props;
<div class="space-y-8">
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
What's an example of when you changed your mind?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
@ -74,7 +86,10 @@ const {} = Astro.props;
</div>
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
What is something that you would really like to try again?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
@ -88,7 +103,10 @@ const {} = Astro.props;
</div>
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
If you could only ask one question to each person you meet, what would
that question be?
</p>

122
src/components/widgets/BasicFeatures.astro
View File

@ -1,145 +1,111 @@
---
import { Icon } from "astro-icon";
const {} = Astro.props;
---
<section class="relative">
<div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
<div
class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32"
aria-hidden="true"
>
</div>
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
<div class="mb-8 text-center">
<p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">Components</p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">Most used widgets</h2>
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
Provides frequently used components for building websites using Tailwind CSS
<p
class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
>
Components
</p>
<h2
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
>
Most used widgets
</h2>
<p
class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400"
>
Provides frequently used components for building websites using
Tailwind CSS
</p>
</div>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
<div
class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white"
>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:home" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Headers</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:faq" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Footers</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:video-projector" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Features</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:in-transit" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Call-to-Action</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:calculator" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Pricing</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:voice-presentation" class="w-12 h-12"
/>
<div class="ml-4 text-xl font-bold">Testimonial</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
</div>

20
src/components/widgets/Footer.astro
View File

@ -1,11 +1,6 @@
---
import {
IconTwitter,
IconInstagram,
IconFacebook,
IconArrowRight,
IconRSS,
} from "~/components/icons";
import { Icon } from "astro-icon";
const {} = Astro.props;
---
@ -186,7 +181,8 @@ const {} = Astro.props;
class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600"
aria-hidden="true"></span>
<IconArrowRight
<Icon
name="tabler:arrow-right"
class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0"
/>
</button>
@ -204,7 +200,7 @@ const {} = Astro.props;
aria-label="Twitter"
href="#"
>
<IconTwitter />
<Icon name="tabler:brand-twitter" class="w-5 h-5" />
</a>
</li>
<li class="ml-4">
@ -213,7 +209,7 @@ const {} = Astro.props;
aria-label="Instagram"
href="#"
>
<IconInstagram />
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
</a>
</li>
<li class="ml-4">
@ -222,7 +218,7 @@ const {} = Astro.props;
aria-label="Facebook"
href="#"
>
<IconFacebook />
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
</a>
</li>
<li class="ml-4">
@ -231,7 +227,7 @@ const {} = Astro.props;
aria-label="Twitter"
href="/rss.xml"
>
<IconRSS />
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
</li>
</ul>

13
src/components/widgets/Header.astro
View File

@ -1,6 +1,7 @@
---
import { IconSun, IconGithub, IconMenu, IconRSS } from "~/components/icons";
import { Icon } from "astro-icon";
import Logo from "~/components/widgets/Logo.astro";
const {} = Astro.props;
---
@ -21,14 +22,14 @@ const {} = Astro.props;
aria-label="Toggle between Dark and Light mode"
data-aw-toggle-color-scheme
>
<IconSun class="w-6 h-6" />
<Icon name="tabler:sun" class="w-6 h-6" />
</button>
<button
class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition"
aria-label="Toggle Menu"
data-aw-toggle-menu
>
<IconMenu class="w-6 h-6" />
<Icon name="tabler:menu" class="w-6 h-6" />
</button>
</div>
</div>
@ -80,21 +81,21 @@ const {} = Astro.props;
aria-label="Toggle between Dark and Light mode"
data-aw-toggle-color-scheme
>
<IconSun />
<Icon name="tabler:sun" class="w-5 h-5" />
</button>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="RSS Feed"
href="/rss.xml"
>
<IconRSS />
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
<a
href="https://github.com/onwidget/astrowind"
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1"
aria-label="Astrowind Github"
>
<IconGithub />
<Icon name="tabler:brand-github" class="w-5 h-5" />
</a>
</div>
</div>

2
src/components/widgets/Hero.astro
View File

@ -40,7 +40,7 @@ const {} = Astro.props;
<div>
<a
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
href="#"
href="#features"
>Learn more
</a>
</div>

87
src/components/widgets/StepsLeft.astro
View File

@ -1,5 +1,7 @@
---
import { Icon } from "astro-icon";
import Picture from "~/components/core/Picture.astro";
const {} = Astro.props;
---
@ -12,24 +14,10 @@ const {} = Astro.props;
<div
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-gray-600 dark:text-slate-200"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
>
</path>
</svg>
<Icon
name="tabler:arrow-down"
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
/>
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
@ -52,24 +40,10 @@ const {} = Astro.props;
<div
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-gray-600 dark:text-slate-200"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
>
</path>
</svg>
<Icon
name="tabler:arrow-down"
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
/>
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
@ -91,24 +65,10 @@ const {} = Astro.props;
<div
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-gray-600 dark:text-slate-200"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
>
</path>
</svg>
<Icon
name="tabler:arrow-down"
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
/>
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
@ -130,21 +90,10 @@ const {} = Astro.props;
<div
class="flex items-center justify-center w-10 h-10 rounded-full border-blue-600 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 text-gray-600 dark:text-slate-200"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l5 5l10 -10"></path>
</svg>
<Icon
name="tabler:check"
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
/>
</div>
</div>
</div>

218
src/components/widgets/TwoColsFeatures.astro
View File

@ -2,31 +2,59 @@
const {} = Astro.props;
---
<section class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-blue-50 dark:bg-slate-800">
<section class="scroll-mt-16" id="features">
<div
class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-blue-50 dark:bg-slate-800"
>
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
<p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">Features</p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
<p
class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
>
Features
</p>
<h2
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
>
What's interesting about <span
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
>AstroWind
</span>
</h2>
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa
quae.
<p
class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400"
>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque rem aperiam, eaque ipsa quae.
</p>
</div>
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
<div class="space-y-8 sm:px-8">
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<rect
class="fill-current text-blue-600"
width="64"
height="64"
rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -34,22 +62,41 @@ const {} = Astro.props;
</div>
</div>
<div>
<h3 class="mb-3 text-xl font-bold">Integration with Tailwind CSS</h3>
<h3 class="mb-3 text-xl font-bold">
Integration with Tailwind CSS
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<rect
class="fill-current text-blue-600"
width="64"
height="64"
rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -59,20 +106,37 @@ const {} = Astro.props;
<div>
<h3 class="mb-3 text-xl font-bold">Ready-to-use Components</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<rect
class="fill-current text-blue-600"
width="64"
height="64"
rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -82,8 +146,8 @@ const {} = Astro.props;
<div>
<h3 class="mb-3 text-xl font-bold">Best Practices</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
@ -91,13 +155,30 @@ const {} = Astro.props;
<div class="space-y-8 sm:px-8">
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<rect
class="fill-current text-blue-600"
width="64"
height="64"
rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -107,20 +188,37 @@ const {} = Astro.props;
<div>
<h3 class="mb-3 text-xl font-bold">Excelent Page Speed</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<rect
class="fill-current text-blue-600"
width="64"
height="64"
rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -130,20 +228,37 @@ const {} = Astro.props;
<div>
<h3 class="mb-3 text-xl font-bold">Frequently updated</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<rect
class="fill-current text-blue-600"
width="64"
height="64"
rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -151,13 +266,16 @@ const {} = Astro.props;
</div>
</div>
<div>
<h3 class="mb-3 text-xl font-bold">Open to new ideas and contributions</h3>
<h3 class="mb-3 text-xl font-bold">
Open to new ideas and contributions
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
</div>
</div>
</div>
</section>

2
src/layouts/BaseLayout.astro
View File

@ -8,7 +8,7 @@ const { meta = {} } = Astro.props;
---
<!DOCTYPE html>
<html lang="en" class="2xl:text-[24px]">
<html lang="en" class="motion-safe:scroll-smooth 2xl:text-[24px]">
<head>
<MetaTags {...meta} />
</head>

2
src/pages/blog/[slug].astro
View File

@ -19,7 +19,7 @@ const { post } = Astro.props;
const title = `${post.title} — ${SITE.name}`;
const description = post.description;
const canonical = new URL(`blog/${post.slug}`, Astro.site);
const canonical = post.canonical || new URL(`blog/${post.slug}`, Astro.site);
const image = await findImage(post.image);
---

10
src/utils/getNormalizedPost.js
View File

@ -5,13 +5,19 @@ export const getNormalizedPost = async (post) => {
return {
pubDate: frontmatter.pubDate,
canonical: frontmatter.canonical,
slug: file.split("/").pop().split(".").shift(),
title: frontmatter.title,
description: frontmatter.description,
excerpt: frontmatter.excerpt,
body: compiledContent(),
image: frontmatter.image,
excerpt: frontmatter.excerpt,
authors: frontmatter.authors,
slug: file.split("/").pop().split(".").shift(),
category: frontmatter.category,
tags: frontmatter.tags,
readingTime: Math.ceil(getReadingTime(rawContent()).minutes),
};
};