currently, clicking on a tag in the detail view of a blog post opens the following url with 404 error page: https://blog.jankaritech.com/tag

As a reader, I would expect that clicking on a tag would show me a list with other blog posts with the same tag as suggested in #140.
If this functionality is not intended, then a better user experience would be provided by removing the link from the tag.

Background

Yeah, I would prefer to use /src/assets/... paths in the blogs for local assets and after build the url path would resolve to https:///src/assets/.... Because the domain could be different.
see #66 (comment)

Description

Everytime using URL for the images is not friendly. Path based image usages is currently possible but only with the URL preparations and this way is not 100% good due to the case of domain as mentioned above.

Todo

• The markdown path based image usages should be made possible
• A good URL resolver system with dynamic domain handling should be implemented

thx a ton @saw-jan for raising this

Since our company blog is a way to show our expertise to potential customers, it would be nice to have an option to select posts that are particularly relevant to the services our companies provides and display them by default on top of the list.

This should only affect the default sorting order, but not apply if the user has actively selected a particular sorting order (see also #129)

It seems like currently we don't have any tests for our blog, which means with each change on development side, we have to manually test if everything still works. This is not very efficient. Let's add some some tests.

TODO

• add unit tests
• add E2E test coverage

we are using a lot of external images, this is not good because

1. depending on external resources that might move
2. we might violate copyrights

ToDo:

• check the copyrights / permissions of every image
• replace images that we are not allowed to use
• mention the author where needed
• host all images on github

Description

Right now we are deploying the blog with every PR that gets merge. It would be better if we release and deploy the blog with creating a release tag which would be standard.

CC @koebel @saw-jan

From a user perspective, it would be nice to have a rough estimation in the blog overview about how much time it takes to read a certain blog post.

screenshot with example from https://dev.to/

Changing the color for dark mode
Dark Mode:

Light Mode:

Need to check for other places too.

The PR #126 raises the unintended side effects.

1. The blog post sorting feature in HomeView is broken (default sort by created date)

Instant solution:

1. Revert the PR #126
2. Add the fix
   • test and verify the intended fixes
   • test other areas too where the fixes might break
   • add proof of fix in the PR (screenshot or video)

Environment:

• Chrome
• Firefox

do not use the line number reference to parse
but instead, use the peek keys.

See:

Also, make the linter cope with the exact change.

Options:

• tile view
• list view

Description

Valid search keywords are unable to give any search results in some cases, providing users with an empty result. This might be problem for the user, especially if they encounter difficulty in using the search features effectively

Steps to reproduce

Step-1: Go to the search bar

Step-2: Search by author, assuming artur. It will work properly and show the results.

Step-3: Search again with the word arturs, the search result will be empty, showing the message Sorry, no results found for "arturs" as shown in the image.

Step-4: But when we remove the s from the word arturs using key backspace and become artur in the search results, then the search result will be empty, showing the message Sorry, no results found for "artur" as shown in the image.

Screen record

Expected

Actual

• add rule to the linter
• add missing images for the current markdowns

Upto now, the filter and sort feature works in complete independence. But it would be nice if we can sort the filtered resut.

clicking on a tag in the blog overview leads to detail view of the given article. as a user I would expect that this would show me a list of all articles with that tag (similar to search with filter "tag") like this is the case in many popular blogs like https://dev.to/

if a blog wraps smaller headings inside a big headings like:

...
# blog title
...
## heading 1
...
### sub heading 1
...
## heading 2

then the table of content should be made collapsible w.r.t to the headings like:

Table of content
---------------------
➡️ heading 1 ⬇️ 
    ➡️ sub heading 1
➡️ heading 2

From a user perspective, I would expect that search is by default over all categories (title, tags, authors, ... and everything else that is technically possible) unless the user specifies that he/she only wants to search in a certain category. Also content search would be nice.

When the user selects a filter to narrow down the search, it would improve the user experience by

• displaying which filters are currently activated (not only in drop down but in some way that is more visible for the user)
• if there is no blog post that fits the search criteria, make the message clearer by saying something like "Sorry, no results found for "Go" in <search category(s)>"
• allowing a combination of multiple filters
• offer an easy way to reset all filters (something like "remove all filters")
• maybe also resetting filters when using the "reset search" button under the text of the no results message. What might be even better from UX perspective is giving a message to the user that briefly explains that filters have narrowed down the search results and state how many search results there are in total without filters and let the user choose if he/she wants to clear filters or not.
• for the "clear search" button I would expect that it only clears the search terms, not the filters

this example shows some good ways for displaying and removing filters in a intuitive, user friendly way

Originally posted by @koebel in #127 (comment)

Instead of using the date from metadata, how about using the date of a blog published (or the date of PR merged)?

Actual Behavior

A recently published blog is seen below other blogs when sorted by Date Created, this is due to the date from metadata being used to sort.

Expected Behavior

Sorting blogs would be more logical if sorted according to the published date rather than the date when the user started to write the blog.

It seems like currently the blog posts are sorted by publication date by default. However if the sort function is selected, this is not displayed, only after actively selecting that criteria, the option is highlighted. This is not good Usability, because it doesn't show the current state of the system to the user and can cause a bit of confusion to the user, because nothing changes when selecting this option (because it's technically already selected).

