Skip to content

Commit

Permalink
Fix/issue toc audit (#673)
Browse files Browse the repository at this point in the history
* add up to date env variables

* upgrade axios and typescript

* Create tsconfig.json

* update display of logs

* fix random issue when slider.current is undefined after timeout

* fix #671 adjust scroll

* add Cell observer around bibliography

* add bibliography cell (fake)

* eslint

* npm audit

* fix github workflow
  • Loading branch information
danieleguido authored Nov 8, 2024
1 parent e43e4b6 commit 250483a
Show file tree
Hide file tree
Showing 16 changed files with 2,334 additions and 1,996 deletions.
52 changes: 26 additions & 26 deletions .github/workflows/docker-build-publish-release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,29 @@ jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Fetch Prune Unshallow Tags
run: git fetch --prune --unshallow --tags
- name: Extract branch name
shell: bash
run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
id: extract_branch
- name: Extract commit hash
shell: bash
run: echo "##[set-output name=hash;]$(git rev-parse --short ${GITHUB_SHA})"
id: extract_hash
- name: Extract latest tag
shell: bash
run: echo "RELEASE_VERSION="$(git describe --tags --abbrev=0 ${GITHUB_SHA}) >> $GITHUB_ENV
- name: Publish to Registry
uses: elgohr/Publish-Docker-Github-Action@v4
env:
GIT_TAG: ${{ env.RELEASE_VERSION }}
GIT_BRANCH: ${{ steps.extract_branch.outputs.branch }}
GIT_REVISION: ${{ steps.extract_hash.outputs.hash }}
with:
name: c2dhunilu/journal-of-digital-history
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_PASSWORD }}
buildargs: GIT_TAG,GIT_BRANCH,GIT_REVISION
tags: "${{ env.RELEASE_VERSION }}"
- uses: actions/checkout@master
- name: Fetch Prune Unshallow Tags
run: git fetch --prune --unshallow --tags
- name: Extract github metadata GITHUB_SHA, GIT_BRANCH, GIT_TAG
shell: bash
run: |
echo "GIT_COMMIT_SHA=${GITHUB_SHA}" >> $GITHUB_ENV
echo "GIT_REMOTE_URL=$(git config --get remote.origin.url)" >> $GITHUB_ENV
echo "GIT_BRANCH=$(echo ${GITHUB_REF#refs/heads/})" >> $GITHUB_ENV
echo "GIT_TAG=$(echo ${GITHUB_REF#refs/tags/})" >> $GITHUB_ENV
echo "BUILD_DATE=$(date -u +'%Y-%m-%dT%H:%M:%SZ')" >> $GITHUB_ENV
- name: Publish to Registry
uses: elgohr/Publish-Docker-Github-Action@v5
env:
GIT_COMMIT_SHA: ${{ env.GIT_COMMIT_SHA }}
GIT_REMOTE_URL: ${{ env.GIT_REMOTE_URL }}
GIT_BRANCH: ${{ env.GIT_BRANCH }}
GIT_TAG: ${{ env.GIT_TAG }}
BUILD_DATE: ${{ env.BUILD_DATE }}
with:
name: c2dhunilu/journal-of-digital-history
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_PASSWORD }}
buildargs: |
GIT_COMMIT_SHA, GIT_REMOTE_URL, GIT_BRANCH, GIT_TAG, BUILD_DATE
tags: '${{ env.GIT_TAG }}'
51 changes: 25 additions & 26 deletions .github/workflows/docker-build-publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,28 @@ jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Fetch Prune Unshallow Tags
run: git fetch --prune --unshallow --tags
- name: Extract branch name
shell: bash
run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
id: extract_branch
- name: Extract commit hash
shell: bash
run: echo "##[set-output name=hash;]$(git rev-parse --short ${GITHUB_SHA})"
id: extract_hash
- name: Extract latest tag
shell: bash
run: echo "RELEASE_VERSION="$(git describe --tags --abbrev=0 ${GITHUB_SHA}) >> $GITHUB_ENV
- name: Publish to Registry
uses: elgohr/Publish-Docker-Github-Action@master
env:
GIT_TAG: ${{ env.RELEASE_VERSION }}
GIT_BRANCH: ${{ steps.extract_branch.outputs.branch }}
GIT_REVISION: ${{ steps.extract_hash.outputs.hash }}
with:
name: c2dhunilu/journal-of-digital-history
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_PASSWORD }}
buildargs: GIT_TAG,GIT_BRANCH,GIT_REVISION
tags: "latest"
- uses: actions/checkout@master
- name: Fetch Prune Unshallow Tags
run: git fetch --prune --unshallow --tags
- name: Extract github metadata GITHUB_SHA, GIT_BRANCH, GIT_TAG
shell: bash
run: |
echo "GIT_COMMIT_SHA=${GITHUB_SHA}" >> $GITHUB_ENV
echo "GIT_REMOTE_URL=$(git config --get remote.origin.url)" >> $GITHUB_ENV
echo "GIT_BRANCH=$(echo ${GITHUB_REF#refs/heads/})" >> $GITHUB_ENV
echo "BUILD_DATE=$(date -u +'%Y-%m-%dT%H:%M:%SZ')" >> $GITHUB_ENV
- name: Publish to Registry
uses: elgohr/Publish-Docker-Github-Action@master
env:
GIT_TAG: latest
GIT_COMMIT_SHA: ${{ env.GIT_COMMIT_SHA }}
GIT_REMOTE_URL: ${{ env.GIT_REMOTE_URL }}
GIT_BRANCH: ${{ env.GIT_BRANCH }}
BUILD_DATE: ${{ env.BUILD_DATE }}
with:
name: c2dhunilu/journal-of-digital-history
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_PASSWORD }}
buildargs: |
GIT_COMMIT_SHA, GIT_REMOTE_URL, GIT_BRANCH, GIT_TAG, BUILD_DATE
tags: 'latest'
14 changes: 9 additions & 5 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
FROM node:18.12-alpine as builder
FROM node:23-alpine as builder

