Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

Jekyll vs. Wordpress diary

07 May 2020
💬 EN

Table of Contents

How an album looks in Wordpress


SELECT *
FROM wp_posts
WHERE Id=12345
Id post_date post_content post_title post_name post_type
12345 2014-02-01 12:00:00 We made the <b>best<\/b> album ever. Fall Far From The Tree fall-far-from-the-tree album

SELECT *
FROM `wp_postmeta`
WHERE post_id = 12345
meta_id post_id meta_key meta_value
7149 12345 _thumbnail_id 184
9284 12345 alb_release_date 2014-01-15
9285 12345 _alb_release_date field_91a6ff1ea07f5
9284 12345 alb_tracklist 2
9285 12345 _alb_tracklist field_blahblahblah
14082 12345 alb_tracklist_0_track_title Old Block
14083 12345 _alb_tracklist_0_track_title field_62f8cc2ff8155
14084 12345 alb_tracklist_0_track_store https://flyinglemons.bandcamp.com/track/old-block/
14085 12345 _alb_tracklist_0_track_store field_62f8cc2ff8156
14086 12345 alb_tracklist_0_track_buy_label Buy Track
14087 12345 _alb_tracklist_0_track_buy_label field_62f8cc2ff8158
14088 12345 alb_tracklist_0_track_mp3 712
14090 12345 _alb_tracklist_0_track_mp3 field_62f8cc2ff8157
14091 12345 alb_tracklist_1_track_title Chip
14092 12345 _alb_tracklist_1_track_title field_62f8cc2ff8155
14093 12345 alb_tracklist_1_track_store https://flyinglemons.bandcamp.com/track/chip/
14094 12345 _alb_tracklist_1_track_store field_62f8cc2ff8156
14095 12345 alb_tracklist_1_track_buy_label Buy Track
14096 12345 _alb_tracklist_1_track_buy_label field_62f8cc2ff8158
14097 12345 alb_tracklist_1_track_mp3 713
14098 12345 _alb_tracklist_1_track_mp3 field_62f8cc2ff8157

