Convert Figma logo to code with AI

jasonlong logoisometric-contributions

Browser extension for rendering an isometric pixel art version of your GitHub contribution graph.

3,491
163
3,491
0

Top Related Projects

8,030

abusing github commit history for the lulz

💥 A curated list of Terminal frameworks, plugins & resources for CLI lovers.

323,302

😎 Awesome lists about all kinds of interesting topics

7,563

A supercharged Git/GitHub command line interface (CLI). An official integration for GitHub and GitHub Enterprise: https://github.com/works-with/category/desktop-tools

Quickly browse the history of a file from any git repository

A guide to learn bash

Quick Overview

Isometric Contributions is a browser extension that transforms the GitHub contributions graph into an isometric 3D view. It provides a visually appealing and unique way to display a user's contribution history on their GitHub profile page.

Pros

  • Enhances the visual appeal of GitHub profiles
  • Offers a unique perspective on contribution data
  • Customizable color schemes to match user preferences
  • Lightweight and easy to install

Cons

  • May not accurately represent contribution volume due to 3D perspective
  • Limited to GitHub's contribution data (doesn't include external contributions)
  • Potential performance impact on slower devices or browsers
  • Not officially supported by GitHub, so it may break with future updates

Getting Started

  1. Install the browser extension:

  2. Navigate to any GitHub profile page (including your own)

  3. The contributions graph will automatically be transformed into an isometric view

  4. To customize colors, click the extension icon in your browser toolbar and select your preferred color scheme

Note: No coding is required to use this extension. It's a plug-and-play solution for enhancing GitHub profile visuals.

Competitor Comparisons

8,030

abusing github commit history for the lulz

Pros of gitfiti

  • Allows for custom pixel art designs in the GitHub contribution graph
  • Provides a command-line interface for easy usage
  • Supports generating commits for specific dates

Cons of gitfiti

  • Requires manual setup and execution of scripts
  • Limited to modifying the GitHub contribution graph only
  • May be considered less ethical as it artificially inflates contribution counts

Code Comparison

gitfiti:

def generate_git_commands(art):
    commands = []
    for y, row in enumerate(art):
        for x, col in enumerate(row):
            if col:
                date = get_date_string(x, y)
                commands.append("GIT_AUTHOR_DATE={0} GIT_COMMITTER_DATE={0} git commit --allow-empty -m 'gitfiti' > /dev/null".format(date))
    return commands

isometric-contributions:

function getContributionCount(day) {
  const count = day.getAttribute('data-count');
  return parseInt(count, 10) || 0;
}

function createIsometricBlock(x, y, z) {
  const block = document.createElement('div');
  block.className = 'iso-block';
  block.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
  return block;
}

The code snippets show that gitfiti focuses on generating Git commands for creating commits, while isometric-contributions is concerned with rendering the contribution graph in an isometric view using JavaScript and DOM manipulation.

💥 A curated list of Terminal frameworks, plugins & resources for CLI lovers.

Pros of terminals-are-sexy

  • Comprehensive resource for terminal customization and tools
  • Regularly updated with community contributions
  • Covers a wide range of terminal-related topics

Cons of terminals-are-sexy

  • Not an interactive tool or visualization
  • Requires manual implementation of listed resources
  • May be overwhelming for beginners due to the large amount of information

Code comparison

While a direct code comparison isn't relevant due to the different nature of these projects, here's a brief overview:

isometric-contributions:

function getContributionsByDay(contributions) {
  return contributions.reduce((acc, day) => {
    acc[day.date] = day.count;
    return acc;
  }, {});
}

terminals-are-sexy:

## Shells

