Replace tp.execute() → tp() & tpForAsideMenu.execute() → tUI() (#121)

ekaterinburgdev · Dec 20, 2023 · 4da39a2 · 4da39a2
1 parent e147ec1
commit 4da39a2
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 56 deletions.
diff --git a/components/ArrowNavLink/ArrowNavLink.jsx b/components/ArrowNavLink/ArrowNavLink.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
 import cn from 'classnames'
-import tp from '../../utils/typograf/typograf.config'
+import t from '../../utils/typograf'
 
 import styles from './arrow.module.css'
 
@@ -28,7 +28,7 @@ export function ArrowNavLink({ nextPageIndex, tableOfContentArr, pageUrl, catalo
 
             <br />
 
-            <span className={cn(styles.arrowNavLinkNextText)}>{tp.execute(title)}</span>
+            <span className={cn(styles.arrowNavLinkNextText)}>{t(title)}</span>
         </Link>
     )
 }
diff --git a/components/ManualPage/ManualPage.jsx b/components/ManualPage/ManualPage.jsx
@@ -1,8 +1,6 @@
 import React, { Fragment } from 'react'
+import t from '../../utils/typograf'
 import Image from 'next/image'
-
-import styles from './ManualPage.module.css'
-import tp from '../../utils/typograf/typograf.config'
 import { H1, H2, H3 } from '../NotionTypes/Headings/Headings'
 import Bookmark from '../NotionTypes/Bookmark/Bookmark'
 import UnorderedList from '../NotionTypes/Lists/Unordered/Unordered'
@@ -20,6 +18,8 @@ import { Callout } from '../NotionTypes/Callout/Callout'
 import { Iframe } from '../NotionTypes/Iframe/Iframe'
 import { ManualTitle } from '../ManualTitle/ManualTitle'
 
+import styles from './ManualPage.module.css'
+
 function ManualPage({
     pageName,
     pageList,
@@ -124,7 +124,7 @@ function ManualPage({
                 <div className={styles.manualName}>
                     <ManualTitle title={catalogTitle} pageUrl={currentPageUrl[0]} />
                 </div>
-                <h1 className={styles.pageName}>{tp.execute(pageName)}</h1>
+                <h1 className={styles.pageName}>{t(pageName)}</h1>
                 {pageList.map((cl) => (
                     <Fragment key={cl.id}>{getColumnItem(cl)}</Fragment>
                 ))}

diff --git a/components/ManualTitle/ManualTitle.jsx b/components/ManualTitle/ManualTitle.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import cn from 'classnames'
-import { tpForAsideMenu } from '../../utils/typograf/typograf.config'
-
+import { tUI } from '../../utils/typograf'
 import Link from 'next/link'
 
 import styles from './ManualTitle.module.css'
@@ -19,7 +18,7 @@ export function ManualTitle({ title, pageUrl }) {
                 }}
                 className={cn(styles.ManualTitle__caption)}
             >
-                {tpForAsideMenu.execute(title)}
+                {tUI(title)}
             </Link>
         </div>
     )

diff --git a/components/TableOfContents/TableOfContents.jsx b/components/TableOfContents/TableOfContents.jsx
@@ -1,15 +1,15 @@
 import React, { useEffect, useContext, Fragment } from 'react'
+import cn from 'classnames'
 import Link from 'next/link'
 import Head from 'next/head'
-import cn from 'classnames'
+import { tUI } from '../../utils/typograf'
 import scrollIntoView from 'scroll-into-view-if-needed'
-
 import { TocStateContext } from '../../pages/manuals/[[...pageUrl]]'
-import styles from './TableOfContents.module.css'
-import { tpForAsideMenu } from '../../utils/typograf/typograf.config'
 import { Ecosystem } from '../Ecosystem/Ecosystem'
 import { ManualTitle } from '../ManualTitle/ManualTitle'
 
+import styles from './TableOfContents.module.css'
+
 function InnerLink({ anchor, baseState, setState }) {
     return (
         <a
@@ -18,7 +18,7 @@ function InnerLink({ anchor, baseState, setState }) {
             href={`#${anchor.id}`}
             onClick={() => setState(!baseState)}
         >
-            <span>{tpForAsideMenu.execute(anchor.title[0])}</span>
+            <span>{tUI(anchor.title[0])}</span>
         </a>
     )
 }
@@ -67,7 +67,7 @@ function TableOfContents({ tableOfContentArr, currentPageUrl = [], anchorLinks,
                     onClick={() => setIsOpen(!isOpen)}
                 >
                     <span className={styles.linkNumber}>{order}.&nbsp;</span>
-                    {tpForAsideMenu.execute(title)}
+                    {tUI(title)}
                 </Link>
                 {currentPageUrl[1] && currentPageUrl[1] === url && anchorLinks.length > 0 && (
                     <hr className={styles.separator} />

diff --git a/pages/manuals/[[...pageUrl]].jsx b/pages/manuals/[[...pageUrl]].jsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { getTree, getPage } from '../../api/apiPage'
 import TableOfContents from '../../components/TableOfContents/TableOfContents'
 import ManualPage from '../../components/ManualPage/ManualPage'
-import tp from '../../utils/typograf/typograf.config'
+import t from '../../utils/typograf'
 import getManualToc from '../../utils/getManualToc'
 import { MANUAL_INDEX_PAGE } from '../../consts/manuals'
 import { Toolbar } from '../../components/Toolbar/Toolbar'
@@ -43,7 +43,7 @@ function GetPage({
 
         const getTextContent = (item) =>
             item.content.text.map((par) => {
-                const textContent = tp.execute(par?.text?.content)
+                const textContent = t(par?.text?.content)
                 if (!textContent) {
                     return
                 }

diff --git a/utils/manualsPreviewParser.js b/utils/manualsPreviewParser.js
@@ -1,5 +1,4 @@
-import tp from './typograf/typograf.config'
-
+import t from './typograf'
 import { MANUALS_HIDDEN } from '../consts/manuals'
 import { API_HOST } from '../consts/endpoints'
 
@@ -27,8 +26,8 @@ function parseManualsPreview(tree) {
             } = manualData.properties
 
             return {
-                title: tp.execute(Name?.title[0]?.text?.content || ''),
-                subtitle: tp.execute(subtitle?.rich_text[0]?.plain_text || ''),
+                title: t(Name?.title[0]?.text?.content || ''),
+                subtitle: t(subtitle?.rich_text[0]?.plain_text || ''),
                 pageUrl: pageUrl?.url || null,
                 color: color?.rich_text[0]?.plain_text || null,
                 status: status?.select?.name || null,

diff --git a/utils/textParser.jsx b/utils/textParser.jsx
@@ -2,11 +2,11 @@ import React from 'react'
 
 import { getNotionColor } from './colors'
 
-import tp from './typograf/typograf.config'
+import t from './typograf'
 
 export const getHeaderContent = (item) =>
     item.content.text.map((par) => {
-        const textContent = tp.execute(par?.text?.content)
+        const textContent = t(par?.text?.content)
 
         if (!textContent) {
             return
@@ -17,7 +17,7 @@ export const getHeaderContent = (item) =>
 
 export const getTextContent = (item, useTypograf = false) =>
     item.content.text.map((par) => {
-        const textContent = useTypograf ? tp.execute(par?.text?.content) : par?.text?.content
+        const textContent = useTypograf ? t(par?.text?.content) : par?.text?.content
         const url = par?.text?.link?.url ?? null
 
         const stylePar = {

diff --git a/utils/typograf.js b/utils/typograf.js
@@ -0,0 +1,30 @@
+import Typograf from 'typograf'
+
+const TYPOGRAF_DEFAULT_SETTINGS = {
+    locale: ['ru', 'en-US'],
+    disableRule: [
+        'common/space/trimRight',
+        'common/space/trimLeft',
+        'common/space/delBeforePunctuation',
+        'common/space/afterPunctuation',
+        'common/nbsp/replaceNbsp',
+    ],
+}
+
+const typograf = new Typograf(TYPOGRAF_DEFAULT_SETTINGS)
+const typografUI = new Typograf(TYPOGRAF_DEFAULT_SETTINGS)
+
+typografUI.disableRule([
+    'ru/punctuation/ano',
+    'ru/punctuation/exclamation',
+    'ru/punctuation/exclamationQuestion',
+    'ru/punctuation/hellipQuestion',
+])
+
+export default function t(string) {
+    return typograf.execute(string)
+}
+
+export function tUI(string) {
+    return typografUI.execute(string)
+}
diff --git a/utils/typograf/typograf.config.js b/utils/typograf/typograf.config.js