Basic Implementation of Netlify CMS #20

BrunoBernardino · 2022-08-23T14:57:36Z

Not finished and not working, yet. They recommend the "Git Gateway" backend, which requires us to use their Netlify Identity product, but I'd like to avoid that, as it means we'll have to manage users separately.

They offer a github-oauth-api gateway which we can use to get things started, and later switch to a self-hosted proxy, if we prefer, without much hassle.

Also, I only added the config for the news collection, so far.

FYI @MaKleSoft

Not finished and not working, yet. They recommend the "Git Gateway" backend, which requires us to use their Netlify Identity product, but I'd like to avoid that, as it means we'll have to manage users separately. They offer a github-oauth-api gateway which we can use to get things started, and later switch to a self-hosted proxy, if we prefer, without much hassle. Also, I only added the config for the news collection, so far.

netlify · 2022-08-23T14:57:51Z

✅ Deploy Preview for pentacode-site ready!

Name	Link
🔨 Latest commit	`1eee609`
🔍 Latest deploy log	https://app.netlify.com/sites/pentacode-site/deploys/6321e6bafb52fd0008a5d356
😎 Deploy Preview	https://deploy-preview-20--pentacode-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

BrunoBernardino · 2022-08-24T14:35:51Z

@MaKleSoft / @Lorenz147 you can see the "demo" of the admin/cms app at https://deploy-preview-20--pentacode-site.netlify.app/admin

Note that:

It only shows the news section
It doesn't have "nice" previews (it's just basic HTML rendering, without styling)
CAREFUL: Publishing will publish to the main site
You can still try to create a draft and see how that looks, because it automatically creates a new branch and a PR with a preview URL, like Create News “testing” #21 which will be automatically merged when you approve it in the "Workflow" zone, or deleted when you delete the post from there too
It currently shows the UI in English, but I plan to change it to German later, as that's possible

@MaKleSoft this can be merged as is if you want, but since I'm already a bit past the hours for the month and this should be enough of a PoC, I don't plan to work on it anymore until September. To wrap this up, I'd need a couple of weeks, mainly to:

Improve the previews
Add the other sections and "regular" pages
Potentially add widgets or something for easier {% figure %}, etc.

Later, if we're concerned about the security or vendor-lock-in of Netlify, we can implement a separate backend for the GitHub OAuth, instead of using theirs (based off of this, for example). Also, note the Netlify site connected to this repo is owned by me and I can't add you without moving to a paid plan, so if you want to control that, it probably makes more sense to also just do our own GitHub OAuth backend (we'll lose the nice automatic PRs with preview deployments, but we haven't had them before anyway). To have more than one person in the Netlify site it costs $15 / month / user or something like that.

BrunoBernardino · 2022-08-29T13:04:55Z

@MaKleSoft / @Lorenz147 it was my understanding this was urgent, but perhaps I misunderstood it. It's probably best you evaluate what I've got here before September 1st so I don't keep working on it as a waste of time.

MaKleSoft · 2022-08-29T14:10:30Z

@BrunoBernardino It's definitely not urgent. As a matter of fact, @Lorenz147 and I were considering if it wouldn't make more sense to focus on SEO optimisations first, since you seem to have a fairly good understanding of that area (certainly more than Lorenz and I). Is that something you think you could tackle?

BrunoBernardino · 2022-08-30T12:00:20Z

@MaKleSoft it was my understanding from @Lorenz147 the biggest "problem" with the site was that you were a bottleneck in updating it, and they wanted to remove that bottleneck (by making it easier for anyone to update it). If that's changed, then, I suppose SEO would be most important for organic growth, but your business and sales process doesn't strike me as requiring/depending a lot on organic growth. The SEO fixes I've made were already the main things "hurting" Pentacode, but next up would be improvements, which would require a more detailed analysis, like figuring out important keyphrases, etc. I'm just surprised if that's what you want me to focus on next, but you both know the business and its needs better than I do.

So what's the plan for this PR, then?

Simply leave this PR open and Netlify enabled for a later evaluation.
Merge this, let the test last longer.
Close this PR unmerged, disable Netlify.

After that, I can then focus on SEO analysis/improvements, but I need to understand a bit more about your current metrics and at least about your competitors and potentially your own funnel/sales process. Is there any documentation around it? It's fine if it's German.

MaKleSoft · 2022-08-30T12:34:17Z

