diff --git a/README.md b/README.md index 82e7e9f..8fcf24a 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,6 @@ Inside AstroWind template, you'll see the following folders and files: | | └── ... │ ├── components/ │ │ ├── core/ -| | ├── icons/ | | └── widgets/ | | ├── Header.astro | | ├── Footer.astro diff --git a/package.json b/package.json index 7ef3c98..7e39a46 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index 7e3622a..442e39e 100644 --- a/src/assets/styles/base.css +++ b/src/assets/styles/base.css @@ -6,4 +6,12 @@ .btn { @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; } \ No newline at end of file diff --git a/src/components/icons/IconArrowDownRight.astro b/src/components/icons/IconArrowDownRight.astro deleted file mode 100644 index 33da750..0000000 --- a/src/components/icons/IconArrowDownRight.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - diff --git a/src/components/icons/IconArrowRight.astro b/src/components/icons/IconArrowRight.astro deleted file mode 100644 index 8c689ee..0000000 --- a/src/components/icons/IconArrowRight.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - - diff --git a/src/components/icons/IconFacebook.astro b/src/components/icons/IconFacebook.astro deleted file mode 100644 index 0731097..0000000 --- a/src/components/icons/IconFacebook.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - diff --git a/src/components/icons/IconGithub.astro b/src/components/icons/IconGithub.astro deleted file mode 100644 index 01b51a0..0000000 --- a/src/components/icons/IconGithub.astro +++ /dev/null @@ -1,22 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - diff --git a/src/components/icons/IconInstagram.astro b/src/components/icons/IconInstagram.astro deleted file mode 100644 index 78f324c..0000000 --- a/src/components/icons/IconInstagram.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - - diff --git a/src/components/icons/IconMenu.astro b/src/components/icons/IconMenu.astro deleted file mode 100644 index bc56d89..0000000 --- a/src/components/icons/IconMenu.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - diff --git a/src/components/icons/IconRSS.astro b/src/components/icons/IconRSS.astro deleted file mode 100644 index 5b9bc17..0000000 --- a/src/components/icons/IconRSS.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - - diff --git a/src/components/icons/IconSun.astro b/src/components/icons/IconSun.astro deleted file mode 100644 index 2488688..0000000 --- a/src/components/icons/IconSun.astro +++ /dev/null @@ -1,22 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - diff --git a/src/components/icons/IconTwitter.astro b/src/components/icons/IconTwitter.astro deleted file mode 100644 index 413ce73..0000000 --- a/src/components/icons/IconTwitter.astro +++ /dev/null @@ -1,22 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - diff --git a/src/components/icons/index.js b/src/components/icons/index.js deleted file mode 100644 index 3c0deeb..0000000 --- a/src/components/icons/index.js +++ /dev/null @@ -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, -}; diff --git a/src/components/widgets/BasicFAQs.astro b/src/components/widgets/BasicFAQs.astro index 643ad55..cb4db4b 100644 --- a/src/components/widgets/BasicFAQs.astro +++ b/src/components/widgets/BasicFAQs.astro @@ -1,5 +1,5 @@ --- -import { IconArrowDownRight } from "~/components/icons"; +import { Icon } from "astro-icon"; const {} = Astro.props; --- @@ -18,7 +18,10 @@ const {} = Astro.props;

- + What do I need to start?

@@ -32,7 +35,10 @@ const {} = Astro.props;

- + How to install the Astro + Tailwind CSS template?

@@ -49,7 +55,10 @@ const {} = Astro.props;

- + What's something that you completely don't understand?

@@ -62,7 +71,10 @@ const {} = Astro.props;

- + What's an example of when you changed your mind?

@@ -74,7 +86,10 @@ const {} = Astro.props;

- + What is something that you would really like to try again?

@@ -88,7 +103,10 @@ const {} = Astro.props;

- + If you could only ask one question to each person you meet, what would that question be?

diff --git a/src/components/widgets/BasicFeatures.astro b/src/components/widgets/BasicFeatures.astro index a0355c3..20f7fe2 100644 --- a/src/components/widgets/BasicFeatures.astro +++ b/src/components/widgets/BasicFeatures.astro @@ -1,145 +1,111 @@ --- +import { Icon } from "astro-icon"; const {} = Astro.props; ---
- +
-

Components

-

Most used widgets

-

- Provides frequently used components for building websites using Tailwind CSS +

+ Components +

+

+ Most used widgets +

+

+ Provides frequently used components for building websites using + Tailwind CSS

-
+
- - - - - - - - - - + +
Headers

- 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.

- - - - - - - - - - +
Footers

- 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.

- - - - - - - - - - +
Features

- 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.

- - - - - - - - - - +
Call-to-Action

- 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.

- - - - - - - - - - +
Pricing

- 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.

- - - - - - - - - - +
Testimonial

- 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.

