@xexr/blog-platform 1.0.9 → 1.0.10

package/dist/app/blog/[slug]/page.tsx

@@ -86,6 +86,46 @@ function formatReadingTime(seconds: number): string {
   return `${minutes} min read`;
 }
 
+function formatCreditUrl(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+function FeaturedImageCredit({
+  creditText,
+  creditUrl,
+}: {
+  creditText?: string;
+  creditUrl?: string;
+}) {
+  if (!creditText && !creditUrl) {
+    return null;
+  }
+
+  const label = creditText ?? formatCreditUrl(creditUrl ?? "");
+
+  return (
+    <span>
+      Credit:{" "}
+      {creditUrl ? (
+        <a
+          href={creditUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="underline underline-offset-2 transition-colors hover:text-[var(--blog-text-accent)]"
+        >
+          {label}
+        </a>
+      ) : (
+        label
+      )}
+    </span>
+  );
+}
+
 export default function ArticlePage({
   article,
   className,
@@ -109,6 +149,11 @@ export default function ArticlePage({
 
   // Use the featured image URL provided by Bloggy (hosted on Bloggy's domain)
   const imageUrl = article.featuredImage;
+  const hasFeaturedImageMeta = Boolean(
+    article.featuredImageCaption ??
+      article.featuredImageCreditText ??
+      article.featuredImageCreditUrl,
+  );
 
   return (
     <article
@@ -140,6 +185,45 @@ export default function ArticlePage({
         </header>
       )}
 
+      <style>{`
+        .article-content figure > p {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+        }
+
+        .article-content figure figcaption {
+          margin-top: 0.5rem !important;
+          text-align: center;
+          font-size: 0.875rem !important;
+          line-height: 1.35 !important;
+          color: hsl(var(--muted-foreground));
+        }
+
+        .article-content figure figcaption .blog-image-credit {
+          display: block;
+          margin-top: 0.25rem;
+          font-size: 0.75rem;
+          line-height: 1.25;
+          letter-spacing: 0.025em;
+          opacity: 0.8;
+        }
+
+        .article-content figure figcaption > span:not(.blog-image-credit) {
+          margin-left: 0.5rem;
+          padding-left: 0.5rem;
+          border-left: 1px solid var(--blog-accent-border);
+          font-size: 0.75rem;
+          letter-spacing: 0.025em;
+          opacity: 0.8;
+        }
+
+        .article-content figure figcaption a {
+          color: inherit;
+          text-decoration-line: underline;
+          text-underline-offset: 0.18em;
+        }
+      `}</style>
+
       {/* Article Header */}
       <header className="article-header mx-auto mb-6 max-w-4xl space-y-4 text-center sm:mb-8 sm:space-y-6 lg:mb-12 lg:space-y-8">
         {/* Title */}
@@ -237,18 +321,38 @@ export default function ArticlePage({
 
       {/* Featured Image */}
       {imageUrl && (
-        <div className="article-featured-image mx-auto my-8 aspect-[16/9] w-full max-w-4xl overflow-hidden rounded-3xl border border-[var(--blog-accent-border)] shadow-[0_24px_80px_rgb(168_85_247_/_0.14)] sm:my-12 lg:my-16">
-          <Image
-            src={imageUrl}
-            alt={
-              article.featuredImageAlt ?? `Featured image for ${article.title}`
-            }
-            className="h-full w-full object-cover"
-            width={800}
-            height={450}
-            priority
-          />
-        </div>
+        <figure className="article-featured-image mx-auto my-8 w-full max-w-4xl sm:my-12 lg:my-16">
+          <div className="aspect-[16/9] overflow-hidden rounded-3xl border border-[var(--blog-accent-border)] shadow-[0_24px_80px_rgb(168_85_247_/_0.14)]">
+            <Image
+              src={imageUrl}
+              alt={
+                article.featuredImageAlt ??
+                `Featured image for ${article.title}`
+              }
+              className="h-full w-full object-cover"
+              width={800}
+              height={450}
+              priority
+            />
+          </div>
+
+          {hasFeaturedImageMeta && (
+            <figcaption className="text-muted-foreground mt-3 space-y-1 px-2 text-center text-sm leading-relaxed sm:px-0">
+              {article.featuredImageCaption && (
+                <p>{article.featuredImageCaption}</p>
+              )}
+              {(article.featuredImageCreditText ??
+                article.featuredImageCreditUrl) && (
+                <p className="text-xs">
+                  <FeaturedImageCredit
+                    creditText={article.featuredImageCreditText}
+                    creditUrl={article.featuredImageCreditUrl}
+                  />
+                </p>
+              )}
+            </figcaption>
+          )}
+        </figure>
       )}
 
       {/* Article Content */}
@@ -265,7 +369,7 @@ export default function ArticlePage({
 
           <div
             id="article-body"
-            className="prose prose-sm sm:prose-base lg:prose-lg xl:prose-xl prose-gray dark:prose-invert prose-headings:scroll-mt-20 prose-headings:font-light prose-headings:text-balance prose-headings:text-[var(--blog-text-accent)] prose-h1:text-2xl sm:prose-h1:text-3xl lg:prose-h1:text-4xl prose-h2:text-xl sm:prose-h2:text-2xl lg:prose-h2:text-3xl prose-h3:text-lg sm:prose-h3:text-xl lg:prose-h3:text-2xl prose-p:leading-relaxed prose-p:text-pretty prose-a:text-[var(--blog-text-accent)] prose-a:transition-colors hover:prose-a:text-[var(--blog-text-accent-hover)] max-w-none"
+            className="prose prose-sm sm:prose-base lg:prose-lg xl:prose-xl prose-gray dark:prose-invert prose-headings:scroll-mt-20 prose-headings:font-light prose-headings:text-balance prose-headings:text-[var(--blog-text-accent)] prose-h1:text-2xl sm:prose-h1:text-3xl lg:prose-h1:text-4xl prose-h2:text-xl sm:prose-h2:text-2xl lg:prose-h2:text-3xl prose-h3:text-lg sm:prose-h3:text-xl lg:prose-h3:text-2xl prose-p:leading-relaxed prose-p:text-pretty prose-a:text-[var(--blog-text-accent)] prose-a:transition-colors hover:prose-a:text-[var(--blog-text-accent-hover)] [&_figure>p]:!my-0 [&_figcaption]:!mt-2 [&_figcaption]:text-center [&_figcaption]:!text-sm [&_figcaption]:!leading-snug [&_figcaption]:text-muted-foreground [&_figcaption_.blog-image-credit]:mt-1 [&_figcaption_.blog-image-credit]:block [&_figcaption_.blog-image-credit]:text-xs [&_figcaption_.blog-image-credit]:tracking-wide [&_figcaption_.blog-image-credit]:text-muted-foreground/80 [&_figcaption>span:not(.blog-image-credit)]:ml-2 [&_figcaption>span:not(.blog-image-credit)]:border-l [&_figcaption>span:not(.blog-image-credit)]:border-[var(--blog-accent-border)] [&_figcaption>span:not(.blog-image-credit)]:pl-2 [&_figcaption>span:not(.blog-image-credit)]:text-xs [&_figcaption>span:not(.blog-image-credit)]:tracking-wide [&_figcaption>span:not(.blog-image-credit)]:text-muted-foreground/80 max-w-none"
           >
             <MDXRemote
               source={article.content}

package/dist/index.d.mts

@@ -894,6 +894,63 @@ declare const bpArticles: drizzle_orm_sqlite_core.SQLiteTableWithColumns<{
         }, {}, {
             length: number | undefined;
         }>;
+        featuredImageCaption: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "featured_image_caption";
+            tableName: "bp_articles";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number | undefined;
+        }>;
+        featuredImageCreditText: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "featured_image_credit_text";
+            tableName: "bp_articles";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number | undefined;
+        }>;
+        featuredImageCreditUrl: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "featured_image_credit_url";
+            tableName: "bp_articles";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number | undefined;
+        }>;
         authorJson: drizzle_orm_sqlite_core.SQLiteColumn<{
             name: "author_json";
             tableName: "bp_articles";

package/dist/index.d.ts

@@ -894,6 +894,63 @@ declare const bpArticles: drizzle_orm_sqlite_core.SQLiteTableWithColumns<{
         }, {}, {
             length: number | undefined;
         }>;
+        featuredImageCaption: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "featured_image_caption";
+            tableName: "bp_articles";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number | undefined;
+        }>;
+        featuredImageCreditText: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "featured_image_credit_text";
+            tableName: "bp_articles";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number | undefined;
+        }>;
+        featuredImageCreditUrl: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "featured_image_credit_url";
+            tableName: "bp_articles";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number | undefined;
+        }>;
         authorJson: drizzle_orm_sqlite_core.SQLiteColumn<{
             name: "author_json";
             tableName: "bp_articles";