blocks-dusted 0.1.10 → 0.1.12

package/templates/blocks/DDHG-HighlightArc/manifest.json

@@ -0,0 +1,46 @@
+{
+  "type": "block",
+  "name": "DDHG-HighlightArc",
+  "label": "Highlight Archive Cards",
+  "sourceName": "HighlightArchiveCards",
+  "portableName": "DDHG-HighlightArc",
+  "slug": "DDHG-HighlightArc",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/HeatherGrey2025",
+    "originalPath": "src/blocks/HighlightArchiveCards",
+    "originalSlug": "highlightArchiveCards",
+    "originalConfigExport": "HighlightArchiveCards",
+    "originalComponentExport": "HighlightArchiveCardsBlock",
+    "originalInterfaceName": "HighlightArchiveCardsBlock"
+  },
+  "files": [
+    { "from": "Component.tsx", "to": "src/blocks/DDHG-HighlightArc/Component.tsx" },
+    { "from": "config.ts", "to": "src/blocks/DDHG-HighlightArc/config.ts" }
+  ],
+  "dependencies": [{ "name": "lucide-react" }],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    { "path": "src/fields/link.ts", "reason": "Payload config uses the shared link field." },
+    { "path": "src/utilities/ui.ts", "reason": "Component uses the cn utility." }
+  ],
+  "optionalProjectFiles": [
+    { "path": "src/components/Admin/BeforeSidebar", "reason": "Archive bundle admin UI field is currently commented out and can be restored when that bundle is imported." }
+  ],
+  "collectionRegistration": { "enabled": true, "collections": ["Pages", "Posts"] },
+  "renderBlocksRegistration": { "enabled": true },
+  "renderBlocksBehavior": { "wrapperless": false },
+  "pageRouteIntegration": { "required": false, "manualSteps": [] },
+  "manualSteps": [
+    "Review this block together with the future archive bundle before re-enabling the BeforeSidebar admin field.",
+    "Run payload generate:types after schema changes."
+  ],
+  "notes": [
+    "Converted from HeatherGrey2025 HighlightArchiveCards.",
+    "BeforeSidebar is intentionally commented out pending the archive collection bundle review.",
+    "Generated Payload document types were replaced with portable structural types.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDHGHighlightArc",
+  "interfaceName": "DDHGHighlightArc"
+}

