Giter Site home page Giter Site logo

kholmogorov27 / chevron Goto Github PK

View Code? Open in Web Editor NEW
306.0 7.0 76.0 2.76 MB

Powerful and highly functional startpage integrated with chatGPT and hidden under the super minimalistic and animated design (static/hosted/github pages)

Home Page: https://kholmogorov27.github.io/chevron/

License: MIT License

JavaScript 90.92% HTML 0.63% CSS 8.45%
animated browser-customization homepage new-tab newtab open-source react startpage startpages web

chevron's Introduction

Chevron GitHub license PRs Welcome

Сhevron is a powerful and highly functional startpage integrated with chatGPT
and hidden under the super minimalistic and animated design

available in static, hosted and github pages options

Live Demo | Download | Installation

Content

Features

autosuggestions, history, macros and commands, macros menu, hotkeys, chatGPT integration, currency converter, calculator, animated and minimalist design

Screenshots

Installation

You can set Chevron as the homepage (in the browser settings) or the new tab (you will need a custom tab extension).

Warning If you want the app itself to be focused when opening a new tab and not the address bar,
I recommend this extension in tandem with the hosted or github pages installation method for all chromium based browsers (Google Chrome, Microsoft Edge, Brave, Opera, Vivaldi etc)

There are a few ways to install Chevron:

Static (recommended)

This method is recommended because it doesn't depend on your internet connection or any remote servers, and the UI will be loaded instantly.
Some browser and extensions might have the focus problem

  1. Download the latest release
  2. Unzip the archive in any convenient place

Hosted

This method is useful when you want to fix the focus problem or for any other reason the Local file method doesn't work for you

Note This method assumes that you have Node.js and npm installed on your PC

  1. Clone this repository

  2. Build

  3. Install node-(windows/linux/mac)

    for Windows:

    npm install -g node-windows && npm link node-windows

    for Linux:

    npm install -g node-linux && npm link node-linux

    for Mac:

    npm install -g node-mac && npm link node-mac
  4. Register the local server as a system service

    Note Administrator privileges are required to run this command

    for Windows:

    npm run register_windows

    for Linux:

    npm run register_linux

    for Mac:

    npm run register_mac

    This operation will create a service in your system to run the server on startup.

    To uninstall the service, run the command again.

After you register the server, you will be able to access Chevron on localhost:8000

GitHub Pages

This method isn't recommended because it depends on your internet connection and GitHub servers

  1. Fork this repository
  2. Go SettingsPagesBranch: "gh-pages"Save
  3. Wait until your link will appear

Build

Note > Node.js and npm are required

  1. Install dependencies

    npm install
  2. Build

    npm run build

After building, you can find all the necessary files in the /dist folder

Usage

To use Chevron's main functionality, just type something (you don't need to worry about focus on the input field, it is always in focus at the right moment).

As soon as you type something, the query will be parsed and suggestions will be given.

Suggestions generates from history and autosuggestion engine. You can limit number of suggestions for each source is settings.

By default, you will be redirected to the search page of the search engine, however if the query matches a trigger of a macro, redirecting to this query will take you to the URL, specified in macro properties (url property).

  • Macros and commands:

    Macro is something like a bookmark. It helps access your frequently visited websites.
    To use a macro, your query must match one of its triggers.

    > gh

    Command is an addition to macros. With commands you can implement some website logic by modifying the URL.
    To use a command, you need to put the command after a trigger of a macro (the command must be defined in the global and macro commands lists). Everything going after a command is argument.

    > so?how to parse html with regex

    To ignore macros and force using search engine press Ctrl

  • Macros menu:

    Macros can be pinned to macros menu.

    Controls:

    • open/close:

      • the macros menu toggle button in the right bottom corner

        Note The macros menu toggle button will appear only on hover after you click it at least once

      • RMB
      • Shift
    • navigation:

      • mouse wheel
      • drag
  • Hotkeys:

    You can use hotkeys to quickly call macros which have key property.

    Shift + <key>

    macro must be pinned

  • ChatGPT:

    Before using ChatGPT you need to specify your OpenAI API key in SettingsQueryAIApi key.

    the key is stored locally on your computer

    To use ChatGPT integration double press Space after you typed a query.

Configuration

Settings

You can configure main functionality of the app in Settings.

To open Settings, click on the gear icon in the top right corner.

You can click the show/hide icon at the bottom of the Settings window to show advanced settings.

Note The gear icon will appear only on hover after you visit Settings at least once

config.js

You can edit Macros and Commands only in the /config.js file yet.

/config.js contains a single JS object named CONFIG which has 3 properties:

  • macros Array

    structure:

    {
      name: string, // macros name
      category: string, // category of the macros
      url: string, // full macros URL
      normalisedURL: string, // normalised URL (secondLevelDomain + '.' + firstLevelDomain)
      triggers: [ string, ... ], // list of triggers
      commands: { // commands of the macro
        [type]: {
          // {@} - macros URL
          // {$} - command argument
          template: string, // URL template
          description (optional): string // description of the command for this macros
        }
      },
      bgColor: complexColor, // background color
      textColor: string, // text color
      pinned: boolean, // is the macros pinned in the Macros Menu
      key: (optional): string, // hotkey ('key' + <keyName>)
      icon: (optional): string // the name of the icon in the "/icons.js" file
    }
  • commands Array

    structure:

    {
      type: string, // command type (name)
      trigger: string // command trigger (preferably a symbol)
    }
  • engines Object

    structure:

    {
      name: string, // engine name
      bgColor: complexColor, // background color
      textColor: string, // text color
      types: { // query, calculator, currency, ...
        [type]: {
          // {@} - raw query (what user typed)
          // {$} - parsed query (what is in the query field)
          template: string // URL template
        }
      }
    }

Because of the limitations of the CORS policy, macros icons must be stored in /icons.js in the ICONS object. You can put there any valid HTML SVG as a string

Warning be aware of quotes

TODO

  • The "Legacy" mode
  • Macros menu toggle button
  • Weather widget
  • Settings description
  • Redirect button
  • Force search engine on Ctrl
  • Fix transition animations
  • Macros and Commands editor
  • Macros Menu categories
  • Localisation
  • LocalStorage reset buttons
  • Refactor search engines system
  • Time settings

Technologies

JS, CSS, HTML, APCA (from color.js)


inspired by Tilde

chevron's People

Contributors

adienox avatar flexusma avatar kholmogorov27 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

chevron's Issues

Unable to Build (Syntax Error involving reserved word 'Await')

When attempting to build, the following error is encountered:

[email protected] build
vite build

file:///home/sunkencity999/chevron-2.1.0/node_modules/vite/bin/vite.js:7
await import('source-map-support').then((r) => r.default.install())
^^^^^

SyntaxError: Unexpected reserved word
at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18)
at async link (internal/modules/esm/module_job.js:42:21)

Horizontal Line in Animations and Shortcut issues on Safari

When using Chevron on Safari, a line appears horizontally along the middle of the animations. This expands to the full page when the animation expands to the full page. Have tested on Firefox and Vivaldi and there are no lines there. The line does disappear when the window is resized to certain sizes.
Screenshot 2023-03-12 at 12 52 41
Screenshot 2023-03-12 at 12 54 00

Safari also doesn't seem to like the macros at the bottom of the screen

Screenshot 2023-03-12 at 12 57 54

super wierd scrolling system

Snímek obrazovky_2023-03-04_15-17-06

the issues

  • cant scroll with mouse in the settings tab (only scrolling by tab key works)
  • the main page is leaving the view after scrolling in settings tab (the issue is in the photo)
  • completly broken scrolling in mobile browsers (firefox) - just after opening the page you can scroll as far as you want away from the main view

info

  • browser: firefox
  • os: Arch linux with 6.2.1-arch1-1 kernel

how to fix

  • first of all, make the body overflow-y = hidden and for the settings tab make overflow-y = auto
  • add some support for mobile browsers

Hosted method not working

It might be my mistake but when I'm running this command npm run register_linux it gives he output like

[email protected] register_linux
node backend/register.cjs linux

Using default mode: systemd
Unregistering the service'

No matter how many times I repeat it, it keeps showing unregistering. Also localhost:8000 is unable to connect.

Any solution?

White flash when opened

Whenever I open a Chevron tab (Startpage/New-Tab-Page/Home-Page/Reload) the entire page is white for a split second.
This is not ideal when using darkmode.
Is there a way to avoid this? If not I would appreciate if you could look into implementing a fix.

Thank you for creating such an amazing startpage.

config.js changes don't work

Hey, I downloaded the zip file from releases and if i make any changes to the config.js file, it does nothing.
And in the zip release there isn't any public folder either like in #6

I run http-server in the Chevron_v2.1.0 folder and go to 127.0.0.1:8080 in my browser to see the startpage

I am on Arch linux, firefox version 110.0.1

Hosted method still dosen't work(linux)

[email protected] register_linux
node backend/register.cjs linux

Using default mode: systemd
Registering the service
Installing service on /etc/systemd/system/chevron.service
node:events:491
throw er; // Unhandled 'error' event
^

Error: EACCES: permission denied, open '/etc/systemd/system/chevron.service'
Emitted 'error' event on daemon instance at:
at init. (/usr/lib/node_modules/node-linux/lib/daemon.js:491:42)
at init.emit (node:events:513:28)
at /usr/lib/node_modules/node-linux/lib/systemd.js:199:36
at node:fs:2171:7
at FSReqCallback.oncomplete (node:fs:192:23) {
errno: -13,
code: 'EACCES',
syscall: 'open',
path: '/etc/systemd/system/chevron.service'
}

Implement a help macro

Default help macro that would redirect to a local view, which is a list of macros. It helps to keep in mind what macros we have.
It would just be an app that displays the macro dic in a fancy way

browser extension

It would be nice if there was a dedicated browser extension, possibly even adding it to the respective addon stores (firefox, chrome etc)

Url pattern detection for direct redirects is not optimal

I had issues using chevron as I usually open links to ip addresses or localhost, etc. This is not possible with the current Regex that is used for URL detection.
I added a better one and wanted to make it available for everyone.

Unable to change config.js

Hi! It might just be me making a stupid mistake, but I can't seem to edit the config.js file. Editing it after building seems to have zero effect on the macros/commands. Is there something simple that I'm missing?

Support for Qwant ?

Hello,
Great project ! I wonder if there will be a qwant support as a search engine, I tried modifying the config.js file but it doesn't show for some reason (maybe I f'd up my file).
Can you add it ?

(I would love to fork and PR this small change, but I suck with JS and React)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.