@yatoday/astro-ui 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Frontendland
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+> [!IMPORTANT]
+> This library is still in early development. New changes can break existing functionality, and no functionality should be considered final at this stage. The library will be considered stable once it reaches v1.0.

package/astro.d.ts

@@ -0,0 +1,31 @@
+import type { AnalyticsProps as YtAnalyticsProps } from './components/Analytics/types'
+import type { BackgroundProps as YtBackgroundProps } from './components/Background/types'
+import type { Card0Props as YtCard0Props } from './components/Card0/types'
+import type { ConditionalWrapperProps as YtConditionalWrapperProps } from './components/ConditionalWrapper/types'
+import type { DarkModeProps as YtDarkModeProps } from './components/DarkMode/types'
+import type { LayoutProps as YtLayoutProps } from './components/Layout/types'
+import type { MetadataProps as YtMetadataProps } from './components/Metadata/types'
+import type { SiteVerificationProps as YtSiteVerificationProps } from './components/SiteVerification/types'
+import type { WidgetWrapperProps as YtWidgetWrapperProps } from './components/WidgetWrapper/types'
+
+declare module '@yatoday/astro-ui/astro' {
+  export function Analytics(_props: YtAnalyticsProps): any
+	export function Background(_props: YtBackgroundProps): any
+	export function Card0(_props: YtCard0Props): any
+	export function ConditionalWrapper(_props: YtConditionalWrapperProps): any
+	export function DarkMode(_props: YtDarkModeProps): any
+	export function Layout(_props: YtLayoutProps): any
+	export function Metadata(_props: YtMetadataProps): any
+	export function SiteVerification(_props: YtSiteVerificationProps): any
+	export function WidgetWrapper(_props: YtWidgetWrapperProps): any
+
+  export type AnalyticsProps = YtAnalyticsProps
+	export type BackgroundProps = YtBackgroundProps
+	export type Card0Props = YtCard0Props
+	export type ConditionalWrapperProps = YtConditionalWrapperProps
+	export type DarkModeProps = YtDarkModeProps
+	export type LayoutProps = YtLayoutProps
+	export type MetadataProps = YtMetadataProps
+	export type SiteVerificationProps = YtSiteVerificationProps
+	export type WidgetWrapperProps = YtWidgetWrapperProps
+}

package/astro.js

@@ -0,0 +1,19 @@
+import AnalyticsComponent from './components/Analytics/Analytics.astro'
+import BackgroundComponent from './components/Background/Background.astro'
+import Card0Component from './components/Card0/Card0.astro'
+import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
+import DarkModeComponent from './components/DarkMode/DarkMode.astro'
+import LayoutComponent from './components/Layout/Layout.astro'
+import MetadataComponent from './components/Metadata/Metadata.astro'
+import SiteVerificationComponent from './components/SiteVerification/SiteVerification.astro'
+import WidgetWrapperComponent from './components/WidgetWrapper/WidgetWrapper.astro'
+
+export const Analytics = AnalyticsComponent
+export const Background = BackgroundComponent
+export const Card0 = Card0Component
+export const ConditionalWrapper = ConditionalWrapperComponent
+export const DarkMode = DarkModeComponent
+export const Layout = LayoutComponent
+export const Metadata = MetadataComponent
+export const SiteVerification = SiteVerificationComponent
+export const WidgetWrapper = WidgetWrapperComponent

package/components/Analytics/Analytics.astro

@@ -0,0 +1,15 @@
+---
+//import type { AnalyticsProps as Props } from './types';
+import AnalyticsGoogleProvider from './AnalyticsGoogle.astro';
+
+import { ANALYTICS } from 'vendor:config';
+---
+
+{
+  ANALYTICS?.vendors?.googleAnalytics?.id ? (
+    <AnalyticsGoogleProvider
+      id={String(ANALYTICS.vendors.googleAnalytics.id)}
+      partytown={ANALYTICS?.vendors?.googleAnalytics?.partytown}
+    />
+  ) : null
+}

package/components/Analytics/AnalyticsGoogle.astro

