DEV Community: Atsushi

Built a Wizard App to Create Code Review Guidelines for Your Company or Team

Atsushi — Mon, 19 Jan 2026 02:47:34 +0000

When speaking about CodeRabbit, I often emphasize the importance of code review guidelines. Code review guidelines represent a shared understanding of how code reviews should be conducted within a team or organization.

Without such guidelines, the following issues tend to arise:

It is unclear what perspectives to use when reviewing
Review perspectives vary from person to person
Review criteria change depending on mood or circumstances

To prevent this kind of inconsistency, code review guidelines are essential.

A helpful resource when creating code review guidelines is Code Review Developer Guide | google-eng-practices-ja. This is a guideline published by Google and serves as the official explanation of Google’s code review process and policies. Note that the original repository has been archived, so it may not reflect the latest practices.

I usually recommend reading this guide and adapting it to your own organization, but creating guidelines from scratch is time-consuming. To address this, I built a web application that allows you to create your own code review guidelines in a wizard-based format, using Google’s guidelines as a foundation.

About Code Review Guideline Creator

The technologies used in Code Review Guideline Creator are as follows:

Cloudflare Workers
React Router
Tailwind CSS

The source code is open source and released under the MIT License.

goofmint/review-guideline-creator

Types of Guidelines You Can Create

With Code Review Guideline Creator, you can create the following two types of guidelines:

For reviewers (those who review code)
For reviewees (those whose code is reviewed)

The guidelines clarify what reviewers should focus on during reviews and what reviewees should pay attention to before submitting a pull request.

About the Wizard

The process is simple: you answer a series of questions. Default values are provided wherever possible.

The questions are defined in Markdown files, which are loaded and reflected in the wizard.

By editing these files, you can customize the wizard itself. Note that there are around 60 questions, so the process is relatively extensive.

Data Storage

No data is stored on the server. Intermediate progress is saved in SessionStorage and used to restore state on page reload. There is no authentication mechanism.

Supported Languages

The default language is English, and Japanese is also supported. Additional languages can be added by providing new wizard files.

AI Code Review

Google’s code review guidelines do not cover AI-assisted code reviews, so I added dedicated sections for this. You can define how AI code review tools (such as CodeRabbit) should be handled for both reviewers and reviewees.

About the Generated Output

The completed guidelines can be downloaded as Markdown or PDF files. However, since the output directly reflects the input answers, it may feel somewhat hard to read as-is.

To address this, the app also outputs a prompt for LLMs. By copying this prompt and pasting it into tools like ChatGPT or Claude, you can generate a cleaner and more readable coding guideline.

Summary

Having code review guidelines helps reduce stress for those new to code reviews and helps pull request authors prepare mentally before submitting their work.

To improve team productivity and psychological safety, I encourage you to give it a try.

Code Review Guideline Creator

I Developed a Game Called “Bug Sniper” for Finding Bugs in Code

Atsushi — Wed, 26 Nov 2025 08:11:31 +0000

Recently, I released the code-review gamification project “Code Review Game.”

This time, I created another game called “Bug Sniper,” where the goal is to find bugs hidden in code.

https://bug-sniper.goofmint.workers.dev/

Code Review Game was originally designed for conference booths so that attendees could give it a try. However, it ended up becoming something that required fairly serious review skills. While this was useful from a learning perspective, it required a PC and wasn’t something you could casually enjoy.

With that in mind, I created Bug Sniper as a more lightweight, pick-up-and-play experience.

How to Play Bug Sniper

Bug Sniper is a game where you keep finding bugs in code for 60 seconds straight.

Each problem contains around one or two bugs.

For example, consider the following code:

function getLastElement(arr) {
  // Initialize variables
  const index = arr.length;
  return arr[index];
}

Even though the function name is getLastElement, it contains a bug where it fails to retrieve the final element in the array. The correct code should use const index = arr.length - 1;.

Problems like this are provided across Levels 1–3. Problems appear randomly. Consecutive correct answers create a combo and boost your score. A mistake costs -1 point. After a correct answer or a miss, you can skip to the next problem.

When the Game Ends

The game automatically ends after 60 seconds. At the end, you’ll see a screen like this. Results are stored in Cloudflare D1.

Once the score is saved, you enter a name and get feedback from the LLM.

Here's an example of the LLM’s evaluation. It’s... not perfect.

When you share your result, an OGP image like the following is generated.

Architecture

This project also heavily relies on Cloudflare. It uses:

Cloudflare Workers
- Frontend built with React Router + TailwindCSS
Cloudflare R2
- For storing OGP images
Cloudflare D1
- For ranking data

The LLM used for evaluating results is Gemini 2.5-Flash.

Supported Languages

As of now, the following languages are supported:

JavaScript
Python
PHP
Ruby
Java
Dart

Bug Explanations

When you correctly identify a bug, a toast notification appears with an explanation like this:

You may not have time to read it mid-game, but it can be useful when you click something by intuition.

Rankings

A ranking system—missing from the previous Code Review Game—has been added. You can view rankings from the past week, either overall or per language.

Development Notes

I again used Claude Code on the web for development. Using the original $1,000 coupon, I think the total cost was around $60, just like last time (the interface no longer shows exact usage, so the exact amount is unknown).

Code reviews for generated PRs were handled, as always, by CodeRabbit. Since CodeRabbit is free for public repositories, it's perfect for individual developers.

Here is an example pull request. Review locales (English, Spanish, Japanese, Chinese, etc.) can be switched in the settings.

feat: Implement game logic with random problem selection by goofmint · Pull Request #5 · goofmint/BugSniper

For Streamers

Someone politely asked for permission to stream the previous Code Review Game. I’m not sure whether Bug Sniper will get similar requests, but to be safe, here are the guidelines:

Streaming is fully allowed
Monetized streams are also allowed
If possible, please let me know on X
And if you could mention CodeRabbit even a little, it would make me very happy

Conclusion

Bug Sniper will be available for attendees to play at future CodeRabbit booth exhibitions. It's far more casual than Code Review Game, so please give it a try.

Bug Sniper

Gamifying Code Reviews

Atsushi — Wed, 26 Nov 2025 07:57:09 +0000

As AI-generated coding continues to increase, code reviews are drawing more attention than ever. CodeRabbit provides AI-powered code reviews, and this trend is giving it strong momentum.

That said, there are not many people who can confidently say they always deliver proper code reviews. High-quality reviews require a clear understanding of requirements and the ability to point out issues that are not explicitly written in the code.

To address this, I built a simple game where you can experience code reviewing.

About the Game

You can access the game here:

Code Review Game - Choose Your Language

Currently, C, Flutter, JavaScript, and Python are available. The game supports both English and Japanese.

How to Play

Each language currently offers Levels 1 through 3. The review screen shows three pieces of information:

Requirements
Code
Hints

Reviewers write feedback based on these inputs, following best practices for the selected language.

Clicking on “Requirements” inserts a Markdown heading. Clicking a line of code inserts that line number.

Evaluation

Evaluation criteria are predefined. The game compares those criteria with your actual review text using the Gemini API, and receives a JSON response containing the score, strengths, improvement points, and more.

Scoring 70 or above unlocks the next level.

Sharing

You can share your review results on X (Twitter). The evaluation JSON is stored in Cloudflare KV, and the generated OGP image is stored in Cloudflare R2.

The app itself has no authentication, so the share URL is simply a UUID-based link. Anyone who knows the URL can access it — which is fine, given that there is no personal data and the design assumes posting results publicly on X.

Architecture

This project relies heavily on Cloudflare.

Framework Remix
Runtime Cloudflare Workers
Data Storage Cloudflare KV
OGP Image Storage Cloudflare R2

For AI workflows, Claude Code on the web is used for coding, while Gemini API handles review evaluation.

Development Notes

