Giter Club home page Giter Club logo

fluidity's Introduction

logo

Fluidity - An accordion based startpage

Here you can find the startpage I created for my browser :)

If you have any problems or miss a feature, create an issue and I will take a look at it! Of course, if you want to add a feature yourself you can just create a fork and contribute ;)

Showcase

The startpage in action

I created a reddit post on r/startpages. There you can see a short video where I show all available features.

You can also just take a look at the Live Demo.

Themes

Default theme Dark Souls theme Pop!OS theme If you created a theme and want to see it here, hit me up!

Usage

You can apply startpages by using several methods. To keep it simple, I will only cover one (the easiest) here:

  1. Download a New Tab Override Plugin (e.g. Chrome | Firefox)
  2. Open the Plugins Settings
  3. Paste https://prettycoffee.github.io/fluidity/ into the text field to set it up as your startpage

Local Setup

If you do not want to rely on my github page, thats totally okay! You can set it up locally yourself with the following steps:

  1. Switch into the gh-pages branch
  2. Download / Clone the repository files
  3. Set it up like explained in usage, but instead of the link use the filepath to the /index.html file.

If you have a github account you can of course also just fork the repo and create a github page yourself ;)

Docker setup

If you are familiar with Docker, you can use the provided docker file which will build the app and deploy it with nginx.

You can use the following commands to deploy a container:

# build
$ docker build ./ -t fluidity

# run
$ docker run -d --name fluidity -p 8080:80 fluidity

It will be deployed on port 8080. (http:\\localhost:8080)

Advanced: Changing the code

Since this project is programmed with React and TypeScript, you will first need to set it up:

  1. (Download and install nodejs if you dont have it)
  2. Clone the git repository, this time use the main branch
  3. Open a terminal in the project folder (If you execute the command ls here, there should be a package.json)
  4. Execute npm i to install all dependencies
  5. Execute npm run start to validate that everything ids working. A browser tab with the URL http://localhost:3000 and the startpage should open.
  6. Now you can change the code, for example write your own default values into /src/data/data.ts
  7. Compile the project by executing npm run build if everything is done
  8. Your startpage is now located in the /build/ folder
  9. Optional: If you host it with github pages yourself, you can use the command npm run deploy to push a fresh build into the gh-pages branch

Sources

fluidity's People

Contributors

andyreckt avatar austinaryain avatar prettycoffee 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

fluidity's Issues

Colors do not change

hello, I try to change the accent, accent 2 and background colors, but remain the same, how do I do?

Make this easier to run with Docker or K8s

Proposal: Add a Dockerfile, make an official Docker image, and untether this from a GitHub Pages based installation. It may be possible to leave GitHub Pages as a secondary option, but I'm not sure if the homepage element in package.json is required for Pages as I switched that in my fork to "./"

Not sure what your appetite for that is, but Docker/K8s, or just baremetal, gives you much more control over things such as access control. Many people use kubernetes ingresses to expose their containerized services, and ingress controllers can place things like authentication or source IP whitelisting in front of your services to keep people you may not want seeing your dashboard away from it.

I've already put together a helm chart and Dockerfile that I've installed in my homelab, so I could help with this if you'd like. There may be some anti-patterns in my Dockerfile as I'm not a node developer. If there's no interest in this, that's fine, just close this Issue.

Feature request: keyboard shortcuts

I have been loving this start page for nearly 10 months now! I was hoping you could add a way to add keyboard short cuts to it. Perhaps choosing the first to last link via home row (a,s,d,f etc) and then the accordion tab via top row or number row. This might be asking much but also adding a configuration option the keybindings.

How to change the icon and name of the tab?

I am using github pages to host the start page, how to I change the settings so a new tab says new tab and not fluidity.
Also how do I get a custom icon to show on the tab?

Rename to "Fluidity"

Rename repository to its name.
When moving, rename this repo but create startpage as copy again. Create a popup to inform the current users if somebody uses this repository url.

Update meta informations

Copy pasted the b/w kitty page - forgot to update public/index, public/manifest and package.json

Adding custom images always results in broken image error

Hi there, I'm a user who locally uses fluidity. That being said, I'm experiencing an issue where the favicon and images on the startpage will show as corrupt when I add my own custom images or replace them with the names of the default images. Can anyone help to resolve this issue? I'm not too tech literate so I apologize if this question seems dumb.

Chrome extension

I have tried to turn this into a chrome extension however every attempt has failed. I tried using ChatGPT for help and guidance on how to modify the code so that it would work, but nothing did. The best I can get it a blank screen. If you could could help provide steps on how to turn it into an extension that would be awesome. And yes I am a bit of a noob on these things.

Missing search icon when using build.

I can't see the ddg/google/qwant icon when I use npm run build.

I cloned the repo, changed homepage to "./" in package.json.

ran npm i.

ran npm run start <- the icon is showing at this stage

ran npm run build

opened ./build/index.html in browser -> no icon

Am I missing something?

How to change default settings?

I have forked fluidity and am using github pages to use it. I was wondering how to change default settings like bookmarks, search engines, fast forward search and themes so when I want to use my fork I don't have to customise it all the time.

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.