[Feature] Descriptive file (kind-of like a README.md)?

[Timtam]

Hello there,

it sounds rather trivial, but I don't know if anything like this already exists. I noticed that you've got Descript.ion support, but I think that doesn't really do what I want.

I would love to have support for drop-in files which get shown when entering a folder. Something like, if the folder you've currently opened in HFS contains a README.md, render it below (or above, somewhere on the page) the file/folder structure. Kind of like the GitHub README.md works. I don't know which file type support would be the most useful here, but I could imagine markdown and/or html to be really useful. What do you say, would that be useful? Or do we have something like this in HFS already?

Thanks!

[rejetto]

descript.ion is used to store comments for each file. What you ask is not offered at the moment. It sounds like a job for a plugin, anyway. Do you want to attempt making it?

[Timtam]

Doesn't sound too hard to do, i'd need to take a look at whatever plugin API documentation exists.

[rejetto]

you will find a "make a plugin" link in the readme. I'm trying to keep the documentation complete, but surely could be better. There are a few plugins out there, that one can use as an example. I'll help you, as time permits. The interface is made with React, and not knowing it can make things a bit harder. But i'm suspecting this can be done even without messing with React, but it may not be optimal.

[rejetto]

for example, without messing with React, one could add a fixed <div id="readme-container" /> in the page, then see each file, and if it's named "inject-readme.html" (example), one can read its content using fetch, and use it to fill the div.

[rejetto]

i'm also interested in knowing what parts of the documentation should be improved, by your experience

[Timtam]

Thanks, those hints help quite a bit already. Do we have a plugin available somewhere were I can check how plugins with dependencies would work? I know my way around React and thought I could just use libs like react-markdown here, but I obviously have to require/import that at some point and pack all dependencies into a few files that I can use for the plugin. Do you know of anything like this which I can use as an example?

[rejetto]

what you can do as a plugin is to run some vanilla javascript in the backend and/or in the browser, so the tools for dependencies you have are the ones provided by node.js and the browser. You can decide if you want to use some building system/transpiler, but I never did for a plugin. If you use React without a transpiler, you won't have jsx. Personally, I don't use jsx even for the rest, as I don't like it. I've noticed this vanilla markdown lib that may do the job https://github.com/markedjs/marked

[rejetto]

before making it a plugin, one can experiment or be satisfied with just customizing its own server. I just made a working example and published it in the wiki https://github.com/rejetto/hfs/wiki/Customization#append-html-content-from-a-special-file-entering-a-folder

[rejetto]

making it work with markdown is trivial, and published in the following section https://github.com/rejetto/hfs/wiki/Customization#append-markdown-content-from-a-special-file-entering-a-folder

making these examples i noticed that it would be good to have an event for page/folder change, since the browser doesn't offer any.

I just realized that one can pack this into a plugin just by moving generated "custom.html" file into the plugin's folder, and creating an essention "plugin.js"

[rejetto]

just fixed the md example, it was throwing error if the first page you loaded had a readme.md because the lib was not loaded yet

[Timtam]

Thanks, that customization just did the trick for me!

[Timtam]

Hello there, sorry for reopening. I updated to 0.52.2 and am facing an issue where the readme file won't show up in Chrome (tested with incognito here on https://hoard.reaperaccessibility.com/), although it doesn't happen all the time. On dev console I get the following error, I don't know if its related. Can you give me some hints what to look out for? I know its not much because ... minimized and obfuscated, but anyway.

index-f_a4EAov.js:93 Uncaught (in promise) TypeError: Cannot read properties of null (reading '$dialog')
    at index-f_a4EAov.js:93:55362
    at index-f_a4EAov.js:93:55394

[rejetto]

hey, that was enough. :) it's a bug in the update, yes. i made the fix, and i will release another update soon. i'm waiting just 2-3 days to see if anything else comes up. if you don't want to wait, you can install this now: 0.52.3-beta2: https://github.com/rejetto/hfs/files/15068803/hfs-windows.zip

[Timtam]

Thank you! I tried installing 0.52.3 via npx, but the version doesn't seem to be available there. Is that on purpose or did something go wrong when pushing?

Thanks again!

[rejetto]

i just forgot :D thanks for reporting! published now.

[Timtam]

I found a different thing that maybe you can help with. If you navigate to this page https://hoard.reaperaccessibility.com/Presets%20for%20Plug-ins%20and%20Instruments/RPL%20(Reaper%20preset%20libraries you'll see the readme coming up. If you then hit the "parent folder" button within the UI the interface will update and show a "not found" text instead of the readme text. How can I make that go away and respect my movement?

[rejetto]

well, that's not HFS but the customization i wrote for you. it's not perfect and should be fixed, but i don't have a solution ready, it takes time and work. is anyone willing to work on it? :)

[Timtam]

