docs: update timeline doc to be more manageable / maintainable

hotosm · Aug 5, 2024 · e03e158 · e03e158
1 parent 5bf8aa0
commit e03e158
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 118 deletions.
diff --git a/docs/css/timeline.css b/docs/css/timeline.css
@@ -0,0 +1,39 @@
+.timeline-container {
+  border-left: 4px solid gray;
+  border-radius: 0 4px 4px 0;
+  background: rgba(200, 200, 200, 0.15);
+  margin: 2rem auto;
+  padding: 1rem 2rem;
+  position: relative;
+  text-align: center;
+  margin-left: 7rem;
+}
+
+.timeline-entry {
+  text-align: left;
+  position: relative;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+}
+
+.timeline-date {
+  position: absolute;
+  left: -10rem;
+  text-align: right;
+  font-size: 0.9rem;
+  font-weight: 700;
+  opacity: 0.7;
+  min-width: 6rem;
+  top: 2px;
+}
+
+.timeline-dot {
+  position: absolute;
+  box-shadow: 0 0 0 4px gray;
+  left: -2.5rem;
+  background: #444;
+  border-radius: 50%;
+  height: 11px;
+  width: 11px;
+  top: 5px;
+}
diff --git a/docs/manuals/xlsform-design.md b/docs/manuals/xlsform-design.md
@@ -138,7 +138,7 @@ The example CSV can be downloaded
     saved to when submitted. This should probably match the field name.
 - The form to create the Entity List is then uploaded to ODK Central:
 
-![Entities Create UI](../images/xlsform-design/odk-central-entity-reg.png)
+![Entities Create UI](../images/xlsform-design/odk-central-entity-registration.png)
 
 ### 3. From Code (API)
 

diff --git a/docs/timeline.md b/docs/timeline.md
@@ -1,125 +1,123 @@
 # Timeline
 
+In reverse chronological order, with most recent events first.
+
 <!-- markdownlint-disable -->
 
