janraasch/hugo-bearblog

🧸 A Hugo theme based on »Bear Blog«. Free, no-nonsense, super-fast blogging. This theme now includes a dark color scheme to support dark mode 🦉 ⬛️!

hugo-bearblog's Issues

Render bullet points on blog post list

want to make the blog post list show the “point” like this

• 2023-12-14 ZXZZZZ
• 2022-12-14 ZXZZZZ

the custom css is

    ul.blog-posts li {
        list-style-type: disc;
        display: block;
        margin: 10px 0;
    }

it dose NOT work

Improve web.dev accessibility score

Hello! Thanks for the awesome theme.

I tested the demo site using web.dev, which showed a result of 75 out of 100 in Accessibility.

What seems to be affecting the results are the lines

hugo-bearblog/layouts/_default/baseof.html

Line 7 in 6e2f054

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />

and

hugo-bearblog/layouts/partials/head.html

Line 3 in 6e2f054

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />

I'm a beginner in this whole HTML thing. How would the proposed solution affect the websites based on this theme?

Implement "signup" from bearblog.dev

Hello, thanks for great theme.

I want to use it as simple "company presentation" with no nonsense content. I would like for people to "express interes" in service by clicking "Sign up" and leaving their email/name. But instead this form doing anything after, I would just receive email with that data.

So how could I implement https://bearblog.dev/accounts/signup/ with customized fileds (Name, Email, Service interested in) with above logic ?

Thanks, A.

Missing Content for index pages

When you add content to an index page (content/blog/_index.md), the { .Content } is not included in the list page

hugo-bearblog/layouts/_default/list.html

Line 3 in 2fa45b9

{{ if .Data.Singular }}

For example, in my blog page, I have added a text with links to my /categories, /tags and /series pages to show above the generated list.

paginate in blog page

can bearblog with paginate on blog page? I post so much. and I don't know how to add paginate 😭

Light / Dark Theme Switch?

Is it possible to create a link in the nav menu or footer so visitors can choose the light or dark theme version manually?

Thanks!

Add »Toast this post«-button

»Toast this post«-button Context

On https://bearblog.dev posts & pages may be liked via a »Toast this post«-button:

See https://jan.bearblog.dev/toast/ for a live example.

Goal

Ship this theme with a ready-to-go »Toast this post«-<button> 🍞 .

Implementation Idea

We could implement a similar functionality via netlify Functions. Then, using their git-connector, we can persist the toasts-count directly into the source .md-file.

All the "Other Elements — abbr, sub, sup, kbd, mark" are stripped from the rendered HTML

Open https://janraasch.github.io/hugo-bearblog/markdown-syntax-guide/ and scroll down, it looks like this:

In fact, if you look at the HTML in the browser, all the elements have been stripped out and it's just regular <p>'s with text in them:

<p>GIF is a bitmap image format.</p><p>H2O</p><p>Xn + Yn = Zn</p><p>Press CTRL+ALT+Delete to end the session.</p><p>Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.</p>

Are you planning to port this theme to WordPress?

I really like your theme, but I'm not familiar with Hugo and I'm currently using WordPress, so I was wondering if there are any plans to develop a WordPress theme based on the bearblog theme?

og:title is empty

home page

the content field is empty

Hide draft posts

Posts with draft = 1 shouldn't be rendered in the blog post list.

Is there a way to default to dark mode?

Is there a way to default to dark mode? Preferably a setting to place into hugo.toml?

Does this blog supports latex equations?

Hello and first of all, thanks for the work! Very nice and minimal blog.

I have a simple Q: So after going through the website and samples, I still don't know if it can write latex equations. In markdown usually we are allowed to embed them but not sure if it is the case here.

feat: pagination support

Hey @janraasch

Not sure what's your current vision for hugo-bearblog, but it would be nice if there was support for pagination. What I mean by this would be to divide posts by sub-index pages on compile time, depending on how much posts exist on the folder.

For example, everyday I read and publish an article on my blog as a reference for readers, however the index page starts getting too messy while days pass by: https://joaomagfreitas.link/reads/

Let me know what are your thoughts on this, I can find some time to work on it!

Add Support for Mermaid.js Diagrams

Feature Request: Mermaid.js Support

Integrate Mermaid.js for enhanced diagramming capabilities within blog posts.

What + Why:

