Merge pull request #94 from OvertureMaps/transportation_better_docs

Improve Transportation diagrams with dark/light theme and Overture color palette
OvertureMaps · Dec 13, 2023 · 7cd9167 · 7cd9167
2 parents f020b9e + 2163324
commit 7cd9167
Show file tree

Hide file tree

Showing 69 changed files with 213 additions and 98 deletions.
diff --git a/docusaurus/docs/reference/transportation/segment.mdx b/docusaurus/docs/reference/transportation/segment.mdx
@@ -13,6 +13,9 @@ import ExampleTurnRestrictionConnector1 from '!!raw-loader!@site/docs/_examples/
 import ExampleTurnRestrictionConnector2 from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/turn-restriction-02-connector2.yaml';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 
 # segment
 
@@ -131,7 +134,13 @@ The schema for `water` segments is under development.
 
 <div style={{textAlign: 'center'}}>
 
-![Diagram of the "via" transition from source to destination segment.](/img/transportation/turn-restriction-02.svg)
+<ThemedImage
+  alt='Diagram of the "via" transition from source to destination segment'
+  sources={{
+    light: useBaseUrl('/img/transportation/turn-restriction-02-light.png'),
+    dark: useBaseUrl('/img/transportation/turn-restriction-02-dark.png'),
+  }}
+/>
 
 </div>
 

diff --git a/docusaurus/docs/themes/transportation/roads.mdx b/docusaurus/docs/themes/transportation/roads.mdx
@@ -1,6 +1,8 @@
 import CodeBlock from '@theme/CodeBlock';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import ExampleAccessRestrictionsBlanketDeny from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/access-restriction-01-blanket.yaml';
 import ExampleAccessRestrictionPrivateAccessWithDeliveries from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/access-restriction-02-private-with-deliveries.yaml';
 import ExampleAccessRestrictionMotorVehiclesDestinationOnly from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/access-restriction-03-motor-vehicles-destination-only.yaml';
@@ -202,7 +204,13 @@ where the sequence of maneuvers is important.
 
 <figure>
 
-![A simple transition restriction prohibiting a right turn](/img/transportation/turn-restriction-01.svg)
+<ThemedImage
+  alt="A simple transition restriction prohibiting a right turn"
+  sources={{
+    light: useBaseUrl('/img/transportation/turn-restriction-01-light.png'),
+    dark: useBaseUrl('/img/transportation/turn-restriction-01-dark.png'),
+  }}
+/>
 
 <figcaption>
 
@@ -284,7 +292,13 @@ real-world context to the example.*
 
 <figure>
 
-![A via restriction](/img/transportation/turn-restriction-02.svg)
+<ThemedImage
+  alt="A via restriction"
+  sources={{
+    light: useBaseUrl('/img/transportation/turn-restriction-02-light.png'),
+    dark: useBaseUrl('/img/transportation/turn-restriction-02-dark.png'),
+  }}
+/>
 
 <figcaption>
 
@@ -439,27 +453,57 @@ respectively.
 
 <div style={{ display: "flex", alignItems: "center" }}>
 
-<div style={{ width: "24.625%", float: "left", textAlign: "center" }}>
+<div style={{ width: "27%", float: "left", textAlign: "center" }}>
 
-![West-oriented road segment with two lanes](/img/transportation/lane-number-01-west.svg)
+<ThemedImage
+  alt='West-oriented road segment with two lanes'
+  sources={{
+    light: useBaseUrl('/img/transportation/lane-number-01-west-light.png'),
+    dark: useBaseUrl('/img/transportation/lane-number-01-west-dark.png'),
+  }}
+/>
 
 </div>
 
-<div style={{ width: "24.625%", float: "left", textAlign: "center" }}>
+<div style={{ width: "10px", float: "left" }}/>
 
-![North-oriented road segment with two lanes](/img/transportation/lane-number-02-north.svg)
+<div style={{ width: "23%", float: "left", textAlign: "center" }}>
+
+<ThemedImage
+  alt='North-oriented road segment with two lanes'
+  sources={{
+    light: useBaseUrl('/img/transportation/lane-number-02-north-light.png'),
+    dark: useBaseUrl('/img/transportation/lane-number-02-north-dark.png'),
+  }}
+/>
 
 </div>
 
-<div style={{ width: "24.625%", float: "left", textAlign: "center" }}>
+<div style={{ width: "10px", float: "left" }}/>
+
+<div style={{ width: "27%", float: "left", textAlign: "center" }}>
 
-![East-oriented road segment with two lanes](/img/transportation/lane-number-03-east.svg)
+<ThemedImage
+  alt='East-oriented road segment with two lanes'
+  sources={{
+    light: useBaseUrl('/img/transportation/lane-number-03-east-light.png'),
+    dark: useBaseUrl('/img/transportation/lane-number-03-east-dark.png'),
+  }}
+/>
 
 </div>
 
-<div style={{ width: "24.625%", float: "left", textAlign: "center" }}>
+<div style={{ width: "10px", float: "left" }}/>
+
+<div style={{ width: "23%", float: "left", textAlign: "center" }}>
 
-![East-oriented road segment with two lanes](/img/transportation/lane-number-04-south.svg)
+<ThemedImage
+  alt='South-oriented road segment with two lanes'
+  sources={{
+    light: useBaseUrl('/img/transportation/lane-number-04-south-light.png'),
+    dark: useBaseUrl('/img/transportation/lane-number-04-south-dark.png'),
+  }}
+/>
 
 </div>
 
@@ -586,7 +630,13 @@ segments.
 
 <figure>
 
-![A segment with two geometrically-scoped lane blocks connected to a segment oriented in the opposite direction](/img/transportation/lane-blocks.svg)
+<ThemedImage
+  alt='A segment with two geometrically-scoped lane blocks connected to a segment oriented in the opposite direction'
+  sources={{
+    light: useBaseUrl('/img/transportation/lane-blocks-light.png'),
+    dark: useBaseUrl('/img/transportation/lane-blocks-dark.png'),
+  }}
+/>
 
 <figcaption>
 

diff --git a/docusaurus/docs/themes/transportation/scoping-rules.mdx b/docusaurus/docs/themes/transportation/scoping-rules.mdx
@@ -1,6 +1,8 @@
 import CodeBlock from '@theme/CodeBlock';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import ExampleGeometricScoping from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/geometric-scoping.yaml';
 import ExampleTemporalScoping from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/temporal-scoping.yaml';
 import ExampleSubjectiveUsagePurposeScoping from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/subjective-usage-purpose-scoping.yaml';
@@ -60,7 +62,13 @@ start.
 
 <figure>
 
-![Diagram showing a single geometrically-scoped position.](/img/transportation/geometric-scoping-position.svg)
+<ThemedImage
+  alt="Diagram showing a single geometrically-scoped position"
+  sources={{
+    light: useBaseUrl('/img/transportation/geometric-scoping-position-light.svg'),
+    dark: useBaseUrl('/img/transportation/geometric-scoping-position-dark.svg'),
+  }}
+/>
 
 <figcaption>
 
@@ -83,7 +91,13 @@ length from the start.
 
 <figure>
 
-![Diagram showing a geometrically-scoped range.](/img/transportation/geometric-scoping-range.svg)
+<ThemedImage
+  alt="Diagram showing a geometrically-scoped range"
+  sources={{
+    light: useBaseUrl('/img/transportation/geometric-scoping-range-light.svg'),
+    dark: useBaseUrl('/img/transportation/geometric-scoping-range-dark.svg'),
+  }}
+/>
 
 <figcaption>
 

diff --git a/docusaurus/docs/themes/transportation/shape-connectivity.mdx b/docusaurus/docs/themes/transportation/shape-connectivity.mdx
@@ -1,3 +1,6 @@
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Shape and Connectivity
 
 The Overture Transportation theme captures the physical shape and connectivity
@@ -9,7 +12,13 @@ types: Segments and Connectors.
 
 <figure>
 
-![Three segments physically joined by a connector](/img/transportation/network.svg)
+<ThemedImage
+  alt="Three segments physically joined by a connector"
+  sources={{
+    light: useBaseUrl('/img/transportation/network-light.png'),
+    dark: useBaseUrl('/img/transportation/network-dark.png'),
+  }}
+/>
 
 <figcaption>
 
@@ -96,14 +105,24 @@ coordinates:
 
 <div style={{textAlign: 'center'}}>
 
-![West-oriented segment geometry](/img/transportation/oriented-west.svg)
+<ThemedImage
+  alt="West-oriented segment geometry"
+  sources={{
+    light: useBaseUrl('/img/transportation/oriented-west-light.svg'),
+    dark: useBaseUrl('/img/transportation/oriented-west-dark.svg'),
+  }}
+/>
 
 </div>
 
 <figcaption>
 
+<div style={{textAlign: 'center'}}>
+
 *This segment geometry is oriented due west.*
 
+</div>
+
 </figcaption>
 </figure>
 
@@ -123,14 +142,24 @@ coordinates:
 
 <div style={{textAlign: 'center'}}>
 
-![East-oriented segment geometry](/img/transportation/oriented-east.svg)
+<ThemedImage
+  alt="East-oriented segment geometry"
+  sources={{
+    light: useBaseUrl('/img/transportation/oriented-east-light.svg'),
+    dark: useBaseUrl('/img/transportation/oriented-east-dark.svg'),
+  }}
+/>
 
 </div>
 
 <figcaption>
 
+<div style={{textAlign: 'center'}}>
+
 *This segment geometry is oriented due east.*
 
+</div>
+
 </figcaption>
 </figure>
 
@@ -150,7 +179,13 @@ back toward the start of the segment.
 
 <figure>
 
-![Travel heading along a segment oriented due east](/img/transportation/heading.svg)
+<ThemedImage
+  alt="Travel heading along a segment oriented due east"
+  sources={{
+    light: useBaseUrl('/img/transportation/heading-light.svg'),
+    dark: useBaseUrl('/img/transportation/heading-dark.svg'),
+  }}
+/>
 
 <figcaption>
 
@@ -204,7 +239,13 @@ order than a greater number.
 
 <figure>
 
-![Three segments physically joined by a connector](/img/transportation/levels.svg)
+<ThemedImage
+  alt="Level 0 segments stacked above level -1 segments"
+  sources={{
+    light: useBaseUrl('/img/transportation/level-light.png'),
+    dark: useBaseUrl('/img/transportation/level-dark.png'),
+  }}
+/>
 
 <figcaption>
 
@@ -292,14 +333,25 @@ segments remain as they were and no data needs to be re-conflated.
 
 <div style={{ width: "50%", float: "left" , textAlign: "center" }}>
 
-![A city block without with back alley omitted](/img/transportation/interior-connectors-before.svg)
-
+<ThemedImage
+  alt="A city block without with back alley omitted"
+  sources={{
+    light: useBaseUrl('/img/transportation/interior-connectors-before-light.png'),
+    dark: useBaseUrl('/img/transportation/interior-connectors-before-dark.png'),
+  }}
+/>
 
 </div>
 
 <div style={{ width: "50%", float: "right", textAlign: "center" }}>
 
-![A city block without with back alley omitted](/img/transportation/interior-connectors-after.svg)
+<ThemedImage
+  alt="A city block after adding a new back alley segment"
+  sources={{
+    light: useBaseUrl('/img/transportation/interior-connectors-after-light.png'),
+    dark: useBaseUrl('/img/transportation/interior-connectors-after-dark.png'),
+  }}
+/>
 
 </div>
 
@@ -341,7 +393,13 @@ less churn in conflated data.
 
 <figure>
 
-![A single segment with a geometrically-scoped speed limit](/img/transportation/geometrically-scoped-speed-limit.svg)
+<ThemedImage
+  alt="A single segment with a geometrically-scoped speed limit"
+  sources={{
+    light: useBaseUrl('/img/transportation/geometrically-scoped-speed-limit-light.png'),
+    dark: useBaseUrl('/img/transportation/geometrically-scoped-speed-limit-dark.png'),
+  }}
+/>
 
 <figcaption>
 
@@ -370,13 +428,25 @@ can be corrected by splitting the segment into *N* pieces.
 
 <div style={{width: "50%", float: "left"}}>
 
-![Illegal circular loop](/img/transportation/circle-looped.svg)
+<ThemedImage
+  alt="Illegal circular loop"
+  sources={{
+    light: useBaseUrl('/img/transportation/circle-looped-light.png'),
+    dark: useBaseUrl('/img/transportation/circle-looped-dark.png'),
+  }}
+/>
 
 </div>
 
 <div style={{width: "50%", float: "left"}}>
 
-![Illegal circular loop](/img/transportation/circle-unlooped.svg)
+<ThemedImage
+  alt="One possible correction for illegal circular loop"
+  sources={{
+    light: useBaseUrl('/img/transportation/circle-unlooped-light.png'),
+    dark: useBaseUrl('/img/transportation/circle-unlooped-dark.png'),
+  }}
+/>
 
 </div>
 
@@ -402,13 +472,25 @@ can be corrected by splitting the segment into *N* pieces.
 
 <div style={{width: "50%", float: "left"}}>
 
-![Illegal self-crossing loop](/img/transportation/crossing-looped.svg)
+<ThemedImage
+  alt="Illegal self-crossing loop"
+  sources={{
+    light: useBaseUrl('/img/transportation/crossing-looped-light.png'),
+    dark: useBaseUrl('/img/transportation/crossing-looped-dark.png'),
+  }}
+/>
 
 </div>
 
 <div style={{width: "50%", float: "left"}}>
 
-![Correction to self-crossing loop](/img/transportation/crossing-unlooped.svg)
+<ThemedImage
+  alt="One possible correction to self-crossing loop"
+  sources={{
+    light: useBaseUrl('/img/transportation/crossing-unlooped-light.png'),
+    dark: useBaseUrl('/img/transportation/crossing-unlooped-dark.png'),
+  }}
+/>
 
 </div>