Claude Code on the web provided a coupon this time, so I tried it out. The total was reduced from $1,000 to $936, meaning the project effectively cost around $64.

https://claude.ai/code

Pull request reviews were performed using CodeRabbit.

There was only one instance where development got stuck and I had to discard a branch. Otherwise, I iterated through PR creation → documentation → review → development → review, and the total cost stayed within the $60–64 range.

Experience Using Claude Code on the Web

It works similarly to the GitHub Actions version, but running everything in the cloud is extremely convenient. Once you give instructions, coding continues even if you close your laptop. Claude will progress all the way to just before PR creation, so after reaching a stable point, you create the PR, fetch it locally, and verify.

Ideally, I’d like it to run E2E tests with something like Playwright before opening the PR, but it seems the cloud environment cannot run those tests. As a result, E2E tests must be done locally, which can be stressful when things don’t run correctly (and CodeRabbit ends up reviewing a broken PR).

As long as development is spec-driven, this workflow works reasonably well—especially for small projects like this one.

Challenges

This game was initially built quickly for visitors at the FlutterKaigi booth, but its current design is difficult to play on mobile (due to free-text entry and other constraints). You need to sit down at a PC browser to play properly, which is a fundamental issue.

Conclusion

Still, being able to build a fully playable game in less than two days — and one that even works with generative AI — was a great outcome. It also serves as practice for code reviewers (or so I think).

Let's try!

The source code is available here:

https://github.com/goofmint/ReviewGame

AI Code Reviews | CodeRabbit | Try for Free

What Developers (Like Me) Really Wanted

Atsushi — Sun, 25 May 2025 09:13:07 +0000

You’ve probably seen that famous illustration titled “What the customer really needed.”

It’s a classic. It humorously captures how a customer’s true needs often get lost in translation as the request passes through layers of sales, project management, and engineering.

It’s not just about system development—it’s something many of us have felt at some point.
That “this isn’t what I meant” feeling? Very relatable.

Lately, with the generative AI boom, I’ve been having a similar feeling.
This post is my way of processing that unease.

The Co-Pilot That Took Over the Cockpit

GitHub Copilot officially launched in June 2022. Just two years ago.
Back then, it felt like an extension of autocomplete. Now? It’s almost spooky how accurately it predicts the code I want to write. Tools like Cursor are also incredibly helpful—they don’t just complete code, they suggest changes in similar places too. It’s magic.

And yet, the name is “Copilot.” As in, not the one in command.
It's a tool meant to assist, with the developer making the final decisions. You’re supposed to evaluate its suggestions, tweak as needed, and make the call.

But as these tools improve, it starts to feel like all I’m doing is pressing Tab and Enter repeatedly.
It’s less coding, more like playing a clicker game. Is this the future of development? (I hope not.)

Then came tools like Devin—an AI coding agent that creates Issues, writes the code, and even opens a PR for you. All that’s left is to review and approve. Even that first review can be done by CodeRabbit or some other AI.

Devin in the pilot seat, CodeRabbit as copilot—and the human dev? Sitting in the back, watching it all play out. The future feels less like flying a plane and more like supervising a simulator.

I Never Wanted to Be the Boss

Looking back, I was actually a pretty decent employee.
I joined a few startups, climbed the ladder, and even became a manager. But as the team grew, I found myself managing people and tasks instead of coding or setting up infrastructure.

And then it stopped being fun. So I quit.

Some of those startups went public, and sure, I could have cashed in had I stayed.
But truthfully, I wouldn’t have lasted those extra years.
I wasn’t built to manage people. I’m a developer. A pilot, not a flight director.

That’s why today’s LLM-powered coding feels off. It feels like handing over the controls.
I use Copilot, Cursor, and tools like Roo. They’re fantastic—I genuinely rely on them.
When I’m offline, like on a plane, I freeze up. Because they can't support me. That’s how hooked I’ve become.

Still… I don’t want to give up the joystick entirely.

Coding Has Changed Before

In the old days, people wrote programs in machine code or assembly (and before that, Tape?).
Then came higher-level languages like BASIC, Fortran, and C.
I bet the old-school assembly folks scoffed at these “toys” at first.

Same thing happened with PHP (“just for the web”) and JavaScript (“not for team development!”).
But those languages lowered the barrier to entry, exploded the number of programmers, and ushered in a new era of programming.
Now, everyone learns to code.

And something similar is happening again—this time with AI coding.
Replit’s CEO famously said “learning to code is becoming pointless.”
Microsoft laid off over 800 software engineers. Salesforce said it won’t hire new engineers in 2025.
It’s not that programmers are obsolete—it’s that software creation is becoming even more accessible, possibly without programming as we know it.

How? Through requirements definition and documentation.
With solid specs, AI can write the code.
Devin does exactly this—file an issue, generate code, submit a PR.
All we need to do is review and approve.

Where have we seen this before?
Oh right, SI (System integration) companies.

Many SI companies don’t have in-house developers.
They handle the specs and docs, then outsource the code.
Whether it’s AI or a subcontractor writing the code—it’s the same setup.

I don’t hate writing documentation. But if that becomes my only job? No thanks.
Writing flight plans while an AI flies the route, and I sit in HQ watching the dashboard?
Is that what engineers are supposed to become?

What I Actually Wanted

So what did I, the developer, really want?
After some thinking, I realized: KITT, from Knight Rider.

KITT is an AI that assists Michael Knight—the real driver.
KITT supports him with information, advice, and warnings.
It respects Michael’s judgment. They’re a team.

KITT doesn’t hijack the wheel.
It helps. Suggests. Sometimes drives, when told.
That’s the kind of coding partner I want.

Less Copilot. More buddy.

The Scary Thing About Capitalism

Let’s say AI and robots do take over our jobs.
Does that mean we’re free to enjoy life?

Historically, Greek citizens had slaves to handle labor, freeing them to pursue politics, philosophy, and the arts.
Slavery was—horrifyingly—an economic foundation in that era.
So if AI and robots are the “slaves” of today, who benefits?

Not us, the engineers.

AI and robots become the slaves of capitalists.
They produce value. Companies reap the profits.
We? We face unemployment and lower wages.

I’m not saying AI is evil. It’s not going away.
It will boost productivity. It will get more people involved in software development.

The real question is:
What will we, as humans, do with the time it frees up?
If everything becomes “that’s AI-able,” we lose value. We lose jobs.

From an engineering perspective, AI coding is just rebuilding existing knowledge in new forms.
Like reinventing the wheel—but smarter.

But creating something new? Inventing entirely new value or technology?
That’s still our job.
(Probably. At least for now.)

Closing Thoughts

Now that I’ve put this into words, I feel lighter.
The unease I had? It’s made sense.

AI evolves fast.
Even the “only humans can do this” work could be automated soon.
Docs? They might not survive another year.

But that’s what makes this era so interesting.
The dot-com bubble in the '90s.
Web 2.0 around 2005.
The smartphone revolution in the 2010s.
And now? Generative AI.

In the middle of these massive shifts, the question is:
What will we create next?

It’s an exciting time to be alive.

NodeBB i18n: Server-Side and Client-Side Implementation

Atsushi — Sat, 05 Apr 2025 09:24:28 +0000

Internationalization is a crucial aspect of NodeBB plugin development (NodeBB supports 49 languages as of this writing). This article explains how to implement internationalization in NodeBB, covering both server-side and client-side aspects.

Basic Structure of Internationalization

NodeBB's internationalization is implemented with the following structure:

plugins/
  nodebb-plugin-caiz/
    languages/
      en-US/
        caiz.json
        global.json
      ja/
        caiz.json
        global.json
    library.js
    plugin.json

Translation files are placed in subdirectories named with language codes (e.g., en-US, ja) within the languages directory. Translation files are in JSON format, consisting of key-value pairs.

The language codes available in NodeBB can be referenced from the folder names in the public/language directory of the NodeBB repository. For example:

