{"id":13681433,"url":"https://github.com/PrettyCoffee/fluidity","last_synced_at":"2025-04-30T03:31:34.106Z","repository":{"id":38792264,"uuid":"349154701","full_name":"PrettyCoffee/fluidity","owner":"PrettyCoffee","description":"Fluidity - An accordion based startpage","archived":false,"fork":false,"pushed_at":"2024-06-17T18:55:05.000Z","size":6950,"stargazers_count":284,"open_issues_count":3,"forks_count":146,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-07-23T21:07:26.389Z","etag":null,"topics":["emotionjs","github-page","react","startpage","typescript"],"latest_commit_sha":null,"homepage":"https://prettycoffee.github.io/fluidity/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PrettyCoffee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-18T17:04:53.000Z","updated_at":"2024-07-23T16:37:25.000Z","dependencies_parsed_at":"2023-02-11T22:15:46.846Z","dependency_job_id":null,"html_url":"https://github.com/PrettyCoffee/fluidity","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PrettyCoffee%2Ffluidity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PrettyCoffee%2Ffluidity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PrettyCoffee%2Ffluidity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PrettyCoffee%2Ffluidity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PrettyCoffee","download_url":"https://codeload.github.com/PrettyCoffee/fluidity/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213679106,"owners_count":15622626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emotionjs","github-page","react","startpage","typescript"],"created_at":"2024-08-02T13:01:30.662Z","updated_at":"2024-08-02T13:14:40.377Z","avatar_url":"https://github.com/PrettyCoffee.png","language":"TypeScript","readme":"![logo](https://github.com/PrettyCoffee/fluidity/blob/main/public/logo192.png)\r\n\r\n# Fluidity - An accordion based startpage\r\nHere you can find the startpage I created for my browser :)\r\n\r\nIf 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 ;)\r\n\r\n## Showcase\r\n### The startpage in action\r\nI created a [reddit post](https://www.reddit.com/r/startpages/comments/m82izg/my_new_startpage_any_ideas_for_names/) on r/startpages. There you can see a short video where I show all available features.\r\n\r\nYou can also just take a look at the [Live Demo](https://prettycoffee.github.io/fluidity/).\r\n\r\n### Themes\r\n![Default theme](https://github.com/PrettyCoffee/fluidity/blob/main/docs/default-theme.png)\r\n![Dark Souls theme](https://github.com/PrettyCoffee/fluidity/blob/main/docs/DarkSouls-theme.png)\r\n![Pop!OS theme](https://github.com/PrettyCoffee/fluidity/blob/main/docs/pop!os-theme.png)\r\n**If you created a theme and want to see it here, hit me up!**\r\n\r\n## Usage\r\nYou can apply startpages by using several methods. To keep it simple, I will only cover one (the easiest) here:\r\n1. Download a New Tab Override Plugin (e.g. [Chrome](https://chrome.google.com/webstore/detail/new-tab-redirect/icpgjfneehieebagbmdbhnlpiopdcmna) | [Firefox](https://addons.mozilla.org/en-US/firefox/addon/new-tab-override/))\r\n1. Open the Plugins Settings\r\n1. Paste `https://prettycoffee.github.io/fluidity/` into the text field to set it up as your startpage\r\n\r\n## Local Setup\r\nIf you do not want to rely on my github page, thats totally okay!\r\nYou can set it up locally yourself with the following steps:\r\n1. Switch into the gh-pages branch\r\n1. Download / Clone the repository files\r\n1. Set it up like explained in [usage](#usage), but instead of the link use the filepath to the `/index.html` file.\r\n\r\nIf you have a github account you can of course also just fork the repo and create a github page yourself ;)\r\n\r\n## Docker setup\r\nIf you are familiar with Docker, you can use the provided docker file which will build the app and deploy it with nginx.\r\n\r\nYou can use the following commands to deploy a container:\r\n\r\n```bash\r\n# build\r\n$ docker build ./ -t fluidity\r\n\r\n# run\r\n$ docker run -d --name fluidity -p 8080:80 fluidity\r\n```\r\n\r\nIt will be deployed on port 8080. (`http:\\\\localhost:8080`)\r\n\r\n## Advanced: Changing the code\r\nSince this project is programmed with React and TypeScript, you will first need to set it up:\r\n\r\n0. (Download and install [nodejs](https://nodejs.org/en/) if you dont have it)\r\n1. Clone the git repository, this time use the main branch\r\n1. Open a terminal in the project folder (If you execute the command `ls` here, there should be a package.json)\r\n1. Execute `npm i` to install all dependencies\r\n1. Execute `npm run start` to validate that everything ids working. A browser tab with the URL `http://localhost:3000` and the startpage should open.\r\n1. Now you can change the code, for example write your own default values into `/src/data/data.ts`\r\n1. Compile the project by executing `npm run build` if everything is done\r\n1. Your startpage is now located in the `/build/` folder\r\n1. 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\r\n\r\n## Sources\r\n\r\n* [Pictures - DeathAndMilk](https://www.instagram.com/deathandmilk_/)\r\n* [Icons - FontAwesome](https://fontawesome.com/icons)\r\n* [Text Flicker - CodeMyUI](https://codemyui.com/crt-screen-text-flicker-animation-in-pure-css/)\r\n* [Wave Animation - mburakerman](https://codepen.io/mburakerman/pen/eRZZEv)\r\n","funding_links":[],"categories":["TypeScript","Projects"],"sub_categories":["Hosted"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPrettyCoffee%2Ffluidity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPrettyCoffee%2Ffluidity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPrettyCoffee%2Ffluidity/lists"}