From 269b26a0254b5ed49e66e11d891875e8209eea02 Mon Sep 17 00:00:00 2001
From: yfantse <sevasti.yfanti@cloudform.lu>
Date: Tue, 30 Apr 2024 18:26:10 +0300
Subject: [PATCH 1/2] create widget with links to other TED sites

---
 src/css/site.css        |  1 +
 src/css/widget.css      | 41 +++++++++++++++++++++++++++++++++++++++++
 src/partials/main.hbs   | 26 ++++++++++++++++++++------
 src/partials/widget.hbs | 10 ++++++++++
 4 files changed, 72 insertions(+), 6 deletions(-)
 create mode 100644 src/css/widget.css
 create mode 100644 src/partials/widget.hbs

diff --git a/src/css/site.css b/src/css/site.css
index 8e203b7..72b2abc 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -16,3 +16,4 @@
 @import "highlight.css";
 @import "print.css";
 @import "search.css";
+@import "widget.css";
diff --git a/src/css/widget.css b/src/css/widget.css
new file mode 100644
index 0000000..d9ea222
--- /dev/null
+++ b/src/css/widget.css
@@ -0,0 +1,41 @@
+.widget {
+  width: auto;
+  height: 200px;
+  background-color: var(--color-smoke-10);
+  border: 1px solid var(--color-OP-header-footer-hover-background);
+  border-radius: 12px;
+  box-shadow: 2px 2px 2px #e1e1e1;
+  display: flex;
+  flex-direction: column;
+  margin: 50px; /* Add margin */
+  position: sticky;
+  top: var(--toc-top);
+}
+
+.widget-title {
+  height: 25%;
+  font-weight: bold;
+  border-top-left-radius: 12px; /* Add top left border radius */
+  border-top-right-radius: 12px;
+  font-family: var(--gs-base-font-family-default);
+  color: #515560;
+  display: flex;
+  background-color: var(--color-smoke-30);
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-bottom: 1px solid var(--color-OP-header-footer-hover-background);
+}
+
+.links {
+  height: 75%;
+  overflow: auto;
+  display: flex; /* Add flex display */
+  flex-direction: column; /* Make links stack vertically */
+  padding: 10px;
+}
+
+.links a {
+  margin: 10px 0; /* Add vertical margin */
+  color: var(--color-OP-green);
+}
diff --git a/src/partials/main.hbs b/src/partials/main.hbs
index d3e2411..3baa9a0 100644
--- a/src/partials/main.hbs
+++ b/src/partials/main.hbs
@@ -1,11 +1,25 @@
 <main class="article">
 {{> toolbar}}
   <div class="content">
-{{#if (eq page.layout '404')}}
-{{> article-404}}
-{{else}}
-{{> toc}}
-{{> article}}
-{{/if}}
+    {{#if (eq page.layout '404')}}
+    {{> article-404}}
+    {{else}}
+    {{> toc}}
+    {{> article}}
+    <div id="widgetContainer">
+      {{> widget}}
+    </div>
+    {{/if}}
   </div>
 </main>
+
+<script>
+  // Get the current URL
+  var url = window.location.href;
+
+  // Check if the URL ends with 'home/index.html'
+  if (!url.endsWith('home/index.html')) {
+    // If it doesn't, hide the widget
+    document.getElementById('widgetContainer').style.display = 'none';
+  }
+</script>
\ No newline at end of file
diff --git a/src/partials/widget.hbs b/src/partials/widget.hbs
new file mode 100644
index 0000000..fa109e0
--- /dev/null
+++ b/src/partials/widget.hbs
@@ -0,0 +1,10 @@
+<article class="widget">
+<div class="widget-title">
+    <p>Access other sites in the TED family</p>
+  </div>
+  <div class="links">
+    <a href="https://enotices2.ted.europa.eu/" target="_blank">eNotices2</a>
+    <a href="https://developer.ted.europa.eu/" target="_blank">TED Developer Portal</a>
+    {{!-- <a href="#">Link 3</a> --}}
+  </div>
+</article>

From a7b28670305dcb848ef279395c6e68f4efc0126c Mon Sep 17 00:00:00 2001
From: yfantse <sevasti.yfanti@cloudform.lu>
Date: Thu, 2 May 2024 13:00:17 +0300
Subject: [PATCH 2/2] display ellipsis when text overflows in links

---
 src/css/widget.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/css/widget.css b/src/css/widget.css
index d9ea222..98ac996 100644
--- a/src/css/widget.css
+++ b/src/css/widget.css
@@ -38,4 +38,9 @@
 .links a {
   margin: 10px 0; /* Add vertical margin */
   color: var(--color-OP-green);
+  display: block; /* Make the links block elements */
+  width: 100%; /* Make the links take up the full width of their container */
+  white-space: nowrap; /* Prevent the links from wrapping onto multiple lines */
+  overflow: hidden; /* Hide any text that overflows the links' bounding box */
+  text-overflow: ellipsis; /* Display an ellipsis when the text overflows */
 }