Glossary: Fix #380

config.toml

@@ -33,6 +33,8 @@ title = "Let's Encrypt - Free SSL/TLS Certificates"
 contentDir = "content/en"
 languageName ="English"
 languageCode= "en-us"
+#if colon ":" must be prefixed
+beforeColon= ""
 # Weight used for sorting.
 weight = 1
 description = """
@@ -65,6 +67,8 @@ title = "Let's Encrypt - Certificats SSL/TLS gratuits"
 languageName = "Français"
 contentDir = "content/fr"
 languageCode= "fr-fr"
+#if colon ":" must be prefixed
+beforeColon= " "
 # Weight used for sorting.
 weight = 1
 description = """

content/en/docs/_index.md

@@ -12,6 +12,7 @@ menu:
 * [Getting Started](/getting-started/)
 * [How Let's Encrypt Works](/how-it-works/)
 * [Frequently Asked Questions (FAQ)](/docs/faq/)
+* [Glossary](/docs/glossary/)
 
 # Subscriber Information
 

content/fr/docs/_index.md

@@ -12,6 +12,7 @@ menu:
 * [Commencer](/fr/getting-started/)
 * [Comment ça marche](/fr/how-it-works/)
 * [Frequently Asked Questions (FAQ)](/docs/faq/)
+* [Glossaire](/docs/glossary/)
 
 # Subscriber Information
 

layouts/shortcodes/def.html

@@ -0,0 +1,52 @@
+<!--
+Usage (in english):
+	{% def
+		id="a unique id for anchor"
+		name="The term to define (optional if abbr is provided)"
+		abbr="an accronym (optional)" %}
+			the definition 
+	{% /def %}
+
+	<p><dfn id="a unique id for anchor">The term to define</dfn>: the definition</p>
+	<p><dfn id="a unique id for anchor"><abbr>an accronym</abbr</dfn>: the definition</p>
+	<p><dfn id="a unique id for anchor">The term to define</dfn> (<abbr>an accronym</abbr>): the definition</p>
+
+Usage (in other languages):
+	{% def 
+		id="a unique id for anchor - the SAME than for english" 
+		name="The term to define (optional if english or abbr is provided)"
+		abbr="an accronym (optional)"
+		english="the english term (optional - if present the abbr is in english too)" %}}
+			the definition
+	{% /def %}
+
+	<p><dfn id="def-a unique id for anchor">The term to define</dfn>: the definition</p>
+	<p><dfn id="def-a unique id for anchor"><abbr>an accronym</abbr></dfn>: the definition</p>
+	<p><dfn id="def-a unique id for anchor">The term to define</dfn> (<abbr>an accronym</abbr>): the definition</p>
+	<p><dfn id="def-a unique id for anchor" lang="en">the english term</dfn> (<abbr>an accronym</abbr>): the definition</p>
+	<p><dfn id="def-a unique id for anchor">The term to define</dfn> (<i lang="en">the english term</i>): the definition</p>
+	<p><dfn id="def-a unique id for anchor">The term to define</dfn> (<abbr>an accronym</abbr> - <i lang="en">the english term</i>): the definition</p>
+
+Notes:
+	<abbr> is used to spell out for screen readers
+	lang="en" is used for the accent for screen readers
+-->
+
+<p class="definition">
+	{{- if .Get "name" -}}
+		<dfn id="def-{{.Get "id" }}">{{.Get "name" }}</dfn>
+		{{- if or (.Get "abbr") (.Get "english") -}}
+			{{- if .Get "english" }} ({{ with .Get "abbr" }}<abbr lang="en">{{ . }}</abbr> - {{ end -}}<i lang="en">{{ .Get "english" }}</i>)
+			{{- else }} (<abbr>{{ .Get "abbr" }}</abbr>)
+			{{- end }}
+		{{- end }}
+	{{- else -}}
+		{{- if .Get "english" -}}
+			<dfn id="def-{{.Get "id" }}" lang="en">{{.Get "english" }}</dfn>
+			{{- if .Get "abbr" }} (<abbr lang="en">{{ .Get "abbr" }}</abbr>){{- end }}
+		{{- else -}}
+			<dfn id="def-{{.Get "id" }}"><abbr>{{.Get "abbr" }}</abbr></dfn>
+		{{- end -}}
+	{{- end -}}
+	{{ .Site.Params.beforeColon | safeHTML }}: {{ .Inner }}
+</p>

static/css/glossary.css

@@ -0,0 +1,13 @@
+@keyframes fadeIt {
+  0%   { background-color: #FFCE00; }
+  100% { /* back to normal */ }
+}
+
+dfn:target{
+  /* highlight for 3 seconds the selected definition target */
+  animation: fadeIt 3s ease-out;
+}
+dfn {
+  font-weight: bold;
+	padding-right: .25em; /* Prevent italics text from hitting the ":" */
+}

static/js/glossary.js

@@ -0,0 +1,26 @@
+// search all links (into definitions) linking to elements in the current page (href starts with #) 
+// To set the title of the link to the definition it points to
+document.querySelectorAll('[id^="def-"]').forEach(function(def){
+	const id = def.id;
+	let title = def.parentNode.textContent;
+	if ( title.match(/\.\s/) ) {
+		// We take everything until the last period. (Everything after are links such as "Wikipedia"
+		title = title.match(/^.*\.\s/)[0];
+	}
+	document.querySelectorAll('.definition>a[href^="#'+id+'"]').forEach(function(a){
+		a.title = title;
+	});
+});
+
+// search for invalid links
+document.querySelectorAll('.definition>a[href^="#"]').forEach(function(a){
+	if ( a.title ) return;
+	let href = a.href;
+	let id = href.substring(href.indexOf('#')+1);
+	if ( ! id ) return;
+	let el = document.getElementById(id);
+	if ( ! el ) {
+		console.error("Invalid link to:"+id);
+		return;
+	}
+});