Add new website

focus-editor · Apr 10, 2024 · 0f29cd9 · 0f29cd9
1 parent ae64acb
commit 0f29cd9
Show file tree

Hide file tree

Showing 14 changed files with 473 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,130 @@
+body {
+
+}
+
+.btn-primary {
+    --bs-btn-bg: #268484FF;
+    --bs-btn-border-color: #26B2B2FF;
+    --bs-btn-hover-bg: #196666FF;
+    --bs-btn-hover-border-color: #196666FF;
+}
+
+.btn:hover {
+    text-decoration: none;
+}
+
+.container-lg {
+    max-width: 1500px;
+}
+
+.btn {
+    border-radius: 3px;
+}
+
+.b-divider {
+    width: 100%;
+    height: 3rem;
+    background-color: rgba(0, 0, 0, .1);
+    border: solid rgba(0, 0, 0, .15);
+    border-top-width: medium;
+    border-right-width: medium;
+    border-bottom-width: medium;
+    border-left-width: medium;
+    border-width: 1px 0;
+    box-shadow: inset 0 .2em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.nav-link {
+    color: #33CCCCAA
+}
+
+.nav-link:hover {
+    color: #33CCCCAA
+}
+
+.side-nav {
+    border-left: 1px solid #d2d2d2;
+    padding-left: 10px;
+}
+
+.side-nav-item {
+  display:list-item;
+  list-style-type:none;
+  text-decoration:none;
+  color:#3d3d3e;
+  font-size:1em;
+  padding-top:5px;
+  padding-bottom:5px;
+  transition:transform .5s ease
+}
+.side-nav-item:hover {
+  transform:translateX(5px)
+}
+
+.side-title
+{
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 1em;
+  font-weight: 400;
+  color: #777;
+}
+
+.focus-bg {
+    content: "";
+    background: url('../images/logo.png') no-repeat;
+    background-position: left ;
+    background-size: 800px;
+    opacity: 1;
+}
+
+.card {
+    margin-bottom: 10px;
+    border-radius: 0;
+}
+
+.card-img-top {
+  object-fit: cover;
+  height: 200px;
+}
+
+header {
+    background-color: #18262FFF;
+}
+
+.nav-link {
+    color: #cccccc;
+}
+
+.nav-link:hover {
+    color: #eeeeee;
+}
+
+a {
+    color: #1C4449FF;
+}
+a:hover {
+    text-decoration: underline;
+}
+
+.code {
+    color: #1C4449FF;
+}
+
+.display-7 {
+    font-family: montserrat;
+    font-size: 30px;
+    font-weight: normal;
+}
+
+.key {
+    display: inline-block;
+    padding: 0 4px;
+    margin: 0 2px;
+    background-color: #f2f2f2;
+    border: 1px solid #dcdcdc;
+    border-radius: 4px;
+    font-size: 0.85em;
+    vertical-align: middle;
+}
+
diff --git a/docs.html b/docs.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Focus Editor</title>
+        <link rel="icon" type="image/x-icon" href="favicon.ico">
+        <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <header class="d-flex justify-content-center py-2">
+            <ul class="nav nav-pills">
+                <li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
+                <li class="nav-item"><a href="docs.html" class="nav-link">Documentation</a></li>
+            </ul>
+        </header>
+        <br />
+        <div class="container">
+            <div class="row">
+                <div class="col-xs-12 col-lg-2">
+                    <div class="sticky-top" style="top: 2em">
+                        <h6 class="side-title">Documentation</h6>
+                        <nav class="side-nav">
+                            <a class="side-nav-item" href="#installation">Installation</a>
+                            <a class="side-nav-item" href="#global-config">Global Configuration</a>
+                            <a class="side-nav-item" href="#projects">Projects</a>
+                            <a class="side-nav-item" href="#faq">FAQ</a>
+                        </nav>
+                        <br />
+                        <br />
+                    </div>
+                </div>
+                <div class="col-xs-12 col-lg col-pop">
+                    <!-- ======== INSTALLATION ======== -->
+                    <h2 class="display-7" id="installation">Installation</h2>
+                    <p>
+                        <a href="https://github.com/focus-editor/focus/releases" target="_blank">Download the executable</a> for your target platform and put it in any directory you like.
+                        <br /><br />
+                        Launch the executable. Once launched, it will generate its configuration files.
+                        <ul>
+                            <li>On Windows, it will create a <code>global.focus-config</code> file and a <code>projects</code> and <code>temp</code> folders next to itself (therefore, the directory must be writable).</li>
+                            <li>On macOS, these files will be found in <code>/Users/YOURNAME/Library/Application Support/dev.focus-editor/</code>.</li>
+                            <li>On Linux, these files will be found in <code>${XDG_CONFIG_HOME}/focus-editor/</code> (which usually expands to <code>${HOME}/.config/focus-editor</code>).</li>
+                        </ul>
+                    </p>
+                    <p>
+                        After installing, you can edit the <a href="#global-config">global config</a> of the editor, or create one or more <a href="#projects">projects</a> to be able to quickly switch between them.
+                    </p>
+                    <br />
+                    <!-- ======== EDITOR CONFIGURATION ======== -->
+                    <h2 class="display-7" id="global-config">Global Configuration</h2>
+                    <p>
+                        The editor is configured using a simple text file called <code>global.focus-config</code>, which you can quickly open by opening the Command Palette
+                        (<span class="key">Alt</span>-<span class="key">X</span> by default) and selecting <code>Open Global Config</code>.
+                    </p>
+                    <p>
+                        The config file is a simple text file which should be easy to read and edit to your liking. We suggest that you read through it to familiarize yourself with what options are available.
+                    </p>
+                    <p>
+                        <ul>
+                            <li>
+                                Config files have a built-in smart highlighting, so it's best to edit them using Focus itself. In this way it should tell you about any potential problems it detects,
+                                such as invalid editor actions, duplicate key bindings or invalid file paths.
+                            </li>
+                            <li>
+                                When an active config file is saved the changes should be automatically applied. If you have edited any workspace directories, the workspace will be reloaded.
+                            </li>
+                            <li>
+                                You can see whether the config file you're editing is currently active by looking at the footer, which should have a label telling you it's active:<br />
+                                <img style="width: 500px;" alt="" src="images/active-config.png" />
+                            </li>
+                        </ul>
+                    </p>
+                    <p class="text-secondary">
+                        NOTE: The base editor is not designed to be extensible in the same way Vim or Emacs are. Plugin support is not planned.
+                        Any customization that is not found in the config file must be done by modifying the source code.
+                        This is the tradeoff we are making to keep the upstream project as simple as possible,
+                        while offering a simple and approachable codebase for those who do want to extend it.
+                    </p>
+                    <br />
+                    <!-- ======== PROJECTS ======== -->
+                    <h2 class="display-7" id="projects">Projects</h2>
+
+                    <!--div class="card">
+                        <div class="card-body">
+                            <pre class="code">
+...
+
+[[settings]]
+
+maximize_on_start:                      false
+open_on_the_biggest_monitor:            false
+cursor_as_block:                        true
+cursor_blink_time_in_seconds:           0
+highlight_selection_occurrences:        true
+disable_that_annoying_paste_effect:     true
+disable_file_open_close_animations:     true
+double_shift_to_search_in_workspace:    false
+tab_size:                               4
+insert_spaces_when_pressing_tab:        true
+strip_trailing_whitespace_on_save:      true
+smooth_scrolling:                       false
+scroll_beyond_last_line:                true
+line_height_scale_percent:              100
+max_editor_width:                       -1
+can_cancel_go_to_line:                  true
+copy_whole_line_without_selection:      true
+
+...
+
+[[keymap]]
+
+# - The first matching combination will be used, so order matters
+
+[editors]   # <- this means that the following key combos will apply only when editing text
+
+    # Key combination           Action
+    Alt-F4                      quit
+
+    Ctrl-D                      select_word_or_create_another_cursor
+    Ctrl-Shift-A                select_all_occurrences
+
+    Ctrl-Shift-D                duplicate_lines
+
+    ...
+                                </pre>
+                        </div>
+                    </div-->
+
+                    <p>
+                        In Focus, a "project" is a user defined config file that contains project-specific settings.
+                        A project can override any settings that are present in the global config file.
+                        Projects can specify one or more directories to add to the active workspace.
+                    </p>
+                    <p>
+                        NOTE: when overriding settings with you project config bear in mind that some of the settings, such as workspace dirs, build commands etc. will completely replace
+                        the global settings, while other options (such as keymaps or the options in the <code>[[settings]]</code> block will be merged with the global ones, allowing you
+                        to only replace a few and leave the rest intact.
+                    </p>
+                    <p><h4>Creating a new project</h4></p>
+                    <p>
+                        To create a new project, enter the <code>projects/</code> directory by selecting the command <code>Open Directory With Project Files</code> in the command palette
+                        and create a new file with the following naming scheme: <code>Your Project Name.focus-config</code>.
+                    </p>
+                    <p>
+                        When you first launch Focus, there will be an <code>Example Project.focus-config</code> available for
+                        reference in the <code>projects</code> directory.
+                    </p>
+                    <p><h4>Switching to project</h4></p>
+                    <p>
+                        In the editor, executing the <code>Switch To Project</code> command will display a menu of available projects to switch to.
+                        When you switch to a project, Focus scans the configured workspace directories and loads all text files.
+                        Commands such as <code>Search In Workspace</code> will operate over all loaded files.
+                        <br />
+                        NOTE: when you switch to project or modify the list of workspace dirs in any way, the existing workspace will be removed and a new one will be scanned.
+                    </p>
+                    <p>
+                        Alternatively, you can load projects at startup in one of the following ways:
+                        <ul>
+                            <li>By passing a project name as a parameter: <code>focus -project "Project Name"</code> or <code>focus -project path/to/project.focus-config</code>.</li>
+                            <li>By passing in a directory path which contains a file named <code>.focus-config</code> (not <code>[project name].focus-config</code>!). This file will be loaded as a Focus project.</li>
+                            <li>By launching Focus from a directory containing a file named <code>.focus-config</code>.</li>
+                        </ul>
+                    </p>
+                    <br />
+
+                    <!-- ======== FAQ ======== -->
+                    <h2 class="display-7" id="faq">FAQ</h2>
+                    <h4>How do I add syntax highlighting for language X?</h4>
+                    <p>
+                        Ask on our <a href="https://discord.gg/eSXquAzTmW">Discord server</a>. We might be able to add it or prioritize adding it.
+                        In Focus syntax highlighting is done by writing a language lexer.
+                        It is straightforward enough to add a lexer for a new language, but you have to have a Jai compiler.
+                    </p>
+                    <h4>Is there a VIM mode?</h4>
+                    <p>
+                        There isn't, and it's unlikely there ever will be in the base editor. Someone might fork the editor and add one someday.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/favicon.ico b/favicon.ico
diff --git a/fonts/montserrat-v26-latin-200.woff2 b/fonts/montserrat-v26-latin-200.woff2
diff --git a/fonts/montserrat-v26-latin-300.woff2 b/fonts/montserrat-v26-latin-300.woff2
diff --git a/fonts/montserrat-v26-latin-regular.woff2 b/fonts/montserrat-v26-latin-regular.woff2
diff --git a/images/active-config.png b/images/active-config.png
diff --git a/images/focus.png b/images/focus.png
diff --git a/images/focus1.gif b/images/focus1.gif
diff --git a/images/github.png b/images/github.png
diff --git a/images/logo.png b/images/logo.png