astro-better-cards 0.2.1 → 0.2.3

package/Card.astro

@@ -10,16 +10,25 @@ const {
   comingSoon = false,
   label,
   labelFirst = false,
+  version,
+  badges,
 } = Astro.props;
 ---
 {variant === 'full' && (
   <a href={href} class="border border-slate-300 dark:bg-slate-900 bg-white border-solid block dark:hover:bg-slate-700 dark:border-slate-600 group hover:bg-slate-300 hover:border-indigo-500 dark:hover:border-indigo-600 rounded-lg overflow-hidden">
     {cardImage && <img src={cardImage} class="w-full object-cover" alt="" aria-hidden="true" />}
     <div class="flex items-start gap-x-6 p-5">
-      {icon && <img class:list={["block w-14 shrink-0", darkIcon ? "dark:hidden" : ""]} src={icon} alt="" aria-hidden="true" />}
-      {darkIcon && <img class="hidden dark:block w-14 shrink-0" src={darkIcon} alt="" aria-hidden="true" />}
+      {icon && <img class:list={["block w-14 h-14 object-contain shrink-0", darkIcon ? "dark:hidden" : ""]} src={icon} alt="" aria-hidden="true" />}
+      {darkIcon && <img class="hidden dark:block w-14 h-14 object-contain shrink-0" src={darkIcon} alt="" aria-hidden="true" />}
       <div>
         <p class="font-bold group-hover:text-indigo-500 pb-1 text-xl sm:leading-tight sm:pb-2 sm:text-lg md:text-xl lg:text-2xl 2xl:leading-tight" set:html={title}></p>
+        {(version || (badges && badges.length > 0)) && (
+          <p class="flex items-center gap-1.5 text-xs text-slate-400 dark:text-slate-500 mb-1.5">
+            {version && <span>v{version}</span>}
+            {version && badges && badges.length > 0 && <span>&mdash;</span>}
+            {badges && badges.map((b: string) => <span class={`badge badge-${b}`}>{b}</span>)}
+          </p>
+        )}
         {description && <p class="font-normal lg:leading-4 sm:leading-4 text-sm">{description}</p>}
       </div>
     </div>
@@ -37,7 +46,7 @@ const {
 {variant === 'quickstart' && (
   <a href={href} class={"border border-solid block rounded-lg " + (comingSoon ? "border-slate-800 dark:border-slate-700" : "border-slate-200 dark:bg-slate-900 dark:border-slate-800 bg-white dark:hover:bg-slate-800 dark:hover:border-indigo-500 group hover:bg-slate-100 hover:border-indigo-500")}>
     <div class="flex items-center gap-x-6 px-5 py-3">
-      {icon && <img class={"h-9 shrink-0" + (comingSoon ? " opacity-40" : "")} src={icon} alt="" aria-hidden="true" />}
+      {icon && <img class={"h-9 w-9 object-contain shrink-0" + (comingSoon ? " opacity-40" : "")} src={icon} alt="" aria-hidden="true" />}
       <p class={"font-medium group-hover:text-indigo-500 sm:leading-tight text-sm 1xl:leading-tight " + (comingSoon ? "text-slate-400" : "")} set:html={comingSoon ? title + ' * Coming Soon' : title}></p>
     </div>
   </a>

package/ChildCards.astro

@@ -52,6 +52,10 @@ function isDirectChild(id: string): boolean {
 
 function isGrandchildPage(id: string): boolean {
   const cid = stripExt(id);
+  if (!prefix) {
+    const parts = cid.split('/');
+    return parts.length === 2 && parts[1] !== 'index';
+  }
   if (!cid.startsWith(`${prefix}/`)) return false;
   const rem = cid.slice(prefix.length + 1);
   const parts = rem.split('/');
@@ -59,6 +63,7 @@ function isGrandchildPage(id: string): boolean {
 }
 
 function getSubfolder(id: string): string {
+  if (!prefix) return stripExt(id).split('/')[0];
   return stripExt(id).slice(prefix.length + 1).split('/')[0];
 }
 
@@ -74,6 +79,8 @@ type NavItem = {
   icon?: string | null;
   darkIcon?: string;
   cardImage?: string;
+  version?: string;
+  badges?: string[];
 };
 
 type NavGroup = { title: string; order: number; items: NavItem[] };
@@ -91,13 +98,16 @@ if (depth === 1) {
     icon: p.data.icon ?? null,
     darkIcon: p.data.darkIcon,
     cardImage: p.data.cardImage,
+    version: p.data.version,
+    badges: p.data.badges,
   })));
 } else {
   const grandchildren = valid.filter(p => isGrandchildPage(p.id));
   const subfolderNames = [...new Set(grandchildren.map(p => getSubfolder(p.id)))];
 
   groups = await Promise.all(subfolderNames.map(async sf => {
-    const indexEntry = (pages as any[]).find(p => stripExt(p.id) === `${prefix}/${sf}/index`);
+    const indexPath = prefix ? `${prefix}/${sf}/index` : `${sf}/index`;
+    const indexEntry = (pages as any[]).find(p => stripExt(p.id) === indexPath);
     const sectionTitle: string = indexEntry
       ? await md(indexEntry.data.title)
       : sf.replace(/-/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase());
@@ -116,6 +126,8 @@ if (depth === 1) {
         icon: p.data.icon ?? null,
         darkIcon: p.data.darkIcon,
         cardImage: p.data.cardImage,
+        version: p.data.version,
+        badges: p.data.badges,
       }))),
     };
   }));
@@ -128,7 +140,8 @@ if (depth === 1) {
   <div class="gap-6 mt-6 mb-6 grid grid-cols-1 not-prose lg:grid-cols-2" xmlns="http://www.w3.org/1999/xhtml">
     {items.map(item => (
       <Card href={item.href} title={item.title} description={item.description}
-        icon={item.icon} darkIcon={item.darkIcon} cardImage={item.cardImage} variant="full" />
+        icon={item.icon} darkIcon={item.darkIcon} cardImage={item.cardImage}
+        version={item.version} badges={item.badges} variant="full" />
     ))}
   </div>
 ) : (
@@ -139,7 +152,8 @@ if (depth === 1) {
         <div class="gap-6 grid grid-cols-1 not-prose lg:grid-cols-2" xmlns="http://www.w3.org/1999/xhtml">
           {group.items.map(item => (
             <Card href={item.href} title={item.title} description={item.description}
-              icon={item.icon} darkIcon={item.darkIcon} cardImage={item.cardImage} variant="full" />
+              icon={item.icon} darkIcon={item.darkIcon} cardImage={item.cardImage}
+              version={item.version} badges={item.badges} variant="full" />
           ))}
         </div>
       </Fragment>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-better-cards",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "exports": {
     "./Card.astro": "./Card.astro",