Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Website #12127

Closed
wants to merge 160 commits into from
Closed

New Website #12127

wants to merge 160 commits into from

Conversation

nik-rev
Copy link
Contributor

@nik-rev nik-rev commented Nov 25, 2024


Link

helix-editor.vercel.app

I have completely rebuilt the Helix website and documentation as well as the landing page to:

  • Create a lot of new content to make Helix more approachable by newcomers by providing detailed guides, documentation and tips
  • Add a powerful search feature
  • Emphasize its beautiful purple colors

The new website is available at helix-editor.vercel.app

More Screenshots

image

image

image

New pages I've put in some time to write step-by-step guides for newcomers to Helix who may be interested. These pages have been written from scratch:
  • Basics
  • Multiple Cursors
  • Text Objects
  • Surround
  • Language Support -- Guide for installing language servers and formatters
  • List of Themes
  • Buffers -- Detailed information on how to effectively use Buffers in Helix
  • Recipes -- Integrations with tools such as Lazygit
  • Refactor Examples -- Using helix editor to become efficient
  • This Site -- Documentation for the site itself, e.g. how to run and maintain it, as well as project structure.

Migrated Pages

I've also migrated some pages from the Wiki to make them more discoverable:

  • Vision
  • Creating a Release
  • Architecture
  • Debuggers
  • Formatters
  • Language Servers
Map of old docs to new docs

This can be used to setup redirects

Old page New page
Installation /start-here/installation
Package Managers /start-here/installation#package-managers
Building from Source /start-here/installation#building-from-source
Usage /start-here/basics
Registers /reference/registers
Surround /usage/surround
Text Objects /usage/text-objects
Syntax aware motions /usage/text-objects#syntax-aware-motions
Keymap /reference/keymap
Commands /reference/typed-commands
Language Support /help/language-defaults
Migrating from Vim Probably not needed anymore, since the news docs include lots of guides, it means that people who already know modal editors will be able to adjust quickly.
Configurartion /configuration/editor
Themes /reference/custom-themes
Key Remapping /configuration/remapping
Languages /configuration/languages
Adding Languages /contributing/languages
Adding text object queries /contributing/textobject-queries
Adding indent queries /contributing/indent-queries
Injection Queries /contributing/injection-queries

@David-Else
Copy link
Contributor

@NikitaRevenco I have been experimenting with your way of taking screenshots as detailed in the site. My version of Gnome Terminal from Debian 12 is missing the select all and copy html options from the top right. It only has copy html from the mouse menu, and it is no good without select all. Newer Gnome does not use Gnome Terminal anymore, so I regret this method maybe redundant on newer distributions that use a more modern Gnome.

I have found a potentially better solution that may interest you, especially if you use Kitty rather than Gnome Terminal.

pipx install ansi2html

It works with Helix and 24bit color.

You can run a script that accepts stdin with ANSI codes and outputs the result to an HTML file.

#!/bin/bash
cat - | ansi2html >~/path/to/file.html

In Kitty:

map alt+s launch --type background --stdin-source=@screen --stdin-add-formatting sh /path/to/your/script