en-US: American English
en-GB: British English
ja: Japanese
zh-CN: Chinese (Simplified)
zh-TW: Chinese (Traditional)

These language codes are based on ISO 639-1 (2-letter language codes) and ISO 639-2 (3-letter language codes). Additionally, country codes can be added with a hyphen to represent regional differences (e.g., en-US, pt-BR).

Plugin Configuration Update

The most important aspect of internationalization implementation is the plugin.json configuration:

{
  "id": "nodebb-plugin-caiz",
  "name": "NodeBB Plugin for Caiz",
  "description": "NodeBB Plugin for Caiz",
  "version": "1.0.0",
  "library": "./library.js",
  "languages": "languages",
  "scripts": [
    "static/client.js"
  ]
}

Key settings:

languages: Specifies the directory for translation files (in this example, the languages directory)
scripts: Specifies client-side JavaScript files

When the languages property is set, NodeBB automatically loads translation files from the specified directory. Each language's translation file must be placed in a subdirectory named with its language code.

Example translation file (languages/ja/caiz.json):

{
  "reading": "読み込み中",
  "create_community": "コミュニティを作成",
  "create_community_message": "新しくコミュニティを作成する",
  "community_name": "コミュニティ名",
  "community_description": "コミュニティの説明",
  "submit_create": "作成",
  "follow": "フォロー中",
  "unfollow": "未フォロー",
  "following": "フォローする",
  "unfollowing": "フォロー解除する",
  "follow_success": "フォローしました",
  "unfollow_success": "フォロー解除しました",
  "error.generic": "エラーが発生しました"
}

With this file, you can retrieve text using [[caiz.reading]].

Client-Side Implementation

Client-side internationalization is implemented using the translator module. Since it's not very user-friendly by default, it's better to retrieve it asynchronously:

async function getTranslate() {
    return new Promise((resolve, reject) => {
        require(['translator'], resolve);
    });
}

document.addEventListener('DOMContentLoaded', async () => {
    const translator = await getTranslate();
    const messageKeys = [
        'caiz:reading',
        'caiz:follow',
        'caiz:unfollow',
        'caiz:follow_success',
        'caiz:unfollow_success',
        'caiz:error.generic',
        'caiz:unfollowing',
        'caiz:following',
    ];

    const messages = Object.fromEntries(
        await Promise.all(
            messageKeys.map(key => 
                new Promise((resolve) => 
                    translator.translate(`[[${key}]]`, (t) => resolve([key, t]))
                )
            )
        )
    );

    const getText = (key) => messages[key] || key;
});

This code performs the following operations:

Asynchronously loads the translator module
Defines a list of required translation keys
Uses translator.translate to get translations for each key
Stores translations as an object
Retrieves translations using the getText function

As a result, you can get the i18n result using getText:

getText('caiz:reading'); // 読み込み中

Usage in Templates

In template files (*.tpl), translations are used as follows:

<div class="modal-header">
    <h5 class="modal-title">[[caiz:create_community]]</h5>
    <button type="button" class="close" data-dismiss="modal">
        <span>&times;</span>
    </button>
</div>

Important Considerations

Translation Key Naming Convention
- Use the translation file name as a prefix (e.g., caiz: for caiz.json)
- Use hierarchical structure for organization (e.g., error.generic)
Translation Loading Timing
- Server-side: During application startup
- Client-side: During page load
Error Handling
- Fallback processing when translations are not found
- Debug support through log output

Summary

NodeBB's internationalization is primarily configured by specifying the translation file location in the languages property of plugin.json. By properly designing the translation file structure and maintaining consistent naming conventions, you can achieve maintainable internationalization.

goofmint/caiz

Creating new categories using plugins in NodeBB

Atsushi — Sat, 05 Apr 2025 06:02:53 +0000

I have implemented a function to create new categories using NodeBB plugins. This article explains how to implement this.

Purpose

As a forum for developers that I am currently developing, I would like to be able to handle the root category as a community. For example, if you create a root category such as JavaScript and PHP, you will be able to access it with a URL such as https://example.com/javascript.

Each root category (community) has three groups.

Administrator
Member
Ban (blacklist)

These groups are used to set category permissions.

Implementation Overview

The implemented functions are as follows.

Displaying the modal for creating communities
WebSocket communication from the client side
Creating categories on the server side
Setting permissions
Adding subcategories

Adding a template

First, we'll add a template for displaying the modal for creating communities. This will be placed in the templates directory as a .tpl file.

<div class="modal fade" id="community-create-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Create a community</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="community-create-form">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" name="name" required>
          </div>
          <div class="form-group">
            <label for="description">Description</label>
            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="submit-community-create">Create</button>
      </div>
    </div>
  </div>
</div>

This template uses the Bootstrap modal component. The modal is identified by id=‘community-create-modal’ and the form input values can be obtained by the names name and description.

Client-side implementation

On the client-side, we will add JavaScript and CSS (Less). These are specified in plugin.json and loaded.

{
  "id": "nodebb-plugin-caiz",
  "name": "NodeBB Plugin for Caiz",
  "description": "NodeBB Plugin for Caiz",
  "version": "1.0.0",
  "library": "./library.js",
  "staticDirs": {
    "static": "./static"
  },
  "scripts": [
    "static/modal.js"
  ],
  "less": [
    "static/style.less"
  ]
}

In plugin.json, the following settings are made:

staticDirs: Specify the directory for static files (JavaScript, CSS, images, etc.)
scripts: Specify the JavaScript files to be loaded on the client side
less: Specify the Less files to be loaded on the client side

The client-side JavaScript implements the display of the modal and WebSocket communication.

'use strict';

async function getAlert() {
    return new Promise((resolve, reject) => {
        require(['alerts'], resolve);
    });
}

$(document).ready(function () {
    // Trigger of showing modal
    $(document).on('click', '#create-community-trigger', function (e) {
        e.preventDefault();
        $('#community-create-modal').modal('show');
    });

    // Click event in the modal
    $('#submit-community-create').on('click', async () => {
        const form = $('#community-create-form');
        const formData = form.serializeArray().reduce((obj, item) => {
            obj[item.name] = item.value;
            return obj;
        }, {});

        // Client validation
        const { alert } = await getAlert();
        if (!formData.name) {
            alert({
                type: 'warning',
                message: '[[caiz:error.name_required]]',
                timeout: 3000,
            });
            return;
        }

        // Disable to the button
        const submitBtn = $(this);
        submitBtn.prop('disabled', true).addClass('disabled');

        // Send to server by WebSocket
        socket.emit('plugins.caiz.createCommunity', formData, function(err, response) {
            if (err) {
                alert({
                    type: 'error',
                    message: err.message || '[[caiz:error.generic]]',
                    timeout: 3000,
                });
            } else {
                $('#community-create-modal').modal('hide');
                alert({
                    type: 'success',
                    message: '[[caiz:success.community_created]]',
                    timeout: 3000,
                });
                // Redirect to community you made
                ajaxify.go(`/${response.community.handle}`);
            }
            form[0].reset();
            submitBtn.prop('disabled', false).removeClass('disabled');
        });
    });
});

In this code:

getAlert() loads the NodeBB alert module
Set up the trigger to display the modal
Monitor the click event on the create button:
Get the form data and convert it into an object
Perform client-side validation
Disable the button to prevent double submissions
Send the data to the server via WebSocket
If successful, display the alert and redirect
If there is an error, display the error message
After processing is complete, reset the form and enable the button

Notes

In NodeBB, server-side functions are called using WebSocket, not Ajax. WebSocket functions are specified in module.exports.sockets, and if a function such as module.exports.sockets.caiz.createCommunity is defined on the server side, it can be called on the client side in an RPC-like way, for example, socket.emit(‘plugins.caiz.createCommunity’, formData, ...).

You can specify the time to close the alert automatically using the timeout option.

