Blogging in Gatsby with Drummer

[scotthansonde]

I'm now able to use Drummer to post to my blog in Gatsby! I described it in a post that of course is written in Drummer.

My code is at https://github.com/papascott/papascott-gatsby

I started with the gatsby-demo-opmlnotes by Andrew Shell

[scripting]

Congrats and good work! 😀

A suggestion, link to Gatsby and Drummer the first time their names appear in the post.

I’m not sure about Gatsby, would want to know more, and I imagine most Gatsby users don’t know about Drummer and what it means for it to work with Gatsby.

[scotthansonde]

I've added the links, thanks for the suggestion. In a future post I can explain a little bit about Gatsby and why I use it. Right now I'm still at the point where I'm astounded that my code seems to work as I intended! 😃

[scripting]

@papascott -- I published a writeup on Scripting News.

I'm banging the drum for connecting stuff together. And this is an important milestone.

Maybe a video?

Is there a quick tutorial for Gatsby that assumes I understand HTML, have Node installed, have run CMSes.

I looked at their tutorial and simply can't find out what it;'s like to use Gatsby so I can't see how Drummer connects.

[scotthansonde]

@scripting Yeah, the present Gatsby site is quite startup-intense. A better technical explanation might be their GitHub Readme or this 13 minute video talk on What Is Gatsby. I also found a 45 minute video tutorial on Learn Gatsby: How to Build Your First Gatsby Blog where they start with a "blog starter" to create an ugly but functional blog.

My executive summary:

• "Gatsby is a free and open source framework based on React", so the templates are written in React.
• It renders static files, so it can be served at any service that can serve static files (like S3 or Netlify).
• And relevant to my solution, it can "Load Data From Anywhere". It uses "source plugins" to pull in data from markdown files, a CMS like WordPress, or an API. The data, regardless of source, is exposed on a GraphQL API; that's how the data gets in the templates.

Andrew Shell wrote a source plugin for Little Outliner OPML files. I was able to use that with minor modifications to import Drummer OPML data into my blog.

I appreciated your remark about plumbers and poets in the same space. I'm certainly a plumber! 😄

[scripting]

@papascott -- glad you saw plumbers and poets. it just came to me that's what we are. i am a plumber for sure. i even have a friend who said i was the best plumber ever. i really appreciated that. ;-)

you know the video i want to see -- you, using drummer to publish to gatsby. do a seat of the pants demo in youtube, that would give me most of the info i need. that's the level at which gatsby is relevant to me.

[scotthansonde]

I’ll be happy to make that video, either tomorrow or Wednesday! 😀

…

On 1. Nov 2021, at 20:10, Dave Winer ***@***.***> wrote:  @papascott -- glad you saw plumbers and poets. it just came to me that's what we are. i am a plumber for sure. i even have a friend who said i was the best plumber ever. i really appreciated that. ;-) you know the video i want to see -- you, using drummer to publish to gatsby. do a seat of the pants demo in youtube, that would give me most of the info i need. that's the level at which gatsby is relevant to me. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[scotthansonde]

I've recorded a screencast of making a post: https://youtu.be/9Y4cn-GPamY

[thejeshgn]

@papascott it leaks your netlify webhook URL. Hopefully the URL is inactive now.

[scotthansonde]

@thejeshgn No worries, there's a new URL now 😄

[kevinctofel]

@papascott this is a great video demo! I’ve been using Gatsby for my personal blog for about 18 months now and you nailed the experience.

@scripting I’d say the “integration pipes” between Drummer and Gatsby are already there via GitHub and Netlify. Netlify builds and publishes static site files by reading them in .md format from GitHub. So if a tool can be used to save blog posts during creation to GitHub as .md, (which is what @papascott’s webhook does, as soon as Netlify sees a change to the GitHub repo, it regenerates and publishes the blog post pages. High level, but just some additional context on the process of Gatsby/Netlify.

My first explanation of Gatsby when I decided to use it is here. So as long as something can modify Drummer blog posts to a GitHub repo in .md that Netlify is configured to watch, Netlify will use Gatsby to publish those posts by default.

[scripting]

@papascott — okay now I understand what the pieces are, and I think I understand what your drummer script is doing, but the text is too small to read. Are you sending the whole opml file over to Gatsby? Is your plug-in running on Gatsby, parsing the opml and converting it to a format Gatsby understands (presumably markdown?)

@kevinctofel - great to see you here! Drummer is not writing anything to GitHub, so whatever Scott is doing, he’s not depending on that.

anyway you both have given me lots to think about! 😀

[scotthansonde]

@scripting Here's my Drummer script. It in fact sends an empty object to Netlify. All hitting the URL does is trigger the build.

const xhr = new XMLHttpRequest();
const hookUrl="https://api.netlify.com/build_hooks/XXXXXXX"
xhr.open("POST", hookUrl, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({}));
dialog.alert ('Sent build hook to Netlify')

The plugin itself fetches the outline from the public URL when the site is built. Here are the options I'm giving the plugin:

{
      resolve: `gatsby-source-opmlnote`,
      options: {
        url: `http://drummer.scripting.com/ScottHansonDE/papascott-de.opml`,
        name: 'posts',
        timezone: 'Europe/Berlin',
      },
    },

Is your plug-in running on Gatsby, parsing the opml and converting it to a format Gatsby understands (presumably markdown?)

That's correct!

@kevinctofel Saving the outline to GitHub from Drummer would be a logical next step, then all my content would be in the repository.

[kevinctofel]

@kevinctofel Saving the outline to GitHub from Drummer would be a logical next step, then all my content would be in the repository.

@papascott I suspect @scripting already has some of the plumbing done for that since he archives his blog posts to GitHub today IIRC. 😉

[scripting]

@kevinctofel -- i have lots of stuff that writes to github locations, i think it's an incredible resource and i want to use it more. but it's always been tricky from an authorization standpoint, it's easy for me to write code that posts stuff on my behalf, but for scripts, like the one @papascott is working on, i want them to use their own github resources.

an example app

See this folder on GH...

https://github.com/scripting/instantOutlines/tree/main/outlines/twitter

Those are a bunch of twitter accounts that an app of mine checks every minute, and posts whatever they post to a large opml file and upload it to that location.

spamming is a problem already

I could do that for every drummer user's blog.opml file, technically -- but there's another kind of security involved, not opening up all drummer users to spamming. it's amazing how quickly spammers show up these days. we had a long grace period in the early blogosphere, but this isn't like that anymore.

in the meantime if there are any apps people want to try out that require publicly accessible opml files that update regularly, this is a place to start. There's actually a lot of infrastructure built up around this idea.

[kevinctofel]

Right, you don’t want to be the GitHub gatekeeper and people should be able to connect Drummer to their own GitHub repos, if I’m understanding correctly. I believe that when I hooked up Netlify and GitHub together, they used this OAuth implementation which was a once and done from a user perspective. https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps#web-application-flow

If it were implemented in Drummer (in theory) people would connect their GitHub repo to Drummer from Drummer, at least as far as I can tell although as a coding n00b, I could very well be wrong. Drummer would then have an access token to write to the specific user’s GitHub repo on behalf of the user. And the user could revoke that access at any time, if desired, directly through GitHub. See image for the apps/services, I’ve authorized, for example.

Once connected, (again in theory) Drummer could save new blog posts to that GitHub repo, which Netlify would pick up as pull requests and kick off a build/publish process automatically.

Note that I’m not asking you to do this: I’m just providing some information and thinking out loud. ;)