ARG GIT_TAG
ARG GIT_COMMIT_SHA
ARG GIT_REMOTE_URL
ARG GIT_BRANCH
ARG GIT_REVISION
ARG GIT_TAG
ARG BUILD_DATE

WORKDIR /jdh

Expand All @@ -22,9 +24,11 @@ COPY src/data/mock-api ./public/mock-api
ENV NODE_ENV production
ENV NODE_OPTIONS --max_old_space_size=4096

ENV REACT_APP_GIT_TAG=${GIT_TAG}
ENV REACT_APP_GIT_COMMIT_SHA=${GIT_COMMIT_SHA}
ENV REACT_APP_GIT_REMOTE_URL=${GIT_REMOTE_URL}
ENV REACT_APP_GIT_BRANCH=${GIT_BRANCH}
ENV REACT_APP_GIT_REVISION=${GIT_REVISION}
ENV REACT_APP_GIT_TAG=${GIT_TAG}
ENV REACT_APP_BUILD_DATE=${BUILD_DATE}

RUN yarn build
RUN yarn build-storybook
Expand Down
2 changes: 1 addition & 1 deletion Dockerfile.dev
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ COPY .env .

ENV REACT_APP_GIT_TAG=${GIT_TAG}
ENV REACT_APP_GIT_BRANCH=${GIT_BRANCH}
ENV REACT_APP_GIT_REVISION=${GIT_REVISION}
ENV REACT_APP_GIT_COMMIT_SHA=${GIT_REVISION}

CMD ["yarn", "start"]

Expand Down
32 changes: 21 additions & 11 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,35 @@ BUILD_TAG ?= latest

run:
docker-compose down --remove-orphans && \
GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
GIT_COMMIT_SHA=$(shell git rev-parse HEAD) \
GIT_REMOTE_URL=$(shell git config --get remote.origin.url) \
GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
GIT_REVISION=$(shell git rev-parse --short HEAD) \
docker-compose up --build
GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
BUILD_DATE=$(shell date -u +"%Y-%m-%dT%H:%M:%SZ") \
docker-compose up --build .

run-dev:
REACT_APP_GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
run-dev:
REACT_APP_GIT_COMMIT_SHA=$(shell git rev-parse HEAD) \
REACT_APP_GIT_REMOTE_URL=$(shell git config --get remote.origin.url) \
REACT_APP_GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
REACT_APP_GIT_REVISION=$(shell git rev-parse --short HEAD) \
REACT_APP_GIT_TAG=${BUILD_TAG}
REACT_APP_BUILD_DATE=$(shell date -u +"%Y-%m-%dT%H:%M:%SZ") \
yarn start

