khusika/feelit

A clean, elegant but advanced blog theme for Hugo

FeelIt Theme | Hugo

FeelIt is a clean, elegant but advanced blog theme for Hugo.

It is based on the original LoveIt Theme, LeaveIt Theme and KeepIt Theme.

Since the three themes have a similar look, if you have questions about their differences, read Why choose FeelIt so that you can choose the one that works best for you.

Demo Site

To see this theme in action, here is a live demo site which is rendered with FeelIt theme.

Why choose FeelIt

Compared to the original LoveIt theme, LeaveIt theme and the KeepIt theme. The FeelIt theme has the following modifications.

• Custom Header
• Custom CSS Style
• A new home page, compatible with the latest version of Hugo
• A lot of style detail adjustments, including color, font size, margins, code preview style
• More readable dark mode
• Some beautiful CSS animations
• Easy-to-use and self-expanding table of contents
• More social links, share sites and comment system
• Search supported by Lunr.js or algolia
• Copy code to clipboard with one click
• Extended Markdown syntax for Font Awesome icons
• Extended Markdown syntax for ruby annotation
• Extended Markdown syntax for fraction
• Mathematical formula supported by KaTeX
• Diagram syntax shortcode supported by mermaid
• Interactive data visualization shortcode supported by ECharts
• Mapbox shortcode supported by Mapbox GL JS
• Embedded music player supported by APlayer and MetingJS
• Bilibili player supported
• Kinds of admonitions shortcode supported
• Custom style shortcodes supported
• CDN for all third-party libraries supported
• ...

In short, if you prefer the design language and freedom of the FeelIt theme, if you want to use the extended Font Awesome icons conveniently, if you want to embed mathematical formulas, flowcharts, music or Bilibili videos in your posts, the FeelIt theme may be more suitable for you.

I hope you will FeelIt ❤️!

Features

Performance and SEO

• Optimized for performance: 99/100 on mobile and 100/100 on desktop in Google PageSpeed Insights
• Optimized SEO performance with a correct SEO SCHEMA based on JSON-LD
• Google Analytics supported
• Fathom Analytics supported
• GoatCounter Analytics supported
• Search engine verification supported (Google, Bind, Yandex and Baidu)
• CDN for third-party libraries supported
• Automatically converted images with Lazy Load by lazysizes

Appearance and Layout

• Responsive layout
• Light/Dark mode
• Globally consistent design language
• Pagination supported
• Easy-to-use and self-expanding table of contents
• Multilanguage supported and i18n ready
• Beautiful CSS animation

Social and Comment Systems

• Gravatar supported by Gravatar
• Local Avatar supported
• Up to 64 social links supported
• Up to 28 share sites supported
• Disqus comment system supported by Disqus
• Gitalk comment system supported by Gitalk
• Valine comment system supported by Valine
• Facebook comments system supported by Facebook
• Telegram comments system supported by Telegram Comments
• Commento comment system supported by Commento
• Utterances comment system supported by Utterances

Extended Features

• Search supported by Lunr.js or algolia
• Twemoji supported
• Automatically highlighting code
• Copy code to clipboard with one click
• Images gallery supported by lightgallery.js
• Extended Markdown syntax for Font Awesome icons
• Extended Markdown syntax for ruby annotation
• Extended Markdown syntax for fraction
• Mathematical formula supported by KaTeX
• Diagrams shortcode supported by mermaid
• Interactive data visualization shortcode supported by ECharts
• Mapbox shortcode supported by Mapbox GL JS
• Music player shortcode supported by APlayer and MetingJS
• Bilibili player shortcode
• Kinds of admonitions shortcode
• Custom style shortcode
• Custom script shortcode
• Animated typing supported by TypeIt
• Cookie consent banner supported by cookieconsent
• ...

Documentation

• Theme Documentation - Basics

• Theme Documentation - Content

• Theme Documentation - Built in Shortcodes

• Theme Documentation - Extended Shortcodes

• Basic Markdown Syntax

• Emoji Support

Getting Started

• Install required packages

npm run reinstall

• Debug theme documentation

npm run start-production

• Build theme documentation

npm run build

Multilingual and i18n

FeelIt supports the following languages:

• German
• English
• Spanish
• French
• Indonesian
• Italian
• Polish
• Brazilian Portuguese
• Romanian
• Russian
• Serbian
• Vietnamese
• Simplified Chinese
• Hungarian
• Czech
• Persian
• Ukrainian
• Contribute with a new language

