Web-Based Editor?

feature
81

It may not be suitable comment on this but, i have used prose.io to create a md file. After that travis runs hugo on it and pushes to github pages repo. now i have the basic web editior.

1 Like
82

Nobody seems to have raised the issue of site structure in an editor. I am looking at the possibility of using Hugo for creating and maintaining a largeish documentation site. One of Hugo’s stated principles is preservation of the source folder structure on the basis that it has meaning. For many purposes (documentation among them), sequence also has meaning. I would expect an editor to know about the order in which content appears on the site, show it to me in that order and also ideally allow me to rearrange the order.

I haven’t spent much time on Hugo yet, so I may be wildly off course here, but as far as I can tell, the way you give content an arbitrary sequence is by assigning weight values to individual .md files. I don’t see opening files and changing weight numbers as being a very user-friendly way to shuffle content around - I’d like to be able to drag stuff around or use arrow keys to reorganize. At the very least I would want an editor that allowed me to browse through the content in site order.

Is what I’m looking for completely misguided, or just outside of the scope of this conversation?

83

Really love this conversation. How do we get started on specifications?

Elevator pitch;

A ui wrapper around hugo’s folder structure to; 1. make writing markdown more pleasurable 2. make file management easier, 3. make deploys intuitive

goals

  1. let the user work locally / offline
  2. provide a clean writing environment
  3. add a ui overtop of the git interactions

tech

  • for the foundation of the app use electron.atom.io (used in atom ide)
  • use codemirror.net to manage the content editable area (used in chrome / atom)
  • commit to the concept that hugo only communicates via static files.
    • no api layers
    • if you want all of the categories out of hugo, then hugo should dump a categories.json file somewhere
    • if you want a way to perform full text search then hugo should dump a search-feed.json file somewhere

features

  • writing
    • you only write markdown
    • the markdown is styled inline not rendered (no wysiwyg).
    • minimal formatting toolbar; b, i, h1, h2, h3, a, img, quote, ul, ol
  • preview
    • if we had a preview pane it would just display your static image right?
    • it would be interesting if you could preview the content in different wrappers; iPhone, iPad, etc
  • file management
    • left pane is a simple tree view
      • create, delete files and folders
    • when you save a file, it just overwrites your markdown file
    • simple image management
      1. drag and drop
      2. specify a url and optional caption
  • git integration
    • you could add repos from github, bitbucket, etc
    • commit / pull / push
2 Likes
84

Since we’re able to get Hugo working with a WP interface, then something like this could work right? http://sitecake.com

Also, FYI: I agree that something like this interface that I’m using now with a few extra GUI controls for accessing collections and tackling weight/hierarchy would be perfect as well. @kemifi mentioned it and I think if a taxonomy weight has been added to the configuration then making that a field on the front end would go a long way. The editing interface for discuss(add a comment) reminds me of https://stackedit.io/ or http://classeur.io and it would seem to me that for most setups being able to sync in something like that would do for client interactions.

85

Today I stumbled upon on the Cockpit (http://www.getcockpit.com) CMS, which is built in PHP and uses SQLite (or MongoDB) as database. I’ve found it very neat, as it has custom fields and other cool stuff and appears to be very fast.

But I wondered if I could adapt it as an editor for Hugo. As a matter of fact, it worked better than expected. :slight_smile:

I put together a quick demo video to show my approach and how things worked. I used it’s PHP API to create the .md files for Hugo.

The project’s code is on Github. The requirements for running Cockpit:

  • PHP >= 5.4
  • PDO + SQLite (or MongoDB)
  • GD extension
  • mod_rewrite enabled (on apache)

Instructions

  1. Download the repo contents
  2. Create a new hugo site
  3. Replace mysite folder contents with the contents you just download
  4. Run hugo

Note: I recorded the screens on my ultra wide monitor with a proportion of 21:9. I realised now it wasn’t the best of ideas, specially if you watch it on a small monitor.

1 Like
87

Happy to see this conversation. We’re currently beta testing our Hugo CMS. See 60 sec demo video below.

Message me if you want to try it out :slight_smile: scott@forestry.io

https://www.youtube.com/watch?v=CMhXh3ezZ04

4 Likes
88

That looks pretty sweet. Do you support any other engines/generators at them moment?

89

Not right now, but maybe eventually. What engines do you currently use @dom?

90

When using site generators we mostly use jekyll (heavily tweaked via custom plugins) in production for some clients (we’re a digital agency).

91

@scottgallant Can you speak a little more to the technologies you’re using to develop the CMS? I’m curious because I’ve been thinking a lot about writing an Ember SPA as a CMS layer that could hook into Github’s API, but I’d like to extend Hugo’s functionality to be able to write to JSON files so that they could be digested by the application…

92

@rdwatters We’re running rails right now since it allows us to iterate quickly while we’re beta testing and responding to user feedback.

1 Like
93

Wow @scottgallant!!! That looks amazing! This is exactly what I have been looking for. Would love to learn more.

94

@bzerangue interested in testing out the beta? If so, email me scott@forestry.io

95

Scott, that is amazing. Have been lurking this topic, thought this might be relevant: http://cloudcmd.io/

96

Ok, sorry guys that I have to be that guy. There is an elephant in the room, I will show you.
I just spent the whole afternoon looking for and testing markdown editors - all of them (that I have seen) are not markdown editors. All of them that I have seen implement only the most primitive markdown features and call themselves proudly “Markdown Editors” - but there is no need for an editor that implements only the easy features of markdown, because, well, these are so simple that nobody needs an editor for them.
So when you do some research in this field, then please make it a minimum requirement that the editor supports tables at least - this is a good quality test and also this is the only part of markdown, which “normal users” can not be confronted with (ok, plus references and maybe some other more advanced stuff), but hopefully you get the message.
A good markdown editor should support the more advanced features to be helpful for “markup-syntax-phobic” users.
Thanks for your attention!

1 Like
97

OK, luckily after adjusting my search terms a little I see some light now on the horizon:
http://www.editablegrid.net/en

98

Have you looked at Visual Studio Code? It has live preview, custom css over-ride as well as markdown to html conversion and several other neat features.

2 Likes
99

I think this is the best solution right now. I will try to use contentful with Hugo’s dynamic content feature, as suggested by @isaac.

100

what exactly are you reffering to? WHAT is the best solution? Seems like you answered to the thread, so it is not obvious what you are referencing (the forum software, unfortunately, is a catastrophic example of bad information design, this is why these things happen…)

101

Does VSC still phone home? I generally do not like the extensive data collection policy that MS has established in recent products and I wonder if it is a major danger for our future when so many people just dumbly ignore that privacy invading practices and use stuff without questioning important privacy issues just because it is free.
But if they changed their extensive data collection that was reported with this piece of software, I might take a look at it.
Meanwhile, would you like to send a screenshot of a complex markdown editing session with VSC - with tables, lists and references and how this looks like with that software?

Thank you very much for your attention!