And more … such as:

  • hide_album (0)
  • alb_link_external (null)
  • alb_review_ (null)
  • alb_review_author (null)
  • alb_store_list (1)
  • alb_store_list_0_store_link (https://flyinglemons.bandcamp.com/album/fall-far-from-the-tree/)
  • alb_store_list_0_store_name (Bandcamp)

And their underscore-prefixed equivalents that refer to field IDs.


Custom field management

The theme, in its includes folder, has files like post-types.php and custom-fields.php and subfolders like acf-addons and advanced-custom-fields making me think that the theme flat-out includes ACF within it.

That makes sense – things like “field groups” and associating repeatable custom fields with posts of the same “custom type” seem to depend upon plugins like this one.

Because https://www.google.com/search?client=firefox-b-1-d&q=%22custom+fields%22+%22custom+post+types%22 gives me:

  • https://blog.teamtreehouse.com/adding-custom-fields-to-a-custom-post-type-the-right-way
  • https://www.mugo.ca/Blog/Adding-complex-fields-to-WordPress-custom-post-types

Although I haven’t really looked into this result from the same search yet:

  • https://wordpress.stackexchange.com/questions/308470/custom-post-types-how-to-include-custom-fields

I wonder if a plugin can include another plugin.

https://wordpress.org/support/topic/including-another-plugin-library-in-a-plugin-that-i-am-writing/ says:

catacaustic, 2 years ago:
================
https://developer.wordpress.org/plugins/wordpress-org/plugin-developer-faq/#are-there-plugins-you-dont-accept
From the page…
"Similarly we do not accept framework plugins or library plugins. If your plugin has to require other plugins or themes to edit themselves in order to use your plugin, it’s a library. If your plugin is a template from which more code can be built by customizing the files directly, it’s a framework or boilerplate. Frameworks and libraries should be packaged with each plugin (hopefully in a way that doesn’t conflict with other plugins using the framework or libraries). At least until core supports plugin dependencies."
So no. If your plugin relies on another plugin to function, it’s considered a library and is not allowed.
However this doesn’t stop you publishing it yourself, just on on this site.
tugbucket, 2 years ago:
@shariqkhan2012
What I’m getting at is I would never physically include someone else plugin in a plugin I wrote. I wouldn’t want to be responsible for anything I couldn’t control. Make it “required” from with in your plugin and have the user install the other plugin on their own.
As for the woocommerce example, that’s interesting. I just activated <insert random WC add-on> available from WP and it indeed told me I had to activate WC before I could use it. I’m curious to see a response from WP as well.

Looks like I can, if I just want something I can home-install.


Why stick with Wordpress, considering how tough plugin development looks like it’s going to be?

  • Because I want my author to have a real CMS with real drag-and-drop WYSIWYG.
    • That’s why I can’t go with Jekyll.
  • And yet, the author’s content will need to include structured data I want to be able to predictably work into the WYSIWYG UI and predictably render as HTML to visitors with semantic-web-SEO quality that I think is essential.
    • That’s why I can’t go with Bandzoogle.
    • (Okay, actually, I totally can … I’m mostly being pig-headed and letting the perfect be the enemy of the good.)

Gutenberg play-around

SELECT post_content
FROM wp_posts
WHERE id = 98765

So far, I’ve just got a cell value of:

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Wouldn't it be nice if we were older</p><cite>Beach Boys</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:media-text {"mediaId":8,"mediaLink":"http://localhost/mysite01/?attachment_id=8","mediaType":"image","imageFill":false} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="http://localhost/mysite01/wp-content/uploads/2020/04/screenshot-1024x576.png" alt="" class="wp-image-8"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
<p class="has-large-font-size">The best ladies.  Not sure the best alignment.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Oh well.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:paragraph -->
<p>I guess this is just plain text.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Interesting.</p>
<!-- /wp:paragraph -->

<!-- wp:audio {"id":12} -->
<figure class="wp-block-audio"><audio controls src="http://localhost/mysite01/wp-content/uploads/2020/04/Clumsy.mp3"></audio><figcaption>If I weren't so klutzy...</figcaption></figure>
<!-- /wp:audio -->

<!-- wp:audio {"id":11} -->
<figure class="wp-block-audio"><audio controls src="http://localhost/mysite01/wp-content/uploads/2020/04/IfYouBringTheDinner.mp3"></audio><figcaption>Bring some dinner, please.</figcaption></figure>
<!-- /wp:audio -->

Plugin development

https://pressupinc.com/blog/2013/07/minimum-viable-wordpress-plugin/

Take a look at https://developer.wordpress.org/plugins/ – it’s the official reference manual.

The “Hello Dolly” theme, PHP-wise, is just hello.php.

There’s a readme.txt and its repo has some versioning and such.

But the “worker bee” is just hello.php.

Point is, don’t touch Wordpress Core. :)


Theme development

https://www.quora.com/What-PHP-files-are-the-bare-minimum-required-for-a-WordPress-template

The bare minimum you would need to create a WordPress theme would be two files:

    index.php
    style.css

We usually use more because we may want a different template file for posts than for pages as well as unique templates for the site home page, archives, 404 error pages, search results pages, etc.

I usually also create additional templates specific to the site. These could include custom queries or any number of features.

Allegedly comments.php and screenshot.png may also be required.

https://developer.wordpress.org/themes/release/required-theme-files/


To fetch tree data out of Prismic, first GET against https://MYSITE.cdn.prismic.io/api/v2 and grab [‘refs’][0][‘ref’], then GET https://MYSITE.cdn.prismic.io/api/v2/documents/search?ref=THE_REF_YOU_GOT. No password needed by default.

I, for example, obtained:

{
    "page": 1,
    "results_per_page": 20,
    "results_size": 3,
    "total_results_size": 3,
    "total_pages": 1,
    "next_page": null,
    "prev_page": null,
    "results": [
        {
            "id": "Xt-nSRIAACMAWqhr",
            "uid": null,
            "type": "homepage",
            "href": "https://test01prismic.cdn.prismic.io/api/v2/documents/search?ref=Xt-ndxIAACMAWqk7&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22Xt-nSRIAACMAWqhr%22%29+%5D%5D",
            "tags": [],
            "first_publication_date": "2020-06-09T15:15:03+0000",
            "last_publication_date": "2020-06-09T15:15:03+0000",
            "slugs": [
                "articles-i-like"
            ],
            "linked_documents": [],
            "lang": "en-us",
            "alternate_languages": [],
            "data": {
                "date_time_yay": "2020-06-19T05:01:00+0000",
                "some_checkbox": true,
                "body": [
                    {
                        "slice_type": "list_of_articles",
                        "slice_label": null,
                        "items": [
                            {
                                "articles_to_link": {
                                    "id": "Xt-kUBIAACMAWp5r",
                                    "type": "event",
                                    "tags": [],
                                    "slug": "2020-06-07",
                                    "lang": "en-us",
                                    "link_type": "Document",
                                    "isBroken": false
                                }
                            },
                            {
                                "articles_to_link": {
                                    "id": "Xs6FixIAACEAXrDO",
                                    "type": "venue",
                                    "tags": [],
                                    "slug": "famous-daves",
                                    "lang": "en-us",
                                    "link_type": "Document",
                                    "isBroken": false
                                }
                            }
                        ],
                        "primary": {
                            "title_of_section": [
                                {
                                    "type": "heading2",
                                    "text": "Articles I Like",
                                    "spans": []
                                }
                            ]
                        }
                    }
                ]
            }
        },
        {
            "id": "Xs6FixIAACEAXrDO",
            "uid": null,
            "type": "venue",
            "href": "https://test01prismic.cdn.prismic.io/api/v2/documents/search?ref=Xt-ndxIAACMAWqk7&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22Xs6FixIAACEAXrDO%22%29+%5D%5D",
            "tags": [],
            "first_publication_date": "2020-06-09T15:05:16+0000",
            "last_publication_date": "2020-06-09T15:05:16+0000",
            "slugs": [
                "famous-daves",
                "untitled-document"
            ],
            "linked_documents": [],
            "lang": "en-us",
            "alternate_languages": [],
            "data": {
                "venue_name": "Famous Dave's",
                "venue_web_site": {
                    "link_type": "Web",
                    "url": "https://famousdaves.com",
                    "target": "_blank"
                }
            }
        },
        {
            "id": "Xt-kUBIAACMAWp5r",
            "uid": null,
            "type": "event",
            "href": "https://test01prismic.cdn.prismic.io/api/v2/documents/search?ref=Xt-ndxIAACMAWqk7&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22Xt-kUBIAACMAWp5r%22%29+%5D%5D",
            "tags": [],
            "first_publication_date": "2020-06-09T15:05:16+0000",
            "last_publication_date": "2020-06-09T15:05:16+0000",
            "slugs": [
                "2020-06-07"
            ],
            "linked_documents": [],
            "lang": "en-us",
            "alternate_languages": [],
            "data": {
                "event_start_date": "2020-06-07",
                "event_info_link": {
                    "link_type": "Web",
                    "url": "https://20200607fd.example.com",
                    "target": "_blank"
                },
                "venue": {
                    "id": "Xs6FixIAACEAXrDO",
                    "type": "venue",
                    "tags": [],
                    "slug": "famous-daves",
                    "lang": "en-us",
                    "link_type": "Document",
                    "isBroken": false
                }
            }
        }
    ],
    "version": "8991d98",
    "license": "All Rights Reserved"
}