Server-side implementation

On the server side, you will receive WebSocket events and create a new category.

First, register the WebSocket event in library.js. For WebSocket, there is no need to configure anything in plugin.json.

'use strict';
const sockets = require.main.require('./src/socket.io/plugins'); 
const Community = require('./libs/community');

// Register event of WebSocket
sockets.caiz = {};
sockets.caiz.createCommunity = Community.Create;

module.exports = plugin;

Next, implement the community creation process in libs/community.js.

'use strict';

const db = require.main.require('./src/database');
const Plugins = require.main.require('./src/plugins');
const winston = require.main.require('winston'); 
const Categories = require.main.require('./src/categories');
const Privileges = require.main.require('./src/privileges');
const Groups = require.main.require('./src/groups');
const Base = require('./base');
const websockets = require.main.require('./src/socket.io/plugins');
const initialCategories = require.main.require('./install/data/categories.json'); 

class Community extends Base {
  static async Create(socket, data) {
    const { name, description } = data;
    winston.info(`[plugin/caiz] Creating community: ${name}`);
    const { uid } = socket;
    if (!uid) {
      throw new Error('Not logged in');
    }
    if (!name || name.length < 3) {
      throw new Error('Community name is too short');
    }  
    try {
      const community = await Community.createCommunity(uid, { name, description });
      return {
        message: 'Community created successfully!',
        community: community,
      };
    } catch (err) {
      winston.error(`[plugin/caiz] Error creating community: ${err.message}`);
      throw err;
    }
  }

  static async createCommunity(uid, { name, description }) {
    const ownerPrivileges = await Privileges.categories.getGroupPrivilegeList();
    const guestPrivileges = ['groups:find', 'groups:read', 'groups:topics:read'];

    // Create new top level category
    const categoryData = {
      name,
      description: description || '',
      order: 100,
      parentCid: 0,
      customFields: {
        isCommunity: true
      },
      icon: 'fa-users',
    };

    const newCategory = await Categories.create(categoryData);
    const cid = newCategory.cid;

    // Create an owner community group
    const ownerGroupName = `community-${cid}-owners`;
    const ownerGroupDesc = `Owners of Community: ${name}`;
    await Community.createCommunityGroup(ownerGroupName, ownerGroupDesc, uid, 1, 1);
    await Groups.join(ownerGroupName, uid);

    // Create a member community group
    const communityGroupName = `community-${cid}-members`;
    const communityGroupDesc = `Members of Community: ${name}`;
    await Community.createCommunityGroup(communityGroupName, communityGroupDesc, uid, 0, 0);
    await Groups.leave(communityGroupName, uid);

    // Create a burned community group
    const communityBanGroupName = `community-${cid}-banned`;
    const communityBanGroupDesc = `Banned members of Community: ${name}`;
    await Community.createCommunityGroup(communityBanGroupName, communityBanGroupDesc, uid, 1, 1);
    await Groups.leave(communityBanGroupName, uid);

    // Save owner group name in category data
    await db.setObjectField(`category:${cid}`, 'ownerGroup', ownerGroupName);

    // Setting privileges
    await Privileges.categories.give(ownerPrivileges, cid, ownerGroupName);
    const communityPrivileges = ownerPrivileges.filter(p => p !== 'groups:posts:view_deleted' && p !== 'groups:purge' && p !== 'groups:moderate');
    await Privileges.categories.give(communityPrivileges, cid, communityGroupName);
    await Privileges.categories.give([], cid, communityBanGroupName);
    await Privileges.categories.rescind(ownerPrivileges, cid, 'guests');
    await Privileges.categories.give(guestPrivileges, cid, 'guests');
    await Privileges.categories.rescind(ownerPrivileges, cid, 'registered-users');
    await Privileges.categories.give(guestPrivileges, cid, 'registered-users');
    await Privileges.categories.give([], cid, 'banned-users');

    // Create sub categories
    await Promise.all(initialCategories.map((category) => {
      return Categories.create({...category, parentCid: cid, cloneFromCid: cid});
    }));

    winston.info(`[plugin/caiz] Community created: ${name} (CID: ${cid}), Owner: ${uid}, Owner Group: ${ownerGroupName}`);
    return newCategory;
  }
}

module.exports = Community;

createCommunityGroup is defined in libs/community.js. The trick is to pass the flag as 0/1, not as a boolean.

static async createCommunityGroup(name, description, ownerUid, privateFlag = 0, hidden = 0) {
  const group = await Groups.getGroupData(name);
  if (group) return group;
  return Groups.create({
    name,
    description,
    private: privateFlag,
    hidden,
    ownerUid
  });
}

The server-side implementation is as follows.

In library.js:
Load the necessary modules
Register WebSocket events (sockets.caiz.createCommunity = Community.Create)
In libs/community.js:
Inherit the Community class from the Base class
Handle WebSocket events in the Create method
Create the community in the createCommunity method
Set up groups and permissions
Creating subcategories
Error handling:
Login confirmation
Name validation
Error log output

Tips

When creating a new category, you can copy the category's initial settings (such as permissions) by passing cloneFromCid.

return Categories.create({...category, parentCid: cid, cloneFromCid: cid});

As for permission settings, registered users etc. will have the default permission settings applied. Therefore, it is possible to set permissions flexibly by first revoking all permissions and then granting the necessary permissions.

// Revoke all permissions
// 全権限を剥奪
await Privileges.categories.rescind(ownerPrivileges, cid, 'registered-users');
// Grant the necessary permissions
await Privileges.categories.give(guestPrivileges, cid, 'registered-users');

For WebSocket communication, if there is an error, you can handle it with exception handling. If the process is successful, you can return a variable with return, and the client side will receive it

Summary

Using the NodeBB plugin, we have implemented a function to create new categories. The main points are as follows

Display a modal using a template
Implement WebSocket communication on the client side
Create categories and subcategories on the server side
Set permissions and clone

With this implementation, users can easily create new communities. In addition, since subcategories are also created automatically, it is now possible to efficiently perform initial settings for communities.

goofmint/caiz

A story about creating a forum service in the age of AI

Atsushi — Sat, 05 Apr 2025 05:56:42 +0000

I've been quietly working on this for the past two weeks or so, and I've been gathering a lot of knowledge, so I've decided to leave it as an output of that.

Concept

The concept of the service is a forum service for developers. It manages multiple communities with a single service. Anyone can create a new community, and within that, they can become an administrator, or conversely, they can participate as a member in other communities.

The ideal form would be a service like Discord that is open (anyone can view).

Why a forum?

Currently, Slack and Discord are often used to manage online communities. In fact, the author also uses Slack and Discord in their community. However, I feel that there are some problems.

Knowledge becomes closed

Since chat is not searchable on the web, knowledge tends to become closed. Although there is a high level of psychological safety, it makes it difficult for beginners to gain knowledge online, as the same questions are regularly repeated.

In addition, because of the atmosphere of high psychological safety, there are cases where people write words that they would not usually use, and then have screenshots taken of them.

You don't know if you can continue to use it for free

Since Salesforce acquired Slack, it has undergone several functional revisions. The history of past revisions is also deleted after a certain period of time. Accumulating knowledge is difficult, and in that sense, it is not suitable for communities.

I personally like Discord, but the UX is a little unusual, and it is often perceived as problematic for beginners. Discord itself is free to use (individuals can pay for it), but it is unclear whether it will be maintained in the future.

Account management is complicated

This is the case with Slack, but I personally don't like the fact that each URL has its own separate account. As the number of accounts increases, the more complicated password management becomes, and some people end up reusing passwords. There is the advantage of being able to change the character for each URL, but I feel that the advantage of being able to manage everything with a single account is greater. The settings are also independent, and setting them up each time is also a hassle.

Advantages of Forums

I think the following are the advantages of forums.

Openness

