diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..58e9703 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,26 @@ +# Changelog + + + + + +## 2.0.1 (2024-10-25) + +## 2.0.0 (2024-10-25) + +### Feature + +- New option 'show tooltips only on first occurrences on a page' @ksuess [#5](https://github.com/ksuess/volto-slate-glossary/issue/5) + +### Internal + +- Refactor package to cookieplone template. @ksuess + + Add backend with collective.glossary. @ksuess + + New concept: Instead of generating the tooltip enhanced markup in each Slate leaf, + we generate all tooltip enhanced leaf texts on route change, store them with jotai atom and use the appropriate ones in the leafs. @ksuess [#10](https://github.com/ksuess/volto-slate-glossary/issue/10) diff --git a/README.md b/README.md index e981dd3..d562da2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # @rohberg/volto-slate-glossary -Volto Add-On `@rohberg/volto-slate-glossary` adds tooltips for glossary terms of [collective.glossary](https://github.com/collective/collective.glossary) +Volto add-on `@rohberg/volto-slate-glossary` adds tooltips for glossary terms of [collective.glossary](https://github.com/collective/collective.glossary) [![npm](https://img.shields.io/npm/v/@rohberg/volto-slate-glossary)](https://www.npmjs.com/package/@rohberg/volto-slate-glossary) [![Unit tests](https://github.com/rohberg/volto-slate-glossary/actions/workflows/unit.yml/badge.svg)](https://github.com/rohberg/volto-slate-glossary/actions/workflows/unit.yml) @@ -9,8 +9,12 @@ Volto Add-On `@rohberg/volto-slate-glossary` adds tooltips for glossary terms of ![Tooltips @rohberg/volto-slate-glossary](https://github.com/rohberg/volto-slate-glossary/raw/main/docs/volto-slate-glossary-tooltips.png) +Install Plone add-on [collective.glossary](https://github.com/collective/collective.glossary) in your backend. +This provides the content type `glossary`. + Determine where to apply tooltips in your project by match configuration: +```js import { Tooltips } from '@rohberg/volto-slate-glossary/components'; export default function applyConfig(config) { @@ -28,29 +32,26 @@ Determine where to apply tooltips in your project by match configuration: return config; } +``` By default we show a tooltip when a word matches case insensitively: when the term is "Hello" or "hello", a tooltip is shown for "Hello", "hello", "HELLO", "hElLo", etcetera. You can configure this to be case sensitive for all terms, so "Hello" only matches for "Hello": -``` +```js config.settings.glossary.caseSensitive = true; ``` Regardless of this setting, when you have a fully uppercase term, for example `REST` (Representational State Transfer), always only the exact word `REST` gets a tooltip, not `rest` or `Rest`. -By default we show a tooltip for all matches on a page. -You can configure this to only show a tooltip for the first match: +By default we show tooltips for all occurrences of a term. -``` +Since version 2.0.0 you can configure to only show tooltips for the first occurence on a page. + +```js config.settings.glossary.matchOnlyFirstOccurence = true; ``` -Install Plone Add-On [collective.glossary](https://github.com/collective/collective.glossary) in your backend. - User can opt-out by setting glossarytooltips to false. Add a boolean member field *glossarytooltips* for it. - - -This add-on requires Volto with Slate editor. Be sure to upgrade to Volto >= 16.0.0-alpha.15. diff --git a/backend/CONTRIBUTORS.md b/backend/CONTRIBUTORS.md index 5a1aabd..3284368 100644 --- a/backend/CONTRIBUTORS.md +++ b/backend/CONTRIBUTORS.md @@ -1,3 +1,4 @@ # Contributors -- Plone Foundation [collective@plone.org] +- Katja Süss [@ksuess] +- Maurits van Rees [@mauritsvanrees] diff --git a/package.json b/package.json index d5bba7c..b22436f 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "@rohberg/volto-slate-glossary-dev", - "version": "1.0.3", + "version": "2.0.1", "description": "Add tooltips for glossary terms", - "author": "Katja Süss", - "homepage": "https://github.com/ksuess/volto-slate-glossary", + "author": "Katja S\u00fcss", + "homepage": "https://github.com/rohberg/volto-slate-glossary", "license": "MIT", "keywords": [ "volto-addon", @@ -42,4 +42,4 @@ "mrs-developer": "^2.2.0" }, "packageManager": "pnpm@9.1.1" -} +} \ No newline at end of file diff --git a/packages/policy/src/index.js b/packages/policy/src/index.js index 51562a3..c3ac63d 100644 --- a/packages/policy/src/index.js +++ b/packages/policy/src/index.js @@ -4,6 +4,7 @@ const applyConfig = (config) => { // glossary tooltips config.settings.glossary.caseSensitive = false; config.settings.glossary.matchOnlyFirstOccurence = false; + config.settings.glossary.showAlphabetNavigation = true; // Tooltips everywhere config.settings.appExtras = [ diff --git a/packages/volto-slate-glossary/.release-it.json b/packages/volto-slate-glossary/.release-it.json index 4cde54e..9ef4f97 100644 --- a/packages/volto-slate-glossary/.release-it.json +++ b/packages/volto-slate-glossary/.release-it.json @@ -1,7 +1,4 @@ { - "plugins": { - "../../core/packages/scripts/prepublish.js": {} - }, "hooks": { "after:bump": [ "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft", @@ -12,9 +9,6 @@ ], "after:release": "rm .changelog.draft README.md" }, - "npm": { - "publish": false - }, "git": { "changelog": "pipx run towncrier build --draft --yes --version 0.0.0", "requireUpstream": false, diff --git a/packages/volto-slate-glossary/CHANGELOG.md b/packages/volto-slate-glossary/CHANGELOG.md index e24f3a8..58e9703 100644 --- a/packages/volto-slate-glossary/CHANGELOG.md +++ b/packages/volto-slate-glossary/CHANGELOG.md @@ -7,3 +7,20 @@ --> + +## 2.0.1 (2024-10-25) + +## 2.0.0 (2024-10-25) + +### Feature + +- New option 'show tooltips only on first occurrences on a page' @ksuess [#5](https://github.com/ksuess/volto-slate-glossary/issue/5) + +### Internal + +- Refactor package to cookieplone template. @ksuess + + Add backend with collective.glossary. @ksuess + + New concept: Instead of generating the tooltip enhanced markup in each Slate leaf, + we generate all tooltip enhanced leaf texts on route change, store them with jotai atom and use the appropriate ones in the leafs. @ksuess [#10](https://github.com/ksuess/volto-slate-glossary/issue/10) diff --git a/packages/volto-slate-glossary/news/10.internal b/packages/volto-slate-glossary/news/10.internal deleted file mode 100644 index aa037ae..0000000 --- a/packages/volto-slate-glossary/news/10.internal +++ /dev/null @@ -1,2 +0,0 @@ -New concept: Instead of generating the tooltip enhanced markup in each Slate leaf, -we generate all tooltip enhanced leaf texts on route change, store them with jotai atom and use the appropriate ones in the leafs. @ksuess \ No newline at end of file diff --git a/packages/volto-slate-glossary/news/11.feature b/packages/volto-slate-glossary/news/11.feature index f7b92bd..229f27d 100644 --- a/packages/volto-slate-glossary/news/11.feature +++ b/packages/volto-slate-glossary/news/11.feature @@ -1,3 +1 @@ -When viewing a Glossary, show an alphabet at the top. -Clicking a letter scrolls the entries for that letter into view. -@mauritsvanrees +Show an alphabet navigation on glossary. Clicking a letter scrolls the entries for this letter into view. @mauritsvanrees, @ksuess diff --git a/packages/volto-slate-glossary/news/5.feature b/packages/volto-slate-glossary/news/5.feature deleted file mode 100644 index 78f5651..0000000 --- a/packages/volto-slate-glossary/news/5.feature +++ /dev/null @@ -1 +0,0 @@ -New option 'show tooltips only on first occurrences on a page' @ksuess \ No newline at end of file diff --git a/packages/volto-slate-glossary/package.json b/packages/volto-slate-glossary/package.json index 503275b..34ea57c 100644 --- a/packages/volto-slate-glossary/package.json +++ b/packages/volto-slate-glossary/package.json @@ -1,6 +1,6 @@ { "name": "@rohberg/volto-slate-glossary", - "version": "1.0.3", + "version": "2.0.1", "description": "Add tooltips for glossary terms", "main": "src/index.js", "license": "MIT", @@ -11,10 +11,10 @@ "react" ], "author": "Katja Süss", - "homepage": "https://github.com/ksuess/volto-slate-glossary#readme", + "homepage": "https://github.com/rohberg/volto-slate-glossary#readme", "repository": { "type": "git", - "url": "git@github.com:ksuess/volto-slate-glossary.git" + "url": "git@github.com:rohberg/volto-slate-glossary.git" }, "publishConfig": { "access": "public" diff --git a/packages/volto-slate-glossary/src/components/GlossaryView.jsx b/packages/volto-slate-glossary/src/components/GlossaryView.jsx index 68f4601..cfa0da4 100644 --- a/packages/volto-slate-glossary/src/components/GlossaryView.jsx +++ b/packages/volto-slate-glossary/src/components/GlossaryView.jsx @@ -1,9 +1,15 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { useSelector, useDispatch } from 'react-redux'; +import { Container } from 'semantic-ui-react'; +import cx from 'classnames'; import { getGlossaryTerms } from '../actions'; +import config from '@plone/volto/registry'; const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; +const showAlphabetNavigation = + config.settings?.glossary?.showAlphabetNavigation || true; + const GlossaryView = ({ content }) => { const dispatch = useDispatch(); const pathname = useSelector((state) => state.router.location.pathname); @@ -12,41 +18,49 @@ const GlossaryView = ({ content }) => { dispatch(getGlossaryTerms()); }, [dispatch, pathname]); - let glossaryentries = useSelector( + const glossaryentries = useSelector( (state) => state.glossaryterms.result.items, ); + const lettersWithTerm = Object.keys(glossaryentries || {}); return ( -
-
-

