Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature request: and Congrats #271

Open
ghost opened this issue Jul 21, 2024 · 6 comments
Open

feature request: and Congrats #271

ghost opened this issue Jul 21, 2024 · 6 comments
Labels
difficulty/hard Hard to deal with / implement against documentation Improvements or additions to documentation enhancement New feature or request help wanted Extra attention is needed question Further information is requested

Comments

@ghost
Copy link

ghost commented Jul 21, 2024

Your plugins are so cool, congratulations! I am impressed with Enhanced Readibilities, Page properties, Inline links preview. It is difficult to know which one is better.

You are already full of work as I can see... but I am going to share some ideas with you. I want to tell what plugins are missing in VitePress. There are workarounds for them, so they are not urgent though:

  1. Syntax for markdown to embed video from services (youtube, vimeo) iframe. (workaround: HTML syntax)

  2. Plugin to enable Authentication. Login+password or extension to the router. Locking parts of pages is difficult :-/ Inspirations: https://wordpress.org/plugins/groups/ and https://authjs.dev/

  3. Component to export the current page to .pdf file format. Some plugins export to pdf at build time. However, there is not a plugin to add button in each page. When you click on that button, JavaScript would then convert the page to .pdf and download it in the browser at runtime.

  4. In your website, there is a "mind map" component in each page of your documentation. Are you going to release it for VitePress? It would be so good!

  5. It would be great to have a component for "Excalidraw" mind map editor.

  6. A "Languages dropdown" component. When you click on a language, JavaScript translates the page in runtime. (workaround: offer translated files before the build time).

I hope you appreciate the ideas and that they improve your work. Thank you

@northword
Copy link
Member

northword commented Jul 21, 2024

it is to bring a few missing plugins that are available for markdown-it or for vuepress, but not yet for VitePress.

Both VitePress and VuePress use MarkdownIt, and you can configure the Markdown It plugin yourself.
see https://vitepress.dev/guide/markdown#advanced-configuration

Currently there are new APIs appearing for the first time for translations API that are not from Google. For example, Mozilla released a translations API that they use in Firefox. It would be good to offer a translation plugin, something that shows a "Languages dropdown" and translates the page in real time. Currently, we need to translate before the build time.

Personally (and not on behalf of the nolebase community), I don't think it's a good idea to get translations from the API at build time, and I don't even think it's a good idea to automate translations like that. With translations built into all major browsers, and many browser translation extensions available, there seems to be absolutely no need to request an API at build time.

Also, many of your plugins need to be configured in config.js and index.js at the same time.

no ideas, see vuejs/vitepress#3966


And PRs welcome

@nekomeowww nekomeowww changed the title Congrats feature request: and Congrats Jul 21, 2024
@nekomeowww
Copy link
Member

Hey, welcome to Nolebase community! Thank you for your suggestions!

  1. Any kind of plugin that enables Authentication would be so good. It may be Auth wrapper, or a plugin that simply extend the router locally according to some configs. At the moment anything related to Login+password, or related to locking some pages or parts of the pages (!), is difficult to achieve. Something similar to these: wordpress.org/plugins/groups/ or https://authjs.dev/

This was actually an ongoing PR over #75 , but it has been blocked so long due to my insufficient knowledge to lazy hydration of Vue x Vite SSG. Perhaps, @northword, @LittleSound, and @kwaa would somehow get interested in it and help me out. Perhaps, if you would like to do some research on this and help us, feel free to do at anytime.

  1. A plugin to export the current page to other file format. There are many plugins that try to "export to pdf". But the name is not what it means. These plugins actually convert all markdown to pdf files at build time. That is good, but... it could exist a simple button in each page. When you click on this button, JavaScript would then convert the page to pdf and download it in the browser at runtime.

Nice request tho, I understand many of you folks may use Nolebase and it's plugins to directly host Zotero or thesis knowledge bases, sometimes an "Export as" option would help a lot if ever wanted to share it to someone in a format of file. However, this is kind of hard to support, since for any rendered pages, withthe native print functionalities from browsers, tons of CSS styles, and layout features are not supported and we can do nothing. The only one way to achieve such capabilities is rendering when SSG (but the styles and layouts are still a hell of supporting issue).

  1. There is a "mind map" in each page of your documentation, with the word "Constructing" passing by... That seems like the mind map that Obsidian offers. If that kind of mind map that shows Related Posts ever comes to be released as a plugin for VitePress, that would be so good! In a first moment, it could simply show the related posts from the links in the page. It doesn't need to be deeper than that in a first moment.