I fixed it within my custom html, thanks.

[rejetto]

cool! it would be nice if you share your fix or, if you prefer, directly edit the wiki page where i published it https://github.com/rejetto/hfs/wiki/Customization#append-markdown-content-from-a-special-file-entering-a-folder

[Timtam]

Sure, i'll put it in both places. Here's my current solution, although that might still change in the future:

<div id='inject-readme'></div>

<style>
ul.dir { flex: unset }
</style>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<script>
window.addEventListener('load', () => {
    let lastPath = ''
    HFS.watchState('uri', (uri) => {
        if(uri !== lastPath) {
            let el = document.getElementById('inject-readme')
            lastPath = uri
            el.innerHTML = ''
        }
    })
    HFS.onEvent('entry', ({ entry }) => {
        let el = document.getElementById('inject-readme')
        if (entry.n.toLowerCase() === 'readme.txt' && entry.uri.startsWith(location.pathname)) { // load
            fetch(entry.uri).then(x => x.text()).then(x => 
                el.innerHTML = marked.parse(x))
        }
    })
})
</script>

[rejetto]

i saw your changes. Thank you! Would you say that this first part

let lastPath = ''
    HFS.watchState('uri', (uri) => {
        if(uri !== lastPath) {
            let el = document.getElementById('inject-readme')
            lastPath = uri
            el.innerHTML = ''
        }
    })

can be simplified with this?

HFS.watchState('uri', () => 
    document.getElementById('inject-readme').innerHTML = '' )

as the lastPath seems now unnecessary after your change

[Timtam]

Probably, yeah. I however already reverted to a previous state and changed a thing because in Chrome incognito mode here the window.onload event didn't fire properly or to early, so I had to come up with something different to make the readme show up. That is what it looks like right now:

setTimeout(() => {
    let lastPath = ''
    HFS.onEvent('entry', ({ entry }) => {
        let el = document.getElementById('inject-readme')
        let {pathname} = location

        if(pathname !== lastPath) {
            el.innerHTML = ''
            lastPath = pathname
        }
        if (entry.n.toLowerCase() === 'readme.txt' && entry.uri.startsWith(location.pathname)) { // load
            fetch(entry.uri).then(x => x.text()).then(x => 
                el.innerHTML = marked.parse(x))
        }
    })
}, 0)

[rejetto]

onload was supposed to wait for md library to be available. you gave up on md?

[Timtam]

Nope, still using that here, but this solution was the only one I could think of since onload doesn't work, and it seems to work for now. Probably not 100% reliable, but it works for now. I just don't know why onload doesn't work incognito on two different machines here, maybe its firing too early already?

[rejetto]

i want to spend some time on this. If i can fix it, it can be a nice plugin

[rejetto]

removed my post, as i realized that i need to wait for next release to be published. keep you posted

[rejetto]

from 0.53.0-beta10 you can install rich-folder plugin. it is technically quite different, so i hope it may solve your problem. it is also supports different formats, you can config. any feedback is welcome!

[rejetto]

on your hfs right now, i see that the file on the home is often NOT loaded on first access, but just on reload. you can see that by opening with a private/incognito window. are you currently using my plugin? i'm really interested in knowing if the rich-folder plugin works correctly for you.

[Timtam]

Hi there, sorry for the late reply. The reason I didn't respond is because we changed to a dual system. Basically we do have a small part where can input some static information from a markdown file, but the table on our home page is generated by reading a csv file (its easier to maintain than writing the table in markdown). We're therefore loading two individual files right after another right now, a markdown file followed by a csv file. I don't think that is exactly what your plugin would allow us to do, right? Weirdly enough, the readmes come up just fine for me even on incognito windows. We changed to the new loadScript() API with 0.53 recently too, and it has been working just fine since I did so.

[rejetto]

i confirm that the plugin is not doing what you said, at the moment. fyi, putting the content INSIDE <header is making it not scroll, because that's marked as sticky. This is not a problem on bigger screens where you can see all at once, but it is on mobile (prevents seeing the list).

do you have this extra content only on home, or also other folders? if yes, can you tell me one?

[Timtam]

Thanks, I didn't know that. Its currently before-filelist I think, I don't know where else to put it so that it still shows up before the file listing. We're using the CSV only in this one place, but we do have other subfolders were we are using markdown files, for example here: https://hoard.reaperaccessibility.com/Presets%20for%20Plug-ins%20and%20Instruments/RPL%20(Reaper%20preset%20libraries)/

[rejetto]

you are probably using afterMenuBar. Try using afterHeader instead. anyway, if this website is only targeting blind users, what i said may not be a real problem.

[rejetto]

i understand tables in MD may be not nice to update. I suspect the MD library is actually allowing html, so maybe it is possible to use an html table inside your md file. It's just an idea, but you may like what you already have of course!