Skip to content

Commit

Permalink
feat: add code block for git commit code
Browse files Browse the repository at this point in the history
  • Loading branch information
@sameemul-haque
sameemul-haque committed Apr 24, 2024
1 parent dda6b33 commit 0ae670b
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 123 deletions.
9 changes: 3 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,20 @@
## Features

- Generate Git commit commands with custom dates, times, and messages.
- Easily create Git commits to modify the contribution graph on GitHub.
- Customize the contribution graph for artistic, personal, or branding purposes.

## Usage

- Select the year you want to customize (Choosing the year before your GitHub joining year would be better, can use GitHub api for checking the joined date).
- Select your timezone. (I dont know if this is important or not)
- Select the desired rectangle(s) on the GitHub contribution graph that you want to customize.
- Use the GitArt website to specify the details of your Git commit, such as the date, time, and message.
- Select the desired rectangle(s) on the GitHub contribution graph that you want to customize and click `Generate` button.
- Copy the generated Git commit command.
- Run the copied command in your local Git repository to make the desired changes.
- Run the copied command in your local Git repository to make the desired changes (better to create a new empty repo).
- Push the changes to your GitHub repository to update the contribution graph.

To create an empty commit with a specific date:
```bash
git commit --allow-empty --date="31 Oct 2022 11:11:11 +0530" --allow-empty-message -m ""
git commit --allow-empty --date="31 Oct 2022" --allow-empty-message -m ""
```

![preview](/public/banner.png "preview")
202 changes: 100 additions & 102 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>GitArt - GitHub Contribution Graph Customizer</title>
<meta
name="description"
content="Enhance your GitHub contribution graph with GitArt - Personalize your profile with names, messages, symbols, and logos, shaping your GitHub presence uniquely."
/>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<link rel="canonical" href="https://sameemul-haque.github.io/GitArt/" />
<title>GitArt - GitHub Contribution Graph Customizer</title>
<meta name="description"
content="Enhance your GitHub contribution graph with GitArt - Personalize your profile with names, messages, symbols, and logos, shaping your GitHub presence uniquely." />

<meta
property="og:title"
content="GitArt - GitHub Contribution Graph Customizer"
/>
<meta
property="og:description"
content="Enhance your GitHub contribution graph with GitArt - Personalize your profile with names, messages, symbols, and logos, shaping your GitHub presence uniquely."
/>
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://sameemul-haque.github.io/GitArt/banner.png"
/>
<meta property="og:image:width" content="1366" />
<meta property="og:image:height" content="768" />
<meta
property="og:image:alt"
content="GitArt - GitHub Contribution Graph Customizer"
/>
<meta property="og:image:type" content="image/png" />
<meta
property="og:url"
content="https://sameemul-haque.github.io/GitArt/"
/>
<meta
property="og:site_name"
content="GitArt - GitHub Contribution Graph Customizer"
/>
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<link rel="canonical" href="https://sameemul-haque.github.io/GitArt/" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@sameemul_haque/" />
<meta name="twitter:title" content="Sameemul Haque" />
<meta name="twitter:creator" content="@sameemul_haque/" />
<meta
name="twitter:description"
content="GitArt - GitHub Contribution Graph Customizer"
/>
<meta
name="twitter:image"
content="https://sameemul-haque.github.io/GitArt/banner.png"
/>
<meta property="og:title" content="GitArt - GitHub Contribution Graph Customizer" />
<meta property="og:description"
content="Enhance your GitHub contribution graph with GitArt - Personalize your profile with names, messages, symbols, and logos, shaping your GitHub presence uniquely." />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://sameemul-haque.github.io/GitArt/banner.png" />
<meta property="og:image:width" content="1366" />
<meta property="og:image:height" content="768" />
<meta property="og:image:alt" content="GitArt - GitHub Contribution Graph Customizer" />
<meta property="og:image:type" content="image/png" />
<meta property="og:url" content="https://sameemul-haque.github.io/GitArt/" />
<meta property="og:site_name" content="GitArt - GitHub Contribution Graph Customizer" />

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1><img class="logo-gitart" src="assets/logo.svg" alt="Logo" />GitArt</h1>
<h2>GitHub Contribution Graph Customizer</h2>
<p id="description-gitart">
<b>GitArt</b> is a tool that allows users to manipulate their GitHub
contribution graph by generating Git commit commands. With this tool,
users can customize their contribution graph to display their name,
messages, symbols, logos, or any other desired patterns.
</p>
<div class="graph-container">
<div class="graph">
<select size="3" id="year-select"></select>
<ul class="months">
<li>Jan</li>
<li>Feb</li>
<li>Mar</li>
<li>Apr</li>
<li>May</li>
<li>Jun</li>
<li>Jul</li>
<li>Aug</li>
<li>Sep</li>
<li>Oct</li>
<li>Nov</li>
<li>Dec</li>
</ul>
<ul class="days">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul class="squares">
<!-- added via javascript -->
</ul>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@sameemul_haque/" />
<meta name="twitter:title" content="Sameemul Haque" />
<meta name="twitter:creator" content="@sameemul_haque/" />
<meta name="twitter:description" content="GitArt - GitHub Contribution Graph Customizer" />
<meta name="twitter:image" content="https://sameemul-haque.github.io/GitArt/banner.png" />

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>

<body>
<h1><img class="logo-gitart" src="assets/logo.svg" alt="Logo" />GitArt</h1>
<h2>GitHub Contribution Graph Customizer</h2>
<p id="description-gitart">
<b>GitArt</b> is a tool that allows users to manipulate their GitHub
contribution graph by generating Git commit commands. With this tool,
users can customize their contribution graph to display their name,
messages, symbols, logos, or any other desired patterns.
</p>
<div class="graph-container">
<div class="graph">
<select size="3" id="year-select"></select>
<ul class="months">
<li>Jan</li>
<li>Feb</li>
<li>Mar</li>
<li>Apr</li>
<li>May</li>
<li>Jun</li>
<li>Jul</li>
<li>Aug</li>
<li>Sep</li>
<li>Oct</li>
<li>Nov</li>
<li>Dec</li>
</ul>
<ul class="days">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul class="squares">
<!-- added via javascript -->
</ul>
</div>
</div>
<button class="generate-btn" onclick="">Generate</button>
<div class="code-container">
<div class="code-editor">
<div class="code-header"><svg xmlns="http://www.w3.org/2000/svg" fill="#26a641" viewBox="0 0 115.77 122.88"
class="code-icon" xml:space="preserve">
<path
d="M89.62 13.96v7.73h12.2v.02c3.85.01 7.34 1.57 9.86 4.1 2.5 2.51 4.06 5.98 4.07 9.82h.02v73.3h-.02c-.01 3.84-1.57 7.33-4.1 9.86-2.51 2.5-5.98 4.06-9.82 4.07v.02H40.1v-.02c-3.84-.01-7.34-1.57-9.86-4.1-2.5-2.51-4.06-5.98-4.07-9.82h-.02V92.51h-12.2v-.02c-3.84-.01-7.34-1.57-9.86-4.1-2.5-2.51-4.06-5.98-4.07-9.82H0V13.95h.02c.01-3.85 1.58-7.34 4.1-9.86C6.63 1.59 10.1.03 13.94.02V0h61.73v.02c3.85.01 7.34 1.57 9.86 4.1 2.5 2.51 4.06 5.98 4.07 9.82h.02zm-10.58 7.73v-7.75h.02c0-.91-.39-1.75-1.01-2.37-.61-.61-1.46-1-2.37-1v.02H13.95v-.02c-.91 0-1.75.39-2.37 1.01-.61.61-1 1.46-1 2.37h.02v64.62h-.02c0 .91.39 1.75 1.01 2.37.61.61 1.46 1 2.37 1v-.02h12.2V35.64h.02c.01-3.85 1.58-7.34 4.1-9.86 2.51-2.5 5.98-4.06 9.82-4.07v-.02zm26.14 87.23V35.63h.02c0-.91-.39-1.75-1.01-2.37-.61-.61-1.46-1-2.37-1v.02H40.09v-.02c-.91 0-1.75.39-2.37 1.01-.61.61-1 1.46-1 2.37h.02v73.3h-.02c0 .91.39 1.75 1.01 2.37.61.61 1.46 1 2.37 1v-.02h61.73v.02c.91 0 1.75-.39 2.37-1.01.61-.61 1-1.46 1-2.37h-.02z"
style="fill-rule:evenodd;clip-rule:evenodd" />
</svg>
</div>
<div class="editor-content">
<code class="code">
<p><span class="color-1"> git commit --allow-empty --date=<span class="color-2">"27 Oct 2022"</span> --allow-empty-message -m "" </span><span class="color-2">&&</span></p>
<p><span class="color-1"> git commit --allow-empty --date=<span class="color-2">"28 Oct 2022"</span> --allow-empty-message -m "" </span><span class="color-2">&&</span></p>
<p><span class="color-1"> git commit --allow-empty --date=<span class="color-2">"29 Oct 2022"</span> --allow-empty-message -m "" </span><span class="color-2">&&</span></p>
<p><span class="color-1"> git commit --allow-empty --date=<span class="color-2">"30 Oct 2022"</span> --allow-empty-message -m "" </span><span class="color-2">&&</span></p>
<p><span class="color-1"> git commit --allow-empty --date=<span class="color-2">"31 Oct 2022"</span> --allow-empty-message -m "" </span></p>

