orionplace-react 0.1.0 → 0.2.0

package/templates/lib/orionplace/blogArticle.ts

@@ -0,0 +1,97 @@
+import { EBlogAccessType } from '@/interfaces/orionplace/blog/IBlogApi';
+import type {
+  IBlogPost,
+  IBlogPostsRequest,
+} from '@/interfaces/orionplace/blog/IBlogApi';
+import {
+  getAvailableNestedValueFromObject,
+  safePublicUrl,
+} from './presentation';
+import { APP_ORIGIN, appMediaUrl } from './nativeApp';
+
+export interface BlogArticleLoadAction {
+  endpoint: 'blog_posts_get';
+  request: IBlogPostsRequest;
+  signal: AbortSignal;
+}
+
+export function blogArticleRequest(
+  postId: number,
+  signal: AbortSignal,
+): BlogArticleLoadAction {
+  return {
+    endpoint: 'blog_posts_get',
+    request: {
+      filters: { id: postId },
+      paginate: { page: 1, pp_items: 1 },
+    },
+    signal,
+  };
+}
+
+export function blogArticleField(
+  post: IBlogPost | undefined,
+  locale: string,
+  field: keyof IBlogPost['locale'][string],
+) {
+  return getAvailableNestedValueFromObject(post?.locale, locale, field) || '';
+}
+
+export function blogArticleCover(post: IBlogPost | undefined) {
+  const images = [...(post?.preview_images ?? [])].sort(
+    (left, right) => left.display_order - right.display_order,
+  );
+
+  return appMediaUrl(
+    safePublicUrl(images[0]?.image_url || post?.preview_image_urls?.[0]),
+    APP_ORIGIN,
+  );
+}
+
+export function blogArticlePlansHref(
+  post: IBlogPost | undefined,
+  locale: string,
+) {
+  const parameters = new URLSearchParams({ locale });
+  const ids = post?.premium_tariff_ids ?? [];
+  if (ids.length) {
+    parameters.set('ids', ids.join(','));
+  }
+
+  return `/tariffs?${parameters.toString()}`;
+}
+
+// The backend sends video addresses as `/ps3/...` paths.
+export function blogArticleMediaUrl(value: unknown) {
+  return appMediaUrl(
+    safePublicUrl(typeof value === 'string' ? value : ''),
+    APP_ORIGIN,
+  );
+}
+
+export function lockBlogArticle(post: IBlogPost): IBlogPost {
+  return {
+    ...post,
+    is_full: false,
+    has_full_access: false,
+    locale: Object.fromEntries(
+      Object.entries(post.locale).map(([locale, value]) => {
+        const { post_view_text: _content, ...preview } = value;
+        return [locale, preview];
+      }),
+    ),
+  };
+}
+
+export function canTrackBlogReading(
+  post: IBlogPost | undefined,
+  authenticated: boolean,
+) {
+  return Boolean(
+    authenticated &&
+    post?.is_full &&
+    post.has_full_access &&
+    post.read_time_min > 0 &&
+    post.access_type.int !== EBlogAccessType.ACCESS_PUBLIC,
+  );
+}

package/templates/lib/orionplace/blogArticleHtml.ts