Languages Compatibility

Questions, ideas, bugs, pull requests

All feedback is welcome! Head over to the issue tracker.

License

FeelIt is licensed under the MIT license. Check the LICENSE file for details.

Thanks to the authors of following resources included in the theme:

• modern-normalize
• Font Awesome
• Simple Icons
• Animate.css
• autocomplete.js
• Lunr.js
• algoliasearch
• lazysizes
• object-fit-images
• Twemoji
• lightgallery.js
• clipboard.js
• Sharer.js
• TypeIt
• KaTeX
• mermaid
• ECharts
• Mapbox GL JS
• APlayer
• MetingJS
• Gitalk
• Valine
• cookieconsent

Author

Khusika and all contributors

Thanks! ❤️

feelit's Issues

[WANTED] Document Translator Request

I don't speak Chinese nor France and i won't remove the document translation to keep the i18n showcase. Because of that, for those who want to translate the documentation into Chinese or France, feel free to do a pull request.

i18n	Translator
en	author
fr	N/A
zh-cn	N/A

I'll keep these issue open,
Thanks!

[BUG] local preview broken after converting images to webp

Describe the bug

After changing a lot of the images in my blog to webp, the local preview in Hugo broke. It was working reasonably well before. Style sheets are not loading neither images in my local preview but they do work in the live site.

Expected behavior

locally built preview should look like almost the live website

Screenshots

I do get errors in Firefox's Inspector

Build Environment

• OS: Windows 10
• Theme version/commit: 1.0.1
• Hugo version: 0.86.0 extended
  Please try to use Hugo extended version before opening the issue.

Preview Environment

• OS: Windows 10
• Browser: Firefox

Additional Information

Hugo doesn't display any errors in the terminal after getting the hugo serve --disableFastRender command.

Thank you in advance for any help. Love what you have done with this theme. I can FeelIt.

[FEATURE] Add parameters to adjust the page width

Would you please add a param to let us adjust the page width?

For example:

width: 80  # Percentage of page width

or

width: "wide" # compact\normal\wide

[FEATURE] Giscus support

Giscus seems like a nice comment feature to support.
Homepage

Build issue - template for shortcode not found

Description

I have hugo extended install and trying to run the examplesite but getting the errors for all the short codes

FeelIt$ hugo version
hugo v0.84.4-020E4ACE+extended linux/amd64 BuildDate=2021-07-01T11:51:55Z VendorInfo=gohugoio
FeelIt$ 
FeelIt$ hugo serve --source=exampleSite
Start building sites … 
hugo v0.84.4-020E4ACE+extended linux/amd64 BuildDate=2021-07-01T11:51:55Z VendorInfo=gohugoio
Built in 42 ms
Error: Error building site: "FeelIt/exampleSite/content/about/index.fr.md:12:1": failed to extract shortcode: template for shortcode "style" not found

Build Environment

• OS: Ubuntu 20.04
• Theme version: main branch latest commit
• Hugo version: 84.4

[ENHANCEMENT] Master config file and explanation

Right now, the config file in documentation and the one in example site are both different (however the one in documentation is a lot more organized)
Both of them are missing some things that the other has (it seems).
Also, many options don't have adequate explanation of their function (especially for non-developers).

Can you please make the two config sources the same, and include all site config options and add more explanations to the options?

[BUG] style customization not working

I'm pretty new to git hub issues, and English is not my native language so please excuse me if the wording is not that proper.

Problem

I'm trying to override the global font family of the theme using _override.scss described in the documentation. The file content is as follows.

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
$global-font-family: Montserrat, sans-serif;

But when I relaunch the site, I can see that the font Montserrat is requested (by looking at chrome developer tools), but the font is not set.

I also tried directly modifying the $global_font_family in _variables.scss in /themes/FeelIt/assets/css, but it seems only the title in the navbar header is changed. Looking at the generated scss files in /resources/_gen/assets, the font is still unchanged.

Environment

I'm working on macOS M1, Hugo is installed with homebrew, command hugo version gives the following result

hugo v0.88.1+extended darwin/arm64 BuildDate=unknown

I'm not sure which file I should modify. Any help would be appreciated.

[BUG] Google Analytics does not work

Describe the bug

