Giter VIP home page Giter VIP logo

ruwia / pint Goto Github PK

View Code? Open in Web Editor NEW
34.0 2.0 3.0 3.42 MB

๐ŸŽจ Pint for GitHub is a chrome extension to theme GitHub. (chromium-only for now)

License: GNU Affero General Public License v3.0

HTML 5.72% JavaScript 53.35% CSS 12.34% Shell 0.01% TypeScript 27.86% Python 0.71%
color github css javascript chrome-extension browser-extension github-colors github-colorscheme personalization pint themes-css typescript github-redesign themes-for-github pint-for-github pint-github hacktoberfest

pint's Introduction

๐Ÿ’” Pint is now retired. It's sad to see one of my own projects to go to the history books, but maybe it's our memories with Pint that never goes away. Thank you for all the support of this project and the friends we've made along the way.

Pint for GitHub

pint-status chrome-web-store-version chrome-web-store-users


pint is a theming engine that allows you to theme your github experience.

1

project features

  • Complete control of personalisation of every element.
  • With the right settings, you can also achieve light theme too.
  • Quickly paint groups of colors with the Group Painter.
  • Quickly paint the entire site with the Update All button.
  • Individual control of every possible element (change the color of any individual element without affecting the rest)
  • Suggest colors that match the color you picked.
  • Custom CSS to modify each button to each div just the way you like it.
  • Free and Open-source and will always be.

installation

you can install this extension via the chrome web store or manually.

chrome web store installation

precompiled installation (.crx)

  1. grab the latest release here
  2. open it using chrome

precompiled installation (.zip)

  1. grab the latest release here
  2. unzip into a directory
  3. turn on developer mode
  4. load unpacked extension
  5. load the build folder

source installation

  1. clone this repository
  2. run yarn build
  3. open extension settings in chrome/brave/chromium
  4. turn on developer mode
  5. load unpacked extension
  6. load the build folder

roadmap

please check issues for planned additions, feature requests, bugs and more information.

alternatively, you can also open a new issue to add to it!

limitations

๐Ÿ’ก I am still looking for ways to better implement this! if you have any idea, please open an issue or create a pull request here

The old implementation used a setTimeout() function, however the delay makes the project look like garbage as you can see the original colors before seeing your palette applied. The new implementation simply throws the entire css of github and unsets it while hiding the entire html making github look like an empty page until your palette gets loaded. Slight issue though, a flicker comes from time to time but it isn't noticable.

documentation

Documentation is planned to debut on fuwadocs, however it is still in progress and is quite low on the priority queue.

contributing

contributions are welcome โค๏ธ. however, please do keep in mind that this is a very early project and things are bound to be messy. while code quality is my top priority, i'm implementing it as i go (which is a bit slow since I'm porting this myself to typescript) and would appreciate help regarding it so we could learn more from it too.

project structure

Structure

This extension is licensed under the GPLv3 License.
This project is not affiliated, associated, endorsed by, or in any way officially connected with GitHub, Inc. and Git, or any of its subsidiaries or its affiliates.

pint's People

Contributors

deepsource-autofix[bot] avatar deepsourcebot avatar imgbotapp avatar restyled-commits avatar restyled-io[bot] avatar ryanamay 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

Watchers

 avatar  avatar

pint's Issues

pint roadmap

๐ŸŒƒ Pint Release Roadmap

๐Ÿš€ Complete Refactoring Gitccentify

  • Base Brand Redesign
  • Base Popup UI Redesign
  • Implement main functionality (Get Set)

๐Ÿš€ Complete QuickScheme Implementation

  • Implement accent color scheme generator
  • fix quck change color scheme gen
  • add hex setting override in quick change
  • Add a text color switch for the doozeys who's crazy enough to use light mode

๐Ÿ•’ Todo Predefined Color Schemes

  • Implement colorscheme feature
  • Github Dark
  • Github Light
  • Solarized Dark
  • #35

๐Ÿ•’ Todo Advanced Customisation

  • Implement options UI base
  • Implement options ui group based
  • Implement options ui advanced (full customisation)

๐Ÿ•’ Todo Global Pints Implementation

  • #36
  • implement global pints (possibly via github dotfiles? or should i use my own framework?)

๐Ÿ•’ Todo Code Quality

  • Refactor QuickScheme
  • Refactor Pint Code because I suck at using typescript
  • Fix DeepSource Issues
  • Fix Linting Issues
  • yeet the old code

๐Ÿ•’ Todo Branding/Marketing

  • Create a website for Pint

๐Ÿ•’ Todo Documentation

  • Add comments to code
  • Update README

๐Ÿ•’ Todo QOL

  • Add extension install page
  • Port to Mozilla Firefox

๐Ÿ•’ Todo Release

  • Update chrome extension page
  • Update chrome extension itself

๐Ÿ•’ Todo Bugfixing:

  • Inconsistent padding
  • Color preview is broken on QuickScheme Fixed via #28

Bug Comment:
Removed on #11
Planned to reimplement due to new color scheming changes in #27

  • QuickScheme hex override does not work if no hashtag is supplied Fixed via #22
  • Options UI crashes when using paint tool. (probably related to paint tool) Fixed via #22
  • Color picker not using grabbed value It's not a bug, it's a feature via #22

Bug Comment:
Nah it was better to use decafbad as a meme lmao
Nah c0ffee is better.

  • Quirk: You need to add a # to set it properly. Fixed via #24
  • header bug (to be fixed in next pr) Fixed via #27
    theres more in the backlog but this is the bare minimum before i can open contributions and push a release :)

chrome web store update

apparently this version of pint doesn't comply with cws policy aka use of permissions.

  • chrome.tabs permission isn't apparently needed for creating new stuff using the chrome.tabs api

add custom color schemes

Would be nice to be able to have a place to add custom user schemes or something.
My current plans for this is to add a json parser that parses a scheme json from fuwaa/pint-color-schemes.

Could be better though, but is definitely planned to be worked on.

would also be nice to export themes into json. that would be a requirement for this issue.

code quality improvements

The current code quality is garbage, with documentation only covering 8.4% of the entire codebase.
In addition to this, inconsistencies are seen everywhere.

Some notable ones are:

  • Tailwind CSS: Inconsistent padding, and it doesn't look clean.
  • Code Inconsistency: JS and TS are mixed up (well mostly on src/methods as public/ are excusable because of chrome extension limitations) (also because project is currently being ported to TS)
  • Code Inconsistency: Formatting
  • Code Inconsistency: Linting errors as provided by GitHub actions
  • Reusability: Some React Elements are Repetitive and can be turned into Reusable Components
  • Too Much Magic: Too much magic-oriented JavaScript code is present.
  • No Unit Tests: This project has no Tests.
  • Documentation: This project currently has a code coverage of 8.4%

Things can be improved here a lot and I know it myself. While I'm currently working on this, if you want to help with this, please make a pull request and mention this issue (do not link it) :)

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.