Forums can be searched on the web, and knowledge becomes open. Communication in an open forum encourages appropriate behaviour.

Freedom for users

If you just want to browse a forum, you don't need to register as a user, and you don't need to be prepared to jump off a cliff like in a chat room.

Issues with existing forums

I don't think many forum services have many Japanese developers.

5channel The advantages and disadvantages of anonymity
Reddit There is a Japanese subreddit, but it is basically for English speakers
Slashdot Sa-shu...
Stack Overflow Specialised in QA. There are tags, but it is not a community in the traditional sense.
Teratail Specialised in QA. There are tags, but it is not a community in the traditional sense.

There is also open-source forum software, but it is basically one community, one forum. In other words, you need to set up your own server as your own community. This means that you need to register an account for each community, and managing the server for the community can be troublesome.

Starting to create a forum

So, I started to create a forum. It's hard to develop from scratch, and there's a lot of reinventing the wheel, so I investigated the following open-source forums.

Discourse
NodeBB
Flarum
phpBB

As a result, I found that a plugin for NodeBB would allow me to do a certain number of things. If it's open source, you can be reassured (?).

How NodeBB plugins work

NodeBB plugins are made up of the following three files.

plugin.json Basic plugin information
package.json Plugin dependencies and installation as a package
library.js Plugin code (file name is arbitrary)

Creating a plugin

plugin.json describes the basic information for the plugin.

{
  "id": "nodebb-plugin-caiz",
  "name": "NodeBB Plugin for Caiz",
  "description": "NodeBB Plugin for Caiz",
  "version": "1.0.0",
  "library": "./library.js",
  "staticDirs": {
    "language": "locales"
  },
  "hooks": [
    {
      "hook": "static:app.load",
      "method": "init"
    },
    {
      "hook": "filter:categories.build",
      "method": "customizeCategoriesLink"
    },
    {
      "hook": "filter:topic.build",
      "method": "customizeTopicRender"
    },
    {
      "hook": "filter:category.get",
      "method": "customizeCategoryLink"
    }
  ]
}

Basically, you write the event that the plugin calls and the name of the JavaScript function under hooks.

Hooks - NodeBB Documentation

There are two types of hooks in use at the moment, and the list of server-side hooks is defined in Hooks · NodeBB/NodeBB Wiki. The other type is a build hook that is called when the template is rendered, and it is called in the format filter:(template name).build. However, the build hook is sometimes not called even when a file name is specified, and I don't fully understand how it works...

Creating plugin code

This is the basic form of a plugin. plugin.init is called because init is specified in static:app.load in hooks. This is a hook function that is called when the app starts up.

'use strict';
const winston = require.main.require('winston'); 
const plugin = {};
plugin.init = async function (params) {
  const { router, middleware, controllers } = params;
  winston.info('[plugin/caiz] Initializing Caiz plugin');

  router.get('/api/communities', controllers.categories.list);
  router.get('/api/:handle', Community.Index);
};
module.exports = plugin;

You can also output logs using console.log, but using winston, you can change the log format and the output destination.

The router for routing is Express, so you can add routing using router.get, etc.

controllers are NodeBB controllers mapped to src/controllers, so they are easy to understand.

Customising the template

The default template for NodeBB is NodeBB/nodebb-theme-harmony. You can clone this, specify it as the theme, and customise it.

It uses Bootstrap for display and benchpressjs for the template engine. When customising the display content, use the build hook to modify templateData.

static async customizeIndexLink(data) {
  const { categories } = data.templateData;
  categories.forEach(category => {
    category.link = `/${category.handle}`;
    if (!category.children) return;
    category.children.forEach(child => {
      child.link = `/${category.handle}/${child.cid}-${child.handle}`;
    });
  });
  return data;
}

If you write code like this, you can display it in the template with { ./link }. The template is a *.tpl file in the templates directory. Note that there is no display support for Benchpress in VS Code, etc., so it seems better to highlight it as an HTML file.

Reflecting themes and plugins

Themes and plugins are installed using the npm command.

npm install nodebb-theme-caiz

This will install nodebb-theme-caiz. After installation, activate it.

./nodebb activate nodebb-theme-caiz

This will activate the theme and plugin.

If you make modifications

If you modify the plugin, restart NodeBB. You can do this either via command or from the admin screen.

./nodebb restart

If you modify the theme, you will also need to build it. You can do this from the command line or from the administration screen.

./nodebb build
./nodebb restart

If you are developing with Docker Compose, restarting will not work, so it seems better to operate from the administration screen.

Current situation

At the moment, we are still just starting to understand the mechanisms of plugins and themes, and many functions are lacking.

Creating, editing and deleting communities
Registering and deleting members
Registering, editing and deleting member permissions
Functions using AI

I think the functions, such as posting, can use the standard NodeBB functions. While I'm making it, I'll publish it if I have any knowledge. Or rather, there is little published information about NodeBB plugin development, so I'm groping in the dark. So I'll leave it as a memo for myself. Even on Qiita, there is no NodeBB tag, which is proof of that...

Furthermore, because there is not a lot of information, even when using the AI Coding Agent, there are many cases where it generates code that does not work. If we publish our knowledge this way, it may gradually become smarter...

Summary

There are so many different types of hooks in NodeBB that it seems like you could implement a wide range of functions using only plugins. There are also a lot of settings, so if you can get to grips with plugins, settings, and themes, I have a feeling you'll be able to meet most needs.

The code is available below.

goofmint/caiz

I made a plugin that enables PDF export in GROWI.

Atsushi — Fri, 06 Dec 2024 09:13:40 +0000

GROWI, an open-source Wiki, provides a plugin feature that can be used to display or customize your data.

This time, I created a plugin for GROWI that adds a PDF export feature. Although PDF export can seem tedious, it turned out to be easier to implement than expected.

Plugin Behavior

Markdown is written as follows, using Remark Directive:

::pdf

When this is written, a circular button appears in the upper-right corner of the screen. This button is also visible in the editor but does not function there. It only works when the page is displayed.

About the Code

The code is available at goofmint/growi-plugin-pdf-export under the MIT License.

Adding the Plugin

To use it, add it in the Plugin section of the GROWI admin panel. The URL is https://github.com/goofmint/growi-plugin-pdf-export.

About the Code

This plugin uses Remark Directive to convert ::pdf into a button (actually an a tag), and then processes PDF export within the component.

const activate = (): void => {
  if (growiFacade == null || growiFacade.markdownRenderer == null) {
    return;
  }
  const { optionsGenerators } = growiFacade.markdownRenderer;
  const originalCustomViewOptions = optionsGenerators.customGenerateViewOptions;
  optionsGenerators.customGenerateViewOptions = (...args) => {
    const options = originalCustomViewOptions ? originalCustomViewOptions(...args) : optionsGenerators.generateViewOptions(...args);
    // Convert Remark Directive into a button
    options.remarkPlugins.push(remarkPlugin as any);
    // Handle PDF export
    const { a } = options.components;
    options.components.a = pdfExport(a);
    return options;
  };

  // For preview
  const originalGeneratePreviewOptions = optionsGenerators.customGeneratePreviewOptions;
  optionsGenerators.customGeneratePreviewOptions = (...args) => {
    const preview = originalGeneratePreviewOptions ? originalGeneratePreviewOptions(...args) : optionsGenerators.generatePreviewOptions(...args);
    preview.remarkPlugins.push(remarkPlugin as any);
    const { a } = preview.components;
    preview.components.a = pdfExport(a);
    return preview;
  };
};

Remark Directive Processing

Remark Directive handles the process of displaying the button at the top of the screen. A Node is added to hChildren.

