Mark Oliver's World

Posted: 26/03/2021

How I Built This Blog Part 3

Yesterday I watched a great talk by Stacy Cashmore. In that talk she described a very similar process to mine to build her own branded Blog.

So I thought I would use her new Blazor based blog as an inspiration to some improvements to mine:

  • Add Favicons
  • Show my Twitter feed.
  • Add a picture of me.

So lets get on with it:

Favicons

I was going to write a post about adding favicons, but Dave Brock has already done such a good job, so Ill just drop a link here.

First I needed a picture to create a FavIcon.
I don't have anything I want to use, so I started to look at making a caricature of my standard profile pic. There are LOADS of websites that will do it for you, but I didn't like any of the options I tried.
I did like this one, but does not fit my needs:
Iron man me!
I did consider about commissioning one for me, but decided against it for now.

So my next thought was "Word Art" yes I am that old!
So a quick google, led me to Wordart.com
The effects there are cool, and I ended up making this:
My favicon in the shape of a floppy disk

Now I have the image I want to use, its time to visit Real Fav Icon Generator and generate my icons.

Then simply follow the instructions, copy the provided HTML to index.html in the head tag, and copy all the supplied files to the wwwroot folder.

That's it we are done!

EDIT - I think I need to get a less busy image, its not obvious what it is, but for now it will stay. Any thoughts are appreciated.

Show my Twitter Feed

I want to have my Twitter feed showing on the blog somehow.
Now this is normally quite simple, Twitter do the hard work for you. Go to there Publish page and they give you full instructions, and a small amount of code to add.

So I have added 2 options, the embedded one goes on the home page, and the "Tweet Me" option goes in the footer of my posts.

So I need to add this to the bottom of the body tag in index.html 

            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Then in Index.razor I need to add this for the embedded timeline:

            <a class="twitter-timeline" href="https://twitter.com/MicbOliver?ref_src=twsrc%5Etfw">Tweets by @@MicbOliver</a>

And then in the bottom of my BlogPage.razor to add the Tweet to me button:

            <p>If you want to reach out, catch me on Twitter  <a href="https://twitter.com/intent/tweet?screen_name=MicbOliver&ref_src=twsrc%5Etfw" class="twitter-mention-button" data-show-count="false">Tweet to @@MicbOliver</a></p>

Well annoyingly this does not work. It is a Blazor WASM problem. I don't believe the Javascript widgets.js is being invoked!

So I found this Stackoverflow answer that suggests I just need to invoke the twttr.widgets.load() method via javascript. This also matches what Twitter say

So lets do that, by adding this to MainLayout.razor 

            @code {     [Inject]     public IJSRuntime JSRuntime { get; set; }      protected override async Task OnAfterRenderAsync(bool firstRender)     {         if (firstRender)         {             await JSRuntime.InvokeVoidAsync("twttr.widgets.load");         }     } }

You can also tweak the views somewhat with these extended options

but this then generates these errors on load of any other page than the homepage:

            blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]       Unhandled exception rendering component: Cannot read property 'removeChild' of null <snip>       blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]       Unhandled exception rendering component: No element is currently associated with component 23       Error: No element is currently associated with component 23           at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:31703) <snip>        at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object](String identifier, Int32 arg0, RenderBatch arg1)    at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync(RenderBatch& batch)    at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

This tells me that Blazor and Twitter are not getting on!

So is this just to do with the Embedded code, lets remove it and see what happens.
Well we no longer see the error, but the "Tweet button" on the blog posts only displays on a refresh of the page, and generates no errors. Hmmm, this says we are not firing the Javascript for Twitter at the right time.

There is definitely a timing issue here, it does not always render the twitter stuff on a page load, but sometimes it does.

So it looks like I need to get the Twitter loading in the actual component on the page, and NOT in the MainLayout.razor file. I guess this is happening too early.
This is strange, according to the Blazor lifecycle docs, this is the last event to fire.

Ok, so we have 2 issues:

  • The Embedded timeline option generates an error in Blazor.
  • The "Tweet me" button does not always show up on every page render.

This is a new post of its self, so I'll carry on in Getting Twitter to work.

Add a picture of me

I like what Stacy has done with her blog, showing a picture of herself on the left. This suits me too (as it is "my" brand). But for now, I'm going to just add it in the About Me section.
Im going to use the Caricature and my standard profile pic in there as they show some humour which is always good.

These are just going to be standard images, with "alt" text for accessibility.

Thanks for reading this post.

If you want to reach out, catch me on Twitter!

I am always open to mentoring people, so get in touch.