isaacs / blog.izs.me Goto Github PK

Add a form that sends an email to ask me things.

Could maybe make it post an issue to an AMA github repo, or a Twitter @-reply, or use https://formspree.io/

Leaning towards making it work using frontmatter in markdown files, and writing a script to convert jsons into frontmattered markdown, with the body as the "content" bit for links, videos, and photosets.

regardless of what's in the .md file.

Putting styles in a style tag inside of <Helmet> means that it's not included in the SSR.

Either need to add a gatsby-ssr.js that does this, or just figure out how to link a stylesheet the old fashioned way, or use component CSS like react intended.

Include on all pages. Pass in all the site info.

The better to share on FB and Twitter and whatnot. Eg from https://www.businesswire.com/news/home/20190108005325/en/npm-Appoints-Bryan-Bogensberger-Chief-Executive-Officer

<meta name="description" content="Seasoned Open Source Entrepreneur Joins npm to Drive Global Community and Revenue Growth."/>
<!-- DC.date.issued is in UTC (Coordinated Universal Time) timezone -->
<meta name="DC.date.issued" content="2019-01-08"/>
<meta name="robots" content="noodp,noydir"/>
<link rel="canonical" href="https://www.businesswire.com/news/home/20190108005325/en/npm-Appoints-Bryan-Bogensberger-Chief-Executive-Officer" />
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@businesswire" />
<meta name="twitter:title" content="npm Appoints Bryan Bogensberger as Chief Executive Officer" />
<meta name="twitter:description" content="Seasoned Open Source Entrepreneur Joins npm to Drive Global Community and Revenue Growth." />
<meta name="twitter:widgets:csp" content="on" />
<meta name="twitter:image" content="https://mms.businesswire.com/media/20190108005325/en/576705/21/npm_logo.jpg" />

<!-- OG Meta Tags for Facebook and LinkedIn -->
<meta property="og:title" content="npm Appoints Bryan Bogensberger as Chief Executive Officer" />
<meta property="og:url" content="" />
<meta property="og:description" content="Seasoned Open Source Entrepreneur Joins npm to Drive Global Community and Revenue Growth." />
<meta property="og:image" content="https://mms.businesswire.com/media/20190108005325/en/576705/21/npm_logo.jpg" />
<meta property="og:image:secure_url" content="https://mms.businesswire.com/media/20190108005325/en/576705/21/npm_logo.jpg" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="150" />
<meta property="og:image:height" content="150" />
<meta property="og:type" content="article" />
<meta property="fb:pages" content="1157450754275955" />
<meta name="p:domain_verify" content="95725e0359a14c2e1ccbd936e10d20d6" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

Height should max out at 350px, or ~1/2 of viewport width.

https://www.gatsbyjs.org/docs/adding-search/

Impressions so far:

• React: basically an ideal component/data model, though the data handling was a bit of a confusing learning curve. (Gatsby and Graphql make this both better and worse in different ways.) JSX is an itchy sweater that I resent wearing. It's not hard to use, in fact, it's pretty easy, but the ceremony feels excessive, and for example switching between {xyz} in JSX and ${xyz} in template strings is annoying.
• Gatsby: pretty effin rad. I like it a lot. Blends really nice dev-time hotswap experience with a powerful component model and an optimized static SSR build for production. The docs are well written, and it has some, but there are not nearly enough. As a result, they sometimes jump way too fast from "this is how you type codes into an editor" to "and then you use React components to..." The tutorials were frustrating at first because of being so novice, and then frustrating because they took a lot of know-how for granted. Gatsby feels like it's still a bit of a power tool for power users. When there's a paved path or a starter, and that path is marked, it's easy, but I found I ended up hacking through jungle a bunch of times. (Maybe that's what I was looking for? I did enjoy the experience!) There are a lot of paved paths, but they don't go everywhere, and they aren't all marked. That being said, it's extremely powerful, well thought-out, and fun to use. I believe this platform will mature very nicely and more docs and tutorials are added to fill in the blanks.
• Graphql: confusing learning curve, still don't quite grok how it's doing stuff, but once the basics clicked, it's way easier to use than SQL, and I already get queries right on the first try more often than not. I can see why everyone's excited about it.
• Cloudflare: happy with it as expected, but for one bump. You can't use them as a TLS terminator in front of a plaintext HTTP backend, which I guess sorta makes sense, but wasn't clear in their interface or docs.
• And then of course there's all the code of my own that I've written here. The importer, the media plugin goober, the template bits, etc. Probably gonna wanna document that somewhere, maybe add like a colophon page or something once I do #20.

Create pages like http://blog.izs.me/tagged/poem for all the tags found in markdown frontmatters.

don't make requests out to https://66.media.tumblr.com/72695ea24d6b9854794a36463eca0275/tumblr_o44abzEHrc1qzjzo9o1_1280.jpg for example

because showing all posts on the frontpage is kind of ridonkulous if you have a thousand or so of them.

istr there's a thing for this already?

Sign up for cloudflare or something.

Move all layout into react components, and build similar logic for handling different kinds of posts.

This bit probably cannot be a shared/published gatsby plugin, since it's specific to my personal blog.

There's a lot of repetition in the graphql right now. Maybe it could be simplified a bit by using fragments or defining types?

Either using a new plugin to handle the tumblr exported data, or the yaml frontmatter in markdown files

If a post has no date, assume it's a "page" and link to it in the header, with a page created as just its slug with no /YYYY/MM bit.

Also update all the paginated allMarkdownRemark queries to filter for nodes that have a date when doing listing stuff.

It'd be cool to just drop a link to the start of the thread, and have it pull together the whole thing into a blog post. Something like this:

---
date: 2018-12-25T21:38:09.155Z
type: twitter
link_url: https://twitter.com/izs/status/736435480636465152
title: It's a brand new album, for 1990
---

I don't know if there's an easy way to get the thread from the start, though. Might need to link to the last item instead of the first, and follow the parent links.

may need to just bite the bullet and not use tables? idk.

Could still use display:table css, and then swap to single-col when the viewport gets narrow.

Put all the required metadata in the props, and then the content in the body, maybe?

I'm wondering if it's worth the effort to make date archive pages, like /2018/07 to show all the posts from July 2018.

I almost never actually use them, and I don't blog enough that it's really super useful. And, it means that there's a weird disconnect between previous/next page and previous/next month.

I think I just talked myself out of it. :\

Investigate if there's any way to redirect from one URL to another. This should allow me to 301 all the old tumblr style URLs into a date-based scheme without too much trouble.

Aha! Yes, this seems straightforward with https://www.gatsbyjs.org/packages/gatsby-redirect-from/