Thread by @shaisc, BUILDING A SPEECH → WEBSITE WORKFLOW so- sometimes i'm on a walk, [...]

BUILDING A SPEECH → WEBSITE WORKFLOW

so- sometimes i'm on a walk, and thoughts and ideas arise. (about business, software, the mind, the world, sandwiches, …). i'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's auto-transcribed and hasn't been edited yet. edit later.

[1] https://shai.io/garden/

My digital garden

I wet my plants 💦

https://shai.io/garden/

let's build something to make it happen. i'll document everything as i go… join me

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

website is a static site built with @jekyllrb and hosted on @github

so a good place to start looking is @zapier. it's made for this sort of thing: Trigger when new file added to Google Drive folder → Create new file in GitHub repo. Except…………………

……………… Zapier's GitHub app doesn'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

i'm gonna run with #2. #1 is a solid option but has security implications as i think you'd need your github api key directly in the block. #3 would be a shame because you'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'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'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't

we'll call it GitHub Plus

(
if this is your first zapier custom app rodeo, you'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

and to begin with i'm just gonna add an action that does something simple like reverse a string, so i can make sure everything's working

$ zapier scaffold create reverse

roughly does the trick, i'm just gonna modify a couple of things i don'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 Zapier

Let's set up the app to auth with GitHub's API. it's mostly just boilerplate from zapier's sample apps. 'custom' auth type. We'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'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'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's repo in github) instead of just gnirtS A gnisreveR

first, its input fields. they'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:

i think that'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

everything else is just text inputs, so you could fill them with something like this -

i think that'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 everything else is just text inputs, so you could fill them with something like this -

now let's make it actually ping github

it works

ok so to recap where we'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)

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

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'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 'url' not 'content' - it's a long story involving what zapier calls 'hydration' 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

so i can enter "sandwiches" at time of recording and that'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'll have a separate slug and title

Here we go. All the data from the previous steps hooked up to the GitHub Plus 'Create File' step, so we have a proper filename, front-matter etc. jekyll will be so happy

ok. everything's hooked up. just dictated a test article and hit save. let's see what happens

https://shai.io/testing-speech-to-website/

Testing my new speech to website workflow

https://shai.io/testing-speech-to-website/

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's front matter. so if we jump into the site's template we should be able to add some kind of message that appears at the top of those articles, until it's been edited

that'll do

nice and easy to add using @tailwindcss and Heroicons (cc @steveschoger @adamwathan)

Cool. It's been a pleasure

The test article: https://shai.io/testing-speech-to-website/

Opt 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's another: https://twitter.com/shaisc/status/1284491054159482885

Cool. It's been a pleasure The test article: https://shai.io/testing-speech-to-website/Opt 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's another: https://twitter.com/shaisc/status/1284491054159482885

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

Latest Threads Unrolled: