Making Progress

development
Friday, August 30th 2019, 2:52:35 am

Awake this morning at approximately 3:30 with some sort of drama happening in the neighborhood - right next door, in fact. Multiple police cruisers with their lights shining directly into the window is not a common occurence around here, so it was unsettling enough that getting back to sleep was not going to be an option. So, time to take advantage of some of that peace and quiet!

On the blog front, made two good breakthroughs this morning. First of all, I'm finding creating React components an addictive task, as I find my brain looking at some of the original markup (specifically on the blog listing page) and wanting to convert it to components. So, we went from this:

   return (
​        <Layout fullMenu>
​            <article id="main">
​                <header>
​                <h2>Blogs</h2>
​                    <h4>Random digital scribblings</h4>
​                </header>
​                <section className="wrapper style5">
                    <div className="inner">
​                    <h4>{data.allFile.totalCount} Posts</h4>
​                        {data.allFile.edges.map(({ node }) => (
                            <div key={node.childMarkdownRemark.id}>
​                              <Link 
​                              to={node.childMarkdownRemark.fields.slug}>
​                                <h3>{node.childMarkdownRemark.frontmatter.title}{" "}</h3>
​                              </Link>
​                                <h5>{node.childMarkdownRemark.frontmatter.category}</h5>
                                <div class="date">{node.childMarkdownRemark.frontmatter.date}</div>
​                            </div>
​                        ))}
​                    </div>
​                </section>
​            </article>
​        </Layout>
​    )

... to something more like this in the same page:

export default ({data}) => {
  const props = {
      title: "Blog Posts",
      subtext: "Random Digital Scribblings",
      data: data,
      posts: data.allFile.edges
  };
    return (
        <Layout fullMenu>
          <Listing props={ props } />
        </Layout>
    )
}

Using a Layout component that I had previously built, then new components for the Listing and ListItem, while passing those props down into the components themselves.

Next, I finally installed gatsby-remark-images and can now do stuff like this:

6472017 orig

Then, I also got oembeds working, which is awesome:

Finally, while all of this is going on, I'm working on a regression test for a particularly insidious/weird caching bug with JSON:API, Views and Entity Reference Fields. I have the test written and passing with the patch, so now I just need to make sure it's actually failing against the unpatched code.

Meanwhile, the world awaits Hurricane Dorian to make landfall, which means that I will likely be spending quite a bit of time working over this holiday weekend. Perhaps in some of this on-call time I can finish up more of the bigger chunks of the todo list. I think maybe I'll be ready to go ahead and take this live very soon.

developmentblogmetagatsbyjsdrupalweatherhurricanedorian