it was my understanding from @Lorenz147 the biggest "problem" with the site was that you were a bottleneck in updating it, and they wanted to remove that bottleneck (by making it easier for anyone to update it).

It's something we'd like to have solved sooner rather than later, but not really "urgent".

The SEO fixes I've made were already the main things "hurting" Pentacode, but next up would be improvements, which would require a more detailed analysis, like figuring out important keyphrases, etc.

I wasn't thinking about optimising content, but more like removing technical problems that could negatively impact our ranking. If you don't think there is anything left to do in that area, I'm ok with declaring victory on that for now, so I guess you can continue working on this PR :)

FYI, once you've done with this there are a lot of devops things that you can sink your teeth into. But those will require a lot more coordination with myself so I'd prefer if you could continue working on this for now.

BrunoBernardino · 2022-09-01T12:22:49Z

I wasn't thinking about optimising content, but more like removing technical problems that could negatively impact our ranking. If you don't think there is anything left to do in that area, I'm ok with declaring victory on that for now, so I guess you can continue working on this PR :)

I'll do another pass on it and keep going here, but I just want to be sure this PoC works before spending more time on it, because now it's less "unknown" work, and more of just adding the different collections, etc.

FYI, once you've done with this there are a lot of devops things that you can sink your teeth into. But those will require a lot more coordination with myself so I'd prefer if you could continue working on this for now.

If it's about simplifying development, adding tests, automating deployments and so on, I'm pretty sure I can still go about that without a lot of coordination, but you let me know.

MaKleSoft · 2022-09-02T07:36:44Z

@MaKleSoft you didn't answer on the vault change so I'm assuming it can be deferred and will prepare this PR without that. If we want to store/save that, we can add that in later.

I can't see any of the recent articles (the ones about the product updates). Why is that?

BrunoBernardino · 2022-09-02T09:17:30Z

@MaKleSoft hmm, good point. Maybe I need to tweak the config to look for articles that are inside folders, but I'm looking for you to be able to see if the editor and editing process works, really.

Fixes #31

BrunoBernardino · 2022-09-05T14:50:55Z

@MaKleSoft can you check if the news preview is good enough (the images won't all show until they're uploaded via NetlifyCMS -- so they go into the uploads directory)? The product updates should now show as well.

Example URLs now:

If that's OK, I can move forward by adding the other collections (or any subset, if you prefer, since the original issue only mentions hilfe, magazin, and blog).

MaKleSoft · 2022-09-06T05:39:08Z

Looks like nunjucks tags are not being processed

MaKleSoft · 2022-09-06T05:40:47Z

the images won't all show until they're uploaded via NetlifyCMS -- so they go into the uploads directory

Is there a way around that? I'd rather keep the images in the same folder as the article itself.

BrunoBernardino · 2022-09-06T05:48:12Z

Looks like nunjucks tags are not being processed

No, that would require me to build a custom widget so those are processed, which isn't trivial to build. Do you want me to spend time on that? I wasn't planning to as this wasn't "super high priority", but I can.

Is there a way around that? I'd rather keep the images in the same folder as the article itself.

NetlifyCMS doesn't support that with the default markdown widget. Maybe with the custom widget images could be uploaded like that but I'm not sure. Another supported option would be to have multiple "image" widgets (which do support custom paths), and then link the images, but that would limit the number of uploaded images.

BrunoBernardino · 2022-09-06T14:36:50Z

I added a figure custom widget, though it requires the properties caption and extraClass to exist, even if empty, to properly recognize and render (parsing is a regexp, so allowing multiple positions and possibilities is incredibly complex). Example for one rendering and one not rendering can be seen at https://deploy-preview-20--pentacode-site.netlify.app/admin/#/collections/news/entries/update_v1.21/index

Should I pursuit improving the previewer, or focus on adding more collections, or stop?

MaKleSoft · 2022-09-06T14:42:59Z

I added a figure custom widget, though it requires the properties caption and extraClass to exist, even if empty, to properly recognize and render (parsing is a regexp, so allowing multiple positions and possibilities is incredibly complex). Example for one rendering and one not rendering can be seen at https://deploy-preview-20--pentacode-site.netlify.app/admin/#/collections/news/entries/update_v1.21/index

Should I pursuit improving the previewer, or focus on adding more collections, or stop?

Honestly I'm trying to think of a reason why we should nunjuck tags in the first place.

<figure ...>
    <img ... />
</figure>

really isn't any less verbose or readable than

{% figure ... %}
    <img ... />
{% endfigure %}