When I add in config.toml

googleAnalytics = "UA-hoge"
[privacy]
  [privacy.googleAnalytics]
    disable = false
    anonymizeIP = true
    respectDoNotTrack = true

Render error occuered, such as

ERROR 2021/08/15 05:31:06 render of "page" failed: execute of template failed: template: _internal/google_analytics.html:1:16: executing "_internal/google_analytics.html" at <.Site.Config.Privacy.GoogleAnalytics>: can't evaluate field Site in type string
ERROR 2021/08/15 05:31:06 render of "page" failed: execute of template failed: template: _internal/google_analytics.html:1:16: executing "_internal/google_analytics.html" at <.Site.Config.Privacy.GoogleAnalytics>: can't evaluate field Site in type string
ERROR 2021/08/15 05:31:06 render of "page" failed: execute of template failed: template: _internal/google_analytics.html:1:16: executing "_internal/google_analytics.html" at <.Site.Config.Privacy.GoogleAnalytics>: can't evaluate field Site in type string
ERROR 2021/08/15 05:31:06 render of "page" failed: execute of template failed: template: _internal/google_analytics.html:1:16: executing "_internal/google_analytics.html" at <.Site.Config.Privacy.GoogleAnalytics>: can't evaluate field Site in type string
ERROR 2021/08/15 05:31:06 Rebuild failed:

Expected behavior

google analytics(google tagmanagers ) tags displayed in header.

Build Environment

• OS: Alpine ... docker peaceiris/hugo:v0.87.0
• Theme version/commit: 1.0.1
• Hugo version: [v0.87.0-B0C541E4+extended]

Please try to use Hugo extended version before opening the issue.

Preview Environment

• OS: [macOS]
• Browser [Chrome]

Additional Information

I think With is Rebinds the context (.) , Internal Templates can not use arguments correct config.

inbaseof.html

{{- $analytics := .Site.Config.Privacy.GoogleAnalytics -}}
        {{- if not $analytics.Disable }}{{ with .Site.GoogleAnalytics -}}
            {{ template "_internal/google_analytics.html" . }}
        {{- end -}}{{ end -}}

"_internal/google_analytics.html" arguments were rebinded .Site.GoogleAnalytics by With.

I think this should be fix below.

{{- $analytics := .Site.Config.Privacy.GoogleAnalytics -}}
        {{- if not $analytics.Disable }}{{ if .Site.GoogleAnalytics -}}
            {{ template "_internal/google_analytics.html" . }}
        {{- end -}}{{ end -}}

I have a question about using the Feellt theme and Hugo deployed on github page

Describe the bug

A clear and concise description of what the bug is.

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Build Environment

• OS: [e.g. Windows 10, macOS, Ubuntu]
• Theme version/commit: [e.g. 1.0.0, 0548952]
• Hugo version: [e.g. 0.84.0]

Please try to use Hugo extended version before opening the issue.

Preview Environment

• OS: [e.g. Windows 10, macOS, Ubuntu, iOS, Android]
• Browser [e.g. Chrome, Safari, Firefox]

Additional Information

Configuration files or front matter code...

[HELP] Auto-deploy to Netlify fails "merge not defined"

Describe the bug

I noted the docs say you can automatically deploy to Netlify, which is great. Every time I try, I get the error in the screenshot below "merge not defined."

Expected behavior

A successful build to Netlify :) I plan to configure directly on GitHub to tweak things here and there but I don't have much in mind to update the taxonomy, schema, or theme itself.

Screenshots

Build Environment

• OS: Netlify so Linux??
• Theme version/commit: [e.g. 1.0.0, 64a8b8a2d]
• Hugo version: [e.g. 0.84.0] presumably 0.84.0 extended, since I did not update theme.toml

Preview Environment

N/A

Additional Information

I love this theme!

[FEATURE] webmention

It would be great to integrate webmention support with manual submission form.
That way blogs can be more easily connected and communicate with each other.

see this article: https://anaulin.org/blog/adding-webmentions/
it used this https://github.com/PlaidWeb/webmention.js for displaying the webmentions

[FEATURE] Optimization, icons and Font Awesome

I'm not sure how feasible this is to implement, but having to retrieve icons from font awesome adds unnecessary overhead when all we needs is an svg (that we can get from many sources).

More info and demonstration:
Short Youtube Video

As you can see, from the video, getting rid of font awesome is fairly easy, it makes the site faster, and also allows the user to use Iconify which means they will have many more icon libraries to choose from.

The way he does it in the video is an option (svg code), but we can also just download the svg file and just link to it locally.

in this example I'm trying to add Artstation to social.yml but since Font Awesome doesn't include its icon in the free pack, I have no option.
But using the method in that video, I can use iconify and get many icons from many libraries, and without having to change implementation since I would get the actual svg.

https://github.com/iconify

[FEATURE] RSS expansion

Right now, the RSS feed generated by Feelit only includes the title and first line of the content.
It would be great to add an option in the site config to expand RSS feed to include the complete post (including images) like some other blogs do.

Feelit RSS post:

RSS post of different site that even includes the audio of the podcast:

https://your-undivided-attention.simplecast.com/episodes/down-the-rabbit-hole-by-design-ZckVqGxb

[FEATURE] PWA integration

Describe the feature you want

Add PWA support with service workers

Useful reference

https://discourse.gohugo.io/t/go-offline-service-workers-with-hugo/5741
https://developers.google.com/web/fundamentals/primers/service-workers
https://web.dev/progressive-web-apps/

[Question] Cannot create folder

How to create new posts

hugo new posts/istpost

The above command create a file istpost.md in content/posts folder.
But the default posts are in this format posts/Folder/folder.md

My question is will we create folder manually?

[FEATURE] LightGallery v2

https://github.com/sachinchoolur/lightGallery

Just creating this as a reminder and to keep track of progress towards LG2.

previously discussed here: #20 (comment)

[FEATURE] Add GoatCounter Analytic

It seems the current analytics support built in is Fanthom Analytics.
I suggest adding GoatCounter as an optional analytics service.
It is permanently free for:

• Unlimited sites
• 100k pageviews/month
• 2.4M maximum pageviews

This should cover most people.

[FEATURE] Enhance about page interface

Describe the feature you want

The about page UI currently depends on _default/single.html which looks bored for me.

Improve the UI with an adjustable parameter like

• Display website information
• Display user profile
• Display user certificate/award/achievement
• Display user skill parameter

[BUG] two logos show up in the menu header

Describe the bug

I have added a logo to the menu header just by adding the .svg in the [params.header.title]
# URL of the LOGO
logo = "/images/logo.svg"

but it seems that two show up in the menu header
I have tested with other images at that location and get the same result.

I am almost sure that I haven't changed any CSS related to this.

Expected behaviour

Just one logo container.

Screenshots

If applicable, add screenshots to help explain your problem.

Build Environment

macOS
hugo v0.84.0+extended darwin/amd64 BuildDate=unknown

Preview Environment

Safari

[FEATURE] Author avatar

Describe the feature you want

View the author's image. Currently I think it only displays a default icon.

Useful reference

Documentation mentions Gravatar supported by Gravatarand Local Avatar supported, but I didn't see how to use it: https://feelit.khusika.com/about/

[BUG] Zooming out (or using bigger windows) bugs out the page margins

Describe the bug

Simply zoom out or use a highly horizontal screen (I know, I know...) and the wonderful margins that keep text organized and the side-ToC disappear.

Expected behavior

There should be a maximum horizontal size of the text body, so everything is kept sanely readable while keeping the theme's background color, and the table of contents by the body.

Screenshots

Preview Environment

• OS: Arch Linux
• Browser: Firefox

Additional Information

Happens with the demo website.

[FEATURE] Improve svg-icons automation for favicon

When using SVG, should it not override all other favicons?

the files in example site static folder:

site example config:

microsoft edge app install (here it shows svg):

app install confirmation (here it shows favicon instead)

windows tile:

taskbar tile:

[QUESTION] Image not showing

I have create a post in posts folder. And in front matter I have added the image name and src

resources:
  - name: "featured-image"
    src: "featured-image.webp"

But the image is not displaying. Clear the cache several times but not working.
But in the default posts images are displaying correctly.

Steps to follow

• simply create a post in posts folder
• copy the images in posts folder
• add the below code in front matter

• - name: "featured-image"
    src: "featured-image.webp"
  

But still not showing images even after clearing cache

[BUG] [search] wrong url for index.json with canonifyURLs = true

Describe the bug

if canonifyURLs = true is set in config.toml, baseURL is not used to get index.json. So the search doesn't work.