{content.title}

- {content.description && ( -

{content.description}

- )} + +
+
+

{content.title}

+ {content.description && ( +

{content.description}

+ )} +
-
- {alphabet.split('').map((letter) => ( - { - document - .getElementById(letter) - ?.scrollIntoView({ behavior: 'smooth' }); - }} - > - {letter} - - ))} -
+ {showAlphabetNavigation ? ( +
+ {alphabet.split('').map((letter) => ( + { + document + .getElementById(letter) + ?.scrollIntoView({ behavior: 'smooth' }); + }} + > + {letter} + + ))} +
+ ) : null} -
+
{Object.keys(glossaryentries || {})?.map((letter) => (
- -

{letter}

- +

+ {letter} +

{glossaryentries[letter].map((item) => (

@@ -68,8 +82,8 @@ const GlossaryView = ({ content }) => {

))}
-
-
+ + ); }; diff --git a/packages/volto-slate-glossary/src/components/TermView.jsx b/packages/volto-slate-glossary/src/components/TermView.jsx index 73158d4..2f1eea8 100644 --- a/packages/volto-slate-glossary/src/components/TermView.jsx +++ b/packages/volto-slate-glossary/src/components/TermView.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Container } from 'semantic-ui-react'; import { Link } from 'react-router-dom'; +import { Container } from 'semantic-ui-react'; import { Icon } from '@plone/volto/components'; import { flattenToAppURL } from '@plone/volto/helpers'; import backSVG from '@plone/volto/icons/back.svg'; diff --git a/packages/volto-slate-glossary/src/components/Tooltips.jsx b/packages/volto-slate-glossary/src/components/Tooltips.jsx index 303b978..e492bc0 100644 --- a/packages/volto-slate-glossary/src/components/Tooltips.jsx +++ b/packages/volto-slate-glossary/src/components/Tooltips.jsx @@ -71,19 +71,19 @@ export const applyLineBreakSupport = (children) => { const klass = undefined; return typeof children === 'string' - ? children.split('\n').map((t, i) => { + ? children.split('\n').map((toot, i) => { return ( {children.indexOf('\n') > -1 && children.split('\n').length - 1 > i ? ( <> - {klass ? {t} : t} + {klass ? {toot} : toot}
) : klass ? ( - {t} + {toot} ) : ( - t + toot )} ); diff --git a/packages/volto-slate-glossary/src/components/glossarytooltips.less b/packages/volto-slate-glossary/src/components/glossarytooltips.less index 62b713d..c47a483 100644 --- a/packages/volto-slate-glossary/src/components/glossarytooltips.less +++ b/packages/volto-slate-glossary/src/components/glossarytooltips.less @@ -21,6 +21,15 @@ background: #963c38; color: white; } +.glossary-view .glossaryAlphabet { + padding: 1em 0; + .alphabetLetter { + padding-right: 0.3em; + &.unmatched { + filter: opacity(0.5); + } + } +} .term h3 { span { font-size: 80%; diff --git a/packages/volto-slate-glossary/src/index.js b/packages/volto-slate-glossary/src/index.js index 6568c9d..3cc4670 100644 --- a/packages/volto-slate-glossary/src/index.js +++ b/packages/volto-slate-glossary/src/index.js @@ -8,6 +8,7 @@ const applyConfig = (config) => { config.settings.glossary = { caseSensitive: false, matchOnlyFirstOccurence: false, + showAlphabetNavigation: true, }; config.settings.slate.leafs = { diff --git a/packages/volto-slate-glossary/towncrier.toml b/packages/volto-slate-glossary/towncrier.toml index 9eb08d9..eb3a4b3 100644 --- a/packages/volto-slate-glossary/towncrier.toml +++ b/packages/volto-slate-glossary/towncrier.toml @@ -5,7 +5,7 @@ title_format = "## {version} ({project_date})" underlines = ["", "", ""] template = "./node_modules/@plone/scripts/templates/towncrier_template.jinja" start_string = "\n" -issue_format = "[#{issue}](https://github.com/ksuess/volto-slate-glossary/issue/{issue})" +issue_format = "[#{issue}](https://github.com/rohberg/volto-slate-glossary/issue/{issue})" [[tool.towncrier.type]] directory = "breaking"