run-build:
REACT_APP_GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
REACT_APP_GIT_COMMIT_SHA=$(shell git rev-parse HEAD) \
REACT_APP_GIT_REMOTE_URL=$(shell git config --get remote.origin.url) \
REACT_APP_GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
REACT_APP_GIT_REVISION=$(shell git rev-parse --short HEAD) \
REACT_APP_GIT_TAG=${BUILD_TAG} \
REACT_APP_BUILD_DATE=$(shell date -u +"%Y-%m-%dT%H:%M:%SZ") \
yarn build

run-build-netlify:
REACT_APP_GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
REACT_APP_GIT_COMMIT_SHA=$(shell git rev-parse HEAD) \
REACT_APP_GIT_REMOTE_URL=$(shell git config --get remote.origin.url) \
REACT_APP_GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
REACT_APP_GIT_REVISION=$(shell git rev-parse --short HEAD) \
REACT_APP_GIT_TAG=${BUILD_TAG} \
REACT_APP_BUILD_DATE=$(shell date -u +"%Y-%m-%dT%H:%M:%SZ") \
yarn build && \
cp _redirects build/ && \
netlify deploy --alias=${BUILD_TAG} --dir=build
Expand All @@ -33,6 +41,8 @@ run-deploy-netlify:

build-docker-image:
docker build -t c2dhunilu/journal-of-digital-history:${BUILD_TAG} \
--build-arg GIT_COMMIT_SHA=$(shell git rev-parse HEAD) \
--build-arg GIT_REMOTE_URL=$(shell git config --get remote.origin.url) \
--build-arg GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
--build-arg GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
--build-arg GIT_REVISION=$(shell git rev-parse --short HEAD) .
--build-arg BUILD_DATE=$(shell date -u +"%Y-%m-%dT%H:%M:%SZ") .
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Makefile contains a couple of useful commands that inject local environmental va
run-dev:
REACT_APP_GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
REACT_APP_GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
REACT_APP_GIT_REVISION=$(shell git rev-parse --short HEAD) \
REACT_APP_GIT_COMMIT_SHA=$(shell git rev-parse --short HEAD) \
yarn start

In development environment, to add a PROXY api different than `http://localhost` add the REACT_APP_PROXY as env variable (it can be stored in a local `.env.development` file)
Expand Down
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^26.0.9",
"@types/node": "^14.0.27",
"@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8",
"@types/node": "^20.14.12",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@u-wave/react-vimeo": "^0.9.8",
"@visx/axis": "^1.3.0",
"@visx/curve": "^1.0.0",
"@visx/shape": "^1.3.0",
"array-move": "^3.0.1",
"axios": "^1.6.8",
"axios": "^1.7.7",
"bootstrap": "^5.2.3",
"citation-js": "0.6.4",
"codemirror": "5",
Expand Down Expand Up @@ -75,7 +75,7 @@
"source-map-explorer": "^2.4.2",
"thebe-core": "^0.4.2",
"thebe-react": "^0.4.2",
"typescript": "^3.9.7",
"typescript": "^5.5.4",
"universal-cookie": "^4.0.4",
"use-query-params": "^1.2.2",
"webfontloader": "^1.6.28",
Expand Down
33 changes: 21 additions & 12 deletions src/components/ArticleV3/Article.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import ArticleCellObserver from './ArticleCellObserver'
import ArticleHeader from '../Article/ArticleHeader'
import Footer from '../Footer'
import ArticleBibliography from '../Article/ArticleBibliography'
import { CellTypeCode, LayerData } from '../../constants'
import { CellTypeCode, DisplayLayerSectionBibliography, LayerData } from '../../constants'
import { WithWindowSize } from '../../hooks/windowSize'

