docs (add videos): update docs with videos, gifs

[philip-cline]

Checklist

• [x] Appropriate branch selected (all PRs must first be merged to dev before they can be merged to master)
• [x] Any modified or new methods or classes have helpful JSDoc and code is thoroughly commented
• [x] The description lists all applicable issues this PR seeks to resolve
• [x] The description lists any configuration setting(s) that differ from the default settings
• [x] All tests and CI builds passing

Description

Updating documentation to include walkthrough videos for creating routes, etc. Updating screenshots to show current version of Data Tools and IBI logos. Added gifs to improve user experience. All doc files have been changed except those dealing with implementation and deployment (deploying-feeds.md, otp-deployment.md, etc.).

[codecov-commenter]

Codecov Report

Merging #598 into dev will decrease coverage by 27.82%. The diff coverage is n/a.

@@             Coverage Diff             @@
##              dev     #598       +/-   ##
===========================================
- Coverage   43.45%   15.63%   -27.83%     
===========================================
  Files         323      323               
  Lines       17603    16468     -1135     
  Branches     5368     5004      -364     
===========================================
- Hits         7649     2574     -5075     
- Misses       8679    11868     +3189     
- Partials     1275     2026      +751     

Flag	Coverage Δ
#end_to_end_tests	?
#unit_tests	15.63% <ø> (-0.04%)	:arrow_down:

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
lib/manager/components/validation/TripsChart.js	0.00% <0.00%> (-80.40%)	:arrow_down:
...nager/components/validation/ServicePerModeChart.js	0.00% <0.00%> (-78.27%)	:arrow_down:
lib/common/util/map-keys.js	25.00% <0.00%> (-75.00%)	:arrow_down:
lib/manager/components/HomeProjectDropdown.js	0.00% <0.00%> (-72.73%)	:arrow_down:
lib/editor/util/objects.js	14.89% <0.00%> (-72.35%)	:arrow_down:
lib/editor/components/map/TextPath.js	0.00% <0.00%> (-70.00%)	:arrow_down:
...b/manager/containers/ActiveFeedVersionNavigator.js	0.00% <0.00%> (-70.00%)	:arrow_down:
lib/editor/components/timetable/HeaderCell.js	0.00% <0.00%> (-68.97%)	:arrow_down:
lib/manager/components/DeploymentPreviewButton.js	15.78% <0.00%> (-68.43%)	:arrow_down:
lib/editor/components/EditorSidebar.js	0.00% <0.00%> (-66.67%)	:arrow_down:
... and 266 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update c3cf9eb...c2df6dc. Read the comment docs.

[philip-cline]

Thanks @binh-dam-ibigroup, I'll review today and make fixes.

[philip-cline]

Ok @binh-dam-ibigroup I pushed changes, everything should be resolved except placing the tutorial videos at the top / bottom of the docs. Will update that when that's decided.

[philip-cline]

Ok a few updates I'll make soon on this PR:

• Highlight an element in a screenshot when it's referenced in the text.
• The tutorial videos seem to be very low res when you full screen them. I'll re-upload in higher quality.
• Update fare rules gif, it's see-through for some reason.
• OTP architecture diagram needs to be updated.

Something to discuss is adding the ability to pause (and a default paused setting) for the gifs. It's quite a headache to read right now with multiple gifs playing in your line of sight. This blog here demos the kind of the functionality that could work well in the docs.

[binh-dam-ibigroup]

@miles-grant-ibigroup We need another reviewer for this PR to close it, so I have added you...

[philip-cline]

I was going to add some more functionality around not autoplaying gifs on opening the page to this, but I could do that in a separate PR

[miles-grant-ibigroup]

I think we can do it in this PR. I'll assign back to you.

[miles-grant-ibigroup]

🫡

[philip-cline]

🫡