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

Refactor components structure

Browse Source
This commit is contained in:
prototypa
2022-09-04 03:21:44 -04:00
parent e95d47b5d3
commit 00cd7fa1b1
25 changed files with 97 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/atoms/ExtraMetaTags.astro Normal file
View File

@ -0,0 +1,2 @@
---
---

7
src/components/atoms/Fonts.astro Normal file
View File

@ -0,0 +1,7 @@
---
---
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />

0
src/components/widgets/Logo.astro → src/components/atoms/Logo.astro
View File

0
src/components/widgets/Pagination.astro → src/components/atoms/Pagination.astro
View File

0
src/components/widgets/PostTags.astro → src/components/atoms/Tags.astro
View File

9
src/components/core/MetaTags.astro
View File

@ -6,6 +6,8 @@ import GoogleAnalytics from "~/components/core/GoogleAnalytics.astro";
import defaultImageSrc from "~/assets/images/default.png";
import { SITE } from "~/config.mjs";
import Fonts from "../atoms/Fonts.astro";
import ExtraMetaTags from "../atoms/ExtraMetaTags.astro";
const { src: defaultImage } = await getImage({
src: defaultImageSrc,
@ -59,13 +61,12 @@ const image =
<meta name="twitter:description" content={description} />
{image && <meta name="twitter:image" content={image} />}
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
<Fonts />
<!-- Google Site Verification -->
{SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}
<!-- Google Analytics -->
{SITE.googleAnalyticsId && <GoogleAnalytics id={SITE.googleAnalyticsId} partytown={true} />}
<ExtraMetaTags />

28
src/components/core/ToggleMenu.astro Normal file
View File

@ -0,0 +1,28 @@
---
import { Icon } from "astro-icon";
const {
label = "Toggle Menu",
class:
className = "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",
iconClass = "w-6 h-6",
iconName = "tabler:menu",
} = Astro.props;
---
<button type="button" class={className} aria-label={label} data-aw-toggle-menu>
<Icon name={iconName} class={iconClass} optimize={false} />
</button>
<style is:global>
[data-aw-toggle-menu] path {
@apply transition;
}
[data-aw-toggle-menu].expanded g > path:first-child {
@apply -rotate-45 translate-y-[15px] translate-x-[-3px];
}
[data-aw-toggle-menu].expanded g > path:last-child {
@apply rotate-45 translate-y-[-8px] translate-x-[14px];
}
</style>

15
src/components/core/ToggleTheme.astro Normal file
View File

@ -0,0 +1,15 @@
---
import { Icon } from "astro-icon";
const {
label = "Toggle between Dark and Light mode",
class:
className = "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",
iconClass = "w-6 h-6",
iconName = "tabler:sun",
} = Astro.props;
---
<button type="button" class={className} aria-label={label} data-aw-toggle-color-scheme>
<Icon name={iconName} class={iconClass} />
</button>

2
src/components/widgets/BasicCTA.astro → src/components/widgets/CallToAction.astro
View File

@ -23,7 +23,7 @@ const {} = Astro.props;
target="_blank"
rel="noopener"
>
<Icon name="tabler:download" class="w-5 h-5 mr-1 hidden sm:inline-block" /> Get template
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5 hidden sm:inline-block" /> Get template
</a>
</div>
</div>

0
src/components/widgets/BasicFeatures.astro → src/components/widgets/Features.astro
View File

2
src/components/widgets/TwoColsFeatures.astro → src/components/widgets/Features2.astro
View File

@ -70,7 +70,7 @@ const items = [
<path
class="stroke-current text-primary-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
></path>
/>
</g>
</g>
</svg>

3
src/components/widgets/StepsFeatures.astro → src/components/widgets/Features3.astro
View File

@ -1,5 +1,6 @@
---
import { Icon } from "astro-icon";
const {} = Astro.props;
---
@ -27,7 +28,7 @@ const {} = Astro.props;
target="_blank"
rel="noopener"
>
<Icon name="tabler:download" class="w-5 h-5 mr-1 hidden sm:inline-block" /> Get template
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5 hidden sm:inline-block" /> Get template
</a>
</div>
</div>

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

@ -173,7 +173,7 @@ const {} = Astro.props;
aria-label="Twitter"
href="#"
>
<Icon name="tabler:brand-twitter" class="w-5 h-5" />
<Icon name="tabler:brand-twitter" class="w-5 h-5" />
</a>
</li>
<li>
@ -182,7 +182,7 @@ const {} = Astro.props;
aria-label="Instagram"
href="#"
>
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
</a>
</li>
<li>
@ -191,7 +191,7 @@ const {} = Astro.props;
aria-label="Facebook"
href="#"
>
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
</a>
</li>
<li>
@ -200,7 +200,7 @@ const {} = Astro.props;
aria-label="RSS"
href="/rss.xml"
>
<Icon name="tabler:rss" class="w-5 h-5" />
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
</li>
<li>
@ -209,7 +209,7 @@ const {} = Astro.props;
aria-label="Github"
href="https://github.com/onwidget/astrowind"
>
<Icon name="tabler:brand-github" class="w-5 h-5" />
<Icon name="tabler:brand-github" class="w-5 h-5" />
</a>
</li>
</ul>

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

@ -1,6 +1,8 @@
---
import { Icon } from "astro-icon";
import Logo from "~/components/widgets/Logo.astro";
import Logo from "~/components/atoms/Logo.astro";
import ToggleTheme from "../core/ToggleTheme.astro";
import ToggleMenu from "../core/ToggleMenu.astro";
import { getPermalink, getBlogPermalink, getHomePermalink } from "~/utils/permalinks";
@ -16,21 +18,8 @@ const {} = Astro.props;
<Logo />
</a>
<div class="flex items-center md:hidden">
<button
type="button"
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="Toggle between Dark and Light mode"
data-aw-toggle-color-scheme
>
<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
>
<Icon name="tabler:menu" class="w-6 h-6" optimize={false} />
</button>
<ToggleTheme />
<ToggleMenu />
</div>
</div>
<nav
@ -72,14 +61,7 @@ const {} = Astro.props;
</ul>
<div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
<div class="hidden items-center md:flex">
<button
type="button"
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="Toggle between Dark and Light mode"
data-aw-toggle-color-scheme
>
<Icon name="tabler:sun" class="w-5 h-5" />
</button>
<ToggleTheme iconClass="w-5 h-5" />
<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"
@ -99,16 +81,3 @@ const {} = Astro.props;
</nav>
</div>
</header>
<style is:global>
[data-aw-toggle-menu] path {
@apply transition;
}
[data-aw-toggle-menu].expanded g > path:first-child {
@apply -rotate-45 translate-y-[15px] translate-x-[-3px];
}
[data-aw-toggle-menu].expanded g > path:last-child {
@apply rotate-45 translate-y-[-8px] translate-x-[14px];
}
</style>

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

@ -31,7 +31,7 @@ const {} = Astro.props;
target="_blank"
rel="noopener"
>
<Icon name="tabler:download" class="w-5 h-5 mr-1 hidden sm:inline-block" /> Get template
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5 hidden sm:inline-block" /> Get template
</a>
</div>
<div>

0
src/components/widgets/StepsLeft.astro → src/components/widgets/Steps.astro
View File

0
src/components/widgets/HighlightedPosts.astro → src/components/widgets/blog/HighlightedPosts.astro
View File

4
src/components/widgets/BlogList.astro → src/components/widgets/blog/List.astro
View File

@ -1,5 +1,5 @@
---
import BlogListItem from "~/components/widgets/BlogListItem.astro";
import Item from "~/components/widgets/blog/ListItem.astro";
const { posts } = Astro.props;
---
@ -8,7 +8,7 @@ const { posts } = Astro.props;
{
posts.map((post) => (
<li class="mb-10 md:mb-16">
<BlogListItem post={post} />
<Item post={post} />
</li>
))
}

2
src/components/widgets/BlogListItem.astro → src/components/widgets/blog/ListItem.astro
View File

@ -1,6 +1,6 @@
---
import Picture from "~/components/core/Picture.astro";
import PostTags from "~/components/widgets/PostTags.astro";
import PostTags from "~/components/atoms/Tags.astro";
import { getPermalink } from "~/utils/permalinks";
import { findImage } from "~/utils/images";

3
src/components/widgets/BlogPost.astro → src/components/widgets/blog/SinglePost.astro
View File

@ -1,6 +1,7 @@
---
import Picture from "~/components/core/Picture.astro";
import PostTags from "~/components/widgets/PostTags.astro";
import PostTags from "~/components/atoms/Tags.astro";
import { getFormattedDate } from "~/utils/utils";
const { post } = Astro.props;

4
src/pages/[...blog]/[...page].astro
View File

@ -2,8 +2,8 @@
import { SITE, BLOG } from "~/config.mjs";
import Layout from "~/layouts/BlogLayout.astro";
import BlogList from "~/components/widgets/BlogList.astro";
import Pagination from "~/components/widgets/Pagination.astro";
import BlogList from "~/components/widgets/blog/List.astro";
import Pagination from "~/components/atoms/Pagination.astro";
import { fetchPosts } from "~/utils/posts";
import { getCanonical, getPermalink, BLOG_BASE } from "~/utils/permalinks";

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

@ -2,7 +2,7 @@
import { SITE, BLOG } from "~/config.mjs";
import Layout from "~/layouts/PageLayout.astro";
import BlogPost from "~/components/widgets/BlogPost.astro";
import SinglePost from "~/components/widgets/blog/SinglePost.astro";
import { getCanonical, getPermalink, cleanSlug, BLOG_BASE } from "~/utils/permalinks";
import { fetchPosts } from "~/utils/posts";
@ -30,5 +30,5 @@ const meta = {
---
<Layout meta={meta}>
<BlogPost post={{ ...post, image: meta.image }} />
<SinglePost post={{ ...post, image: meta.image }} />
</Layout>

4
src/pages/[...categories]/[category]/[...page].astro
View File

@ -2,8 +2,8 @@
import { SITE, BLOG } from "~/config.mjs";
import Layout from "~/layouts/BlogLayout.astro";
import BlogList from "~/components/widgets/BlogList.astro";
import Pagination from "~/components/widgets/Pagination.astro";
import BlogList from "~/components/widgets/blog/List.astro";
import Pagination from "~/components/atoms/Pagination.astro";
import { fetchPosts } from "~/utils/posts";
import { getCanonical, getPermalink, cleanSlug, CATEGORY_BASE } from "~/utils/permalinks";

4
src/pages/[...tags]/[tag]/[...page].astro
View File

@ -2,8 +2,8 @@
import { SITE, BLOG } from "~/config.mjs";
import Layout from "~/layouts/BlogLayout.astro";
import BlogList from "~/components/widgets/BlogList.astro";
import Pagination from "~/components/widgets/Pagination.astro";
import BlogList from "~/components/widgets/blog/List.astro";
import Pagination from "~/components/atoms/Pagination.astro";
import { fetchPosts } from "~/utils/posts";
import { getCanonical, getPermalink, cleanSlug, TAG_BASE } from "~/utils/permalinks";

22
src/pages/index.astro
View File

@ -4,14 +4,14 @@ import { getCanonical, getHomePermalink } from "~/utils/permalinks";
import Layout from "~/layouts/PageLayout.astro";
import Hero from "~/components/widgets/Hero.astro";
import BasicCTA from "~/components/widgets/BasicCTA.astro";
import BasicFeatures from "~/components/widgets/BasicFeatures.astro";
import StepsFeatures from "~/components/widgets/StepsFeatures.astro";
import Features from "~/components/widgets/Features.astro";
import Features2 from "~/components/widgets/Features2.astro";
import Steps from "~/components/widgets/Steps.astro";
import Features3 from "~/components/widgets/Features3.astro";
import HighlightedPosts from "~/components/widgets/blog/HighlightedPosts.astro";
import FAQs from "~/components/widgets/FAQs.astro";
import TwoColsFeatures from "~/components/widgets/TwoColsFeatures.astro";
import StepsLeft from "~/components/widgets/StepsLeft.astro";
import HighlightedPosts from "~/components/widgets/HighlightedPosts.astro";
import Stats from "~/components/widgets/Stats.astro";
import CallToAction from "~/components/widgets/CallToAction.astro";
const meta = {
title: SITE.title,
@ -22,12 +22,12 @@ const meta = {
<Layout meta={meta}>
<Hero />
<BasicFeatures />
<StepsLeft />
<TwoColsFeatures />
<StepsFeatures />
<Features />
<Steps />
<Features2 />
<Features3 />
<HighlightedPosts />
<FAQs />
<Stats />
<BasicCTA />
<CallToAction />
</Layout>