diff --git a/src/components/widgets/Footer.astro b/src/components/widgets/Footer.astro index 21ecf77..6d9115d 100644 --- a/src/components/widgets/Footer.astro +++ b/src/components/widgets/Footer.astro @@ -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"> - @@ -204,7 +200,7 @@ const {} = Astro.props; aria-label="Twitter" href="#" > - +
  • @@ -213,7 +209,7 @@ const {} = Astro.props; aria-label="Instagram" href="#" > - +
  • @@ -222,7 +218,7 @@ const {} = Astro.props; aria-label="Facebook" href="#" > - +
  • @@ -231,7 +227,7 @@ const {} = Astro.props; aria-label="Twitter" href="/rss.xml" > - +
    • diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro index eed0b94..56612d7 100644 --- a/src/components/widgets/Header.astro +++ b/src/components/widgets/Header.astro @@ -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 > - +
    @@ -80,21 +81,21 @@ const {} = Astro.props; aria-label="Toggle between Dark and Light mode" data-aw-toggle-color-scheme > - + - + - +
    diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro index aa5b432..a5fddbb 100644 --- a/src/components/widgets/Hero.astro +++ b/src/components/widgets/Hero.astro @@ -40,7 +40,7 @@ const {} = Astro.props;
    Learn more
    diff --git a/src/components/widgets/StepsLeft.astro b/src/components/widgets/StepsLeft.astro index faf03cf..598af18 100644 --- a/src/components/widgets/StepsLeft.astro +++ b/src/components/widgets/StepsLeft.astro @@ -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;
    - - - - - +
    @@ -52,24 +40,10 @@ const {} = Astro.props;
    - - - - - +
    @@ -91,24 +65,10 @@ const {} = Astro.props;
    - - - - - +
    @@ -130,21 +90,10 @@ const {} = Astro.props;
    - - - - +
    diff --git a/src/components/widgets/TwoColsFeatures.astro b/src/components/widgets/TwoColsFeatures.astro index 1b45ce8..1d8bd98 100644 --- a/src/components/widgets/TwoColsFeatures.astro +++ b/src/components/widgets/TwoColsFeatures.astro @@ -2,160 +2,278 @@ const {} = Astro.props; --- -
    -
    -

    Features

    -

    - What's interesting about AstroWind - -

    -

    - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa - quae. -

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

    Integration with Tailwind CSS

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi - risus tempus nulla. -

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

    Ready-to-use Components

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi - risus tempus nulla. -

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

    Best Practices

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi - risus tempus nulla. -

    -
    -
    +
    +
    +
    +

    + Features +

    +

    + What's interesting about AstroWind + +

    +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque rem aperiam, eaque ipsa quae. +

    -
    -
    -
    -
    - - - - - - - +
    +
    +
    +
    +
    + + + + + + + + + - - + +
    +
    +
    +

    + Integration with Tailwind CSS +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi + sagittis, quam nec venenatis lobortis, mi risus tempus nulla. +

    -
    -

    Excelent Page Speed

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi - risus tempus nulla. -

    +
    +
    +
    + + + + + + + + + + + +
    +
    +
    +

    Ready-to-use Components

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi + sagittis, quam nec venenatis lobortis, mi risus tempus nulla. +

    +
    +
    +
    +
    +
    + + + + + + + + + + + +
    +
    +
    +

    Best Practices

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi + sagittis, quam nec venenatis lobortis, mi risus tempus nulla. +

    +
    -
    -
    -
    - - - - - - - +
    +
    +
    +
    + + + + + + + + + - - + +
    +
    +
    +

    Excelent Page Speed

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi + sagittis, quam nec venenatis lobortis, mi risus tempus nulla. +

    -
    -

    Frequently updated

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi - risus tempus nulla. -

    -
    -
    -
    -
    -
    - - - - - - - +
    +
    +
    + + + + + + + + + - - + +
    +
    +
    +

    Frequently updated

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi + sagittis, quam nec venenatis lobortis, mi risus tempus nulla. +

    -
    -

    Open to new ideas and contributions

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi - risus tempus nulla. -

    +
    +
    +
    + + + + + + + + + + + +
    +
    +
    +

    + Open to new ideas and contributions +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi + sagittis, quam nec venenatis lobortis, mi risus tempus nulla. +

    +
    diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index e17b31b..7f9939b 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -8,7 +8,7 @@ const { meta = {} } = Astro.props; --- - + diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro index dc11ad1..51fef5c 100644 --- a/src/pages/blog/[slug].astro +++ b/src/pages/blog/[slug].astro @@ -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); --- diff --git a/src/utils/getNormalizedPost.js b/src/utils/getNormalizedPost.js index d649c70..6e06b82 100644 --- a/src/utils/getNormalizedPost.js +++ b/src/utils/getNormalizedPost.js @@ -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), }; };