From fcc3d3a3b7466ad5af0bf3b5929bffbd806bebcf Mon Sep 17 00:00:00 2001 From: Robert Little <41840506+iesoftwaredeveloper@users.noreply.github.com> Date: Thu, 7 Aug 2025 18:37:55 -0400 Subject: [PATCH 1/3] feat(tools): add conventional commits cheatsheet tool Add commit-memo tool that provides a comprehensive cheatsheet for conventional commits including structure, examples, and common tools. - Implements markdown-based content display - Covers all conventional commit elements (type, scope, description, body, footer) - Includes examples and common tooling (commitizen, commitlint, husky, etc.) - Follows established tool architecture pattern --- components.d.ts | 35 ++++ locales/en.yml | 4 + src/tools/commit-memo/commit-memo.content.md | 163 ++++++++++++++++++ src/tools/commit-memo/commit-memo.e2e.spec.ts | 15 ++ src/tools/commit-memo/commit-memo.vue | 22 +++ src/tools/commit-memo/index.ts | 13 ++ src/tools/index.ts | 2 + 7 files changed, 254 insertions(+) create mode 100644 src/tools/commit-memo/commit-memo.content.md create mode 100644 src/tools/commit-memo/commit-memo.e2e.spec.ts create mode 100644 src/tools/commit-memo/commit-memo.vue create mode 100644 src/tools/commit-memo/index.ts diff --git a/components.d.ts b/components.d.ts index 3e65c3cc..bbe6b40d 100644 --- a/components.d.ts +++ b/components.d.ts @@ -55,6 +55,8 @@ declare module '@vue/runtime-core' { ColoredCard: typeof import('./src/components/ColoredCard.vue')['default'] CommandPalette: typeof import('./src/modules/command-palette/command-palette.vue')['default'] CommandPaletteOption: typeof import('./src/modules/command-palette/components/command-palette-option.vue')['default'] + CommitMemo: typeof import('./src/tools/commit-memo/commit-memo.vue')['default'] + 'CommitMemo.content': typeof import('./src/tools/commit-memo/commit-memo.content.md')['default'] CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default'] CSelect: typeof import('./src/ui/c-select/c-select.vue')['default'] 'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default'] @@ -90,17 +92,28 @@ declare module '@vue/runtime-core' { HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default'] IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default'] 'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default'] + 'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default'] 'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default'] + IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default'] + IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default'] + IconMdiCamera: typeof import('~icons/mdi/camera')['default'] IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default'] IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default'] IconMdiClose: typeof import('~icons/mdi/close')['default'] IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default'] + IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default'] + IconMdiDownload: typeof import('~icons/mdi/download')['default'] IconMdiEye: typeof import('~icons/mdi/eye')['default'] IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default'] IconMdiHeart: typeof import('~icons/mdi/heart')['default'] + IconMdiPause: typeof import('~icons/mdi/pause')['default'] + IconMdiPlay: typeof import('~icons/mdi/play')['default'] + IconMdiRecord: typeof import('~icons/mdi/record')['default'] + IconMdiRefresh: typeof import('~icons/mdi/refresh')['default'] IconMdiSearch: typeof import('~icons/mdi/search')['default'] IconMdiTranslate: typeof import('~icons/mdi/translate')['default'] IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default'] + IconMdiVideo: typeof import('~icons/mdi/video')['default'] InputCopyable: typeof import('./src/components/InputCopyable.vue')['default'] IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default'] Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default'] @@ -129,20 +142,42 @@ declare module '@vue/runtime-core' { MenuLayout: typeof import('./src/components/MenuLayout.vue')['default'] MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'] MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'] + NAlert: typeof import('naive-ui')['NAlert'] NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'] + NButton: typeof import('naive-ui')['NButton'] NCheckbox: typeof import('naive-ui')['NCheckbox'] + NCode: typeof import('naive-ui')['NCode'] NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'] + NColorPicker: typeof import('naive-ui')['NColorPicker'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] + NDatePicker: typeof import('naive-ui')['NDatePicker'] NDivider: typeof import('naive-ui')['NDivider'] + NDynamicInput: typeof import('naive-ui')['NDynamicInput'] NEllipsis: typeof import('naive-ui')['NEllipsis'] + NForm: typeof import('naive-ui')['NForm'] + NFormItem: typeof import('naive-ui')['NFormItem'] + NGi: typeof import('naive-ui')['NGi'] + NGrid: typeof import('naive-ui')['NGrid'] NH1: typeof import('naive-ui')['NH1'] + NH2: typeof import('naive-ui')['NH2'] NH3: typeof import('naive-ui')['NH3'] NIcon: typeof import('naive-ui')['NIcon'] + NImage: typeof import('naive-ui')['NImage'] + NInputGroup: typeof import('naive-ui')['NInputGroup'] + NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel'] + NInputNumber: typeof import('naive-ui')['NInputNumber'] NLayout: typeof import('naive-ui')['NLayout'] NLayoutSider: typeof import('naive-ui')['NLayoutSider'] NMenu: typeof import('naive-ui')['NMenu'] + NProgress: typeof import('naive-ui')['NProgress'] + NScrollbar: typeof import('naive-ui')['NScrollbar'] + NSlider: typeof import('naive-ui')['NSlider'] NSpace: typeof import('naive-ui')['NSpace'] + NSpin: typeof import('naive-ui')['NSpin'] + NStatistic: typeof import('naive-ui')['NStatistic'] + NSwitch: typeof import('naive-ui')['NSwitch'] NTable: typeof import('naive-ui')['NTable'] + NTag: typeof import('naive-ui')['NTag'] NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default'] OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default'] PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default'] diff --git a/locales/en.yml b/locales/en.yml index d03d80d3..647c1bf3 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -392,3 +392,7 @@ tools: text-to-binary: title: Text to ASCII binary description: Convert text to its ASCII binary representation and vice-versa. + + commit-memo: + title: Conventional Commit Cheatsheet + description: Conventional commits cheatsheet with examples and common tools diff --git a/src/tools/commit-memo/commit-memo.content.md b/src/tools/commit-memo/commit-memo.content.md new file mode 100644 index 00000000..9795b444 --- /dev/null +++ b/src/tools/commit-memo/commit-memo.content.md @@ -0,0 +1,163 @@ +# Conventional Commits Cheatsheet + +## Structure + +A conventional commit message follows this structure: + +``` +[optional scope]: + +[optional body] + +[optional footer(s)] +``` + +## Elements + +### Type (Required) +The type describes the kind of change being made. Common types include: + +- **feat**: A new feature for the user +- **fix**: A bug fix for the user +- **docs**: Documentation changes +- **style**: Code style changes (formatting, missing semicolons, etc.) +- **refactor**: Code changes that neither fix a bug nor add a feature +- **test**: Adding or updating tests +- **chore**: Maintenance tasks, dependency updates, build changes +- **perf**: Performance improvements +- **ci**: Changes to CI/CD configuration +- **build**: Changes to build system or external dependencies +- **revert**: Reverting a previous commit + +### Scope (Optional) +The scope provides additional context about what part of the codebase is affected: + +``` +feat(auth): add OAuth2 integration +fix(api): resolve timeout issues +docs(readme): update installation instructions +``` + +### Description (Required) +A brief description of the change: + +- Use imperative mood ("add" not "added" or "adds") +- Keep it concise (50 characters or less recommended) +- Don't capitalize the first letter +- Don't end with a period + +### Body (Optional) +Provides more detailed explanation of the change: + +- Separate from description with a blank line +- Explain the motivation and contrast with previous behavior +- Use imperative mood + +### Footer (Optional) +Contains metadata about the commit: + +- **Breaking changes**: Start with `BREAKING CHANGE:` +- **Issue references**: `Closes #123`, `Fixes #456` +- **Co-authors**: `Co-authored-by: Name ` + +## Examples + +### Simple commit +``` +feat: add user authentication +``` + +### With scope +``` +fix(parser): handle edge case in JSON parsing +``` + +### With body +``` +feat: add email notifications + +Users can now receive email notifications for important events. +This includes account changes, security alerts, and system updates. +``` + +### With footer +``` +fix: prevent racing of requests + +Introduce a request id and a reference to latest request. Dismiss +incoming responses other than from latest request. + +Closes #123 +``` + +### Breaking change +``` +feat!: send an email to the customer when a product is shipped + +BREAKING CHANGE: The shipping service now requires an email address +``` + +### Full example +``` +feat(shopping cart): add ability to remove items + +Users can now remove items from their shopping cart by clicking +the remove button next to each item. This improves the user +experience by allowing corrections without starting over. + +Closes #456 +Co-authored-by: Jane Doe +``` + +## Common Tools + +### Commitizen +Interactive tool for creating conventional commits: + +```shell +npm install -g commitizen +npm install -g cz-conventional-changelog +echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc +``` + +Usage: +```shell +git cz +``` + +### Commitlint +Lints commit messages to ensure they follow conventional format: + +```shell +npm install --save-dev @commitlint/config-conventional @commitlint/cli +``` + +Configuration in `.commitlintrc.json`: +```json +{ + "extends": ["@commitlint/config-conventional"] +} +``` + +### Husky +Git hooks to enforce commit message format: + +```shell +npm install --save-dev husky +npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}' +``` + +### Semantic Release +Automatically generates releases based on conventional commits: + +```shell +npm install --save-dev semantic-release +``` + +### Conventional Changelog +Generates changelogs from conventional commits: + +```shell +npm install -g conventional-changelog-cli +conventional-changelog -p angular -i CHANGELOG.md -s +``` diff --git a/src/tools/commit-memo/commit-memo.e2e.spec.ts b/src/tools/commit-memo/commit-memo.e2e.spec.ts new file mode 100644 index 00000000..542dbc0e --- /dev/null +++ b/src/tools/commit-memo/commit-memo.e2e.spec.ts @@ -0,0 +1,15 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Tool - Conventional Commit Cheatsheet', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/commit-memo'); + }); + + test('Has correct title', async ({ page }) => { + await expect(page).toHaveTitle('Conventional Commit Cheatsheet - IT Tools'); + }); + + test('', async ({ page }) => { + + }); +}); \ No newline at end of file diff --git a/src/tools/commit-memo/commit-memo.vue b/src/tools/commit-memo/commit-memo.vue new file mode 100644 index 00000000..52c8d9a9 --- /dev/null +++ b/src/tools/commit-memo/commit-memo.vue @@ -0,0 +1,22 @@ + + + + + \ No newline at end of file diff --git a/src/tools/commit-memo/index.ts b/src/tools/commit-memo/index.ts new file mode 100644 index 00000000..27410135 --- /dev/null +++ b/src/tools/commit-memo/index.ts @@ -0,0 +1,13 @@ +import { GitCommit } from '@vicons/tabler'; +import { defineTool } from '../tool'; +import { translate } from '@/plugins/i18n.plugin'; + +export const tool = defineTool({ + name: translate('tools.commit-memo.title'), + path: '/commit-memo', + description: translate('tools.commit-memo.description'), + keywords: ['commit', 'conventional', 'git', 'changelog', 'semantic', 'commitizen', 'commitlint'], + component: () => import('./commit-memo.vue'), + icon: GitCommit, + createdAt: new Date('2025-08-07'), +}); diff --git a/src/tools/index.ts b/src/tools/index.ts index 388cfaf4..826f7db1 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -1,6 +1,7 @@ import { tool as base64FileConverter } from './base64-file-converter'; import { tool as base64StringConverter } from './base64-string-converter'; import { tool as basicAuthGenerator } from './basic-auth-generator'; +import { tool as commitMemo } from './commit-memo'; import { tool as emailNormalizer } from './email-normalizer'; import { tool as asciiTextDrawer } from './ascii-text-drawer'; @@ -147,6 +148,7 @@ export const toolsByCategory: ToolCategory[] = [ name: 'Development', components: [ gitMemo, + commitMemo, randomPortGenerator, crontabGenerator, jsonViewer, From c4fead78f2ef762bfe3cb132ee709c654cf15899 Mon Sep 17 00:00:00 2001 From: Robert Little <41840506+iesoftwaredeveloper@users.noreply.github.com> Date: Thu, 7 Aug 2025 18:46:45 -0400 Subject: [PATCH 2/3] fix(commit-memo): resolve linting issues Fix ESLint violations in commit-memo tool files: - Sort imports alphabetically (expect, test) - Prefix unused parameter with underscore (_page) - Add missing newlines at end of files --- src/tools/commit-memo/commit-memo.e2e.spec.ts | 6 +++--- src/tools/commit-memo/commit-memo.vue | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/tools/commit-memo/commit-memo.e2e.spec.ts b/src/tools/commit-memo/commit-memo.e2e.spec.ts index 542dbc0e..7154463e 100644 --- a/src/tools/commit-memo/commit-memo.e2e.spec.ts +++ b/src/tools/commit-memo/commit-memo.e2e.spec.ts @@ -1,4 +1,4 @@ -import { test, expect } from '@playwright/test'; +import { expect, test } from '@playwright/test'; test.describe('Tool - Conventional Commit Cheatsheet', () => { test.beforeEach(async ({ page }) => { @@ -9,7 +9,7 @@ test.describe('Tool - Conventional Commit Cheatsheet', () => { await expect(page).toHaveTitle('Conventional Commit Cheatsheet - IT Tools'); }); - test('', async ({ page }) => { + test('', async ({ _page }) => { }); -}); \ No newline at end of file +}); diff --git a/src/tools/commit-memo/commit-memo.vue b/src/tools/commit-memo/commit-memo.vue index 52c8d9a9..17e65fac 100644 --- a/src/tools/commit-memo/commit-memo.vue +++ b/src/tools/commit-memo/commit-memo.vue @@ -19,4 +19,4 @@ const themeVars = useThemeVars(); border-radius: 4px; overflow: auto; } - \ No newline at end of file + From 556408ad919b35b90ac90bb43a82d0279d2560aa Mon Sep 17 00:00:00 2001 From: Robert Little <41840506+iesoftwaredeveloper@users.noreply.github.com> Date: Thu, 7 Aug 2025 18:51:40 -0400 Subject: [PATCH 3/3] fix(commit-memo): resolve linting issues Fix ESLint violations in commit-memo tool files: - Revert prefix unused parameter with underscore (_page) --- src/tools/commit-memo/commit-memo.e2e.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tools/commit-memo/commit-memo.e2e.spec.ts b/src/tools/commit-memo/commit-memo.e2e.spec.ts index 7154463e..f9af6630 100644 --- a/src/tools/commit-memo/commit-memo.e2e.spec.ts +++ b/src/tools/commit-memo/commit-memo.e2e.spec.ts @@ -9,7 +9,7 @@ test.describe('Tool - Conventional Commit Cheatsheet', () => { await expect(page).toHaveTitle('Conventional Commit Cheatsheet - IT Tools'); }); - test('', async ({ _page }) => { + test('', async ({ page }) => { }); });