export const remarkPlugin: Plugin = () => {
  return (tree: Node) => {
    visit(tree, 'leafDirective', (node: Node) => {
      const n = node as unknown as GrowiNode;
      if (n.name !== 'pdf') return;
      const data = n.data || (n.data = {});
      // Add a floating button to the top-right
      data.hChildren = [
        {
          tagName: 'div',
          type: 'element',
          properties: { className: 'pdf-export-float-button' },
          children: [
            {
              tagName: 'a',
              type: 'element',
              properties: { className: 'material-symbols-outlined me-1 grw-page-control-dropdown-icon pdf-export' },
              children: [
                { type: 'text', value: 'cloud_download' },
              ],
            },
          ],
        },
      ];
    });
  };
};

This process adds the following DOM:

<div class="pdf-export-float-button">
  <a class="material-symbols-outlined me-1 grw-page-control-dropdown-icon pdf-export">
    cloud_download
  </a>
</div>

Component Processing

Next, the component adds click handling to a.pdf-export.

export const pdfExport = (Tag: React.FunctionComponent<any>): React.FunctionComponent<any> => {
  return ({ children, ...props }) => {
    try {
      // If the class is not `pdf-export`, process as a normal `a` tag
      if (!props.className.split(' ').includes('pdf-export')) {
        return (<a {...props}>{children}</a>);
      }
      // Click event
      const onClick = async(e: MouseEvent) => {
      };
      // Add click event and return
      return (
        <a {...props} onClick={onClick}>{children}</a>
      );
    }
    catch (err) {
      // console.error(err);
    }
    // Return the original component if an error occurs
    return (
      <a {...props}>{children}</a>
    );
  };
};

Handling Button Clicks

The following is the content of the onClick function. The implementation supports multiple pages, based on How to Capture DOM and Save It as PDF in JavaScript - Qiita.

The GROWI content is located within .wiki. The content is converted to a dataURI, and the page title is used as the filename.

e.preventDefault();
const title = document.title.replace(/ - .*/, '');
const element = document.querySelector('.wiki');
if (!element) {
  return;
}
// Convert to blob format
const blob = await toBlob(element as any as HTMLElement);
if (!blob) {
  return;
}
const dataUrl = await readBlobAsDataURL(blob);

Next, variables for jsPDF are prepared.

// Create an instance of jsPDF
const pdf = new JSPDF({
  orientation: 'p',
  unit: 'px',
  format: 'a4',
  compress: true,
});
// Calculate PDF width, height, and scale to match the DOM
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const scale = pdfWidth / element.clientWidth;
const scaledWidth = element.clientWidth * scale;
const scaledHeight = element.clientHeight * scale;
// Get background color
const computedStyle = window.getComputedStyle(document.body);
const backgroundColor = computedStyle.backgroundColor.match(/rgb\(([0-9]{1,3}), ([0-9]{1,3}), ([0-9]{1,3})\)/);

Finally, the PDF is generated. To maintain readability, the document's background color is retrieved and set in the PDF.

// Calculate the number of pages required
const pages = Math.ceil(scaledHeight / pdfHeight);
// Generate PDF for each page
for (let i = 0; i < pages; i++) {
  // Set the page to be drawn
  pdf.setPage(i + 1);
  // Set background color
  pdf.setFillColor(parseInt(backgroundColor![1]), parseInt(backgroundColor![2]), parseInt(backgroundColor![3]));
  pdf.rect(0, 0, scaledWidth, scaledHeight, 'F');
  // Draw
  pdf.addImage(
    dataUrl,
    'JPEG',
    0,
    -pdfHeight * i,
    scaledWidth,
    scaledHeight,
  );
  // Add the next page
  pdf.addPage();
}
// Delete the unnecessary last page
pdf.deletePage(pdf.getNumberOfPages());
// Set the file name and save (download)
pdf.save(`${title === '/' ? 'Root' : title}.pdf`);

Images and other content are embedded, and the page content is almost fully preserved in the PDF. Amazingly, jsPDF even embeds transparent text, even though the content is added as JPEG.

About the GROWI Community

If you have any questions or requests about using this plugin, feel free to reach out to the GROWI community. If feasible, I’ll try to accommodate your requests. There are also help channels available, so be sure to join!

Join GROWI Slack here

Conclusion

With GROWI plugins, you can freely extend the display functionality. If there’s a missing feature, feel free to add it. Customize your Wiki as you like!

OSS Development Wiki Tool GROWI | Comfortable Information Sharing for Everyone

I made a plugin to display RSS feeds on GROWI

Atsushi — Fri, 06 Dec 2024 09:10:15 +0000

GROWI, an open-source Wiki, provides a plugin feature that can be used to display or customize your data.

This time, I created a plugin for GROWI that displays a list of RSS feeds. It can be handy for displaying news sites or the Qiita GROWI tag. Since fewer people use RSS readers these days, this plugin can serve as a space to display the latest information as a reader replacement.

Plugin Behavior

Markdown is written as follows. The key is to write RSS in the link.

