Code Monkey home page Code Monkey logo

linkdotnet / blog Goto Github PK

View Code? Open in Web Editor NEW
278.0 6.0 49.0 13.78 MB

A blog (engine) completely written in C# and Blazor. It aims to be a simple use and easy to extend platform. Blogposts are written in Markdown and are rendered to HTML. This gives all the flexibility needed to express yourself but also have an easy way of creating posts in the first place.

Home Page: https://steven-giesel.com/

License: MIT License

HTML 20.62% C# 74.12% CSS 3.27% JavaScript 1.73% Batchfile 0.07% Shell 0.08% Dockerfile 0.12%
blog-engine blog csharp blazor auth0 aspnetcore asp-net-core blogging

blog's Introduction

LinkDotNet.Blog

.NET CodeQL

This is a blog software completely written in C# / Blazor. The aim is to have it configurable as possible.

How does it work

The basic idea is that the content creator writes his posts in markdown language (like this readme file). The markdown will then be translated into HTML and displayed to the client. This gives an easy entry to writing posts with all the flexibility markdown has. This also includes source code snippets. Highlighting is done via highlight.js with the GitHub theme.

In Action

overview

Documentation

Installation

License

This project is released under the terms of the MIT License.

Support & Contributing

Thanks to all contributors and people that are creating bug-reports and valuable input:

Supporters

blog's People

Contributors

dependabot[bot] avatar github-actions[bot] avatar kamyab7 avatar linkdotnet avatar luklapse avatar manishtiwari25 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

blog's Issues

Cache loads wrong values

The cache populates wrong entries when using search or tags

Steps to reproduce:

  • Go to overview, take any blog post and on any tag
  • Go to a different blog post with different tags and use a different tag
  • --> Old search is shown

Structed Data and OgData should be both visible

Problem: Blazor only allows one HeadContent at the time. As OgData and StructedData use HeadContentonly the latest will be rendered. Both data should be put together into one HeadContent- probably inside OgData.

Use `DateOnly` for `UserRecord`

Currently all timestamps when a user navigates to a page are saved as DateTime.UtcNow including the timestamp.
That is not really necessary as the Date part would be sufficient enough.

DateOnly would fulfill this requirement. Unfortunately, it isn't natively supported by EF in its current state (EF 7.0.1)

Preview image and fallback image url should be different

It can happen, thanks to copy&paste, that the preview image URL and the fallback image URL are literally the same.
That doesn't make much sense and should either pop up a warning message or even a validation error.

## Possible Solution
We can create our own attribute to do that:

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public sealed class FallbackUrlValidation : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var model = validationContext.ObjectInstance as CreateNewModel;

        if (model.PreviewImageUrl == model.PreviewImageUrlFallback)
        {
            return new ValidationResult("PreviewImageUrl and PreviewImageUrlFallback should not be the same");
        }

        return ValidationResult.Success;
    }
}

Navbar title too big

As the owner I want to give the blog a better branding than just my name / title.

Therefore we should address the ability to also add a „brand“ image into the navbar.
If we have a brand image url and the blog name/title we always prefer the image over the title.

Still the title is used for meta tags.

Points to consider:

  • Adding brand-image-url to the appsettings.json as well as AppConfiguration object
  • Extend the Factory to map those fields
  • In the navbar check if we have the brand image. If so use this otherwise just the title
  • For responsiveness we should give the image a max dimension to preserve the current navbar behavior

Update to Bootstrap `5.3` stable

Currently version 5.3-alpha.1 is used that brings some bugs with it:

  • Navigation for Admin Panel does not work

As soon as there is a (more) stable version, the Blog should use that version.

HasLIked per page

The current implementation of "hasLiked" is global. Therefore an user is not able to like one blog post and then like another.

Current behavior

  • The user likes any blog post
  • The user goes to another blog post
  • The user can only "unlike" the page

Expected behavior

  • The user is able to like multiple pages

Archive should not Display not published Blog Posts

Current Situation

When a new blog post is created where IsPublished is false the blog post is still visible in the archive. The same holds true for blog posts which are „unpublished“.

Target Situation

Unpublished blog posts should only be visible in the admin area

Updating a blog post after it has been published does not recognize the markdown

Steps to reproduce:

  1. log in as a dummy admin on my dev machine
  2. Write a blog post.
  3. Save it as a draft.
  4. Edited the draft and published it. Exit app to save the cache.
  5. Reopen app and log in as dummy admin.
  6. Edit the post adding markup, specifically ##
  7. Publish the post, exit app.
  8. View the post by reopening app and clicking Read the Whole article. The ## shows up as a literal instead of being changed to html.

Discussion

The hash marks were saved as literals and are not changed to html by MarkdownConverter.ToMarkupString(). I ran into this problem a while ago in another Blazor app where I was trying to dynamically change the content of a page. I never was able to fix it. I think it has something to do with the way the string is saved as varchar in the database.

Workaround

The workaround is to put the html into the text box because html tags are valid Markdown. If you edit this issue, you can see I use the html h2 in this post instead of Markdown.

Multiple Update of blog post leads to doubled tags

Happens with SqlServer

Steps to reproduce

  • Open the blog and navigate to a blog post in admin mode (or create one and navigate afterwards)
  • Edit the blog post and change the tags
  • Save the blog post
  • Edit the blog post again
  • Check the tags in the overview page. They are doubled now

