
Pagemap: A mini map for your website - owenshen24
https://larsjung.de/pagemap/
======
emmanueloga_
Pretty clever. I was trying to figure out if there was some DOM API to paint
HTML to canvas that I did not know about.... I had to stare at it a few times
to realize what was going on :-)

The code runs a DOM query to find the elements configured through the keys of
the `styles` object on the parameters/configuration, then for each of those
selectors, calculates a rect relative to the size of the canvas, and paints a
colored rectangle for each of those elems (using the color coming form the
values on styles). [1]

1:
[https://github.com/lrsjng/pagemap/blob/master/src/pagemap.js...](https://github.com/lrsjng/pagemap/blob/master/src/pagemap.js#L93-L100)

------
_Chief
This is really nice work. Tried it out on a blog[1], works really well with
content-heavy technical docs. Had to add some custom stylings for new blocks,
but that was also pretty easy to do.

1: [https://peteretelej.github.io/setup-ubuntu-
vps](https://peteretelej.github.io/setup-ubuntu-vps)

~~~
OJFord
Thanks, unlike the submission that demo actually works for me (!) - and is
longer, which is a big bonus for demoing this in particular.

------
hs86
I am currently trying out this Chrome extension [0] which brings a mini map to
each website and my first impression is rather positive. The performance
impact might be a little too much on my older laptop but on the desktop it
seems fine (for now). I don't know if this is any useful but it just looks
nice. :)

[0] [https://github.com/chintown/monocle](https://github.com/chintown/monocle)

------
hyperpallium
Funny, the demo on that page doesn't work for me (mobile, FF), but the other
two examples do (at least, I assume they're working correctly - a minimap with
a grey band for the viewer):

[https://larsjung.de/pagemap/latest/demo/boxes.html](https://larsjung.de/pagemap/latest/demo/boxes.html)

[https://larsjung.de/pagemap/latest/demo/text.html](https://larsjung.de/pagemap/latest/demo/text.html)

------
TekMol
That reminds me that I sometimes like to switch to a "Show me only function
names" view in VIM.

This kinda solves it:

    
    
        :%g/^{/normal! zf%
    

To make the info lines dimmer, this works:

    
    
        :hi Folded ctermfg=239
        :hi Folded ctermbg=233
    

Only problem is that comments outside of functions are still displayed.

~~~
nergal
Sounds you might want to use "tagbar"?
[https://github.com/majutsushi/tagbar](https://github.com/majutsushi/tagbar)

~~~
TekMol
I don't think that would work for me.

First of all, I prefer to have less on my screen, not more. I believe that the
less visual clutter you have on the screen the better you feel and the more
productive you are.

Second, activating tagbar adds a bar on the right. That means my code window
will shrink. But my code window is exactly the size I like it.

Third, I would have to trust those many thousands of lines of code by "someone
from the internet".

~~~
cameronbrown
> First of all, I prefer to have less on my screen, not more. I believe that
> the less visual clutter you have on the screen the better you feel and the
> more productive you are.

Completely agree on this one. I'd probably prefer it if you can toggle between
tagbar's view and your code (there may or may not be a way to do that, I
didn't look at the docs).

> Third, I would have to trust those many thousands of lines of code by
> "someone from the internet".

This is true, but then again, you're already trusting vim, Linux and millions
of lines of code all around you ;) It all comes down to trade-offs at the end
of the day.

------
fredley
This is great. Minimaps are so useful when editing code I'm amazed nobody's
thought to do them for web. For viewing documentation in particular this would
be amazing.

------
vortico
This is really cool and looks/feels a lot like the Sublime Text minimap, which
I use a lot. I have a feeling it might be abused a lot though, like scroll
wheel hijacking.

------
Mr_Modulo
Hey it's like Sublime Text!

I don't see how this is useful. It reminds me of the redundant scroll
indicators on the top of some websites.

~~~
brianpgordon
It would function great as a scrollbar for long-form documentation on desktop.
The built-in browser scrollbar only conveys your current position in the
document. A minimap lets you, for example, quickly flick directly to the next
section header even if it's currently off-screen. It would also help reduce
cognitive load if you're trying to alternate back and forth between two
sections of the same document.

------
makach
Nice achievement! But is it just an approximation of the content? It does not
appear to be a scaled-down version of the web page - so I wonder how useful it
really is. I wish there was a more substantial demo page with more graphical
artefacts.

~~~
brianpgordon
Check out the 'styles' section of the usage notes. Tags (selectors?) specified
in the configuration have an associated bounding box that will get drawn on
the minimap in the configured color.

------
strider12
the only thing this needs is a way to display text on the mini-map.. this is
so we can manually add titles so we know what we might be scrolling towards.
small tiny text. this functionality seems to be missing from most mini-maps.

------
gitgud
Great little library, can the title be renamed to include "Show HN: "?

Not sure if you have to be the author of the _thing_ , to use the "Show HN: "
title tag... but it would be helpful to people browsing...

~~~
flixic
I believe you do have to be the author to add "Show HN". Show HN indicates
that the maker is present in the thread. If we lose this distinction, Show HN
becomes quite meaningless as a prefix.

~~~
owenshen24
Yeah, I was under this impression as well.

I was wondering if something like this existed the other day, and I was
excited to see this / share it, but I didn't want to put people under the
false impression that I'd written this library.

------
nfoz
If this is useful, then it's something the browser could render, instead of
the page itself. We could add it to desktop UI toolkits like Gtk/Qt.

------
zapzupnz
I'd love to see this done with the page map features from Xcode, with
clickable section headings that show up on mouseover and so on.

------
als0
It feels really nice and minimal. I just wish it only appeared while
scrolling, as it distracts me while I read the page content.

~~~
cm23
Hides the map canvas when the page is idle:
[https://codepen.io/CalvinMorett/full/LYPbPXM](https://codepen.io/CalvinMorett/full/LYPbPXM)

~~~
als0
Many thanks!!

------
pseingatl
Couldn't get it to work.

~~~
asplake
On iPhone there was nothing visible on the main page. The boxes demo didn’t
scroll enough for a worthwhile demo. The text demo however looked pretty good.
Somewhat sublime-like as observed in other comments.

~~~
vinay427
Same on Chrome on Android, and on Firefox the boxes demo minimap was off the
screen and the text demo page was much shorter for some reason.

~~~
unicornporn
A no go on Firefox mobile on Android too, even with "Request desktop site"
enabled.

------
thomasfromcdnjs
Amazing work