@@ -0,0 +1,370 @@
+import DOMPurify from 'dompurify';
+import type {
+  Config,
+  DOMPurify as TPurifier,
+  UponSanitizeAttributeHookEvent,
+} from 'dompurify';
+import { htmlTextParagraphs } from './htmlText';
+import { APP_ORIGIN, appMediaUrl } from './nativeApp';
+
+type StylePatterns = Record<string, RegExp>;
+
+export const blogArticleTags = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'p',
+  'br',
+  'hr',
+  'span',
+  'div',
+  'strong',
+  'b',
+  'em',
+  'i',
+  'u',
+  's',
+  'strike',
+  'del',
+  'ins',
+  'mark',
+  'sub',
+  'sup',
+  'small',
+  'abbr',
+  'cite',
+  'q',
+  'kbd',
+  'samp',
+  'var',
+  'time',
+  'a',
+  'ul',
+  'ol',
+  'li',
+  'label',
+  'input',
+  'blockquote',
+  'pre',
+  'code',
+  'table',
+  'caption',
+  'colgroup',
+  'col',
+  'thead',
+  'tbody',
+  'tfoot',
+  'tr',
+  'th',
+  'td',
+  'img',
+  'figure',
+  'figcaption',
+  'video',
+  'audio',
+  'source',
+  'track',
+  'details',
+  'summary',
+];
+
+const attributes = [
+  'href',
+  'title',
+  'target',
+  'rel',
+  'lang',
+  'dir',
+  'cite',
+  'datetime',
+  'src',
+  'alt',
+  'width',
+  'height',
+  'loading',
+  'decoding',
+  'poster',
+  'controls',
+  'playsinline',
+  'preload',
+  'muted',
+  'loop',
+  'type',
+  'srclang',
+  'kind',
+  'label',
+  'default',
+  'start',
+  'reversed',
+  'colspan',
+  'rowspan',
+  'scope',
+  'span',
+  'open',
+  'checked',
+  'disabled',
+  'class',
+  'style',
+  'data-type',
+  'data-checked',
+  'data-latex',
+  'data-text-color',
+  'data-bg-color',
+  'data-background',
+  'data-text-align',
+  'data-vertical-align',
+  'data-colwidth',
+  'data-code-scheme',
+  'data-gallery-width',
+  'data-list-offset',
+  'data-float',
+  'data-blog-video',
+  'data-details-content',
+  'data-product-id',
+  'data-product-ids',
+];
+
+const marginLength = '(-?\\d+(\\.\\d+)?(px|em|rem|%)?|auto)';
+const editorClasses = new Set([
+  'blog-image-gallery',
+  'blog-image-gallery__track',
+  'blog-code-block',
+  'blog-post-editor-image',
+  'blog-post-editor-video',
+]);
+
+export const blogArticleColorTokens = new Set([
+  'gray',
+  'brown',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'purple',
+  'pink',
+  'red',
+]);
+
+const styleValues: StylePatterns = {
+  'color': /^[#\w\s.,%()-]+$/,
+  'background-color': /^[#\w\s.,%()-]+$/,
+  'text-align': /^(left|right|center|justify|start|end)$/,
+  'font-size': /^\d+(\.\d+)?(px|em|rem|%|pt)$/,
+  'font-family': /^[\w\s,'"-]+$/,
+  'line-height': /^\d+(\.\d+)?(px|em|rem|%)?$/,
+  'width': /^(\d+(\.\d+)?(px|%)|auto)$/,
+  'max-width': /^(\d+(\.\d+)?(px|%)|none)$/,
+  'margin': new RegExp(`^${marginLength}(\\s+${marginLength}){0,3}$`),
+  'margin-left': new RegExp(`^${marginLength}$`),
+  'margin-right': new RegExp(`^${marginLength}$`),
+  'float': /^(left|right|none)$/,
+  'display': /^(block|inline|inline-block)$/,
+  'position': /^relative$/,
+  'left': /^-?\d+(\.\d+)?px$/,
+};
+
+const unsafeStyle = /url\s*\(|expression|javascript:|[\\@<>]|\/\*/i;
+const safeUri =
+  /^(?:(?:https?|mailto|tel):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+const editorArticlePath =
+  /^\/(?:[a-z]{2}(?:-[a-z]{2})?\/)?blog\/[^/?#]+\/([1-9]\d*)\/?$/i;
+const authorRelTokens = new Set(['nofollow', 'sponsored', 'ugc']);
+
+function normalizedHeadingText(value: string) {
+  return htmlTextParagraphs(value)
+    .join(' ')
+    .normalize('NFKC')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .toLocaleLowerCase();
+}
+
+/** Removes only a first h1 whose text repeats the page title. */
+export function removeLeadingDuplicateBlogHeading(
+  value: string,
+  title: string,
+) {
+  const heading =
+    /^(\s*(?:<!--[\s\S]*?-->\s*)*)<h1(?:\s[^>]*)?>([\s\S]*?)<\/h1\s*>/i.exec(
+      value,
+    );
+
+  if (
+    !heading ||
+    !normalizedHeadingText(title) ||
+    normalizedHeadingText(heading[2] ?? '') !== normalizedHeadingText(title)
+  ) {
+    return value;
+  }
+
+  return `${heading[1] ?? ''}${value.slice(heading[0].length)}`;
+}
+
+export function safeBlogArticleStyle(value: string) {
+  const declarations = value
+    .split(';')
+    .map((declaration) => {
+      const separator = declaration.indexOf(':');
+      const name = declaration.slice(0, separator).trim().toLowerCase();
+      const property = declaration.slice(separator + 1).trim();
+
+      return { name, property, separator };
+    })
+    .filter(({ name, property, separator }) => {
+      const pattern = styleValues[name];
+      return (
+        separator > 0 &&
+        Boolean(pattern) &&
+        !unsafeStyle.test(property) &&
+        pattern!.test(property)
+      );
+    });
+
+  return declarations
+    .map(({ name, property }) => `${name}: ${property}`)
+    .join('; ');
+}
+
+function filterAttribute(node: Element, data: UponSanitizeAttributeHookEvent) {
+  if (data.attrName === 'style') {
+    data.attrValue = safeBlogArticleStyle(data.attrValue);
+    data.keepAttr = Boolean(data.attrValue);
+    return;
+  }
+
+  if (data.attrName === 'class') {
+    const classes = data.attrValue
+      .split(/\s+/)
+      .filter(
+        (name) => editorClasses.has(name) || /^language-[\w-]+$/.test(name),
+      );
+
+    data.attrValue = classes.join(' ');
+    data.keepAttr = Boolean(data.attrValue);
+    return;
+  }
+
+  const isColorToken =
+    data.attrName === 'data-text-color' || data.attrName === 'data-bg-color';
+  if (isColorToken && !blogArticleColorTokens.has(data.attrValue)) {
+    data.keepAttr = false;
+  }
+
+  if (data.attrName === 'src' && data.attrValue.trim().startsWith('data:')) {
+    data.keepAttr = false;
+  }
+
+  if (node.nodeName === 'INPUT' && data.attrName === 'type') {
+    data.keepAttr = data.attrValue.toLowerCase() === 'checkbox';
+  }
+}
+
+function prepareLink(link: Element) {
+  const href = link.getAttribute('href') ?? '';
+  const article = editorArticlePath.exec(href);
+  const author = (link.getAttribute('rel') ?? '')
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((token) => authorRelTokens.has(token));
+
+  if (article) {
+    link.setAttribute('href', `/journal/${article[1]}`);
+  }
+
+  if (/^https?:/i.test(href)) {
+    link.setAttribute('target', '_blank');
+    link.setAttribute('rel', [...author, 'noopener', 'noreferrer'].join(' '));
+    return;
+  }
+
+  link.removeAttribute('target');
+  if (author.length) {
+    link.setAttribute('rel', author.join(' '));
+  } else {
+    link.removeAttribute('rel');
+  }
+}
+
+function prepareElement(node: Element) {
+  const name = node.nodeName;
+
+  if (name === 'A') {
+    prepareLink(node);
+  }
+
+  if (name === 'IMG') {
+    node.setAttribute('loading', 'lazy');
+    node.setAttribute('decoding', 'async');
+    if (!node.hasAttribute('alt')) {
+      node.setAttribute('alt', '');
+    }
+  }
+
+  // Media the backend serves itself (`/ps3/...`); see appMediaUrl.
+  for (const attribute of ['src', 'poster']) {
+    const source = node.getAttribute(attribute);
+
+    if (source) {
+      node.setAttribute(attribute, appMediaUrl(source, APP_ORIGIN));
+    }
+  }
+
+  if (name === 'VIDEO' || name === 'AUDIO') {
+    node.setAttribute('controls', '');
+    node.setAttribute('preload', 'metadata');
+  }
+
+  if (name === 'VIDEO') {
+    node.setAttribute('playsinline', '');
+  }
+
+  if (name === 'INPUT') {
+    if (node.getAttribute('type') !== 'checkbox') {
+      node.remove();
+      return;
+    }
+    node.setAttribute('disabled', '');
+  }
+
+  const latex = node.getAttribute('data-latex');
+  if (latex && !node.textContent) {
+    node.textContent = latex;
+  }
+}
+
+function prepareElementHook(node: Node) {
+  if (node.nodeType === 1) {
+    prepareElement(node as Element);
+  }
+}
+
+const config: Config = {
+  ALLOWED_TAGS: blogArticleTags,
+  ALLOWED_ATTR: attributes,
+  ALLOW_DATA_ATTR: false,
+  ALLOWED_URI_REGEXP: safeUri,
+  SANITIZE_NAMED_PROPS: true,
+};
+
+/** Returns editor HTML that is safe to pass to React's HTML renderer. */
+export function safeBlogArticleHtml(
+  value: string,
+  purifier: TPurifier = DOMPurify,
+) {
+  if (!purifier.isSupported) {
+    return '';
+  }
+
+  purifier.addHook('uponSanitizeAttribute', filterAttribute);
+  purifier.addHook('afterSanitizeAttributes', prepareElementHook);
+
+  try {
+    return purifier.sanitize(value, config) as string;
+  } finally {
+    purifier.removeHook('uponSanitizeAttribute', filterAttribute);
+    purifier.removeHook('afterSanitizeAttributes', prepareElementHook);
+  }
+}

package/templates/lib/orionplace/blogComments.ts

@@ -0,0 +1,102 @@
+import { EBlogCommentStatus } from '@/interfaces/orionplace/blog/IBlogApi';
+import type { IBlogComment } from '@/interfaces/orionplace/blog/IBlogApi';
+
+export const blogCommentMaxIndent = 3;
+
+export interface BlogCommentThreadItem {
+  comment: IBlogComment;
+  depth: number;
+  indent: number;
+  parent?: IBlogComment;
+  closes: BlogCommentThreadItem[];
+}
+
+export type BlogCommentReplies = Readonly<
+  Record<number, readonly IBlogComment[]>
+>;
+
+export function blogCommentAuthor(comment: IBlogComment) {
+  return [comment.user.first_name, comment.user.last_name]
+    .filter(Boolean)
+    .join(' ');
+}
+
+export function withLocalBlogComments(
+  loaded: readonly IBlogComment[],
+  local: readonly IBlogComment[],
+  parentId: number | null,
+  placement: 'start' | 'end',
+) {
+  const loadedIds = new Set(loaded.map((comment) => comment.id));
+  const missing = local.filter(
+    (comment) => comment.parent_id === parentId && !loadedIds.has(comment.id),
+  );
+  return placement === 'start'
+    ? [...missing, ...loaded]
+    : [...loaded, ...missing];
+}
+
+export function flattenBlogCommentThread(
+  roots: readonly IBlogComment[],
+  replies: BlogCommentReplies,
+  local: readonly IBlogComment[] = [],
+) {
+  const items: BlogCommentThreadItem[] = [];
+  const visited = new Set<number>();
+
+  function visit(comment: IBlogComment, depth: number, parent?: IBlogComment) {
+    if (visited.has(comment.id)) {
+      return;
+    }
+    visited.add(comment.id);
+    const item: BlogCommentThreadItem = {
+      comment,
+      depth,
+      indent: Math.min(depth, blogCommentMaxIndent),
+      parent,
+      closes: [],
+    };
+    items.push(item);
+    const children = withLocalBlogComments(
+      replies[comment.id] ?? [],
+      local,
+      comment.id,
+      'end',
+    );
+    for (const child of children) {
+      visit(child, depth + 1, comment);
+    }
+    items.at(-1)!.closes.push(item);
+  }
+
+  for (const root of roots) {
+    visit(root, 0);
+  }
+  return items;
+}
+
+export function replaceBlogComment(
+  roots: readonly IBlogComment[],
+  replies: BlogCommentReplies,
+  comment: IBlogComment,
+) {
+  const replace = (list: readonly IBlogComment[]) =>
+    list.map((item) => (item.id === comment.id ? comment : item));
+  return {
+    roots: replace(roots),
+    replies: Object.fromEntries(
+      Object.entries(replies).map(([id, list]) => [id, replace(list)]),
+    ) as Record<number, IBlogComment[]>,
+  };
+}
+
+export function withNewBlogReply(parent: IBlogComment, reply: IBlogComment) {
+  const approved = reply.status.int === EBlogCommentStatus.APPROVED;
+
+  return {
+    ...parent,
+    total_c_replies: parent.total_c_replies + 1,
+    can_edit: parent.can_edit && !approved,
+    can_remove: false,
+  };
+}

package/templates/lib/orionplace/blogJournal.ts

@@ -0,0 +1,115 @@
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import type {
+  IBlogCategory,
+  IBlogPostsRequest,
+  IBlogPostsResponse,
+} from '@/interfaces/orionplace/blog/IBlogApi';
+import {
+  EBlogViewType,
+  type EBlogViewType as BlogViewType,
+} from '@/interfaces/orionplace/blog/IBlogPostPreview';
+import { getAvailableNestedValueFromObject } from './presentation';
+
+export type BlogPostsPage = NonNullable<IBlogPostsResponse['page_data']>;
+
+export interface BlogJournalPage {
+  page: number;
+  pageSize: number;
+  data: BlogPostsPage;
+}
+
+export interface BlogJournalLoadAction {
+  endpoint: 'blog_posts_get';
+  request: IBlogPostsRequest;
+  signal: AbortSignal;
+}
+
+export interface BlogCategoryRow {
+  id: number;
+  name: string;
+  depth: number;
+}
+
+const pageSizes: Record<BlogViewType, number> = {
+  [EBlogViewType.PORTRAIT]: 9,
+  [EBlogViewType.LIST]: 8,
+  [EBlogViewType.CUSTOM]: 7,
+};
+
+export function blogPageSize(view: BlogViewType) {
+  return pageSizes[view];
+}
+
+export function blogPageNumber(value: unknown) {
+  const source = Array.isArray(value) ? value[0] : value;
+  const page = Number(source);
+  return Number.isInteger(page) && page > 1 ? page : 1;
+}
+
+export function blogPostsRequest(
+  filters: NonNullable<IBlogPostsRequest['filters']>,
+  page: number,
+  pageSize: number,
+) {
+  return {
+    filters,
+    paginate: { page, pp_items: pageSize },
+  };
+}
+
+export function blogJournalLoadAction(
+  filters: NonNullable<IBlogPostsRequest['filters']>,
+  page: number,
+  pageSize: number,
+  signal: AbortSignal,
+): BlogJournalLoadAction {
+  return {
+    endpoint: 'blog_posts_get',
+    request: blogPostsRequest(filters, page, pageSize),
+    signal,
+  };
+}
+
+export function blogCategoryHasPosts(category: IBlogCategory): boolean {
+  if (category.c_posts > 0) {
+    return true;
+  }
+  return (category.childs ?? []).some(blogCategoryHasPosts);
+}
+
+export function blogCategoryRows(
+  categories: readonly IBlogCategory[],
+  locale: string,
+) {
+  const rows: BlogCategoryRow[] = [];
+
+  function append(items: readonly IBlogCategory[], depth: number) {
+    for (const item of items) {
+      if (!blogCategoryHasPosts(item)) {
+        continue;
+      }
+      const name = getAvailableNestedValueFromObject(
+        item.locale,
+        locale,
+        'cg_name',
+      );
+      rows.push({ id: item.id, name: name || `#${item.id}`, depth });
+      append(item.childs ?? [], depth + 1);
+    }
+  }
+
+  append(categories, 0);
+  return rows;
+}
+
+export function mergeBlogPagination(
+  previous: Partial<IApiPagination>,
+  incoming: Partial<IApiPagination> | null | undefined,
+) {
+  return {
+    ...previous,
+    ...Object.fromEntries(
+      Object.entries(incoming ?? {}).filter(([, value]) => value !== undefined),
+    ),
+  };
+}