fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/typography/typography.astro

@@ -0,0 +1,180 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props<Tag extends HTMLTag> = Polymorphic<{
+  as: Tag
+  size?: "sm" | "default" | "lg"
+}>
+
+const {
+  as: Tag = "div",
+  class: className,
+  size = "default",
+  ...props
+} = Astro.props
+---
+
+<Tag
+  data-slot="typography"
+  data-size={size}
+  class={cn("text-foreground text-base", className)}
+  {...props}
+>
+  <slot />
+</Tag>
+
+<style is:global>
+  @reference "@/styles/global.css";
+
+  [data-slot="typography"]
+    > :is(
+      p,
+      blockquote,
+      ul,
+      ol,
+      table,
+      [data-slot="typography-lead"],
+      [data-slot="typography-p"],
+      [data-slot="typography-blockquote"],
+      [data-slot="typography-list"],
+      [data-slot="typography-table-container"],
+      div,
+      section,
+      article,
+      aside,
+      nav,
+      figure,
+      details,
+      .docs-code-block,
+      pre,
+      small,
+      dl,
+      img,
+      picture,
+      video,
+      iframe
+    ):not(:first-child) {
+    @apply mt-6;
+  }
+
+  [data-slot="typography"]
+    > :is(h2, [data-slot="typography-h2"]):not(:first-child) {
+    @apply mt-10;
+  }
+
+  [data-slot="typography"]
+    > :is(h3, h4, [data-slot="typography-h3"], [data-slot="typography-h4"]):not(
+      :first-child
+    ) {
+    @apply mt-8;
+  }
+
+  [data-slot="typography"]
+    > :is(
+      h1,
+      h2,
+      h3,
+      h4,
+      [data-slot="typography-h1"],
+      [data-slot="typography-h2"],
+      [data-slot="typography-h3"],
+      [data-slot="typography-h4"]
+    )
+    + :is(
+      p,
+      blockquote,
+      ul,
+      ol,
+      table,
+      [data-slot="typography-lead"],
+      [data-slot="typography-p"],
+      [data-slot="typography-blockquote"],
+      [data-slot="typography-list"],
+      [data-slot="typography-table-container"],
+      div,
+      section,
+      article,
+      aside,
+      nav,
+      figure,
+      details,
+      .docs-code-block,
+      pre,
+      small,
+      dl,
+      img,
+      picture,
+      video,
+      iframe
+    ) {
+    @apply mt-4;
+  }
+
+  [data-slot="typography"] > hr {
+    @apply border-border my-8;
+  }
+
+  [data-slot="typography"] > pre {
+    @apply border-border bg-muted/60 overflow-x-auto rounded-xl border p-4 text-sm;
+  }
+
+  [data-slot="typography"] > .docs-code-block {
+    @apply border-border bg-muted/60 relative overflow-hidden rounded-xl border;
+  }
+
+  [data-slot="typography"] > .docs-code-block > pre,
+  [data-slot="typography"] > .docs-code-block > pre.astro-code {
+    @apply m-0 rounded-none border-0 bg-transparent! p-4 pr-14 text-sm leading-(--text-sm--line-height);
+    font-family: var(--font-mono);
+  }
+
+  [data-slot="typography"] > .docs-code-block > pre.astro-code code {
+    @apply text-sm leading-(--text-sm--line-height) text-(--shiki-light,var(--foreground))!;
+  }
+
+  .dark [data-slot="typography"] > .docs-code-block > pre.astro-code code {
+    @apply text-(--shiki-dark,var(--foreground))!;
+  }
+
+  .dark
+    [data-slot="typography"]
+    > .docs-code-block
+    > pre.astro-code
+    span[style*="--shiki-dark"] {
+    @apply font-(--shiki-dark-font-weight,inherit)! text-(--shiki-dark)! [font-style:var(--shiki-dark-font-style,inherit)]! [text-decoration:var(--shiki-dark-text-decoration,inherit)]!;
+  }
+
+  [data-slot="typography"] > .docs-code-block > .docs-code-copy {
+    @apply border-border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground absolute top-3 right-3 z-10 inline-flex size-8 items-center justify-center rounded-md border shadow-sm transition-colors;
+  }
+
+  [data-slot="typography"] > .docs-code-block svg {
+    @apply size-4;
+  }
+
+  [data-slot="typography"] > small {
+    @apply block leading-none font-medium;
+  }
+
+  [data-slot="typography"] > small {
+    @apply text-sm;
+  }
+
+  [data-slot="typography"] > pre.astro-code {
+    @apply border-border bg-muted/60! rounded-xl border p-4 text-sm leading-(--text-sm--line-height);
+  }
+
+  [data-slot="typography"] > pre.astro-code code {
+    @apply text-inherit!;
+  }
+
+  .dark [data-slot="typography"] > pre.astro-code {
+    @apply text-(--shiki-dark,var(--foreground))!;
+  }
+
+  .dark [data-slot="typography"] > pre.astro-code span[style*="--shiki-dark"] {
+    @apply font-(--shiki-dark-font-weight,inherit)! text-(--shiki-dark)! [font-style:var(--shiki-dark-font-style,inherit)]! [text-decoration:var(--shiki-dark-text-decoration,inherit)]!;
+  }
+</style>

