Making a new teaching theme with Contentful and Stackbit
05 Jun 2021
Table of Contents
Gotta make a new theme, eh?
And next.js is a thing?
All right, let’s see if I can do this.
CMS
Soooo … I think my old Contentful data model can stay the same, right?
I need an export.json
and its associated images inside my repo so cloud tools can provision Contentful for me.
I need the contentful
CLI tool installed on my local machine, and export.json
+ images on my local machine so that I can provision my own Contentful.
contentful space create --name "My Space Name" --org my_org_id_here
contentful space import --space-id my_space_id_here --content-file contentful-export-abcxyz.json
I’m not sure why, but I’m running into timeout problems trying to import one with images in it.
Yikes – 12:30 - 2:10 so far and still haven’t managed to import my whole old Contentful.
I think … I think Contentful struggles to import images that are no longer in Contentful at all. It requires a url
property under file
for the assets, but it doesn’t seem to be happy with fake ones that don’t exist yet or old real ones that have ceased to exist. //images.ctfassets.net/5a1seslmfse5/2hf317UJY21LgAalyf7kgf/065e3edc1502b68ca0b00afefe02238b/iceland02.jpg
is still on the internet, but //images.ctfassets.net/k47r6b5wqx1r/21Acn7JQltowt2pba1phtR/6a0f79b69bf4b75535071b9c39c4a02d/airplanes.svg
is not, and //images.ctfassets.net/zyxcba/imageassetpugdog/zimageassetpugdog/dog.svg
never was.
Okay, yup, that was the difference – I was able to import one that pointed to //images.ctfassets.net/5a1seslmfse5/2hf317UJY21LgAalyf7kgf/065e3edc1502b68ca0b00afefe02238b/iceland02.jpg
just fine.
Shoot.
Phew! Finally, at 3:00, I have a .json
that will fill a Contentful space. The images are just stock photos, not my images, but it’ll do for now.
3-3:55: Getting things working in Netlify. Still haven’t tested Stackbit. Oh, wish me luck.
3:55-4:20: Got approved to do this by R. Approved for 2 hours. 30min to static-ify the nav, 60min to KometaKitwind-ify the theme, 30min to replace the content with things they’ve already written in starters for professionalism.
Mentioned that I’d “bashed my head against the wall” trying to get the theme working, so … I guess I can bill for that.
5:00 I’ve been updating content for … 10-15 min now? Not sure what I did since 4:25/4:30 when I stopped talking to R.
5:10: I got the 3 blog posts up-to-date in Contentful.
5:23: Not even close to done on Contentful edits. But running out of ideas; putting in some time Kometa-izing, now.
5:38: Blog card & card-gallery are Kometa-ized. Wow, I underestimated this to get permission for it.
6:09: Finally got title on flexipages looking OK
6:42: CTA finally looks ok
7:08: Being called to dinner; hero coming along a bit. Don’t forget to match blog title sizes to flexipage & main-blog title sizes.
8:20ish: Started up again. Wasting time Reactifying my My Huong Kitchen code.
8:43: Oops, forgot how irreponsibly that look was coded. Nevermind.
9:22: Called to dessert. Stopping the clock. Nav not horrible if not great when long. Nothing horrible, really, except nav functionality & a few content issues. I think I can say the CSS is as done as I can personally get it.
10ish-10:49: Okay, now the nav looks reasonable. Stole from Tomas. Links are fixed to do new window for external, too.
11:11: Nav comes from gatsby-config. Now I just have to fix up some content (photos, text), get Stackbit working, get Stackbit nav editing working, and get Stackbit SEO editing working.
11:32: It provisions! Silly Stackbit error. Make the Stackbit nav edit work by just moving all nav to Contentful from Gatsby-config. Fix up content (photos, text). Fix the bug of blog post not being an option in Stackbit new page. Get Stackbit SEO working.
7AMish: Working more on theme
8:52: FINALLY ready to leave it be & write. It needs header & footer flexibility, Stackbit SEO, & a proper head tag, but I can write & screenshot & screencap from this. (shoot – except that Ryland wants a color change)
11:15: As far as I can get on the article for now.
6/7 7ish-8:20: Worked on SB even though I shouldn’t have. Renamed theme, rescreenshotted.