Enveloppe / obsidian-enveloppe

Enveloppe helps you to publish your notes on a GitHub repository from your Obsidian Vault, for free!
https://enveloppe.github.io/
Apache License 2.0
636 stars 39 forks source link

Add prefix to custom ID #324

Closed somidad closed 7 months ago

somidad commented 7 months ago

This proposal converts [[note#^identifier]] into [altLink](note#user-content-^identifier) instead of [altLink](note#^identifier)

Background

I have the following conversion. It converts a block identifier, e.g. ^37066d at the end of a paragraph into <a id="^37066d"></a>. (AFAIK, this plugin does not support such conversion natively.)

"censorText": [
  {
    "entry": "/ \\^(\\w+)$/gm",
    "replace": " <a id=\"^$1\"></a>",
    "flags": "",
    "after": false
  }
]

However, when GitHub renders the file on the web browser, it add user-content- prefix to the ID. (I guess they try to avoid ID duplication/collision.)

So a link to a block, e.g. [[note#^identifier]], would not work after publishing to GitHub since such an anchor does no longer exist due to GitHub markdown renderer.

Summary by CodeRabbit

"""

coderabbitai[bot] commented 7 months ago

Walkthrough

The recent update focuses on refining the process of creating markdown links, specifically adjusting how anchor tags are generated. By amending the assignment of the anchor variable to prepend "user-content-" to anchors instead of the previous #^, the change ensures smoother and more standardized link creation within markdown documents.

Changes

File(s) Summary of Changes
src/conversion/links.ts Updated the createMarkdownLinks function to modify anchor tag generation.

🐰✨
In the realm of code, where links intertwine,
A rabbit hopped, making markdowns refine.
"With a hop, a skip, a magical tweak,
Let 'user-content-' lead the way, unique.
So, celebrate this change, both big and small,
For it makes a difference, after all."
🌟📝

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

Tips ### Chat There are 3 ways to chat with CodeRabbit: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit-tests for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit tests for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit tests.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.
somidad commented 7 months ago

In addition, I think it would be better if:

  1. My text conversion is natively supported by this plugin
  2. Prefix user-content- shall be configurable, whereas I hardcoded it
somidad commented 7 months ago

You can check a sample out.

Mara-Li commented 7 months ago

I'm sorry but I really don't understand what so you want. Is a feature used of a specific template?

somidad commented 7 months ago

I wanted/tried to implement Link to a block in a note

If I have the following in a note, Obsidian makes me navigate to the indicated block:

This is a paragraph ^24fe22e

Go to [[#^24fe22e|the paragraph]]

But AFAIK, this plugin does not support it yet.

So I first add text conversion from ^identifier to <a id="^identifier"></a> and I thought a link to this anchor would work.

But later I found that GitHub adds a prefix user-content- to the ID.

So this is my proposal to add the prefix to a link.

Mara-Li commented 7 months ago

What do you mean github add a prefix to the ID? You use github directly to publish your file? Github doesnt support [[^xxx]] syntaxe. That's not a lack on support on my side but on github side.

somidad commented 7 months ago

I use this plugin to publish the file. This plugin converts wikilink ([[note#^anchor]]) to html link (<a href="note_url#^anchor">alt_text</a>).

But this plugin leaves ^anchor (at the end of paragraph, not in link) as-is. So I configured text conversion to do this (^anchor to <a id="^anchor"></a>)

And if the file is published, GitHub adds the prefix so <a id="^anchor"></a> becomes <a id="user-content-^anchor"></a>. You can see the sample link above. When you inspect the html, you can see ID of user-content-.... I didn't write that prefix at the time I wrote the note.

Mara-Li commented 7 months ago

So it could be interesting to have an option to convert block-id link to html link with configurable id?

somidad commented 7 months ago

Yes, kind of.

Since this project (plugin) is specific to "Obsidian" and "GitHub", I think the proposed changes and additional proposal (converting ^anchor to <a id="^anchor"></a>) is not that unreasonable.

somidad commented 7 months ago

Ah, never mind. I found the following configuration does well what I intended:

    "censorText": [
      {
        "entry": "/ (\\^\\w+)$/gm",
        "replace": " <a id=\"$1\"></a>",
        "flags": "",
        "after": true
      },
      {
        "entry": "/#(\\^\\w+)\\)/gm",
        "replace": "#user-content-$1)",
        "flags": "",
        "after": true
      }
    ]