start-page

A start / new tab page to get there faster.

Check out a live demo!

Interaction is done via a command line in the center. Type help (or just press Enter) to see a list of commands.

Commands are input using a <command>;[arguments] syntax. For instance, yt;interior crocodile alligator will open a new YouTube tab and search for "interior crocodile alligator".

Command Types

By default, there are three categories of commands; search, browser, and remote. Remote is non-functional right now, as it requires a server process to execute commands (and likely an authentication method). Browser commands are executed in-browser, and search commands go to some URL.

Extending start-page

The recent rewrite of start-page focused on two things: using Vue as much as possible, and allowing for easily extending features. You can very quickly add new websites to search by following the template outlined below.

Command Templates

Commands are JSON objects, exported from a category file (such as search.js). For browser (and, in the future, remote) commands, you can also add a function matching the name in your command outline in the _hidden_functions object. defaultFunction will attempt to execute your command if it can be found in _hidden_functions, otherwise it will notify the user the function cannot be found (although the command is valid). If you create a function and do not put it in _hidden_functions, the system will assume it is a command and try to parse it for information so it can be listed in the help menu. That would probably lead to problems, so it's advised you don't do that.

While helpDesc and helpCommand are optional, it's generally recommended to add them to your command. Otherwise they are auto-generated by the system, but it has no knowledge of available arguments, the optionality, or general usage of the command.

The items, their optionality, and description are outlined below.

Search

Name	Required	Description
type	✔️	Describes type of command
baseURL	✔️️	Base URL of website (no search)
search	✔️	Portion of url after base which precedes keywords
command	✔️	Keyboard shortcut for website
title	✔️	User-friendly name of the website
helpCommand	❌	An example of how to use the command
helpDesc	❌	Describes what the command does

Example

An example command, from search.js. Allows the user to query Google.

export const g = {
    'type':'search',
    'command':'g',
    'baseUrl':'https://www.google.ca',
    'search':'/search?q=',
    'title':'Google',
    'helpCommand':'g;[query]',
    'helpDesc':'Search Google',
};

Browser

Name	Required	Description
type	✔️	Describes type of command
functionName	✔️	The function to run from the JS file
command	✔️	Keyboard shortcut
title	✔️	User-friendly name
helpCommand	❌	An example of how to use the command
helpDesc	❌	Describes what the command does

Example

Here we have an example that uses a pre-existing Vue element, the vue-notification plugin (called 'Notify' in the file). For this, we have to pass in the Vue context (this). You can also use this context to affect data objects, run functions, and anything you would regularly do inside of Vue.

For this example, we have to create both a command outline Javascript object, as well as a matching function in _hidden_functions. The name of the function must be identical to functionName in the command outline.

export const notify = {
    'type': 'browser', // TODO: make programmatically defined
    'command':'ntfy',
    'functionName': 'notify',
    'title': 'Notify',
    'helpDesc': 'Simple comma-delimted notifications.',
    'helpCommand': 'pd;[title],[text],[type]'
}

export const _hidden_functions = {
    /**
     * Simple notification command, split by commas.
     * If no type is designated, defaults to custom warning.
     */
    notify: function (commandInfo, userCommand, tokens, vm) {
        let [title, text, type] = tokens.split(',');
        if (typeof type === 'undefined') type = 'warning';
        vm.$notify({
            group: 'notify',
            title,
            type,
            text
      });
    }
}

Remote

This category is not yet defined.

Build Setup

To use this in another site, just copy+paste the index.html, css, js, and pages to a /start-page folder. You're gold.