Yes it is, the same functionalities, and the similar looking. The only problem is I haven't had a time to implement it with relations extracted from tagging and pages. Will be a big plugin, stay tuned!

  1. Talking about Mind Maps, I would like to see a plugin for "Excalidraw" mind map editor. They offer an editor for React, I don't know how you would wrap this as a Vue component. But you can wrap it as a Web Component.

Wait, why do you want t drawable canvas in a static site? Could you please share more thoughts and explain your need in detail? We would love to hear from you.

@nekomeowww nekomeowww added documentation Improvements or additions to documentation enhancement New feature or request help wanted Extra attention is needed question Further information is requested labels Jul 21, 2024
@ghost
Copy link
Author

ghost commented Jul 21, 2024

Thank you both for reading me. Congratulations again.

  1. Haha Yes, (nekomeowww), a drawable canvas is unusual in a static site. You enjoy integrating systems, as I can see (obsidian and vue) (zotero and pdf) (auth and vitepress). So you may understand my desire to integrate Excalidraw and VitePress :)

Well, the main reason is silly, actually. I'm looking at the convenience that would exist by avoiding loading a separate tab in the browser to load excalidraw. (◕‿◕)🌸
The user would click a fixed button at any time within the VitePress interface to create a new excalidraw map in a modal/popup and save it to the computer.

Secondly, what I really dream could exist is an integration of the excalidraw API with VitePress.
5.1. I'm thinking about the possibility of selecting excerpts from a text and, using keyboard shortcuts, sending this selection directly to the Excalidraw editor that would be open within VitePress. And so the Excalidraw editor would automatically paste this information through text within an expected graphic shape (square, circle or just text).
The possibility of making these additions in series would be very convenient. Only after reading the text would I worry about actually creating the mind map. The information would already be within the mind map, you just need to position it correctly.

5.2. Saving the creations on the computer would be enough. In turn, it would be cooler if the Excalidraw editor within VitePress would also able to ask the person if they want to save their mind map as an image, to insert that image directly into the markdown file that is currently being viewed. The plugin would take care of saving the photo in a folder and adding the URL link inside the markdown file, to avoid me doing this manual work every time a mind map is created. (It seems like a feature for a limited niche, but when you think about this suggestion again, you realize it's a simplicity that doesn't exist in many integrations today and would benefit a lot of people, in fact).

5.3. A more experimental and ambitious idea, perhaps unlikely ~, is... to try to integrate the markdown file's FrontMatter with the Excalidraw API. That's what I'm talking about. I keep dreaming about the possibility of filling in the FrontMatter properties of each file following a pattern, so that, when clicking in the Excalidraw editor to create a new mind map, that mind map would already come with a model loaded. Excalidraw will extract the words for each FrontMatter property from the Markdown file that is currently open. Once this exists, you can create all sorts of “mind map models”. For example, if there is a files section in VitePress based on a "glob pattern", so that the category only includes reports that are written with predictable and determined categories, in this context: I am interested in the mind maps always being the same mold. Extracting this simple information from FrontMatter would be very convenient, because I would only need to click to create a new mind map, so I could get an updated mind map with the most recent data from the markdown file. Everything would happen in one place. The post would remain the place that I have to update, and in turn, the mind map generates itself. This more or less can be created, because it is possible to manipulate Excalidraw elements, their contents, colors and positions through its API.
Although it is experimental and serves a limited niche, you can imagine that Excalidraw would stop being just a mind map editor and become an interface in its own right that visually translates what is written in the text - right from the moment you open it. the editor within VitePress.

In a VitePress that is used as a collective knowledge base, this would be pretty cool, as a way to allow readers to view text in image format, following rules specified according to FrontMatter. This is very different from previewing the text beforehand through the Table Of Content.

Anyway, ideas... some absurd, some more absurd, and some at least listening to people's needs and desires.

  1. I agree with you on the subject of translations (, northword). It is not a good idea to translate with APIs at build time. What I tried to suggest is different: I hope to see a dropdown component that translates in real time by clicking on it, similar to what browsers do.

