Search code examples
htmlmarkdowneditoranki

Advice for editing multiple HTML/Markdown pages together. Any tools for editing multiple pages as a table?


Background: I'm having to build a bunch of similar pages*, 50 or more. They share a lot of design and content so I will be encapsulating/reusing as much of the styling and content as possible. Still, each page has unique elements and may have arbitrary design elements, so the pages can't just be manufactured programatically from a database or resource file.

What might help: Because there are so many pages to keep track of I would like to edit them in a big table rather than in a long scrolling text file or in separate files. That would make it easy to compare and contrast the code for each page. The table would look something like this:

| Group | Page name | Description | Formatting | Header | Body | Footer |
|-------|-----------|-------------|------------|--------|------|--------|
| 1     | Page1     |text         |code        |code    | code | code   |
| 1     | Page2     |text         |code        |code    | code | code   |
| 2     | Page3     |text         |code        |code    | code | code   |

The first three fields in this example are for my own use or maybe would go into the pages as metadata, while the remaining fields show where the 'real' code would go.

Questions:

  • Am I on the right track with the idea of editing the page code in tabular form? Are there established better ways to set up a whole group of similar pages together?

  • If tabular editing does make sense, what tool should I use?

Tools I've considered:

  • Text/code editors: Ok, no surprise, but I haven't found any code editors that let you display and edit a file as rows and columns defined by, maybe, special tags. Does anything like that exist?

  • Spreadsheets and structured databases: great for basic rows and columns, but terrible for text editing, and display of multiline rows is lousy.

  • A specialized "structured text" database: Maybe one exists, but my searches came up empty. Most 'text databases' are for unstructured/freeform text.

  • "Table editors": wrong idea, correct? They're for generating code for table structures that you then display on pages, or use in database forms or reports.

  • Word processors. For now I'm going with a table in Microsoft Word, treating the HTML as ordinary text. With the page width set to Word's max (22") and the font really small, there's plenty of room for the columns I need. I lose all the help a code editor provides and that's a big loss, but at least I can see what I'm doing. Word has a keyboard command that lets you move one or more rows as a block up and down in a table, so that helps for comparing pages. But another major downside is that I will still have to export the table to a CSV using a Word VBA 'macro,' then write a little script to loop through the CSV to create the actual pages. I haven't coded those conversion routines yet, so if you have any alternatives to suggest, please do.

*The 'pages' for this project are actually Anki card types.


Solution

  • Nested files

    What I've done before is to build each page or page element as a distinct file, then reference that file from another page. This ends up in nested files, but it makes editing pages in a normal text editor much easier.

    ________________________________________________________________________________
    | Header file                                                                   |
    |   Scripts file (or reference)                                                 |
    | Body file                                                                     |
    |   Navigation file    | Content file                                           |
    |                      |   More Content file (reference from Content file)      |
    | Footer file                                                                   |
    ________________________________________________________________________________
    

    This can get nested pretty deep, if you need, but it doesn't have to. And you can get these references pulled from a DB instead of having them hard coded in logic on your site, like normal, but I'm not sure how this would really work with Anki cards.

    Content management sysyem

    If you really need/want to store your pages as code/text in a database, I'd recommend building a content management system (CMS) for yourself. This involves a lot of work up front, but it'll allow you to do all the work you want to do and store it in a DB.

    I've written a couple for myself and my website customers, and it's a long and difficult process most of the time. You have to think of literally everything you want to do. Essentially, you're recreating FrontPage or DreamWeaver and you'll probably do just as bad a job as they did, unfortunately. Maybe worse. At least I did.

    If you don't do anything graphically in this CMS, it'll be easier to develop, but you'll still have to manage your links manually, sort of how StackExchange/StackOverflow works: a text box for code with a line of basic "advanced" features buttons above, with a half HTML and half MarkDown syntax that can easily get confusing or features lost due to not using them very often.

    Website builders

    If you weren't using something as specific as Anki cards already, I'd suggest using something like WordPress or Drupal. That's basically what they do: store pages as rows in a DB. Of course, many of the pages are built using a GUI, but some people build pages programmatically.

    If you're like me, you'd rather stick to hand coding everything. Wordpress has security issues and I'm pretty sure Drupal and all the others do too. The plug-ins people make for them seem to rarely care about security, so a site built with these tools are usually vulnerable, unless you have your site hosted on their servers, which is often also not a preference. Also, you end up managing plug-ins when they update more than actually doing development, or so I hear from people who do this professionally. You might be able to write your pages there, then dive into the DB to copy the results out, but that seems like a less than desirable way to do things, too.

    Conclusion

    So it seems as if building your own solution seems like the best of the lack of options you have. With building the CMS, though, you can have the code instantly rendered, like SE/SO, as well as do side-by-side comparisons in the same window, if you want. And you have the capability of making it as simple or complex as you want, along with adding or removing features when you want.

    Again, this isn't likely to be easy, but it's more likely to be what you want/need than what someone else imagines might be helpful to people in general. And if you make this CMS useful enough, you might even be able to market it to others who use Anki cards. Just a thought, though.