@decocms/apps-blog 7.52.1 → 7.54.0

package/src/sections/blocks/Video.tsx

@@ -0,0 +1,39 @@
+export type Props = {
+  url: string;
+  caption?: string;
+};
+
+function resolveEmbedSrc(raw: string): string | null {
+  const ytMatch = raw.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`;
+
+  const vimeoMatch = raw.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
+
+  // Reject anything that didn't match a trusted provider.
+  return null;
+}
+
+export default function Video({ url, caption }: Props) {
+  const src = resolveEmbedSrc(url ?? "");
+
+  if (!src) return null;
+
+  return (
+    <figure className="my-8">
+      <div className="relative aspect-video overflow-hidden bg-alt">
+        <iframe
+          src={src}
+          className="absolute inset-0 w-full h-full border-0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          loading="lazy"
+          title={caption ?? "Video"}
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-sm text-tertiary text-center mt-3 italic">{caption}</figcaption>
+      )}
+    </figure>
+  );
+}

package/src/static/css.ts

@@ -0,0 +1,178 @@
+export const CSS = `
+  .deco-post-preview{
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  @media (min-width: 640px){
+    .deco-post-preview{
+      max-width: 640px
+    }
+  }
+  
+  @media (min-width: 768px){
+    .deco-post-preview{
+      max-width: 768px
+    }
+  }
+
+  .deco-post-preview {
+    font-family: 'Albert sans', sans-serif;
+    color: #66736C;
+  }
+  
+  .deco-post-preview p {
+    line-height: 1.75rem;
+    margin-bottom: 1rem;
+  }
+
+  .deco-post-preview h1,
+  .deco-post-preview h2,
+  .deco-post-preview h3,
+  .deco-post-preview h4,
+  .deco-post-preview h5,
+  .deco-post-preview h6 {
+      color: #161616;
+  }
+  
+  .deco-post-preview h1 {
+    font-size: 2.25rem;
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+    line-height: 2.5rem;
+  }
+  
+  .deco-post-preview h2 {
+    font-size: 1.5rem;
+    margin-top: 2rem;
+    margin-bottom: 0.75rem;
+    line-height: 2rem;
+  }
+  
+  .deco-post-preview h3 {
+    font-size: 1.25rem;
+    margin-top: 1.75rem;
+    margin-bottom: 0.5rem;
+    line-height: 1.75rem;
+  }
+  
+  .deco-post-preview h4 {
+    font-size: 1rem;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    line-height: 1.5rem;
+  }
+  
+  .deco-post-preview h5 {
+    font-size: 0.875rem;
+    margin-top: 1.25rem;
+    margin-bottom: 0.25rem;
+    line-height: 1.25rem;
+  }
+  
+  .deco-post-preview h6 {
+    font-size: 0.75rem;
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
+    line-height: 1rem;
+  }
+  
+  .deco-post-preview time,
+  .deco-post-preview address {
+    font-size: 0.875rem;
+    color: #555;
+  }
+  
+  .deco-post-preview a[rel="tag"] {
+    background-color: #f0f0f0;
+    color: #333;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+  }
+  
+  .deco-post-preview a {
+    color: #007bff;
+    text-decoration: none;
+  }
+  
+  .deco-post-preview a:hover {
+    color: #0056b3;
+  }
+  
+  .deco-post-preview pre {
+    background-color: #f4f4f4;
+    border: 1px solid #ddd;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+  }
+  
+  .deco-post-preview code {
+    font-family: 'Courier New', monospace;
+    background-color: #f4f4f4;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+  }
+  
+  .deco-post-preview ul,
+  .deco-post-preview ol {
+    margin-left: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .decopost-preview ul {
+    list-style-type: disc;
+  }
+
+  .deco-post-preview ol {
+      list-style-type: decimal;
+  }
+  
+  .deco-post-preview li {
+    margin-bottom: 0.25rem;
+  }
+  
+  .deco-post-preview blockquote {
+    font-style: italic;
+    overflow: hidden;
+    padding-left: 1rem;
+    color: #555;
+    border-left: 4px solid #ddd;
+    margin: 0 0 1rem;
+    line-height: 1.75rem;
+  }
+  
+  .deco-post-preview img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 1rem;
+  }
+  
+  .deco-post-preview table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+  
+  .deco-post-preview th,
+  .deco-post-preview td {
+    text-align: left;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+  }
+  
+  .deco-post-preview th {
+    background-color: #f4f4f4;
+  }
+  
+  .deco-post-preview hr {
+    border: 0;
+    height: 1px;
+    background: #e1e1e1;
+    margin-bottom: 1rem;
+  }
+  
+`;

package/src/types.ts

@@ -1,105 +1,340 @@
+import type { PageInfo, Person, Thing } from "@decocms/apps-commerce/types";
 import type { ImageWidget } from "@decocms/apps-website/types";
+import { scheduledTime } from "./utils/date";
+
+export type { PageInfo };
+
+/**
+ * Opaque "pick any section" reference, as authored in the decofile:
+ * `{ "__resolveType": "site/sections/Foo.tsx", ...props }`.
+ *
+ * Deliberately `any`, and deliberately named `Section`. `@decocms/blocks-cli`'s
+ * schema generator only emits the admin's section-picker widget for a prop whose
+ * type is *named* `Section` **and** resolves to `any`/`unknown`
+ * (`generate-schema.ts`, `isOpaqueSectionType`) — a concrete object shape is
+ * treated as user data and rendered as an inline editable form instead. So this
+ * is not laziness: narrowing it would silently downgrade the editor experience.
+ *
+ * Note this is NOT `Section` from `@decocms/blocks/types`, which is the
+ * *resolved* `{ Component, props }` pair produced after block resolution.
+ */
+export type Section = any;
 
 /**
  * @titleBy name
  * @widget author
  */
 export interface Author {
-	name: string;
-	email: string;
-	avatar?: ImageWidget;
-	jobTitle?: string;
-	company?: string;
+  name: string;
+  email: string;
+  /**
+   * @title Type
+   * @description Whether the author is a person or an organization. Emitted as the author @type in the JSON-LD. Defaults to Person.
+   * @default Person
+   */
+  type?: "Person" | "Organization";
+  avatar?: ImageWidget;
+  jobTitle?: string;
+  company?: string;
 }
 
 export interface Category {
-	name: string;
-	slug: string;
+  name: string;
+  slug: string;
+  description?: string;
+  /**
+   * @title Sections
+   * @label hidden
+   * @changeable true
+   */
+  sections?: Section[];
 }
 
 export interface BlogPost {
-	title: string;
-	excerpt: string;
-	/**
-	 * @title Main image
-	 */
-	image?: ImageWidget;
-	/**
-	 * @title Alt text for the image
-	 */
-	alt?: string;
-	/**
-	 * @widget blog
-	 * @collection authors
-	 */
-	authors?: Author[];
-	/**
-	 * @widget blog
-	 * @collection categories
-	 */
-	categories?: Category[];
-	/**
-	 * @format date
-	 */
-	date: string;
-	slug: string;
-	/**
-	 * @title Post Content
-	 * @format rich-text
-	 */
-	content?: string;
-	/**
-	 * @title Sections
-	 * @label hidden
-	 * @changeable true
-	 */
-	sections?: unknown[];
-	/**
-	 * @title SEO
-	 */
-	seo?: Seo;
-	/**
-	 * @title ReadTime in minutes
-	 */
-	readTime?: number;
-	/**
-	 * @title Extra Props
-	 */
-	extraProps?: ExtraProps[];
-	id?: string;
+  title: string;
+  excerpt: string;
+  /**
+   * @title Main image
+   */
+  image?: ImageWidget;
+  /**
+   * @title Alt text for the image
+   */
+  alt?: string;
+  /**
+   * @widget blog
+   * @collection authors
+   */
+  authors?: Author[];
+  /**
+   * @widget blog
+   * @collection categories
+   */
+  categories?: Category[];
+  /**
+   * @format date
+   */
+  date: string;
+  /**
+   * @title Modified date
+   * @format date
+   * @description Date of the last relevant content update. Emitted as dateModified in the JSON-LD.
+   */
+  dateModified?: string;
+  slug: string;
+  /**
+   * @title Status
+   * @description Publication status. Anything other than `published` is kept out of listings and never indexed. Posts with no status are treated as published.
+   */
+  status?: PostStatus;
+  /**
+   * @title Scheduled publication date
+   * @format datetime
+   * @description Instant this post goes live, honoured only while status is `scheduled`. Deliberately separate from the editorial date shown and sorted on: the two may diverge.
+   */
+  scheduledDatetime?: string;
+  /**
+   * @title Post Content
+   * @format rich-text
+   */
+  content?: string;
+  /**
+   * @title Sections
+   * @label hidden
+   * @changeable true
+   */
+  sections?: Section[];
+  /**
+   * @title Carousel in post content
+   * @description add a carousel in the middle of the post. Must be implemented in frontEnd
+   */
+  imageCarousel?: ImageCarousel;
+  /**
+   * @title SEO
+   */
+  seo?: Seo;
+  /**
+   * @title ReadTime in minutes
+   */
+  readTime?: number;
+  /**
+   * @title Extra Props
+   */
+  extraProps?: ExtraProps[];
+  /** @hide true */
+  aggregateRating?: AggregateRating;
+  /** @hide true */
+  review?: Review[];
+  /** @hide true */
+  contentRating?: Rating[];
+  /** @hide true */
+  interactionStatistic?: InteractionCounter;
+  id?: string;
 }
 
+/**
+ * Publication status of a post. `published` (or an absent value, for legacy
+ * posts) renders on the live site; `scheduled` renders once its
+ * `scheduledDatetime` has passed; every other value keeps the post out of
+ * listings and out of the index.
+ *
+ * `generating` and `awaiting_review` are written by the autonomous-blog agent
+ * while a post is still being produced, which is why the checks below are
+ * allowlists: a status this app does not recognize is a post the CMS does not
+ * consider ready, so it must not leak into a listing.
+ */
+export type PostStatus =
+  | "draft"
+  | "published"
+  | "scheduled"
+  | "archived"
+  | "generating"
+  | "awaiting_review";
+
+/**
+ * A post is live when it has no status at all or is explicitly `published`.
+ *
+ * The absent case is load-bearing: `status` was added long after the first
+ * posts were written, so every existing record is missing it. Requiring an
+ * explicit `published` would empty every blog in production the moment a site
+ * bumps this app.
+ *
+ * Takes a plain `string` so it can also be applied to a raw CMS record, where
+ * the value is only a `PostStatus` by convention.
+ */
+export const isPublishedStatus = (status?: string): boolean => !status || status === "published";
+
+/**
+ * Whether a post is live *right now* — the read-time half of scheduling.
+ *
+ * A scheduled post is merged to production ahead of its go-live instant, so
+ * nothing rewrites the record when that instant arrives: this comparison is
+ * what flips it, on whichever request first evaluates it after the fact.
+ *
+ * Like `isPublishedStatus`, this is an allowlist and stays one deliberately:
+ * only an absent/empty status, an explicit `published`, or a `scheduled` post
+ * whose instant has arrived is live. That makes every status added later — by
+ * the CMS or by an agent — fail closed on an app version that predates it,
+ * hiding the post instead of leaking a half-written one. A `status !== "draft"`
+ * blacklist would lose that property permanently.
+ */
+export const isLivePost = (
+  post: { status?: string; scheduledDatetime?: string },
+  now: number = Date.now(),
+): boolean => {
+  if (isPublishedStatus(post.status)) {
+    return true;
+  }
+  if (post.status !== "scheduled") {
+    return false;
+  }
+  const goLive = post.scheduledDatetime ? scheduledTime(post.scheduledDatetime) : null;
+  // A missing or unreadable instant is rejected rather than compared: this is
+  // the fail-closed guarantee, not a redundant null check. `scheduledTime`
+  // returns null (not 0) for a bad value precisely so that a real instant which
+  // happens to be the epoch is still honoured here.
+  return goLive !== null && goLive <= now;
+};
+
 export interface ExtraProps {
-	key: string;
-	value: string;
+  key: string;
+  value: string;
 }
 
 export interface Seo {
-	title?: string;
-	description?: string;
-	image?: ImageWidget;
-	canonical?: string;
-	noIndexing?: boolean;
+  title?: string;
+  description?: string;
+  image?: ImageWidget;
+  canonical?: string;
+  noIndexing?: boolean;
+}
+
+/** @titleBy name */
+export interface Publisher {
+  name: string;
+  /** @title Logo */
+  logo?: ImageWidget;
+  url?: string;
 }
 
 export interface BlogPostPage {
-	"@type": "BlogPostPage";
-	post: BlogPost;
-	seo?: Seo | null;
+  "@type": "BlogPostPage";
+  post: BlogPost;
+  seo?: Seo | null;
 }
 
-export type SortBy = "date_desc" | "date_asc" | "title_asc" | "title_desc";
+export type SortBy =
+  | "date_desc"
+  | "date_asc"
+  | "title_asc"
+  | "title_desc"
+  | "view_asc"
+  | "view_desc";
 
-export interface PageInfo {
-	nextPage?: string;
-	previousPage?: string;
-	currentPage: number;
-	records?: number;
-	recordPerPage?: number;
+export interface BlogPostListingPage {
+  posts: BlogPost[];
+  /** @title Active category */
+  category?: Category | null;
+  /** @title Categories */
+  categories?: Category[] | null;
+  pageInfo: PageInfo;
+  seo: Seo;
 }
 
-export interface BlogPostListingPage {
-	posts: BlogPost[];
-	pageInfo: PageInfo;
-	seo: Seo;
+export interface ImageCarousel {
+  banners?: Banner[];
+  description?: string;
+}
+
+export interface Review {
+  "@type": "Review";
+  id?: string;
+  /** Author of the review */
+  author?: Person;
+  /** The date that the review was published, in ISO 8601 date format.*/
+  datePublished?: string;
+  /** The date that the review was modified, in ISO 8601 date format.*/
+  dateModified?: string;
+  /** The item that is being reviewed/rated. */
+  itemReviewed?: string;
+  /** Emphasis part of the review */
+  reviewHeadline?: string;
+  /** The actual body of the review. */
+  reviewBody?: string;
+  /** Review status */
+  additionalType?: string;
+  /** Anonymous comment. Not in Schema.org */
+  isAnonymous?: boolean;
+}
+
+export interface Rating {
+  "@type": "Rating";
+  id?: string;
+  /** The author of this content or rating. */
+  author?: Person;
+  /** The item that is being reviewed/rated. */
+  itemReviewed?: string;
+  /** The highest value allowed in this rating system. */
+  bestRating?: number;
+  /** The lowest value allowed in this rating system. */
+  worstRating?: number;
+  /** A short explanation providing background context and other information that led to the conclusion expressed in the rating. */
+  ratingValue?: number;
+  /** Review status */
+  additionalType?: string;
+}
+
+export interface AggregateRating {
+  "@type": "AggregateRating";
+  /** The count of total number of ratings. */
+  ratingCount?: number;
+  /** The count of total number of reviews. */
+  reviewCount?: number;
+  /** The rating for the content. */
+  ratingValue?: number;
+  /** The highest value allowed in this rating system. */
+  bestRating?: number;
+  /** The lowest value allowed in this rating system. */
+  worstRating?: number;
+}
+
+export interface InteractionCounter extends Omit<Thing, "@type"> {
+  "@type": "InteractionCounter";
+  /** The number of interactions or views */
+  userInteractionCount?: number;
+}
+
+export interface ViewFromDatabase {
+  id: string;
+  userInteractionCount?: number;
+}
+
+export interface Ignore {
+  /**
+   * @title Active
+   */
+  active?: boolean;
+  /**
+   * @title When additionalType is marked with:
+   */
+  markedAs?: string[];
+}
+
+export interface BannerItem {
+  image?: ImageWidget;
+  width?: number;
+  height?: number;
+}
+
+export interface Banner {
+  /** @description desktop otimized image */
+  desktop: BannerItem;
+  /** @description mobile otimized image */
+  mobile: BannerItem;
+  /** @description Image's alt text */
+  alt: string;
+  action?: {
+    /** @description when user clicks on the image, go to this link */
+    href: string;
+  };
 }