genicsblog / theme-files Goto Github PK

context

A step to check for user-preferred color scheme can be added to theme.js to apply a color scheme to the site, if local storage doesn't already have an information about the user preference.

Whenever one hovers on a post there's a visible border color that is specific to the category of the post. For example, the category for this post is android, so wherever there's a link to this post, there's a green hover color.

This color is achieved by templating the classes for the link with these classes: hover:border-{{ category }} and an !important field for dark:hover:!border-{{ category }} (notice !) where {{ category }} denotes the category of the current post that Jekyll is rendering:

The possible combinations for the categories are defined in the tailwind.config.js file's safelist section:

And the colors are there in the section:

There are two classes in a single element: dark:hover:border-slate-200 dark:hover:!border-{{ category }}, and the second one is marked important with ! to force apply category color and fallback to default color if it isn't present.

This is done because if there is no specific color assigned in the tailwind.config.js file, It falls back to the default black color in light mode and white border in dark mode.

There needs to be such hard-coding because tailwind can't automatically include dynamic CSS classes, at least up to the point I have tested it with Jekyll.

There is a need to find a better solution than manually having to hardcode the safelist every time...

Add an event listener inside theme.js at the end, to listen fo key combinations: Ctrl+K or Cmd+ K.

If the keys are pressed, call the showSearch() function

Is your feature request related to a problem? Please describe.
There are spam comments every now and then. Some kind of captcha would help reduce that.

Describe the solution you'd like
Using automation like Akismet to identify spam comments. https://staticman.net which we use supports it.

Describe alternatives you've considered
Re-captcha by Google could be used but destroys UX.

It is a nice practice to cache the includes so that build times can become slightly faster. jekyll-include-cache can be used to achieve the same.

Adding a transition animation for the hamburger in the navbar would be a nice addition:

We could use open graph meta tags for:

• og:profile for author pages
• og:type for article and archive pages.

etc.

Learn more about open graph protocol: https://ogp.me/

DRY principle can be implemented do reduce code duplication.

Is your feature request related to a problem? Please describe.
The current series page lists posts in a grid. Since a series has posts in sequential order, it would be better to make them a list of horizontal boxes.

Also, they are shown in a latest posts first order. Again, series are sequential so oldest posts first would be better.

Describe the solution you'd like
Create a new layout for horizontal postboxes and replace this line in series.html layout.

Is your feature request related to a problem? Please describe.
Currently, the links inside posts are general text-based links, preview embeds would look great!

Describe the solution you'd like
Create a link include for the Jekyll theme which can be used to show a preview of the link by extracting social image/title from the meta tags using custom javascript.

If the social preview was found, show that to the user else fallback to general links.

Dark link buttons on archive.html look weird:

Needs to be similar style as the CTA (size should be same, needs fix just for the shadow and colour):

As the project grows bigger, automated testes for scripts in the _scripts folder are kind of necessary now.

Some specifics about this task:

• Create sample mock data and test functions present in the files.
• Need not to use some testing library. Testing under workflows via GitHub Actions should do.
• The GH Actions could present fake data to the scripts and validate expected outputs.

Creating contributor guidelines can help in maintaining the quality of contributions!

The elements currently spread the whole area and the posts do not look nice in larger displays. Possible solution is to add max width to the containers for optimal view even when zoomed out.

Pressing Ctrl+K should bring up the search bar, it doesn't.

Change the Key to appropriate one, so that the search bar works as desired.

The site has Universal analytics which would soon become unsupported. Need to migrate to GA4.

Add more than 10 articles to the RSS feed and use excerpts rather than full articles to accommodate more content.

Also, consider setting up RSS auto-discovery.

Update extlinks.rb so that if a link is a local link, change it to a staging link by prepending staging. to the link.

The steps should be skipped in production environment though.

All the article listings pages are paginated. For example, go to https://genicsblog.com/category/android, it has posts in paginated way(9 per page).

But the author pages(example) aren't paginated. They list all the posts in one go which can make the loading speed slow.

Figure out a way to paginate author pages. Might require a custom Jekyll plugin.

The current feed is available at https://genicsblog.com/feed.xml
Changing it to https://genicsblog.com/rss.xml would be better.

Just needs minor changes to the _config.yml file.

For #11, we need to show some visual information that pressing Ctrl + K will open the search bar. Something like this:

needed changes:

• making a class that has styles to make text appear like keys. Updates in theme.css
• Add the keys in search.html (should only appear on large screens only)

Is your feature request related to a problem? Please describe.
Users can't copy code from code blocks, a copy button would be a nice edition!

Describe the solution you'd like
Add a copy button besides the language button.

Resources to look into:

• jekyll-pwa plugin
• google workbox

Selection colors specific for code-blocks can be improved.

Dark:

Light:

Is your feature request related to a problem? Please describe.
NO

Describe the solution you'd like
Webmentions are an open standard for a protocol to notify about links, likes or comments to a webpage.

Additional context
So when you add a link to a website, you can send a Webmention as a notification to the linked page. Like a reference for the author about your reaction. So authors can get notified when they receive a linkback, comment or a reply.

Webmentions can be implemented from this tutorial

Add an option for users to generate a table of content at the top of the article for better experience.

Authors should be able to add TOC by enabling it in the front matter:

---
# Other config
toc: enabled
# Other config
---