Skip to content

Commit

Permalink
Merge pull request #12 from sourcetoad/static-positioning
Browse files Browse the repository at this point in the history
Static positioning
  • Loading branch information
erik-perri authored Jan 24, 2024
2 parents 080164f + d42a404 commit c23f577
Show file tree
Hide file tree
Showing 32 changed files with 623 additions and 175 deletions.
4 changes: 2 additions & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'plugin:@typescript-eslint/recommended-type-checked',
'plugin:@typescript-eslint/strict',
],
},
Expand All @@ -26,5 +25,6 @@ module.exports = {
rules: {
'prettier/prettier': ['error'],
'simple-import-sort/imports': 'error',
'no-console': ['error', { allow: ['error', 'info', 'warn'] }],
},
};
4 changes: 2 additions & 2 deletions .github/workflows/check-code.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ jobs:
name: Check Code (Node ${{ matrix.node }})

steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node }}
cache: 'npm'
Expand Down
6 changes: 3 additions & 3 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ jobs:

name: Publish
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4

- name: Setup node
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: 18
cache: 'npm'
Expand All @@ -27,7 +27,7 @@ jobs:
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

- uses: actions/setup-node@v3
- uses: actions/setup-node@v4
with:
registry-url: 'https://npm.pkg.github.com'

Expand Down
71 changes: 58 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,61 @@ npx add-badges <input-glob> <badge-text> [options]

