add title of the article (still pending)

ref #651

src/components/ArticleV3/ArticleThebeSession.js

@@ -10,7 +10,7 @@ import { useExecutionScope } from './ExecutionScope'
 const ArticleThebeSession = ({ debug = false, kernelName }) => {
   const { starting, ready, connectAndStart, shutdown, restart, session } = useArticleThebe()
   const executeAll = useExecutionScope((state) => state.executeAll)
-  const attachSession = useExecutionScope((state) => state.attachSession);
+  const attachSession = useExecutionScope((state) => state.attachSession)
   let status = StatusIdle
 
   if (ready) {
@@ -20,9 +20,8 @@ const ArticleThebeSession = ({ debug = false, kernelName }) => {
   }
 
   useEffect(() => {
-    if (ready)
-      attachSession(session);
-  }, [ready]);
+    if (ready) attachSession(session)
+  }, [ready])
 
   const handleSession = () => {
     if (status === StatusIdle) {
@@ -34,7 +33,7 @@ const ArticleThebeSession = ({ debug = false, kernelName }) => {
     }
   }
   return (
-    <div className="ArticleThebeSession ps-1">
+    <div className="ArticleThebeSession p-2">
       <ArticleThebeSessionButton
         status={status}
         onClick={handleSession}

src/components/ArticleV3/ArticleToC.js

@@ -7,6 +7,7 @@ import { DisplayLayerCellIdxQueryParam } from '../../constants'
 import { NumberParam, useQueryParams, withDefault } from 'use-query-params'
 import './ArticleToC.css'
 import ArticleThebeSession from './ArticleThebeSession'
+import ArticleToCTitle from './ArticleToCTitle'
 
 const getToCSteps = ({ headingsPositions, cellsIndex, hideFigures = false }) => {
   const { groups } = headingsPositions
@@ -61,7 +62,7 @@ const getToCSteps = ({ headingsPositions, cellsIndex, hideFigures = false }) =>
 const ArticleToC = ({
   headingsPositions = [],
   paragraphs = [],
-  headerHeight = 140,
+  headerHeight = 100,
   kernelName = '-',
 }) => {
   const { t } = useTranslation()
@@ -114,6 +115,8 @@ const ArticleToC = ({
       }}
     >
       <ArticleThebeSession kernelName={kernelName} />
+      <ArticleToCTitle plainTitle={'title of the article'}></ArticleToCTitle>
+
       <span className="d-none">{t('table of contents')}</span>
       <ArticleToCSteps
         width={width * 0.16}

src/components/ArticleV3/ArticleToCTitle.js

@@ -0,0 +1,68 @@
+import React, { useLayoutEffect, useRef } from 'react'
+import { useSpring, a } from '@react-spring/web'
+import '../../styles/components/Article2/ArticleToCTitle.scss'
+
+function reduceTitleWithEllipsis(title = '') {
+  const maxTitleLength = 50
+  if (typeof title === 'string' && title.length > maxTitleLength) {
+    return title.slice(0, title.lastIndexOf(' ', maxTitleLength)) + '...'
+  }
+  return title
+}
+
+const ArticleToCTitle = ({ children, plainTitle = '', delay = 500 }) => {
+  const ref = useRef()
+  const isCollapsed = useRef(true)
+  const [style, api] = useSpring(() => ({
+    height: 0,
+    opacity: 0,
+    transform: 'translate3d(0, 0, 0)',
+    delay,
+  }))
+
+  useLayoutEffect(() => {
+    const collapse = () => {
+      if (isCollapsed.current) {
+        return
+      }
+      isCollapsed.current = true
+      api.start({
+        height: 0,
+        opacity: 0,
+      })
+    }
+    const expand = () => {
+      if (!isCollapsed.current) {
+        return
+      }
+      isCollapsed.current = false
+      api.start({
+        height: 50,
+        opacity: 1,
+      })
+    }
+    // if window scroll is more than 100px; show the title
+    const onScroll = () => {
+      if (!ref.current) return
+      if (window.scrollY < 100) {
+        collapse()
+        return
+      }
+      expand()
+    }
+    if (window.scrollY > 100) {
+      expand()
+    }
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <a.div style={style} ref={ref} className="ArticleToCTitle text-end">
+      <h1 className=" h5 text-dark mb-2 pe-3">{reduceTitleWithEllipsis(plainTitle)}</h1>
+      {children}
+    </a.div>
+  )
+}
+
+export default ArticleToCTitle