• Mermaid.js is a JavaScript tool for creating and dynamically modifying diagrams and charts via Markdown-inspired text definitions.
• It would enable users to embed complex diagrams directly into their Hugo Bearblog posts, enhancing the content's visual and instructional quality.
• Adds a powerful tool for technical bloggers and educators who need to include flowcharts, sequence diagrams, class diagrams, etc., in their posts.
• Keeps the blog visually engaging and informative without sacrificing speed or simplicity.

Bridge, crossposting tools for Publish0x

I realize that bearblog is meant to be simple, which is great! I have become a constant user of bearblog.dev. It's just right for me. No muss, no fuss, no random unnecessary features!

Which brings me to my idea. I'd like to get publishing on Publish0x just for fun. It would be cool if I could post on bearblog, click a button and have that same content posted on Publish0x.

Of course I'm thinking in term of me doing this. I might be the only user, ever.

I'm interested in ideas anyone might have for how this might be done painlessly. For example, if there's talk of/is an API, I could help flesh that out and use it for this little project.

And if all this comes to nought, that's fine too. I always have copy and paste.

abbr, sub, sup, kbd, mark don't seem to work

In the demo (https://janraasch.github.io/hugo-bearblog/markdown-syntax-guide/) the last section seems to highlight features that don't seem to work. I don't know if it's intended or not and I can't figure out whether that's a bug or those features are just not supported.

Use *blog* as startpage

I'd like to skip the usage of Home and only use the Blog feature. Is it possible to disable to Home page?

Conflicting colors for code blocks on dark vs on light

I'm using the lovelace style for syntax highlighting. It looks great on a light theme:

But on a dark theme the same looks unreadable:

From what I can tell, Chroma styles are supposed to control the background color as well as all the font colors, but the bearblog theme is interfering. I've tried to get the theme to get out of the way, by removing bits of CSS that look like they they're probably causing problems, but it doesn't quite fix the issue all the way, and I also don't love having a light theme code block on a dark theme page.

diff --git a/layouts/partials/style.html b/layouts/partials/style.html
index 6d1a66b..b1798bf 100644
--- a/layouts/partials/style.html
+++ b/layouts/partials/style.html
@@ -64,11 +64,10 @@

   code {
     padding: 2px 5px;
-    background-color: #f2f2f2;
   }

   pre code {
-    color: #222;
+    color: reset;
     display: block;
     padding: 20px;
     white-space: pre-wrap;
@@ -136,14 +135,6 @@
       color: #8cc2dd;
     }

-    code {
-      background-color: #777;
-    }
-
-    pre code {
-      color: #ddd;
-    }
-
     blockquote {
       color: #ccc;
     }

I've wondered if in some sense this is just Hugo and Chroma's fault for not supporting light and dark themes more robustly, but I'm also just wondering if there's a way to adjust the Bear theme to do the right thing.

I've also looked for better Chroma styles, but it seems impossible to find a style that's readable in both light and dark themes.

Features for code blocks

Please consider a “Copy” function for code blocks. And perhaps a way to shorten code blocks on screenview for long code snippets.

I love the BearBlog theme.

Mismatched markdown bracket in code preview

With markdown code preview, when adding an icon inside a link, the brackets are mismatched:

Source: https://nogithub.codeberg.page/#how-to-ask-others-to-not-share-my-code-on-github

CSS rule typo: word-wrap

The body element has the rules

word-wrap: break-word;
overflow-wrap: break-word;

hugo-bearblog/layouts/partials/style.html

Line 9 in 2fa45b9

word-wrap: break-word;

However, there is no such rule as word-wrap. The correct rule name is word-break.

I did not submit a PR because I am not sure what the intended goal is. MDN says the break-word value for word-break is deprecated and

Has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

external styles file

Currently, the theme provide inline styles that will be downloaded on each page. Why not provide styles as an external asset, so it can be cached by the browser?
With that, when you navigate through pages/posts the browser will not need to download again. It will be ~1.3kb less on each page/post request.

HTML5 validation failures

Just having a play with this theme (thanks for your work, it looks awesome!) and spotted a couple of minor things are currently being flagged by the W3C HTML Validator:

1. It's apparently invalid to use http-equiv for any HTTP header, only those listed in the Pragma directives here
2. Use of the itemprop attribute requires the itemscope and itemtype to be defined.

I'm happy to pop some PRs up for these but I also wondered if you'd like the idea/would accept a PR to add a Github Action to automatically validate the build of the example site with the checker going forward?

Is it possible to use LaTeX with KaTeX?

I'm using this great theme, hosting it on Gitlab Pages. I would like to use KaTeX to display LaTeX formulas. By its minimalistic nature, it seems reasonable that it is not provided out of the box for bearblog.

So, following the KaTeX documentation and the example from the Beautifulhugo theme, I tried to include

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-t5CR+zwDAROtph0PXGte6ia8heboACF9R5l/DiY+WZ3P2lxNgvJkQk5n7GPvLMYw" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-FaFLTlohFghEIZkw6VGwmf9ISTubWAVYW8tG8+w2LAIftJEULZABrF9PPFv+tVkH" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-bHBqxz8fokvgoJ/sc17HODNxa42TlaEhB+w8ZJXTc2nZf1VgEaFZeZvT4Mznfz0v" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

directly in my post, but it didn't seem to work. Writing $e^x$ is still displayed exactly as such and not processed by KaTeX.

I must be doing something wrong. I'm not yet very knowledgeable about Hugo or javascript, so I would like to ask your opinion as to what is the easiest way to enable this in bearblog?

H1 only shown when content in blog

The H1 title is only rendered when all blog content is in the hardcoded blog folder. Title is hidden if you use posts or any other name.

Darkmode CSS overwriting Syntax Highlighting

I'm not a web developer, just a backend developer. So apologies for any stupidity or bad terminology here.

I was migrating my blog to bearblog and I'm having an issue with the syntax highlighting. Specifically I'm having issues with punctuate being rendered in black, instead of the color that chroma monokai is setting.

Looking at this in firefox it appears if I'm reading this correctly to be an issue of pre code from @(prefers-color-cheme: dark).

Version Info

Bearblog Commit: 6408d03

$ ./scripts/hugo version
hugo v0.83.1 darwin/amd64 BuildDate=unknown

Create Mutliple Blog Instances

Hi there,

Is it possible to make multiple blog instance with different rules?

As it stands now, when I make a second blog, the tags transfer over. I would like to be able to have separate tags for a second blog. I would also like for my second blog to order the posts in ascending order instead of descending.

Look forward to your response. Thanks!

Scrollbar moves layout a bit

https://janraasch.github.io/hugo-bearblog/blog/

After clicking "post": Markdown Syntax Guide

The entire page shifts slightly to the left (or towards both sides).

It appears as though the page experienced a brief flash.

Use blog list page as root / home / start page

Originally posted by @alabhyajindal in #2 (comment)

---

Hi!

Thanks for the great theme!

I'm having a strange problem. I followed your instructions here to use the blog list page as home. The issue is that sometimes I get a blank page on the home section and sometimes I get the blog list. It's completely random.

I don't have a content/_index.md file and my blog/_index.md contains:

+++
title = "Blog"
url = "/"
[menu]
  [menu.main]
    identifier = "blog"
    weight = 1
+++

My website is at https://alabhyajindal.com and the source code is at https://github.com/alabhyajindal/aj, if you want to take a look.

Change code colour schema?

I'm showing some code in my blog but especially strings are hard to read, is it possible to change the colour schema?

Home page and Blog page doesn't work with baseURL configuration

What

When i hosted hugo with github pages
as document's recommended we must config baseURL on config.toml because github uses https://<USERNAME>.github.io/<REPOSITORY_NAME> for a project repository.

baseURL = 'https://my-git-username.github.io/blog/'
languageCode = 'en-us'
title = 'My Blog'
theme = 'hugo-bearblog'

the hosted example also had this issue
https://janraasch.github.io/hugo-bearblog/

Reproduce

1. Visit https://janraasch.github.io/hugo-bearblog/
2. Click to "Home" or "Blog" then it causes 404

Blogs go to localhost:1313 on server

My website: https://blog.t1c.dev/

Upon going to https://blog.t1c.dev/blog/ and clicking on one of the blogs, it literally enters the address http://localhost:1313/rose-pine/ instead of https://blog.t1c.dev/online/ .

how to disable Dark mode

i modify some custorm CSS，but it look terrible in dark mode。

how can i disable dark mode？

Remove Line Under Links

Hello. I'm using your theme with my site and it looks great!

But do you know how to remove line under links to make it look nicer? Just like original Bear Blog? Thanks.

Hardcoded ref to /blog

The theme has a hardcoded ref to /blog

hugo-bearblog/layouts/_default/list.html

Line 6 in c9b3461

<a href="{{ "/blog" | relURL }}">Remove filter</a>

When you use a different section name (like the more or less default 'posts', the link will lead to a 404 page.

Perhaps make this a config parameters or make it dynamic?