Mandaris Moore


Two puzzle pieces coming together via pexels.com
Two puzzle pieces coming together via pexels.com

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 all1.

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 github2 or twitter3. 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.


  1. I've got three places that I can sit down and make a blog post. My iPhone, my iMac, and my laptop. Currently, my favorite is my laptop but I don't take it everywhere or use it as much. My mind is having trouble just feeling comfortable writing recently. Add the complication of where the files should be saved and how to update previous posts and I start feeling like throwing my hands up. 

  2. Which was just bought by Microsoft a couple month ago. I don't know if it's the new Microsoft which is pro open source. 

  3. A dumpster fire of deplorables. 


Geometry picture by pixabay.
Geometry picture by pixabay.

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 write2 level here.

As with so many other things in life, there was an easier1 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 happy3 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

The html that is generated is hard to read. 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.


  1. Easier being defined as having less dependencies. 

  2. Get it? :P 

  3. Mostly happy. 


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.

A small sample of the code that was being generated.
A small sample of the code that was being generated.

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 system1.

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 array2. 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.


  1. From what I've seen a lot of webcrawlers use the headers of a page to determine whether a site was worth putting in search results. 

  2. This isn't the only place that has this, but I've been having trouble just getting the projects that I am using up to date. Heck, my readme is one line at this point! 


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.


Example of markdown syntax meant to test new themes.
Example of markdown syntax meant to test new themes.

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