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

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>