import '../../styles/components/ArticleV3/Article.scss'
Expand Down Expand Up @@ -50,30 +50,30 @@ const Article = ({
console.debug('[Article]', url, 'is rendering. \n - kernelName:', kernelName)
const setSelectedCellIdx = useArticleStore((state) => state.setSelectedCellIdx)
const setSelectedDataHref = useArticleStore((state) => state.setSelectedDataHref)
const onNumClickHandler = (e,{ idx}) => {

const onNumClickHandler = (e, { idx }) => {
console.debug('[Article] onNumClickHandler', idx)
setSelectedCellIdx(idx)
}

const onCellClickHandler =(e) => {
const onCellClickHandler = (e) => {
if (e.target.hasAttribute('data-href')) {
const dataHref = e.target.getAttribute('data-href')
console.info('[Article] onCellClickHandler', dataHref)
setSelectedDataHref(dataHref)
}

if (e.target.hasAttribute('data-idx')) {
e.preventDefault();
setSelectedCellIdx(e.target.getAttribute('data-idx'));
e.preventDefault()
setSelectedCellIdx(e.target.getAttribute('data-idx'))
}
}

return (
<div className="Article ArticleV3 page">
<ArticleLayers />
<ArticleScrollTo />
<ArticleNoteManager bibliography={bibliography}/>
<ArticleNoteManager bibliography={bibliography} />
<ArticleToC
plainTitle={plainTitle}
paragraphs={paragraphs}
Expand Down Expand Up @@ -135,17 +135,26 @@ const Article = ({
)
})}

<ArticleBibliography articleTree={{ bibliography }} noAnchor className="mt-0" />
<ArticleCellObserver
style={{ minHeight: 200 }}
cell={{
idx: DisplayLayerSectionBibliography,
}}
>
<div data-cell-idx={DisplayLayerSectionBibliography}>
{bibliography ? (
<ArticleBibliography articleTree={{ bibliography }} noAnchor className="mt-0" />
) : null}
</div>
</ArticleCellObserver>
<Footer />
</div>
)
}

function ArticleWithContent({ url, ipynb, kernelName, ...props }) {
const { paragraphs, headingsPositions, executables, bibliography, citations, sections } = useNotebook(
url,
ipynb,
)
const { paragraphs, headingsPositions, executables, bibliography, citations, sections } =
useNotebook(url, ipynb)
const initExecutionScope = useExecutionScope((state) => state.initialise)

useEffect(() => {
Expand Down
46 changes: 32 additions & 14 deletions src/components/ArticleV3/ArticleScrollTo.js
Original file line number Diff line number Diff line change
@@ -1,38 +1,56 @@
import { useEffect, useRef } from 'react'
import { DisplayLayerCellIdxQueryParam } from '../../constants'
import {
DisplayLayerCellIdxQueryParam,
DisplayLayerSectionBibliography,
DisplayLayerSectionParam,
} from '../../constants'
import { NumberParam, useQueryParams, withDefault } from 'use-query-params'
import { useArticleStore } from '../../store'

import { asEnumParam } from '../../logic/params'

const ArticleScrollTo = () => {
const selectedCellIdxFromStore = useArticleStore(state => state.selectedCellIdx)
const selectedCellIdxFromStore = useArticleStore((state) => state.selectedCellIdx)
const timerRef = useRef(null)
const [{ [DisplayLayerCellIdxQueryParam]: selectedCellIdx }, setQuery] = useQueryParams({
const [
{ [DisplayLayerCellIdxQueryParam]: selectedCellIdx, [DisplayLayerSectionParam]: sectionName },
setQuery,
] = useQueryParams({
[DisplayLayerCellIdxQueryParam]: withDefault(NumberParam, -1),
[DisplayLayerSectionParam]: asEnumParam([DisplayLayerSectionBibliography]),
})
const moveTo = (idx) => {
// scroll to the correct id
const element = document.querySelector("[data-cell-idx='" + idx + "']")
// scroll to the correct id
const element = document.querySelector("[data-cell-idx='" + idx + "']")

if (element) {
window.scrollTo(0,element.offsetTop -150)
}
if (element) {
window.scrollTo(0, element.offsetTop - 150)
}
}
useEffect(() => {
if(selectedCellIdxFromStore !== -1 && selectedCellIdxFromStore !== selectedCellIdx) {
if (selectedCellIdxFromStore !== -1 && selectedCellIdxFromStore !== selectedCellIdx) {
moveTo(selectedCellIdxFromStore)
setQuery({ [DisplayLayerCellIdxQueryParam]: selectedCellIdxFromStore })
}
}, [selectedCellIdxFromStore])

useEffect(() => {
console.debug(
'[ArticleScrollTo] selectedCellIdx:',
selectedCellIdx,
'sectionName:',
sectionName,
)
clearTimeout(timerRef.current)
timerRef.current = setTimeout(() => {
moveTo(selectedCellIdx)
if (sectionName) {
moveTo(sectionName)
} else if (selectedCellIdx !== -1) {
moveTo(selectedCellIdx)
}
}, 1000)

return () => clearTimeout(timerRef.current)
}, [selectedCellIdx])
}, [selectedCellIdx, sectionName])
}

export default ArticleScrollTo
export default ArticleScrollTo
Loading

0 comments on commit 250483a

Please sign in to comment.