baseURL = "https://group.pages-gitlab.mydomain.com.br/techblog/"

Browser console: VM1586:1 GET https://group.pages-gitlab.mydomain.com.br/techblog/index.json 404 (Not Found)

Expected behavior

The search works with canonifyURLs = true and the baseURL is /something.

Build Environment

• OS: Fedora 34 64 bits
• Browser Chrome 96
• Theme version/commit: https://github.com/khusika/FeelIt/commits/92084dcad33b82ae6ce5e263a1cf9c300971248b
• hugo v0.91.2-1798BD3F+extended linux/amd64 BuildDate=2021-12-23T15:33:34Z VendorInfo=gohugoio

[FEATURE] "Now" Page standard

Now page

Most websites have a link that says “about”. It goes to a page that tells you something about the background of this person or business. For short, people just call it an “about page”.

Most websites have a link that says “contact”. It goes to a page that tells you how to contact this person or business. For short, people just call it a “contact page”.

So a website with a link that says “now” goes to a page that tells you what this person is focused on at this point in their life. For short, we call it a “now page”.

It was coined by Derek Sivers here

---

Examples of Now pages:

https://8-p.info/now/
https://sive.rs/now
https://marcjenkins.co.uk/now/
https://www.notkindacool.com/now/
https://garrickvanburen.com/now/

---

---

There's an aggregator website for now pages (showing widespread adoption).

[FEATURE] Create Page Test Check

Describe the feature you want

• Create LightHouse check in every push change
• Create HTMLValidator check in every push change
• Check workflows function
• Fix all check warn

Useful reference

• LightHouse-CI
• HTML Validator

[BUG] featuredImagePreview no changes

I use featuredImage & featuredImagePreview, featuredImage works well, images can appear in single post. but featuredImagePreview can't display image on home

---

featuredImagePreview: "images/fluent-mountain-day.jpg"

Closed,

I solved. It was enough to enter the following parameter in the config.toml:

[params.home.posts]
imagePreview = true

[QUESTION] CUSTOM CSS is not working

I have create those files , and testing custom scss.

assets/css
├── _custom.scss
└── _override.scss

but cutom scss is not working.

I think this commit seems to be the cause. Remove unused css

I am using it as described. Am I using it incorrectly?

[FEATURE] Prepare for Hugo Theme Submission

https://github.com/gohugoio/hugoThemesSiteBuilder

[FEATURE] Typlog image content

https://blog.typlog.com/images

Can you please add support for this?
It allows for easily organizing images in content, making them fit properly in page.
It was also implemented in hugo for this theme:
https://docs.stack.jimmycai.com/writing#insert-image
https://github.com/CaiJimmy/hugo-theme-stack/

I have a question about using the Feellt theme and Hugo deployed on github page

Describe the bug