package/src/components/ui/video/index.ts

@@ -0,0 +1 @@
+export { default as Video } from "./video.astro"

package/src/components/ui/video/video.astro

@@ -0,0 +1,73 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = Omit<HTMLAttributes<"iframe">, "src"> & {
+  src?: string
+  title?: string
+}
+
+const {
+  class: className,
+  src,
+  title = "Embedded video",
+  ...props
+} = Astro.props
+
+const getVideoId = (value?: string) => {
+  if (!value) return undefined
+
+  try {
+    const url = new URL(value)
+    const host = url.hostname.replace(/^www\./, "")
+
+    if (host === "youtube.com" && url.pathname === "/watch") {
+      return url.searchParams.get("v") ?? undefined
+    }
+
+    if (host === "youtube.com" && url.pathname.startsWith("/shorts/")) {
+      return url.pathname.split("/")[2]
+    }
+
+    if (host === "youtu.be") {
+      return url.pathname.slice(1)
+    }
+  } catch {
+    return undefined
+  }
+}
+
+const videoId = getVideoId(src)
+const embedSrc = videoId
+  ? `https://www.youtube-nocookie.com/embed/${videoId}`
+  : undefined
+const thumbnailSrc = videoId
+  ? `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`
+  : undefined
+const srcdoc =
+  embedSrc && thumbnailSrc
+    ? `<style>*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:grid;place-items:center;background:#000;font-family:system-ui,sans-serif}a{position:absolute;inset:0;display:grid;place-items:center;color:white;text-decoration:none}img{width:100%;height:100%;object-fit:cover}span{position:absolute;display:grid;place-items:center;width:4.5rem;height:3.25rem;border-radius:1rem;background:rgb(0 0 0 / .72);box-shadow:0 10px 30px rgb(0 0 0 / .25);transition:background .15s ease}span:before{content:"";margin-left:.25rem;border-top:.7rem solid transparent;border-bottom:.7rem solid transparent;border-left:1.1rem solid currentColor}a:hover span{background:#ff0033}</style><a href="${embedSrc}?autoplay=1" aria-label="Play video"><img src="${thumbnailSrc}" alt="" /><span></span></a>`
+    : undefined
+const isShort = src?.includes("/shorts/")
+---
+
+{
+  embedSrc && (
+    <iframe
+      src={embedSrc}
+      srcdoc={srcdoc}
+      title={title}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowfullscreen
+      loading="lazy"
+      referrerpolicy="strict-origin-when-cross-origin"
+      class={cn(
+        "bg-muted w-full rounded-lg border",
+        isShort ? "aspect-9/16 max-w-xs" : "aspect-video",
+        className
+      )}
+      {...props}
+    />
+  )
+}

package/src/lib/integration.ts

@@ -1,26 +1,65 @@
-import tailwind from '@astrojs/tailwind'
-import vue from '@astrojs/vue'
-import type { AstroIntegration } from 'astro'
+import type { AstroIntegration } from "astro"
+import sitemap from "@astrojs/sitemap"
+import tailwindcss from "@tailwindcss/vite"
+import favicons from "astro-favicons"
+import robotsTxt from "astro-robots-txt"
 