What concerns sorting criteria, it is very common to give the option to change the order (newest to oldest, oldest to newest, A-Z, Z-A).
And regarding the wording, in dev.to the terms used in the filter are "Newest" and "Oldest" (which is commonly understood that this means newest to oldest and vice versa). For "Alphabetical", I assume this is title in alphabetical order?

Plus there seems to be a little bug: at some occasions changing the display order seems to be affecting the display style (tiles vs. list view)... This needs more attention to figure out what determines the change, since this is confusing to the user.

TODO

• review sorting criterions of other blogs
• decide which ones are relevant for our blog
• come up with short label titles that are easily understood
• highlight default sorting option in the menu
• figure out if there is some connection between current implementation of selection of filter and change of display style and if so, report bug

Description

When we select a filter and refresh the page and again we switch to another filter, then the filter is reset instead of making the selected one active.

Video of a bug

Affected Items

• Font Select
• Theme Select
• Sort & FIlter Drop

Problem Description

These menus can only be toggled with click on the trigger. But this is not a good from the user/reader perspective.

It should be like

If the menu is open then any click outside the menu should close that menu.

For increased reader engagement it would be nice to allow readers to react to the content by giving micro feedback (emojis such as like, heart, rocket, etc.) and comments on our blog posts like this is the case in many popular blogs such as https://dev.to/

after using the deployment from the dist branch, the images used from /src/.. is not working

maybe we've to use the public folder to store all images.