Possible Root cause

  • CachedRepository does give a wrong version when editing the second time

Visit Counter works only with SQL

Currently the VisitCounter expects an instance of BlogDbContext.

This will lead to issues when trying to access the page via RavenDB or InMemory.

Give Kudos for Blog Post

How does it work

You can give a thumbs up when you thing the blog article was good

Technical Requirements

  • At the end of the blogpost give the opportunity to thumbs up
  • Display how many thumbs up there are
  • Save thumbs up per blog post
  • Save thumbs per blogpost per user so that they can not vote multiple times

Notes

For saving and reading state: https://www.nuget.org/packages/Blazored.LocalStorage/

Search engine friendly URL

hey,
Instead of id for the blog post URL can we use title? replace spaces with - (Hyphen)?
Or all writer to create a URL.

Cache for initial loading speed

Idea: Use In-Memory cache to reduce the initial waiting time. Everytime a user hits the package we can check if the cache is up to date.

Not able to edit the tags

Found a weird issue, instead of coma(,) while adding the tags I mistakenly added a semicolon(;) and saved the post. when I realize my mistake I try to update it, and it is not working.
could be an issue with EF core, but I am looking into this.
two things I am looking into

  1. the bug
  2. adding a helper text on blog post page to let user how to add the tags

Possibility to create WIP Blog Posts

Sometimes it is desired to save a current blog post but don't necessarily publish it directly. Especially for longer blog posts where on works longer. Therefore a possibility should be created to save a blog post but make it not visible to others.
Tasks:

  • Hide unpublished Blog Posts
  • Create Toggle in Create / Update Page
  • Make it visible for the content creator in the overview

Update BlogPist leaves empty page with same Id

After updating a blog post the Id and the object stays the same.
This can lead to potential unwanted override. The page looks like "create a new blog post" but still holds all reference to the updated blog post.

Support light and dark mode via toggle

With the current setup only one mode is allowed at a time (dark mode with version >4.1)

There should be a toggle for the user to change that.

  • Toggle between light and dark mode
  • Save the preference
  • Use OS default as standard

Updating Tags in a blog post doesn't update

When updating a blog post and changing the tags, after change those tags are not visible in the overview page nor in the search (for tags).

Root-Cause

When entering the update blog post page, the blog post is retrieved from the cache rather than the underlying repository.
That leads to the problem, that the children are not tracked anymore and therefore don't get updated.

Test to reproduce

[Fact]
public async Task GivenBlogPostWithTags_WhenLoadingAndDeleting_ThenShouldBeUpdated()
{
    var bp = new BlogPostBuilder().WithTags("tag 1").Build();
    var sut = new CachedRepository<BlogPost>(Repository, new MemoryCache(new MemoryCacheOptions()));
    await sut.StoreAsync(bp);
    var updateBp = new BlogPostBuilder().WithTags("tag 2").Build();
    var bpFromCache = await sut.GetByIdAsync(bp.Id);
    bpFromCache.Update(updateBp);
    await sut.StoreAsync(bpFromCache);

    var bpFromDb = await sut.GetByIdAsync(bp.Id);

    bpFromDb.Tags.Single().Content.Should().Be("tag 2");
}

Color Palette for easier theming

Create a global color palette which could also easily adopted for new themes.

It should make it also easier to customize the whole appearance

Save unsaved blog posts in local storage

Instead of dismissing the whole work, we can just put the whole blog post into the local storage (or give the option to save the draft to local storage).

This can also be done for already created blog posts where we additionally save the ID to make the mapping happen.

Global Color palette

Create a global color palette which could also easily adopted for new themes.

It should make it also easier to customize the whole appearance

Create wiki-page for initial setup

Ideas:

  • having a wiki page how to set up everything
  • Interactive setup when the blog is loaded the first time

For the second one we need way more stuff beforehand.

Unable to add new blog post

Submit button while writing a new blog is always disabled.
I checked the code and found that canSubmit variable is set to true.
I think it should be false by default. what do you think?

image
image
image

Lazy Load images

Images should be lazy loaded so the initial page hit is smaller

Read time per Blog Post

Show in the overview (ShortBlogPost) a rough estimate of the read time in minutes.
We want to give the user a rough estimate how long / how detailed the article is. If we know the reading time is 15 minutes we know it is a longer blog post with more in depth knowledge.

According to google the average reading tempo is roughly 200 words per minute.
For every image we might want to add just flat 15 seconds.

So if we have 300 words and 2 picture, we have 1.5minutes from words plus 0.5 minutes from pictures = 2 minutes.

Title / Short Description / Content very laggy and swallowing input

Due to the two-way binding and latency it can happen that input gets "lost" because we enter multiple characters which get send to the server. The server evaluates the two-way binding while the next one comes in. Now we are in a race condition.
The longer the content the more likely we encounter missing characters.

Professional Timeline

Add vertical timeline with professional events. This should give the reader a rough overview of the professional experience one made.

Open Questions

  • Is it part of the.AboutMe Page?
  • How much in detail should the timeline go? Do we want to allow to click on an entry and navigate to a kind of „detail“ Page?

Offer multiple images as preview image

In the current state only one image is allowed as preview.
This can lead to the smallest denominator in terms of filetype and quality.

For example: LinkedIn does not support webp/avif but other sites do.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.