Presumably, I know what order to render components of the homepage because I can inspect [‘results’][(filter array for object where [‘type’] = “homepage”)][‘data’][‘body’][(each item in this array should be ordered I guess)].

It looks like the “slice zone” can be thought of as where the real meat of the web page goes, whereas the stuff up top can be thought of like Jekyll front matter.

It’s kind of weird to think of the very graphic UI of the “slice zone” in the CMS as having nothing to do with how I render it on the page, but okay.


I haven’t yet played with homepage rendering in TakeShape, but its event/venue interface was nice, and less overbearing for someone like R than Prismic’s was.

To get data back out of it, do a POST to https://api.takeshape.io/project/MYSITE/graphql with Content-Type application/json and Authorization Bearer MYKEY headers, and a body like this:

curl --location --request POST 'https://api.takeshape.io/project/b431c2ef-6b32-4317-81cc-d63e2deb0acb/graphql' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer e63a359011194376b527be2ac295f741' \
{"query":"query jobs($where: TSWhereEventInput!) {\r\n  getEventList(where: $where) {\r\n    items {\r\n      eventName\r\n      startDateAndTime\r\n      venue {\r\n        venueName\r\n        venueUrl\r\n        venueLocation\r\n      }\r\n    }\r\n  }\r\n}","variables":{"where":{"eventName":{"match":"2020 06 09 Performance"}}}}

As far as I can tell, that works out to this body:

{
	"query" : "query jobs($where: TSWhereEventInput!) {
		getEventList(where: $where) {
			items {
				eventName
				startDateAndTime
				venue {
					venueName
					venueUrl
					venueLocation
				}
			}
		}
	}",
	"variables": {
		"where": {
			"eventName": {
				"match": "2020 06 09 Performance"
			}
		}
	}
}

Which is easier to set up in Postman if you use the GraphQL body formatter, which lets you do “Query” & “GraphQL Variables” panes and enter the following:

query jobs($where: TSWhereEventInput!) {
  getEventList(where: $where) {
    items {
      eventName
      startDateAndTime
      venue {
        venueName
        venueUrl
        venueLocation
      }
    }
  }
}

and

{
  "where": {
    "eventName": {
      "match": "2020 06 09 Performance"
    }
  }
}

The result is this:

{
    "data": {
        "getEventList": {
            "items": [
                {
                    "eventName": "2020 06 09 Performance",
                    "startDateAndTime": "2020-06-08T03:33:00.000Z",
                    "venue": {
                        "venueName": "Famous Dave's",
                        "venueUrl": "https://famousdaves.com",
                        "venueLocation": "Minneapolis, MN"
                    }
                }
            ]
        }
    }
}

You could, of course, filter on something else to get all of them. I just haven’t bothered to figure out enough GraphQL yet.

Moving onto playing with making a “single” “homePage” type.

Ooof.

All right, so … once I get my mind around it, Prismic seems a little nicer for Robert to edit something like a home page with.

I like the way I can basically give him “Gutenberg blocks” when defining content types and he can add as many or few of them to the body as he sees fit.

I don’t like how in TakeShape, I have to let him go over and edit the “content type” for the Home Page.

I’d like him not to be touching Content Types. Just editing pieces of content.


Kentico Kontent seems to want to charge me “business plan”-level prices to use the “management API” and import content. Probably a non-starter.

A GET to https://deliver.kontent.ai/MYSITE/items after entering 1 event & venue returns the following:

