Mandaris Moore

I think I'm ready to mark my second pelican theme 1.0 as "Feature Complete" today! I started off with -what I thought- a simple premise of having a site site took a lot longer than I expected but I'm pretty happy with the site for now. But before I tag it and start working on 2.0, I want to go over what I've done so far.

Parsable

The first thing I started researching was how to make the site parsable by webcrawlers. Although it's a personal blog, I wanted people to be able to find the content easily.

OpenGraph

OpenGraph was the first thing that I came across and appealed to me the most because it's the preferred way of parsing data for Twitter¹.

I found it especially rewarding that the tags are also parsed by facebook and my new favorite social network slack.

One of the technical difficulties that I ran into when adding OpenGraph tags was adding the images. The specification for OpenGraph states that images to be used need to be added as meta data in the head of the html. This can be a pain as the other data like title and date can be pulled from the article itself and I didn't want to go through all my old posts to add image meta data.

Luckily, the github user WhiskyEchoBravo had a project that searched the content of the post for images and added the first to the list of tags. I'm a little proud that I helped with issues with pages.

Afterwards, I did run into some frustration when the images that I added to posts wouldn't be as big as I expected.

Ultimately, I think it's because of the mixing and matching of having OpenGraph and twitter specific tags and was solved it by making sure I used the following for my twitter card.

<meta name="twitter:card" content="summary_large_image" />

And now I get the post to unfurl nicely.

Schema.org

This is the styling used by both Bing and Google. I put this in as a challenge to myself to make it work in both instances. I leaned a lot from the example on OrbitingWeb and refined what I was working with using another example that I found on github.

Valid Semantic Tags

For this, I just wanted to use some of those really cool semantic tags that html5 has given to us. When I look at the code for some pages on the internet I see a lot of <div> tags with classes that could be replaced with <main>, <nav>, or <section> tags.

I'm willing to just attribute it to my desire to have my own style or maybe just inexperience, but I'm happy to report that the site passes html validation except for the OpenGraph definitions found in the header.

figure it out

One technical hurdle I ran into was that I wanted my images to be wrapped in the <figure> tag and also have a <figcaption> tag that would have the alternative text.

I searched for a plugin for pelican², but the closest thing I could find was liquid tags at the time³.

I did find jdittrich figureAltCaption project on github which was a extension for the python-markdown that pelican uses. I even submitted a pull request to allow it to do reference links!

There was a little confusion on getting it to work because pelican has been changing since some of these plugins were created.

Long story short, I had to add the following to my pelicanconfig.py to get it to work.

   # Markdown Plugins
MARKDOWN = {
    'extension_configs': {
        'markdown.extensions.codehilite': {'css_class': 'highlight'},
        'markdown.extensions.extra': {},
        'markdown.extensions.meta': {},
        'figureAltCaption':{},
    },
    'output_format': 'html5',
}

Easy to share

I wrote down that I wanted the site to be easy to share and it is when you look at the amount of tags and metadata that is in every page.

At one point, I wanted to add share buttons, but -with the rise in concerns about privacy- I wanted the users of the site to be the ones who would share it.

Also, I'm still working on color schemes so the buttons might clash with whatever I end up with.

Accessible

One of the underlining principles of this site design is that I wanted it to be accessible to as many people as possible. It's part of the reason that I've worked so hard on making sure that I included so many semantic tags. I didn't think that this was particularly hard to do when you understand what needs to happen before you begin.

The theme doesn't have any errors at this point, but does loose some points because of the way that markdown headers are handled and the fact that I picked a low contrast color for my links. I'll fix it soon.

Conclusion and where I'm going next

Overall, I'm happy with this version of the site and blogging about it has helped me think about what places I want to refine going forward.

List of things to improve

• Create a decent readme with all the packages and properties that the theme uses
• Improve color contrast for reading
• Add Cristian Prieto's mdx_downheader
• Make the top navigation a little less clunky
• Look into how to integrate micro.blog posts

If you want to contribute you can find the theme on github here.

I'm going to be changing the pelican posts that I have that use the PlantUML plugin to be in the draft status.

I really enjoy having a way to put my words into a diagram, but I honestly haven't had a need to and having my computer pause for a second as it starts up java to render the diagrams everytime has gotten a little annoying.

Going forward, I'll use an application to create the diagrams and then just add them to my images directory.

So, I think that I've finished the foundation for my website.

I'm fairly proud of the structure of it and the amount of meta data that I've placed into it.

Here is a poem.

Type,type, type
I am typing
- A child

One thing that has been bothering me for a while is the fact that most of the websites that I was going to and the system that I was using to generate my blog were wrapping stand alone images into <p> tags.

For example:

![Alt message](url/to/image)

would turn into:

<p><img alt="Alt message" src="url/to/image" /></p>

To me, this doesn't make sense that you would have an image in an unnessary container.

Sure, it wouldn't been seen by most people, but don't think it parses to well for screen readers and is probably a hastle for webdesigners who have to account for this with generated content.

What's the solution?

Well, pelican does offer a wide array of plugins, but I've already worked with plugins before and I didn't want whatever solution that I came accross to be specific to pelican.

Luckily, I didn't have to come up with something all by myself because @jdittrich created an extension that you can add to python-markdown.

This make the markdown:

![Alt message](url/to/image)

into the following:

<figure><img alt="Alt message" src="url/to/image"><figcaption>Alt message</figcaption>
</figure>

Adding the extension to pelican

The instructions on adding markdown extensions was a little difficult for me to follow during my first read. Which actually turned into a learning experience as I had to read over the code.

Ultimately, I had to add the following to pelicanconfig.py to get it working.

# Markdown Plugins
MARKDOWN = {
    'extension_configs': {
        'markdown.extensions.codehilite': {'css_class': 'highlight'},
        'markdown.extensions.extra': {},
        'markdown.extensions.meta': {},
        'figureAltCaption':{},
    },
    'output_format': 'html5',
}

One last thing

When I was experimenting with this extension, I noticed that it didn't allow for the information found in references to be placed in the <figcaption> tag.

I made a little change and am waiting for my pull request to be merged.

I'm just writing this to make it place the file in the write spot.

I hope that this works properly.