@teleporthq/teleport-plugin-next-data-source 0.43.74 → 0.44.0

package/src/product-price-sort.ts

@@ -191,14 +191,3 @@ export const generateSortFallbackFieldHelper = (tableName: string): string => {
 
   return ['function sortFallbackField(field) {', branches + '  return field', '}'].join('\n')
 }
-
-/**
- * A deterministic tiebreaker appended to every products ORDER BY.
- *
- * Without one, a paginated sort with ties — and "sort by discount" ties every
- * undiscounted product at zero — has no defined order between equal rows, so
- * the same product can appear on two pages or on none. `id` is on the products
- * table from its first migration.
- */
-export const generateSortTiebreakSql = (tableName: string): string =>
-  supportsProductPriceSort(tableName) ? ', "id" ASC' : ''

package/src/range-control.ts

@@ -0,0 +1,207 @@
+import * as types from '@babel/types'
+import {
+  DEFAULT_RANGE_TEMPLATE,
+  PAGINATION_CONTROL_ATTR,
+  RANGE_TEMPLATE_ATTR,
+  readJSXAttributeString,
+} from './pagination-controls'
+
+/**
+ * The `range` control: a text element ("Showing 1–8 of 12") filled with the
+ * live row range of the mapper it belongs to.
+ *
+ * The author's words stay theirs — they are read off `data-tq-range-template`
+ * with `{from}`, `{to}` and `{total}` standing for the numbers — and the drawn
+ * text is kept, verbatim, until the count endpoint has answered: `ds_N_total`
+ * is `null` until then, and a range of `NaN` or `undefined` is worse than the
+ * placeholder the designer chose.
+ *
+ *   buttons / numbered   from = total === 0 ? 0 : (page − 1) × perPage + 1
+ *   infinite scroll      from = total === 0 ? 0 : 1
+ *   both                 to   = min(page × perPage, total)
+ *
+ * In an appending list `page` is the number of pages loaded so far, so the
+ * same `to` counts the rows on screen. Numbers go through
+ * `toLocaleString("en-US")`, the way the canvas prints them.
+ *
+ * ⛔ The arithmetic must agree with the canvas renderer's
+ * (`packages/renderer/src/node-types/array-mapper-pagination.ts`): a builder
+ * styling "Showing 1–8 of 12" must see the same words on the published page.
+ */
+
+// tslint:disable:no-any
+
+export interface RangeControlVars {
+  /** `ds_N_total` — `null` until counted. */
+  totalVar: string
+  /** The page the list stands on: `ds_N_page`, or `ds_N_state.page` beside a search. */
+  currentPageExpr: types.Expression
+  perPage: number
+  /** An appending list always shows from the first row. */
+  infiniteScroll: boolean
+}
+
+const PLACEHOLDER = /\{(from|to|total)\}/g
+
+const total = (vars: RangeControlVars): types.Identifier => types.identifier(vars.totalVar)
+
+const page = (vars: RangeControlVars): types.Expression =>
+  types.cloneNode(vars.currentPageExpr, true) as types.Expression
+
+/** `total === 0 ? 0 : <firstRow>` */
+const unlessEmpty = (vars: RangeControlVars, firstRow: types.Expression): types.Expression =>
+  types.conditionalExpression(
+    types.binaryExpression('===', total(vars), types.numericLiteral(0)),
+    types.numericLiteral(0),
+    firstRow
+  )
+
+const buildFrom = (vars: RangeControlVars): types.Expression =>
+  unlessEmpty(
+    vars,
+    vars.infiniteScroll
+      ? types.numericLiteral(1)
+      : types.binaryExpression(
+          '+',
+          types.binaryExpression(
+            '*',
+            types.binaryExpression('-', page(vars), types.numericLiteral(1)),
+            types.numericLiteral(vars.perPage)
+          ),
+          types.numericLiteral(1)
+        )
+  )
+
+/** `Math.min(page * perPage, total)` */
+const buildTo = (vars: RangeControlVars): types.Expression =>
+  types.callExpression(types.memberExpression(types.identifier('Math'), types.identifier('min')), [
+    types.binaryExpression('*', page(vars), types.numericLiteral(vars.perPage)),
+    total(vars),
+  ])
+
+const buildNumber = (placeholder: string, vars: RangeControlVars): types.Expression => {
+  const value =
+    placeholder === 'from' ? buildFrom(vars) : placeholder === 'to' ? buildTo(vars) : total(vars)
+  return types.callExpression(types.memberExpression(value, types.identifier('toLocaleString')), [
+    types.stringLiteral('en-US'),
+  ])
+}
+
+const templateElement = (text: string, tail: boolean): types.TemplateElement =>
+  types.templateElement(
+    { raw: text.replace(/\\|`|\$\{/g, (match) => `\\${match}`), cooked: text },
+    tail
+  )
+
+/**
+ * The JSX printer writes a brace inside a static attribute as `&#123;` /
+ * `&#125;` so it is never read as an expression; the placeholders are braces,
+ * so the template is read back through that escaping.
+ */
+const decodeBraces = (text: string): string =>
+  text
+    .replace(/&#123;|&#x7b;|&lbrace;/gi, '{')
+    .replace(/&#125;|&#x7d;|&rbrace;/gi, '}')
+    .replace(/&amp;/g, '&')
+
+/** The author's template as a template literal, each placeholder a live number. */
+const buildLiveText = (template: string, vars: RangeControlVars): types.TemplateLiteral => {
+  const quasis: types.TemplateElement[] = []
+  const expressions: types.Expression[] = []
+  const placeholder = new RegExp(PLACEHOLDER.source, 'g')
+  let last = 0
+  let match = placeholder.exec(template)
+  while (match) {
+    quasis.push(templateElement(template.slice(last, match.index), false))
+    expressions.push(buildNumber(match[1], vars))
+    last = match.index + match[0].length
+    match = placeholder.exec(template)
+  }
+  quasis.push(templateElement(template.slice(last), true))
+  return types.templateLiteral(quasis, expressions)
+}
+
+/**
+ * Every `range` control under a component body, in document order. The body is
+ * a `BlockStatement`, so the walk has to cross statements, ternaries and the
+ * `cond && <jsx/>` of a gated section, not only JSX children.
+ */
+export const findRangeControls = (root: any): any[] => {
+  const found: any[] = []
+  const traverse = (node: any): void => {
+    if (!node || typeof node !== 'object') {
+      return
+    }
+    if (
+      node.type === 'JSXElement' &&
+      readJSXAttributeString(node, PAGINATION_CONTROL_ATTR) === 'range'
+    ) {
+      found.push(node)
+    }
+    if (Array.isArray(node.children)) {
+      node.children.forEach(traverse)
+    }
+    if (Array.isArray(node.body)) {
+      node.body.forEach(traverse)
+    } else {
+      traverse(node.body)
+    }
+    traverse(node.consequent)
+    traverse(node.alternate)
+    traverse(node.left)
+    traverse(node.right)
+    traverse(node.test)
+    traverse(node.expression)
+    traverse(node.argument)
+  }
+  traverse(root)
+  return found
+}
+
+/**
+ * The element's own children as one expression, so they can be the fallback of
+ * a ternary: plain text becomes a string, anything richer rides along in a
+ * fragment.
+ */
+const drawnText = (children: any[]): types.Expression => {
+  const texts: string[] = []
+  for (const child of children) {
+    if (child.type === 'JSXText') {
+      texts.push(child.value)
+    } else if (
+      child.type === 'JSXExpressionContainer' &&
+      child.expression?.type === 'StringLiteral'
+    ) {
+      texts.push(child.expression.value)
+    } else {
+      return types.jsxFragment(types.jsxOpeningFragment(), types.jsxClosingFragment(), children)
+    }
+  }
+  return types.stringLiteral(texts.join('').replace(/\s+/g, ' ').trim())
+}
+
+/**
+ * `{total === null ? <drawn text> : `<template with live numbers>`}` in place of
+ * the element's children. The marker and template attributes stay on the
+ * element, so the published DOM carries the same contract the canvas reads.
+ */
+export const wireRangeControl = (node: any, vars: RangeControlVars): void => {
+  const template =
+    decodeBraces(readJSXAttributeString(node, RANGE_TEMPLATE_ATTR)) || DEFAULT_RANGE_TEMPLATE
+  const drawn = drawnText(Array.isArray(node.children) ? node.children : [])
+  node.children = [
+    types.jsxExpressionContainer(
+      types.conditionalExpression(
+        types.binaryExpression('===', total(vars), types.nullLiteral()),
+        drawn,
+        buildLiveText(template, vars)
+      )
+    ),
+  ]
+  if (node.openingElement) {
+    node.openingElement.selfClosing = false
+  }
+  if (!node.closingElement && node.openingElement?.name) {
+    node.closingElement = types.jsxClosingElement(types.cloneNode(node.openingElement.name, true))
+  }
+}

package/src/row-order.ts

@@ -0,0 +1,55 @@
+import { isListingTableWithId } from './list-sort-order'
+
+interface ColumnLike {
+  name?: unknown
+  isPrimaryKey?: unknown
+}
+
+/**
+ * The column that tells a table's rows apart, read from the table the project
+ * saved: its primary key, else a column named `id`. The platform listing
+ * tables (products, blog posts, booking items) have `id` from their first
+ * migration. Null when neither is known — then nothing is added,
+ * rather than a column that may not exist.
+ */
+export const rowIdentityColumn = (
+  config: Record<string, unknown>,
+  tableName: string
+): string | null => {
+  const selectedTables = (config as { selectedTables?: Record<string, { columns?: unknown }> })
+    .selectedTables
+  const saved = selectedTables?.[tableName]?.columns
+  const columns = (Array.isArray(saved) ? (saved as ColumnLike[]) : []).filter(
+    (column) => typeof column?.name === 'string'
+  )
+  const key =
+    columns.find((column) => column.isPrimaryKey === true)?.name ??
+    columns.find((column) => column.name === 'id')?.name
+  if (typeof key === 'string') {
+    return key
+  }
+  return isListingTableWithId(tableName) ? 'id' : null
+}
+
+/**
+ * The `rowOrderTiebreak(fields, direction)` helper a SQL fetcher embeds: what
+ * ends an ORDER BY so that it orders every row.
+ *
+ * Rows that share every requested key have no order of their own, and the
+ * database deals them out differently for each page — "sort by discount" ties
+ * every undiscounted product at zero, and an import dates hundreds of articles
+ * alike — so a paginated list repeated some rows and never showed others.
+ * The tie follows the last key's direction, as the editor's canvas does.
+ */
+export const generateRowOrderTiebreakHelper = (identityColumn: string | null): string => {
+  if (!identityColumn) {
+    return "const rowOrderTiebreak = () => ''"
+  }
+  const quoted = `"${identityColumn.replace(/"/g, '""')}"`
+  return [
+    'const rowOrderTiebreak = (fields, direction) =>',
+    `  fields.includes(${JSON.stringify(identityColumn)}) ? '' : ${JSON.stringify(
+      `, ${quoted} `
+    )} + direction`,
+  ].join('\n')
+}

package/src/search-input.ts

@@ -0,0 +1,190 @@
+import * as types from '@babel/types'
+import { readJSXAttributeString } from './pagination-controls'
+
+/**
+ * The search inputs of a page, and the mapper each one searches.
+ *
+ * Two kinds exist. The platform's own `DataSourceSearchInputNode` renders with
+ * a `search-input` class and is paired with a search-enabled mapper BY ORDER
+ * — the first such input searches the first such mapper. A page's OWN text
+ * input, kept where its author drew it, is marked `data-tq-search-for` with
+ * the node id of the mapper it searches — the marker the editor writes
+ * (`listing-search-field.ts`) and the canvas renderer binds by
+ * (`mapper-search-registry.ts`). Marked inputs are paired by that id and
+ * never take a place in the order, so a template's toolbar box beside a
+ * platform listing shifts nothing.
+ *
+ * Both are wired the same way: controlled by the mapper's search query state,
+ * which the mapper debounces into its fetch and keeps in the address.
+ */
+
+export const SEARCH_FOR_ATTR = 'data-tq-search-for'
+
+// tslint:disable:no-any
+
+export interface SearchInput {
+  node: any
+  /** The mapper node id a marked input names; undefined for a platform input paired by order. */
+  forNodeId?: string
+}
+
+function isInput(node: any): boolean {
+  return node?.type === 'JSXElement' && node.openingElement?.name?.name === 'input'
+}
+
+function hasSearchInputClass(node: any): boolean {
+  return readJSXAttributeString(node, 'className').includes('search-input')
+}
+
+/** Every search input under `root`, in document order. */
+export function findAllSearchInputsInJSX(root: any): SearchInput[] {
+  const results: SearchInput[] = []
+
+  const traverse = (node: any): void => {
+    if (!node) {
+      return
+    }
+
+    if (isInput(node)) {
+      const forNodeId = readJSXAttributeString(node, SEARCH_FOR_ATTR)
+      if (forNodeId) {
+        results.push({ node, forNodeId })
+      } else if (hasSearchInputClass(node)) {
+        results.push({ node })
+      }
+    }
+
+    if (node.children && Array.isArray(node.children)) {
+      node.children.forEach((c: any) => traverse(c))
+    }
+    if (node.body) {
+      if (Array.isArray(node.body)) {
+        node.body.forEach((s: any) => traverse(s))
+      } else {
+        traverse(node.body)
+      }
+    }
+    if (node.consequent) {
+      traverse(node.consequent)
+    }
+    if (node.alternate) {
+      traverse(node.alternate)
+    }
+    // `{activeTabIndex === 0 && (<div>…<DataProvider/>…</div>)}` — a tab
+    // panel, a gated section: the provider sits on the RIGHT of a logical
+    // expression (or in a ternary's `test`), which is not a child, a body or
+    // an argument. Left unvisited, the products list under the first tab of
+    // a shop was never paginated or seeded, and rendered nothing.
+    if (node.left) {
+      traverse(node.left)
+    }
+    if (node.right) {
+      traverse(node.right)
+    }
+    if (node.test) {
+      traverse(node.test)
+    }
+    if (node.expression) {
+      traverse(node.expression)
+    }
+    if (node.argument) {
+      traverse(node.argument)
+    }
+  }
+
+  traverse(root)
+  return results
+}
+
+/**
+ * The search-enabled usage each input searches: a marked input's by the mapper
+ * node id it names, a platform input's by its place among the platform inputs.
+ */
+export function pairSearchInputs<Usage extends { searchEnabled: boolean; nodeId?: string }>(
+  inputs: SearchInput[],
+  usages: Usage[]
+): Map<any, Usage> {
+  const searchable = usages.filter((usage) => usage.searchEnabled)
+  const paired = new Map<any, Usage>()
+  let position = 0
+  for (const input of inputs) {
+    if (input.forNodeId) {
+      const named = searchable.find((candidate) => candidate.nodeId === input.forNodeId)
+      if (named) {
+        paired.set(input.node, named)
+      }
+      continue
+    }
+    const next = searchable[position]
+    position += 1
+    if (next) {
+      paired.set(input.node, next)
+    }
+  }
+  return paired
+}
+
+/**
+ * Controls the input by the mapper's query: `value` reads it, `onChange`
+ * writes it. A marked input may sit inside a form of the page's own; Enter
+ * in it must not submit that form and reload the filtered list away.
+ */
+export function wireSearchInput(
+  input: SearchInput,
+  vars: { searchQueryVar: string; setSearchQueryVar: string }
+): void {
+  const attributes = input.node.openingElement.attributes.filter(
+    (attr: any) => !['onChange', 'value', 'onKeyDown'].includes(attr.name?.name)
+  )
+  attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('onChange'),
+      types.jsxExpressionContainer(
+        types.arrowFunctionExpression(
+          [types.identifier('e')],
+          types.callExpression(types.identifier(vars.setSearchQueryVar), [
+            types.memberExpression(
+              types.memberExpression(types.identifier('e'), types.identifier('target')),
+              types.identifier('value')
+            ),
+          ])
+        )
+      )
+    ),
+    types.jsxAttribute(
+      types.jsxIdentifier('value'),
+      types.jsxExpressionContainer(types.identifier(vars.searchQueryVar))
+    )
+  )
+  if (input.forNodeId) {
+    attributes.push(
+      types.jsxAttribute(
+        types.jsxIdentifier('onKeyDown'),
+        types.jsxExpressionContainer(
+          types.arrowFunctionExpression(
+            [types.identifier('e')],
+            types.blockStatement([
+              types.ifStatement(
+                types.binaryExpression(
+                  '===',
+                  types.memberExpression(types.identifier('e'), types.identifier('key')),
+                  types.stringLiteral('Enter')
+                ),
+                types.expressionStatement(
+                  types.callExpression(
+                    types.memberExpression(
+                      types.identifier('e'),
+                      types.identifier('preventDefault')
+                    ),
+                    []
+                  )
+                )
+              ),
+            ])
+          )
+        )
+      )
+    )
+  }
+  input.node.openingElement.attributes = attributes
+}

package/src/sort-utils.ts

@@ -63,6 +63,31 @@ const toExpressionAndDeps = (
   return { expr: parsed, deps: Array.from(deps) }
 }
 
+/**
+ * The `{ field, order }` of a sort the UIDL FIXES — a static column and a
+ * static direction (or none: ascending) — or undefined for one bound to state.
+ * A fixed sort is a static sort: it rides on the server-side first-page fetch
+ * and the client keeps that page, which a dynamic sort cannot let it do.
+ */
+export const readFixedSort = (
+  sort: UIDLStaticValue | UIDLExpressionValue | undefined,
+  sortDirection: UIDLStaticValue | UIDLExpressionValue | undefined
+): { field: string; order: 'asc' | 'desc' } | undefined => {
+  if (sort?.type !== 'static' || typeof sort.content !== 'string' || !sort.content.trim()) {
+    return undefined
+  }
+  if (
+    sortDirection &&
+    (sortDirection.type !== 'static' || typeof sortDirection.content !== 'string')
+  ) {
+    return undefined
+  }
+  const direction = String(sortDirection?.content ?? '')
+    .trim()
+    .toLowerCase()
+  return { field: sort.content.trim(), order: direction.startsWith('desc') ? 'desc' : 'asc' }
+}
+
 export const extractDynamicSort = (
   sort: UIDLStaticValue | UIDLExpressionValue | undefined,
   sortDirection: UIDLStaticValue | UIDLExpressionValue | undefined

package/src/transformations/blog-adjacent-posts.ts

@@ -17,14 +17,25 @@ const ADJACENT_POST_CANDIDATES = 5
  *
  * MUST mirror `findAdjacentBlogPosts` in teleport-gui
  * `packages/renderer/src/utils/blog-adjacent-posts.ts` (the canvas).
+ *
+ * In Manual Order (`arranged`) a post walks the published posts of its
+ * PRIMARY category (the first of `category_ids`) the way the author arranged
+ * them: the ones with a place (`sort_order`) by it, then the rest newest
+ * first, ties by id — "previous" the one above it, "next" the one below. The
+ * category is read off each row in code, since a list cell may be JSON or a
+ * comma-separated list (see `array-overlap-sql.ts`). A post without a
+ * category, or a table the query cannot read (a column it lacks), walks the
+ * newest-first order above. MUST mirror `findArrangedAdjacentPosts` in
+ * teleport-gui `apps/gui/app/project-page/features/blog/utils/arranged-order.ts`.
  */
-export const generateAdjacentPostsCode = (): string => `
+export const generateAdjacentPostsCode = (postsTable: string, arranged = false): string => `
 var BLOG_ADJACENT_CANDIDATES = ${ADJACENT_POST_CANDIDATES}
+var BLOG_ARRANGED_ORDER = ${arranged}
 
 function blogAdjacentPostsSql(comparison, direction) {
   return (
-    'SELECT p.* FROM teleport_blog_posts p,' +
-    ' (SELECT created_at, id FROM teleport_blog_posts WHERE id = $1) cur' +
+    'SELECT p.* FROM ${postsTable} p,' +
+    ' (SELECT created_at, id FROM ${postsTable} WHERE id = $1) cur' +
     " WHERE p.status = 'published' AND (p.created_at, p.id) " + comparison + ' (cur.created_at, cur.id)' +
     ' ORDER BY p.created_at ' + direction + ', p.id ' + direction +
     ' LIMIT ' + BLOG_ADJACENT_CANDIDATES
@@ -44,6 +55,69 @@ function firstLinkableBlogPost(result) {
   return null
 }
 
+function blogPlaceOf(row) {
+  var raw = pickFirst(row.sort_order, row.sortOrder)
+  if (raw === null || raw === undefined || raw === '') return null
+  var value = Number(raw)
+  return isFinite(value) ? value : null
+}
+
+// The arranged posts by their place, then the rest newest first, ties by id descending.
+function compareBlogPlaces(a, b) {
+  var placeA = blogPlaceOf(a)
+  var placeB = blogPlaceOf(b)
+  if (placeA !== placeB) {
+    if (placeA === null) return 1
+    if (placeB === null) return -1
+    return placeA - placeB
+  }
+  var byDate =
+    normalizeTimestamp(pickFirst(b.created_at, b.createdAt)) -
+    normalizeTimestamp(pickFirst(a.created_at, a.createdAt))
+  if (byDate !== 0) return byDate
+  var idA = String(a.id)
+  var idB = String(b.id)
+  return idA < idB ? 1 : idA > idB ? -1 : 0
+}
+
+// { previous, next } along the post's primary category in Manual Order, or
+// null when the post has none (the caller then walks the newest-first order).
+async function getArrangedAdjacentPosts(client, record) {
+  var primary = parseJsonArray(record.category_ids)[0]
+  if (!primary) return null
+  var postId = String(record.id)
+  var listed = await client.query(
+    "SELECT id, category_ids, sort_order, created_at FROM ${postsTable} WHERE status = 'published' OR id = $1",
+    [postId]
+  )
+  var chain = (listed && Array.isArray(listed.rows) ? listed.rows : [])
+    .filter(function (row) {
+      return String(row.id) === postId || parseJsonArray(row.category_ids)[0] === primary
+    })
+    .sort(compareBlogPlaces)
+  var at = -1
+  for (var i = 0; i < chain.length; i++) {
+    if (String(chain[i].id) === postId) at = i
+  }
+  if (at < 0) return null
+  var above = chain.slice(Math.max(0, at - BLOG_ADJACENT_CANDIDATES), at).reverse()
+  var below = chain.slice(at + 1, at + 1 + BLOG_ADJACENT_CANDIDATES)
+  var ids = above.concat(below).map(function (row) { return String(row.id) })
+  if (ids.length === 0) return { previous: null, next: null }
+  var full = await client.query(
+    'SELECT p.* FROM ${postsTable} p WHERE p.id::text = ANY($1::text[])',
+    [ids]
+  )
+  var byId = {}
+  ;(full && Array.isArray(full.rows) ? full.rows : []).forEach(function (row) {
+    byId[String(row.id)] = row
+  })
+  var rowsOf = function (entries) {
+    return { rows: entries.map(function (row) { return byId[String(row.id)] }) }
+  }
+  return { previous: firstLinkableBlogPost(rowsOf(above)), next: firstLinkableBlogPost(rowsOf(below)) }
+}
+
 // { [postId]: { previous, next } } — raw rows or null — for a single-record
 // fetch; {} otherwise and on any failure (the navigation then hides).
 async function getAdjacentPostsMap(getClientFn, records) {
@@ -56,6 +130,18 @@ async function getAdjacentPostsMap(getClientFn, records) {
   try {
     client = getClientFn()
     await client.connect()
+    var arranged = null
+    if (BLOG_ARRANGED_ORDER) {
+      try {
+        arranged = await getArrangedAdjacentPosts(client, records[0])
+      } catch (e) {
+        // A table without the columns: the newest-first order below.
+      }
+    }
+    if (arranged) {
+      map[String(postId)] = arranged
+      return map
+    }
     var older = await client.query(blogAdjacentPostsSql('<', 'DESC'), [String(postId)])
     var newer = await client.query(blogAdjacentPostsSql('>', 'ASC'), [String(postId)])
     map[String(postId)] = {

package/src/transformations/blog-comments.ts

@@ -27,17 +27,17 @@ export const BLOG_COMMENTS_RENDER_LIMIT = 200
  * MUST mirror `buildBlogComments` in teleport-gui
  * `packages/renderer/src/utils/blog-comments.ts` (the canvas).
  */
-export const generateBlogCommentsCode = (): string => `
+export const generateBlogCommentsCode = (commentsTable: string): string => `
 var BLOG_COMMENTS_RENDER_LIMIT = ${BLOG_COMMENTS_RENDER_LIMIT}
 
 var BLOG_COMMENTS_SQL =
   'WITH top AS (' +
-  ' SELECT id FROM teleport_blog_comments' +
+  ' SELECT id FROM ${commentsTable}' +
   " WHERE post_id = $1 AND parent_id IS NULL AND status = 'approved'" +
   ' ORDER BY created_at DESC, id DESC LIMIT ' + BLOG_COMMENTS_RENDER_LIMIT +
   ')' +
   ' SELECT c.id, c.parent_id, c.author_name, c.content, c.is_author_reply, c.created_at' +
-  ' FROM teleport_blog_comments c' +
+  ' FROM ${commentsTable} c' +
   " WHERE c.post_id = $1 AND c.status = 'approved'" +
   ' AND (c.id IN (SELECT id FROM top) OR c.parent_id IN (SELECT id FROM top))' +
   ' ORDER BY c.created_at ASC, c.id ASC'
@@ -45,10 +45,10 @@ var BLOG_COMMENTS_SQL =
 // Every approved comment the page could show — a reply counts only while the
 // comment it answers is approved too.
 var BLOG_COMMENTS_COUNT_SQL =
-  'SELECT COUNT(*) AS n FROM teleport_blog_comments c' +
+  'SELECT COUNT(*) AS n FROM ${commentsTable} c' +
   " WHERE c.post_id = $1 AND c.status = 'approved'" +
   ' AND (c.parent_id IS NULL OR EXISTS (' +
-  ' SELECT 1 FROM teleport_blog_comments p' +
+  ' SELECT 1 FROM ${commentsTable} p' +
   " WHERE p.id = c.parent_id AND p.status = 'approved'))"
 
 function blogAuthorInitials(name) {