Mandaris Moore

I've decided that I wanted to focus on my Swift development this year. I've got a new domain and server ready to roll.

All in all, I've done everything related in this pursuit except for actually programming in it.

Not to mention, I'm still working on my projects in python.

I spent some time going down a rabbit hole this evening. I've been putting the time in so that I can learn how to program with SwiftUI when I came up with the idea of putting things on my site so that I could show the world my progress.

When I thought about that, I was reminded that I wanted to spruce up the css on the site so that it would look nice.

So, I took some time to load up the static version of my site so that I can see what changes would look like when I update it without regenerating the whole thing with a build of pelican.

I notice that I didn't have an example of several blocks of text (like what you see now).

Sooo...

I spent 5 minutes getting a copy of lorem ipsum because I always think "This is going to be the last time that I'm going to need that. I spent 5 more minutes adding emphasis, bold, links and code to it when I realized that I should have something a little more familiar.

That's when I looked up alternatives to "The quick brown fox".

I created a new paragraph using it and then placed that in both my test information and my static site.

Whew...

Ultimately, I spent more time just setting up this demo information for the site then posting about my iOS development.

The more that I dive into the quest of having my own spot on the internet, the more that I find that I have things that I want to do with it. Which means more research, experiments and late nights.

Currently, I'm on a mission to get webmentions and pingback working on my site. It's been pretty slow going because I want to incorporate it into my current blogging workflow. A workflow that is currently not flowing at all¹.

Anyway, I thought I'd focus on making some changes so that I can make it fit better with all the new stuff that is coming out for the indieweb.

Setting up sign in

The first thing to do is make some changes to my template to allow for sign up according to the web directions

I thought the easiest ways of doing this was to use github² or twitter³. I pushed the github login near the top of the page so that it would look for it first.

{% if GITHUB_USERNAME %}
<!-- IndieWeb sign-in -->
<link rel="me" href="https://github.com/{{ GITHUB_USERNAME}}" />
{% endif %}

I then included the twitter login information with the rest of the twitter information.

{% if TWITTER_USERNAME %}
<!-- Twitter Specific Info -->
<meta name="twitter:site" content="@{{ TWITTER_USERNAME }}" />
<meta name="twitter:creator" content="@{{ TWITTER_USERNAME }}" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="me" href="https://twitter.com/{{ TWITTER_USERNAME}}" />
{% endif %}

Setting up webmentions

After the login was set up, I added this to enable webmentions that are specific to any website that uses the template.

{% if WEBMENTIONS %}
<!-- Enabling webmention functionality -->
<link rel="pingback" href="https://webmention.io/{{ WEBMENTIONS }}/xmlrpc" />
<link rel="webmention" href="https://webmention.io/{{ WEBMENTIONS }}/webmention" />
{% endif %}

Unfortunately, I still need to test it and get it in front of other people to use. I'm going to lay the foundation down and do some research so that I can get ping backs to work properly.

More meta data

From my reading of indieweb.org, I see that it doesn't use the OpenGraph and Schema.org that I put in the theme.

I'm hesitant to add these new tags because it lowers the validation scores, but I hope that it will help with accessibility and just make the site work better for those who want to find it.

Conclusion

I've got a lot of things on my mind and places where I can make the site move forward. I hope that those who read this feel inspired and have some input on how to make the template better.

If so, the theme can be found here.

Previously, I had written about how I found a solution to my compulsion to make sure that the headers on my blog were on the write² level here.

As with so many other things in life, there was an easier¹ solution that was built into python-markdown.

When I had first explored this issue, I had looked at the HeaderID it was marked as being deprecated and to be used for adding anchors for headings. I didn't read the whole thing because it didn't seem it would fit my needs. I continued on and found my current solution.

But, the thought that there could be a better way kept on nagging me even though I was happy³ with how my site turned out.

As I was in the process of updating my Pelican Test Content, I went back to the python-markdown extensions page to make sure that I had covered most of the use cases. I noticed that it had a Table of Contents.

All about that base

The first thing that I found was that the extension allows me to set the base for headers fairly easily by setting a property in my pelicanconfig.py.

# Markdown options
MARKDOWN = {
    'extension_configs': {
        'markdown.extensions.codehilite': {'css_class': 'highlight'},
        'markdown.extensions.extra': {},
        'markdown.extensions.meta': {},
        'markdown.extensions.toc': {'baselevel': '3', 'title': 'Table of Contents'},
    },
    'output_format': 'html5',
}

This eliminates the need for the additional plugin and as an added bonus allows me to have a table of contents for those really long posts that I never write.

Table of Pain

There are only a couple mild things that I don't really enjoy about this new solution.

Div-ided we stand on syntax

• I'd love if this wasn't in a div and used either a nav or aside tag for accessibility and my own personal comfort.
• Also, the number of li and ul tags can be hard to read if you want to read the raw html.
• Titles for table of contents is in a span tag. I find that kind of ironic.

Seriously, just nitpicky at this point.

Making it look nice

This part is just me going back to trying to figure out how to make it look nice in the browser. I imagine that it won't take long, but there are going to be a couple of ugly iterations.

In my last post, I left off with a list of things that I wanted to work on for the next release of the design of the blog. I'm still changing the header at the top of the page and I've been working on improving the contrast of the colors you see for links to make it easier to read. Something you can't spot just by looking is the fact that <h1> - <h3> tags don't correspond to the breakdown of the syntax of the rest of the site.

What do I see on the internet

I feel that a lot of the sites that are on the internet only use the <h1>, <h2>, <h3> tags and looking at some of the templates that I've come across for pelican use css classes to differentiate them in the design.

I don't have a problem with that, but I felt that it doesn't help those that might be using some kind of screen reader or parsing system¹.

Searching for a solution

Once again, I started looking for a place where this had already been fixed and quickly found one that would make sure that the html that python-markdown would give me would match what I was expecting to give to my template.

Christian Prieto had already come up with this handy solution in 2016 and had put some tests and an example of how to incorporate it into pelican.

But there are further complications

Unfortunately, pelican has changed since the original and I wasn't able to get the solution to work. The readme says to add the following:

MD_EXTENSIONS = ['downheader']

But the latest documentation found here, have the markdown default to be defined as a dictionary and not an array². The simplest way to get it to work is to change your pelicanconfig.py to have the following code.

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

For me, I had to specify a value because the title of my site is in a <h1> tag and the article headers are in <h2>.

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

I've since made a pull request so that others can get around this as well.

Conclusion

I'm happier and happier with the way that the site is coming together, but I'm afraid of the amount of technical debt that the site is accruing as I go along. I've to to make the readme a priority for those who come after me and want to make this design better.

I've also taken some time to just take the header and just make a standalone project that demonstrates how it works. I points to the simple theme that comes with pelican so people can just download it after installing pelican, python-markdown and the mdx_downheader package.

I wanted to spend sometime looking at some resources that I came across that I'm going to use to make my site work better with the micro.blog format.

Implementing microblogging in pelican

Link

This one was pretty interesting in that it was the first link in my search and let me know that it was indeed possible. Unfortunately, the site has moved from pelican to hugo and I couldn't find the theme in the users github repository (unless he's renamed it).

Microblogging with pelican

Link This link seems a little more promising as the writer is still actively using pelican to generate her site. Not only that but she has a couple example iOS workflows that give me ideas on how to quickly generate posts for the site.

Currently, I don't have any bandwidth to do any of these options in the next couple of days, but I hope that by writing about them here someone else can use them to make their site better.

When I'm trying to come up with a new theme for my blog, I like to think about the different scenerios of what I can put together. I admit that a lot of what I design is rarely shown in my daily writing, but I like the possibilities of expressing myself in this way and part of me hopes that someone else will see my theme and use it or make it better.

In light of this, I don't like using my own content sometimes because I don't always have something recent to test with a theme with.

That's why I took some time and created a repo just for this purpose. I present:

Pelican Test Content!

It's a couple of articles and pages that I use to simulate a website in pelican. It looks like most of the theme designers create their own set of test data but I'm hoping that this can be the seed or at least add on to whatever else is available.

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

So, I spent about 3 hours working on getting Open Graph tags to work in the theme that I created. I've got mixed feeling about it because I started off by adding the tags to the base html template using an if statement and it seemed a little clunky.

{% if OPEN_GRAPH %}
<meta property="og:title" content="{{ SITENAME }}"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="{{ SITE_DESCRIPTION }}"/>
<meta property="og:url" content="{% SITE_URL %}"/>
{% endif OPEN_GRAPH %}

This worked for the site in general but doesn't translate to all the articles and this caused me to go into a some what deep dive into how Pelican and Jinja parses blocks and if statements. I started off with putting all the tags into the base and then doing individual changes to tags that need to be changed for.

BAH!!!

So, took a step back and looked into what plugins were already available. And there is was! Pelican-open_graph! I was home free! Or so I thought, until I tried to use it. The plugin has three problems.

It doesn't account for when someone does not have a modified date on their articles.

Luckily, someone had put a solution up. The change was forked about 7 months ago today and it looks like whoever created the open graph plugin has taken a break to work on other things.

It's a year old and hasn't made the changes for pelican regarding summaries of articles.

So, I had to do some debugging to find out that the code needed to be changed in the following way¹.

ogtags.append(('og:description', instance.metadata.get('og_description',
                                                           instance.metadata.get('summary',
                                                                                 instance.summary))))

It also assumed that every article has some kind of tag.

I've decided to just punt this problem and add the tags to the 6 articles that don't have them, but than I took a second look at the problem because the perfectionist in me doesn't like to leave problems unsolved and I didn't want to track down what the particular articles were.

So, I just wrapped the code in a try block to make sure that I got this particular exception.

try:
        for tag in instance.tags:
            ogtags.append(('article:tag', tag.name))
    except AttributeError:
            ogtags.append(('article:tag', 'untagged'))

Results

Ultimately, I got to learn a little bit more about using pelican and knocked off a major milestone on getting this blog to where I'd like it to be.