Fixed a bug with displaying the number of unread comments.

Improved error display when mobile internet connection is lost.

Added a sticky loader when saving a comment.

Improved aria-attributes for screen readers.

Added Open Graph support for some pages.

When publishing a post, a like is automatically added to the published post.

In open posts, a button icon was added to quickly jump to comments.

Separate language-specific home pages were created on sub-URLs like /es, /de, etc.

The site header is now fixed at the top on most pages.

You can now insert previously uploaded images and videos into posts and comments by selecting them from a list.

If, while editing a post, a user accidentally deletes a content block, it can now be restored using a button in the notification in the corner of the screen.

New types of complaints have been added: content created by a AI and copyright infringement.

The project rules have been updated.

A small profanity check is now performed when saving a post or comment.

If you try to use Quill Editor with Nuxt 3 when rendering a page in SSR you will get this error:
That means NodeJS doesn't have the global variable 'document'. Because SSR rendering is executed in
a NodeJS environment, not a browser.

The sad fact: <client-only> won't help with this problem. The problem with quill's code is that during import, it assumes it's being executed in the browser. I hope you remember that the code imported from the module is not just imported, but executed, i.e. the authors of Quill wrote it so that the 'document' object is immediately accessed there. Very bad.

One solution is to disable SSR, but its an awful solution. But the second solution is to use dynamic JS imports.

My <script lang="ts" setup> in QuillEditor.vue in Nuxt 3 project:

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
// import Quill from 'quill'; // SSR problem with 'document', need to use dynamic import
import type Quill from 'quill';

const elemForQuillEditor = ref<HTMLDivElement|null>(null);

let editor: null|Quill = null; // Do not store in ref() - it causes bugs!

// ...

async function createQuillAndSetListeners() {
  const Quill = (await import('quill')).default; // This is most important thing - usage of JS dynamic import

  if (!elemForQuillEditor.value) return;
  editor = new Quill(elemForQuillEditor.value, {
    theme: 'snow',
    modules: {
      history: {
        delay: 2000,
        maxStack: 500,
        userOnly: true,
      },
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'],
          ['link'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          [{ script: 'sub' }, { script: 'super' }],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          [{ color: [] }, { background: [] }],
          ['clean'],
          ['undo', 'redo'],
        ],
        handlers: {
          undo() {
            editor?.history.undo();
          },
          redo() {
            editor?.history.redo();
          },
        },
      },
    },
    placeholder: props.placeholder,
  });
  
  editor.on('text-change', () => {
    if (!editor) return;
    // ... my other code
  });
}

// ...

onMounted(createQuillAndSetListeners);

Now your Quill editor will work in Nuxt 3 even during SSR!

Write language name after triple backticks (```) and content of preformatted text will be highlighted.
This is example:

 ``` ts
 let projectName: string|null = null;
 projectName = 'Famabara';
 ```

Of course, you shouldn't start backticks-line with a space.

Golang syntax highlight example:

package main

import "fmt"

func main() {
	fmt.Println("Hello, from Go!")
}

Javascript syntax highlight example:

console.log(2**2**3); // 256
console.log(2**(2**3)); // 256
console.log((2**2)**3); // 65

SQL example:

SELECT p.id, p.title FROM posts p LIMIT 10;

For C++ write "cpp", not "c++".
For C# write "csharp", not "c#"

Famabara uses highlight.js for syntax highlight.

Several useful changes have been added to the site over the past few days.

First, search was added to Famabara. All posts are indexed automatically.

Secondly, users can now subscribe to tags.

Of course, many minor changes have been made to improve the interaction with the site.

Famabara now supports quotes in posts and comments. Write ">" character in the beginning of a new line and this line will become a quote.

Example:

No, don't do it!

That's a good idea!

The text I wrote:

> I want to eat 3 pizzas.
No, don't do it!

> I want to eat an apple.
> And a peach.
That's a good idea!

Stay with Famabara!