Some specific emojis inside headings are not being properly linked; it should be escaped instead of beign replaced with "-"

[guesant]

Hello! Thank you for this project!

I've been trying for my README and it's a candy solution. There is an issue when dealing with specific emojis (with Github output).

tldr: emojis with variation selector is linked to github with encodeURIComponent instead of being replaced with "-"

emojiUnicode came from https://www.npmjs.com/package/emoji-unicode

---

notes about research

First, the extension MarkdownLint that I have in my vscode was warning about a dead link.

Later, I tried to click on Github and nothing happened for that specific link with the emoji "⚖️".

But as you can see in the previous images, this specific emoji is linked by Github as encodeURIComponent instead of just stripping with "-".

Doing some research, I noticed that this emoji is a composed one:

Later, I discovered something about "variant selectors":

In Unicode the value U+FE0F is called a variation selector. The variation selector in the case of emoji is to tell the system rendering the character how it should treat the value. That is, whether it should be treated as text, or as an image which could have additional properties, like color or animation.

For emoji there are two different variation selectors that can be applied, U+FE0E and U+FE0F. U+FE0E specifies that the emoji should be presented like text. U+FE0F specifies that it should be presented as an image, with color and possible animation.

Without the variation selector the character still renders fine, (just look at the page source at this character: ☁) but there's no additional information about presentation.

Source: https://stackoverflow.com/a/38100803 - by https://stackoverflow.com/users/5240004/theb

• https://discuss.ens.domains/t/registered-emoji-contains-ef-b8-8f-symbols/13823/3
• https://stackoverflow.com/a/38100803
• https://en.wikipedia.org/wiki/Variation_Selectors_(Unicode_block)
• https://en.wikipedia.org/wiki/Variation_Selectors_Supplement

[derlin]

Wow, thank you for this research and detailed issue, that's great! Can you share the original readme to reproduce the issue?

Emojis are very (very!) tricky. I will see what I can do, but won't promise anything right now. Would you be interested in giving this issue a try?

[guesant]

Wow, thank you for this research and detailed issue, that's great!

Thank you! :)

---

Can you share the original readme to reproduce the issue?

Of course! At the end of this reply.

---

Emojis are very (very!) tricky.

A lot! It was hard to figure out the reason, and I still having a lot of doubts about how composed emojis works. I was taking a lot at the source code and I found that the DevToAnchorGenerator handles some issues with them.

https://github.com/derlin/bitdowntoc/blob/cc9aa02b492509b7773127295f54b99501efabd5/src/commonMain/kotlin/ch/derlin/bitdowntoc/AnchorGenerator.kt#L71-L73

---

Can you share the original readme to reproduce the issue?

Of course, I'll be sending the original one and a minimal reproduction. Note that I only tested on Github, I don't know how other outputs handles and addresses the "id" to the anchors.

I will see what I can do, but won't promise anything right now.

Alright! I'll be manually fixing the anchor href on the output mardown by myself now!

Would you be interested in giving this issue a try?

I still doing some research and I found those two files that probably will contain the adjustments:

https://github.com/derlin/bitdowntoc/blob/cc9aa02b492509b7773127295f54b99501efabd5/src/commonTest/kotlin/ch.derlin.bitdowntoc/AnchorsGeneratorTest.kt#L51-L109

https://github.com/derlin/bitdowntoc/blob/cc9aa02b492509b7773127295f54b99501efabd5/src/commonMain/kotlin/ch/derlin/bitdowntoc/AnchorGenerator.kt#L26-L52

The solution will need a good test before

Source: https://emojipedia.org/balance-scale#technical

Source: https://emojipedia.org/waving-hand#technical

---

Sample files

Minimal reproduction

"👋 Contact" link works on github but "⚖️ License" don't

<h1 align="center">Project Title</h1>

<!-- description and badges -->

## 🔰 Overview

> [!NOTE]  
> Work in progress.

## ✨ Features

> [!NOTE]  
> Work in progress.

## Table of contents

<!-- TOC start (generated with https://github.com/derlin/bitdowntoc) -->

- [🧭 How to get started?](#-how-to-get-started)
- [⚖️ License](#-license)
- [👋 Contact](#-contact)

<!-- TOC end -->

## 🧭 How to get started?

> [!NOTE]  
> Work in progress.

## ⚖️ License

[MIT](./LICENSE) © 2024 – present, Ladesa.

## 👋 Contact

> [!NOTE]  
> Work in progress.

---

⭐ Star this repository if you find it useful!

Original README.md

<h1 align="center">Especificação do Ladesa</h1>

<p align="center">📜 Fonte da verdade que define a estrutura de informações, entidades e dados de transferência 📜</p>

<div align="center">
  <a href="https://github.com/ladesa-ro/especificacao">
    <img alt="Repositório de Código no GitHub" src="https://img.shields.io/badge/GitHub-Especificação-118d3b?style=for-the-badge&logo=GitHub&logoColor=white&labelColor=18181b&color=118d3b" />
  </a>
  <a href="https://docs.ladesa.com.br/developers/">
    <img alt="Documentação" src="https://img.shields.io/badge/DOCS.LADESA-118d3b?style=for-the-badge&logo=readme&logoColor=white&label=Documenta%C3%A7%C3%A3o&labelColor=18181b" />
  </a>
</div>

## 🔰 Visão Geral

> [!NOTE]  
> Em progresso.

## ✨ Recursos

> [!NOTE]  
> Em progresso.

## Conteúdo

<!-- TOC start (generated with https://github.com/derlin/bitdowntoc) -->

- [🧭 Por onde começar?](#-por-onde-começar)
- [📓 Utilização](#-utilização)
- [😊 Como contribuir](#-como-contribuir)
- [🧑‍💻 Desenvolvimento Local](#-desenvolvimento-local)
  - [Pré-requisitos](#pré-requisitos)
  - [Obter o código-fonte](#obter-o-código-fonte)
  - [Instalar as dependências](#instalar-as-dependências)
  - [Estrutura do projeto](#estrutura-do-projeto)
  - [Gerar os artefatos da especificação](#gerar-os-artefatos-da-especificação)
  - [Comandos](#comandos)
- [❔ Motivação](#-motivação)
- [🎯 Propósito](#-propósito)
  - [Objetivo Geral](#objetivo-geral)
  - [Objetivos Específicos](#objetivos-específicos)
- [⚖️ Licença](#-licença)
- [👋 Contato](#-contato)

<!-- TOC end -->

## 🧭 Por onde começar?

> [!NOTE]  
> Em progresso.

## 📓 Utilização

> [!NOTE]  
> Em progresso.

## 😊 Como contribuir

> [!NOTE]  
> Em progresso.

## 🧑‍💻 Desenvolvimento Local

Após checar os requisitos necessários, você será guiado para obter o código-fonte deste sistema e saber, dentre outras coisas, como iniciar o desenvolvimento, fazer alterações e gerar os artefatos da especificação.

Este projeto é livre e de código aberto, e todos são bem-vindos para obter o código-fonte, entender, modificar, utilizar para outros fins e compartilhar!

### Pré-requisitos

Para o desenvolvimento local, é necessário preparar o seu ambiente de trabalho para mexer com este projeto.

A seguir, estão listadas as tecnologias requisitadas para ter no computador a fim de configurar o ambiente de desenvolvimento.

- [Acesso à Linha de Comando](https://docs.ladesa.com.br/developers/tutorials/os/command-line/);
- [Git](https://docs.ladesa.com.br/developers/tutorials/source-code/git/);
- [Node.js](https://docs.ladesa.com.br/developers/tutorials/platforms/node/) + Corepack.

> [!TIP]
> Preparamos dicas e tutoriais para você acerca de cada pré-requisito,
> **basta clicar nos links** para saber mais.

### Obter o código-fonte

O primeiro passo para trabalhar com a Especificação do Ladesa é obter uma cópia dos arquivos deste repositório.

Por meio dos comandos a seguir, você terá em sua máquina de desenvolvimento o acesso a um clone do repositório deste projeto:

```sh
git clone https://github.com/ladesa-ro/especificacao.git
cd especificacao
```

### Instalar as dependências

```sh
pnpm install
```

### Estrutura do projeto

> [!NOTE]  
> Em progresso.

### Gerar os artefatos da especificação

```sh
pnpm run build
```

### Comandos

> [!NOTE]  
> Em progresso.

## ❔ Motivação

Os sistemas tecnológicos do Ladesa atuam para resolver problemas reais da comunidade acadêmica.

Dessa forma, o uso da tecnologia é moldado para armazenar, gerenciar, processar e produzir informações pertinentes aos seus propósitos, como registros sobre salas de aula, laboratórios, usuários do sistema, professores, horários de aula e cursos.

Neste contexto, torna-se necessário que essas soluções informáticas lidem com representações de entidades físicas e abstratas de interesse aos seus funcionamentos.

## 🎯 Propósito

Dada a demanda de que os aplicativos do Ladesa têm de lidar com as informações relativas às suas próprias finalidades, a _Especificação do Ladesa_ surge para padronizar e definir uma Linguagem Ubíqua a esse ecossistema.

### Objetivo Geral

Atuar como fonte da verdade que define a estrutura de informações, entidades e dados de transferência no contexto do ecossistema Ladesa.

### Objetivos Específicos

- Definir explicitamente quais são as entidades, atributos e ações que são pertinentes ao propósito e ao correto funcionamento dos sistemas do Ladesa;

- Gerar e publicar especificações que sigam padrões modernos e populares, para que seja possível a portabilidade e a integração na maioria das plataformas e linguagens de programação;

- Fornecer pacotes e guias atualizados de integração para as linguagens de programação populares que queiram integrar ao Ecossistema do Ladesa.

## ⚖️ Licença

[MIT](./LICENSE) © 2024 – presente, Ladesa.

## 👋 Contato

> [!NOTE]  
> Em progresso.

---

⭐ Marque este repositório com estrela se achar útil!

---

[derlin]

@guesant hello there! Any news on this?

[guesant]

@guesant hello there! Any news on this?

not yet

[openmindculture]

The current implementation, in DEV.to-mode, includes emojis in the links when it should not.

To link to a sub-headline "## Islands Architecture: Theory and Practice 🏝️🛟", #islands-architecture-theory-and-practice works, but #islands-architecture-theory-and-practice-🏝️🛟 doesn't.