package/templates/blocks/DDHG-LogoMarquee/Component.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import React, { useState } from 'react'
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import { cn } from '@/utilities/ui'
+// DDHG TODO: Re-enable after reviewing the project-specific separator/custom CSS bundle.
+// import { Separator } from '@/components/ui/separator'
+// import { extractCustomCSS } from '@/utilities/renderCustomCSS'
+
+const placeholderBlur =
+  'data:image/svg+xml;base64,' +
+  btoa(
+    `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" style="opacity:0"><rect width="100%" height="100%" fill="transparent" /></svg>`,
+  )
+
+type LogoItem = {
+  image?: { url?: string | null; alt?: string | null } | null
+  imageClass?: string | null
+  imageStyle?: React.CSSProperties
+  imageAltClass?: string | null
+}
+
+export type DDHGLogoMarqueeProps = {
+  sectionId?: string | null
+  logos?: LogoItem[] | null
+  speed?: number | null
+  spacing?: number | null
+  priority?: boolean | null
+  showTopDivider?: boolean | null
+  showBottomDivider?: boolean | null
+  containerClass?: string | null
+  itemWidth?: number | null
+  enableCustomCSS?: boolean | null
+  customCSS?: Array<{ blockType?: string; css?: string }> | string | null
+}
+
+const LogoImage: React.FC<{
+  src: string
+  alt?: string | null
+  customClass?: string | null
+  imageStyle?: React.CSSProperties
+  priority?: boolean
+}> = ({ src, alt, customClass, imageStyle, priority = false }) => {
+  const [imageError, setImageError] = useState(false)
+  const imageSrc = !src || imageError ? placeholderBlur : src
+  return (
+    <Image
+      src={imageSrc}
+      alt={alt || 'Logo'}
+      width={300}
+      height={300}
+      priority={priority}
+      className={customClass || ''}
+      style={{
+        objectFit: 'contain',
+        ...(imageStyle && typeof imageStyle === 'object' ? imageStyle : {}),
+      }}
+      onError={() => setImageError(true)}
+      placeholder="blur"
+      blurDataURL={placeholderBlur}
+    />
+  )
+}
+
+export const DDHGLogoMarquee: React.FC<DDHGLogoMarqueeProps> = ({
+  sectionId,
+  logos,
+  speed = 10,
+  spacing = 32,
+  priority = false,
+  showTopDivider = false,
+  showBottomDivider = false,
+  containerClass = 'overflow-hidden py-8 bg-transparent',
+  enableCustomCSS = false,
+  customCSS,
+  itemWidth,
+}) => {
+  const validLogos = Array.isArray(logos) ? logos : []
+  if (validLogos.length === 0) return null
+  const calculatedItemWidth = itemWidth || 100
+  const totalWidth = validLogos.length * (calculatedItemWidth + (spacing || 0))
+
+  // DDHG TODO: Re-enable with extractCustomCSS when that bundle is reviewed.
+  // const extractedCSS = enableCustomCSS && Array.isArray(customCSS)
+  //   ? extractCustomCSS(customCSS)
+  //   : typeof customCSS === 'string'
+  //     ? customCSS
+  //     : ''
+  const extractedCSS = ''
+  void enableCustomCSS
+  void customCSS
+  void showTopDivider
+  void showBottomDivider
+
+  const renderSet = (suffix = '') =>
+    validLogos.map((logo, index) => (
+      <div
+        key={`logo-${index}${suffix}`}
+        className="marque-image-container shrink-0 flex flex-col items-center justify-center"
+        style={{
+          marginRight: `${spacing || 0}px`,
+          ...(itemWidth
+            ? { width: `${calculatedItemWidth}px` }
+            : { minWidth: `${calculatedItemWidth}px` }),
+        }}
+      >
+        <LogoImage
+          src={logo.image?.url || placeholderBlur}
+          alt={logo.image?.alt}
+          customClass={logo.imageClass}
+          imageStyle={logo.imageStyle}
+          priority={Boolean(priority)}
+        />
+        <p className={cn('text-base text-center', logo.imageAltClass)}>{logo.image?.alt || null}</p>
+      </div>
+    ))
+
+  return (
+    <>
+      {/* DDHG TODO: Re-enable optional Separator rendering after bundle review. */}
+      {/* {showTopDivider && <Separator gradient={true} className="border-seperator" />} */}
+      <div
+        id={sectionId ?? undefined}
+        className="logo-marquee-block relative mx-auto max-w-screen overflow-x-clip bg-stone-300/20 dark:bg-stone-900/10 top-[20vh]"
+      >
+        {extractedCSS && <style dangerouslySetInnerHTML={{ __html: extractedCSS }} />}
+        <motion.div
+          className={`${containerClass} flex py-4`}
+          animate={{ x: [0, -totalWidth] }}
+          transition={{ repeat: Infinity, duration: speed || 10, ease: 'linear' }}
+          style={{ width: `${totalWidth * 2}px` }}
+        >
+          {renderSet()}
+          {renderSet('-duplicate')}
+        </motion.div>
+      </div>
+      {/* {showBottomDivider && <Separator gradient={true} className="border-seperator opacity-20" />} */}
+    </>
+  )
+}
+
+export default DDHGLogoMarquee

package/templates/blocks/DDHG-LogoMarquee/config.ts

