diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index 5f2284d..b545f8d 100644 --- a/src/assets/styles/base.css +++ b/src/assets/styles/base.css @@ -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; } } + +.menu-opened .line1 { + transform: rotate(-45deg) translate(-12px, 8px); +} + +.menu-opened .line2 { + transform: rotate(45deg) translate(4px, -16px); +} \ No newline at end of file diff --git a/src/components/core/BasicScripts.astro b/src/components/core/BasicScripts.astro index aa33a9d..0aeddef 100644 --- a/src/components/core/BasicScripts.astro +++ b/src/components/core/BasicScripts.astro @@ -3,23 +3,40 @@ const {} = Astro.props; --- diff --git a/src/components/core/Picture.astro b/src/components/core/Picture.astro index e744ba1..8a1f69e 100644 --- a/src/components/core/Picture.astro +++ b/src/components/core/Picture.astro @@ -6,7 +6,7 @@ const { alt, sizes, widths, - aspectRatio, + aspectRatio = 1, formats = ["avif", "webp"], loading = "lazy", decoding = "async", @@ -14,22 +14,32 @@ const { ...attrs } = Astro.props; -const { image, sources = [] } = - !src ? { image: {}} - : (typeof src === "string" - ? { image: { src } } - : - await getPicture({ - src, - widths, - formats, - aspectRatio, - })) +// const { image, sources = [] } = +// !src ? { image: {}} +// : (typeof src === "string" +// ? { image: { src } } +// : + +let picture = null; +try { + picture = await getPicture({ + src, + widths, + formats, + aspectRatio, + }) +} +catch (e) { + console.log(e); +} + +const { image = {}, sources = [] } = picture || {} --- -{ (src || !image) && +{ (src && image?.src) && - {sources.map((attrs) => )} + {sources.map((attrs) => + )} } diff --git a/src/components/icons/IconMenu.astro b/src/components/icons/IconMenu.astro index c5b040c..bc56d89 100644 --- a/src/components/icons/IconMenu.astro +++ b/src/components/icons/IconMenu.astro @@ -15,6 +15,6 @@ const { class: className = "w-5 h-5" } = Astro.props; stroke-linejoin="round" > - - + + diff --git a/src/components/widgets/BasicFAQs.astro b/src/components/widgets/BasicFAQs.astro index 7414208..643ad55 100644 --- a/src/components/widgets/BasicFAQs.astro +++ b/src/components/widgets/BasicFAQs.astro @@ -50,7 +50,7 @@ const {} = Astro.props;

- Is the Space Pope reptilian!? + What's something that you completely don't understand?

A flower in my garden, a mystery in my panties. Heart attack never @@ -63,7 +63,7 @@ const {} = Astro.props;

- How much money you got on you? + What's an example of when you changed your mind?

Michael Knight a young loner on a crusade to champion the cause of @@ -75,7 +75,7 @@ const {} = Astro.props;

- Galaxies Orion's sword globular star cluster? + What is something that you would really like to try again?

A business big enough that it could be listed on the NASDAQ goes @@ -89,7 +89,8 @@ const {} = Astro.props;

- When has justice ever been as simple as a rule book? + If you could only ask one question to each person you meet, what would + that question be?

This is not about revenge. This is about justice. A lot of things diff --git a/src/components/widgets/BlogList.astro b/src/components/widgets/BlogList.astro new file mode 100644 index 0000000..ec332e2 --- /dev/null +++ b/src/components/widgets/BlogList.astro @@ -0,0 +1,37 @@ +--- +import BlogListItem from "~/components/widgets/BlogListItem.astro"; +import Pagination from "~/components/widgets/Pagination.astro"; + +const { page } = Astro.props; +--- + +

+
+

+ News and step-by-step guides about + AstroWind + +

+
+
    + { + page.data.map((post) => ( +
  • + +
    • + )) + } +
+ + { + (page.url.prev || page.url.next) && ( + + ) + } +
diff --git a/src/components/widgets/BlogPostCard.astro b/src/components/widgets/BlogListItem.astro similarity index 80% rename from src/components/widgets/BlogPostCard.astro rename to src/components/widgets/BlogListItem.astro index 88585e7..9f5df4d 100644 --- a/src/components/widgets/BlogPostCard.astro +++ b/src/components/widgets/BlogListItem.astro @@ -1,15 +1,10 @@ --- import Picture from "~/components/core/Picture.astro"; +import { findImage } from "~/utils/findImage"; const { post } = Astro.props; -const images = import.meta.glob("../../assets/images/*"); -const imageSrc = - typeof images[post.image] === "function" - ? (await images[post.image]())["default"] - : typeof post.image === "string" - ? post.image - : null; +const image = await findImage(post.image); ---
-

+

+
+
+

+ ~ {Math.ceil(post.readingTime)} min +

+

+ {post.title} +

+ + +
+
+ +
+
+ diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro index ab462e1..0ae4605 100644 --- a/src/components/widgets/Header.astro +++ b/src/components/widgets/Header.astro @@ -4,7 +4,7 @@ const {} = Astro.props; ---
@@ -98,9 +98,6 @@ const {} = Astro.props; > - -

diff --git a/src/components/widgets/BlogFeaturesPosts.astro b/src/components/widgets/HighlightedPosts.astro similarity index 69% rename from src/components/widgets/BlogFeaturesPosts.astro rename to src/components/widgets/HighlightedPosts.astro index 4b812e5..817d523 100644 --- a/src/components/widgets/BlogFeaturesPosts.astro +++ b/src/components/widgets/HighlightedPosts.astro @@ -30,16 +30,18 @@ const {} = Astro.props; alt="Post 2 Image" aspectRatio="16:9" /> -

+

Get started with AstroWind + >Get started with AstroWind to create a website using Astro and + Tailwind CSS

- I'll be sure to note that in my log. Smooth as an android's bottom, eh, - Data? When has justice ever been as simple as a rule book? + Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim + qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit + sit fugiat

@@ -52,16 +54,17 @@ const {} = Astro.props; alt="Post 1 Image" aspectRatio="16:9" /> -

+

How to customize the template + >How to customize AstroWind template to suit your branding

- O for awesome, this chocka full cuzzie is as rip-off as a cracker. - Meanwhile, in behind the bicycle shed, Hercules Morse. + Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim + qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit + sit fugiat

@@ -74,16 +77,17 @@ const {} = Astro.props; alt="Post 3 Image" aspectRatio="16:9" /> -

+

Helpful tools and resources to design + >Useful tools and resources to create a professional website

- Yolo ipsum dolor sit amet, consectetur adipiscing elit. Ut ac suscipit - leo. Carpe diem vulputate est nec commodo rutrum. + Nibh senectus lacinia volutpat nostra taciti ac posuere, dictum + ultricies dictumst luctus in vehicula, mus molestie venenatis penatibus + ridiculus elementum. Phasellus sollicitudin dignissim parturient.

@@ -96,7 +100,7 @@ const {} = Astro.props; alt="Post 2 Image" aspectRatio="16:9" /> -

+

- I'll be sure to note that in my log. Smooth as an android's bottom, eh, - Data? When has justice ever been as simple as a rule book? + Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis + vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non + potenti. Torquent hac sociosqu eleifend potenti.

diff --git a/src/components/widgets/StepsLeft.astro b/src/components/widgets/StepsLeft.astro index 13d7a40..faf03cf 100644 --- a/src/components/widgets/StepsLeft.astro +++ b/src/components/widgets/StepsLeft.astro @@ -10,7 +10,7 @@ const {} = Astro.props;
-
-
-
-

- News and step-by-step guides about - AstroWind - -

- -
    - { - page.data.map((post) => ( -
  • - -
    • - )) - } -
- - { - (page.url.prev || page.url.next) && ( - - ) - } - +
+
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro index 73f3a00..1310335 100644 --- a/src/pages/blog/[slug].astro +++ b/src/pages/blog/[slug].astro @@ -1,12 +1,13 @@ --- -import Layout from "~/layouts/PageLayout.astro"; -import Picture from "~/components/core/Picture.astro"; - import { SITE } from "~/config.mjs"; -import { getAllPosts } from "~/utils/getAllPosts"; +import { getPosts } from "~/utils/getPosts"; +import { findImage } from "~/utils/findImage"; + +import Layout from "~/layouts/PageLayout.astro"; +import BlogPost from "~/components/widgets/BlogPost.astro"; export async function getStaticPaths() { - const posts = await getAllPosts(); + const posts = await getPosts(); return posts.map((post) => ({ params: { slug: post.slug }, @@ -20,14 +21,7 @@ const title = `${post.title} — ${SITE.name}`; const description = post.description; const canonical = new URL(`blog/${post.slug}`, Astro.site); -const images = import.meta.glob("../../assets/images/*"); - -const imageSrc = - typeof images[post.image] === "function" - ? (await images[post.image]())["default"] - : typeof post.image === "string" - ? post.image - : null; +const image = await findImage(post.image); --- -
-
-
-
-

- ~ {Math.ceil(post.readingTime)} min -

-

- {post.title} -

- - -
-
- -
-
-
+
+
diff --git a/src/pages/index.astro b/src/pages/index.astro index 23bd7a2..23a600f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -10,7 +10,7 @@ import StepsFeatures from "~/components/widgets/StepsFeatures.astro"; import BasicFAQs from "~/components/widgets/BasicFAQs.astro"; import TwoColsFeatures from "~/components/widgets/TwoColsFeatures.astro"; import StepsLeft from "~/components/widgets/StepsLeft.astro"; -import BlogFeaturesPosts from "~/components/widgets/BlogFeaturesPosts.astro"; +import HighlightedPosts from "~/components/widgets/HighlightedPosts.astro"; import Stats from "~/components/widgets/Stats.astro"; const title = `${SITE.name} — Your website with Astro + Tailwind CSS`; @@ -20,13 +20,13 @@ const canonical = new URL("", Astro.site); --- -
+
- + diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js index f641f18..15e583f 100644 --- a/src/pages/rss.xml.js +++ b/src/pages/rss.xml.js @@ -1,9 +1,9 @@ import rss from "@astrojs/rss"; import { SITE } from "~/config"; -import { getAllPosts } from "~/utils/getAllPosts"; +import { getPosts } from "~/utils/getPosts"; -const posts = await getAllPosts(); +const posts = await getPosts(); export const get = () => rss({