Merge branch 'main' into maurits-tooltip-header

CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+<!-- You should *NOT* be adding new change log entries to this file.
+     You should create a file in the news directory instead.
+     For helpful instructions, please see:
+     https://6.docs.plone.org/volto/developer-guidelines/contributing.html#create-a-pull-request
+-->
+
+<!-- towncrier release notes start -->
+
+## 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)

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.

backend/CONTRIBUTORS.md

@@ -1,3 +1,4 @@
 # Contributors
 
-- Plone Foundation [collective@plone.org]
+- Katja Süss [@ksuess]
+- Maurits van Rees [@mauritsvanrees]

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"
-}
+}

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 = [

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,

packages/volto-slate-glossary/CHANGELOG.md

@@ -7,3 +7,20 @@
 -->
 
 <!-- towncrier release notes start -->
+
+## 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)

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

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"

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 (
-    <div id="page-document" className="q-container">
-      <div className="blocks-group-wrapper transparent">
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
+    <Container className="view-wrapper glossary-view">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
 
-        <div className="glossaryAlphabet">
-          {alphabet.split('').map((letter) => (
-            <Link
-              key={letter}
-              to={'#' + letter}
-              className="alphabetLetter"
-              onClick={() => {
-                document
-                  .getElementById(letter)
-                  ?.scrollIntoView({ behavior: 'smooth' });
-              }}
-            >
-              <span>{letter}</span>
-            </Link>
-          ))}
-        </div>
+        {showAlphabetNavigation ? (
+          <div className="glossaryAlphabet">
+            {alphabet.split('').map((letter) => (
+              <Link
+                key={letter}
+                to={'#' + letter}
+                className={cx(
+                  'alphabetLetter',
+                  `${!lettersWithTerm.includes(letter) ? 'unmatched' : 'matched'}`,
+                )}
+                onClick={() => {
+                  document
+                    .getElementById(letter)
+                    ?.scrollIntoView({ behavior: 'smooth' });
+                }}
+              >
+                <span>{letter}</span>
+              </Link>
+            ))}
+          </div>
+        ) : null}
 
-        <section className="glossary">
+        <section id="content-core" className="glossary">
           {Object.keys(glossaryentries || {})?.map((letter) => (
             <div key={letter}>
-              <a id={letter} anchor={letter} href={false}>
-                <h2 className="letter">{letter}</h2>
-              </a>
+              <h2 id={letter} className="letter">
+                {letter}
+              </h2>
               {glossaryentries[letter].map((item) => (
                 <article className="term" key={item['@id']}>
                   <h3>
@@ -68,8 +82,8 @@ const GlossaryView = ({ content }) => {
             </div>
           ))}
         </section>
-      </div>
-    </div>
+      </article>
+    </Container>
   );
 };
 

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';

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 (
           <React.Fragment key={`${i}`}>
             {children.indexOf('\n') > -1 &&
             children.split('\n').length - 1 > i ? (
               <>
-                {klass ? <span className={klass}>{t}</span> : t}
+                {klass ? <span className={klass}>{toot}</span> : toot}
                 <br />
               </>
             ) : klass ? (
-              <span className={klass}>{t}</span>
+              <span className={klass}>{toot}</span>
             ) : (
-              t
+              toot
             )}
           </React.Fragment>
         );

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%;

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 = {

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 = "<!-- towncrier release notes start -->\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"