@@ -0,0 +1,154 @@
+import type { Block } from 'payload'
+// DDHG TODO: Re-enable with the project-specific CustomCssBlock bundle.
+// import { CustomCSSBlock } from '@/blocks/CustomCssBlock/config'
+
+export const DDHGLogoMarquee: Block = {
+  slug: 'DDHG-LogoMarquee',
+  interfaceName: 'DDHGLogoMarquee',
+  labels: { singular: 'Image Marquee', plural: 'Image Marquee' },
+  fields: [
+    {
+      name: 'sectionId',
+      type: 'text',
+      label: 'Section ID',
+      required: false,
+      admin: { description: 'Optional anchor ID for linking and scroll targets.' },
+    },
+    {
+      type: 'collapsible',
+      label: 'Block Settings',
+      admin: { initCollapsed: true, className: 'custom-css-class' },
+      fields: [
+        {
+          type: 'collapsible',
+          label: 'Container Class',
+          admin: { initCollapsed: true, className: 'custom-css-class' },
+          fields: [
+            {
+              name: 'containerClass',
+              label: false,
+              type: 'text',
+              required: false,
+              admin: { description: 'Override the default container class.' },
+            },
+          ],
+        },
+        {
+          type: 'collapsible',
+          label: 'Marquee Settings',
+          admin: { initCollapsed: true, className: 'custom-group-class' },
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'speed',
+                  type: 'number',
+                  label: 'Scroll Speed (seconds)',
+                  defaultValue: 10,
+                  required: true,
+                  admin: { width: '50%' },
+                },
+                {
+                  name: 'spacing',
+                  type: 'number',
+                  label: 'Spacing between images (px)',
+                  defaultValue: 32,
+                  required: true,
+                  admin: { width: '50%' },
+                },
+              ],
+            },
+          ],
+        },
+        { name: 'priority', type: 'checkbox', label: 'High Priority Loading', defaultValue: false },
+        {
+          type: 'collapsible',
+          label: 'Dividers',
+          admin: { initCollapsed: true, className: 'custom-group-class' },
+          fields: [
+            { name: 'showTopDivider', type: 'checkbox', label: 'Show Top Divider' },
+            { name: 'showBottomDivider', type: 'checkbox', label: 'Show Bottom Divider' },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'logoImages',
+      type: 'upload',
+      relationTo: 'media',
+      hasMany: true,
+      required: false,
+      filterOptions: { mimeType: { contains: 'image' } },
+      hooks: {
+        beforeChange: [
+          ({ value, siblingData }) => {
+            if (!Array.isArray(value) || value.length === 0) return value
+            const existingLogos = Array.isArray((siblingData as any)?.logos)
+              ? (siblingData as any).logos
+              : []
+            const normalizeImageId = (imageValue: unknown): number | string | undefined => {
+              if (typeof imageValue === 'number' || typeof imageValue === 'string')
+                return imageValue
+              if (imageValue && typeof imageValue === 'object' && 'id' in (imageValue as any)) {
+                const maybeId = (imageValue as any).id
+                if (typeof maybeId === 'number' || typeof maybeId === 'string') return maybeId
+              }
+              return undefined
+            }
+            const existingIds = new Set(
+              existingLogos
+                .map((row: any) => normalizeImageId(row?.image))
+                .filter((id: any) => id !== undefined),
+            )
+            const newRows = value
+              .map((id) => normalizeImageId(id))
+              .filter((id): id is number | string => id !== undefined)
+              .filter((id) => !existingIds.has(id))
+              .map((id) => ({ image: id, imageAltClass: 'hidden', imageClass: '' }))
+            ;(siblingData as any).logos = [...existingLogos, ...newRows]
+            return []
+          },
+        ],
+      },
+    },
+    {
+      name: 'logos',
+      type: 'array',
+      label: 'Images',
+      labels: { singular: 'Image', plural: 'Images' },
+      fields: [
+        {
+          name: 'image',
+          type: 'upload',
+          relationTo: 'media',
+          required: false,
+          filterOptions: { mimeType: { contains: 'image' } },
+        },
+        {
+          type: 'collapsible',
+          label: 'Alt Text Class',
+          admin: { initCollapsed: true, className: 'custom-css-class' },
+          fields: [
+            {
+              name: 'imageAltClass',
+              label: false,
+              type: 'text',
+              required: false,
+              defaultValue: 'hidden',
+            },
+          ],
+        },
+        {
+          type: 'collapsible',
+          label: 'Image Class',
+          admin: { initCollapsed: true, className: 'custom-css-class' },
+          fields: [{ name: 'imageClass', label: false, type: 'text', required: false }],
+        },
+      ],
+    },
+    // DDHG TODO: Re-enable custom CSS support after reviewing the CustomCssBlock bundle.
+    // { name: 'enableCustomCSS', type: 'checkbox', label: 'Inject Custom CSS', defaultValue: false },
+    // { name: 'customCSS', type: 'blocks', label: 'Custom CSS', blocks: [CustomCSSBlock], maxRows: 1, required: false, admin: { initCollapsed: true, className: 'for-devs-class custom-css-class', condition: (_, siblingData) => Boolean(siblingData.enableCustomCSS) } },
+  ],
+}

package/templates/blocks/DDHG-LogoMarquee/manifest.json

@@ -0,0 +1,39 @@
+{
+  "type": "block",
+  "name": "DDHG-LogoMarquee",
+  "label": "Logo Marquee",
+  "sourceName": "LogoMarquee",
+  "portableName": "DDHG-LogoMarquee",
+  "slug": "DDHG-LogoMarquee",
+  "version": "0.0.1",
+  "source": { "repo": "Hadizainal/HeatherGrey2025", "originalPath": "src/blocks/LogoMarquee", "originalSlug": "logoMarquee", "originalConfigExport": "LogoMarquee", "originalComponentExport": "LogoMarquee", "originalInterfaceName": "LogoMarqueeBlock" },
+  "files": [
+    { "from": "Component.tsx", "to": "src/blocks/DDHG-LogoMarquee/Component.tsx" },
+    { "from": "config.ts", "to": "src/blocks/DDHG-LogoMarquee/config.ts" }
+  ],
+  "dependencies": [{ "name": "framer-motion" }],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    { "path": "src/utilities/ui.ts", "reason": "Component uses the cn utility." }
+  ],
+  "optionalProjectFiles": [
+    { "path": "src/blocks/CustomCssBlock/config.ts", "reason": "Custom CSS block support is currently commented out pending deeper review." },
+    { "path": "src/components/ui/separator.tsx", "reason": "Optional divider rendering is currently commented out pending deeper review." },
+    { "path": "src/utilities/renderCustomCSS.ts", "reason": "Custom CSS extraction is currently commented out pending deeper review." }
+  ],
+  "collectionRegistration": { "enabled": true, "collections": ["Pages", "Posts"] },
+  "renderBlocksRegistration": { "enabled": true },
+  "renderBlocksBehavior": { "wrapperless": false },
+  "pageRouteIntegration": { "required": false, "manualSteps": [] },
+  "manualSteps": [
+    "Review CustomCssBlock, Separator and renderCustomCSS together before re-enabling those commented integrations.",
+    "Run payload generate:types after schema changes."
+  ],
+  "notes": [
+    "Converted from HeatherGrey2025 LogoMarquee.",
+    "Project-specific custom CSS and separator integrations are intentionally commented out pending review.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDHGLogoMarquee",
+  "interfaceName": "DDHGLogoMarquee"
+}

package/templates/blocks/DDHG-NavCodeGrid/Component.tsx

