Giter VIP home page Giter VIP logo

vivify's Introduction

Vivify

Vivify brings your files to life in the browser! Vivify is primarily made to render Markdown and Jupyter Notebooks, but will also serve as a directory browser and let you view code files with syntax highlighting. See below for features!

Features

  • view Markdown with various features
  • view Jupyter Notebooks
  • view other plain text files with code syntax highlighting
  • view & navigate directories, hidden "back to parent directory" button at the top-left of the file viewer
  • easy to integrate with any editor for live synchronization (see editor support)
  • Vivify server starts lazily and automatically shuts down when no more viewers are connected
  • various customization options

If you need any additional features, feel free to open an issue or contribute!

Markdown features

You can find examples for all supported features in the files in the tests/ directory. In case you are looking at these on GitHub, keep in mind that GitHub doesn't support some of the features that Vivify supports so some things may look off.

Editor Support

Vivify has a simple API to integrate your favorite editor so the viewer live updates to any changes as you are typing and the scrolling is smoothly synchronized!

See below for a list of existing editor plugins. In case your favorite editor is not yet supported, use these as an example to write your own and add it to the list!

Existing integration

Installation

Once you have Vivify installed, use it by running viv with any text file or directory as an argument! See below for installation options.

Packaged

  • Homebrew: brew install jannis-baum/tap/vivify
  • AUR: e.g. yay -S vivify

Manual

  • download & unpack the latest release for your system (macOS or Linux)
  • add the two executables to your $PATH

Compile yourself

  • make sure you have yarn, make and zip installed
  • clone the repository
  • run yarn
  • run ./configure <install_dir>
  • run make install

Get help

Is something not working or do you have any questions? Start a discussion!

Acknowledgments

I have been using iamcco/markdown-preview.nvim for the longest time and started this project because

  1. I wanted a Markdown viewer that works with and without Vim and
  2. I wanted a Markdown viewer that supports file links like in GitHub.

Looking at iamcco/markdown-preview.nvim helped in development, particularly with regard to which npm packages to use.

vivify's People

Contributors

jannis-baum avatar tuurep avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

vivify's Issues

Filename can't contain non-ascii character (such as `ä`, `é`)

Describe the bug

I had a file with letter ä in the name. Trying to open this with viv opens a File not found page.

The address field shows the correct name for the file.

The tab title shows ä as %C3%A4 initially, but if I move the tab around, it then shows the correct name.

To Reproduce

Vivify version 0.0.3, browser Firefox

  1. Create a file with the name café.md
  2. Write contents Foo Bar QuuuX
  3. Open file with viv café.md

Expected behavior

File should be found

Additional context

I guess it's debatable whether filenames are allowed to contain non-ascii characters.

Also can't handle spaces in filenames (while I don't name files this way myself, I often see it in the wild for whatever reason). Example Foo Bar.md

Preview text files & directories

  • files that don't end in .<x> instead of .md: wrap content as ```<x>\n<content>\n```
  • show directories as list of contents with clickable links

Back button visibility & text

Hi Team,

I was going to suggest a back button for navigation up the directory structure until I discovered you already have one. However by default it is invisible until it is hovered over, not sure if that was the intention?

viv_parent_link

a#parent-dir {
    position: fixed;
    height: 3rem; width: 3rem;
    line-height: 3rem; text-align: center;
    background-color: #333;
    border-radius: 9999px;
    left: 2rem; top: 2rem;
    opacity: 0;
}
a#parent-dir:hover { opacity: 1; }

Fix CI not running on external PRs

The CI doesn't run on fork branches so PRs end up not showing CI fails such as the linter complaining. Once we merge them it does fail on main though.

Example: On #30 the CI didn't run and then it failed on main after merging.

Be less strict about markdown file extension

Noticed that Vivify doesn't consider a file with extension .markdown as a markdown file. I always thought .md and .markdown were the "normal" extensions for a markdown file. Turns out it's not well specified and there are more than these two.

I think I found out how to allow more than .md extension: in src/parser/parser.ts line 37 add another ... && fileEnding !== 'markdown' and now I can work with files that have extension .markdown.

I propose to add an array of common markdown extensions and then something like if fileEnding not in <thatArray> then ... Y'know

I think we should go by what Vim (and NeoVim) set as filetype markdown by file-extension,

in $VIMRUNTIME/filetype.vim you can see that it's these:

.markdown
.mdown
.mkd
.mkdn
.mdwn
.md

nvim's filetype.lua uses the exact same ones.

Linux bin depends on alias open=xdg-open

Hello, great project

I can't run the executable viv before changing the last line from open $VIV_ADDR/viewer$FILE to xdg-open $VIV_ADDR/viewer$FILE

Simple thing that might go unnoticed so thought I'd give a warning :)

Update dependencies & README

  • in particular those dependencies that have security alerts
  • review README to mention all the features that have been added recently

Viv hanging on "Launching server..."

Hey guys,