</code>
</div>
</div>
<button class="generate-btn" onclick="window.alert('Will do later 😴')">Generate</button>
<script src="index.js"></script>
</body>
</html>
</div>
<script src="index.js"></script>
</body>

</html>
73 changes: 58 additions & 15 deletions public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
--square-gap: 5px;
--week-width: calc(var(--square-size) + var(--square-gap));
}

body {
color: #fafbfc;
background-color: #0d1117;
Expand Down Expand Up @@ -48,9 +49,11 @@ h2 {
.months {
grid-area: months;
}

.days {
grid-area: days;
}

.squares {
grid-area: squares;
}
Expand All @@ -76,6 +79,7 @@ h2 {
.generate-btn:hover {
transform: scale(1.05);
}

.graph {
display: inline-grid;
grid-template-areas:
Expand All @@ -93,20 +97,8 @@ h2 {
}

.months {
display: grid;
grid-template-columns:
calc(var(--week-width) * 4) /* Jan */
calc(var(--week-width) * 4) /* Feb */
calc(var(--week-width) * 4) /* Mar */
calc(var(--week-width) * 5) /* Apr */
calc(var(--week-width) * 4) /* May */
calc(var(--week-width) * 4) /* Jun */
calc(var(--week-width) * 5) /* Jul */
calc(var(--week-width) * 4) /* Aug */
calc(var(--week-width) * 4) /* Sep */
calc(var(--week-width) * 5) /* Oct */
calc(var(--week-width) * 4) /* Nov */
calc(var(--week-width) * 5) /* Dec */;
display: flex;
justify-content: space-around;
}

.days,
Expand Down Expand Up @@ -166,25 +158,76 @@ li {
width: 100%;
}

.code-container {
margin-top: 1rem;
margin-bottom: 1rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

.code-editor {
background-color: #161b22;
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
border-radius: 8px;
padding: 2px;
}

.code-header {
display: flex;
justify-content: end;
margin: 10px;
}

.code-icon {
padding: 5px;
width: 20px;
transition: .2s ease;
}

.code-icon:hover {
cursor: pointer;
border-radius: 5px;
background-color: #0d1117;
}

.editor-content {
margin: 0 10px 10px;
color: white;
}


.editor-content .color-1 {
color: rgb(86 156 214);
}

.editor-content .color-2 {
color: rgb(156 220 254);
}

@media screen and (max-width: 600px) {
h1 {
font-size: 3rem;
}

h2 {
font-size: 0.75rem;
margin-top: -40px;
}

.logo-gitart {
width: 50px;
height: 50px;
}

.generate-btn {
margin-right: 1rem;
margin-bottom: 1rem;
}

#description-gitart {
font-size: 0.8rem;
margin-left: 1rem;
margin-right: 1rem;
}
}
}

0 comments on commit 0ae670b

Please sign in to comment.