fix: Correct issues related with citation dialog

Author: roda82

docs/index.md

@@ -13,7 +13,7 @@ hide:
 
 Measuring Power Consumption of your Applications.
 
-[Geting started](getting_started){ .md-button .md-button--primary}
+[Geting started](getting_started.md){ .md-button .md-button--primary}
 [:fontawesome-brands-github: GitHub](https://github.com/powerapi-ng/){ .md-button}  
 
   </div>

docs/javascripts/extra.js

@@ -1,16 +1,16 @@
 const dialog = document.querySelector("dialog");
 const showButton = document.getElementById("export-button");
 const closeButton = document.getElementById("close-citation-dialog-button");
-const copyButton = document.getElementById("copy-citation");
+const copyButton = document.getElementById("copy-citation-dialog-button");
 
 function copyToClipboard(id)
 {
-var r = document.createRange();
-r.selectNode(document.getElementById(id));
-window.getSelection().removeAllRanges();
-window.getSelection().addRange(r);
-document.execCommand('copy');
-window.getSelection().removeAllRanges();
+  var r = document.createRange();
+  r.selectNode(document.getElementById(id));
+  window.getSelection().removeAllRanges();
+  window.getSelection().addRange(r);
+  document.execCommand('copy');
+  window.getSelection().removeAllRanges();
 }
 
 // "Show the dialog" button opens the dialog modally
@@ -26,3 +26,15 @@ closeButton.addEventListener("click", () => {
 copyButton.addEventListener("click", () => {
   copyToClipboard("citation");
 })
+
+dialog.addEventListener("click", e => {
+  const dialogDimensions = dialog.getBoundingClientRect()
+  if (
+    e.clientX < dialogDimensions.left ||
+    e.clientX > dialogDimensions.right ||
+    e.clientY < dialogDimensions.top ||
+    e.clientY > dialogDimensions.bottom
+  ) {
+    dialog.close();
+  }
+})

docs/reference/overview.md

@@ -17,7 +17,7 @@ cluster of machine.
 
 The Figure below depicts the global architecture of a software PowerMeter in PowerAPI.
 
-![PowerAPI Architecture Overview](../../assets/images/reference/overview/global-architecture.jpg){ width="1000px"}
+![PowerAPI Architecture Overview](../assets/images/reference/overview/global-architecture.jpg){ width="1000px"}
 
 
 <!--img

docs/reference/sensors/hwpc-sensor.md

@@ -13,7 +13,7 @@ and need to have **root access** to be used. If you are using version **1.2 or o
 **The sensor can not be used in a virtual machine**, it must have access (via Linux
 kernel API) to the real CPU register to read performance counter values.
 
-The sensor provides raw values of performance counters as well as `RAPL` values in microjoules.   
+The sensor provides raw values of performance counters as well as `RAPL` raw values in microjoules.   
 
 ## Installation
 
@@ -151,7 +151,7 @@ In order to run the Sensor without a configuration file, run HWPC Sensor using o
 
 
 ???+ info "Reports' Storage"
-    Your [`HWPCReports`](../reports/reports.md#hwpc-report) will be stored on MongoDB.
+    Your [`HWPCReports`](../reports/reports.md#hwpc-reports) will be stored on MongoDB.
 
 ???+ tip "CLI parameters' names"
     You can only use shortcuts.

docs/stylesheets/extra.css

@@ -98,6 +98,11 @@
   background-color: transparent;
   color: salmon;
   box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
+  font-size: 20px;
+}
+
+#copy-citation-dialog-button {
+  cursor: pointer;
 }
 
 #citation-dialog{

overrides/partials/citation-dialog.html

@@ -1,37 +1,40 @@
 <dialog id="citation-dialog">
 
     <header>
-        <h2 class="dialog-header">Export Citation</h2>
+        <h1 class="dialog-header">Export Citation</h1>
           <div align="right">
-            <button id="close-citation-dialog-button" class="close-button" autofocus>&#x2716</button>
+            <button id="close-citation-dialog-button" class="close-button md-icon" autofocus>&#x2716</button>
           </div>
     </header>
-
-    <div id= "citation" class="highlight">
-
+    <div id= "citation" class="md-typeset">
       <pre>
         <code>
           {% raw %}
-            @article{fieni-2024,
-              TITLE = {{PowerAPI: A Python framework for building software-defined power meters}},
-              AUTHOR = {Fieni, Guillaume and Acero, Daniel Romero and Rust, Pierre and Rouvoy, Romain},
-              URL = {https://hal.science/hal-04601379},
-              JOURNAL = {{Journal of Open Source Software}},
-              PUBLISHER = {{Open Journals}},
-              VOLUME = {9},
-              NUMBER = {98},
-              PAGES = {6670},
-              YEAR = {2024},
-              MONTH = Jun,
-              DOI = {10.21105/joss.06670},
-              KEYWORDS = {Power ; Energy ; Toolkit ; Measurement ; Framework},
-              PDF = {https://hal.science/hal-04601379/file/10.21105.joss.06670-3.pdf},
-              HAL_ID = {hal-04601379},
-              HAL_VERSION = {v1},
-              }
+@article{fieni-2024,
+TITLE = {{PowerAPI: A Python framework for building software-defined power meters}},
+AUTHOR = {Fieni, Guillaume and Acero, Daniel Romero and Rust, Pierre and Rouvoy, Romain},
+URL = {https://hal.science/hal-04601379},
+JOURNAL = {{Journal of Open Source Software}},
+PUBLISHER = {{Open Journals}},
+VOLUME = {9},
+NUMBER = {98},
+PAGES = {6670},
+YEAR = {2024},
+MONTH = Jun,
+DOI = {10.21105/joss.06670},
+KEYWORDS = {Power ; Energy ; Toolkit ; Measurement ; Framework},
+PDF = {https://hal.science/hal-04601379/file/10.21105.joss.06670-3.pdf},
+HAL_ID = {hal-04601379},
+HAL_VERSION = {v1},
+}
           {% endraw %}
-        </code>
+          </code>
+          <div align="right">
+            <a ref="#" id="copy-citation-dialog-button" title="Copy citation" class="md-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>
+            </a>
+          </div>
       </pre>
     </div>
-  <button id="copy-citation" title="Copy citation">Copy citation</button>
+
 </dialog>

overrides/partials/header.html

@@ -58,17 +58,11 @@
       </div>
     {% endif %}
     <a ref="#" id="export-button" class="md-header__button md-icon" title="Export Citation">
-        Citation
-        {% include "partials/citation-dialog.html" %}
-        {% include ".icons/" ~ icon ~ ".svg" %}
-        {% set icon = config.theme.icon.search or "material/magnify" %}
+
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 296c0 66.3-53.7 120-120 120h-8c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H320c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72zm-256 0c0 66.3-53.7 120-120 120H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H64c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72z"/></svg>
     </a>
-    {% block scripts %}
-        <script type="text/javascript">
-          {% include "../docs/javascripts/extra.js" %}
-        </script>
-    {% endblock %}
   </nav>
+  {% include "partials/citation-dialog.html" %}
   {% if "navigation.tabs.sticky" in features %}
     {% if "navigation.tabs" in features %}
       {% include "partials/tabs.html" %}