See [fast-glob](https://github.com/mrmlnc/fast-glob) for glob details.

### Options

See [samples](https://github.com/sourcetoad/add-badge/blob/master/SAMPLES.md) for some previews.

| Option | Description | Default |
|----------------------|--------------------------------------------------------------------------|------------------------|
| `--font-file` | Text font file | Roboto Black (Bundled) |
| `--font-size` | Text size (pt, scaled for images not 192px) | 28 |
| `--text-color` | Text color (`transparent` for transparent) | #666666 |
| `--background-color` | Badge background color | #ffffff |
| `--gravity` | Badge gravity (northwest, north, northeast, southwest, south, southeast) | southeast |
| `--shadow-color` | Badge shadow color | rgba(0,0,0,0.6) |
| `--dry-run`/`-d` | Does not perform actions | |
## Options

See [samples](https://github.com/sourcetoad/add-badge/blob/master/SAMPLES.md) for previews.

### Font File `--font-file`

The font file path to use for the badge text.

Type: `file`
Default: `Roboto Black (Bundled)`

### Font Size `--font-size`

The font size to use for the badge text. The size will be scaled up or down if the image is not 192px.

Type: `point`
Default: `28`

### Text Color `--text-color`

The color to use for the badge text. Use `transparent` for transparent text.

Type: `color`
Default: `#666666`

### Background Color `--background-color`

The color to use for the badge background.

Type: `color`
Default: `#ffffff`

### Shadow Color `--shadow-color`

The color to use for the badge shadow.

Type: `color`
Default: `rgba(0,0,0,0.6)`

### Gravity `--gravity`

The gravity to use for the badge. The badge will be placed in the corner specified by the gravity.

Type: `northwest | north | northeast | southwest | south | southeast`
Default: `southeast`

### Position `--position`

If set, the badge will be placed manually instead of automatically. If only one number is provided, the badge will be placed on the gravity axis at the position. If two are provided, the first will be the `x` position and the second will be the `y` position.

Numbers are in percent of the image's dimensions (integer).

Type: `number | number,number`
Default: `undefined`

### Dry Run `--dry-run`/`-d`

If set, the command will only preview the files that would be changed.
36 changes: 23 additions & 13 deletions SAMPLES.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,38 @@

### Gravity

| `--gravity northwest` | `--gravity north` | `--gravity northeast` |
|---------------------------------------------------------------|-----------------------------------------------------------|---------------------------------------------------------------|
| `--gravity=northwest` | `--gravity=north` | `--gravity=northeast` |
|:--------------------------------------------------------------|:----------------------------------------------------------|:--------------------------------------------------------------|
| ![](./samples/output/ic_launcher-xxxhdpi-northwest.png) | ![](./samples/output/ic_launcher-xxxhdpi-north.png) | ![](./samples/output/ic_launcher-xxxhdpi-northeast.png) |
| ![](./samples/output/ic_launcher_round-xxxhdpi-northwest.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-north.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-northeast.png) |

| `--gravity southwest` | `--gravity south` | `--gravity southeast` |
|---------------------------------------------------------------|-----------------------------------------------------------|-----------------------------------------------------|
| `--gravity=southwest` | `--gravity=south` | `--gravity=southeast` |
|:--------------------------------------------------------------|:----------------------------------------------------------|:----------------------------------------------------|
| ![](./samples/output/ic_launcher-xxxhdpi-southwest.png) | ![](./samples/output/ic_launcher-xxxhdpi-south.png) | ![](./samples/output/ic_launcher-xxxhdpi.png) |
| ![](./samples/output/ic_launcher_round-xxxhdpi-southwest.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-south.png) | ![](./samples/output/ic_launcher_round-xxxhdpi.png) |

### Size
### Position

| Adaptive | MDPI | MDPI Round |
|---------------------------------------------------|--------------------------------------------|--------------------------------------------------|
| ![](./samples/output/ic_launcher_foreground.webp) | ![](./samples/output/ic_launcher-mdpi.png) | ![](./samples/output/ic_launcher_round-mdpi.png) |
| `--position=0` <br/> `--gravity=northeast` | `--position=50` <br/> `--gravity=northeast` | `--position=100` <br/> `--gravity=northeast` |
|:-------------------------------------------------------------------------|:--------------------------------------------------------------------------|:---------------------------------------------------------------------------|
| ![](./samples/output/ic_launcher_round-xxxhdpi-position-northeast-0.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-position-northeast-50.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-position-northeast-100.png) |

| `--position=10` <br/> `--gravity=north` | `--position=10,50` <br/> `--gravity=north` |
|:----------------------------------------------------------------------|:-------------------------------------------------------------------------|
| ![](./samples/output/ic_launcher_round-xxxhdpi-position-north-10.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-position-north-10x50.png) |

### Appearance

| `--background-color "rgba(0,0,0,0.75)"` `--text-color transparent` |
|--------------------------------------------------------------------|
| ![](./samples/output/ic_launcher-xxxhdpi-dark-transparent.png) |
| `--background-color="rgba(0,0,0,0.75)"` <br/> `--text-color=transparent` | `--shadow-color="hsl(78,100%,37%)"` <br/> `--text-color=transparent` |
|:-------------------------------------------------------------------------|:---------------------------------------------------------------------|
| ![](./samples/output/ic_launcher-xxxhdpi-dark-transparent.png) | ![](./samples/output/ic_launcher-xxxhdpi-shadow.png) |

| `--font-size 50` |
|------------------------------------------------------------|
| `--font-size=50` |
|:-----------------------------------------------------------|
| ![](./samples/output/ic_launcher_round-xxxhdpi-larger.png) |

### Size

| Adaptive | MDPI | MDPI Round |
|:--------------------------------------------------|:-------------------------------------------|:-------------------------------------------------|
| ![](./samples/output/ic_launcher_foreground.webp) | ![](./samples/output/ic_launcher-mdpi.png) | ![](./samples/output/ic_launcher_round-mdpi.png) |
72 changes: 72 additions & 0 deletions __tests__/utils/calculateCircularBadgePosition.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { describe, expect, it } from 'vitest';

import BadgeGravity from '../../src/types/BadgeGravity';
import calculateCircularBadgePosition from '../../src/utils/calculateCircularBadgePosition';

describe('calculateManualBadgePosition', () => {
const container = { height: 100, width: 100 };
const badge = { height: 10, width: 10 };
const circleRadius = 30;

it.each([
[
'north',
{
gravity: BadgeGravity.North,
expected: { point: { x: 45, y: 20 }, rotation: 0 },
},
],
[
'northeast',
{
gravity: BadgeGravity.Northeast,
expected: { point: { x: 60, y: 26 }, rotation: 45 },
},
],
[
'northwest',
{
gravity: BadgeGravity.Northwest,
expected: { point: { x: 26, y: 26 }, rotation: -45 },
},
],
[
'south',
{
gravity: BadgeGravity.South,
expected: { point: { x: 45, y: 70 }, rotation: 0 },
},
],
[
'southeast',
{
gravity: BadgeGravity.Southeast,
expected: { point: { x: 60, y: 60 }, rotation: -45 },
},
],
[
'southwest',
{
gravity: BadgeGravity.Southwest,
expected: { point: { x: 26, y: 60 }, rotation: 45 },
},
],
])('works for %s', (_, { gravity, expected }) => {
const result = calculateCircularBadgePosition(
container,
badge,
circleRadius,
gravity,
);

expect(result.rotation).toEqual(expected.rotation);
expect(
Math.round(result.point.x),
`Expected x to be ${expected.point.x} but was ${Math.round(result.point.x)}`,
).toEqual(expected.point.x);
expect(
Math.round(result.point.y),
`Expected y to be ${expected.point.y} but was ${Math.round(result.point.y)}`,
).toEqual(expected.point.y);
});
});
Loading

0 comments on commit c23f577

Please sign in to comment.