Merge pull request #108 from robots-from-jupyter/username

docs: Add username field for lite form

Author: datakurre

.github/workflows/rtd-preview.yml

@@ -0,0 +1,24 @@
+name: RTD Preview
+on:
+  pull_request_target:
+    types: [opened]
+
+permissions:
+  pull-requests: write
+
+jobs:
+  binder:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Comment on the PR with the RTD preview
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            var PR_NUMBER = context.issue.number
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `[![lite-badge](https://.rtfd.io/en/latest/_static/badge.svg)](https://robotkernel--${PR_NUMBER}.org.readthedocs.build/en/${PR_NUMBER}/_static/lab/index.html) :point_left: Try it on ReadTheDocs`
+            })

_templates/lite-demo.html

@@ -6,6 +6,11 @@ <h2>DEMO</h2>
     type="text"
     placeholder="nobody else"
     title="give a room name to enable shared editing with videochat"
+  /><br/>as <input
+    id="user-name"
+    type="text"
+    placeholder="nobody"
+    title="give your username for shared editing with videochat"
   /> in...</em>
   </div>
   <form
@@ -21,6 +26,7 @@ <h2>DEMO</h2>
     />
     <input name="path" type="hidden" value="Example.ipynb" />
     <input name="room" type="hidden" value="" />
+    <input name="username" type="hidden" value="" />
     <input name="JVC-PUBLIC" type="hidden" value="" />
   </form>
   <div class="demo-label">
@@ -31,8 +37,15 @@ <h2>DEMO</h2>
 <script>
   $(function () {
     const roomName = $("#room-name");
+    const userName = $("#user-name");
     roomName.on("input", () => {
       $("input[name='room']").prop("value", roomName.prop("value"));
+      $("input[name='username']").prop("value", userName.prop("value"));
+      $("input[name='JVC-PUBLIC']").prop("value", roomName.prop("value"));
+    });
+    userName.on("input", () => {
+      $("input[name='room']").prop("value", roomName.prop("value"));
+      $("input[name='username']").prop("value", userName.prop("value"));
       $("input[name='JVC-PUBLIC']").prop("value", roomName.prop("value"));
     });
   });
@@ -95,14 +108,12 @@ <h2>DEMO</h2>
     color: var(--pg-layout-color0);
     font-weight: bold;
   }
-
-
   .navbar-demo-box > .demo-label {
     flex: 1;
     width: 100%;
     min-width: 100%;
   }
-  #room-name {
+  #room-name, #user-name {
     margin-left: 0.5em;
     display: inline-box;
     max-width: 6em;
@@ -113,7 +124,7 @@ <h2>DEMO</h2>
     text-align: center;
     font-weight: bold;
   }
-  #room-name::placeholder{
+  #room-name::placeholder, #user-name::placeholder {
     font-style: italic;
     color: var(--pg-layout-color0);
     font-weight: 400;