Skip to content
Twilight React Playground
ثيم رائدaren

Blog data types

typeAdvanced

The shapes of blog articles, authors, categories and tags that the blog loaders return, for typing your own blog components.

import { ArticleSummary, ArticleDetail, ArticleStats, ArticleMeta, BlogAuthorType, BlogCategoryType, BlogTagType, CategoryMeta } from '@salla.sa/twilight-theme-engine/routes/blog';

In plain words

When you draw blog data yourself, for example a "latest articles" block built from the blog loader's data, these types tell your editor which fields an article, an author, a category and a tag have.

Signature

interface ArticleSummary {
  id: string;
  name: string;
  url: string;
  author: BlogAuthorType;
  description?: string;
  image?: string;
  promotion_title?: string;
  created_at?: DateInput;       // string, number, Date or { date, timezone_type, timezone }
  stats?: ArticleStats;         // { likes?: number; comments?: number }
  tags?: BlogTagType[];
  meta?: ArticleMeta;           // { title?, description?, canonical?, og_image? }
}

interface ArticleDetail extends ArticleSummary {
  categories?: BlogCategoryType[];
  related?: ArticleSummary[];
}

interface BlogAuthorType { name: string; url: string }
interface BlogCategoryType { id: string; name: string; url: string; meta?: CategoryMeta; is_current?: boolean }
interface BlogTagType { id: number; name: string; url: string }
interface CategoryMeta { title?: string; description?: string; canonical?: string }

Example

app/components/ArticleTeaser.tsx
import { Link } from '@salla.sa/twilight-theme-engine/components/common';
import { useDate } from '@salla.sa/twilight-theme-engine/hooks';
import type { ArticleSummary } from '@salla.sa/twilight-theme-engine/routes/blog';

export function ArticleTeaser({ article }: { article: ArticleSummary }) {
  const { format } = useDate();
  return (
    <article>
      <Link to={article.url}>{article.name}</Link>
      <small>
        {format(article.created_at)} · {article.stats?.likes ?? 0} likes
      </small>
    </article>
  );
}

How it behaves

  • BlogAuthorType, BlogCategoryType and BlogTagType are export names only: in the engine source the interfaces are BlogAuthor, BlogCategory and BlogTag.

  • created_at's type, DateInput, is not exported. useDate().format accepts it as it is.

  • BlogCategoryType.id is a string, BlogTagType.id a number. meta holds the SEO fields the blog heads prefer over the name and description.

  • All of them are type-only exports, also available from the /routes barrel.

Related

Blog

The blog home page with featured slides, categories and latest articles, rendering empty lists rather than an error when the blog fails to load.

BlogSingle

One blog article with its related articles, likes and comments, using the article's own SEO title, description and image when set.

BlogAuthorRoute, BlogCategoryRoute, BlogTagRoute

Blog article lists filtered by one author, one category or one tag, each with the category sidebar and more articles as the reader scrolls.

useDate

Formats dates and "2 hours ago" style relative times in the page language, using the browser or server Intl APIs.

Source and docs