Merge pull request #4 from MREYE-LUMC/crnh/mdr-message

Add MDR message

Author: jwmbeenakker

LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jan-Willem Beenakker and the MReye research group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -18,6 +18,11 @@ Demos are built using [Shiny for Python](https://shiny.posit.co/py/) and embedde
 >  ```powershell
 >  winget install astral-sh.uv
 >  ```
+> On Linux and MacOS, use
+> 
+> ```bash
+> curl -LsSf https://astral.sh/uv/install.sh | sh
+> ```
 
 1. Clone this repository or open it in a Codespace
 2. Install the dependencies:
@@ -32,13 +37,33 @@ Demos are built using [Shiny for Python](https://shiny.posit.co/py/) and embedde
     The preview will be updated automatically as you make changes.
 5. Push your changes. They will be automatically deployed to GitHub Pages.
 
+## MDR message
+
+Every demo must warn the user that these demos are not intended for medical use.
+To do this, add the following to the demo's frontmatter:
+
+```markdown
+---
+# Other frontmatter
+
+format:
+  html:
+    include-after-body: ../_includes/mdr-modal.html # Note: this path is relative to the demo's folder
+---
+```
+
+
 ## Editable demos
 
 URLs to demos that can be edited on <shinylive.io> are automatically generated when rendering the website.
 To enable this feature for a demo, add the following to the demo's frontmatter:
 
-```yaml
+```markdown
+---
+# Other frontmatter
+
 editable: true
+---
 ```
 
 This will create an additional html file named `edit.html` in the demo's folder.

_includes/mdr-modal.html

@@ -0,0 +1,27 @@
+<div class="modal fade" id="mdr-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+    aria-labelledby="mdr-modal-label" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title fs-5" id="mdr-modal-label">Terms of Use</h5>
+            </div>
+            <div class="modal-body">
+                <p>
+                    This app is intended solely for research or education and not for medical or clinical diagnostics.
+                    By using this app, you acknowledge that there is <strong>no</strong> warranty for this software and
+                    that you use it <strong>at your own risk</strong>.
+                </p>
+                <p>
+                    The full terms and conditions are available <a
+                        href="https://github.com/MREYE-LUMC/demos/blob/main/LICENSE.txt">here</a>.
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" id="dismiss-mdr-modal" class="btn btn-primary" data-bs-dismiss="modal">I
+                    Agree</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="/_includes/mdr.js" defer></script>

_includes/mdr.js

@@ -0,0 +1,14 @@
+(function () {
+    const sessionStorageKey = 'shown-mdr-modal-' + window.location.pathname;
+
+    document.addEventListener('DOMContentLoaded', function () {
+        if (sessionStorage.getItem(sessionStorageKey) != 'true') {
+            let mdrModal = new bootstrap.Modal(document.getElementById('mdr-modal'));
+            mdrModal.show();
+        }
+    });
+
+    document.getElementById('dismiss-mdr-modal').addEventListener('click', function () {
+        sessionStorage.setItem(sessionStorageKey, 'true');
+    });
+})();

_quarto.yml

@@ -3,6 +3,7 @@ project:
   pre-render: python _scripts/generate-edit-url.py
   resources:
     - "edit.html"
+    - "_includes/mdr.js"
 
 website:
   title: "MReye demos"

index.qmd

@@ -1,7 +1,5 @@
 ---
 title: "MReye Demos"
-filters:
-  - shinylive
 ---
 
 Welcome to our demo website!

paros/index.qmd

@@ -4,6 +4,10 @@ filters:
   - shinylive
 
 editable: true
+
+format:
+  html:
+    include-after-body: ../_includes/mdr-modal.html
 ---
 
 This integration demonstrates how PAROS can be used to calculate the central magnification of a fundus image. More information can be found at our [GitHub repository](https://github.com/MREYE-LUMC/PAROS).

visisipy/index.qmd

@@ -4,6 +4,10 @@ filters:
   - shinylive
 
 editable: true
+
+format:
+  html:
+    include-after-body: ../_includes/mdr-modal.html
 ---
 
 This is a demonstration of [visisipy](https://visisipy.readthedocs.io), our Python library for visual optics simulations.