-interface Config {}
+export interface Options {
+  site: string
+  name: string
+  i18n: {
+    defaultLocale: string
+    locales: string[]
+  }
+  favicon: string
+}
 
-export default function fulldevIntegration(config?: Partial<Config> | undefined): AstroIntegration {
+export default function (options: Options): AstroIntegration {
   return {
-    name: '/integration',
+    name: "starter/ui",
     hooks: {
-      'astro:config:setup': async ({ updateConfig, injectScript }) => {
-        // Update the config with required integrations
+      "astro:config:setup": ({ updateConfig }) => {
         updateConfig({
+          site: options.site,
+          image: {
+            responsiveStyles: true,
+            breakpoints: [640, 960, 1280, 1600, 1920],
+          },
+          prefetch: {
+            prefetchAll: false,
+          },
+          i18n: {
+            routing: {
+              fallbackType: "redirect",
+              prefixDefaultLocale: false,
+              redirectToDefaultLocale: false,
+            },
+            ...options.i18n,
+          },
           integrations: [
-            vue(),
-            tailwind({
-              applyBaseStyles: false,
+            robotsTxt(),
+            sitemap({
+              changefreq: "weekly",
+              lastmod: new Date(),
+              i18n: {
+                defaultLocale: options.i18n?.defaultLocale,
+                locales: Object.fromEntries(
+                  options.i18n.locales.map((locale) => [locale, locale])
+                ),
+              },
+            }),
+            favicons({
+              input: {
+                favicons: [options.favicon],
+              },
+              name: options.name,
+              short_name: options.name,
             }),
           ],
+          vite: {
+            plugins: [tailwindcss()],
+          },
         })
-
-        // Inject the global CSS file
-        injectScript('page-ssr', `import "@/styles/global.css";`)
       },
     },
   }

package/src/lib/pages.ts

@@ -0,0 +1,85 @@
+import { getCollection, type CollectionEntry } from "astro:content"
+
+type Page = CollectionEntry<"pages">
+
+export type PageSearchItem = {
+  label: string
+  href: string
+  title: string
+  path: string
+  description: string
+  group: string
+}
+
+export type PageBreadcrumbItem = {
+  label: string
+  href: string
+}
+
+export const normalizePath = (path: string) => {
+  if (path === "/") return path
+
+  return path.replace(/\/$/, "")
+}
+
+export const getPageHref = (page: Page) =>
+  page.id === "index" ? "/" : `/${page.id}/`
+
+export const formatSlug = (slug: string) =>
+  slug
+    .split("-")
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ")
+
+const getPageSearchGroup = (href: string) => {
+  const [slug] = href.split("/").filter(Boolean)
+
+  return slug ? formatSlug(slug) : "Overview"
+}
+
+export const getPageSearchItems = async (): Promise<PageSearchItem[]> => {
+  const pages = await getCollection("pages")
+
+  return pages
+    .map((page) => ({
+      label: page.data.title,
+      href: getPageHref(page),
+      title: page.data.title,
+      path: getPageHref(page),
+      description: page.data.description,
+      group: getPageSearchGroup(getPageHref(page)),
+    }))
+    .sort((a, b) => a.label.localeCompare(b.label))
+}
+
+export const getPageBreadcrumbItems = async (
+  pathname: string
+): Promise<PageBreadcrumbItem[]> => {
+  const currentPath = normalizePath(pathname)
+  const pages = await getCollection("pages")
+  const pageTitlesByHref = new Map(
+    pages.map((page) => [getPageHref(page), page.data.title])
+  )
+  const homeLink = {
+    label: pageTitlesByHref.get("/") ?? "Home",
+    href: "/",
+  }
+
+  if (currentPath === "/") return [homeLink]
+
+  return [
+    homeLink,
+    ...currentPath
+      .split("/")
+      .filter(Boolean)
+      .map((slug, index, slugs) => {
+        const href = `/${slugs.slice(0, index + 1).join("/")}/`
+
+        return {
+          label: pageTitlesByHref.get(href) ?? formatSlug(slug),
+          href,
+        }
+      }),
+  ]
+}

package/src/lib/utils.ts

@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))