When viewing a Glossary, show an alphabet at the top.

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,30 +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.
-This provides the content type `glossary`.
-
 
 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 [[email protected]]
+- Katja Süss [@ksuess]
+- Maurits van Rees [@mauritsvanrees]

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/news/11.feature

@@ -0,0 +1 @@
+Show an alphabet navigation on glossary. Clicking a letter scrolls the entries for this letter into view. @mauritsvanrees, @ksuess

packages/volto-slate-glossary/src/components/GlossaryView.jsx

@@ -2,7 +2,13 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
 import { useSelector, useDispatch } from 'react-redux';
+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();
@@ -12,23 +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 (
-    <Container className="view-wrapper">
+    <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>
+
+        {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 id="content-core" className="glossary">
           {Object.keys(glossaryentries || {})?.map((letter) => (
             <div key={letter}>
-              <h2 className="letter">{letter}</h2>
+              <h2 id={letter} className="letter">
+                {letter}
+              </h2>
               {glossaryentries[letter].map((item) => (
                 <article className="term" key={item['@id']}>
                   <h3>

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