{
  "items": [
    {
      "system": {
        "id": "f0755237-a61a-4b98-9a98-cdf004228f7c",
        "name": "Famous Dave's",
        "codename": "famous_dave_s",
        "language": "default",
        "type": "venue",
        "sitemap_locations": [],
        "last_modified": "2020-06-09T16:30:50.5145847Z"
      },
      "elements": {
        "venue_name": {
          "type": "text",
          "name": "Venue Name",
          "value": "Famous Dave's"
        },
        "venue_url": {
          "type": "text",
          "name": "Venue URL",
          "value": "https://famousdaves.com"
        }
      }
    },
    {
      "system": {
        "id": "17792aa9-7049-4993-b6e9-15be7d1077b8",
        "name": "2020 06 07 Event",
        "codename": "n2020_06_07_event",
        "language": "default",
        "type": "event",
        "sitemap_locations": [],
        "last_modified": "2020-06-09T16:32:36.0119489Z"
      },
      "elements": {
        "event_name": {
          "type": "text",
          "name": "Event Name",
          "value": "2020 06 07 Event"
        },
        "event_start_date": {
          "type": "date_time",
          "name": "Event Start Date",
          "value": "2020-06-07T00:00:00Z"
        },
        "venue": {
          "type": "modular_content",
          "name": "Venue",
          "value": [
            "famous_dave_s"
          ]
        }
      }
    }
  ],
  "modular_content": {
    "famous_dave_s": {
      "system": {
        "id": "f0755237-a61a-4b98-9a98-cdf004228f7c",
        "name": "Famous Dave's",
        "codename": "famous_dave_s",
        "language": "default",
        "type": "venue",
        "sitemap_locations": [],
        "last_modified": "2020-06-09T16:30:50.5145847Z"
      },
      "elements": {
        "venue_name": {
          "type": "text",
          "name": "Venue Name",
          "value": "Famous Dave's"
        },
        "venue_url": {
          "type": "text",
          "name": "Venue URL",
          "value": "https://famousdaves.com"
        }
      }
    }
  },
  "pagination": {
    "skip": 0,
    "limit": 0,
    "count": 2,
    "next_page": ""
  }
}

Moving onto home page.

Okay, so like home page in TakeShape, I don’t like that my author would have to mess with content types to play with the home page.


Stackbit: can’t get the darned editor to load after moving away from it.

https://app.stackbit.com/dashboard

The real site lives, for a while, at https://festive-wallaby-fbb98.netlify.app/ and has a pretty decent Google page speed. About the same as Katie Kodes. Paints content quickly on mobile and desktop.

https://github.com/stackbittest/festive-wallaby

https://preview--festive-wallaby-fbb98.stackbit.dev/

Okay, so index.md looks like this:

---
title: Home
sections:
  - section_id: hero
    type: section_hero
    image: images/hero.png
    title: This Is A Big Hero Headline
    content: >-
      Azimuth is the perfect theme for developers, designers and entrepreneurs
      who need a sleek, modern SaaS site. 
    actions:
      - label: Learn More
        url: /features
  - section_id: features
    type: section_features
    background: gray
    title: Features
    subtitle: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a metus
      quis lorem malesuada luctus.
    features:
      - title: The Best Feature of Your Services
        image: images/feature1.png
        content: >-
          Nam pulvinar ante eu ultricies volutpat. Aenean hendrerit, eros sed
          aliquet luctus, lorem risus volutpat dolor, nec dignissim diam neque
          consequat ex.
        actions:
          - label: Learn More
            url: /features
      - title: Awesome Feature of Your Services
        image: images/feature2.png
        content: >-
          Etiam vel urna sed massa egestas vulputate eu a velit. Sed ut nisl nec
          sapien interdum luctus. Cras rhoncus condimentum metus sit amet
          auctor.
        actions:
          - label: Learn More
            url: /features
      - title: Cool Feature of Your Services
        image: images/feature3.png
        content: >-
          In ante enim, lobortis quis congue vel, finibus sit amet mi. Aenean
          quis venenatis sem. Proin eget massa id metus eleifend maximus sit
          amet nec urna.
        actions:
          - label: Learn More
            url: /features
  - section_id: reviews
    type: section_reviews
    background: white
    title: Testimonials
    subtitle: >-
      Aliquam malesuada ligula eget est fringilla blandit. Integer finibus
      semper libero id sodales. 
    reviews:
      - author: John Doe
        avatar: images/review1.jpg
        content: >-
          Vestibulum a nunc ut eros condimentum posuere. Nullam dapibus quis
          nunc non interdum. Pellentesque tortor ligula, gravida ac commodo eu.
      - author: Jane Roe
        avatar: images/review2.jpg
        content: >-
          Sed laoreet magna commodo libero euismod sodales. Nunc ac libero
          convallis, interdum ligula vel, pretium diam. Integer commodo sem at
          dui sollicitudin, vel posuere justo laoreet.
      - author: Richard Roe
        avatar: images/review3.jpg
        content: >-
          Integer consectetur purus neque, ac porttitor enim convallis vitae.
          Interdum et malesuada fames ac ante ipsum primis in faucibus.
  - section_id: call-to-action
    type: section_cta
    title: This Is Call To Action Block!
    subtitle: This is an optional description for the call to action block.
    actions:
      - label: Get Started
        url: /signup
  - section_id: recent-posts
    type: section_posts
    background: gray
    title: Latest Posts
