Get number from order field (#103)

* Get number from `order` field * Update number alignment styles
ekaterinburgdev · Dec 8, 2023 · 77d0ee6 · 77d0ee6
1 parent bb727b3
commit 77d0ee6
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/components/ManualPage/ManualPage.jsx b/components/ManualPage/ManualPage.jsx
@@ -25,8 +25,9 @@ import { ThemeContext } from '../../pages/_app'
 import { Iframe } from '../NotionTypes/Iframe/Iframe'
 
 function ManualPage({
-    pageList,
+    pageIndex,
     pageName,
+    pageList,
     tableOfContentArr,
     pageUrl,
     nextPageIndex,
@@ -46,9 +47,6 @@ function ManualPage({
         )}, ${Math.trunc(colorScheme.bgLight.color[2])}, ${colorScheme.bgLight.valpha})`
     )
 
-    // TODO: Remove after remove numbers from headings
-    const pageNumber = pageName.replace(/\. .*/, '')
-
     const getLine = (columnList) => {
         if (!columnList.children.length) {
             return
@@ -129,7 +127,7 @@ function ManualPage({
         <div className={styles.templateColumn}>
             <style
                 dangerouslySetInnerHTML={{
-                    __html: `body { counter-reset: page-chapter ${pageNumber} }`,
+                    __html: `body { counter-reset: page-chapter ${pageIndex} }`,
                 }}
             />
 
@@ -146,8 +144,7 @@ function ManualPage({
                     </div>
                 )}
                 <h1 className={styles.pageName}>
-                    {/* TODO: Remove after remove numbers from headings */}
-                    {tp.execute(pageName).replace(/.*\. /, '')}
+                    {tp.execute(pageName)}
                 </h1>
                 {pageList.map((cl) => (
                     <Fragment key={cl.id}>{getColumnItem(cl)}</Fragment>

diff --git a/components/TableOfContents/TableOfContents.jsx b/components/TableOfContents/TableOfContents.jsx
@@ -78,7 +78,7 @@ function TableOfContents({ tableOfContentArr, currentPageUrl = [], anchorLinks,
     }, [anchorLinks])
 
     // TODO: Сделать для большой вложенности...
-    const tableOfContentsLink = ({ url, title }) => (
+    const tableOfContentsLink = ({ url, order, title }) => (
         <Fragment key={url}>
             <li className={styles.link}>
                 <Link
@@ -106,6 +106,7 @@ function TableOfContents({ tableOfContentArr, currentPageUrl = [], anchorLinks,
                     })}
                     onClick={() => setIsOpen(!isOpen)}
                 >
+                    <span className={styles.linkNumber}>{order}.&nbsp;</span>
                     {tpForAsideMenu.execute(title)}
                 </Link>
                 {currentPageUrl[1] && currentPageUrl[1] === url && anchorLinks.length > 0 && (

diff --git a/components/TableOfContents/TableOfContents.module.css b/components/TableOfContents/TableOfContents.module.css
@@ -123,6 +123,7 @@ html:has(.open) {
 }
 
 .tableOfContentsLink {
+    display: flex;
     font-weight: 300;
     box-shadow: none;
     color: #14283C;

diff --git a/pages/manuals/[[...pageUrl]].jsx b/pages/manuals/[[...pageUrl]].jsx
@@ -19,6 +19,7 @@ export const TocStateContext = createContext(null)
 function GetPage({
     catalogTitle,
     catalogIndex,
+    pageIndex,
     pageName,
     pageList,
     pageImage,
@@ -108,8 +109,9 @@ function GetPage({
                         catalogTitle={catalogTitle}
                     />
                     <ManualPage
-                        pageList={pageList}
+                        pageIndex={pageIndex}
                         pageName={pageName}
+                        pageList={pageList}
                         tableOfContentArr={manualToc}
                         nextPageIndex={nextPageIndex}
                         catalogIndex={catalogIndex}
@@ -177,13 +179,14 @@ export async function getServerSideProps({ params: { pageUrl } }) {
     const catalogPage = await getPageByUrl(catalogPathname)
     const catalogIndex = children.findIndex((catalog) => catalog.id === catalogPage.id)
     const catalogTitle = catalogPage.content.title
+    const pageIndex = page?.node_properties?.properties?.order?.number
     const pageImage = page?.node_properties?.cover
 
     return {
         props: {
-            catalogPage,
             catalogTitle,
             catalogIndex,
+            pageIndex,
             pageName,
             pageList,
             pageImage,