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

6
src/components/widgets/Logo.astro
View File

@ -1,6 +0,0 @@
---
---
<span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">
🚀 AstroWind
</span>

34
src/components/widgets/Pagination.astro
View File

@ -1,34 +0,0 @@
---
import { Icon } from "astro-icon";
const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } = Astro.props;
---
{
(prevUrl || nextUrl) && (
<div class="container flex">
<div class="flex flex-row mx-auto container justify-between">
<a
href={prevUrl}
class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none mr-2
${!prevUrl ? "invisible" : ""}`}
>
<div class="flex flex-row align-middle">
<Icon name="tabler:arrow-left" class="w-6 h-6" />
<p class="ml-2">{prevText}</p>
</div>
</a>
<a
href={nextUrl}
class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none ${
!nextUrl ? "invisible" : ""
}`}
>
<div class="flex flex-row align-middle">
<span class="mr-2">{nextText}</span>
<Icon name="tabler:arrow-right" class="w-6 h-6" />
</div>
</a>
</div>
</div>
)
}

17
src/components/widgets/PostTags.astro
View File

@ -1,17 +0,0 @@
---
import { getPermalink } from "~/utils/permalinks";
const { tags, class: className = "text-sm" } = Astro.props;
---
{
tags && Array.isArray(tags) && (
<ul class={className}>
{tags.map((tag) => (
<li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2">
<a href={getPermalink(tag, "tag")}>{tag}</a>
</li>
))}
</ul>
)
}

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;