[RSS](https://qiita.com/tags/growi/feed)

It will be displayed like this:

Advanced Version

To convert RSS feeds to JSON (for CORS handling), I use RSS to JSON Converter online. While it works without authentication, you can enable additional options like sorting and item limits by authenticating.

In this case, instead of a link, I use Remark Directive. Everything in {} except the apiKey is optional. Each option is connected with spaces.

::rss[https://qiita.com/tags/growi/feed]{apiKey=API_KEY count=2 order=pubDate}

About the Code

The code is available at goofmint/growi-plugin-rss-reader under the MIT License.

Adding the Plugin

To use it, add it in the Plugin section of the GROWI admin panel. The URL is https://github.com/goofmint/growi-plugin-rss-reader.

Notes

As mentioned earlier, an external service is used for converting RSS feeds, so LAN data (e.g., RSS feeds from a portal site) cannot be used. Also, note the usage limitations of RSS to JSON Converter online (these can be lifted with a paid plan).

About the Code

This implementation supports both simple usage for a tags and Remark Directive.

const activate = (): void => {
  if (growiFacade == null || growiFacade.markdownRenderer == null) {
    return;
  }
  const { optionsGenerators } = growiFacade.markdownRenderer;
  const originalCustomViewOptions = optionsGenerators.customGenerateViewOptions;
  optionsGenerators.customGenerateViewOptions = (...args) => {
    const options = originalCustomViewOptions ? originalCustomViewOptions(...args) : optionsGenerators.generateViewOptions(...args);
    const { a } = options.components.a;
    options.components.a = rssReader(a);
    options.remarkPlugins.push(rssReaderPlugin as any);
    return options;
  };

  // For preview
  const originalGeneratePreviewOptions = optionsGenerators.customGeneratePreviewOptions;
  optionsGenerators.customGeneratePreviewOptions = (...args) => {
    const preview = originalGeneratePreviewOptions ? originalGeneratePreviewOptions(...args) : optionsGenerators.generatePreviewOptions(...args);
    const { a } = preview.components;
    preview.components.a = rssReader(a);
    preview.remarkPlugins.push(rssReaderPlugin as any);
    return preview;
  };
};

Remark Directive Processing

For Remark Directive, it parses the provided options and converts them into an a tag. Since data- attributes couldn't be used, the data is passed into the title attribute.

Thus, the Remark Directive ultimately generates an a tag, similar to the simple version.

export const rssReaderPlugin: Plugin = () => {
  return (tree: Node) => {
    visit(tree, 'leafDirective', (node: Node) => {
      const n = node as unknown as GrowiNode;
      if (n.name !== 'rss') return;
      const data = n.data || (n.data = {});
      data.hName = 'a';
      data.hChildren = [{ type: 'text', value: 'RSS' }];
      const href = n.children[0].url;
      data.hProperties = {
        href,
        title: JSON.stringify(n.attributes),
      };
    });
  };
};

For example:

::rss[https://qiita.com/tags/growi/feed]{apiKey=API_KEY count=2 order=pubDate}

is converted into the following HTML:

<a
  href="https://qiita.com/tags/growi/feed"
  title='{"apiKey":"API_KEY","count":2,"order":"pubDate"}'
>
  RSS
</a>

Component Processing

In the simple version, it parses the title attribute as JSON and processes it accordingly.

const parseOptions = (str: string) => {
  try {
    return JSON.parse(str);
  } catch (err) {
    return {
      apiKey: null,
    };
  }
};

const API_ENDPOINT = 'https://api.rss2json.com/v1/api.json?';

export const rssReader = (Tag: React.FunctionComponent<any>): React.FunctionComponent<any> => {
  return ({
    children, title, href, ...props
  }) => {
    try {
      if (children === null || children !== 'RSS') {
        return <Tag {...props}>{children}</Tag>;
      }
      const { apiKey, count, order } = parseOptions(title);
      const params = new URLSearchParams();
      params.append('rss_url', href);
      if (apiKey) {
        params.append('api_key', apiKey);
        params.append('count', count || '10');
        params.append('order_by', order || 'pubDate');
      }
      const url = `${API_ENDPOINT}${params.toString()}`;
    } 
    catch (err) {
      return <a {...props}>{children}</a>;
    }
  };
};

Fetching and Rendering Data

Data fetching is handled asynchronously using react-async.

const getRss = async({ url }: any) => {
  const res = await fetch(url);
  const json = await res.json();
  return json;
};

The retrieved data is rendered in a table.

return (
  <Async promiseFn={getRss} url={url}>
    {({ data, error, isPending }) => {
      if (isPending) return 'Loading...';
      if (error) return `Something went wrong: ${error.message}`;
      if (data) {
        return (
          <table className='table table-striped'>
            <thead>
              <tr>
                <th>Title</th>
                <th>Author</th>
                <th>PubDate</th>
              </tr>
            </thead>
            <tbody>
              {(data.items || []).map((item: any) => (
                <tr key={item.guid}>
                  <td><a href={item.link} target='_blank'>{item.title}</a></td>
                  <td>{item.author}</td>
                  <td>{item.pubDate}</td>
                </tr>
              ))}
            </tbody>
          </table>
        );
      }
      return null;
    }}
  </Async>
);

About the GROWI Community

If you have any questions or requests about using this plugin, feel free to reach out to the GROWI community. If feasible, we’ll try to accommodate your requests. There are also help channels available, so be sure to join!

Join GROWI Slack here

Conclusion

With GROWI plugins, you can freely extend the display functionality. If there’s a missing feature, feel free to add it. Customize your Wiki as you like!

OSS Development Wiki Tool GROWI | Comfortable Information Sharing for Everyone

Trying Out the New AI Functionality Added to GROWI

Atsushi — Fri, 08 Nov 2024 04:00:21 +0000

GROWI, an open-source Wiki is steadily undergoing development. In version 7.1, a highlight feature was the addition of AI functionality!

This article explains how to use this new AI functionality.

About the AI Functionality in GROWI

GROWI is used as an internal Wiki by companies, communities, laboratories, and more, where a wealth of knowledge is accumulated. GROWI integrates Elasticsearch, which has been well-received for its search capabilities.

Building upon these search results, the AI functionality provides more intuitive responses using AI. By utilizing Elastic as a RAG (Retrieval-Augmented Generation), the feature allows users to receive responses based on content (publicly accessible) within the Wiki.

How to Use

The simplest way to use GROWI is by using Docker Compose.

https://github.com/weseek/growi-docker-compose

Modifying the Dockerfile

When I tried it (as of November 8, 2024), there was an error: error setting certificate file: /etc/ssl/certs/ca-certificates.crt. To resolve this, I added ca-certificates to the Dockerfile.

# After modification
RUN apt-get update && apt-get install -y --no-install-recommends curl ca-certificates \
    && curl -sL https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz \
        | tar -xz -C /usr/local/bin

Modifying the docker-compose.yml

This is the configuration when using the AI functionality. Add environment variables for app.

environment:
  - AI_ENABLED=true # Enable AI functionality
  - OPENAI_SERVICE_TYPE=openai # Specify the service type
  - OPENAI_API_KEY=xxxxx # Specify the API key

For OPENAI_SERVICE_TYPE, specify either openai or azure-openai. Obtain the API key for the AI service you intend to use and set it for OPENAI_API_KEY.

The environment variables for the AI functionality are as follows. Adjust settings as needed.

Key	Type	Default Value
AI_ENABLED	BOOLEAN	false
OPENAI_SERVICE_TYPE	STRING	null
OPENAI_API_KEY	STRING	null (isSecret: true)
OPENAI_SEARCH_ASSISTANT_INSTRUCTIONS	STRING	null
OPENAI_CHAT_ASSISTANT_INSTRUCTIONS	STRING	Omitted. Check here for details
OPENAI_ASSISTANT_NAME_SUFFIX	STRING	null
OPENAI_THREAD_DELETION_CRON_EXPRESSION	STRING	'0 * * * *' (hourly)
OPENAI_THREAD_DELETION_CRON_MAX_MINUTES_UNTIL_REQUEST	NUMBER	60
OPENAI_THREAD_DELETION_BARCH_SIZE	NUMBER	100
OPENAI_THREAD_DELETION_API_CALL_INTERVAL	NUMBER	36000 (msec)
OPENAI_VECTOR_STORE_FILE_DELETION_CRON_EXPRESSION	STRING	'0 * * * *' (hourly)
OPENAI_VECTOR_STORE_FILE_DELETION_CRON_MAX_MINUTES_UNTIL_REQUEST	NUMBER	60
OPENAI_VECTOR_STORE_FILE_DELETION_BARCH_SIZE	NUMBER	100
OPENAI_VECTOR_STORE_FILE_DELETION_API_CALL_INTERVAL	NUMBER	36000 (msec)

How to Use the AI Functionality

If the settings are correctly configured, an AI icon will appear at the top of the Wiki page. Clicking on it will display a floating AI assistant.

You can then ask questions and receive answers.

Notes

The current model is fixed to gpt-4o. It supports up to 30,000 tokens, so if the search results are too extensive, it may hit the limit. More focused queries are recommended.

Currently, responses are only returned as text. If citation sources link to pages, it would be even more convenient (hopefully in the future).

Summary

The AI functionality is still in beta, so we encourage you to try it out and provide feedback! By utilizing AI for internal knowledge management, productivity can be greatly improved. Consider introducing GROWI to help organize and systematize knowledge.

OSS Development Wiki Tool GROWI | Comfortable Information Sharing for Everyone

I created a plugin for adding sort, search, and pagination functions to Markdown tables in GROWI

Atsushi — Fri, 08 Nov 2024 00:51:18 +0000

GROWI is an open-source Wiki platform that offers a plugin system, enabling users to display and customize their data effectively.

In this article, we introduce the Table Grid plugin developed for GROWI. This plugin applies Grid.js to tables written in Markdown, adding functionalities such as sorting, searching, and pagination.

Adding the Plugin

To use this plugin, navigate to the Plugins section in GROWI's administration panel and add the following URL: https://github.com/goofmint/growi-plugin-table-grid.

Usage

In the editor, write a table using standard Markdown syntax:

| Header1 | Header2 | Header3 |
| ------- | ------- | ------- |
| 1       | 2       | 3       |
| 4       | 5       | 6       |
| 7       | 8       | 9       |

Upon previewing, the table will be enhanced with Grid.js, providing advanced features.

Important Notes

Empty Rows: The plugin may not render tables correctly if empty rows are present.
Real-time Updates: Changes to data might not reflect immediately. To update, insert a blank line (causing an error) and then re-enter the correct data.

About the Code

The plugin integrates with the table tag using GROWI's plugin system and is implemented as a Rehype plugin.

const activate = (): void => {
  if (growiFacade == null || growiFacade.markdownRenderer == null) {
    return;
  }

  const { optionsGenerators } = growiFacade.markdownRenderer;

  // For page view
  optionsGenerators.customGenerateViewOptions = (...args) => {
    const options = optionsGenerators.generateViewOptions(...args);
    options.rehypePlugins.push(plugin as any); // Add plugin
    return options;
  };

  // For preview
  optionsGenerators.customGeneratePreviewOptions = (...args) => {
    const preview = optionsGenerators.generatePreviewOptions(...args);
    preview.rehypePlugins.push(plugin as any); // Add plugin
    return preview;
  };
};

The plugin processes the table tag, extracting thead and tbody to transform them into a format compatible with Grid.js.

export const plugin: Plugin = function() {
  return (tree) => {
    visit(tree, (node) => {
      const n = node as unknown as GrowiNode;
      try {
        // Ignore non-table tags
        if (n.type !== 'element' || n.tagName !== 'table') {
          return;
        }
        // Implementation here
      }
      catch (e) {
        n.type = 'html';
        n.value = `<div style="color: red;">Error: ${(e as Error).message}</div>`;
      }
    });
  };
};

The transformation involves mapping the table headers and data to Grid.js's structure:

const [thead, tbody] = n.children;
const columns = thead.children[0].children.map(c => c.children[0].value);
// Results in ["Header1", "Header2", "Header3"]
const data = tbody.children.map(row => row.children
  .map(cell => cell.children[0].value));
// Results in [["1", "2", "3"], ["4", "5", "6"], ["7", "8", "9"]]

These are then applied to Grid.js with various options, styled to match GROWI's theme:

const grid = new Grid({
  columns,            // Headers
  data,               // Data
  pagination: true,   // Pagination
  search: true,       // Search
  sort: true,         // Sorting
  resizable: true,    // Column resizing
  // Styling
  style: {
    table: {
      border: '2px solid var(--bs-secondary-bg)',
    },
    th: {
      color: 'var(--bs-body-color)',
      backgroundColor: 'var(--bs-body-bg)',
    },
    td: {
      color: 'var(--bs-body-color)',
      backgroundColor: 'var(--bs-body-bg)',
    },
    footer: {
      backgroundColor: 'var(--bs-secondary-bg)',
    },
  },
});

Since the DOM isn't updated immediately, the plugin waits for the DOM to be ready before rendering with Grid.js:

// Unique class for identification
const className = `table-grid-${Math.random().toString(36).slice(2)}`;
n.properties.className = `${n.properties.className} ${className}`;
// Wait for DOM to be ready
const id = setInterval(() => {
  const el = document.querySelector(`.${className}`);
  if (el) {
    clearInterval(id);
    el.innerHTML = ''; // Clear existing HTML
    grid.render(el);   // Render with Grid.js
  }
}, 1000);

Styling Considerations

GROWI supports multiple themes, including dark and light modes. To ensure compatibility, the plugin utilizes CSS variables. For instance, sort icons may blend with the background in dark mode; applying a CSS filter inverts their color:

@media (prefers-color-scheme: dark) {
  .gridjs-sort {
    filter: invert(100%);
  }
}

.gridjs-input {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
}

.gridjs-pages button {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
}

Conclusion

GROWI's plugin system allows for extensive customization of its display features. If you find any functionalities lacking, consider developing and adding your

Introduction to the GROWI calendar display plug-in

Atsushi — Thu, 05 Sep 2024 09:52:59 +0000

The open source wiki, GROWI has a plugin facility. It can be used to display your own data or to customise the display.

In this article, we introduce a calendar display plugin that we created as a GROWI plugin; it was a popular plugin on Pukiwiki, so we tried to imitate it.

Add the plugin.

To use it, please add it at Plugin in the GROWI administration page, the URL is https://github.com/goofmint/growi-plugin-calendar.

Usage.

To use, write $calendar in the page. The calendar will be displayed where you write.

$calendar

Click on a date to create a new page with that date. This can be used for daily reports, diaries, etc.

Options.

Available options include.

Change the year and month to be displayed.

You can change the year and month displayed by specifying the month as the first argument and the year as the second argument.

$calendar(12,2021)

Changing the display language

The default is English, but you can change the display language with the lang option. Japanese is ja.

$calendar(lang=fr)

Changing the criteria for generating a page name when clicking on a date

By default, clicking on a date generates a page name YYYYY/MM/DD. In other words, it is a hierarchical structure. You can change this.

$calendar(separator=-)

The above will generate pages like 2024-10-02. If you do not like the hierarchical structure, use this.

Combinations of settings

The above options can be combined.

$calendar(12,2021,lang=fr,separator=-)
$calendar(12,2021,separator=-)

About the code

The code is goofmint/growi-plugin-calendar: GROWI plugin shows calendar
The code can be found at The two files to look at are.

About client-entry.tsx

The client-entry.tsx is the registration part of the plugin. The calendar plugin is registered as a Remark plugin.

const activate = (): void => {
  if (growiFacade == null || growiFacade.markdownRenderer == null) {
    return;
  }

  const { optionsGenerators } = growiFacade.markdownRenderer;

  optionsGenerators.customGenerateViewOptions = (...args) => {
    const options = optionsGenerators.generateViewOptions(...args);
    options.remarkPlugins.push(plugin as any); // プラグイン登録
    return options;
  };
};

About src/calendar.ts

The calendar display uses Vanilla Calendar - Lightweight calendar on pure JavaScript. available in JavaScript.

import VanillaCalendar from ‘vanilla-calendar-pro’;.
import ‘vanilla-calendar-pro/build/vanilla-calendar.min.css’;

In the case of the Remark plugin, the entire drawing process is sent to the visit function, so only the part of this that displays the calendar is extracted.

export const plugin: Plugin = function() {
  return (tree) => {
    visit(tree, (node) => {
      const n = node as unknown as GrowiNode;
      try {
        if (n.type === 'leafGrowiPluginDirective' && n.name === 'calendar') {
                    // process in here
                }
            } catch (e) {
                n.type = 'html';
        n.value = `<div style="color: red;">Error: ${(e as Error).message}</div>`;
      }
        });
    });
};

Getting options.

Option data can be retrieved via node.attributes.

const [month, year] = Object.keys(n.attributes);
const lang = n.attributes.lang || 'en';
const separator = n.attributes.separator || '/';

Then, once done, only the calendar tags are output.

n.type = 'html';
n.value = '<div id="calendar"></div>';

After the HTML is rendered and we see that #calendar is there, we start the drawing process.

const id = setInterval(() => {
    if (document.querySelector('#calendar') != null) {
        // カレンダーオブジェクト作成
        const cal = new VanillaCalendar('#calendar', {
            settings: {
                lang, // 表示言語
                // 表示年月
                selected: {
                    month: isNaN(month as unknown as number) ? new Date().getMonth() : parseInt(month) - 1,
                    year: isNaN(year as unknown as number) ? new Date().getFullYear() : parseInt(year),
                },
            },
            actions: {
                // 日付クリック時の処理
                async clickDay(event, self) {
                    const page = self.selectedDates[0].replaceAll(/-/g, separator);
                    const path = await getPagePath();
                    location.href = `${path}${page}`;
                },
            },
        });
        // 表示
        cal.init();
        // 終了
        clearInterval(id);
    }
}, 100);

Processing when a date is clicked

When the date is clicked, the page information is retrieved and the page name is correctly retrieved.

const getPagePath = async() => {
    if (location.pathname === '/') return '/';
    const pageId = location.pathname.replace(/\//, '');
    const res = await fetch(`/_api/v3/page?pageId=${pageId}`);
    const json = await res.json();
    const { path } = json.page;
    return `${path}/`;
};

Summary.

The GROWI plugin gives you the freedom to extend your display. If there are missing functions, you can add more and more. By all means, customise your own wiki.

GROWI, the OSS development wiki tool | comfortable information sharing for all