Skip to content

Commit

Permalink
Merge pull request #24 from NielsPilgaard/prs-and-images
Browse files Browse the repository at this point in the history 
PR links & Images
  • Loading branch information
@NielsPilgaard
NielsPilgaard authored Mar 11, 2023
2 parents ba87d5e + 41af7a3 commit 4d780b0
Show file tree
Hide file tree
Showing 8 changed files with 142 additions and 124 deletions.
1 change: 0 additions & 1 deletion src/Pilgaard.Blog/Pages/_Layout.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
<meta property="og:image" content="https://pilgaard-blog.azurewebsites.net/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="Pilgaard.Blog.styles.css" rel="stylesheet" />
<link href="css/prism.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<link href="css/blog-post.css" rel="stylesheet" />
Expand Down
26 changes: 12 additions & 14 deletions src/Pilgaard.Blog/Pages/posts/making-a-blog/1-planning.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,17 @@ soon as it's functional - Meaning there's a good chance it's rough on the eyes a

I'll be improving on the blog gradually and making posts about it along the way.


## The plan
<ol>
<li>Pick tools & hosting</li>
<li>Blog website MVP - <em>probably just a page with text</em></li>
<li>Publish website</li>
<li>Add links to GitHub, Twitter, LinkedIn etc</li>
<li>Improve appearance of the website</li>
<li>A system that allows me to make and publish new blog posts directly on the website</li>
<li>A comment section for blog posts</li>
<li>Search Engine Optimizations (SEO)</li>
<li>Allow people to subscribe to get notifications about new posts</li>
<li>???</li>
</ol>

Let's see how far that plan takes us! 😄
1. Pick tools & hosting
2. Blog website MVP - _probably just a page with text_
3. Publish website
4. Add links to GitHub, Twitter, LinkedIn etc
5. Improve appearance of the website
6. A system that allows me to make and publish new blog posts directly on the website
7. A comment section for blog posts
8. Search Engine Optimizations (SEO)
9. Allow people to subscribe to get notifications about new posts
10. ???

Let's see how far that plan takes us! 😄
47 changes: 22 additions & 25 deletions src/Pilgaard.Blog/Pages/posts/making-a-blog/2-hosting.md
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,47 @@
## Blazor Server or WASM

Blazor is a given, but whether to use Blazor Server or Web Assembly was a hard choice.
I started out with Blazor WASM, but got a bit overwhelmed by all the unknowns, and limitations, and switched to Blazor Server.
I work with dotnet 6 worker services, so Blazor Server felt like the more comfortable choice.

## Hosting

I decided on using Azure for hosting - it feels like the natural choice for dotnet, and I've used it a bit in the past.
So I created a pay-as-you-go subscription, and a resource group, hoping that'd be enough to get me started.
A little googling had shown me that I'd need to use both Azure App Service and Azure SignalR Services for a Blazor Server app, and that I should be able to provision it through Visual Studio when publishing inititally.
Here are the docs I used: <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/server?view=aspnetcore-6.0">https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/server?view=aspnetcore-6.0</a>

## Provisioning

<hr />

### Azure SignalR Service

The first thing I had to do was add a Service Dependency to Azure SignalR Service through Visual Studio:
<ul>
<li>Right-clicked on the project and clicked <code>Publish</code></li>
<li>Clicked the <code>Connected Services</code> tab on the left, and then <span style="color:green;font-size:18px">+</span></li>
<li>Found <code>Azure SignalR Service</code> in the list, and completed the steps to provision it</li>
</ul>
I started out saving the generated connection string in Azure KeyVault, but I had trouble launching the app locally after that, and switched to using a local <code>secret.json</code> file.

- Right-clicked on the project and clicked `Publish`
- Clicked the `Connected Services` tab on the left, and then <span style="color:green;font-size:18px">+</span>
- Found `Azure SignalR Service` in the list, and completed the steps to provision it

I started out saving the generated connection string in Azure KeyVault, but I had trouble launching the app locally after that, and switched to using a local `secret.json` file.

### Azure App Service

Next up: Provisioning the App Service that was going to host the Blazor website. I did the following to set that up:
<ul>
<li>Right-clicked on the project and clicked <code>Publish</code> (again)</li>
<li>Selected <code>Azure</code> as target and clicked next</li>
<li>Selected <code>Azure App Service (Linux)</code></li>
<li>Clicked <span style="color:green;font-size:18px">+</span> Create new</li>
<li>
Completed the steps to provision the <code>Azure App Service</code>
<ul>
<li>I configured deployment to be through GitHub actions, so Visual Studio created a workflow yml for me 👌</li>
</ul>
</li>
</ul>

When it was created, I went into <code>Configuration</code> and added <code>Azure__SignalR__ConnectionString</code> as an Application Setting-
I chose Application Setting over Connection string to have it injected as an environment variable. I knew that'd work, and I wasn't sure if adding it as a Connection string would just work out of the box.

- Right-clicked on the project and clicked `Publish` (again)
- Selected `Azure` as target and clicked next
- Selected `Azure App Service (Linux)`
- Clicked <span style="color:green;font-size:18px">+</span> Create new
- Completed the steps to provision the `Azure App Service`
- I configured deployment to be through GitHub actions, so Visual Studio created a workflow yml for me 👌

When it was created, I went into `Configuration` and added `AzureSignalRConnectionString` as an Application Setting. I chose Application Setting over Connection string to have it injected as an environment variable. I knew that'd work, and I wasn't sure if adding it as a Connection string would just work out of the box.

## Summary

I decided on using Blazor Server instead of WASM, and Azure for hosting.
What I ended up with was the following resources in Azure:
<ul>
<li>SignalR Service (Free-tier)</li>
<li>App Service (Free-tier)</li>
</ul>

- SignalR Service (Free-tier)
- App Service (Free-tier)
54 changes: 31 additions & 23 deletions src/Pilgaard.Blog/Pages/posts/making-a-blog/3-building-the-mvp.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Rendering Posts
## Rendering Posts

The first couple of blog posts are simply `.md` files stored in my project.

Expand Down Expand Up @@ -31,15 +31,14 @@ In order to actually display them on the website, I added the code below to `Ind
This does the following:

- Find all `.md` files that should be displayed
- With this approach, files must be copied to the output directory on build
- With this approach, files must be copied to the output directory on build
- Read the files
- Convert their text to HTML
- Render the HTML


## Rendering Markdown with Markdig
I used [Markdig](https://github.com/xoofx/markdig) to convert markdown to HTML, through an extension method:

I used [Markdig](https://github.com/xoofx/markdig) to convert markdown to HTML, through an extension method:

```csharp
public static class StringExtensions
Expand All @@ -58,32 +57,29 @@ public static class StringExtensions
}
```


## Syntax Highlighted Code Blocks

I started out using the Markdig extension <a href="https://github.com/arthurrump/MarkdigExtensions">Markdig.SyntaxHighlighting</a> to add color to code blocks, but I thought the colors were a bit dull, so I switched it out with <a href="https://prismjs.com/">PrismJs</a>.
To get Prism to colorize code blocks, here's what to do:

- Customize and download Prism from <a href="https://prismjs.com/download.html">https://prismjs.com/download.html</a>
- Put the `prism.js` and `prism.css` files in the `wwwroot` folder of the project.
- Add links to the files in the `_Layout.cshtml`:


```html
<head>
...
<link href="css/prism.css" rel="stylesheet" />
...
<link href="css/prism.css" rel="stylesheet" />
</head>

<body>
...
<script src="scripts/prism.js"></script>
...
<script src="scripts/prism.js"></script>
</body>
```


- Add this function to the page that should be highlighted:


```csharp
@inject IJSRuntime JsRuntime

