doc: add example usage

[chiefjester]

• add example usage in gif format
• fixes No screenshot #90

[chiefjester]

@justinmk - First, thank you for creating this plugin. I believe this plugin is more vim like than what is the default in vim netrw. I hope I do justice on showing users how dirvish used, just a quick sample of usage.

Let me know if I need to redo/edit the gif. Also, let me know if you want the gif to be hosted externally like in Imgur. The gif itself is around 3mb. So I'm leaning towards hosting it outside so that it won't get downloaded by users. But the disadvantage of that is there's a disconnect between the repo and the asset.

You could preview the formatting in my fork:
https://github.com/thisguychris/vim-dirvish/tree/thisguychris-patch-1

[justinmk]

First, thank you for creating this plugin. I believe this plugin is more vim like than what is the default in vim netrw

Thanks!

Thank you for the effort but I don't think a 3MB animation is justified, at least not for what's shown here (hard for the viewer to follow what's going on). Also custom statusline, desktop background, custom colorscheme, are quite irrelevant/distracting.

[chiefjester]

hey @justinmk 👋

Apologies, I was just reading what you said on the earlier comment that you wanted a 5~10-second gif instead of a screenshot. Hence this PR. This certainly isn't supposed to be the final pass. I was actually asking for your thoughts on what should I include.

So far here's what I included in the gif.

1. Listing the whole directory via - command
2. moving files to a folder via % (this makes use of Shdo and %)
3. moving back using relative path ../ instead of %
4. renaming using a dot .

Is there anything you want to add? I think doing those with screen keys on gives the best bang for the buck on a 10-second gif.

As for the filesize of the gif, It certainly isn't the final size, I was just commenting on how this file would get downloaded with the user. Since you gave a static image of around 192kb.

With the changes you mentioned, I use default settings of vim with only dirvish added. I've also removed the custom background you mentioned that was distracting for you.

I did an optimized version of the gif, close to the size of this static image, the 10-second gif is now 142kb. Which is much smaller than the static image that was added. With this size, we could tweak what features you want to add or if the features I list suffice?

[justinmk]

Just these 2 :

1. listing a directory
2. some Shdo command

but without the screenkeys, they are too noisy. They aren't needed for Shdo anyway, and the other actions are very simple. Also few people are going to scrutinize the readme demo so the main goal is to give viewer a sense of what it looks like.

[chiefjester]

Hi @justinmk 👋

So taking your feedback, I've created 2 gifs, the first one is using a minimal version of neovim. The reason is, I find it better if I execute Shdo and it stays in the editor. As opposed to vim's default behavior that goes outside of the editor, which I think is a bit jarring.

Here's one the first one using minimal config in neovim:

Here's one that uses vim:

Both file sizes are about the same ~175kb. I'm using a higher quality version so it looks nice in retina screen, but I can optimize it by scaling 1/2 the size.

Additional Note:
I added a search in the directory via /, I wanted to show that, because vim-dirvish have it's own search regex when searching in the directory.

[chiefjester]

Hi @justinmk 👋
I've pushed the neovim version in the PR. Please let me know if you want me to rebase the commits to clean up the PR.

[justinmk]

Nice, thanks! 175kb is fine. Will use the Nvim version, but can you delete the frames that show the shell (fish shell especially, but any shell is just a waste of frames)

[chiefjester]

Hi @justinmk

So yeah, dropping those frames definitely helped, further reduced the file size by 8%. 👍 🙋‍♂️

the optimized gif that uses neovim

I've removed the start and the end parts of the gif that includes fish-shell

I have updated the PR with the updated gif.

[chiefjester]

hi @justinmk 👋

I've rebased the PR and merged all my commits into a single commit now. So merging should be straight forward. 👌

[idbrii]

Instead of including the gif in the repo, it'd be great to link to the gif on github instead:

![demonstration of vim-dirvish filtering and using Shdo](https://user-images.githubusercontent.com/532797/92531465-e28e9a00-f260-11ea-86ef-e3599cee08aa.gif)

It doesn't seem relevant to include a history of example screenshots in history, so it seems unnecessary to include the screenshots in the git repo.

You could also edit your issue comment to get the url.

Having a small size gif is still worth it since it decreases page load time!

[chiefjester]

hi @idbrii 👋

I guess it depends if we treat the gif as part of the documentation. But I do see the value in your proposal. I'm just not sure if we can count hotlinking an image from an issue on an image if it's a permanent link or ephemeral.

It's a trivial change nonetheless, but I let @justinmk decide what to do. I'm good either way.