The sample theme I am using puts a link at the bottom of each single post with a “Leave a comment” link, but on the file at packages/gatsby-theme- tabor/src/templates/posts/single.js there’s a comment with at TODO to make comment functionality work.
That’s far above my head on a static site at this point, so for a fun workaround, I thought it would be neat to change that to a “Comment on Twitter” button instead. Using Twitter’s web intents API (which I am familiar with) I want to make a link with something like “Enter Your Comment Here” along with a link back to the post.
I had relatively little trouble changing the URL, but so far all I can figure out how to do is to link to the WordPress source site, not the resulting static site, in the tweet itself.
I spent a not-insignificant amount of time try to figure out how to link back to the site itself, but the only thing I can find in the docs is references to the <Link /> component of Gatsby, which is for internal linking. My use case is a bit strange, because I want to link to the home URL from within an external link, dynamically.
I can always hardcode it to something, but the fact that at this point in the build I don’t even have a final resting URL for this site furhter underscores how great it will be to dynamically do it, so that I don’t have to go back and search-replace all instances of the URL after the fact.
Other options I am thinking is that I can add in a utility class that combs through all outgoing links and changes the internal WordPress link to the external one, similar to how createlocallink does in the utils directory now.
Or I am missing something very obvious. Stranger things have happened.
On the “things I got right” side, I found by searching in the source of my static site locally that the featured images being pulled over from WP, even though they had some alt text in the images on the WP side, were just displaying the Post name/title in the alt text on the site.
So I searched for alt= in all files on VS code which led me to packages/gatsby-theme-tabor/src/components/PostEntryMedia.js where I changed out {post.title} on line 27 for {post.featuredImage.altText}.
That didn’t do anything, because that data had not been pulled at the time of the build, so I exited out of the dev mode (control + c) and ran the develop command yarn workspace develop again.
That still didn’t work, so I dug in and found the data.js file at packages/gatsby-theme-tabor/src/templates/posts/data.js and added two new lines in both of the featuredImage arrays for altText.
Then after a restarting/rebuilding of the development environment, everything worked correctly. I wish there was a way to have some fallback alt text for when someone forgets to add it, (like defaulting to the post title, which was nice) but for now I’ll just have to remember to add in the alt text. I briefly played around with the ESLint configurations to try and add some a11y stuff, but didn’t get far. It appears to only be checking the react code for a11y concerns, not checking what is pulled in over the graphQL API (or what is output).
More learning for later, I suppose. Weigh in on Twitter with all the ideas.
