Announcement Bar

[giscus[bot]]

Announcement Bar

The announcement bar module makes important thing stand out, such as news and project’s releases.

https://hbstack.dev/en/modules/enhancement/announcement-bar/

[TetraTheta]

Announcement Bar isn't showing in my site.

In config/_default/module.yml, I've added github.com/hbstack/announcement-bar like this:

imports:
  - path: github.com/hbstack/announcement-bar # lines up with other imports
  - path: github.com/hbstack/header/themes/pills

And I've put these in data/announcements/ko.yml.

plain:
  title: "현재 블로그 이전 중입니다!"
  weight: 1

But the Announcement Bar still didn't show up, I've added these 'default' value to config/_default/params.yml

hb:
  announcement_bar:
    expand_stall_threshold: 500
    interval: 5000

But still, the Announcement Bar doesn't show up. What did I miss about configuring this module?

---

PS. The documentation doesn't reflect recent default value change of expand_stall_threshold which is now 1000 instead of 500.

[TetraTheta]

Does restart Hugo server help?

I've tried to restart Hugo server, but it didn't help. Even after restarting my PC, the announcement bar doesn't show up.

Is the site language code is same as ko?

Yes.

# hugo.yml
defaultContentLanguage: ko
defaultContentLanguageInSubdir: false
languageCode: ko

[razonyang]

Unable to reproduce it, I've tested on both of monolingual site and multilingual site, work as expected, I have no idea without seeing your code.

Btw, what is the full path of the data file?

[TetraTheta]

This is very weird. I'm looking into every file that might interfere with Announcement Bar, but I couldn't find any so far.

 

Not sure if this is related or not, but I've found 수사대 in hugo_stats.json under htmlElements.tags. I definitely used phrase <수사대 조사관> in my markdown file, but shouldn't it be ignored because it is not valid HTML tag? Why is it there? I even changed the phrase in .md file to \<수사대 조사관\> but it is still there.

Is there any chance that this error causes problem with Announcement Bar?

 

Can these SCSS affect Announcement Bar?

Here is my current index.scss contents between /*! purgecss start ignore */ and /*! purgecss end ignore */.

// Font
:root {
  --hb-font-sans-serif: 'SUIT Variable', 'Spoqa Han Sans Neo', 'Noto Sans KR', system-ui, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  --hb-font-monospace: 'Monoplex KR Wide Nerd', D2Coding, 'D2 coding', Consolas, monospace;
  --hb-body-font-size: 1.1rem;
}
b, strong { font-weight: 900; }
.badge { --hb-badge-font-size: 0.9rem; }
.hb-blog-post-meta { font-size: 0.9rem; }

// Menu
.dropdown-item-icon { background-image: none !important; }
.hb-header-menus .hb-header-menu-icon { width: 1rem; }

// Taxonomy
.hb-blog-post-taxonomy-tag::before { content: "#"; }
.hb-blog-post-taxonomy-series::before { content: "§"; }

// Post style
div.hb-blog-post-content {
  > p:first-child {
    margin-top: 0; margin-bottom: 0.7rem;
  }
  > p:not(:first-child) {
    margin: 0.7rem 0;
  }
  blockquote {
    p {
      margin-bottom: 0;
    }
    
    ul:last-child, ol:last-child {
      margin-bottom: 0;
    }
  }
  img.img-fluid {
    margin: 0.5rem 0;
  }
  // Headings
  h1, h2, h3, h4, h5, h6 {
    margin-top: 2rem;
  }
  // Horizontal Line
  hr { margin: 2rem 0; }
}

//
// Shortcodes
//

// Gallery
div.hb-blog-post-content div.gallery {
  div.gallery-container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
  }
  
  figure {
    & {
      margin: 0;
    }
    
    figcaption {
        text-align: center;
        font-size: 1rem;
        color: #9999A1;
        word-break: break-word;
        min-height: 20px;
        caption-side: bottom;
        // line-height: 2;
        // padding-top: 10px;
    }
  }
}
@media (max-width: 767.98px) {
  div.hb-blog-post-content div[id^="gallery-container-"] {
    width: 100% !important;
  }
}

---

Btw, what is the full path of the data file?

hugo-hb
├ config
│ └ _default
│    └ hugo.yml
├ data
│ └ announcements
│   └ ko.yml
├ go.mod
└ package.hugo.json

[razonyang]