Anyone seen this? viv hanging on "Launching server..." on the latest commit. Reverting to 09e4264 (Merge pull request #70) launches normally.

To Reproduce

  1. Built using latest commit on main 26421fa
  2. launch viv

Screenshots

image

Additional context

This is my work PC, a different PC to what I've been using over the weekend, so maybe I missed something? Running Fedora 40, same as home.

AUR package

Hi, I've managed to create the AUR package!

https://aur.archlinux.org/packages/vivify

Just now managed to install it using AUR helper yay, here's what it looks like when querying with yay:

image

Very cool, works perfectly fine :)

You can take a look at the PKGBUILD here and if something looks wrong, let me know.

What I can think of is:

  1. Project has no license, if you have one in mind it might be wise to add
  2. The reason gcc-libs is in depends is just because it was raised in an error using namcap to check the package, so I guess it should be in there and it's good to be safe with the dependencies

Other than that, it's dead simple when I just run your build script 😄

Maybe we can add link on the README?

Distribute

min: release action to download executables
optimal: brew tap

Config options

with a config file (~/.vivify.json maybe?), offer to configure

  • #7
  • server port
  • open command #14
  • page titles

GitHub alert block quotes

  • add markdown-it plugin for rendering
  • figure out colors

OP @Tweekism in #87 (comment)

Right, so the reason I came looking for iamcco in the first place was to get these things working...

Screenshot from 2024-07-14 01-51-37

I have a young lady working in my office and she likes things to be pretty.

This is how it looks on GitHub:

Screenshot from 2024-07-14 01-52-44

Soooo.... add it to the list? 😅

Research from @tuurep

More information about those:

https://github.com/orgs/community/discussions/16925

Possible markdown-it plugin:

https://github.com/antfu/markdown-it-github-alerts

I think it goes more into the "additional" markdown but I would definitely be down to adding this

New config options

continued discussion from #34

  • custom client-side JS, multiple files
  • support multiple custom style sheets
  • 1-n files with globs to ignore files in directory lists
  • assign name attribute to directory items that include full name of file/directory for custom scripting & colors
  • option to redirect to ~-path
  • document changes/features
  • move all config to vivify-server so that viv doesn't depend on jq anymore done in #90
    • port & timeout are trivial
    • open command can be handled by having the option to pass an argument to vivify-server and then open that; we can probably even use a Node-way of doing it so we don't need any program anymore

Can't run `viv` / `:Vivify` on a directory (-buffer)

Hi I just noticed how Viv can be used as a handy file browser and loved how you've implemented that (apart from colors but I'll delve into that later 😄 ).

However it struck me as odd that you can't simply viv <dir> and the only way to get a directory listing in the browser was for me to first open a (regular) file and then navigate to parent with the hidden button (top left).

It's not clear to me if this is a Linux vs MacOS issue. But either way I identified the problem and have a fix ready:

In the file viv you see if argument is a regular file:

if ! [ -f "$1" ]; then
    echo "$1 not found"
    exit 1
fi

You can add a directory check too:

if ! [ -f "$1" ] && ! [ -d "$1" ]; then ...

For me that fixes both viv <dir> on bash and :Vivify in a (n)vim directory buffer.

Windows support

Hello, there's any plan for windows support on this?
Thanks

Investigate Packaging for Fedora

Hi Jannis,

I'd like to look in to packaging this for Fedora like we do for Arch.

You can assign this one to me as well if you like.

Markdown tables styling isn't set

Hi again,

Today I was writing a Markdown table for the first time and noticed the styling's very crude - it's the same situation as with the blockquotes earlier

For example this markdown table:

| Option | Description | Possible values |
| ------ | ----------- | --------------- |
| `foo`  | Bar         | baz             |

Renders like this with vivify:

image

Github would style it like this:

image

I suggest we should once again copy the CSS github uses for tables. I can find out & send a PR if you agree.

Just have to remember that dark mode might need another color for the table border, but I'll see if another element uses the same color first.

Various config.json issues

Unlisted dependency on jq

Hi, the primary reason I filed this under "bug" is that I noticed to use the config.json file in the first place requires package jq to be installed on the user's system but this is not listed as a dependency for the project anywhere. I didn't have this installed and that was hard to pinpoint 😄

So for example, this package is a Vivify dependency for me: https://archlinux.org/packages/extra/x86_64/jq/

Maybe the readme should have a Dependencies -section, and do you know if there could be more?

"pageTitle" doesn't seem to work with basename or join

If my goal is to set the pagetitle as basename(path), what should I set on the key? I figured it should be this:

{
    "pageTitle": "basename(path)"
}

However each time I try this, using viv gives an "Unable to connect" firefox page.

What has worked as a "pageTitle" key:

  • "'foo'" will show <title> as foo
  • "console.log('foo')" will show <title> as undefined (correct, I think 😄 )
  • "path" will show the full path, which is a good sign
    • Also: "console.log(path)" correctly shows undefined

Same issue (Unable to connect) applies for trying to use the join func, as an example:

  • "join('foo', path)"

This is what the Firefox page looks like:

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.