diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx
index f4965e25..09cdb6e6 100644
--- a/app/components/Article/Contents.tsx
+++ b/app/components/Article/Contents.tsx
@@ -121,13 +121,23 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
*/
fragment.querySelectorAll('.glossary-entry').forEach((e) => {
const entry = glossaryEntry(e)
- entry &&
- addPopup(
- e as HTMLSpanElement,
- `glossary-${entry.term}`,
- `
${entry.contents}
` +
- (entry.pageid ? `
See more...` : '')
- )
+ if (!entry) return undefined
+ const link =
+ entry.pageid &&
+ `View full definition`
+ const image = entry.image && ``
+ addPopup(
+ e as HTMLSpanElement,
+ `glossary-${entry.term}`,
+ ``
+ )
})
return fragment
diff --git a/app/components/Article/article.css b/app/components/Article/article.css
index 19012360..5e21c95d 100644
--- a/app/components/Article/article.css
+++ b/app/components/Article/article.css
@@ -62,7 +62,6 @@ article .link-popup {
position: absolute;
display: inline-block;
font: var(--baseFont);
- padding: 5px 10px;
margin-left: 10px;
max-width: 35%;
z-index: 2;
@@ -77,6 +76,15 @@ article .link-popup::after {
right: 100%;
}
+article .link-popup .glossary-popup > .contents {
+ padding: var(--spacing-24) var(--spacing-40) var(--spacing-24);
+}
+article .link-popup .glossary-popup > img {
+ width: 100%;
+ border-top-right-radius: 6px;
+ border-bottom-right-radius: 6px;
+}
+
article .link-popup.shown {
visibility: visible;
opacity: 1;
diff --git a/app/server-utils/stampy.ts b/app/server-utils/stampy.ts
index ab7c1c5c..f2757dcf 100644
--- a/app/server-utils/stampy.ts
+++ b/app/server-utils/stampy.ts
@@ -49,6 +49,7 @@ export type GlossaryEntry = {
term: string
pageid: PageId
contents: string
+ image: string
}
export type Glossary = {
[key: string]: GlossaryEntry
@@ -147,6 +148,7 @@ type GlossaryRow = CodaRowCommon & {
phrase: string
aliases: string
'UI ID': string
+ image: Entity
}
}
type BannersRow = CodaRowCommon & {
@@ -326,12 +328,13 @@ export const loadGlossary = withCache('loadGlossary', async () => {
const phrases = [values.phrase, ...values.aliases.split('\n')]
const item = {
pageid,
+ image: values.image?.url,
contents: renderText(pageid, extractText(values.definition)),
}
return phrases
- .map((i) => extractText(i.toLowerCase()))
+ .map((i) => extractText(i))
.filter(Boolean)
- .map((phrase) => [phrase, {term: phrase, ...item}])
+ .map((phrase) => [phrase.toLowerCase(), {term: phrase, ...item}])
})
.flat()
)
diff --git a/public/assets/ arrow.svg b/public/assets/arrow.svg
similarity index 100%
rename from public/assets/ arrow.svg
rename to public/assets/arrow.svg
diff --git a/public/assets/ plane-large.svg b/public/assets/plane-large.svg
similarity index 100%
rename from public/assets/ plane-large.svg
rename to public/assets/plane-large.svg