Merge pull request #22 from OP-TED/widget

create widget with links to other TED sites

src/css/site.css

@@ -16,3 +16,4 @@
 @import "highlight.css";
 @import "print.css";
 @import "search.css";
+@import "widget.css";

src/css/widget.css

@@ -0,0 +1,46 @@
+.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);
+  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 */
+}

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>

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>