Same thing goes for all the other existing njk "tags" we're using. So I'm thinking about simply replacing all these "rich" components with html. Would that make it easier to integrate it with Netlify?

BrunoBernardino · 2022-09-06T14:50:47Z

{% figure caption="lala" ... %}
    <img ... />
{% endfigure %}

translates to

<figure>
    <img ... />
    <figcaption>lala</figcaption>
</figure>

which is a bit more verbose, but in my opinion, since you have the automatic deploys when creating drafts, the ideal would be to not spend a lot of time on improving previews further, only to create custom components for frequent/complex/hard-to-write shortcodes (figure, youtube, key), and rely more on the deploy than the preview to check if a page is rendering as expected.

Moving everything to html components would be more future-proof indeed and help with the previews "automatically" (though the image path is still an issue that can't be easily solved).

MaKleSoft · 2022-09-06T14:55:31Z

Moving everything to html components would be more future-proof indeed and help with the previews "automatically" (though the image path is still an issue that can't be easily solved).

How much work do you estimate this would be?

BrunoBernardino · 2022-09-06T18:39:33Z

How much work do you estimate this would be?

It took me a few hours (~6) to convert the previous {{ figure }}{{ /figure }} to {% figure %}{% endfigure %} (and everything excluding {{ key }}, which took me a couple of hours by itself), mostly because it's not a simple conversion (params move around, need commas, etc.). I think perhaps 2-4 hours for transforming {% figure %} into HTML would be enough. 8 hours tops for everything (if you want to no longer have shortcodes, or just want a few that don't exist in more than 2-3 articles).

MaKleSoft · 2022-09-07T05:57:06Z

Ok, let's hold off on the conversion then. We can migrate older articles gradually as we revise them. For future articles, I'd like to start working with html though. Can make the figure widget parse/output html instead of nunjuck tags?

- Fixed figure component to output/render HTML. - Added Magazin collection - Added Magazin preview, tweaked News preview as well - Tweaked author rendering in preview

BrunoBernardino · 2022-09-07T15:32:54Z

@MaKleSoft check it out now. Should I merge this and keep working on adding the other collections and previews, or something else?

What I did today:

- Fixed figure component to output/render HTML.
- Added Magazin collection
- Added Magazin preview, tweaked News preview as well
- Tweaked author rendering in preview

MaKleSoft · 2022-09-08T11:56:28Z

@BrunoBernardino Ok, so I've played a little with the editor and review/publish flow and I really like it! A couple of things:

Summary should be optional
Front matter needs coverAlt
Can we pick a custom slug? Right now the url becomes very long if the title is too long.
When I type in the editor, the cursor keeps jumping to the end of the line, making editing impossible.
List views should be hidden from article list (if possible)
The figure widget should allow (optionally) selecting one or more images (one is enough for now if multiple is too complicated).
I don't quite yet understand how images are handled. Selecting a cover image places the image in the parent folder, but inserting content images (via the image widget) places it under /assets/uploads. It it possible to save content images to the parent folder as well?
When creating a new article, it possible to create a folder with and index.md instead of a single .md file? Like the other existing articles under "Magazin" for example.

BrunoBernardino · 2022-09-08T14:21:50Z

Summary should be optional

Fixed.

Front matter needs coverAlt

Fixed.

Can we pick a custom slug? Right now the url becomes very long if the title is too long.

It's possible, but I'm not sure how it'll interact with some other customizations. I'll give it a shot next week (not working tomorrow, already a bit over time this week).

When I type in the editor, the cursor keeps jumping to the end of the line, making editing impossible.

Is this only on the body, or somewhere else? I'm not having this on LibreWolf/Firefox, but will try Chrome

List views should be hidden from article list (if possible)

I've tried a few things, but I haven't found out how yet, unfortunately.

The figure widget should allow (optionally) selecting one or more images (one is enough for now if multiple is too complicated).

Not sure what you mean, the widget allows HTML, so you should be able to add whatever you want inside?

I don't quite yet understand how images are handled. Selecting a cover image places the image in the parent folder, but inserting content images (via the image widget) places it under /assets/uploads. It it possible to save content images to the parent folder as well?

Fixed.

When creating a new article, it possible to create a folder with and index.md instead of a single .md file? Like the other existing articles under "Magazin" for example.

Fixed.

MaKleSoft · 2022-09-08T14:25:54Z

Not sure what you mean, the widget allows HTML, so you should be able to add whatever you want inside?

You can place html inside, but there is no way to select and upload an image like there is with the image widget.

MaKleSoft · 2022-09-08T14:31:23Z

Is this only on the body, or somewhere else?

Only the body input

MaKleSoft · 2022-09-08T14:49:11Z

It it possible to save content images to the parent folder as well?

Fixed.

When creating a new article, it possible to create a folder with and index.md instead of a single .md file? Like the other existing articles under "Magazin" for example.

Fixed.

These two points were my main gripe with forestry and I'm super happy you managed to solve those! The images inside the body are even visible in the preview! Didn't you say that wasn't possible if the images weren't uploaded to a central upload folder? Now, if you manage to get the cover image to show up in the preview, too, I'll be happy as a clam 😋

MaKleSoft · 2022-09-08T14:57:47Z

A few more items for my wishlist:

For the figure css classes, can we get a similar input as for the categories?
Can you have inline widgets, like for icons and buttons?

MaKleSoft · 2022-09-08T15:03:31Z

One more thing: The "View Preview" link gives me a 404 (looks like there is an extraneous -index at the end of the url).

- Allow picking a custom slug - Fixed cover image showing on draft/preview and published - Added class selector to figure widget

BrunoBernardino · 2022-09-12T14:25:07Z

You can place html inside, but there is no way to select and upload an image like there is with the image widget.

I've tried enabling that before, but I found the interface quite confusing. I'll give it another shot again.

Only the body input

Is this happening only on Chrome with macOS?

The images inside the body are even visible in the preview! Didn't you say that wasn't possible if the images weren't uploaded to a central upload folder?

I thought so, but I persevered!

Now, if you manage to get the cover image to show up in the preview, too, I'll be happy as a clam

Get that happy as a clam face going, because I fixed that too!

For the figure css classes, can we get a similar input as for the categories?

Done.

Can you have inline widgets, like for icons and buttons?

Not sure what you mean by "inline", but I can make ones similar to the figure one.

One more thing: The "View Preview" link gives me a 404

This one is "partially fixed". With automatic slugs it'll add that extraneous index, but for articles with the slug override it should work fine.

MaKleSoft · 2022-09-12T15:19:12Z

Is this happening only on Chrome with macOS?

Looks like it, yeah. I haven't tested it on another OS but it works in Firefox.

Get that happy as a clam face going, because I fixed that too!

🥳

Not sure what you mean by "inline", but I can make ones similar to the figure one.

I mean inline as opposed to a block element. Like it should be displayed inline within the text flow. Does that make sense?

BrunoBernardino · 2022-09-13T12:34:47Z

Looks like it, yeah. I haven't tested it on another OS but it works in Firefox.

It seems like there's some bug in the latest Chrome versions affecting this: decaporg/decap-cms#5092

Not sure what to do, here, though that issue seems related to the text widget inside a custom component, not the body widget.

I mean inline as opposed to a block element. Like it should be displayed inline within the text flow. Does that make sense?

It's not possible, at this moment, I'm afraid: decaporg/decap-cms#5065

BrunoBernardino · 2022-09-13T14:18:24Z

Right now, I'm missing the funktionen section and the other regular pages. I'm happy to just add those later in another PR or not at all, if you want to move on to something else more important.

MaKleSoft · 2022-09-14T09:26:43Z

Right now, I'm missing the funktionen section and the other regular pages. I'm happy to just add those later in another PR or not at all, if you want to move on to something else more important.

Nope, not necessary.

You can place html inside, but there is no way to select and upload an image like there is with the image widget.

I've tried enabling that before, but I found the interface quite confusing. I'll give it another shot again.

Any news on that? Right now the figure widget is not really usable since there is no way to upload an image to put into it.

Unfortunately, I couldn't get the images uploaded inside the figure block to show in the preview, but they should show after saving. Fixes #38 Fixes #11

BrunoBernardino · 2022-09-14T14:38:00Z

Any news on that? Right now the figure widget is not really usable since there is no way to upload an image to put into it.

Just pushed it in a way that works, but previews don't seem to show up until it's saved, unfortunately.

I think this is ready to merge, so I can move on to something else more important?

BrunoBernardino · 2022-09-15T10:56:58Z

It's fine because I'm missing < 10h for the month, but FYI I'm blocked on this, @MaKleSoft / @Lorenz147 .

MaKleSoft · 2022-09-15T11:15:46Z

@BrunoBernardino You can go ahead and merge this. I'll have to put some thought into what might be a good project for you to take on next. Is it ok if I let you know on Monday?

BrunoBernardino self-assigned this Aug 23, 2022

Add proper admin config + values to manage.

59e7313

BrunoBernardino marked this pull request as ready for review August 24, 2022 14:36

BrunoBernardino requested a review from MaKleSoft August 24, 2022 14:36

BrunoBernardino added 2 commits September 5, 2022 13:45

Merge branch 'master' into feature/netlify-cms

3022a4d

Add news preview, include subfolders, tweak local dev speed.

ed01e53

Fixes #31

BrunoBernardino linked an issue Sep 5, 2022 that may be closed by this pull request

CMS für Hilfeartikel und Magazin/Bloposts #11

Closed

BrunoBernardino linked an issue Sep 5, 2022 that may be closed by this pull request

Disable minification during development #31

Closed

Adding figure custom widget

c80c003

Misc improvements

e6952d6

- Fixed figure component to output/render HTML. - Added Magazin collection - Added Magazin preview, tweaked News preview as well - Tweaked author rendering in preview

Add blog collection + preview, and make tweaks to existing config

51651ba

Many requested tweaks.

0602a3b

- Allow picking a custom slug - Fixed cover image showing on draft/preview and published - Added class selector to figure widget

Add Hilfe section and preview.

a8cf1f6

Allow markdown/rich editor on figure block, fix toc highlight.

1eee609

Unfortunately, I couldn't get the images uploaded inside the figure block to show in the preview, but they should show after saving. Fixes #38 Fixes #11

MaKleSoft approved these changes Sep 15, 2022

View reviewed changes

BrunoBernardino merged commit 15efe3f into master Sep 15, 2022

BrunoBernardino deleted the feature/netlify-cms branch September 15, 2022 11:16

Basic Implementation of Netlify CMS #20

Basic Implementation of Netlify CMS #20

Conversation

BrunoBernardino commented Aug 23, 2022

netlify bot commented Aug 23, 2022 • edited Loading

✅ Deploy Preview for pentacode-site ready!

BrunoBernardino commented Aug 24, 2022 • edited Loading

BrunoBernardino commented Aug 29, 2022

MaKleSoft commented Aug 29, 2022

BrunoBernardino commented Aug 30, 2022 • edited Loading

MaKleSoft commented Aug 30, 2022

BrunoBernardino commented Sep 1, 2022

MaKleSoft commented Sep 2, 2022

BrunoBernardino commented Sep 2, 2022

BrunoBernardino commented Sep 5, 2022

MaKleSoft commented Sep 6, 2022

MaKleSoft commented Sep 6, 2022

BrunoBernardino commented Sep 6, 2022 • edited Loading

BrunoBernardino commented Sep 6, 2022

MaKleSoft commented Sep 6, 2022

BrunoBernardino commented Sep 6, 2022 • edited Loading

MaKleSoft commented Sep 6, 2022

BrunoBernardino commented Sep 6, 2022 • edited Loading

MaKleSoft commented Sep 7, 2022

BrunoBernardino commented Sep 7, 2022

MaKleSoft commented Sep 8, 2022

BrunoBernardino commented Sep 8, 2022 • edited Loading

MaKleSoft commented Sep 8, 2022

MaKleSoft commented Sep 8, 2022

MaKleSoft commented Sep 8, 2022 • edited Loading

MaKleSoft commented Sep 8, 2022

MaKleSoft commented Sep 8, 2022

BrunoBernardino commented Sep 12, 2022

MaKleSoft commented Sep 12, 2022

BrunoBernardino commented Sep 13, 2022

BrunoBernardino commented Sep 13, 2022

MaKleSoft commented Sep 14, 2022

BrunoBernardino commented Sep 14, 2022

BrunoBernardino commented Sep 15, 2022

MaKleSoft commented Sep 15, 2022

netlify bot commented Aug 23, 2022 •

edited

Loading

BrunoBernardino commented Aug 24, 2022 •

edited

Loading

BrunoBernardino commented Aug 30, 2022 •

edited

Loading

BrunoBernardino commented Sep 6, 2022 •

edited

Loading

BrunoBernardino commented Sep 6, 2022 •

edited

Loading

BrunoBernardino commented Sep 6, 2022 •

edited

Loading

BrunoBernardino commented Sep 8, 2022 •

edited

Loading

MaKleSoft commented Sep 8, 2022 •

edited

Loading