@@ -0,0 +1,17 @@
+---
+import type { AnalyticsGoogleProps as Props } from './types';
+
+const { id = 'GA_MEASUREMENT_ID', partytown = false } = Astro.props;
+const attrs = partytown ? { type: 'text/partytown' } : {};
+---
+
+<script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${id}`} {...attrs}></script>
+
+<script is:inline define:vars={{ id }} {...attrs}>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    window.dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+  gtag('config', id);
+</script>

package/components/Analytics/types.ts

@@ -0,0 +1,6 @@
+export type AnalyticsProps = {};
+
+export type AnalyticsGoogleProps = {
+  id: string;
+  partytown?: boolean;
+};

package/components/Background/Background.astro

@@ -0,0 +1,9 @@
+---
+import type { BackgroundProps as Props } from './types';
+
+const { isDark = false } = Astro.props;
+---
+
+<div class:list={['absolute inset-0', { 'bg-dark dark:bg-transparent': isDark }]}>
+  <slot />
+</div>

package/components/Background/Background.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { SvelteBackgroundProps } from './types.ts';
+  
+  const {
+    isDark,
+    children,
+    ...rest
+  }: SvelteBackgroundProps = $props()
+</script>
+
+<div class:list={['absolute inset-0', { 'bg-dark dark:bg-transparent': isDark }]} {...rest}>
+  {@render children?.()}
+</div>

package/components/Background/types.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+
+export type BackgroundProps = {
+  isDark?: boolean;
+};
+
+export type SvelteBackgroundProps = {
+  children?: Snippet;
+} & BackgroundProps;

package/components/Card0/Card0.astro

@@ -0,0 +1,23 @@
+---
+import type { Card0Props as Props } from './types';
+import { twMerge } from 'tailwind-merge';
+
+const { as = 'article', classes = {} } = Astro.props;
+
+const WrapperTag = as;
+
+const { container: containerClass = '', badge: badgeClass = '' } = classes;
+---
+
+<WrapperTag
+  class={twMerge(
+    'relative flex flex-col justify-between gap-6 overflow-hidden rounded-lg border border-input bg-card text-card-foreground py-6 group',
+    containerClass
+  )}
+>
+  <div class={twMerge('absolute', badgeClass)}>
+    <slot name="badge" />
+  </div>
+  <slot name="image" />
+  <slot />
+</WrapperTag>

package/components/Card0/card0.ts

@@ -0,0 +1,6 @@
+import type { HTMLTag } from 'astro/types';
+
+export type Card0Props = {
+  as?: HTMLTag;
+  classes?: Record<string, string>;
+};

package/components/Card0/types.ts

@@ -0,0 +1,6 @@
+import type { HTMLTag } from 'astro/types';
+
+export type Card0Props = {
+  as?: HTMLTag;
+  classes?: Record<string, string>;
+};

package/components/ConditionalWrapper/ConditionalWrapper.astro

@@ -0,0 +1,15 @@
+---
+import type { ConditionalWrapperProps as Props } from './types';
+
+const { condition } = Astro.props;
+
+const wrapper = await Astro.slots.render('wrapper');
+const children = await Astro.slots.render('default');
+const wrapped = wrapper?.replace('children', children);
+
+if (!Astro.slots.has('wrapper')) {
+  console.error('Missing wrapper. Add slot="wrapper" to one of the elements.');
+}
+---
+
+<Fragment set:html={condition ? wrapped : children} />

package/components/ConditionalWrapper/ConditionalWrapper.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type {SvelteConditionalWrapperProps} from './types'
+
+  const {
+    condition,
+    element = 'div',
+    children,
+    ...rest
+  }: SvelteConditionalWrapperProps = $props()
+</script>
+
+{#if condition}
+  <svelte:element this={element} {...rest}>
+    {@render children?.()}
+  </svelte:element>
+{:else}
+  {@render children?.()}
+{/if}

package/components/ConditionalWrapper/types.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+
+export type ConditionalWrapperProps = {
+  condition: boolean;
+  [key: string]: any;
+};
+
+export type SvelteConditionalWrapperProps = {
+  children: Snippet;
+} & ConditionalWrapperProps;

package/components/DarkMode/DarkMode.astro

@@ -0,0 +1,77 @@
+---
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
+
+import type { DarkModeProps as Props } from './types';
+
+const {
+  label = 'Toggle between Dark and Light mode',
+  class:
+    className = 'dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5',
+  iconClass = 'w-6 h-6',
+  iconName = 'tabler:sun',
+  initialMode = 'system',
+} = Astro.props;
+---
+
+{
+  !initialMode.endsWith(':only') && (
+    <button
+      type="button"
+      class={twMerge('cursor-pointer inline-flex items-center', className)}
+      aria-label={label}
+      data-aw-toggle-color-scheme
+    >
+      <slot>
+        <Icon name={iconName} class={iconClass} />
+      </slot>
+    </button>
+  )
+}
+
+<script is:inline define:vars={{ mode: initialMode }}>
+  // Only run once
+  if (!window.darkModeInitialized) {
+    window.darkModeInitialized = true;
+
+    const root = document.documentElement;
+
+    function applyTheme(theme) {
+      if (theme === 'dark') {
+        root.classList.add('dark');
+      } else {
+        root.classList.remove('dark');
+      }
+    }
+
+    const initialize = function () {
+      if ((mode && mode.endsWith(':only')) || (!localStorage.theme && mode !== 'system')) {
+        applyTheme(mode.replace(':only', ''));
+      } else if (
+        localStorage.theme === 'dark' ||
+        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+      ) {
+        applyTheme('dark');
+      } else {
+        applyTheme('light');
+      }
+    };
+    initialize();
+
+    // Add click handlers to all toggles
+    document.addEventListener('click', (e) => {
+      if (e.target.closest('[data-aw-toggle-color-scheme]')) {
+        if (mode.endsWith(':only')) {
+          return;
+        }
+        root.classList.toggle('dark');
+        localStorage.theme = root.classList.contains('dark') ? 'dark' : 'light';
+      }
+    });
+
+    // Listen for view transitions
+    document.addEventListener('astro:after-swap', () => {
+      initialize();
+    });
+  }
+</script>

package/components/DarkMode/types.ts

@@ -0,0 +1,7 @@
+export type DarkModeProps = {
+  label?: string;
+  class?: string;
+  iconClass?: string;
+  iconName?: string;
+  initialMode?: 'system' | 'light' | 'dark' | 'light:only' | 'dark:only';
+};

package/components/Layout/Layout.astro

@@ -0,0 +1,35 @@
+---
+import { getAsset } from '../../utils';
+import SeoMetadata from '../Metadata/Metadata.astro';
+import SeoSiteVerification from '../SiteVerification/SiteVerification.astro';
+import SeoAnalytics from '../Analytics/Analytics.astro';
+import type { LayoutProps as Props } from './types';
+
+import { I18N } from 'vendor:config';
+
+const { metadata = {} } = Astro.props;
+const { language, textDirection } = I18N;
+---
+
+<!doctype html>
+<html lang={language} dir={textDirection}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="sitemap" href={getAsset('/sitemap-index.xml')} />
+    <SeoMetadata {...metadata} />
+
+    <slot name="favicons" />
+    <slot name="styles" />
+
+    <SeoSiteVerification />
+    <SeoAnalytics />
+  </head>
+
+  <body class="antialiased bg-background text-foreground tracking-tight">
+    <slot />
+
+    <slot name="scripts" />
+  </body>
+</html>

package/components/Layout/types.ts

@@ -0,0 +1,13 @@
+import type { MetaData, MetaDataOpenGraph, MetaDataRobots, MetaDataTwitter } from '~/components/SeoMetadata/types';
+
+export type LayoutProps = {
+  title?: string;
+  description?: string;
+  ignoreTitleTemplate?: boolean;
+  canonical?: string;
+
+  robots?: MetaDataRobots;
+  openGraph?: MetaDataOpenGraph;
+  twitter?: MetaDataTwitter;
+  metadata?: MetaData;
+};

package/components/Metadata/AstroSeo.astro

@@ -0,0 +1,40 @@
+---
+import type { AstroSeoProps as Props } from './types';
+import { buildTags } from './utils/buildTags';
+
+const {
+  title,
+  titleTemplate,
+  noindex,
+  nofollow,
+  robotsProps,
+  description,
+  canonical,
+  mobileAlternate,
+  languageAlternates,
+  openGraph,
+  facebook,
+  twitter,
+  additionalMetaTags,
+  additionalLinkTags,
+} = Astro.props;
+---
+
+<Fragment
+  set:html={buildTags({
+    title,
+    titleTemplate,
+    noindex,
+    nofollow,
+    robotsProps,
+    description,
+    canonical,
+    mobileAlternate,
+    languageAlternates,
+    openGraph,
+    facebook,
+    twitter,
+    additionalMetaTags,
+    additionalLinkTags,
+  })}
+/>

package/components/Metadata/Metadata.astro

@@ -0,0 +1,60 @@
+---
+import type { AstroSeoProps, MetadataProps as Props } from './types';
+import AstroSeo from './AstroSeo.astro';
+import { adaptOpenGraphImages, getCanonical } from '../../utils';
+
+import merge from 'lodash.merge';
+import { I18N, METADATA, SITE } from 'vendor:config';
+
+const {
+  title,
+  ignoreTitleTemplate = false,
+  canonical = String(getCanonical(String(Astro.url.pathname))),
+  robots = {},
+  description,
+  openGraph = {},
+  twitter = {},
+} = Astro.props;
+
+const seoProps: AstroSeoProps = merge(
+  {
+    title: '',
+    titleTemplate: '%s',
+    canonical,
+    noindex: true,
+    nofollow: true,
+    description: undefined,
+    openGraph: {
+      url: canonical,
+      site_name: SITE?.name,
+      images: [],
+      locale: I18N?.language || 'en',
+      type: 'website',
+    },
+    twitter: {
+      cardType: openGraph?.images?.length ? 'summary_large_image' : 'summary',
+    },
+  },
+  {
+    title: METADATA?.title?.default,
+    titleTemplate: METADATA?.title?.template,
+    noindex: typeof METADATA?.robots?.index !== 'undefined' ? !METADATA.robots.index : undefined,
+    nofollow: typeof METADATA?.robots?.follow !== 'undefined' ? !METADATA.robots.follow : undefined,
+    description: METADATA?.description,
+    openGraph: METADATA?.openGraph,
+    twitter: METADATA?.twitter,
+  },
+  {
+    title,
+    titleTemplate: ignoreTitleTemplate ? '%s' : undefined,
+    canonical,
+    noindex: typeof robots?.index !== 'undefined' ? !robots.index : undefined,
+    nofollow: typeof robots?.follow !== 'undefined' ? !robots.follow : undefined,
+    description,
+    openGraph: { url: canonical, ...openGraph },
+    twitter,
+  }
+);
+---
+
+<AstroSeo {...{ ...seoProps, openGraph: await adaptOpenGraphImages(seoProps?.openGraph, Astro.site) }} />

package/components/Metadata/types.ts

@@ -0,0 +1,186 @@
+export type MetadataProps = {
+  dontUseTitleTemplate?: boolean;
+} extends MetaData
+  ? never
+  : MetaData;
+
+export interface MetaData {
+  title?: string;
+  ignoreTitleTemplate?: boolean;
+  canonical?: string;
+  robots?: MetaDataRobots;
+  description?: string;
+  openGraph?: MetaDataOpenGraph;
+  twitter?: MetaDataTwitter;
+}
+
+export interface MetaDataRobots {
+  index?: boolean;
+  follow?: boolean;
+}
+
+export interface MetaDataImage {
+  url: string;
+  width?: number;
+  height?: number;
+}
+
+export interface MetaDataOpenGraph {
+  url?: string;
+  siteName?: string;
+  images?: Array<MetaDataImage>;
+  locale?: string;
+  type?: string;
+}
+
+export interface MetaDataTwitter {
+  handle?: string;
+  site?: string;
+  cardType?: string;
+}
+
+export type AstroSeoProps = {
+  title?: string;
+  titleTemplate?: string;
+  noindex?: boolean;
+  nofollow?: boolean;
+  robotsProps?: AdditionalRobotsProps;
+  description?: string;
+  canonical?: string;
+  mobileAlternate?: MobileAlternate;
+  languageAlternates?: ReadonlyArray<LanguageAlternate>;
+  openGraph?: OpenGraph;
+  facebook?: { appId: string };
+  twitter?: Twitter;
+  additionalMetaTags?: ReadonlyArray<MetaTag>;
+  additionalLinkTags?: ReadonlyArray<LinkTag>;
+};
+
+export interface OpenGraphMedia {
+  url: string;
+  width?: number;
+  height?: number;
+  alt?: string;
+  type?: string;
+  secureUrl?: string;
+}
+
+export interface AdditionalRobotsProps {
+  nosnippet?: boolean;
+  maxSnippet?: number;
+  maxImagePreview?: ImagePrevSize;
+  maxVideoPreview?: number;
+  noarchive?: boolean;
+  unavailableAfter?: string;
+  noimageindex?: boolean;
+  notranslate?: boolean;
+}
+
+export type ImagePrevSize = 'none' | 'standard' | 'large';
+
+export interface OpenGraphVideoActors {
+  profile: string;
+  role?: string;
+}
+
+export interface OpenGraph {
+  url?: string;
+  type?: string;
+  title?: string;
+  description?: string;
+  images?: ReadonlyArray<OpenGraphMedia>;
+  videos?: ReadonlyArray<OpenGraphMedia>;
+  defaultImageHeight?: number;
+  defaultImageWidth?: number;
+  locale?: string;
+  site_name?: string;
+  profile?: OpenGraphProfile;
+  book?: OpenGraphBook;
+  article?: OpenGraphArticle;
+  video?: OpenGraphVideo;
+}
+
+export interface OpenGraphProfile {
+  firstName?: string;
+  lastName?: string;
+  username?: string;
+  gender?: string;
+}
+
+export interface OpenGraphBook {
+  authors?: ReadonlyArray<string>;
+  isbn?: string;
+  releaseDate?: string;
+  tags?: ReadonlyArray<string>;
+}
+
+export interface OpenGraphArticle {
+  publishedTime?: string;
+  modifiedTime?: string;
+  expirationTime?: string;
+
+  authors?: ReadonlyArray<string>;
+  section?: string;
+  tags?: ReadonlyArray<string>;
+}
+
+export interface OpenGraphVideo {
+  actors?: ReadonlyArray<OpenGraphVideoActors>;
+  directors?: ReadonlyArray<string>;
+  writers?: ReadonlyArray<string>;
+  duration?: number;
+  releaseDate?: string;
+  tags?: ReadonlyArray<string>;
+  series?: string;
+}
+
+export interface Twitter {
+  handle?: string;
+  site?: string;
+  cardType?: string;
+}
+
+interface MobileAlternate {
+  media: string;
+  href: string;
+}
+
+interface LanguageAlternate {
+  hreflang: string;
+  href: string;
+}
+
+interface LinkTag {
+  rel: string;
+  href: string;
+  sizes?: string;
+  media?: string;
+  type?: string;
+  color?: string;
+  as?: string;
+  crossOrigin?: string;
+}
+
+export interface BaseMetaTag {
+  content: string;
+}
+
+export interface HTML5MetaTag extends BaseMetaTag {
+  name: string;
+  property?: undefined;
+  httpEquiv?: undefined;
+}
+
+export interface RDFaMetaTag extends BaseMetaTag {
+  property: string;
+  name?: undefined;
+  httpEquiv?: undefined;
+}
+
+export interface HTTPEquivMetaTag extends BaseMetaTag {
+  httpEquiv: 'content-security-policy' | 'content-type' | 'default-style' | 'x-ua-compatible' | 'refresh';
+  name?: undefined;
+  property?: undefined;
+}
+
+export type MetaTag = HTML5MetaTag | RDFaMetaTag | HTTPEquivMetaTag;