@salla.sa/twilight-theme-engine 1.0.85 → 1.0.86

package/tailwind/routes/blog/components.tsx.txt

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useDate } from '../../hooks';
+import { Image, Link } from '../../components/common';
+import type { BlogCategory, ArticleSummary } from './types';
+
+export function BlogCategoriesSidebar({ categories }: { categories: BlogCategory[] }) {
+  const { t } = useTranslation();
+
+  if (!categories.length) return null;
+
+  return (
+    <nav aria-label="Sidebar" className="hidden lg:block lg:sticky shrink-0 top-24 col-span-2">
+      <h2 className="font-bold mb-3">{t('pages.blog_categories.categories')}</h2>
+      <ul>
+        {categories.map((category) => (
+          <li key={category.id} className={category.is_current ? 'text-primary' : ''}>
+            <Link className="py-3 block text-sm hover:text-primary" to={category.url}>
+              {category.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+export function BlogArticleCard({
+  article,
+  showAuthor = false,
+}: {
+  article: ArticleSummary;
+  showAuthor?: boolean;
+}) {
+  const { format: formatDate } = useDate();
+
+  return (
+    <div className="list-block post-entry relative h-full transition-shadow duration-500 bg-white hover:shadow-default rounded-lg justify-around overflow-hidden flex flex-col">
+      <Link
+        to={article.url}
+        className="post-entry__image relative overflow-hidden hover:opacity-90 w-full h-56 bg-border-color flex items-center justify-center"
+      >
+        {article.image && (
+          <Image
+            className="h-full w-full object-cover"
+            src={article.image}
+            alt={article.name}
+            aspectRatio="16/9"
+          />
+        )}
+      </Link>
+      <div className="flex-1 px-5 pt-5 pb-7">
+        <div className="mb-2.5 text-gray-500 rounded-md inline-flex text-sm rtl:space-x-reverse space-x-5">
+          <div className="flex items-center">
+            <i className="sicon-calendar-date rtl:ml-1 ltr:mr-1"></i>
+            <span>{formatDate(article.created_at)}</span>
+          </div>
+          {showAuthor && article.author && (
+            <Link to={article.author.url} className="flex items-center hover:text-dark">
+              <i className="sicon-user rtl:ml-1 ltr:mr-1"></i>
+              <span>{article.author.name}</span>
+            </Link>
+          )}
+        </div>
+        <h3 className="post-entry__title text-sm font-bold text-gray-800 leading-6 mb-2.5">
+          <Link to={article.url}>{article.name}</Link>
+        </h3>
+        <p className="text-sm text-gray-500 leading-6 mb-2.5">{article.description}</p>
+      </div>
+    </div>
+  );
+}
+
+export function BlogListLayout({
+  categories,
+  children,
+}: {
+  categories: BlogCategory[];
+  children: ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-8 gap-8">
+      <BlogCategoriesSidebar categories={categories} />
+      <div className="main-content lg:col-span-6">{children}</div>
+    </div>
+  );
+}

package/tailwind/routes/blog/index.tsx.txt

@@ -0,0 +1,238 @@
+import type { HeadDescriptor } from '../../utils/head';
+import { buildHreflangAlternates } from '../../utils/baseHead';
+import { lazy } from 'react';
+import {
+  blogLoader,
+  blogSingleLoader,
+  blogAuthorLoader,
+  blogCategoryLoader,
+  blogTagLoader,
+} from './loader';
+import type {
+  BlogPageProps,
+  BlogSinglePageProps,
+  BlogAuthorLoaderData,
+  BlogCategoryLoaderData,
+  BlogTagLoaderData,
+  ArticleSummary,
+  ArticleDetail,
+  ArticleStats,
+  ArticleMeta,
+  BlogCategory as BlogCategoryType,
+  CategoryMeta,
+  BlogTag as BlogTagType,
+  BlogAuthor as BlogAuthorType,
+} from './types';
+import type { IdParams, SlugIdParams } from '../types';
+import type { TwilightContext } from '../../twilight/context';
+import { RouteId } from '../../router/route-ids';
+
+const LazyBlogPage = lazy(() => import('./BlogPage').then((m) => ({ default: m.BlogPage })));
+const LazyBlogSinglePage = lazy(() =>
+  import('./BlogSinglePage').then((m) => ({ default: m.BlogSinglePage }))
+);
+const LazyBlogAuthorPage = lazy(() =>
+  import('./BlogAuthorPage').then((m) => ({ default: m.BlogAuthorPage }))
+);
+const LazyBlogCategoryPage = lazy(() =>
+  import('./BlogCategoryPage').then((m) => ({ default: m.BlogCategoryPage }))
+);
+const LazyBlogTagPage = lazy(() =>
+  import('./BlogTagPage').then((m) => ({ default: m.BlogTagPage }))
+);
+
+export const BlogPage = LazyBlogPage;
+export const BlogSinglePage = LazyBlogSinglePage;
+export const BlogAuthorPage = LazyBlogAuthorPage;
+export const BlogCategoryPage = LazyBlogCategoryPage;
+export const BlogTagPage = LazyBlogTagPage;
+export {
+  blogLoader,
+  blogSingleLoader,
+  blogAuthorLoader,
+  blogCategoryLoader,
+  blogTagLoader,
+} from './loader';
+export type {
+  BlogAuthorLoaderData,
+  BlogCategoryLoaderData,
+  BlogTagLoaderData,
+  BlogPageProps,
+  BlogSinglePageProps,
+  ArticleSummary,
+  ArticleDetail,
+  ArticleStats,
+  ArticleMeta,
+  BlogCategoryType,
+  CategoryMeta,
+  BlogTagType,
+  BlogAuthorType,
+};
+
+async function blogLoaderWithExtend(
+  _ctx?: { locale?: string },
+  extend?: (
+    data: BlogPageProps,
+    ctx: { params: Record<string, never> }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<BlogPageProps> {
+  const data = await blogLoader();
+
+  if (extend) {
+    const extra = await extend(data, { params: {} });
+    return { ...data, ...extra } as BlogPageProps;
+  }
+  return data;
+}
+
+function blogHead(ctx: TwilightContext, data: BlogPageProps): HeadDescriptor {
+  const base: HeadDescriptor = {
+    title: data.page.title,
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+async function blogSingleLoaderWithExtend(
+  ctx: { params: SlugIdParams; locale?: string },
+  extend?: (
+    data: BlogSinglePageProps,
+    ctx: { params: SlugIdParams }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<BlogSinglePageProps> {
+  const data = await blogSingleLoader({ params: ctx.params });
+
+  if (extend) {
+    const extra = await extend(data, ctx);
+    return { ...data, ...extra } as BlogSinglePageProps;
+  }
+  return data;
+}
+
+function blogSingleHead(ctx: TwilightContext, data: BlogSinglePageProps): HeadDescriptor {
+  const base: HeadDescriptor = {
+    title: data.article.meta?.title ?? data.article.name,
+    description: data.article.meta?.description ?? data.article.description,
+    canonical: data.article.meta?.canonical ?? data.article.url,
+    openGraph: {
+      title: data.article.meta?.title ?? data.article.name,
+      images: data.article.meta?.og_image ?? data.article.image,
+    },
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+async function blogAuthorLoaderWithExtend(
+  ctx: { params: IdParams; locale?: string },
+  extend?: (
+    data: BlogAuthorLoaderData,
+    ctx: { params: IdParams }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<BlogAuthorLoaderData> {
+  const data = await blogAuthorLoader({ params: ctx.params });
+
+  if (extend) {
+    const extra = await extend(data, ctx);
+    return { ...data, ...extra } as BlogAuthorLoaderData;
+  }
+  return data;
+}
+
+function blogAuthorHead(ctx: TwilightContext, data: BlogAuthorLoaderData): HeadDescriptor {
+  const base: HeadDescriptor = {
+    title: data.author.name,
+    description: `Articles by ${data.author.name}`,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+async function blogCategoryLoaderWithExtend(
+  ctx: { params: SlugIdParams; locale?: string },
+  extend?: (
+    data: BlogCategoryLoaderData,
+    ctx: { params: SlugIdParams }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<BlogCategoryLoaderData> {
+  const data = await blogCategoryLoader({ params: ctx.params });
+
+  if (extend) {
+    const extra = await extend(data, ctx);
+    return { ...data, ...extra } as BlogCategoryLoaderData;
+  }
+  return data;
+}
+
+function blogCategoryHead(ctx: TwilightContext, data: BlogCategoryLoaderData): HeadDescriptor {
+  const base: HeadDescriptor = {
+    title: data.blogCategory.meta?.title ?? data.blogCategory.name,
+    description: data.blogCategory.meta?.description ?? `Articles in ${data.blogCategory.name}`,
+    canonical: data.blogCategory.meta?.canonical ?? data.blogCategory.url,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+async function blogTagLoaderWithExtend(
+  ctx: { params: SlugIdParams; locale?: string },
+  extend?: (
+    data: BlogTagLoaderData,
+    ctx: { params: SlugIdParams }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<BlogTagLoaderData> {
+  const data = await blogTagLoader({ params: ctx.params });
+
+  if (extend) {
+    const extra = await extend(data, ctx);
+    return { ...data, ...extra } as BlogTagLoaderData;
+  }
+  return data;
+}
+
+function blogTagHead(ctx: TwilightContext, data: BlogTagLoaderData): HeadDescriptor {
+  const base: HeadDescriptor = {
+    title: data.blogTag.name,
+    description: `Articles tagged with ${data.blogTag.name}`,
+    canonical: data.blogTag.url,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+export const Blog = {
+  id: RouteId.BLOG_INDEX,
+  loader: blogLoaderWithExtend,
+  head: blogHead,
+  Component: LazyBlogPage,
+} as const;
+export const BlogSingle = {
+  id: RouteId.BLOG_SINGLE,
+  loader: blogSingleLoaderWithExtend,
+  head: blogSingleHead,
+  Component: LazyBlogSinglePage,
+} as const;
+export const BlogAuthorRoute = {
+  id: RouteId.BLOG_INDEX_AUTHOR,
+  loader: blogAuthorLoaderWithExtend,
+  head: blogAuthorHead,
+  Component: LazyBlogAuthorPage,
+} as const;
+export const BlogCategoryRoute = {
+  id: RouteId.BLOG_INDEX_CATEGORY,
+  loader: blogCategoryLoaderWithExtend,
+  head: blogCategoryHead,
+  Component: LazyBlogCategoryPage,
+} as const;
+export const BlogTagRoute = {
+  id: RouteId.BLOG_INDEX_TAG,
+  loader: blogTagLoaderWithExtend,
+  head: blogTagHead,
+  Component: LazyBlogTagPage,
+} as const;

package/tailwind/routes/blog/loader.ts.txt

@@ -0,0 +1,173 @@
+import { blog } from '../../api/blog';
+import { getTwilightContext } from '../../twilight/context';
+import { RouteId } from '../../router/route-ids';
+import { notFound, orThrow } from '../../providers/NavigationProvider';
+import type { Breadcrumb } from '../../types';
+import type {
+  BlogPageProps,
+  BlogSinglePageProps,
+  BlogAuthorLoaderData,
+  BlogCategoryLoaderData,
+  BlogTagLoaderData,
+} from './types';
+import type { IdParams, SlugIdParams } from '../types';
+
+export async function blogLoader(): Promise<BlogPageProps> {
+  const i18n = getTwilightContext().i18n;
+
+  const breadcrumbs: Breadcrumb[] = [
+    { name: i18n.t('common.titles.home'), url: '/' },
+    { name: i18n.t('blocks.footer.blog'), url: '/blog' },
+  ];
+
+  const page = {
+    slug: RouteId.BLOG_INDEX,
+    title: i18n.t('blocks.footer.blog') || 'Blog',
+    breadcrumbs,
+  };
+
+  try {
+    const overview = await blog.get();
+    return {
+      page,
+      articles: overview.articles,
+      categories: overview.categories,
+      slides: overview.slides,
+      popular: overview.popular,
+    };
+  } catch (_error) {
+    return {
+      page,
+      articles: [],
+      categories: [],
+      slides: [],
+      popular: [],
+    };
+  }
+}
+
+export async function blogSingleLoader({
+  params,
+}: {
+  params: SlugIdParams;
+}): Promise<BlogSinglePageProps> {
+  const { id } = params;
+  const i18n = getTwilightContext().i18n;
+
+  // The API answers a non-numeric id with 417, which `orThrow` would pass through as an error.
+  if (!/^\d+$/.test(id)) throw notFound();
+  const article = await blog.articles.findOrThrow(id);
+
+  const breadcrumbs: Breadcrumb[] = [
+    { name: i18n.t('common.titles.home'), url: '/' },
+    { name: i18n.t('blocks.footer.blog'), url: '/blog' },
+    { name: article.name, url: article.url },
+  ];
+
+  return {
+    page: {
+      slug: RouteId.BLOG_SINGLE,
+      id: article.id,
+      title: article.name,
+      breadcrumbs,
+    },
+    article,
+    related: article.related,
+  };
+}
+
+export async function blogAuthorLoader({
+  params,
+}: {
+  params: IdParams;
+}): Promise<BlogAuthorLoaderData> {
+  const { id } = params;
+  const i18n = getTwilightContext().i18n;
+
+  const [response, overview] = await Promise.all([
+    orThrow(blog.articles.list({ author: id })),
+    blog.get(),
+  ]);
+  const author = response.author;
+  // The API answers an unknown id without the author object: 404 instead of a TypeError (500).
+  if (!author) throw notFound();
+
+  const breadcrumbs: Breadcrumb[] = [
+    { name: i18n.t('common.titles.home'), url: '/' },
+    { name: i18n.t('blocks.footer.blog'), url: '/blog' },
+    { name: author.name, url: author.url },
+  ];
+
+  return {
+    page: {
+      slug: RouteId.BLOG_INDEX_AUTHOR,
+      id,
+      title: author.name,
+      breadcrumbs,
+    },
+    author,
+    categories: overview.categories,
+    articles: response.data,
+    cursor: response.cursor,
+  };
+}
+
+export async function blogCategoryLoader({
+  params,
+}: {
+  params: SlugIdParams;
+}): Promise<BlogCategoryLoaderData> {
+  const { id } = params;
+  const i18n = getTwilightContext().i18n;
+
+  const [response, overview] = await Promise.all([
+    orThrow(blog.articles.list({ category: id })),
+    blog.get(),
+  ]);
+  const category = response.category;
+  if (!category) throw notFound();
+
+  const breadcrumbs: Breadcrumb[] = [
+    { name: i18n.t('common.titles.home'), url: '/' },
+    { name: i18n.t('blocks.footer.blog'), url: '/blog' },
+    { name: category.name, url: category.url },
+  ];
+
+  return {
+    page: { slug: RouteId.BLOG_INDEX_CATEGORY, id: category.id, title: category.name, breadcrumbs },
+    blogCategory: category,
+    categories: overview.categories,
+    articles: response.data,
+    cursor: response.cursor,
+  };
+}
+
+export async function blogTagLoader({
+  params,
+}: {
+  params: SlugIdParams;
+}): Promise<BlogTagLoaderData> {
+  const { id } = params;
+  const i18n = getTwilightContext().i18n;
+
+  const [response, overview] = await Promise.all([
+    orThrow(blog.articles.list({ tag: id })),
+    blog.get(),
+  ]);
+  const tag = response.tag;
+  if (!tag) throw notFound();
+
+  const breadcrumbs: Breadcrumb[] = [
+    { name: i18n.t('common.titles.home'), url: '/' },
+    { name: i18n.t('blocks.footer.blog'), url: '/blog' },
+    { name: tag.name, url: tag.url },
+  ];
+
+  return {
+    page: { slug: RouteId.BLOG_INDEX_TAG, id: tag.id, title: tag.name, breadcrumbs },
+    blogTag: tag,
+    categories: overview.categories,
+    articles: response.data,
+    cursor: response.cursor,
+  };
+}

package/tailwind/routes/blog/types.ts.txt

@@ -0,0 +1,106 @@
+import type { Page } from '../../types';
+import type { Pagination } from '../../api/types';
+import type { DateInput } from '../../hooks/useDate';
+
+export interface BlogAuthor {
+  name: string;
+  url: string;
+}
+
+export interface BlogTag {
+  id: number;
+  name: string;
+  url: string;
+}
+
+export interface CategoryMeta {
+  title?: string;
+  description?: string;
+  canonical?: string;
+}
+
+export interface BlogCategory {
+  id: string;
+  name: string;
+  url: string;
+  meta?: CategoryMeta;
+  is_current?: boolean;
+}
+
+export interface ArticleStats {
+  likes?: number;
+  comments?: number;
+}
+
+export interface ArticleMeta {
+  title?: string;
+  description?: string;
+  canonical?: string;
+  og_image?: string;
+}
+
+export interface ArticleSummary {
+  id: string;
+  name: string;
+  description?: string;
+  image?: string;
+  url: string;
+  promotion_title?: string;
+  author: BlogAuthor;
+  created_at?: DateInput;
+  stats?: ArticleStats;
+  tags?: BlogTag[];
+  meta?: ArticleMeta;
+}
+
+export interface ArticleDetail extends ArticleSummary {
+  categories?: BlogCategory[];
+  related?: ArticleSummary[];
+}
+
+export type Article = ArticleSummary | ArticleDetail;
+
+export interface BlogOverview {
+  categories: BlogCategory[];
+  slides: ArticleSummary[];
+  articles: ArticleSummary[];
+  popular: ArticleSummary[];
+}
+
+export interface BlogPageProps {
+  page: Page;
+  articles: ArticleSummary[];
+  categories?: BlogCategory[];
+  slides?: ArticleSummary[];
+  popular?: ArticleSummary[];
+}
+
+export interface BlogSinglePageProps {
+  page: Page;
+  article: ArticleDetail;
+  related?: ArticleSummary[];
+}
+
+export interface BlogAuthorLoaderData {
+  page: Page;
+  author: BlogAuthor;
+  categories: BlogCategory[];
+  articles: ArticleSummary[];
+  cursor: Pagination;
+}
+
+export interface BlogCategoryLoaderData {
+  page: Page;
+  blogCategory: BlogCategory;
+  categories: BlogCategory[];
+  articles: ArticleSummary[];
+  cursor: Pagination;
+}
+
+export interface BlogTagLoaderData {
+  page: Page;
+  blogTag: BlogTag;
+  categories: BlogCategory[];
+  articles: ArticleSummary[];
+  cursor: Pagination;
+}