Skip to content

Commit

Permalink
feat(pages): enhance commit messages page with CLI installation instr…
Browse files Browse the repository at this point in the history 
…uctions and dual mode analysis

- Replaced Content layout with Code component for better code display.
- Added detailed installation instructions for Gitset CLI, including project and global installation options.
- Introduced dual mode analysis with tabs for Semantic and Custom modes, allowing users to choose their preferred commit message generation style.
- Enhanced user engagement with example usage and benefits of using Gitset CLI, including advanced automation and enterprise integration.
- Improved layout and styling for better readability and user experience.
  • Loading branch information
@imprvhub
imprvhub committed Jan 9, 2025
1 parent 9e656b1 commit 60dcd2b
Show file tree
Hide file tree
Showing 3 changed files with 256 additions and 20 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "gitset",
"type": "module",
"version": "1.3.8",
"version": "1.3.9",
"engines": {
"node": "18.x"
},
Expand Down
270 changes: 253 additions & 17 deletions src/pages/commit-messages.astro
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import Content from '../layouts/Content.astro';
import Code from '../components/ui/Code.astro';
import CTA from '../sections/CTA.astro';
import Footer from '../components/layout/Footer.astro'
import Header from '../components/layout/Header.astro'
Expand Down Expand Up @@ -52,24 +52,267 @@ const githubToken = userInfo?.user?.oauthTokens?.find(token => token.strategy ==
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 mt-16 lg:mt-0 top">
<div class="flex justify-center"></div>
<CTA

align="center"
title={`<span id="cta-title"><strong>Commit Messages</strong>-Generator</span>`}
description={`
<span id="cta-description">
Generate semantic commit messages through automated code analysis. Select a repository you own and upload changes via drag-and-drop interface.
Generate semantic commit messages through automated code analysis. Install <span style="font-weight:600">Gitset-CLI</span> and never write a commit message manually again.
</span>
`}
>

<div class="max-w-3xl mx-auto">
<div class="flex w-full border-b mb-4">
<button
id="projectTab"
class="flex-1 py-2 text-sm font-medium border-b-2 border-teal-600 !text-neutral-700"
>
Project Installation
</button>
<button
id="globalTab"
class="flex-1 py-2 text-sm font-medium border-b-2 border-transparent !text-neutral-700 hover:text-[##7BFEF5]"
>
Global Installation
</button>
</div>

</CTA>
<div id="projectContent" class="space-y-4">
<span class="text-center text-neutral-700 text-lg font-semibold">Install in your project</span>
<br>
<span class="text-center text-neutral-700">
1. Add Gitset CLI to your project's dependencies for automated commit message generation.
</span>
<br>
<Code code="npm install @gitset-dev/cli" />
</div>

<div id="globalContent" class="hidden space-y-4">
<span class="text-lg text-neutral-700 font-semibold">Install globally</span>
<br>
<span class="text-center text-neutral-700">
1. Install Gitset CLI globally to use it across all your projects.
</span>
<Code code="npm install -g @gitset-dev/cli" />
</div>
<div>
<span class="text-center text-neutral-700 top-3 relative">
2. <span class="font-semibold">Stage</span> the modified file/s.
</span>
</div>
<br>
<div>
<span class="text-center text-neutral-700">
3. Generate semantic commit messages for your modified files.
</span>

<div class="max-w-3xl mx-auto mt-4">
<div class="flex w-full border-b mb-4">
<button
id="semanticTab"
class="flex-1 py-2 text-sm font-medium border-b-2 border-teal-600 !text-neutral-700"
>
Semantic Mode
</button>
<button
id="customTab"
class="flex-1 py-2 text-sm font-medium border-b-2 border-transparent !text-neutral-700 hover:text-[##7BFEF5]"
>
Custom Mode
</button>
</div>

<div id="semanticContent" class="space-y-4">
<span class="text-center text-neutral-700">
Default <strong>Semantic Mode</strong> following GitHub's conventional standards. <br> Perfect for maintaining consistent, professional commits.
</span>
<br>
<Code code="gitset suggest" />
</div>

<div id="customContent" class="hidden space-y-4">
<span class="text-center text-neutral-700">
<strong>Custom Mode</strong> Adapts to your team's commit style <br>by analyzing repository's commit history.
</span>
<br>
<Code code="gitset suggest --mode custom" /><br><br>
<span class="text-sm text-neutral-700 mt-2">
Optional: Configure analysis depth
</span><br>
<Code code="gitset suggest --mode custom --commit-count 30" />
</div>
</div>
</div>
</div>
<br>
<div class="w-full space-y-6">
<span class="text-xl text-neutral-700 font-bold text-center block">Example Usage:</span>
<img
src="/gitset-example-usage.gif"
alt="Gitset CLI Usage Example"
class="w-full rounded-lg shadow-lg mb-6 max-w-3xl mx-auto"
/>

<div class="max-w-4xl mx-auto pt-8">
<span class="text-xl text-neutral-700 font-bold text-center block">Why Choose Gitset CLI?</span>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
<!-- Card 1 -->

<div class="w-full bg-gradient-to-r from-[rgba(41,58,142,1)] to-[rgba(59,159,168)] rounded-lg p-px h-full">
<div class="w-full h-full bg-neutral-100/90 text-neutral-500 rounded-lg p-3">
<div class="w-full rounded-lg p-4 shadow-sm">
<div class="text-neutral-700 mb-2 flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
</div>
<span class="block text-neutral-700 font-semibold mb-2 text-center">Dual Mode Analysis</span>
<p class="text-sm text-neutral-700 text-center">
Choose between semantic standards or custom style adaptation. Use semantic mode for GitHub's conventions or custom mode to match your team's style.
</p>
</div>
</div>
</div>

<!-- Card 2 -->
<div class="w-full bg-gradient-to-r from-[rgba(41,58,142,1)] to-[rgba(59,159,168)] rounded-lg p-px h-full">
<div class="w-full h-full bg-neutral-100/90 text-neutral-500 rounded-lg p-3">
<div class="w-full rounded-lg p-4 shadow-sm">
<div class="text-neutral-700 mb-2 flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
</div>
<span class="block text-neutral-700 font-semibold mb-2 text-center">Enterprise Integration</span>
<p class="text-sm text-neutral-700 text-center">
Seamlessly integrates with existing Git workflows. Compatible with all major version control platforms and development environments.
</p>
</div>
</div>
</div>

<!-- Card 3 -->
<div class="w-full bg-gradient-to-r from-[rgba(41,58,142,1)] to-[rgba(59,159,168)] rounded-lg p-px h-full">
<div class="w-full h-full bg-neutral-100/90 text-neutral-500 rounded-lg p-3">
<div class="w-full rounded-lg p-4 shadow-sm">
<div class="text-neutral-700 mb-2 flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="block text-neutral-700 font-semibold mb-2 text-center">Advanced Automation</span>
<p class="text-sm text-neutral-700 text-center">
Harnesses cutting-edge AI to produce contextually precise commit messages, streamlining workflows and saving development teams valuable time.
</p>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="flex justify-center button-wrapper mt-16">
<div class="gradient-border">
<a href="/cli-assistant"><button
class="dark:text-neutral-700 text-sm text-neutral-200 dark:bg-neutral-200 bg-neutral-700 px-6 py-4 rounded-[10px] transition-all duration-300 hover:text-[rgb(91,207,218)] dark:hover:text-[rgb(91,207,218)] cursor-pointer whitespace-nowrap flex items-center justify-center"
>
CLI Troubleshooting
</button></a>

</div>
</div>

</CTA>
</div>
</main>
<Footer />
</div>
</div>
</Layout>

<script>
function setupModeTabs() {
const semanticTab = document.getElementById('semanticTab') as HTMLButtonElement;
const customTab = document.getElementById('customTab') as HTMLButtonElement;
const semanticContent = document.getElementById('semanticContent') as HTMLDivElement;
const customContent = document.getElementById('customContent') as HTMLDivElement;

if (!semanticTab || !customTab || !semanticContent || !customContent) return;

function switchModeTab(
activeTab: HTMLButtonElement,
activeContent: HTMLDivElement,
inactiveTab: HTMLButtonElement,
inactiveContent: HTMLDivElement
) {
activeTab.classList.add('border-teal-600', 'text-neutral-700');
activeTab.classList.remove('border-transparent', 'text-neutral-700');
inactiveTab.classList.remove('border-teal-600', 'text-neutral-700');
inactiveTab.classList.add('border-transparent', 'text-neutral-700');
activeContent.classList.remove('hidden');
inactiveContent.classList.add('hidden');
}

semanticTab.addEventListener('click', () => {
switchModeTab(semanticTab, semanticContent, customTab, customContent);
});

customTab.addEventListener('click', () => {
switchModeTab(customTab, customContent, semanticTab, semanticContent);
});
}

setupTabs();
setupModeTabs();
function setupTabs() {
const projectTab = document.getElementById('projectTab') as HTMLButtonElement;
const globalTab = document.getElementById('globalTab') as HTMLButtonElement;
const projectContent = document.getElementById('projectContent') as HTMLDivElement;
const globalContent = document.getElementById('globalContent') as HTMLDivElement;

if (!projectTab || !globalTab || !projectContent || !globalContent) return;

function switchTab(
activeTab: HTMLButtonElement,
activeContent: HTMLDivElement,
inactiveTab: HTMLButtonElement,
inactiveContent: HTMLDivElement
) {
activeTab.classList.add('border-teal-600', 'text-neutral-700');
activeTab.classList.remove('border-transparent', 'text-neutral-700');
inactiveTab.classList.remove('border-teal-600', 'text-neutral-700');
inactiveTab.classList.add('border-transparent', 'text-neutral-700');
activeContent.classList.remove('hidden');
inactiveContent.classList.add('hidden');
}

projectTab.addEventListener('click', () => {
switchTab(projectTab, projectContent, globalTab, globalContent);
});

globalTab.addEventListener('click', () => {
switchTab(globalTab, globalContent, projectTab, projectContent);
});
}

setupTabs();

function updateCTA() {
const ctaTitle = document.getElementById('cta-title');
const ctaDescription = document.getElementById('cta-description');

if (ctaTitle && ctaDescription) {
ctaTitle.innerHTML = "Generated <strong>Commit Message</strong>";
ctaDescription.textContent = "The generated Commit Message is a general reference and may not be fully accurate. If it doesn't meet your expectations, feel free to try again.";
}
}

window.addEventListener('readmeGenerated', updateCTA);
</script>

<style>
.main-container {
min-height: 100vh;
Expand Down Expand Up @@ -103,18 +346,11 @@ const githubToken = userInfo?.user?.oauthTokens?.find(token => token.strategy ==
.cta-button {
background-color: #59b4aa;
}
</style>

<script>
function updateCTA() {
const ctaTitle = document.getElementById('cta-title');
const ctaDescription = document.getElementById('cta-description');

if (ctaTitle && ctaDescription) {
ctaTitle.innerHTML = "Generated <strong>Commit Message</strong>";
ctaDescription.textContent = "The generated Commit Message is a general reference and may not be fully accurate. If it doesn't meet your expectations, feel free to try again.";
}
.from-primary\/50 {
--tw-gradient-from: rgb(59 159 168) var(--tw-gradient-from-position);
}
.to-secondary\/50 {
--tw-gradient-to: rgb(252 192 176) var(--tw-gradient-to-position);
}

window.addEventListener('readmeGenerated', updateCTA);
</script>
</style>

0 comments on commit 60dcd2b

Please sign in to comment.