-> <div style="border-left: 4px solid gray; border-radius: 0 4px 4px 0; background: rgba(200, 200, 200, 0.15); margin: 2rem auto; padding: 1rem 2rem; position: relative; text-align: center; margin-left: 7rem;">
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2022-09</div>
->
-> <h3>Initial Research & Concept</h3>
-> 🔬 <a style="text-decoration:none;color:grey;" href="https://docs.google.com/document/d/1adG2pXuMXI0wPbR_09ASORMx2gcVn0H6nsCNNGG7tpM/edit#heading=h.k45v77hc1cu1">Concept Note</a> written for a 'Field Mapping Tasking Manager'.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2022-10</div>
->
-> <h3>Project Start</h3>
-> 🏁 Design sprint & first commit to the Github project.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2022-11</div>
->
-> <h3>Backend API & Mobile Design</h3>
-> 📱 The mobile UI was prototyped & first version of FMTM API (server) created.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2022-12</div>
->
-> <h3>Demo: DRC, Kenya, Tanzania</h3>
-> 🚀 From Dec 2022 - Jan 2023 initial tests conducted with FMTM demonstrate its potential as a project.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2023-02</div>
->
-> <h3>Demo: Response to Turkey/Syria Earthquake</h3>
-> 🚀 A call was made for open-source software developers to assist rapid development for the earthquake response.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2023-03</div>
->
-> <h3>NAXA Awarded Contract to Assist FMTM Development</h3>
-> 💻 HOT's main collaborator on FMTM, NAXA, was contracted to continue development.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2023-05</div>
->
-> <h3>Hackathon</h3>
-> 👨‍💻 A hackathon was conducted by NAXA for the task splitting algorithm.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2023-08</div>
->
-> <h3>Demo: Rwanda Road Assessment</h3>
-> 🚀 Rwanda building and road assessment after severe flooding.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2023-08</div>
->
-> <h3>Rapid Development & Iteration of FMTM</h3>
-> 🏗️ Growth phase of FMTM with large improvements to the FMTM workflow & usability.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2024-02</div>
->
-> <h3>Demo: Monrovia, Liberia</h3>
-> 🚀 The first conceptualisation of HOT's full E2E workflow, after field mapping feedback.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2024-03</div>
->
-> <h3>Public Beta Release</h3>
-> 🆕 A big push to get the public beta released 1st March. Open for testing by the public.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2024-03</div>
->
-> <h3>Demo: Karangasem, Bali</h3>
-> 🚀 Landslide risk assessment, refinement of the E2E workflow.
->
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
->
-> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
-> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2024-04</div>
->
-> <h3>Demo: CLIGEOS, Nepal</h3>
-> 🚀 Demo of FMTM within a full E2E workshop.
+<!-- NOTE the styling for this timeline is bundled in mkdocs as timeline.css -->
+<!-- Additional emojis: community 🧑‍🧑‍🧒‍🧒 -->
+
+> <div class="timeline-container">
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2024-07</div>
+>         <h3>Community Webinar 2</h3>
+>         🎥 Public webinar displaying FMTM's current capabilities and building
+>         partnerships.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2024-07</div>
+>         <h3>Demo: Alpa Corral, Argentina </h3>
+>         🚀 Field test with over 100 users for fire hazard assessment
+
+          and prevention mapping.
+
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2024-06</div>
+>         <h3>Demo: Karangasem, Bali (v2)</h3>
+>         🚀 Further refinement of E2E workflow in conjunction with imagery
+>         from Drone Tasking Manager.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2024-04</div>
+>         <h3>Demo: CLIGEOS, Nepal</h3>
+>         🚀 Demo of FMTM within a full E2E workshop.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2024-03</div>
+>         <h3>Demo: Karangasem, Bali</h3>
+>         🚀 Landslide risk assessment, refinement of the E2E workflow.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2024-03</div>
+>         <h3>Public Beta Release</h3>
+>         🆕 A big push to get the public beta released 1st March. Open for
+>         testing by the public.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2024-02</div>
+>         <h3>Demo: Monrovia, Liberia</h3>
+>         🚀 The first conceptualisation of HOT's full E2E workflow, after field
+>         mapping feedback.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2023-08</div>
+>         <h3>Rapid Development & Iteration of FMTM</h3>
+>         🏗️ Growth phase of FMTM with large improvements to the FMTM
+>         workflow & usability.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2023-08</div>
+>         <h3>Demo: Rwanda Road Assessment</h3>
+>         🚀 Rwanda building and road assessment after severe flooding.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2023-05</div>
+>         <h3>Hackathon</h3>
+>         👨‍💻 A hackathon was conducted by NAXA for the task splitting
+>         algorithm.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2023-03</div>
+>         <h3>NAXA Awarded Contract to Assist FMTM Development</h3>
+>         💻 HOT's main collaborator on FMTM, NAXA, was contracted to continue
+>         development.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2023-02</div>
+>         <h3>Demo: Response to Turkey/Syria Earthquake</h3>
+>         🚀 A call was made for open-source software developers to assist rapid
+>         development for the earthquake response.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2022-12</div>
+>         <h3>Demo: DRC, Kenya, Tanzania</h3>
+>         🚀 From Dec 2022 - Jan 2023 initial tests conducted with FMTM
+>         demonstrate its potential as a project.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2022-11</div>
+>         <h3>Backend API & Mobile Design</h3>
+>         📱 The mobile UI was prototyped & first version of FMTM API (server)
+>         created.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2022-10</div>
+>         <h3>Project Start</h3>
+>         🏁 Design sprint & first commit to the Github project.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2022-09</div>
+>         <h3>Initial Research & Concept</h3>
+>         🔬 [Concept Note][1] written for a 'Field Mapping Tasking Manager'.
+>         <div class="timeline-dot"></div>
+>     </div>
 >
-> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
-> </div>
 > </div>
 
 <!-- markdownlint-restore -->
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -28,6 +28,7 @@ theme:
 
 extra_css:
   - css/extra.css
+  - css/timeline.css
 
 markdown_extensions:
   - tables