I have a question about using the Feellt theme and Hugo deployed on github page.
I copied the examples from the exampleSite folder and just modified the base.Url of config.toml and themes. When git push to git page, git Page build reported the following problems.
{The page build failed for the master branch with the following error:

The variable {{< style "img { height: 1.25rem; } on line 4 in about/index.md was not properly closed with }}.}

Expected behavior

I should expect the same results as shown on http://localhost:1313/

Build Environment

• OS: Windows 10
• Theme version/commit: [ v1.0.1, 7a2c0a3]
• Hugo version: [v0.88.1]extended

Preview Environment

• OS: Windows 10
• Browser: Chrome

[FEATURE] Merge Tags and Categories as one taxonomies

Describe the feature you want

It would be nice to merge both of those taxonomies into "Archives" and make it simpler.

[FEATURE] Add related-content on single post

Describe the feature you want

See
https://gohugo.io/content-management/related/

[FEATURE] Re-brand FeelIt Logo

Describe the feature you want

Current FeelIt logo icons and avatar still using an old image from LoveIt.

Create and re-brand the logo to make it different.

The idea will be create from two components (heart and hand) which are related to the FeelIt's naming.

[BUG] Anchor links scroll to wrong Y offset

Describe the bug

When you click an anchor link like https://feelit.khusika.com/theme-documentation-basics/#22-install-the-theme, the page Y offset is not correct and it doesn't show the title of the anchor but the title goes underneath the header.

Expected behavior

I would expect to se the title of the anchor visible, therefore we the correct page content Y offset.

Screenshots

Build Environment

The one at https://feelit.khusika.com/theme-documentation-basics/#22-install-the-theme

Please try to use Hugo extended version before opening the issue.

Preview Environment

• OS: macOS m1
• Browser: Safari

Additional Information

I believe we need to take in consideration the height of the fixed header when we want to handle the scroll to link anchor Y offset.

[BUG] featured-image is not rendered

Describe the bug

When I start hugo server -D
featured-image-preview.webp on homepage and featuredimage.webp it's not rendered.
(Sorry it's probably not a bug but I need some support to solve it)

Expected behavior

Frontmatter's post it's correctly configured as:

resources:
- name: "featured-image"
  src: "featured-image.webp"
- name: "featured-image-preview"
  src: "featured-image-preview.webp"

but featured image its not displayed

Build Environment

• OS: [macOS]
• Theme version/commit: [1.0.X, 0548952]
• Hugo version: [0.88.0+extended]

Preview Environment

• OS: [macOS]
• Browser [Chrome, Edge, Firefox]

[FEATURE] Support Typora-style mermaid markdown rendering

Describe the feature you want

• use typora-style mermaid markdown rending.
  Currently, most Hugo themes use short-codes as their way of importing multimedia content, and it does useful and convenient.
  However, as a visual studio code user (or markdown preview enhanced user, more precisely), shortcodes are not working in its editor; Typora uses the following syntax to import mermaid graphs.

```mermaid
#mermaid diagram scripts
```    e.g.

Then the editor will directly render them into graphs, what you see is what you got.

What if the theme could directly render such syntax of markdown text? then we needn't search through the whole text and replace them one by one.

[FEATURE] Search partial word

Describe the feature you want

• Search partial word
  If I search for feat I find the word feature

Allow to enable this behavior through configuration.

Useful reference

This is currently possible with Lunr.js with wildcard, for example: feat*

[FEATURE] WebRTC P2P Video delivery

Why:

• To keep bandwidth cost extremely low
• Allow many people to watch hosted video content at the same time with fast loading speeds (even if the site is hosted on a home server)
• Negate the need for a CDN (even when hosting lots of large videos)
• More users means even better performance (not the other way around)
• No reliance on third party video delivery services
• Works natively on all modern browsers
• Supports VOD and LIVE* video (*depending on implementation)

Method 1:
Using a HLS.js player such as Clappr with P2P Media Loader or CNDBye.
Demo example
Simple implementation tutorial

Method 2:
Using IPFS-JS implementation of IPFS protocol.
Demo example

Method 3:
Using WebTorrentPlayer which is built on WebTorrent which a lot of projects use.
How WebTorrent works.
Demo example

[Upstream Issues] Hugo minifier regression

Describe the issues

Latest uptream version of Hugo on commit c19f65f, forcing us to enable keepWhitespace for html minifier. Those commits will make the html size bigger after being minified(cause of the whitespace).

Describe the workaround

We should keep the keepWhitespace to false as we don't use any other text around <span> tag on html.
This can be done from config.toml

[minify.tdewolff.html]
  keepWhitespace = false

Related topic

Provides related topic

• gohugoio/hugo Issues #8759
• tdewolff/minify Issues #427

Build Environment

• Theme version/commit: main@e999e0d
• Hugo commit version: 022c479

[BUG] Comments don't work.

Describe the bug

I'm trying to enable comments with vssue but it's not working. I created an OAuth App in Github according to their documentation. I edited the config.toml file with the client ID and secret but it still doesn't work. It says "failed to load comments". I also tried with telegram and gittalk and didn't work so I'm pretty sure I'm doing something wrong. Can anybody help?

Expected behavior

I expected the comments to work.

Example site not working

Describe the bug

Example site can't be served.

Expected behavior

Example site serve is served through localhost.

Screenshots

Build Environment

• OS: Ubuntu
• Theme version/commit: 163ae2c
• Hugo version: 0.87.0

Preview Environment

• OS: Ubuntu
• Browser: Chrome

Proposed solution

Editing the theme in config.toml in exampleSite directory works for me.
Changed it from theme = "./" to theme = "../".

Or am I missing something here? Thanks.

[FEATURE] Support for submenu / dropdown menu

I was wondering whether someone already implemented or thought about submenu support. If I'm right, it's not yet supported.

I was using even-theme until now which looks quite similar to FeelIt and was also lacking submenus.

I came up with a working solution which might work as well for FeelIt. I'm pretty sure one could improve this solution by defining a drop parameter in config.toml. Anyone up for it?

[BUG] KaTeX outflowing on mobile devices.

Describe the bug

Long KaTeX equations may outflow from the content pad.

Expected behavior

Long KaTeX equations should be maintained in containers like code blocks.

Screenshots

If applicable, add screenshots to help explain your problem.

Build Environment

• OS: [Android]
• Theme version/commit [even with master]
• Hugo version [0.85.0]

Please try to use Hugo extended version before opening the issue.

Preview Environment

• OS: [Android]
• Browser [Edge Chromium, Chrome, Firefox Nightly]

[FEATURE] Microblogging capability

Hi! I currently use 2 different themes for different types of posts. I use FeelIt for a traditional structure blog type of posts and I use another one for a more casual and unstructured micro blogging type of posts. After seeing what you've been doing with the about theme I thought I could suggest you to add some micro blogging section or capabilities to have that kind of posts in the main list/grid view. I like the POSSE approach that is compatible with webmentions referred in Issue 19 and prefers posting first own your site and then reposting in social websites. If you feel like adding this feature to the site I guess it's up to you if this should be in it's own section (this could allow it to live in it's own subdomain) or just get integrated in the homepage.

• It would be useful if they had the social sharing buttons in the single page so we could repost easily from our sites.
• Microblog posts don't require a title or subtitle, it's mostly {{content}} , {{img resources}} and or {{link}} {{video link}}. Adding a video capability to lightgallery when bumped to v2 would probably be helpful for keeping low loadtimes and also maintain the aesthetics of the theme.

Useful references

This is my micro blog:
https://micro.sp-cy.com/en/

for now I just link to it from the blog with a "microblog" font awesome icon in the header.

This are some sites that have some kind of blog/microblog co-existence:

https://aaronparecki.com/
https://tantek.com/

I'll understand if you aren't interested in this feature since it may be out of focus and hard to implement. Much love Khusika.

[FEATURE] update the version of mermaid

Describe the feature you want

• I drew a flowchart, it can be shown correctly in the Mermaid v8.11.2 Live Editor, but when I copy the mermaid code into the {{< mermaid >}} {{< /mermaid >}} shortcode , I got nothing on hugo server preview. Then I found the flowchart can only be used in hign version https://mermaid-js.github.io/mermaid/#/flowchart?id=beta-flowcharts, mermaid released v8.11.2 3 days ago, but Feelit theme use v8.5.1. I'm not familiar with front end.I don't know how to update the version myself.Could you update the version of mermaid, please.

Useful reference

https://github.com/mermaid-js/mermaid/releases

[FEATURE] Update oEmbed API for twitter

Describe the feature you want

The built-in shortcode from hugo still using an old API which will be removed on November 23, 2021. Update it to the newest API link and merged it into oEmbed shortcode

Useful reference

• API Reference
• API Deprecation Notice

[FEATURE] Can't use Font Awesome in the [params.home.profile].subtitle

I enable the fontawesome, It can be used in the [params.home.profile].title, but it can't be used in the [params.home.profile].subtitle.

title = "<i class='fas fa-dharmachakra'></i>" #it can be shown correctly
subtitle = "<i class='fas fa-dharmachakra'></i>" # nothing

I also tried the shortcode , It just show a string :(fas fa-dharmachakra):
It's wired, I don't know why.
and fontawesome alse can't be used in the [params.header.title].logo and [params.header.title].name

[FEATURE] Better documentation

Describe the feature you want

• Better Documentation
  I want this feature to solve hours of googling to try and make algolia work in multilingual and comments with vssue to work.

[FEATURE] PWA Install button

In many instances, browsers do not even give any prompt to the user that the current site is PWA and they have the option to install it.
I suggest adding an install button to the menu (visible at all different screen sizes) that allows the users to install PWA and when it's installed to confirm that.
For example, click "Install App", after installation has been confirmed, the button resizes to a check mark with tooltip "App is successfully installed".

Method:
https://javascript.plainenglish.io/creating-a-browser-agnostic-pwa-install-button-41039f312fbe

It could be cool if the button's text (and appearance) can then be customized in config file.
Depending on the site's use case and audience, the install button's text might need to say something other than install.