template: landing
---

No, Stackbit’s editor does not give a way to re-organize it. There’s a drag-and-drop icon at the left of certain components within repeaters, but it doesn’t work. And there’s no way to drag-and-drop whole sections into different orders. Oh wait – yes, there is. Same broken drag-and-drop. You just can’t drag “sections” above “title.” Though that kind of makes sense.

I’m not crazy about the editing UI, either.

It’s a little orange tree-shaped panel where, if you expand things far enough, you sometimes get an editable field.

It takes quite a while to see an edit to one of these boxes show up.

But mostly, if you’re an author, it’s not intuitive how to find the thing you want to edit (and it’s too easy to mess up something else that’s also displayed in the editor tree – e.g. for some reason 3 blog posts also show up in the editor below the theme, which is tricky enough, and I think you can edit them directly from there).

I don’t know why a project comes with an “API key” since the contents are just Markdown files on GitHub.

Ah – okay, nevermind, the drag-and-drop works just fine in Chrome. It was a Firefox thing.

Replacing the hero image wasn’t so bad, either, but it seems you have to have it pre-sized, lest it stretch the whole hero section comically tall (the picture self-width-caps in the Azimuth template).

I hope it’s just the Azimuth template using the “subtitle” as the section-dragger name. That’s a bit of why it is sorta hard to find things?

The Azimuth theme comes with homepage-addable sections called

  • Content Section
  • Call to Action Section
  • Hero Section
  • FAQ Section
  • Features Section
  • etc.

The footer is not a “section” – it’s part of theme config in Azimuth.

Anyway, other than total lack of visual guidance in how to use them or what they’ll look like, like Bandzoogle offers, they’re sorta-kinda like Bandzoogle elements.

And the page loads faster than Bandzoogle and you have total control over your HTML/CSS/JavaScript to optimize for that and for structure.

Okay, yes, if you rename a blog snippet through the Home Page editor and “publish” the home page, https://festive-wallaby-fbb98.netlify.app/posts/working-from-home/’s title changes too. Double-edged sword.

Interesting that the blog post shows up in the homepage editor from just this YAML in index.md:

  - section_id: recent-posts
    type: section_posts
    background: gray
    title: Latest Posts

Okay, so moving onto the editor for one of those blog posts:

IT SUCKS.

It’s just a 5-line tiny box with a crapton of markdown-formatted blog text in it.

I’d be comfortable with that, but he wouldn’t.

Okay – now that I look into https://github.com/stackbittest/festive-wallaby/tree/master/src/templates/ for landing.js vs. post.js and at https://github.com/stackbittest/festive-wallaby/tree/master/src/components/, I think I’d just have to make a “blog post” a more flexible template than the Azimuth theme did.

This is a crapton of architecture & best practice to learn, just like Jekyll was. But I guess I could do it?

Sigh.