Not sure if this is related or not, but I've found 수사대 in hugo_stats.json under htmlElements.tags. I definitely used phrase <수사대 조사관> in my markdown file, but shouldn't it be ignored because it is not valid HTML tag? Why is it there? Is there any chance that this error causes problem with Announcement Bar?

I don't think it's related.

[TetraTheta]

I downloaded theme and added - path: github.com/hbstack/announcement-bar. This time, it shows up correctly.

I will nuke my installation and start over again with fresh theme.

Here is my current module.yml

I removed all comments for better visibility.

imports:
  - path: github.com/hbstack/announcement-bar
  - path: github.com/hbstack/header/themes/pills
  - path: github.com/hbstack/syntax-highlighting/styles/xcode-dark
  - path: github.com/hugomods/icons/vendors/font-awesome
  - path: github.com/hugomods/giscus
  - path: github.com/hbstack/blog/modules/giscus
  - path: github.com/hbstack/blog/modules/toc-scrollspy
  - path: github.com/hbstack/blog/modules/content-panel
  - path: github.com/hugomods/google-analytics
  - path: github.com/hugomods/google-adsense
  - path: github.com/hbstack/blog/modules/breadcrumb
  - path: github.com/hbstack/blog/modules/heading-sign
  - path: github.com/hbstack/blog/modules/post-nav
  - path: github.com/hbstack/blog/modules/related-posts
  - path: github.com/hbstack/meta/content
  - path: github.com/hbstack/meta/header
  - path: github.com/hbstack/meta/footer
  - path: github.com/hbstack/meta/seo
  - path: github.com/hbstack/syntax-highlighting
  - path: github.com/hbstack/back-to-top
  - path: github.com/hbstack/code-block-panel
  - path: github.com/hbstack/noscript
  - path: github.com/hbstack/progress-bar
  - path: github.com/hbstack/scrollbar

---

Update.

It was module.yml which is misconfigured. I converted recommended meta imports to YAML and commented out or replaced some of them. Now it works.

Maybe when I replaced recommended meta at first time, I may 'over-replaced' modules, like commenting out dependency of github.com/hbstack/blog which I shouldn't. It is quite surprise that site didn't break because of it...

Working module imports

imports:
  - path: github.com/hbstack/announcement-bar
  - path: github.com/hbstack/header/themes/pills
  - path: github.com/hugomods/icons/vendors/font-awesome
  - path: github.com/hbstack/blog/modules/giscus
  - path: github.com/hbstack/blog/modules/toc-scrollspy
  - path: github.com/hbstack/blog/modules/content-panel
  - path: github.com/hbstack/docs/modules/giscus
  - path: github.com/hbstack/docs/modules/toc-scrollspy
  - path: github.com/hbstack/docs/modules/content-panel
  - path: github.com/hugomods/google-analytics
  - path: github.com/hugomods/google-adsense
  - path: github.com/hbstack/back-to-top
  - path: github.com/hbstack/code-block-panel
  - path: github.com/hbstack/docs
  - path: github.com/hbstack/docs/modules/breadcrumb
  - path: github.com/hbstack/docs/modules/heading-sign
  - path: github.com/hbstack/docs/modules/doc-nav
  - path: github.com/hbstack/blog
  - path: github.com/hbstack/blog/modules/breadcrumb
  - path: github.com/hbstack/blog/modules/heading-sign
  - path: github.com/hbstack/blog/modules/post-nav
  - path: github.com/hbstack/blog/modules/related-posts
  - path: github.com/hbstack/mermaid
  - path: github.com/hugomods/katex
  - path: github.com/hbstack/bootstrap
  - path: github.com/hugomods/images
  - path: github.com/hugomods/shortcodes
  - path: github.com/hbstack/footer
  - path: github.com/hbstack/footer/modules/socials
  - path: github.com/hbstack/header
  - path: github.com/hbstack/header/modules/socials
  - path: github.com/hbstack/header/modules/search
  - path: github.com/hbstack/header/modules/theme-toggle # Required for Dark Mode
  - path: github.com/hugomods/seo/modules/alternatives
  - path: github.com/hugomods/seo/modules/base
  - path: github.com/hugomods/seo/modules/favicons
  - path: github.com/hugomods/seo/modules/open-graph
  - path: github.com/hugomods/seo/modules/schema
  - path: github.com/hugomods/seo/modules/twitter-cards
  - path: github.com/hbstack/syntax-highlighting/styles/xcode-dark
  - path: github.com/hbstack/noscript
  - path: github.com/hbstack/progress-bar
  - path: github.com/hbstack/scrollbar