Utility to convert an SVG steno diagram to React syntax for use in Typey Type for Stenographers
MIT License
This project is has utility scripts to manually convert an SVG steno diagram to React syntax for use in Typey Type for Stenographers.
For each new steno layout, 3 things are needed:
For designing the diagram itself, if Overpass Mono does not support all the glyphs needed for a language’s characters, then you’ll also need an alternative Google Fonts hosted monospace typeface that supports all the characters needed.
In Typey Type, tests need to be written that at least cover:
#T
for 3
in English and -
for middle keys that aren’t specified by keys.Use the scripts in this project to convert exported SVGs into React syntax.
Pre-requisites.
You need ruby to install the Ruby dependencies, including nokogiri
:
bundle install
You need node.js to install the JavaScript dependencies:
yarn install
Before using any of the Ruby scripts, change the file modes to make the scripts executable, for example:
chmod +x ./italian-michela-prepare-optimized-svg-for-react-component.rb
chmod +x ./japanese-prepare-optimized-svg-for-react-component.rb
chmod +x ./brazilian-portuguese-prepare-optimized-svg-for-react-component.rb
Before making changes to diagrams, run the code at least once and check the git diff to make sure the output doesn't change and works as expected. This will catch any issues in build tools like version changes.
For hobbyist layouts with no number bar and with outer number keys:
./no-number-bar-inner-thumb-numbers-prepare-optimized-svg-for-react-component.rb source-svgs/no-number-bar-inner-thumb-numbers.svg target-js/NoNumberBarInnerThumbNumbersStenoDiagram.js
./no-number-bar-outer-thumb-numbers-prepare-optimized-svg-for-react-component.rb source-svgs/no-number-bar-outer-thumb-numbers.svg target-js/NoNumberBarOuterThumbNumbersStenoDiagram.js
For Brazilian Portuguese:
./brazilian-portuguese-prepare-optimized-svg-for-react-component.rb source-svgs/brazilian-portuguese.svg target-js/BrazilianPortugueseStenoDiagram.js
For Italian Michela:
./italian-michela-prepare-optimized-svg-for-react-component.rb source-svgs/italian-michela.svg target-js/ItalianMichelaStenoDiagram.js
For Japanese:
./japanese-prepare-optimized-svg-for-react-component.rb source-svgs/japanese.svg target-js/JapaneseStenoDiagram.js
For Yawei Chinese steno:
./yawei-chinese-prepare-optimized-svg-for-react-component.rb source-svgs/yawei-chinese.svg target-js/YaweiChineseStenoDiagram.js
In Figma:
leftTKey
and leftT
for the key and letter, respectively, starKey
, rightDLower
, numberBar
, leftCapitalC
, leftPlusOne
, rightCaretOne
, the8Key
Include "id" attribute
is checked in order to Explort layer names using id
In this repo:
source-svgs/*.svg
and remove white background rect
if needed*prepare-optimized-svg-for-react-component.rb
script fileKEYS
and SYMBOLS
constantsTo add the finalised diagram to Typey Type:
src/StenoLayout/BrazilianPortugueseStenoDiagram.js
.src/StenoLayout/NEWDiagram.js
.width={diagramWidth}
.className={this.props.classes}
to svg
element.BrazilianPortuguese
):
src/utils/stenoLayouts/mapBriefToBrazilianPortugueseStenoKeys.ts
and src/utils/stenoLayouts/mapBriefToBrazilianPortugueseStenoKeys.test.ts
.Here are the previous steps for Sketch diagrams…
For preparing and exporting the SVG diagram from Sketch:
<g>
s id
must be the layout’s name e.g. italian-michela
.id
s for keys must match the test case’s key names e.g. leftCapitalX
.id
s for letters should match the test case’s key names plus "Letter" e.g. leftCapitalXLetter
.svgo
:
Prettify markup
Remove xmlns
Clean IDs
Collapse useless groups
Remove <title>
Remove <desc>