OR I COULD JUST DATA-LOAD BANDZOOGLE AND BE DONE WITH IT.

Seriously, though, I do like that if a designer and a front-end dev knew what to expect out of being stackbit.yaml-friendly, it’d be easy to hire a designer & dev just like R was ready to hire one for WP development.

Then again, does WP’s plugin ecosystem like Kraken make it easier to maintain fast page-loads?

OR I COULD JUST DATA-LOAD BANDZOOGLE AND BE DONE WITH IT?

I chose a Gatsby project. Never used Gatsby before. How much of this markdown-to-HTML conversion is native Gatsby (how portable is what I see in GH)? vs. How much of what I see in my GitHub is Stackbit-specific that you transform before piping it to Gatsby for final work? I ask because theme development would be a big lift for me (not a front-end dev), but if it’s 100% “you’re just seeing a standard Gatsby site in your GH – we’re just visualizing those standards,” that should be easy to hire out for. :) Brian Rinaldi, @remotesynth: The only Stackbit-specific piece is the stackbit.yaml file that essentially maps your CMS to the content on the theme. This enables the pull that we employ to pull the content for the CMS and map out the editable fields in the editor. The rest is just a plain old Gatsby project. Aha! Okay, so stackbit.yaml : @stackbithq :: config.yaml : @NetlifyCMS. :) Brian Rinaldi, @remotesynth: For Netlify CMS, yes, the config.yaml in the /admin directory maps the content. If you generated a Netlify CMS site, it doesn’t support our Stackbit editing tooling yet, so it’s a standard Netlify CMS site and even stackbit.yaml isn’t entirely necessary since content is in GitHub

Azimuth’s “/blog/” page is the kind of thing I’d want for “/events/” or “/past-events/” or “/discography/”, so that’s good to see. Looking at it in Sanity Studio, it’s pretty much just front matter, I believe.

Yup – https://github.com/stackbittest/festive-wallaby/blob/master/src/pages/blog/index.md would agree.

Looking through the data in a Sanity-studio-backed environment, I see that there’re actually 4 .md files that’re of the “landing” content type: Home (which I explored deeply), Contact, Features, and Pricing. (As opposed to About Us, Sign Up, and Style Guide which are of a simpler page content type with just a markdown chunk, not draggable sections.)

Also, in that environment using Sanity as a CMS, there’s no “/pages/” under “/src” in my GitHub. (I wonder how things make it from Sanity to Netlify upon publish?)

Okay, looking into “Home” in Sanity Studio, it’s not pretty for my author like in Stackbit, but it is “pretty” from my perverted “clean front matter editor” aesthetics. I definitely feel like this could help me make sure things are architected nicely for Gatsby or Stackbit or whatever.

The drag-and-drop box in Sanity Studio under “Sections” subtitled “Page Sections” is interesting.

And when I click on such a section, such as “This is a big hero headline,” I get …

Okay, so basically I’m looking at the same kind of “tree” as I do in Stackbit. In some ways, I think it’s easier to understand.

It’d be cool if one could “flip” from Sanity to Stackbit as easily as one “flips” between WordPress editor styles.

https://manage.sanity.io/projects/heng67kf/usage

https://manage.sanity.io/projects/heng67kf/settings/api

https://futuristic-tulip-fd21d.sanity.studio/


Misc CMS notes

dayhaysoosToday at 10:47 AM So I been using forestry as my go-to for CMS/blog stuff I want to give a non-dev person the ability to blog on a site, I’m wondering what options there are as far as really easy to use stuff I’d prob be fine with Forestry, just want some opinions :eye:dayhaysoosToday at 10:47 AM So I been using forestry as my go-to for CMS/blog stuff I want to give a non-dev person the ability to blog on a site, I’m wondering what options there are as far as really easy to use stuff I’d prob be fine with Forestry, just want some opinions :eye:

