scripting / oldSchoolBlog

Blogging in the ways of the old school.
MIT License
12 stars 1 forks source link

Review HTML generated by oldSchool #6

Open scripting opened 4 years ago

scripting commented 4 years ago

Here's a list of HTML elements that oldSchool generates. I created the list by starting at the top of oldschool.js and searched for the string class=.

They are in the order that they appear in the source.

I copied the HTML bit and added it to the list, without all the attributes that may be part of the element (for example, the src attribute on an img element).

The list

<span class="spOldSchoolEmoji">
<img class="imgInline">
<span class="spLink">
<span class="spRenderedMarkdown">
<img class="imgRightMargin">
<a class="anchorRightMargin">
<span class="spTitleLink">
<span class="spPermaLink">
<div class="divInlineImage">
<ul class="ulLevelX">
<a class="aSocialMediaLink">
<div class="divSocialMediaLinks">
<div class="divPagetopImage">
<div class="divPagetopTextBackground">
<div class="divPagetopText">
<div class="divPagetopTitle">
<div class="divPagetopDescription">
<div class="divStoryPageTitle">
<div class="divStoryPagePostTime">
<div class="divTitledItem">
<div class="divDayTitle">
<div class="divSingularItem">
<div class="divTitledItem">
<div class="divTitle">
<div class="divArchivePageDay">
<div class="divInlineImage">
<div class="divStoryPageTitle">
<div class="divStoryPagePostTime">
<div class="divTitledItem">

How to proceed

Now that we have the list, we should discuss what should be generated for each of these.

I'd rather not make this configurable because I'd like, if possible for all our oldSchool sites to generate the same HTML

andrewshell commented 4 years ago

I'm not sure it's as simple as matching these one-to-one.

Here is a sample I put together. I extracted the content from one of your recent posts on scripting.com, included that at the top, then reformatted it at the bottom.

http://html.shll.me/includesInLittleOutliner.html

I did notice that you have a bug in class="divStoryPageTitle" where you have two </a> tags when one should be an </span> tag.

<a href="..."><span class="spTitleLink">Includes in Little Outliner</a></a>
andrewshell commented 4 years ago

One thing that might need some workshopping is how you do ulCodeSubs. In this example it's not a big deal because it's only one line, but traditionally multiline code blocks are <pre><code>...</code></pre> but that requires that there is no left padding and it would mess up the spPermaLink for each line.

Since <code></code> is an inline tag, I'm thinking we can have each line of code have it's own set of tags (spPermaLink would be outside of the code) but I'm not sure if there would be any repercussions from that.

scripting commented 4 years ago

First, I fixed the bug with the spTitleLink span being terminated by an &lt/a>. I like fixing bugs. ;-)

Next, how do you want to proceed. I have to do a series of changes to the code, so somehow it has to be serialized. I posted the HTML snips as a way to get the process started.

Pick one construct and explain what you want to change it to and why. I'll ready, try to grok, and respond.

How does that sound?