Hung's Notebook

Test drive Bear Blog Pro

Today I purchased a yearly subscription for Bear Blog Pro. I have been living just fine without a subscription so far. however, I am tempted because of the one-off purchase offer. Now that you really come across such a business model where you can pay and on the piece of software until you die. After thinking about it for a long time, I decided to test drive it first with the yearly subscription. I also hope to blog more and make my money back :)

This post will be kept updated with the features of the Bear Blog Pro that I am using.

Media Upload

Before this I make use of two external media uploaders (ibb and a GitHub repo) to embed my images into my blog posts. They work just fine even though they are indeed clunky. With a subscription against directly uploaded my images into the blog posts. Bear Blog will upload the image to a Digital Ocean bucket and embed the link into the post. There is also a dashboard showing all of the images uploaded. It is a minor convenience, but a significant gain overall since media upload is definitely the feature you will use the most on this side.

Subscribers snippet

Turn out I just need to add a built-in Jinja element to the footer.

#### Subscribe to my blog

{{ email_signup }}

The emails of the subscribers are captured to a separate dashboard (which is just a glorified text file). I can just copy and paste the file and send out my latest post to the subscriber. It was not the best way to do it, but Bear Blog was not designed to be a professional content delivery platform anyway.

Dark Theme

Following this post, I followed 3 steps:

  1. Modify my CSS theme files so that it contains adaptive color for light and dark. My base and light theme is Archie, and I use Nord for the dark theme.
:root {
  --width: 720px;
  --font-main: 'iA Writer Quattro', monospace;
  --font-secondary: 'iA Writer Quattro', monospace;
  --font-scale: 0.9em;
  --background-color: light-dark(#fff, #2e3440);
  --heading-color: light-dark(#232333, #5e81ac);
  --text-color: light-dark(#232333, #d8dee9);
  --link-color: light-dark(#232333, #5e81ac);
  --visited-color: light-dark(#232333, #81a1c1);
  --main-color: light-dark(#ff0000, #00ffff);
  --code-background-color: light-dark(#f2f2f2, #4c566a);
  --code-color: light-dark(#222, #e5e9f0);
  --blockquote-color: light-dark(#222, #e5e9f0);
}
  1. Add a toggle button in my Nav bar
<a id="preferdark" onclick="switchMode('dark')" style="display: none;"> 🌙 </a> <a id="preferlight" onclick="switchMode('light')"> ☀️ </a>
  1. Add 2 scripts for the toggle button in the header directive:
<script>
  (function() {
    const savedTheme = localStorage.getItem('theme');
    const htmlElement = document.documentElement;
    let initialTheme;

    if (savedTheme) {
      initialTheme = savedTheme;
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      initialTheme = 'dark';
    } else {
      initialTheme = 'light';
    }

    htmlElement.style.setProperty('color-scheme', initialTheme);
  })();
</script>
<script>
  function switchMode(mode) {
    const htmlElement = document.documentElement;
    const preferDarkLink = document.getElementById('preferdark');
    const preferLightLink = document.getElementById('preferlight');
    if (mode === 'dark') {
      htmlElement.style.setProperty('color-scheme', 'dark');
      preferDarkLink.style.display = 'none';
      preferLightLink.style.display = 'inline-block';
      localStorage.setItem('theme', 'dark');
    } else {
      htmlElement.style.setProperty('color-scheme', 'light');
      preferDarkLink.style.display = 'inline-block';
      preferLightLink.style.display = 'none';
      localStorage.setItem('theme', 'light');
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    const currentAppliedTheme = document.documentElement.style.getPropertyValue('color-scheme');
    if (currentAppliedTheme === 'dark') {
        document.getElementById('preferdark').style.display = 'none';
        document.getElementById('preferlight').style.display = 'inline-block';
    } else {
        document.getElementById('preferdark').style.display = 'inline-block';
        document.getElementById('preferlight').style.display = 'none';
    }
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    prefersDark.addEventListener('change', (event) => {
      if (!localStorage.getItem('theme')) {
        if (event.matches) {
          switchMode('dark');
        } else {
          switchMode('light');
        }
      }
    });
  });
</script>

And voilà, it's done. Now, it is not perfect. The color of the dark theme does not look good to me right now (probably because it was not crafted by an expert), especially for the code block. But I can live with that for now.

#post #thought