KatieKodesToday at 1:01 PM Okay, so my notes say that I found Prismic’s UI “overbearing” for a non-technical user. It’s got this weird invisible-form-field UI that’s kind of a YOLO for guessing where to click in what looks like a Word document. TakeShape is pretty, although be careful with non-required fields on objects you point other objects to: they don’t show up in the quick-create. So if a “venue” has an optional location, you can’t fill it in when quick-creating from an event. Also seems it doesn’t look amazing on small screens.

TakeShape was out of the running for me because I need thousands of content entries (20 years’ worth of past events). KatieKodesToday at 1:15 PM Kentico Kontent, like TakeShape, has a largely desktop-enabled UI that seems pretty intuitive. Its “create new venue from within an event” UI works slick … except that it forgets to make it obvious how to get back to the event you were creating when done. You have to teach your users to follow the breadcrumb back at the top. It was out of the running for me because the free plan is limited to 500 objects and because it seems you can’t easily import historical data into the system without paying. I suppose you could upgrade-import-downgrade, but I kept looking.

KatieKodesToday at 1:23 PM DatoCMS is lovely, but 200-record limit in free, so out. Also, I couldn’t figure out do a “block” (an object-ey collection of fields/things) within a “block”, so that was a little disappointing for the prospect of building up flexible page arrangers for a Squarespace-like experience. “Venue” record quick-add from within an “Event” record pointing to it had a nice UI. chrisbiscardiToday at 1:23 PM on a side note, this research would make a great blog post @KatieKodes KatieKodesToday at 1:24 PM Funny thing is, I “grep”‘ed my computer and found it in blog drafts But it was side notes in a draft of me exploring Wordpress’s architecture Event in DatoCMS; “new venue” & “from library” look good

Desktop-oriented, not small-screen oriented. DatoCMS as close as I could get to a FlexiPage

Stackbit shows promise because it’s free (maybe not forever?) and basically frames an editor around your page if you’re using Gatsby, kind of like the basic version of TinaCMS, but they can’t yet do that w/ custom themes. Really young. TinaCMS barrier to getting started was really high for me as a non-front-end developer, and I didn’t like the way I had to put stuff for it into my Gatsby code, so I postponed looking at it to another day. Also, it seemed to make my page speed go down even in prod, so I’d have to learn ways to make sure none of its logic loaded into prod. (The flag for whether to render the CMS on top of the page doesn’t completely take away its JavaScript when off.) That said, it’s probably about as Squarespace-like as you could ask for, and it’s written by the Forestry folks and is free and open-source. Sanity is “perfectly respectable enough” as a UI (if a little boring), lets me nest objects to my heart’s content and makes editing deeply-nested objects and rearranging arrays of objects look really intuitive in the UI, even on mobile, which makes it possible to build flexipage-type content. (I just showed it off w/ real-time live preview of the web site reacting to my changes in a Gatsby Cloud Preview to someone on a pair of smartphones this morning.), The thing that really puts it in the running of all the API-based solutions is that it allows 10,000 records on the free plan. That oughtta be enough for me. 365 * 20 is still < 8,000 records and there aren’t gigs all 365 days a year. I might go with it. Actually, rich-text editing on mobile is kinda mediocre. But everything else about the basic UI is mind-blowingly usable on mobile. And who really needs to edit everything on the go? That said, it has a downside: it has no UI whatsoever for editing the schema point-and-click rather than with code. There’s no way to give a content author a backup admin password and let them figure schema changes out if anything happens to you. I can’t remember what made me give up on Forestry & Netlify CMS 3 months ago. I think I didn’t yet well enough understand using Markdown-less all-YAML “.md” files (or putting any Markdown you have IN the YAML) as an architecture. I should look at them again now that I understand that concept. Their UI’s might work after all. I have a vague recollection that Forestry has a schema builder in-UI but Netlify CMS doesn’t, so again, there’s possibly a question of “bus factor.” Okay, DONE!

--- ---