@@ -0,0 +1,227 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import * as LucideIcons from 'lucide-react'
+import React from 'react'
+
+import { getMediaUrl } from '@/utilities/getMediaUrl'
+import { cn } from '@/utilities/ui'
+
+type PortableDoc = {
+  slug?: string | null
+  breadcrumbs?: Array<{ url?: string | null }> | null
+  [key: string]: unknown
+}
+
+type Media = {
+  url?: string | null
+  alt?: string | null
+  [key: string]: unknown
+}
+
+type LinkReference =
+  | { relationTo: 'pages'; value: number | PortableDoc }
+  | { relationTo: 'posts'; value: number | PortableDoc }
+  | { relationTo: 'projects'; value: number | PortableDoc }
+  | { relationTo: 'thoughts'; value: number | PortableDoc }
+
+type NavCodeGridLink = {
+  type?: 'reference' | 'custom' | null
+  reference?: LinkReference | null
+  url?: string | null
+  label?: string | null
+  newTab?: boolean | null
+  icon?: string | null
+  iconPosition?: 'before' | 'after' | null
+  customIcon?: number | Media | null
+} | null
+
+export type DDHGNavCodeGridItem = {
+  id?: string | null
+  code?: string | null
+  link?: NavCodeGridLink
+}
+
+export type DDHGNavCodeGridProps = {
+  items?: DDHGNavCodeGridItem[] | null
+  defaultHref?: string | null
+  containerClassName?: string | null
+  gridClassName?: string | null
+  cellClassName?: string | null
+  showIcons?: boolean | null
+}
+
+const getPageURLFromDoc = (doc: PortableDoc | number): string | null => {
+  if (typeof doc === 'number') return null
+  const crumbs = Array.isArray(doc?.breadcrumbs) ? doc.breadcrumbs : []
+  if (crumbs.length) {
+    const last = crumbs[crumbs.length - 1]
+    if (typeof last?.url === 'string' && last.url) return last.url
+  }
+  const slug = doc?.slug
+  if (!slug || slug === 'home') return '/'
+  return slug.startsWith('/') ? slug : `/${slug}`
+}
+
+const getDocumentSlug = (doc: PortableDoc | number): string | null => {
+  if (typeof doc === 'number') return null
+  return doc?.slug || null
+}
+
+const getCollectionPath = (relationTo: LinkReference['relationTo']): string => {
+  if (relationTo === 'posts') return 'internal-docs'
+  if (relationTo === 'thoughts') return 'thoughts'
+  if (relationTo === 'projects') return 'archives'
+  return ''
+}
+
+const isExternalUrl = (href: string): boolean =>
+  href.startsWith('http://') ||
+  href.startsWith('https://') ||
+  href.startsWith('mailto:') ||
+  href.startsWith('tel:')
+
+const resolveHref = (link: NavCodeGridLink, defaultHref = '/archive'): string => {
+  if (!link) return defaultHref
+  if (link.type === 'custom' && link.url) return link.url
+  if (link.type === 'reference' && link.reference?.value) {
+    const { relationTo, value } = link.reference
+    if (relationTo === 'pages') return getPageURLFromDoc(value) || defaultHref
+    const slug = getDocumentSlug(value)
+    if (!slug) return defaultHref
+    const basePath = getCollectionPath(relationTo)
+    return basePath ? `/${basePath}/${slug}` : `/${slug}`
+  }
+  return defaultHref
+}
+
+const renderIcon = (link: NavCodeGridLink, showIcons = true) => {
+  if (!showIcons || !link) return null
+
+  if (link.customIcon && typeof link.customIcon === 'object') {
+    const iconUrl = getMediaUrl(link.customIcon.url)
+    if (iconUrl) {
+      return (
+        <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center overflow-hidden">
+          <Image
+            src={iconUrl}
+            alt={link.customIcon.alt || ''}
+            width={14}
+            height={14}
+            className="m-0 block h-full w-full object-contain"
+          />
+        </span>
+      )
+    }
+  }
+
+  if (link.icon) {
+    const LucideIcon = LucideIcons[link.icon as keyof typeof LucideIcons] as
+      React.ComponentType<{ className?: string }> | undefined
+    if (LucideIcon) {
+      return (
+        <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+          <LucideIcon className="h-3.5 w-3.5" />
+        </span>
+      )
+    }
+  }
+
+  return null
+}
+
+const getDelayClass = (index: number) => {
+  const delay = Math.min(index * 40, 320)
+  return `[transition-delay:${delay}ms]`
+}
+
+export const DDHGNavCodeGrid: React.FC<DDHGNavCodeGridProps> = ({
+  items,
+  defaultHref = '/archive',
+  containerClassName,
+  gridClassName,
+  cellClassName,
+  showIcons = true,
+}) => {
+  if (!Array.isArray(items) || items.length === 0) return null
+
+  return (
+    <div className={cn('w-full max-w-7xl mx-auto', containerClassName, 'pt-24')}>
+      <div
+        className={cn(
+          'grid grid-cols-2 overflow-hidden bg-stone-100/50 dark:bg-stone-900/50 sm:grid-cols-4 !gap-0 shadow-lg',
+          gridClassName,
+        )}
+      >
+        {items.map((item, index) => {
+          const link = item.link || null
+          const href = resolveHref(link, defaultHref || '/archive')
+          const label = link?.label || item.code || 'Archive'
+          const icon = renderIcon(link, Boolean(showIcons))
+          const iconPosition = link?.iconPosition || 'before'
+          const target = link?.newTab ? '_blank' : undefined
+          const rel = link?.newTab ? 'noopener noreferrer' : undefined
+          const className = cn(
+            'menu-cell-hover group relative flex items-center justify-center gap-2 bg-stone-200/50 py-2.5 text-xs font-normal uppercase tracking-[0.1em] text-sm [text-shadow:0px_2px_4px_#ffffff45] backdrop-blur-2xl transition-all duration-300 hover:-translate-y-0.5 hover:bg-stone-200/80 hover:text-stone-700 dark:bg-stone-900/50 dark:text-stone-200 dark:hover:bg-stone-800/70 sm:py-3 sm:text-xs md:py-4 hover:shadow-2xl',
+            'border-r border-b border-border',
+            (index + 1) % 4 === 0 ? 'sm:border-r-0' : ' ',
+            index >= 4 ? 'sm:border-b-0' : '',
+            (index + 1) % 2 === 0 ? 'border-r-0' : 'border-r',
+            index >= 6 ? 'border-b-0' : 'border-b',
+            getDelayClass(index),
+            cellClassName,
+          )
+
+          const content = (
+            <>
+              {icon && iconPosition === 'before' && icon}
+              <span className="relative z-10">{label}</span>
+              {icon && iconPosition === 'after' && icon}
+            </>
+          )
+
+          if (isExternalUrl(href)) {
+            return (
+              <a
+                key={item.id || `${label}-${index}`}
+                href={href}
+                target={target}
+                rel={rel}
+                className={className}
+                style={{
+                  fontFamily: "'Space Grotesk', sans-serif",
+                  fontWeight: 400,
+                  position: 'relative',
+                  textDecoration: 'none',
+                }}
+              >
+                {content}
+              </a>
+            )
+          }
+
+          return (
+            <Link
+              key={item.id || `${label}-${index}`}
+              href={href}
+              target={target}
+              rel={rel}
+              className={className}
+              style={{
+                fontFamily: "'Space Grotesk', sans-serif",
+                fontWeight: 400,
+                position: 'relative',
+                textDecoration: 'none',
+              }}
+            >
+              {content}
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default DDHGNavCodeGrid

package/templates/blocks/DDHG-NavCodeGrid/config.ts

@@ -0,0 +1,64 @@
+import type { Block } from 'payload'
+
+import { link } from '@/fields/link'
+
+export const DDHGNavCodeGrid: Block = {
+  slug: 'DDHG-NavCodeGrid',
+  interfaceName: 'DDHGNavCodeGrid',
+  labels: {
+    singular: 'Nav Code Grid',
+    plural: 'Nav Code Grids',
+  },
+  fields: [
+    {
+      name: 'items',
+      type: 'array',
+      label: 'Navigation Items',
+      minRows: 1,
+      fields: [
+        {
+          name: 'code',
+          type: 'text',
+          label: 'Fallback Code / Label',
+        },
+        link({
+          overrides: {
+            name: 'link',
+            label: 'Link',
+          },
+          disableLabel: false,
+          appearances: false,
+        }),
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'defaultHref',
+          type: 'text',
+          label: 'Default href',
+          defaultValue: '/archive',
+          admin: { width: '50%' },
+        },
+        {
+          name: 'showIcons',
+          type: 'checkbox',
+          label: 'Show icons',
+          defaultValue: true,
+          admin: { width: '50%' },
+        },
+      ],
+    },
+    {
+      type: 'collapsible',
+      label: 'Classes',
+      admin: { initCollapsed: true },
+      fields: [
+        { name: 'containerClassName', type: 'text', label: 'Container class' },
+        { name: 'gridClassName', type: 'text', label: 'Grid class' },
+        { name: 'cellClassName', type: 'text', label: 'Cell class' },
+      ],
+    },
+  ],
+}