* [Bash](https://www.gnu.org/software/bash/) - GNU Project's shell (Bourne Again SHell).
* [Fish](https://fishshell.com/) - Smart and user-friendly command line shell.
* [Zsh](https://www.zsh.org/) - Powerful shell with scripting language.

isometric-contributions is a JavaScript-based tool for visualizing GitHub contributions in an isometric view, while terminals-are-sexy is a curated list of terminal resources in Markdown format. The code snippets demonstrate their different purposes and implementations.

323,302

😎 Awesome lists about all kinds of interesting topics

Pros of awesome

  • Comprehensive curated list of resources across many topics
  • Large community-driven project with frequent updates
  • Useful for discovering high-quality tools and libraries

Cons of awesome

  • Not an interactive or visual tool
  • Requires manual browsing to find relevant information
  • Can be overwhelming due to the sheer volume of content

Code comparison

Not applicable, as awesome is a curated list of resources and doesn't contain code to compare directly with isometric-contributions.

Additional notes

isometric-contributions is a browser extension that provides a 3D isometric view of GitHub contribution graphs, while awesome is a curated list of lists covering various programming topics and resources.

isometric-contributions focuses on enhancing the visual representation of a specific GitHub feature, while awesome aims to be a comprehensive reference for developers across multiple domains.

The target audiences differ: isometric-contributions appeals to GitHub users interested in visualizing their contributions, while awesome serves as a general resource for developers seeking high-quality tools and libraries across various topics.

7,563

A supercharged Git/GitHub command line interface (CLI). An official integration for GitHub and GitHub Enterprise: https://github.com/works-with/category/desktop-tools

Pros of gitsome

  • Offers a comprehensive CLI for GitHub with features like autocomplete and syntax highlighting
  • Provides a broader range of functionality, including repository management and issue tracking
  • Actively maintained with regular updates and improvements

Cons of gitsome

  • More complex to set up and use compared to the simplicity of isometric-contributions
  • Requires Python installation and additional dependencies
  • May have a steeper learning curve for users unfamiliar with command-line interfaces

Code Comparison

isometric-contributions (JavaScript):

function getContributions(username) {
  return fetch(`https://github.com/users/${username}/contributions`)
    .then(response => response.text())
    .then(html => parseContributions(html));
}

gitsome (Python):

@click.command()
@click.argument('query')
def search_repos(query):
    """Search for repos."""
    github_cli.search_repositories(query)

While isometric-contributions focuses on visualizing GitHub contributions, gitsome provides a more comprehensive set of GitHub-related functionalities through its command-line interface. The code snippets demonstrate the different approaches: isometric-contributions uses JavaScript to fetch and parse contribution data, while gitsome utilizes Python with the Click library to create CLI commands for various GitHub operations.

Quickly browse the history of a file from any git repository

Pros of git-history

  • Provides a visual history of file changes over time
  • Allows users to view and interact with specific commits
  • Supports multiple file formats and programming languages

Cons of git-history

  • Focuses on individual file history rather than overall contribution visualization
  • May be less visually appealing for showcasing long-term contribution patterns
  • Requires more user interaction to explore the full history

Code comparison

isometric-contributions:

function createIsometricContributions(data) {
  const svg = d3.select("#contributions")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
  // ... (additional code to create isometric view)
}

git-history:

function renderFileHistory(commits) {
  return (
    <div className="file-history">
      {commits.map(commit => (
        <Commit key={commit.sha} {...commit} />
      ))}
    </div>
  );
}

While isometric-contributions focuses on creating a 3D visualization of GitHub contributions, git-history emphasizes rendering the history of individual file changes. The code snippets reflect these different approaches, with isometric-contributions using D3.js for SVG manipulation and git-history utilizing React components to display commit information.

A guide to learn bash

Pros of bash-guide

  • Comprehensive educational resource for Bash scripting
  • Well-organized content with clear explanations and examples
  • Regularly updated with community contributions

Cons of bash-guide

  • Limited visual appeal compared to isometric-contributions
  • Lacks interactive elements or visualization tools
  • May be overwhelming for absolute beginners

Code Comparison

bash-guide example:

#!/bin/bash
echo "Hello, World!"

isometric-contributions example:

const svg = d3.select("svg");
const projection = d3.geoIsometric();

While bash-guide focuses on providing textual explanations and code snippets for Bash scripting, isometric-contributions is primarily a JavaScript-based visualization tool. The code examples reflect their different purposes, with bash-guide demonstrating basic Bash syntax and isometric-contributions showcasing D3.js for creating isometric visualizations.

bash-guide serves as an excellent reference for learning Bash scripting, offering a wide range of topics and examples. On the other hand, isometric-contributions provides a unique and visually appealing way to display GitHub contribution data, which may be more engaging for some users but less educational in terms of programming concepts.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

GitHub Isometric Contributions extension

Node.js CI XO code style

This is a browser extension for Chrome/Brave and Firefox that lets you toggle between your regular GitHub contribution chart and an isometric pixel art version. It uses obelisk.js for the isometric graphics.

Besides being sort of neat looking, this view is interesting in that it highlights the differences between the number of contributions with more granularity. This isn't meant to completely replace the standard 2D graph though, because in most ways it is actually less useful. For example, there are no axis labels, shorter bars can be hidden behind taller ones, you can't hover over a bar to see the day and count, etc.

Installation

Chrome/Brave

Install from the Chrome Web Store

Firefox

Install from Mozilla Add-ons site

Microsoft Edge

Install from Microsoft Edge Add-ons site

Contributing

Note that I don't currently have any plans for adding new features to the extension. Please contact me before submitting a PR with new functionality.

If you want to hack on the extension, you'll need to install it manually. First clone or fork this repo. Then, on your Chrome Extensions page, make sure "Developer mode" is checked. You can then click the "Load unpacked extension..." button and browse to the src directory of this repo.

To hack on the extension, you'll first need to make sure you've installed it in Developer mode (see above). Once you've made changes to the extension, go back to the Extensions page and click the Reload link under the extension entry.

License

This project is licensed under the MIT License.