@nekomeowww nekomeowww added the difficulty/hard Hard to deal with / implement against label Jul 22, 2024
@nekomeowww
Copy link
Member

Thanks for your long writing though, very much impressed by your motivation and thoughts.

The user would click a fixed button at any time within the VitePress interface to create a new excalidraw map in a modal/popup and save it to the computer.

Are you saying you want to have VitePress to be interactive to user's computer? Where does this happen? With development server or with deployed static site? With only a downloadable file? Or not

Or... should I understand your needs like "Export canvas as image" then prompt users to save.

Well, while we surely have abilities to access and manipulate files and directories of users through https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API, I think we can achieve further capabilities for "save" and "export" features. For example: we could have a "save & export" plugin that adds a little hoverable button to images, audios, videos, embedded PDFs, Obsidian Canvas, Excalidraw, and tldraw files so that users can interact with.

What do you think @northword and @LittleSound? This should be quite small thing to implement.

to avoid me doing this manual work every time a cognitive map is created.

What is cognitive map?

to insert that image directly into the markdown file that is currently being viewed.

Still not sure what do you mean by "insert that image directly into the markdown file".
But I have tried a few experiment back in a year ago that I think that probably related to.

I tried to use OpenAI's API with ChatGPT to automatically add and summarize tags for my Nolebase documentations at that time. However, the implemented for development server only, which means the capabilities to read the source Markdown file and manipulate with newly summerized tags is only available when you are in vitepress dev command.

LLM.Generated.Tags.mp4

(This was the demo I recorded for the LLM generated tags, sorry it's in Chinese)

Was this the "such functionality" you want?

If that's true, may I ask you the reason why you would like to use VitePress as an editor, rather than using Obsidian, Logseq to manage your knowledge base?

@northword
Copy link
Member

For example: we could have a "save & export" plugin that adds a little hoverable button to images, audios, videos, embedded PDFs

That's a good idea. We can have that.

Saving the creations on the computer would be enough. In turn, it would be cooler if the Excalidraw editor within VitePress would also able to ask the person if they want to save their cognitive map as an image, to insert that image directly into the markdown file that is currently being viewed. The plugin would take care of saving the photo in a folder and adding the URL link inside the markdown file, to avoid me doing this manual work every time a cognitive map is created.

If I understand you correctly, you want to export the edited Excalidraw file as an image and insert it into the MD file. This seems like it should be an editor plugin (like obsidian or vscode), not a vitepress plugin. vitepress is just a static page generator, not an editor.

I think it's closer to vscode-plugin-drawio-integration or something like that?

My workflow is to edit the file in vscode/obsidian, with the vitepress page only as a rendered result. And you actually want to turn vitepress into something similar to obsidian, editing files on pages generated by vitepress (like Excalidraw)?

(Please point out if I have misunderstood.)

@ghost
Copy link
Author

ghost commented Aug 22, 2024

I was trying to find words this whole time, I was not ignoring your messages.

I have edited my previous messages to make them clearer to understand.

Dear neko and north, I continue impressed with your work. Don't lose time in micro-details, because you always do great with your ideas!

I intended to use VitePress with a group of scientists. They would read their own documents. They are not developers, so they should not need to learn how to use GitHub, VSCode or similar platforms just to update their files.

I also do not enjoy the idea of imposing an editor, for example: obsidian or logseq. They should continue to edit their files in the text editors that they prefer, or inside the interface.

That is the reason why I tried to add drawing maps to VitePress as components. Although VitePress is built locally, people would be able to edit the markdown file or the mind map inside the interface, and then the interface sends this updated version to the server. If we install CI/automation to build the website automatically, then this is almost close to a full website, although being static. Easy to maintain, secure, and people should only install the application. Nothing else.

You have understood my ideas. My english is also not good. And I have studied a little of chinese, because Brazil and China are brother countries! So it is okay to show your video in your language. I believe english people also show videos in their languages. The app you have tried to create using openAI is in very good quality!

Yes, neko, you get the idea: this diagram.net as a component inside vscode.

Cognitive map, oops, I have tried to say mind maps, neko.

Do great in life.
All the best.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
difficulty/hard Hard to deal with / implement against documentation Improvements or additions to documentation enhancement New feature or request help wanted Extra attention is needed question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants