Updating fracturedcode.net With Some UI Improvements and Image Captions

I've been posting on this site, but it has some issues. There's lots of CSS problems and other minor things that should be fixed. I also found a way to implement image captions in markdown.

I had a Keepass project I was going to post this week, but ran into some issues. I ended up doing this in a night instead. Look forward to that Keepass article in a couple weeks.

Homepage Fixes

I started by correcting the problems with the homepage.

Sorting Posts

One of my first tasks was to correct the order posts showed up.

I decided to order them chronologically. I simply had to add some .OrderBy in the database query:

List<Post> postEntities = await _dbContext.Post
    .Where(p => p.IsPublished && p.PublishedDate <= DateTime.Now && !p.Topic.IsDeleted)
    .Include(p => p.Topic)
    .OrderByDescending(p => p.PublishedDate)
    .ThenBy(p => p.Name)
    .ToListAsync()
    .ConfigureAwait(false);

Fix Time Zone

I also didn't like that all the posts were displaying publish times in UTC, so I chose to convert them in the .cshtml:

@{
    string timezone = null;
    if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
        timezone = "US Mountain Standard Time";
    else if (RuntimeInformation.IsOSPlatform(OSPlatform.Linux))
        timezone = "America/Phoenix";

    DateTime publishedTime = TimeZoneInfo.ConvertTime(post.PublishedDate, TimeZoneInfo.FindSystemTimeZoneById(timezone));
}
<time>@publishedTime.ToString("g", CultureInfo.CreateSpecificCulture("en-US"))</time>

When I originally deployed this, I didn't have the platform specific code to set the timezone variable. This led to much confusion about what I had messed up in the docker build or run command until I looked at the container logs and saw the exception throwing.

Logo Adjustments

Finally, I made some logo sizing adjustments. I thought the logo/trademark combo was too small after you scroll down the page. So, I increased the size slightly.

Next, I made the logo clickable, so that it redirects to the homepage, fracturedcode.net.

And finally, I added an arrow underneath the full size logo so that it is more obvious you are supposed to scroll down to complete the animation.

I still have some logo adjustments to make. I think that the trademark sits a little too low compared to the logo.

I should also make a custom rounded arrow instead of relying on the unicode character. Its jagged edges don't fit with the rounded style of the trademark.

Additionally, the arrow should be clickable and complete the animation. I think this is intuitive. If a user sees this page, they will either think to click the arrow or scroll down.

Finally, I think the animation could happen a little sooner in the scroll, and the animation has a small size adjustment after it completes on any page that isn't the homepage.

About Page

The about page that the byline links to was dead, not anymore:

I'll adjust this once I get my self-hosted email working. Check back weekly on Sunday for that project!

Fix Post Display Issues

There were major problems with post display that made it virtually useless:

• The color of <code> contents did not contrast with its background -_-
• The title of the post would display twice at the top of the page in different sizes :/
• Images that were larger than the page just went offscreen

Double Title

I had been setting a variable to be consumed by the _Layout.cshtml with

@(ViewData["Title"]=Model.Title)

It should have been

@{ViewData["Title"]=Model.Title}

The @() syntax tells razor to display the contents. @{} is meant for code blocks.

I also took the opportunity to increase the post title size from <h3> to <h1>.

Code Blocks are Impossible to Read

I didn't want it to just be the normal font color, but I didn't have anything between the normal gray color for fonts on the site and the next darkest. So maybe not the most readable, but satisfactory. I have plans to rework the <code> section with some features in the future, so I'll use that opportunity to mess with the colors then.

Image Sizing

Images just displayed at their native resolution, instead of scaling when needed. I decided I wanted to keep images at their native resolution, left justified, unless they were larger than the rest of the post contents. This is a simple css fix:

img {
    padding-bottom: 0rem;
    margin-bottom: 0rem;
    max-width: 100%;
}

Not only were images escaping the bounds of the webpage, but their captions sat it <p> tags, making it difficult to distinguish between post content and image captions.

I discovered the HTML tag <figcaption> which is short for "figure caption". It's perfect for delineating captions below pictures, and I can give it a unique look with css:

figcaption {
    font-size: $size-font-small;
    color: $color-font-secondary;
    padding-top: 0rem;
    margin-top: 0rem;
    padding-bottom: 1rem;
}

The downside to this approach is that I have to use put the HTML tags in my markdown before export, but it is a decent solution for now. In the future I plan to make an in-website article editor which will alleviate these issues.

Custom 404

And a bonus, it was time to make a custom 404 page:

See you next week!

-FracturedCode