Here is the output:
image

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
.ansi2html-content { display: inline; white-space: pre-wrap; word-wrap: break-word; }
.body_foreground { color: #AAAAAA; }
.body_background { background-color: #000000; }
.inv_foreground { color: #000000; }
.inv_background { background-color: #AAAAAA; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-086156214 { color: #569CD6; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-086156214 { color: #569CD6; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-086156214 { color: #569CD6; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-086156214 { color: #569CD6; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-181206168 { color: #B5CEA8; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-086156214 { color: #569CD6; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-086156214 { color: #569CD6; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-106153085 { color: #6A9955; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-086156214 { color: #569CD6; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-086156214 { color: #569CD6; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-206145120 { color: #CE9178; }
.ansi38-062062061 { color: #3E3E3D; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-133133133 { color: #858585; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
.ansi38-255255255 { color: #FFFFFF; }
.ansi48-000122204 { background-color: #007ACC; }
.ansi38-212212212 { color: #D4D4D4; }
.ansi48-030030030 { background-color: #1E1E1E; }
</style>
</head>
<body class="body_foreground body_background" style="font-size: normal;" >
<pre class="ansi2html-content">
<span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030">  1</span><span class="ansi38-212212212 ansi48-030030030">  font_size</span><span class="ansi38-062062061 ansi48-030030030">               </span><span class="ansi38-212212212 ansi48-030030030">12.0</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                            
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030">  2</span><span class="ansi38-212212212 ansi48-030030030">  modify_font</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">cell_width</span><span class="ansi38-062062061 ansi48-030030030">  </span><span class="ansi38-212212212 ansi48-030030030">105%</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                            
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030">  3</span><span class="ansi38-212212212 ansi48-030030030">  hide_window_decorations</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">yes</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                             
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030">  4</span><span class="ansi38-212212212 ansi48-030030030">  enabled_layouts</span><span class="ansi38-062062061 ansi48-030030030">         </span><span class="ansi38-212212212 ansi48-030030030">tall,stack</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                      
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030">  5</span><span class="ansi38-212212212 ansi48-030030030">  enable_audio_bell</span><span class="ansi38-062062061 ansi48-030030030">       </span><span class="ansi38-212212212 ansi48-030030030">no</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                              
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030">  6</span><span class="ansi38-212212212 ansi48-030030030">  wayland_enable_ime</span><span class="ansi38-062062061 ansi48-030030030">      </span><span class="ansi38-212212212 ansi48-030030030">no</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                              
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030">  7</span><span class="ansi38-212212212 ansi48-030030030">  copy_on_select</span><span class="ansi38-062062061 ansi48-030030030">          </span><span class="ansi38-212212212 ansi48-030030030">yes</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                             
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030">  8</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                        
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030">  9</span><span class="ansi38-212212212 ansi48-030030030">  tab_bar_edge</span><span class="ansi38-062062061 ansi48-030030030">            </span><span class="ansi38-212212212 ansi48-030030030">top</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                             
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 10</span><span class="ansi38-212212212 ansi48-030030030">  tab_bar_style</span><span class="ansi38-062062061 ansi48-030030030">           </span><span class="ansi38-212212212 ansi48-030030030">separator</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                       
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 11</span><span class="ansi38-212212212 ansi48-030030030">  tab_separator</span><span class="ansi38-062062061 ansi48-030030030">           </span><span class="ansi38-206145120 ansi48-030030030">"</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-206145120 ansi48-030030030">|</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-206145120 ansi48-030030030">"</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                           
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 12</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                        
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 13</span><span class="ansi38-212212212 ansi48-030030030">  allow_remote_control</span><span class="ansi38-062062061 ansi48-030030030">    </span><span class="ansi38-212212212 ansi48-030030030">yes</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                             
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 14</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-086156214 ansi48-030030030">listen_on</span><span class="ansi38-062062061 ansi48-030030030">               </span><span class="ansi38-086156214 ansi48-030030030">unix</span><span class="ansi38-212212212 ansi48-030030030">:</span><span class="ansi38-206145120 ansi48-030030030">/tmp/kitty</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                 
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 15</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                        
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 16</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-086156214 ansi48-030030030">map</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-086156214 ansi48-030030030">ctrl</span><span class="ansi38-212212212 ansi48-030030030">+=</span><span class="ansi38-062062061 ansi48-030030030">              </span><span class="ansi38-206145120 ansi48-030030030">change_font_size</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-206145120 ansi48-030030030">all</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-181206168 ansi48-030030030">19</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                         
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 17</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-086156214 ansi48-030030030">map</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-086156214 ansi48-030030030">ctrl</span><span class="ansi38-212212212 ansi48-030030030">+enter</span><span class="ansi38-062062061 ansi48-030030030">          </span><span class="ansi38-212212212 ansi48-030030030">launch</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">--cwd=</span><span class="ansi38-206145120 ansi48-030030030">current</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                            
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 18</span><span class="ansi38-212212212 ansi48-030030030">  map</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">ctrl+]</span><span class="ansi38-062062061 ansi48-030030030">              </span><span class="ansi38-212212212 ansi48-030030030">next_window</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                     
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 19</span><span class="ansi38-212212212 ansi48-030030030">  map</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">ctrl+[</span><span class="ansi38-062062061 ansi48-030030030">              </span><span class="ansi38-212212212 ansi48-030030030">previous_window</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                 
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 20</span><span class="ansi38-212212212 ansi48-030030030">  map</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">alt+l</span><span class="ansi38-062062061 ansi48-030030030">               </span><span class="ansi38-212212212 ansi48-030030030">next_layout</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                     
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 21</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-106153085 ansi48-030030030">#</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">map</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">alt+s</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">launch</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">--cwd=current</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">--type</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">background</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">bash</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">-c</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">'random=$RANDOM</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">&amp;&amp;</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">                                                                                                           
</span><span class="ansi38-212212212 ansi48-030030030"></span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">gnome-screenshot</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">-f</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">"./screenshot_$random.png"</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">&amp;&amp;</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">krita</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">"./screenshot_$random.</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                         
</span><span class="ansi38-212212212 ansi48-030030030"></span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">png"'</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                 
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 22</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                        
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 23</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-106153085 ansi48-030030030">#</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">map</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">alt+s</span><span class="ansi38-062062061 ansi48-030030030">               </span><span class="ansi38-106153085 ansi48-030030030">copy_ansi_to_clipboard</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                        
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 24</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-106153085 ansi48-030030030">#</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">map</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">alt+s</span><span class="ansi38-062062061 ansi48-030030030">               </span><span class="ansi38-106153085 ansi48-030030030">launch</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">--type</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">background</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">--stdin-source=@screen</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">                                                                                                               
</span><span class="ansi38-212212212 ansi48-030030030"></span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-106153085 ansi48-030030030">copy_ansi_to_clipboard</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030"> 25</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-086156214 ansi48-030030030">map</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-086156214 ansi48-030030030">alt</span><span class="ansi38-212212212 ansi48-030030030">+s</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">launch</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">--type</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">background</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">--stdin-source=</span><span class="ansi38-206145120 ansi48-030030030">@screen</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-206145120 ansi48-030030030">--stdin-add-</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                   
</span><span class="ansi38-212212212 ansi48-030030030"></span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-206145120 ansi48-030030030">formatting</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-206145120 ansi48-030030030">sh</span><span class="ansi38-062062061 ansi48-030030030"> </span><span class="ansi38-206145120 ansi48-030030030">/home/david/Documents/scripts/terminal-screen-shot</span><span class="ansi38-062062061 ansi48-030030030"></span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                      
</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="ansi38-133133133 ansi48-030030030">  ~</span><span class="ansi38-212212212 ansi48-030030030">  </span><span class="inv38-166166166 inv48-030030030"> </span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                        
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                
</span><span class="ansi38-255255255 ansi48-000122204"> NOR   ~/.config/kitty/kitty.conf                                                                                                                                                   1 sel  26:1 
</span><span class="ansi38-212212212 ansi48-030030030">                                                                                                                                                                                                </span>

</pre>
</body>

</html>

There are some duplicated classes, but I am sure they can be stripped easily.

@nik-rev
Copy link
Contributor Author

nik-rev commented Nov 27, 2024

@NikitaRevenco I have been experimenting with your way of taking screenshots as detailed in the site. My version of Gnome Terminal from Debian 12 is missing the select all and copy html options from the top right. It only has copy html from the mouse menu, and it is no good without select all. Newer Gnome does not use Gnome Terminal anymore, so I regret this method maybe redundant on newer distributions that use a more modern Gnome.

I have found a potentially better solution that may interest you, especially if you use Kitty rather than Gnome Terminal.

pipx install ansi2html

It works with Helix and 24bit color.

You can run a script that accepts stdin with ANSI codes and outputs the result to an HTML file.

#!/bin/bash
cat - | ansi2html >~/path/to/file.html

Yes this is certainly better, since it doesn't rely on using Gnome terminal. perfect, thanks!

Today I've been working on making it so that each theme file in the "theme preview" can be automatically generated with a simple script which reads the theme .toml files

@uncenter
Copy link
Contributor

Has the "Speed of Thought" text been used with Helix historically? I can't find it on the current website or in the repository, just thought I should mention that it is Zed's tagline and you probably don't want to copy/infringe on that :)

@nik-rev
Copy link
Contributor Author

nik-rev commented Nov 28, 2024

Has the "Speed of Thought" text been used with Helix historically? I can't find it on the current website or in the repository, just thought I should mention that it is Zed's tagline and you probably don't want to copy/infringe on that :)

I actually thought of that myself, didn't know Zed also uses it. Helix's tagline is "The post-modern text editor" though, not related to Speed of Thought

On the landing page it's just a sentence to describe Helix, not the slogan. Thanks for letting me know though!

@uncenter
Copy link
Contributor

On the landing page it's just a sentence to describe Helix, not the slogan.

Right but to be fair it is the very first slogan box on the homepage. Maybe a derivative of the same idea could work? "Edit at Lightspeed" or "Edit at your own speed" or "Lightning quick edits"?

@archseer
Copy link
Member

So, as mentioned by someone earlier in the thread, I'd have preferred to see this split into several PRs, or at least a prior discussion before work was started. It's a large PR to review. As a whole, the content changes are a welcome and much needed improvement!

I have some issues with the site framework though:

  • I'd prefer the actual docs and the homepage remained separate. The homepage right now is extremely lightweight and uses next to no javascript. The new design just looks like the same generic Starlight template
  • I'm not sure we want to use a javascript framework. While it provides a lot of features, bitrot in the javascript ecosystem happens at a very fast pace (and pulls in thousands of dependencies). I have sites written both in gatsby and vuepress and between major version breaking changes and deprecations as frameworks cycle, it's a ton of work to keep up (e.g. vuepress -> vitepress/vuepress v2). Even mdbook upgrades have been a pain since we need to merge down theme updates. I'd prefer to see something simple, e.g. (https://docs.racket-lang.org/guide/). What do we do in five years when Starlight is deprecated by another framework, and Astro is several major releases ahead, with breaking changes?
  • We already had a PR to generate theme previews but decided against it: it's a bunch of additional code or manual work to maintain and we'd prefer that users preview themes by using :theme then tabbing through the list to see a live preview that's using their code rather than some abstract sample
  • From a stylistic nitpick: I prefer regular headings over Title Case, e.g. "Opening multiple files", not "Opening Multiple Files"
  • Architecture and Creating a release documents should probably be excluded
  • Merging and cleaning up the github wiki into docs is something I've wanted to do for a long time 👍🏻 we should remove the wiki, docs are much more discoverable

@David-Else
Copy link
Contributor

Has the "Speed of Thought" text been used with Helix historically? I can't find it on the current website or in the repository, just thought I should mention that it is Zed's tagline and you probably don't want to copy/infringe on that :)

I thought the phrase came from this book, I have used it on my blog before talking about Neovim and Helix... the first edition was published September 1, 2012:

image

@nik-rev
Copy link
Contributor Author

nik-rev commented Nov 28, 2024

So, as mentioned by someone earlier in the thread, I'd have preferred to see this split into several PRs, or at least a prior discussion before work was started. It's a large PR to review. As a whole, the content changes are a welcome and much needed improvement!

I have some issues with the site framework though:

* I'd prefer the actual docs and the homepage remained separate. The homepage right now is extremely lightweight and uses next to no javascript. The new design just looks like the same generic Starlight template

* I'm not sure we want to use a javascript framework. While it provides a lot of features, bitrot in the javascript ecosystem happens at a very fast pace (and pulls in [thousands of dependencies](https://github.com/helix-editor/helix/blob/a76bc35d566c9b2b9a6d923652d7458d47b5bd23/website/pnpm-lock.yaml)). I have sites written both in gatsby and vuepress and between major version breaking changes and deprecations as frameworks cycle, it's a ton of work to keep up (e.g. vuepress -> vitepress/vuepress v2). Even mdbook upgrades have been a pain since we need to merge down theme updates. I'd prefer to see something simple, e.g. (https://docs.racket-lang.org/guide/). What do we do in five years when Starlight is deprecated by another framework, and Astro is several major releases ahead, with breaking changes?
  
  * We were considering using something like [Dioxus, example of their docsite](https://github.com/DioxusLabs/docsite)

* We already had a PR to generate theme previews but decided against it: it's a bunch of additional code or manual work to maintain and we'd prefer that users preview themes by using `:theme ` then tabbing through the list to see a live preview that's using their code rather than some abstract sample

* From a stylistic nitpick: I prefer regular headings over Title Case, e.g. "Opening multiple files", not "Opening Multiple Files"

* Architecture and Creating a release documents should probably be excluded

* Merging and cleaning up the github wiki into docs is something I've wanted to do for a long time 👍🏻 we should remove the wiki, docs are much more discoverable

I can make another PR that updates the mdBook's documentation with this site's docs. Should it be a single PR or e.g. 1 for each changed page / 1 for each changed section etc.


What should be done about these termshots? They allow the tutorial to be followed online, and on mobile phone without having to use the editor.

image

Currently they are stored as HTML and then imported into each markdown file individually

From what I can tell, it's possible to do this in mdbook


Helix's current homepage includes a huge video which initially starts as a black screen.

Users need to click on the video in order to see it, and it doesn't really tell me that much about the editor

I would like to update the homepage to be like the homepage that I made with starlight, maybe the video can be kept but moved at the bottom


What do you think about these boxes?
image

I could re-create this on the main website. I would really like to do that, because I think it looks good. Thoughts?


What do you think about disabling the option to change theme for the documentation site? The docs should look the same as the homepage in my opinion. It's to reflect Helix's brand, which should be emphasized


I can migrate the mdBook to Dioxus, should I do it? Love the fact that it's written in Rust


anything else I should know?

@nik-rev
Copy link
Contributor Author

nik-rev commented Nov 28, 2024

On the landing page it's just a sentence to describe Helix, not the slogan.

Right but to be fair it is the very first slogan box on the homepage. Maybe a derivative of the same idea could work? "Edit at Lightspeed" or "Edit at your own speed" or "Lightning quick edits"?

this makes sense, It can probably be changed to something else for sure

@nlasvn
Copy link

nlasvn commented Dec 1, 2024

Can we have a light theme/dark theme toggle or theme picker on documentation like the old website? It's more of an accessibility thing because dark background + light text hurts my eyes alot, so I can't really read with this theme.

@uncenter
Copy link
Contributor

uncenter commented Dec 1, 2024

Can we have a light theme/dark theme toggle or theme picker on documentation like the old website? It's more of an accessibility thing because dark background + light text hurts my eyes alot, so I can't really read with this theme.

https://github.com/NikitaRevenco/helix/blob/a76bc35d566c9b2b9a6d923652d7458d47b5bd23/website/src/components/ThemeSelect.astro#L2

Copy link

@bdols bdols left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hello! wanted to learn helix and heard that the docs were being updated, looks pretty cool.


The final outcome will look like this:

<T.PythonFinalState />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the underscores are not rendering in Firefox and Chrome variants (Brave and Vivaldi) for me
image


<T.CursorOnFirst3 />

1. Press <kbd>C</kbd> which creates a cursor below, until you have a cursor on each individual `3`:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The C appears to render close to the same height as the 'c' in 'creates' and 'cursor'
image


<T.SelectedEveryWord />

1. This selected a few extra words than we wanted, but that's okay! One of the selections is the "primary" selection which we can tell by the `2:3` in the left right corner, which means that our primary selection is on line 2 character 3.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is supposed to be: "left right" -> "lower right"


1. Let's use <kbd>s</kbd> now which will ask us for a prompt.

This time, we won't just enter a string but we'll enter a very small regex: `\w+`, which selects every word:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe add "and then Enter"


<T.BackToPreviousSelection />

1. By pressing <kbd>Alt</kbd> + <kbd>,</kbd>, we can remove the primary selection, so that `def` is not selected:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe change this to: With the primary selection back to def, press "alt + ," to remove the primary selection


<T.RemovedPrimarySelectionAgain />

Press <kbd>)</kbd> a few times until you reach the next selection you want to remove. If you go over by one, just press <kbd>(</kbd> to make the previous selection primary.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how do you undo an "Alt+," ? It's not easy to correlate the selection with the index in the lower right corner, easy to lose track and make a mistake here.

1. Hit <kbd>Enter</kbd> to select and go to the beginning of each word with <kbd>b</kbd>

1. Move 3 characters to the right with <kbd>lll</kbd>
1. Press <kbd>e</kbd> to go to the end of each word and delete it:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe "delete it with d" to be explicit


A word consists only of alphanumeric characters and underscores, so `a-Z`, `0-9` and `_`.

For instance, take the following file, with two cursors:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's not obvious how to create a second horizontal cursor if someone wants to try this


A paragraph is delimited by two newlines, as well as start and end of files. For example in the following file with 3 cursors:

<T.MarkdownFile />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

copy/pasting this example can include trailing whitespace and break the examples with the lines that are supposed to be empty if there is only one cursor


- <kbd>Ctrl</kbd> + <kbd>w</kbd> + <kbd>h</kbd> moves to buffer above
- <kbd>Ctrl</kbd> + <kbd>w</kbd> + <kbd>j</kbd> moves to buffer below
- <kbd>Ctrl</kbd> + <kbd>w</kbd> + <kbd>k</kbd> moves to buffer on the right
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the ctrl+w+h and ctrl+w+k descriptions are swapped here

@nik-rev
Copy link
Contributor Author

nik-rev commented Dec 2, 2024

Can we have a light theme/dark theme toggle or theme picker on documentation like the old website? It's more of an accessibility thing because dark background + light text hurts my eyes alot, so I can't really read with this theme.

https://github.com/NikitaRevenco/helix/blob/a76bc35d566c9b2b9a6d923652d7458d47b5bd23/website/src/components/ThemeSelect.astro#L2

To be fair for accessibility it's important. Helix can still use a purple light theme

@nik-rev
Copy link
Contributor Author

nik-rev commented Dec 2, 2024

So, as mentioned by someone earlier in the thread, I'd have preferred to see this split into several PRs, or at least a prior discussion before work was started. It's a large PR to review. As a whole, the content changes are a welcome and much needed improvement!
I have some issues with the site framework though:

* I'd prefer the actual docs and the homepage remained separate. The homepage right now is extremely lightweight and uses next to no javascript. The new design just looks like the same generic Starlight template

* I'm not sure we want to use a javascript framework. While it provides a lot of features, bitrot in the javascript ecosystem happens at a very fast pace (and pulls in [thousands of dependencies](https://github.com/helix-editor/helix/blob/a76bc35d566c9b2b9a6d923652d7458d47b5bd23/website/pnpm-lock.yaml)). I have sites written both in gatsby and vuepress and between major version breaking changes and deprecations as frameworks cycle, it's a ton of work to keep up (e.g. vuepress -> vitepress/vuepress v2). Even mdbook upgrades have been a pain since we need to merge down theme updates. I'd prefer to see something simple, e.g. (https://docs.racket-lang.org/guide/). What do we do in five years when Starlight is deprecated by another framework, and Astro is several major releases ahead, with breaking changes?
  
  * We were considering using something like [Dioxus, example of their docsite](https://github.com/DioxusLabs/docsite)

* We already had a PR to generate theme previews but decided against it: it's a bunch of additional code or manual work to maintain and we'd prefer that users preview themes by using `:theme ` then tabbing through the list to see a live preview that's using their code rather than some abstract sample

* From a stylistic nitpick: I prefer regular headings over Title Case, e.g. "Opening multiple files", not "Opening Multiple Files"

* Architecture and Creating a release documents should probably be excluded

* Merging and cleaning up the github wiki into docs is something I've wanted to do for a long time 👍🏻 we should remove the wiki, docs are much more discoverable

I can make another PR that updates the mdBook's documentation with this site's docs. Should it be a single PR or e.g. 1 for each changed page / 1 for each changed section etc.

What should be done about these termshots? They allow the tutorial to be followed online, and on mobile phone without having to use the editor.

image

Currently they are stored as HTML and then imported into each markdown file individually

From what I can tell, it's possible to do this in mdbook

Helix's current homepage includes a huge video which initially starts as a black screen.

Users need to click on the video in order to see it, and it doesn't really tell me that much about the editor

I would like to update the homepage to be like the homepage that I made with starlight, maybe the video can be kept but moved at the bottom

What do you think about these boxes? image

I could re-create this on the main website. I would really like to do that, because I think it looks good. Thoughts?

What do you think about disabling the option to change theme for the documentation site? The docs should look the same as the homepage in my opinion. It's to reflect Helix's brand, which should be emphasized

I can migrate the mdBook to Dioxus, should I do it? Love the fact that it's written in Rust

anything else I should know?

at the moment I'm currently waiting on a reply for this comment to know how to move forward. please note! The website is not going to be merged, but it looks like the new improved docs may be. It's also possible I could use another framework which is in Rust and the maintainers will be okay with that. we'll find out!

@the-mikedavis
Copy link
Member

For context, I originally posted this is Matrix...

New content especially aimed at getting started is a valuable and uncontroversial improvement but I'm hesitant of the rest. I think it's very unlikely that we'd accept a change to switch off of mdBook unless it was for a very good reason like the mdBook project dying. Even if it does die though we could keep it alive for some time since it is a Rust project. I'm hesitant of any JS framework because of the churn characteristic to that ecosystem. Should Astro or Starlight introduce large breaking changes or die then we're forced to partially or fully rewrite the website. Using that framework also means requiring a JS toolchain installed in order to view changes locally. (With mdBook you need mdBook, but it's a smaller footprint than JS / NPM / etc. and uses the same build tools as Helix.) And it really explodes the dependency graph (looking at pnpm-lock.yaml). Starlight does look really good but it's a high price to pay for improved cosmetics.

Specifically about MDX: we should not be switching away from markdown specifically because of #997 and presenting documentation within the editor. (Ideally that PR would use markdown for the docs.) Ideally all documentation should be accessible in the editor and on the website including getting started guides. Using MDX locks us into using JS to display the docs makes an in-editor-docs feature much harder than it needs to be. Regular markdown is fairly straightforward and we already render it for things like LSP hover.

And a minor thing about the blog - I don't think it's that valuable to combine the landing page + blog website with the docs. Zola (used for that currently) is really minimal and straightforward, and it's another Rust project.


What should be done about these termshots?

I would prefer to see the termshot stuff dropped entirely. While it looks cool it presents new issues. The guide for creating termshots is asking a lot for a casual or drive-by contributor by requiring Linux+dbus+gnome-terminal, and it's a manual process to take a shot. Even with scripts to make it easier it would still be plenty of manual work that scales with the number of shots you need to take. And if we need to regenerate them for some reason we're talking about hundreds (thousands in the future?) of shots to retake. I also find the display to be cramped at 32x20. By making it fit for mobile I believe it no longer looks good for either mobile or larger displays.

They allow the tutorial to be followed online, and on mobile phone without having to use the editor.

I don't think there's very much value in this. If the goal is to teach people how to use the editor I think it's reasonable to expect that they have the editor installed after a certain point. Up to that point we should only need a 'hook' to get people interested rather than allowing the entire docs site to be followed online. For that something like a "tour" video is probably more appropriate, for example https://research.swtch.com/acme.

For the usage part / guides it would probably still be useful to have a way to show a snapshot of the editor state. I don't think there's anything off-the-shelf that would fit this really well but we could look into writing custom ```helix codefences and preprocessing them somehow to show a minimal Helix UI. I would strongly prefer that as much of the docs as possible remain markdown and this could be a way to achieve that and also show editor state. I might also be possible to make documentation like that work for #997 within the editor.

I would like to update the homepage to be like the homepage that I made with starlight, maybe the video can be kept but moved at the bottom

Like above I think some sort of hook video is probably what most "drive-by" viewers would look for plus some quick facts like that we build on tree-sitter and have LSP support. The tricky part of the current video is that it's an asciinema recording and that doesn't have an out-of-the-box way to add text or keypresses (AFAIK). So we could look at replacing and improving that video to be more of a tour.

About the boxes/bubbles: improving the display/styling sounds good but the content of the boxes probably needs some debate as already mentioned above. I would prefer we stay close to facts like that tree-sitter is a cornerstone. Some of the phrases like "become the 10x developer..." etc. seem too close to marketing material to me.

What do you think about disabling the option to change theme for the documentation site?

Defaulting to the same theme is ok but we should keep the theme switcher. Colibri doesn't have very high contrast and switching between light/dark is occasionally useful or necessary for accessibility.

I can migrate the mdBook to Dioxus, should I do it?

I think Dioxus's site looks cool but I'm not totally convinced it provides enough value to ditch mdBook for it. I'd want to see a very small MVP of a page or two of docs using their setup (and how large the code footprint of that is) before deciding either way.

I can make another PR that updates the mdBook's documentation with this site's docs. Should it be a single PR or e.g. 1 for each changed page / 1 for each changed section etc.

I would start small with a single page and go from there and we can reevaluate after a few PRs if necessary

anything else I should know?

  • I think I saw in the commit history something about adding analytics. This part I don't think we're interested in - I don't think we'd look at the analytics so I'd prefer we avoid collecting them at all.
  • Some of the docs - creating releases and vision - I think should stay as regular markdown files in the repo and not be a part of the website. I would also prefer to keep the blog with the homepage (https://github.com/helix-editor/website) rather than a part of the docs generated in this repo.
  • It may be easier to continue this discussion on a GitHub discussion rather than this PR. There're multiple conversations going on because of review of the content vs. review of the overall changes and lots of pushes so it's hard to follow.

@nik-rev
Copy link
Contributor Author

nik-rev commented Dec 2, 2024

For context, I originally posted this is Matrix...

New content especially aimed at getting started is a valuable and uncontroversial improvement but I'm hesitant of the rest. I think it's very unlikely that we'd accept a change to switch off of mdBook unless it was for a very good reason like the mdBook project dying. Even if it does die though we could keep it alive for some time since it is a Rust project. I'm hesitant of any JS framework because of the churn characteristic to that ecosystem. Should Astro or Starlight introduce large breaking changes or die then we're forced to partially or fully rewrite the website. Using that framework also means requiring a JS toolchain installed in order to view changes locally. (With mdBook you need mdBook, but it's a smaller footprint than JS / NPM / etc. and uses the same build tools as Helix.) And it really explodes the dependency graph (looking at pnpm-lock.yaml). Starlight does look really good but it's a high price to pay for improved cosmetics.
Specifically about MDX: we should not be switching away from markdown specifically because of #997 and presenting documentation within the editor. (Ideally that PR would use markdown for the docs.) Ideally all documentation should be accessible in the editor and on the website including getting started guides. Using MDX locks us into using JS to display the docs makes an in-editor-docs feature much harder than it needs to be. Regular markdown is fairly straightforward and we already render it for things like LSP hover.
And a minor thing about the blog - I don't think it's that valuable to combine the landing page + blog website with the docs. Zola (used for that currently) is really minimal and straightforward, and it's another Rust project.

What should be done about these termshots?

I would prefer to see the termshot stuff dropped entirely. While it looks cool it presents new issues. The guide for creating termshots is asking a lot for a casual or drive-by contributor by requiring Linux+dbus+gnome-terminal, and it's a manual process to take a shot. Even with scripts to make it easier it would still be plenty of manual work that scales with the number of shots you need to take. And if we need to regenerate them for some reason we're talking about hundreds (thousands in the future?) of shots to retake. I also find the display to be cramped at 32x20. By making it fit for mobile I believe it no longer looks good for either mobile or larger displays.

They allow the tutorial to be followed online, and on mobile phone without having to use the editor.

I don't think there's very much value in this. If the goal is to teach people how to use the editor I think it's reasonable to expect that they have the editor installed after a certain point. Up to that point we should only need a 'hook' to get people interested rather than allowing the entire docs site to be followed online. For that something like a "tour" video is probably more appropriate, for example https://research.swtch.com/acme.

For the usage part / guides it would probably still be useful to have a way to show a snapshot of the editor state. I don't think there's anything off-the-shelf that would fit this really well but we could look into writing custom ```helix codefences and preprocessing them somehow to show a minimal Helix UI. I would strongly prefer that as much of the docs as possible remain markdown and this could be a way to achieve that and also show editor state. I might also be possible to make documentation like that work for #997 within the editor.

I would like to update the homepage to be like the homepage that I made with starlight, maybe the video can be kept but moved at the bottom

Like above I think some sort of hook video is probably what most "drive-by" viewers would look for plus some quick facts like that we build on tree-sitter and have LSP support. The tricky part of the current video is that it's an asciinema recording and that doesn't have an out-of-the-box way to add text or keypresses (AFAIK). So we could look at replacing and improving that video to be more of a tour.

About the boxes/bubbles: improving the display/styling sounds good but the content of the boxes probably needs some debate as already mentioned above. I would prefer we stay close to facts like that tree-sitter is a cornerstone. Some of the phrases like "become the 10x developer..." etc. seem too close to marketing material to me.

What do you think about disabling the option to change theme for the documentation site?

Defaulting to the same theme is ok but we should keep the theme switcher. Colibri doesn't have very high contrast and switching between light/dark is occasionally useful or necessary for accessibility.

I can migrate the mdBook to Dioxus, should I do it?

I think Dioxus's site looks cool but I'm not totally convinced it provides enough value to ditch mdBook for it. I'd want to see a very small MVP of a page or two of docs using their setup (and how large the code footprint of that is) before deciding either way.

I can make another PR that updates the mdBook's documentation with this site's docs. Should it be a single PR or e.g. 1 for each changed page / 1 for each changed section etc.

I would start small with a single page and go from there and we can reevaluate after a few PRs if necessary

anything else I should know?

* I think I saw in the commit history something about adding analytics. This part I don't think we're interested in - I don't think we'd look at the analytics so I'd prefer we avoid collecting them at all.

* Some of the docs - creating releases and vision - I think should stay as regular markdown files in the repo and not be a part of the website. I would also prefer to keep the blog with the homepage (https://github.com/helix-editor/website) rather than a part of the docs generated in this repo.

* It may be easier to continue this discussion on a GitHub discussion rather than this PR. There're multiple conversations going on because of review of the content vs. review of the overall changes and lots of pushes so it's hard to follow.

Thanks! good to know. I'll make the PRs to merge the new documentation pages 1 by 1.

@Alex-Muirhead
Copy link

Despite being aimed at mobile viewing (from reading the previous comments), the termshots definitely don't play nicely when it comes to the picker demos.
Screenshot_20241207-113839.png

This is the first (and smallest) one, and the larger ones display similar (if not worse) display errors.
I'm using the standard Google Chrome install on Android 15.

@nik-rev
Copy link
Contributor Author

nik-rev commented Dec 8, 2024

Despite being aimed at mobile viewing (from reading the previous comments), the termshots definitely don't play nicely when it comes to the picker demos.
This is the first (and smallest) one, and the larger ones display similar (if not worse) display errors. I'm using the standard Google Chrome install on Android 15.

this is rather unfortunate, but I'm not going to make any more commits for the site, since it isn't going to be merged. These termshots require quite a lot of maintenance to get right, and there are hundreds of them. I think the approach is cool but it won't work out in the long term.

The maintainers clearly expressed that they would not like to switch to a JavaScript framework, which honestly makes sense. I can see how effort into improving the software itself than have to deal with breaking changes in regards to the documentation website.

Rather, I will PR the new documentation pages I wrote into Helix's official docs one-by-one. I've put most of the time into writing content (which can be ported, the termshots aren't really necessary).

First this pull request:

The pull requests for other pages will follow. The site I will keep up, since it's just static and free to host. You can find the new repository for the site at https://github.com/NikitaRevenco/helix-docs (note that it's only there for archive purposes)

@nik-rev nik-rev closed this Dec 8, 2024
@nik-rev nik-rev deleted the new-website branch January 5, 2025 18:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.