feat: add filetype icons

[tuurep]

Refers to discussion in comments here: #27 (comment)

Motivation: no more ambiguity whether an item is a regular file or a directory

Thoughts about symlinks

I was gonna also add trailing @ for symbolic links, the same way as ls -F does, but actually symbolic links don't really work at all (you can't resolve the path by clicking on it) so if we wanna look into those, that's a separate issue.

My take about that would be: if resolving a symlink path adds too much complexity, maybe not worth adding. Otherwise, sure.

Didn't add separate dir color at this time

The trailing slash was a great point to start, it's fine by me if the entries are styled as a link (<a>) because that's what they literally are.

What do you think?

[tuurep]

CI works, thanks!

[jannis-baum]

Sounds good about the symlinks!

---

I made some more adjustments toward the rough direction of how GitHub lists directory contents (namely styling, unicode icons & sorting directories above). Let me know if you're happy with it like this @tuurep and if yes we can merge :)

[tuurep]

Really good ideas!

Most importantly and my first thought: if we use dir icons, there's no longer need for the trailing slash 😄 So I would just drop it, which makes the title of this PR a little funny but it is what it is. renamed

Please give me some time, after pulling in your commits I get a File not found page when trying to view any directory.

Sorting directories first is great, that's one idea I had on the back of my mind.

Warning: offtopic
Another being a hide dot-prefixed files -toggle. <- if I was the sole user of this, I'd want to do it with a keybind, something like Ctrl + H, but that has the downside of not being discoverable.
/offtopic

[jannis-baum]

Really good ideas!

Most importantly and my first thought: if we use dir icons, there's no longer need for the trailing slash 😄 So I would just drop it, which makes the title of this PR a little funny but it is what it is.

True about the title haha! But I agree, I removed the trailing slash

Please give me some time, after pulling in your commits I get a File not found page when trying to view any directory.

I also just had this problem and realized it was just because I was using my old installed version of viv instead of the current one in the repo. With yarn dev running and VIV_PORT=3000 ./viv . it's all good on my side. Let me know if that works for you!

I can make a new release after this PR.

Warning: offtopic
Another being a hide dot-prefixed files -toggle. <- if I was the sole user of this, I'd want to do it with a keybind, something like Ctrl + H, but that has the downside of not being discoverable.
/offtopic

My answer ended up too long for this haha so I just opened #35 to reply

[tuurep]

Hmm I don't understand why it doesn't work with my way of updating the executables, here's what I did the whole time so far:

./build.sh && ./install.sh

where

build.sh:

#!/bin/sh

cd `dirname $0`

rm -rf bin

node_modules/.bin/tsc --project . \
    && node_modules/.bin/pkg . \
    || exit 1

mkdir bin/macos
mv bin/vivify-server-macos bin/macos/vivify-server
cp viv bin/macos/viv

mkdir bin/linux
mv bin/vivify-server-linux bin/linux/vivify-server
cp viv bin/linux/viv

install.sh:

#!/bin/bash

cp -f ./bin/linux/viv ./bin/linux/vivify-server ~/.local/bin/ \
        && echo Installed

Then killall vivify-server && viv .

Maybe it's the build script?

yarn dev running and VIV_PORT=3000 ./viv

This however did work.

I was a little worried about how the icons would look on different themes, since the color of them doesn't adapt, right?

I think by luck, it's looking great for both your dark theme and my (or Github's) light theme, comparison:

Looks great on both, love it. I don't know where the icon is coming from, is it a font? The way you added this it's themable through the custom stylesheet I think? That's pretty essential imo.

[tuurep]

I can make a new release after this PR.

I have just a couple pending things if you wanna include them. But it's okay either way.

Here's my lil' todo list:

vivify
    - viewing `/`
        - works with address field `viewer//` but not otherwise
    - send light theme PR
        - github syntax highlight
        - remove personal choices: slightly darker fg in <code> ...
        - dark theme needs 2 new colors for blockquote
    - viewing a non-md file has a very slightly indented first line

Last one is such a small thing and I feel cursed for even noticing it xD

[jannis-baum]

Hmm I don't understand why it doesn't work with my way of updating the executables, here's what I did the whole time so far:

Hm, strange. What do you get when running which viv? Maybe you installed an older version somewhere else on your path that's not ~/.local/bin/ and takes precedence?

I was a little worried about how the icons would look on different themes, since the color of them doesn't adapt, right?

No, they are just very cheap unicode characters🙈 So technically if they don't work on all background colors for someone we can blame the typeface that person is using lol.

At the end of the day using proper icons would be much nicer but it's customizable with the CSS config so people can switch to their own icons if they feel the need for something nicer.

Looks great on both, love it. I don't know where the icon is coming from, is it a font? The way you added this it's themable through the custom stylesheet I think? That's pretty essential imo.

Yes, exactly. Easily themable; default is just an emoji and can be adjusted to any other character or even image in one line of CSS.

[jannis-baum]

I have just a couple pending things if you wanna include them. But it's okay either way.

Yes sounds good! Then let's do v0.1.0 after that stuff is done☺️

Last one is such a small thing and I feel cursed for even noticing it xD

Hahaha I've noticed that as well. This is actually not just an issue with non-md files but code blocks in general. The first line is always incorrectly indented. Feel free to investigate ^^ I haven't looked into it.

[tuurep]

Hm, strange. What do you get when running which viv? Maybe you installed an older version somewhere else on your path that's not ~/.local/bin/ and takes precedence?

I do get the ~/.local/bin/viv

It's really pointing to this PR though because when I run the ./build.sh && ./install.sh on main or any other branch, then directory paths work just fine again. By the way, viewing non-directory files on this PR branch still works as normal, to be clear.

The fact that the yarn dev does however work, is even more confusing.

Icon themability sounds great thank you 👍

On code blocks:

This is actually not just an issue with non-md files but code blocks in general. The first line is always incorrectly indented.

Didn't know this, and it helps :)

[jannis-baum]

It's really pointing to this PR though because when I run the ./build.sh && ./install.sh on main or any other branch, then directory paths work just fine again. By the way, viewing non-directory files on this PR branch still works as normal, to be clear.

The fact that the yarn dev does however work, is even more confusing.

Yes, very confusing. Was able to reproduce & my most recent commit fixes it for me. Might be a bug with how it is packaged? No idea. Problem was that item.path of the Dirent object was undefined, which shouldn't happen according to TypeScript. So very weird. Please confirm if it works for you as well! :)

[tuurep]

Thanks so much. Works! Can be merged now :)

(looks like I can't 'approve' your commit in my own PR though?)

[jannis-baum]

(looks like I can't 'approve' your commit in my own PR though?)

Yeah haha I agree GitHub should add the feature of reviewing your own PR. I'll merge when I'm on my computer :)