Merge pull request #71 from openzim/external_links

External links
openzim · Jan 20, 2025 · f891b6a · f891b6a
2 parents 2bf179f + d974750
commit f891b6a
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Upgrade to Python 3.12 and Node.JS 22, adopt new openZIM practices, upgrade all dependencies (including zimscraperlib 5.0.0), add support for 'legacy' browsers (#43)
+- Add clearer visual indication of external links (#70)
 
 ### Fixed
 

diff --git a/zimui/index.html b/zimui/index.html
@@ -1,8 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/free-code-camp-logo.svg" />
+    <link rel="stylesheet" type="text/css" href="./custom.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>freeCodeCamp on Kiwix</title>
   </head>

diff --git a/zimui/public/custom.css b/zimui/public/custom.css
@@ -0,0 +1,28 @@
+a[href^="http://"],
+a[href^="https://"]
+{
+  /* modify all <a> tag so that the :after is centered */
+  display: inline-flex;
+  align-items: center;
+  color: #df2121;
+}
+
+a[href^="http://"]:hover,
+a[href^="https://"]:hover
+{
+  color: #df2121;
+}
+
+a[href^="http://"]:after,
+a[href^="https://"]:after
+{
+  /* add an external link icon to all external links (not relative after HTML rewriting) */
+  content: '';
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background-image: url('external-link.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-left: 5px;
+}
diff --git a/zimui/public/external-link.svg b/zimui/public/external-link.svg
diff --git a/zimui/public/vite.svg b/zimui/public/vite.svg