Expand All @@ -96,18 +92,16 @@ To get Prism to colorize code blocks, here's what to do:
}
```


And that's it!

## Page Links misbehaving
I wanted to add a little section at the top with links to each part of this blog series, but I just couldn't get page links like this one to work:

I wanted to add a little section at the top with links to each part of this blog series, but I just couldn't get page links like this one to work:

```html
<a href="#item-id-here"></a>
```


After an intense googling session, I stumpled upon this issue:
<a href="https://github.com/dotnet/aspnetcore/issues/8393">https://github.com/dotnet/aspnetcore/issues/8393</a>

Expand All @@ -116,7 +110,6 @@ Apparently, this type of link just doesn't work in Blazor yet. Huh.
Luckily, there's a workaround that works just fine for my use-case:
Adding `onclick="event.stopPropagation();"`


```html
<a href="#item-id-here" onclick="event.stopPropagation();"></a>
```
Expand All @@ -125,22 +118,37 @@ The caveat is that this will stop any other `onclick` EventHandler from firing f
Credit to <a href="https://github.com/dotnet/aspnetcore/issues/8393#issuecomment-526545768">SQL-MisterMagoo</a> for the workaround :D

## Accidental SEO
While adding Prism to `_Layout.cstml`, I couldn't help myself and added some meta tags while I was in there:

While adding Prism to `_Layout.cstml`, I couldn't help myself and added some meta tags while I was in there:

```html
<meta name="description"
content="Hi! I write about code - Particularly C#, but also the occasional PowerShell and JavaScript." />
<meta
name="description"
content="Hi! I write about code - Particularly C#, but also the occasional PowerShell and JavaScript."
/>
<meta property="og:url" content="https://pilgaard-blog.azurewebsites.net/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Pilgaard | dotnet blog" />
<meta property="og:description"
content="Hi! I write about code - Particularly C#, but also the occasional PowerShell and JavaScript." />
<meta property="og:image"
content="https://pilgaard-blog.azurewebsites.net/favicon.ico" />
<meta
property="og:description"
content="Hi! I write about code - Particularly C#, but also the occasional PowerShell and JavaScript."
/>
<meta
property="og:image"
content="https://pilgaard-blog.azurewebsites.net/favicon.ico"
/>
```

That should make links to the blog render nicely on Twitter, and Facebook.

## Going Live

And with that, the website MVP was ready to go live! At this point, I announced the website and my plans on Twitter: <a href="https://twitter.com/Niels_Pilgaard/status/1579210443687890946">https://twitter.com/Niels_Pilgaard/status/1579210443687890946</a>

### See the code

[Source Code as of this post](https://github.com/NielsPilgaard/Pilgaard.Blog/tree/1.0.0-MVP)

### The state of the blog

![State of the blog](https://user-images.githubusercontent.com/21295394/224504569-38203f3a-9a9d-4200-a3e4-05601e7d458a.png)
19 changes: 11 additions & 8 deletions src/Pilgaard.Blog/Pages/posts/making-a-blog/4-improving-appearances.md
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
## Razor vs Markdown

After experimenting with MudBlazor I made the decision to use <code>.razor</code> files for blog posts instead of markdown.
After experimenting with MudBlazor I made the decision to use `.razor` files for blog posts instead of markdown.
Using markdown is super convenient, but Blazor Components can do so much more.

Plus, by using Blazor Components for blog posts I'll be able to showcase Blazor
features more easily, should I choose to do so in the future.

So I went ahead and converted my <code>.md</code> files to HTML using
So I went ahead and converted my `.md` files to HTML using
<a target="_blank" href="https://markdowntohtml.com/">this online tool</a>.
It looked awful at first, and colored code blocks were a complete mess.

Then I changed all <code>p</code> tags to <code>MudText</code>, leveraging the default styling of MudBlazor.
Then I changed all `p` tags to `MudText`, leveraging the default styling of MudBlazor.

In order to un-break code blocks, I figured out I could use string literals
and then convert them with my old markdown to HTML processor. It had to be string literals, because otherwise
HTML wouldn't be shown correctly "as code":


### Code

````csharp
Expand All @@ -27,7 +26,6 @@ HTML wouldn't be shown correctly "as code":
".ToHtml())
````


### Output

```html
Expand Down Expand Up @@ -55,7 +53,6 @@ Luckily making and changing between light/dark mode is very simple with MudBlazo

It's possible to change mode depending on the system preference of the user:


```csharp
<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode" />
@code {
Expand All @@ -77,7 +74,6 @@ It's possible to change mode depending on the system preference of the user:

As it turns out, making good looking links to Social Media websites is really easy with MudBlazor:


```csharp
<MudIconButton Icon="@Icons.Custom.Brands.LinkedIn" Color="Color.Inherit" Link="https://www.linkedin.com/in/niels-pilgaard/" Title="My LinkedIn Profile" target="_blank" />
<MudIconButton Icon="@Icons.Custom.Brands.Twitter" Color="Color.Inherit" Link="https://twitter.com/Niels_Pilgaard" Title="My Twitter Profile" target="_blank" />
Expand All @@ -89,4 +85,11 @@ As it turns out, making good looking links to Social Media websites is really ea
I've managed to make the website look better, in my opinion.

I think this has been a good first round of UI improvements :D


### See the code

[Pull Request implementing the changes in this post](https://github.com/NielsPilgaard/Pilgaard.Blog/pull/2)
### The state of the blog

![State of the blog](https://user-images.githubusercontent.com/21295394/224504771-ee180e6f-18be-4ff9-b86a-614d117ee937.png)
Loading

0 comments on commit 4d780b0

Please sign in to comment.