Hash mode has a bad impact on SEO (also mentioned here: https://router.vuejs.org/guide/essentials/history-mode.html#hash-mode)
Since this is a blog site, we want our blogs to reach other people and/or maybe, become a top blog site 😄
Also, Vue Router recommends HTML5 history mode.

This might not be an easy change!

CC @kiranparajuli589 @grgprarup thoughts?

Ref:

• https://github.com/alloc/vite-plugin-compress
• https://github.com/vbenjs/vite-plugin-imagemin

For now the dark mode and font settings are just remembered for the current page. If we reload the page or start a new session, the default values are assigned.

We can preserve these settings on the browser storage so that same setting will be rendered on the next browse

• can we achieve this?
• is it needed? (script is doing just fine)

ref: https://github.com/sapphi-red/vite-plugin-static-copy

Description

In the detail page for the blog post we have sharing buttons in the left sidebar.

Social medias:

• Facebook
• LinkedIn
• Dev.to
• Twitter #103
  • need to make a thumbnail, description etc.
• ...

TODO

• implement those sharing to the respective social medias

Description

There appears to be an issue with the proper inclusion of certain HTML references within the parsed HTML content.

Steps to reproduce

To replicate the issue, please visit the following URL: https://blog.jankaritech.com/#/blog/Serving%20your%20cat%20video%20using%20the%20Internet%20-%20A%20basic%20understanding%20of%20HTTP%20and%20socket%20programming%20(in%20Java)

Screenshot

Possible Solution

It is suggested to consider updating the marked.js package, as per the official documentation, to ensure compatibility and resolve the observed issue.

Problem description

Detail view for blog item works fine but the series blog loads empty with this error in the console

https://github.com/cucumber/godog#subtests-of-testingt

During the project initialization phase, the team was initially unaware of the SEO aspect pertaining to the blog. It is important to note that a comprehensive SEO strategy encompasses not only the visibility of the blog in search engine results but also its appearance when shared on social media platforms. Currently, the blog fails to appear in search results when users search for relevant content on platforms like Google (or any other search engines), as it lacks proper meta attributes associated with each blog page.

One viable solution to address this issue is to consider utilizing https://vitepress.dev/, a tool that has been adopted by the official documentation website of VueJS. This technology demonstrates its effectiveness and compatibility with the blog's requirements.

1. scroll down an article
2. switch to an other article

after changing to an other article the scroll position should be the top

Optimize display on of blog post (detail view) on mobile devices. Currently the text only fills half of the screen width. This is inconvenient for reading, in particular for the code examples, because it requires scrolling even if there would be enough space available to show the whole code.

• currently, the table CSS is missing :( (done in #57)
• generally the whole markdown CSS needs to be improved.

The UI of our blog gives the user the option to select between two types of list view, however there is no huge difference between these display options. I suggest to change the "light view / list view" to be further reduced to the essentials (e.g. removing the title image of the blog post) similar to how this is done in dev.to in certain views, so that more blog posts are displayed on first sight within the viewport when this option is selected. This will in particular be a UX improvement for mobile users, where with the current style, only 1-2 blogposts are visible even with the second display option...

Here is some design inspiration (one of the list views from dev.to)

the search bar should be fixed. Limitations known till now:

• Content based searches
• Tag based filtration
• More improvements for No Results section
• Date Based Filterations

Current Situation

What it should be:

Description

As of now we can filter search either by tag or author and by default it does search by title. It would be better if we add an extra option to the filter title in UI as well and make user to search by anything as default initially.And based on filters user can search accordingly through filters so that the user knows through which filter the user is making a search. Also change the place holder of the input field based on the selection of the filter something like search by title , search by tag , search by author.

• Add title filter in UI
• Make user search anything initially
• Make placeholder dynamic according to selected filter.

A few issues regarding usability, accessibility and user experience of our blog that I noticed:

• main title of the blog doesn't get rendered as H1 but as <div class="title">: this is not good for accessibility, there should always be a H1 tag
• there is hardly no difference in how H2 and H3 titles are displayed (font size 2.6 rem vs. 2.2 rem), looks almost the same
• table of content: no difference between different title levels, structure would be clearer if H3 is a little bit indented or smaller than H2 or uses a different bullet triangle..., see also #88
• social share buttons don't seem to be working, see also #69
• section "The Blog Project": maybe this is some placeholder text from a template? doesn't say anything meaningful, to me as a reader this is just confusing.
• Publishing date of blog post: it seems like the time of publishing doesn't properly displayed. It's always 12AM for all blog posts. If we think it is relevant to display the time of publishing, then make sure that the correct time is displayed, else just print the date without time. --> see also #71

The link references should be supported for the markdowns. In some markdowns like http://localhost:3000/#/blog/E2E%20Testing%20with%20Cypress/Cucumber%20-%20Gherkin%20Integration, the references are rendered at the last of the parsed content. That should not happen

Investigate the match case and fix the markdowns accordingly.

Image added with markdown syntax ![image](image-url) is not resizable and when HTML <img src="url"/> tag is used in markdown, it is not parsed by the markdown parser.

Every heading block in a blog should have a link using which we can navigate to that portion of the blog from anywhere using a Browser.

for code blocks, it should show the highlighted syntax
Ref: https://marked.js.org/using_advanced#highlight