hugo-landing-accordion is a Hugo theme hosted on Codeberg that structures a landing page as collapsible accordion sections and ships with an embedded, hashtag-filterable Mastodon timeline widget.
What is hugo-landing-accordion?
hugo-landing-accordion is a Hugo theme maintained by Mònica Ramírez Arceda under the VaDeCodiNet namespace on Codeberg. It takes standard Hugo content — markdown pages created through the included archetypes — and renders a static landing page whose sections open and close as accordion items. The repository contains 33 commits on one branch, totals 53 MiB, and its codebase is 61.9% HTML, 27.4% SCSS, 5.7% JavaScript, and 5% Shell, reflecting the theme layouts, SCSS styling, and a small npm postinstall script.
Key Features
- Accordion section layout — Landing page sections are presented as collapsible accordion items driven by the theme's Hugo layouts, instead of one continuous scroll.
- Mastodon timeline integration — Bundles the mastodon-timeline component at release 4.8.0, which adds support for the profile_hashtag timeline type.
- Hashtag filtering — The layouts allow filtering a Mastodon profile timeline by a hashtag, per the commit "Allow filtering profile timeline by a hashtag".
- Example site — An exampleSite directory with sample content and configuration is included for local preview and as a starting point.
- Hugo archetypes — archetypes/ defines the content scaffolding so new sections match the theme's expected front matter and structure.
- SCSS styling pipeline — Styles are authored in SCSS, with a .stylelintrc.js that ignores the generated assets/sass/main.css output.
- Pre-commit and linting configs — Ships .markdownlint.yaml, .pre-commit-config.yaml, .prettierignore, and .stylelintrc.js so contributions stay consistent.
- Screenshots — An images/ directory contains screenshots of the theme, added in a dedicated "Add screenshots" commit.
Who is it for?
- Mastodon users building a personal site — they can embed their own profile timeline on the landing page and filter it by a hashtag to highlight a specific topic.
- Hugo theme developers — they get a theme skeleton with archetypes, example content, and linting tooling to extend or fork.
- Fediverse-oriented projects — teams that want a landing page surfacing live Mastodon activity without relying on a third-party widget service.
What can you do with it?
- Personal landing pages: split an about page into accordion sections and embed a Mastodon timeline filtered by hashtag to feature posts from a community or event.
- Product or project pages: organize features, FAQ, and updates as collapsible sections while showing a Mastodon feed in the same layout.
- Theme experimentation: run the exampleSite locally, modify the SCSS, and use the pre-commit hooks to build a custom Hugo theme.
How does hugo-landing-accordion work?
After cloning the repository, the npm-postinstall.sh script runs through the package.json postinstall hook to pull in the mastodon-timeline component at release 4.8.0. Site content is added as markdown using the provided archetypes, Mastodon profile and hashtag settings are wired up through hugo.yaml, and the exampleSite directory lets you preview the result before deploying the generated static site.
FAQ
Does hugo-landing-accordion include a Mastodon timeline?
Yes. The theme bundles mastodon-timeline release 4.8.0, which supports the profile_hashtag timeline type, and the layouts allow filtering a profile timeline by a hashtag.
Is hugo-landing-accordion free to use?
The repository is hosted on Codeberg and includes a LICENSE file, consistent with an open-source release; no pricing or paid-tier information appears anywhere on the repository page.
What tech stack does hugo-landing-accordion use?
It is a Hugo theme whose repository is 61.9% HTML, 27.4% SCSS, 5.7% JavaScript, and 5% Shell. Styling is written in SCSS, and the Mastodon timeline component is installed as an npm dependency.
