Attach to Process

Wyam

What is a react helmet?

  • React helmet is a helper component that allows you to add data to the <head> section of a document or HTML page. It basically allows you to add <link> tags, <scripts> and other tags that goes into the <head> section of an HTML page.

Source: What is react helmet?

So react-helmet library didn't work for me, but this one did.

The equivalent of the npm install command in yarn is yarn without any parameters.

Was trying to help out someone on discuss.write.as get a logo to show up beside their blog title. I learned that you can actually set the size of the background image using something like background-size: 150px;. Cool stuff.

Reference: Resizing background images with background-size

So last time I decided to just not show a header image for my Now Listening to... website on mobile screens. It was because I didn't know how to handle it. Well my easy solution turned out to be getting a smaller sized image to use as a header image. Then I was able to just add a css media screen entry that uses the smaller sized image.

Co-worker was running into Gatsby/Kentico/Grahpql errors with one of our projects. We pretty much had the same .env file and code base. Deleting the folder and downloading again didn't fix it. What worked for him was running the command npm cache clean --force.

Note: This is probably a dangerous command to run. Please research what it does before you try it out. I'm only sharing what worked for me and my team. But this was a last resort type of attempt to fix our errors.

To create a repository from an existing folder or files using Github Desktop, first you have to create the repository on the app itself. This is so that the app can create and initialize the folder on your drive. Then you can copy over the files into the folder that the app created. And then you're set.

To copy the _redirects file (or any other file for that matter) to the Output folder in Wyam, you can use the pipeline code below:

Pipelines.Add(
    // Copy redirect file to the output folder
    CopyFiles("_redirects")
);

Tags: #DevNotes #CSS #Gatsby #Github #NodeJS #ReactJS #Wyam #Yarn

Discuss... or leave a comment below.

Adding a time to read estimate was something I've always wanted to do when I created my blog. I like the idea of giving readers an idea of how much time they would spend/lose if they read my posts. This is so they can make better use of their time. If they have enough time, they can read the post, if not, they can bookmark it or add to their reading list.

A note on customizing a Wyam blog

One of the confusing things for me when I first started using Wyam to create my blog is how to customize it. After running the command wyam new -r Blog, you will end up with an about.md markdown file, an input folder with a first-post.md markdown file in it and that's it. Well there is a config.wyam file but that's not what you use to customize the whole site. There are no .html, .cshtml or .css files that you can modify to customize your site. Turns out to customize the site, you will have to add new files to the input folder and add your modifications to those files. The next time Wyam builds your site, Wyam will pick up those files and process them.

What confused me was the use of the word “theme”. When I read theme, I think about the design of the site, mainly modifying the CSS files to customize how it looks. For Wyam though, theme means everything about how the site looks, which includes the design and layout of the content on the site. So say if you wanted to modify how the footer looks, like add content on it, you would have to create a _Footer.cshtml file in the input folder and add your customizations to that file. The Wyam documentation actually talks about that here and on the Overriding Theme Files section here.

Now that we've got that out of the way. Here are the steps I took for adding a time to read estimate for posts on this blog.

Step 1: Add a _PostHeader.cshtml file to the input folder

I wanted to add the time to read estimate on the top of a blog post, around where the Title and Published date shows up. So the file to modify is the _PostHeader.cshtml file. To do this, I created an empty _PostHeader.cshtml file in the input folder and copied the contents from this file. Note that the file is from the CleanBlog theme, which is the theme I'm using for this blog.

At this point you can do a Wyam build to make sure it works and that nothing is broken. Your site will not look any different because we have not made any modifications, we basically just copied the default code for the _PostHeader.cshtml file. When you don't have this file in your input folder, Wyam will actually build and process this file behind the scenes when building your site. When you have the same file in the input folder, Wyam knows to take that file and its content as the main source for processing the _PostHeader.cshtml file.

Step 2: Add code to calculate “time to read” in the _PostHeader.cshtml file

To calculate the time to read value for a blog post, we can use Razor, which is one of the reasons why I like using Wyam. At the top of the file I added the following lines of code:

char[] delimiters = new char[] {' ', '\r', '\n' };
var numberOfWords = Document.Content.Split(delimiters, StringSplitOptions.RemoveEmptyEntries).Length;
var TimeToRead = Math.Ceiling(numberOfWords / 200f).ToString();

What we're doing here is getting the content of the current blog post, then splitting it into an array to get how many words are in the blog post. I actually got that code from a StackOverflow answer. Then we divide the number of words by 200 to get a conservative time to read estimate value in minutes, which is then converted to a string.

To display the time to read estimate, I modified the line of code that displays the date the post was published and I ended up with this:

<div class="meta">
    @if (Published != default(DateTime))
    {
        <text>@Published.ToLongDateString(Context) &rarr; @TimeToRead min read</text>
    }
</div>

I basically just appended an arrow that points to the time to read estimate, on the same line that shows date the post was published.

At this point, you can do a Wyam build and preview your site. All your blog posts should now have a time to read estimate at the top, just below the title.

To view the whole content of the _PostHeader.cshtml file for this blog, you can check here.

#Wyam #Blog

Discuss... or leave a comment below.

As I sat down to write the post on how I added a basic Tags page to my previously Jekyll Now powered blog/website, I thought about how I'm playing catch up as far as blogging related features go. I had to add an Archive page. I had to add a basic Tags page. The sitemap and feeds feature didn't seem to work and I haven't spent the time to figure those out yet. So before I write even more blog posts and in the interest of saving myself time, I've switched to using Wyam to generate this blog/website.

I should have gone with Wyam from the start, but I found the Jekyll Now repository last minute and thought it seemed too easy not to give it a try. So I gave it a try and yes, it is very easy to get a blog up and running without touching the command line at all. A lot of people have used it and are happy with their blogs. However I think it's time for me to get back to what I really intended to do in the first place, and that is building this static blog/website using Wyam.

Here are some reasons as to why I want to use Wyam for this blog/website:

  • It is a static site generator that is written using .NET Core. Being a .NET software developer myself, using it to generate my blog/website is extremely rewarding in some way. I've also wanted to play with .NET Core for awhile now, so this is just another excuse to try it out.
  • It supports building pages/websites using Razor, which I think is awesome.
  • The configuration file is written using C# code and I love C#.
  • You end up with a fully featured Blog when using the Blog recipe. By that I mean, you have a working Archive and Tags page, as well as automatically generated feeds.
  • It is very easy to switch themes, even on an existing live site.

I must point out that creating/maintaining a blog using Wyam is slightly more challenging than using the Jekyll Now approach. You will have to use a command prompt/terminal to build your site and getting it hosted is not as simple as just creating a repository in Github and changing some settings. I like the extra challenge though. And writing blog posts using text editors and building the site using a terminal, kinda makes me feel like I'm blogging like a hacker, except I'm using .NET Core and Wyam instead of Jekyll.

Tags: #Wyam #Blog

Discuss... or leave a comment below.