www/about.html

   1 <div class="post">
   2 <h1>About GreaterWrong</h1>
   3 <div class="post-body">
   4         <p>GreaterWrong is an alternative way to browse <a href="https://www.lesswrong.com/">LessWrong 2.0</a> (<a href="https://www.greaterwrong.com/">show</a>)
   5                 and the <a href="https://forum.effectivealtruism.org/">Effective Altruism forum</a> (<a href="https://ea.greaterwrong.com/">show</a>),
   6                 with a focus on speed and usability.</p>
   7         <p>Source code is <a href="https://github.com/kronusaturn/lw2-viewer">available on GitHub</a>, and issues are <a href="https://saturn.obormot.net/LW2Reader/Issues">tracked on OborWiki</a>.
   8         <h2>Contact</h2>
   9         <p>
  10         Email: <a href="mailto:admin@greaterwrong.com">admin@greaterwrong.com</a><br>
  11         or IRC: <a href="https://kiwiirc.com/client/irc.freenode.net?channel=#lesswrong">#lesswrong on freenode</a> (ping saturn2)
  12         </p>
  13         <h1>Features</h1>
  14         <div class='contents'>
  15                 <div class='contents-head'>Contents</div>
  16                 <ul class='contents-list about-page-toc'>
  17                         <li class='toc-item-1'><a href='#themes'>Themes</a>
  18                         </li><li class='toc-item-1'><a href='#adjustable-width'>Adjustable width</a>
  19                         </li><li class='toc-item-1'><a href='#adjustable-text-size'>Adjustable text size</a>
  20                         </li><li class='toc-item-1'><a href='#appearance-customization'>Appearance customization</a>
  21                         </li><li class='toc-item-1'><a href='#keyboard-based-navigation'>Keyboard-based navigation</a>
  22                         </li><li class='toc-item-2'><a href='#post-listing-quick-nav'>Post listing quick-nav</a>
  23                         </li><li class='toc-item-2'><a href='#new-comments-quick-nav'>New comments quick-nav</a>
  24                         </li><li class='toc-item-2'><a href='#accesskeys'>Accesskeys</a>
  25                         </li><li class='toc-item-1'><a href='#rss-feeds'>RSS feeds</a>
  26                         </li><li class='toc-item-1'><a href='#archive-browser'>Archive browser</a>
  27                         </li><li class='toc-item-1'><a href='#auto-generated-toc'>Auto-generated table of contents</a>
  28                         </li><li class='toc-item-1'><a href='#markdown-editor'>Markdown editor</a>
  29                         </li><li class='toc-item-1'><a href='#special-linking-options'>Special linking options</a>
  30                         </li><li class='toc-item-1'><a href='#compact-comments-list-view'>Compact comments list view</a>
  31                         </li></ul>
  32         </div>
  33         <h3 id='themes'>Themes</h3>
  34         <img src='/assets/about-page-images/theme-selector.png' style='width: 32px; float: left; margin: 0.4em 1em 0 0.125em; '>
  35         <p>Nine different themes are available. Click on the theme selection buttons at the top left of the page (labeled with the letters ‘A’ through ‘I’) to select a theme. (You can also change the theme in the Customize Appearance window (see below).)
  36         <h3 id='adjustable-width'>Adjustable width</h3>
  37         <img src='/assets/about-page-images/width-adjustment.png' style='width: 96px; float: left; margin: 0.4em 1em 0 0.125em; '>
  38         <p>You can adjust the width of the content column by clicking on one of the three width selection buttons at the top-right of the page.
  39         </p>
  40         <p>The options are:
  41         </p>
  42         <ul><li>fixed-width, narrow (the default setting) ( <img src='/assets/about-page-images/fixed-width-narrow.png' style='width: 18px; position: relative; top: 2px; '> )
  43         </li><li>fixed-width, wide ( <img src='/assets/about-page-images/fixed-width-wide.png' style='width: 18px; position: relative; top: 2px; '> )
  44         </li><li>fluid width (which expands to fill the width of the browser window) ( <img src='/assets/about-page-images/fluid-width.png' style='width: 18px; position: relative; top: 2px; '> )
  45         </li></ul>
  46         </p>
  47         <h3 id='adjustable-text-size'>Adjustable text size</h3>
  48         <img src='/assets/about-page-images/text-size-adjustment.png' style='width: 95px; float: left; margin: 0.4em 1em 0 0.125em; '>
  49         <p>You can adjust the size of the body text by clicking the text size adjustment buttons at the top-right of the page. (This changes the text size of both posts and comments.) Click “−”/“+” to decrease/increase the text size; click “A” to reset to the default text size.
  50         </p>
  51         <p>(The text size adjustment buttons are hidden when viewing pages that don’t contain any body text. You can always adjust the text size setting via the Customize Appearance window (see below), regardless of what page you’re viewing.)
  52         <p><em>This feature does not currently work in Firefox (or other Mozilla-based browsers).</em>
  53         </p>
  54         <h3 id='appearance-customization'>Appearance customization</h3>
  55         <img src='/assets/about-page-images/customize-appearance.png' style='width: 432px; display: block; margin: auto; '>
  56         <p>In addition to picking a theme, you can further customize the way that GreaterWrong looks. Click on the “sliders” ( <span style='font-family: Font Awesome; font-weight: 900; color: #777; font-size: 1.125rem;'>&#xf1de;</span> ) icon, at the top left of the page, to bring up the Customize Appearance window. The following settings are available:
  57         </p>
  58         <ul><li>Text size
  59         </li><li>Invert colors (a.k.a. photo-negative)
  60         </li><li>Saturation
  61         </li><li>Brightness
  62         </li><li>Contrast
  63         </li><li>Hue rotation (a.k.a. color-shift)
  64         </li></ul>
  65         <h3 id='keyboard-based-navigation'>Keyboard-based navigation</h3>
  66         <p>GreaterWrong has extensive support for keyboard-based navigation.
  67         <h4 id='post-listing-quick-nav'>Post listing quick-nav</h3>
  68         <p>When viewing any post listing page (e.g., the front page), you can:
  69         <ul><li>Select the next post with the <code>.</code> (period) key;
  70         </li><li>Select the previous post with the <code>,</code> (comma) key;
  71         </li><li>Use the <code>Enter</code> key to go to the selected post
  72         </li></ul>
  73         <p>(These are not accesskeys; you need not hold any modifier keys to use them.)
  74         </p>
  75         <h4 id='new-comments-quick-nav'>New comments quick-nav</h3>
  76         <img src='/assets/about-page-images/new-comments-quick-nav.png' style='width: 128px; float: right; margin: 0.4em 0 0.125em 1em; '>
  77         <p>When viewing any post page that contains new comments (as shown by the new comment indicator on the bottom right of the page), you can:
  78         </p>
  79         <ul><li>Jump to the next new comment with the <code>.</code> (period) key, or by clicking the “next new comment” button: <img src='/assets/about-page-images/next-new-comment-button.png' style='width: 23px; vertical-align: middle;'>;
  80         </li><li>Jump to the previous new comment with the <code>,</code> (comma) key, or by clicking the “previous new comment” button: <img src='/assets/about-page-images/previous-new-comment-button.png' style='width: 23px; vertical-align: middle;'>.
  81         </li></ul>
  82         <p>(These are not accesskeys; you need not hold any modifier keys to use them.)
  83         </p>
  84         <h4 id='accesskeys'>Accesskeys</h4>
  85         <p>The following <a href="https://en.wikipedia.org/wiki/Access_key">accesskeys</a> are available:</p>
  86         <table class='accesskey-table' border='1'>
  87                 <tr><th>Action</th><th>Key</th></tr>
  88                 <tr><td>Switch to <mark>H</mark>ome (a.k.a. “Frontpage”) view</td><td>h</td></tr>
  89                 <tr><td>Switch to <mark>F</mark>eatured (a.k.a. “Curated”) view</td><td>f</td></tr>
  90                 <tr><td>Switch to <mark>A</mark>ll (a.k.a. “Community”) view</td><td>a</td></tr>
  91                 <tr><td>Switch to <mark>M</mark>eta view</td><td>m</td></tr>
  92                 <tr><td>Switch to Recent <mark>C</mark>omments view</td><td>c</td></tr>
  93                 <tr><td>Switch to A<mark>r</mark>chive view</td><td>r</td></tr>
  94                 <tr><td>Switch to Abou<mark>t</mark> page</td><td>t</td></tr>
  95                 <tr><td>Switch to <mark>U</mark>ser or Login page</td><td>u</td></tr>
  96                 <tr><td>Switch to Inb<mark>o</mark>x page</td><td>o</td></tr>
  97                 <tr><td><mark>S</mark>earch</td><td>s</td></tr>
  98                 <tr><td><mark>N</mark>ew post or comment</td><td>n</td></tr>
  99                 <tr><td><mark>E</mark>dit current post</td><td>e</td></tr>
 100                 <tr><td>Jump up to top of page</td><td>,</td></tr>
 101                 <tr><td>Jump down to bottom of page</td><td>.</td></tr>
 102                 <tr><td>Jump to top of comments section</td><td>/</td></tr>
 103                 <tr><td>Next page of current post/comment listing</td><td>]</td></tr>
 104                 <tr><td>Previous page of current post/comment listing</td><td>[</td></tr>
 105                 <tr><td>First page of current post/comment listing</td><td>\</td></tr>
 106                 <tr><td>Start/resume s<mark>l</mark>ideshow</td><td>l</td></tr>
 107                 <tr><td>Switch to next view on user page</td><td>x</td></tr>
 108                 <tr><td>Switch to previous view on user page</td><td>z</td></tr>
 109                 <tr><td>Toggle expanded/compact comment list view</td><td>`</td></tr>
 110                 <tr><td>Open Customize Appearance window</td><td>;</td></tr>
 111                 <tr><td>Switch to theme A (default theme)</td><td>1</td></tr>
 112                 <tr><td>Switch to theme B (dark theme)</td><td>2</td></tr>
 113                 <tr><td>Switch to theme C (grey theme)</td><td>3</td></tr>
 114                 <tr><td>Switch to theme D (ultramodern theme)</td><td>4</td></tr>
 115                 <tr><td>Switch to theme E (simple theme)</td><td>5</td></tr>
 116                 <tr><td>Switch to theme F (brutalist theme)</td><td>6</td></tr>
 117                 <tr><td>Switch to theme G (readthesequences.com theme)</td><td>7</td></tr>
 118                 <tr><td>Switch to theme H (classic Less Wrong theme)</td><td>8</td></tr>
 119                 <tr><td>Increase text size</td><td>=</td></tr>
 120                 <tr><td>Decrease text size</td><td>-</td></tr>
 121                 <tr><td>Reset to default text size</td><td>0</td></tr>
 122                 <tr><td>Cycle through content width settings</td><td>′</td></tr>
 123                 <tr><td>Bold text (in post/comment editor)</td><td>k</td></tr>
 124                 <tr><td>Italic text (in post/comment editor)</td><td>i</td></tr>
 125                 <tr><td>Insert hyperlink (in post/comment editor)</td><td>l</td></tr>
 126                 <tr><td>Blockquote text (in post/comment editor)</td><td>q</td></tr>
 127         </table>
 128         <p>(See the <a href="https://en.wikipedia.org/wiki/Access_key">Wikipedia article on accesskeys</a> to find the appropriate modifier key(s) that trigger accesskeys in your browser.)
 129         </p>
 130         <h3 id='rss-feeds'>RSS feeds</h3>
 131         <img src='/assets/about-page-images/rss-feeds.png' style='width: 123px; display: block; margin: auto; '>
 132         <p>The following RSS feeds are available:
 133         </p>
 134         <ul><li><a href="https://www.greaterwrong.com/?format=rss" rel="nofollow">Home (“Frontpage posts”)</a>
 135         </li><li><a href="https://www.greaterwrong.com/index?view=featured&format=rss" rel="nofollow">Featured (“Curated posts”)</a>
 136         </li><li><a href="https://www.greaterwrong.com/index?view=new&all=t&format=rss" rel="nofollow">All (“Community posts”)</a>
 137         </li><li><a href="https://www.greaterwrong.com/index?view=meta&all=t&format=rss" rel="nofollow">Meta posts</a>
 138         </li><li><a href="https://www.greaterwrong.com/recentcomments?format=rss" rel="nofollow">Recent comments</a>
 139         </li><li>Feeds for just the comments, just the posts, or both comments and posts, of an individual user (for example, here’s <a href="https://www.greaterwrong.com/users/eliezer_yudkowsky?show=comments&format=rss"> Eliezer Yudkowsky’s comments feed</a>); these are accessible from the user’s page (e.g., here’s <a href="https://www.greaterwrong.com/users/eliezer_yudkowsky">Eliezer Yudkowsky’s page</a>)
 140         </li></ul>
 141         <h3 id='archive-browser'>Archive browser</h3>
 142         <img src='/assets/about-page-images/archive-browser.png' style='width: 420px; display: block; margin: auto; '>
 143         <p>GreaterWrong has an archive browser that lets you quickly find posts from any time in LessWrong’s past. Click the Archive link at the top of the page to go to the archive browser.
 144         </p>
 145         <h3 id='auto-generated-toc'>Auto-generated table of contents</h3>
 146         <p>Posts that contain multiple headings (such as <a href="https://www.greaterwrong.com//posts/kAgJJa3HLSZxsuSrf/arbital-postmortem">this one</a>) have automatically-generated tables of contents (with links), for easy navigation.</p>
 147         <h3 id='markdown-editor'>Markdown editor</h3>
 148         <img src='/assets/about-page-images/markdown-editor.png' style='width: 425px; display: block; margin: auto; '>
 149         <p>GreaterWrong’s comment/post editor lets you write Markdown directly (much like the old Less Wrong site). However, to save you from having to type all the markup manually, the buttons on the editing toolbar insert each of the various types of available markup (e.g., to make text bold, add a hyperlink, insert an image, etc.) into your post or comment. (Hover over each button in the editing toolbar to see what it does.)
 150         </p>
 151         <p>You can click the “Show Markdown hints” link to show a help popup, or click the “Markdown” link to go to the <a href="http://commonmark.org/help/">Markdown reference website</a>.
 152         </p>
 153         <p>When you submit a post or comment, GreaterWrong saves the raw text and markup you entered, so that you can easily edit it later.
 154         </p>
 155         <h3 id='special-linking-options'>Special linking options</h3>
 156         <p>You can click the “three dots” (<span style='font-family: Font Awesome; font-weight: 900; color: #00e; font-size: 1.125rem;'>&#xf141;</span>) icon in the post info line to open special linking options:
 157         </p>
 158         <img src='/assets/about-page-images/special-linking-options.png' style='width: 358px; display: block; margin: auto; '>
 159         <h3 id='compact-comments-list-view'>Compact comments list view</h3>
 160         <p>You can  view lists of comments (e.g., the Recent Comments page) in a compact view that fits many more comments:
 161         </p>
 162         <img src='/assets/about-page-images/compact-comments-list-view.png' style='width: 441px; display: block; margin: auto; '>
 163         <p>Use these buttons to switch between expanded view (the default) and compact view:
 164         </p>
 165         <img src='/assets/about-page-images/comments-view-selector.png' style='width: 101px; display: block; margin: auto; '>
 166         <p>When in compact view, you can hover over the ellipsis (“…”) icon on the right-hand-side of the comment to reveal the full comment:
 167         </p>
 168         <img src='/assets/about-page-images/expanded-comment-in-compact-view.png' style='width: 434px; display: block; margin: auto; '>
 169         <hr/>
 170 </div>
 171 </div>