Read on Twitter
BUILDING A SPEECH → WEBSITE WORKFLOW 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">
so- sometimes i& #39;m on a walk, and thoughts and ideas arise. (about business, software, the mind, the world, sandwiches, …). i& #39;d like to store those ideas somewhere to read and adapt in future. other people might like to read them too
so- sometimes i& #39;m on a walk, and thoughts and ideas arise. (about business, software, the mind, the world, sandwiches, …). i& #39;d like to store those ideas somewhere to read and adapt in future. other people might like to read them too
i want to just dictate into my phone during the walk, press save, and have it all transcribed and published as a new article to my digital garden[1] - with a banner to say that it& #39;s auto-transcribed and hasn& #39;t been edited yet. edit later.
[1] https://shai.io/garden/ ">https://shai.io/garden/&q...
[1] https://shai.io/garden/ ">https://shai.io/garden/&q...
let& #39;s build something to make it happen. i& #39;ll document everything as i go… join me https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">
the audio to text part is easy: Google Recorder is great at transcribing as you speak into your phone. It can export a .txt file of the transcription to Google Drive.
So we just need to build something that spots that file, adapts it, and shimmies it on over to the website
So we just need to build something that spots that file, adapts it, and shimmies it on over to the website
website is a static site built with @jekyllrb and hosted on @github
so a good place to start looking is @zapier. it& #39;s made for this sort of thing: Trigger when new file added to Google Drive folder → Create new file in GitHub repo. Except…………………
so a good place to start looking is @zapier. it& #39;s made for this sort of thing: Trigger when new file added to Google Drive folder → Create new file in GitHub repo. Except…………………
……………… Zapier& #39;s GitHub app doesn& #39;t have an option for creating a new file in a site repo. It just has basic actions like creating/updating issues
when that happens, you have a few options-
1. use a code block in zapier instead, to hit the github api and do what you need to do
2. code a custom zapier app to do the same
3. ditch zapier and code the whole thing custom
1. use a code block in zapier instead, to hit the github api and do what you need to do
2. code a custom zapier app to do the same
3. ditch zapier and code the whole thing custom
i& #39;m gonna run with #2. #1 is a solid option but has security implications as i think you& #39;d need your github api key directly in the block. #3 would be a shame because you& #39;d lose the handy things zapier brings like handling the google drive trigger
plus with #2 i could share that custom zapier app with other people to use in their own zapier accounts
so with that all planned out… let& #39;s get the easy part of the zapier zap out the way. the trigger:
that folder is where Google Recorder will send my audio files as well as their transcripts… so let& #39;s filter to only trigger when a text file is added:
and now the fun begins. we need to create a Zapier custom app to do what the Zapier GitHub app can& #39;t
we& #39;ll call it GitHub Plus
(
if this is your first zapier custom app rodeo, you& #39;d install the zapier cli:
$ npm install -g zapier-platform-cli
$ zapier login
)
we& #39;ll call it GitHub Plus
(
if this is your first zapier custom app rodeo, you& #39;d install the zapier cli:
$ npm install -g zapier-platform-cli
$ zapier login
)
create the new app
$ zapier init github-plus
$ cd github-plus
$ npm i
$ zapier test
$ zapier register
$ zapier init github-plus
$ cd github-plus
$ npm i
$ zapier test
$ zapier register
and to begin with i& #39;m just gonna add an action that does something simple like reverse a string, so i can make sure everything& #39;s working
$ zapier scaffold create reverse
roughly does the trick, i& #39;m just gonna modify a couple of things i don& #39;t like about its defaults
$ zapier scaffold create reverse
roughly does the trick, i& #39;m just gonna modify a couple of things i don& #39;t like about its defaults
So, this is reverse.js (reverser is a little function that asynchronously reverses what you pass it after a few hundred ms -- wanted to test out async)
imported that into index.js, did a `zapier push`
et voila
we have our own custom app running inside Zapierhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="🎉" title="Partyknaller" aria-label="Emoji: Partyknaller">
et voila
we have our own custom app running inside Zapier
" title="imported that into index.js, did a `zapier push`et voilawe have our own custom app running inside Zapier https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎉" title="Partyknaller" aria-label="Emoji: Partyknaller">">
" title="imported that into index.js, did a `zapier push`et voilawe have our own custom app running inside Zapier https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎉" title="Partyknaller" aria-label="Emoji: Partyknaller">">
Let& #39;s set up the app to auth with GitHub& #39;s API. it& #39;s mostly just boilerplate from zapier& #39;s sample apps. & #39;custom& #39; auth type. We& #39;ll tell Zapier to ask the Zapier user [me] for their GitHub access token (which they can create in GitHub settings)
![Let& #39;s set up the app to auth with GitHub& #39;s API. it& #39;s mostly just boilerplate from zapier& #39;s sample apps. & #39;custom& #39; auth type. We& #39;ll tell Zapier to ask the Zapier user [me] for their GitHub access token (which they can create in GitHub settings)](https://pbs.twimg.com/media/EmPF_-KU0AUogC_.jpg "Let& #39;s set up the app to auth with GitHub& #39;s API. it& #39;s mostly just boilerplate from zapier& #39;s sample apps. & #39;custom& #39; auth type. We& #39;ll tell Zapier to ask the Zapier user [me] for their GitHub access token (which they can create in GitHub settings)")
Have that API key included in every request this lil custom app makes:
And there& #39;s some middleware to throw a tantrum if the request fails. So testing whether the zapier user has entered a valid github access token is as simple as
Back to Zapier to test it out… it& #39;s looking good. Shouts if i enter a bad access token, works if i enter my real one
just paused to eat an m&m biscuit bar. soo good
refuelled, and ready to add a useful action (adding a new file to my website& #39;s repo in github) instead of just gnirtS A gnisreveR
first, its input fields. they& #39;ll pretty much match the inputs/parameters the github api docs specify the api call takes. repo, path, file contents..
For repo we use a dynamic field so that the zapier user can see a list of all their repos and pick one instead of having to type:
For repo we use a dynamic field so that the zapier user can see a list of all their repos and pick one instead of having to type:
i think that& #39;s our inputs all set up. repo dropdown options get pulled from api. branch dropdown options get pulled from api based on which repo was picked https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙌" title="Raising hands" aria-label="Emoji: Raising hands"> everything else is just text inputs, so you could fill them with something like this -
everything else is just text inputs, so you could fill them with something like this -" title="i think that& #39;s our inputs all set up. repo dropdown options get pulled from api. branch dropdown options get pulled from api based on which repo was picked https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙌" title="Raising hands" aria-label="Emoji: Raising hands"> everything else is just text inputs, so you could fill them with something like this -" class="img-responsive" style="max-width:100%;"/>
now let& #39;s make it actually ping github
it works" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="😍" title="Lächelndes Gesicht mit herzförmigen Augen" aria-label="Emoji: Lächelndes Gesicht mit herzförmigen Augen"> it works">
it works" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="😍" title="Lächelndes Gesicht mit herzförmigen Augen" aria-label="Emoji: Lächelndes Gesicht mit herzförmigen Augen"> it works">
it works" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="😍" title="Lächelndes Gesicht mit herzförmigen Augen" aria-label="Emoji: Lächelndes Gesicht mit herzförmigen Augen"> it works">
ok so to recap where we& #39;re at
- speaking into phone gets transcribed
- sent to google drive
- pings zapier
- zapier is now able to add files to website repo
- (..which triggers netlify to rebuild and redeploy the site, creating the new article)
- speaking into phone gets transcribed
- sent to google drive
- pings zapier
- zapier is now able to add files to website repo
- (..which triggers netlify to rebuild and redeploy the site, creating the new article)
now we just need to wire up the middle part of zapier, to tell it what exactly it should pass to github when a new transcription arrives in google drives (in terms of content + filename)
things we have from the google drive file:
- the transcription
- whatever title was typed into Google Recorder at time of recording
things we need so that jekyll likes the file we give it:
- a filename in the format [date]-[slug].md
- some front matter for the article file
- the transcription
- whatever title was typed into Google Recorder at time of recording
things we need so that jekyll likes the file we give it:
- a filename in the format [date]-[slug].md
- some front matter for the article file
we could use a whole pile of zapier formatters and so on to turn the former into the latter, but for ease for now i& #39;ll just use a code block to run the transformations we need
so - these two things goes in:
actually, going to call that first one & #39;url& #39; not & #39;content& #39; - it& #39;s a long story involving what zapier calls & #39;hydration& #39; but the tl;dr is that the code block will receive a URL to the file contents hosted on a zapier server, not the file contents directly
there we go. code block spits out a filename, article title, and the actual article
how do i get a slug and a title from just the google drive file name?
-> decided that the first word in the typed title in google recorder will be the slug, anything after that is human title
how do i get a slug and a title from just the google drive file name?
-> decided that the first word in the typed title in google recorder will be the slug, anything after that is human title
so i can enter "sandwiches" at time of recording and that& #39;d give a slug of "sandwiches" and a title of "sandwiches".. or i can enter "sandwiches My Favourite Sandwiches" at time of recording and it& #39;ll have a separate slug and title
Here we go. All the data from the previous steps hooked up to the GitHub Plus & #39;Create File& #39; step, so we have a proper filename, front-matter etc. jekyll will be so happy
ok. everything& #39;s hooked up. just dictated a test article and hit save. let& #39;s see what happens https://abs.twimg.com/emoji/v2/... draggable="false" alt="😬" title="Grimasse schneidendes Gesicht" aria-label="Emoji: Grimasse schneidendes Gesicht">
it worked! that article was entirely auto-generated from my speaking into my phone
just one thing left to do: i set the workflow to add a transcribed_needs_editing flag to the article& #39;s front matter. so if we jump into the site& #39;s template we should be able to add some kind of message that appears at the top of those articles, until it& #39;s been edited
that& #39;ll do https://abs.twimg.com/emoji/v2/... draggable="false" alt="🐴" title="Pferdegesicht" aria-label="Emoji: Pferdegesicht">
nice and easy to add using @tailwindcss and Heroicons (cc @steveschoger @adamwathan)
nice and easy to add using @tailwindcss and Heroicons (cc @steveschoger @adamwathan)
nice and easy to add using @tailwindcss and Heroicons (cc @steveschoger @adamwathan)" title="that& #39;ll do https://abs.twimg.com/emoji/v2/... draggable="false" alt="🐴" title="Pferdegesicht" aria-label="Emoji: Pferdegesicht">nice and easy to add using @tailwindcss and Heroicons (cc @steveschoger @adamwathan)">
nice and easy to add using @tailwindcss and Heroicons (cc @steveschoger @adamwathan)" title="that& #39;ll do https://abs.twimg.com/emoji/v2/... draggable="false" alt="🐴" title="Pferdegesicht" aria-label="Emoji: Pferdegesicht">nice and easy to add using @tailwindcss and Heroicons (cc @steveschoger @adamwathan)">
Cool. It& #39;s been a pleasure https://abs.twimg.com/emoji/v2/... draggable="false" alt="👋" title="Waving hand" aria-label="Emoji: Waving hand">
The test article: https://shai.io/testing-speech-to-website/
Opt">https://shai.io/testing-s... it at the bottom of that article for more stuff from me
If you enjoyed this thread [share it with your friends, follow me for future ones, and] here& #39;s another: https://twitter.com/shaisc/status/1284491054159482885">https://twitter.com/shaisc/st...
The test article: https://shai.io/testing-speech-to-website/
Opt">https://shai.io/testing-s... it at the bottom of that article for more stuff from me
If you enjoyed this thread [share it with your friends, follow me for future ones, and] here& #39;s another: https://twitter.com/shaisc/status/1284491054159482885">https://twitter.com/shaisc/st...
The test article: https://shai.io/testing-s... it at the bottom of that article for more stuff from meIf you enjoyed this thread [share it with your friends, follow me for future ones, and] here& #39;s another: https://twitter.com/shaisc/st..." title="Cool. It& #39;s been a pleasure https://abs.twimg.com/emoji/v2/... draggable="false" alt="👋" title="Waving hand" aria-label="Emoji: Waving hand">The test article: https://shai.io/testing-s... it at the bottom of that article for more stuff from meIf you enjoyed this thread [share it with your friends, follow me for future ones, and] here& #39;s another: https://twitter.com/shaisc/st..." class="img-responsive" style="max-width:100%;"/>
Oh and happy to share the code / zap / custom zapier app, whatever people want, just let me know
Any feedback or questions just reply here or my DMs are open
Any feedback or questions just reply here or my DMs are open
