Skip to content

Commit 00b3834

Browse files
0l1v3rr0l1v3rr
committed
client: bugfix
1 parent 33e6b1d commit 00b3834

File tree

7 files changed

+91
-61
lines changed

7 files changed

+91
-61
lines changed

‎README.md

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</a>
55
</div>
66

7-
<div align="center">
7+
<!--<div align="center">
88
<a href="https://github.com/0l1v3rr/github-readme-tech-stack/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=" target="_blank">
99
<img src="https://img.shields.io/badge/Request%20Feature-%20-%234cd137" alt="Request Feature">
1010
</a>
@@ -20,7 +20,7 @@
2020
<a href="https://hits.seeyoufarm.com">
2121
<img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2F0l1v3rr%2Fgithub-readme-tech-stack&count_bg=%2327A968&title_bg=%235C5C5C&icon=&icon_color=%23E7E7E7&title=Views&edge_flat=false"/>
2222
</a>
23-
</div>
23+
</div>-->
2424

2525
<div align="center">
2626
Show off your favorite technologies, tools, or the tech stack your project uses with these fully customizable, great-looking cards on your GitHub README!
@@ -45,7 +45,7 @@ As a developer, it's important to showcase your expertise in different technolog
4545

4646
The images are fully customizable, so you can choose the technologies you want to showcase and even adjust the colors, icons, and the alignment to match your personal brand.
4747

48-
Personally, I've always wanted to show off my skills in a clean and modern way. I could do that with just the badges, but they didn't match the style of the [github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats) and the [github-readme-stats](https://github.com/anuraghazra/github-readme-stats). With **github-readme-tech-stack**, that's no longer a problem, it naturally matches those cards!
48+
Personally, I've always wanted to show off my skills in a clean and modern way. I could do that with just the badges, but they didn't match the style of [github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats) and [github-readme-stats](https://github.com/anuraghazra/github-readme-stats). With **github-readme-tech-stack**, that's no longer a problem, it naturally matches those cards!
4949

5050
<hr>
5151

@@ -66,28 +66,28 @@ Personally, I've always wanted to show off my skills in a clean and modern way.
6666

6767
None of the fields are required. Each query parameter has a default value, which is listed below.
6868

69-
| Parameter | Example | Default value | Description |
70-
| ---------------- | ------------------------- | ------------- | ----------------------------------------------------------------------------------------- |
71-
| **title** | `?title=My%20Title` | My Tech Stack | The title of the card. `%20` can be used as a space. |
72-
| **theme** | `?theme=github_dark` | github | The theme of the card. You can browse between the themes [here](docs/THEMES.md). |
73-
| **align** | `?align=center` | left | The alignment of the badges. (`left`, `center`, `right`) |
74-
| **titleAlign** | `?align=center` | left | The alignment of the title. (`left`, `center`, `right`) |
75-
| **showBorder** | `?showBorder=false` | true | Display the border around the card or not. (`true`, `false`) |
76-
| **hideTitle** | `?hideTitle=true` | false | Display the title of the card or not. (`true`, `false`) |
77-
| **hideBg** | `?hideBg=true` | false | If true, sets the background to transparent. (`true`, `false`) |
78-
| **borderRadius** | `?borderRadius=12.5` | 4.5 | Number between 0 and 50. |
79-
| **fontFamily** | `?fontFamily=consolas` | Segoe UI | The font family of the title. If the specified family doesn't exist, the default is used. |
80-
| **fontSize** | `?fontSize=20` | 18 | The size of the title. Accepts a number between 15 and 30. |
81-
| **fontWeight** | `?fontWeight=normal` | semibold | The thickness of the title. (`thin`, `normal`, `semibold`, `bold`) |
82-
| **width** | `?width=500` | 495 | The width of the card. Accepts a valid number. |
83-
| **gap** | `?gap=15` | 10 | The gap between the badges. Accepts a number between 0 and 30. |
84-
| **lineHeight** | `?lineHeight=10` | 7 | The gap between the lines. Accepts a number between 0 and 30. |
85-
| **lineCount** | `?lineCount=2` | 1 | The number of lines you want to add to your card. |
86-
| **line{n}** | `?line1=html5,html5,auto` | - | The current line of the badge, where {n} is a number. _`(1 <= n <= lineCount)`_ |
87-
| **bg** | `?bg=%2383324c` | - | The color of the background. |
88-
| **border** | `?border=%232da7c7` | - | The color of the border. |
89-
| **badge** | `?badge=%2383324c` | - | The color of the badges. |
90-
| **titleColor** | `?titleColor=%232da7c7` | - | The color of the title. |
69+
| Parameter | Example | Default value | Description |
70+
| ---------------- | ------------------------ | ------------- | ----------------------------------------------------------------------------------------- |
71+
| **title** | `title=My%20Title` | My Tech Stack | The title of the card. `%20` can be used as a space. |
72+
| **theme** | `theme=github_dark` | github | The theme of the card. You can browse between the themes [here](docs/THEMES.md). |
73+
| **align** | `align=center` | left | The alignment of the badges. (`left`, `center`, `right`) |
74+
| **titleAlign** | `align=center` | left | The alignment of the title. (`left`, `center`, `right`) |
75+
| **showBorder** | `showBorder=false` | true | Display the border around the card or not. (`true`, `false`) |
76+
| **hideTitle** | `hideTitle=true` | false | Display the title of the card or not. (`true`, `false`) |
77+
| **hideBg** | `hideBg=true` | false | If true, sets the background to transparent. (`true`, `false`) |
78+
| **borderRadius** | `borderRadius=12.5` | 4.5 | Number between 0 and 50. |
79+
| **fontFamily** | `fontFamily=consolas` | Segoe UI | The font family of the title. If the specified family doesn't exist, the default is used. |
80+
| **fontSize** | `fontSize=20` | 18 | The size of the title. Accepts a number between 15 and 30. |
81+
| **fontWeight** | `fontWeight=normal` | semibold | The thickness of the title. (`thin`, `normal`, `semibold`, `bold`) |
82+
| **width** | `width=500` | 495 | The width of the card. Accepts a valid number. |
83+
| **gap** | `gap=15` | 10 | The gap between the badges. Accepts a number between 0 and 30. |
84+
| **lineHeight** | `lineHeight=10` | 7 | The gap between the lines. Accepts a number between 0 and 30. |
85+
| **lineCount** | `lineCount=2` | 1 | The number of lines you want to add to your card. |
86+
| **line{n}** | `line1=html5,html5,auto` | - | The current line of the badge, where {n} is a number. _`(1 <= n <= lineCount)`_ |
87+
| **bg** | `bg=%2383324c` | - | The color of the background. |
88+
| **border** | `border=%232da7c7` | - | The color of the border. |
89+
| **badge** | `badge=%2383324c` | - | The color of the badges. |
90+
| **titleColor** | `titleColor=%232da7c7` | - | The color of the title. |
9191

9292
<hr>
9393

‎client/src/components/lines/BadgeItem.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ type Props = {
66

77
const BadgeItem = ({ badge }: Props) => {
88
return (
9-
<div className="flex cursor-pointer items-center gap-3 border border-solid border-gh-bg-secondary bg-gh-bg-secondary px-3 py-[.45rem] transition-all duration-150">
9+
<div className="flex cursor-pointer select-none items-center gap-3 border border-solid border-gh-bg-secondary bg-gh-bg-secondary px-3 py-[.45rem] transition-all duration-150">
1010
<img
1111
onError={(e) => (e.currentTarget.style.display = "none")}
12-
className="h-4 w-4"
12+
className="h-4 w-4 select-none"
1313
alt={`${badge.icon}`}
1414
// the image is in dataUrl format if starts with data:image, else display it from simpleicons
1515
src={
@@ -21,9 +21,11 @@ const BadgeItem = ({ badge }: Props) => {
2121
}
2222
/>
2323

24-
<span className="py-[.145rem] font-dejavu text-[.70rem] font-bold uppercase leading-none tracking-wider text-white">
25-
{badge.label}
26-
</span>
24+
{badge.label.trim().length > 0 && (
25+
<span className="py-[.145rem] font-dejavu text-[.70rem] font-bold uppercase leading-none tracking-wider text-white">
26+
{badge.label}
27+
</span>
28+
)}
2729
</div>
2830
);
2931
};

‎client/src/components/lines/NewBadge.tsx

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Badge } from "../../types";
44
import Button from "../ui/Button";
55
import { GoPlus } from "react-icons/go";
66
import ColorInput from "../ui/ColorInput";
7-
import { useState } from "react";
7+
import { useState, useCallback } from "react";
88
import { HEX_COLOR_REGEX, ICON_REGEX } from "../../const";
99
import SvgInput from "./SvgInput";
1010
import PopupContainer from "../ui/PopupContainer";
@@ -22,6 +22,28 @@ const NewBadge = ({ addBadge }: Props) => {
2222
const [isPopupActive, setIsPopupActive] = useState(false);
2323
const [file, setFile] = useState<null | File>(null);
2424

25+
const uploadFile = useCallback((file: File) => {
26+
setFile(file);
27+
28+
// read the file as data:image...
29+
const fr = new FileReader();
30+
fr.readAsDataURL(file);
31+
fr.onload = (e) => setIcon(e.target?.result?.toString() ?? icon);
32+
}, []);
33+
34+
const handleBtnClick = useCallback(() => {
35+
addBadge({
36+
color,
37+
icon,
38+
label,
39+
});
40+
41+
setFile(null);
42+
setColor("");
43+
setIcon("");
44+
setLabel("");
45+
}, [color, icon, label]);
46+
2547
return (
2648
<fieldset className="flex items-start gap-4">
2749
<PopupContainer
@@ -31,12 +53,10 @@ const NewBadge = ({ addBadge }: Props) => {
3153
<Upload
3254
file={file}
3355
closePopup={() => setIsPopupActive(false)}
34-
uploadFile={(file) => {
35-
setFile(file);
36-
37-
const fr = new FileReader();
38-
fr.readAsDataURL(file);
39-
fr.onload = (e) => setIcon(e.target?.result?.toString() ?? icon);
56+
uploadFile={uploadFile}
57+
clearIcon={() => {
58+
setIcon("");
59+
setFile(null);
4060
}}
4161
/>
4262
</PopupContainer>
@@ -72,27 +92,16 @@ const NewBadge = ({ addBadge }: Props) => {
7292

7393
<Button
7494
disabled={
75-
!HEX_COLOR_REGEX.test(color) ||
76-
(!ICON_REGEX.test(icon) && !file) ||
77-
!ICON_REGEX.test(label)
95+
!(file === null
96+
? HEX_COLOR_REGEX.test(color) && ICON_REGEX.test(icon)
97+
: true)
7898
}
7999
aria-label="Add Badge"
80100
icon={<GoPlus />}
81101
variant="success"
82102
size="small"
83103
className="h-[30.67px]"
84-
onClick={() => {
85-
addBadge({
86-
color,
87-
icon,
88-
label,
89-
});
90-
91-
setFile(null);
92-
setColor("");
93-
setIcon("");
94-
setLabel("");
95-
}}
104+
onClick={handleBtnClick}
96105
/>
97106
</fieldset>
98107
);

‎client/src/components/lines/Upload.tsx

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ type Props = {
77
closePopup: () => void;
88
file: File | null;
99
uploadFile: (file: File) => void;
10+
clearIcon: () => void;
1011
};
1112

12-
const Upload = ({ closePopup, uploadFile, file }: Props) => {
13+
const Upload = ({ closePopup, uploadFile, file, clearIcon }: Props) => {
1314
const [isDraggedOver, setIsDraggedOver] = useState(false);
1415
const [isError, setIsError] = useState(false);
1516

@@ -74,10 +75,22 @@ const Upload = ({ closePopup, uploadFile, file }: Props) => {
7475
<div className="border-border flex items-stretch gap-2 border-t border-gh-border px-3 py-2">
7576
<Button
7677
size="small"
77-
variant="danger"
78+
variant="secondary"
7879
onClick={() => closePopup()}
7980
label="Cancel"
8081
/>
82+
83+
{file !== null && (
84+
<Button
85+
size="small"
86+
variant="danger"
87+
onClick={() => {
88+
clearIcon();
89+
closePopup();
90+
}}
91+
label="Remove icon"
92+
/>
93+
)}
8194
</div>
8295
</>
8396
);

‎client/src/components/ui/ColorInput.tsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface ColorInputProps
1313
}
1414

1515
const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
16-
({ className, required, value = "", setColor, ...props }, ref) => {
16+
({ className, required, value = "", disabled, setColor, ...props }, ref) => {
1717
value = value.toString();
1818

1919
const [isPickerActive, setIsPickerActive] = useState(false);
@@ -34,9 +34,10 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
3434
required={required}
3535
pattern={`^${required ? "" : "[]{0}|"}#[a-fA-F0-9]{6}$`}
3636
className={cn(
37-
"z-10 rounded-br-none rounded-tr-none [border-right:none!important] [transition:none!important]",
37+
"z-10 rounded-br-none rounded-tr-none [border-right:none!important]",
3838
isPickerActive ? "bg-gh-bg outline-gh-blue" : ""
3939
)}
40+
disabled={disabled}
4041
{...props}
4142
/>
4243

@@ -45,18 +46,23 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
4546
variant="secondary"
4647
onFocus={() => setIsPickerActive(true)}
4748
style={{
48-
color: HEX_COLOR_REGEX.test(value) ? value : "#58a6ff",
49+
color: disabled
50+
? "#7d8590"
51+
: HEX_COLOR_REGEX.test(value)
52+
? value
53+
: "#58a6ff",
4954
}}
5055
className={cn(
51-
"rounded-bl-none rounded-tl-none bg-gh-bg px-3 text-base [transition:none!important]",
56+
"rounded-bl-none rounded-tl-none bg-gh-bg px-3 text-base",
5257
isPickerActive ? "outline-gh-blue hover:border-gh-border" : ""
5358
)}
59+
disabled={disabled}
5460
icon={<IoMdColorFilter />}
5561
/>
5662

5763
<div
5864
className={cn(
59-
"color-input absolute right-[-53%] top-[-590%] z-30 flex flex-col gap-1 overflow-hidden rounded-md border border-gh-border bg-gh-bg shadow-md",
65+
"color-input absolute right-0 top-[-590%] z-30 flex translate-x-3/4 flex-col gap-1 overflow-hidden rounded-md border border-gh-border bg-gh-bg shadow-md",
6066
isPickerActive
6167
? "pointer-events-auto opacity-100"
6268
: "pointer-events-none opacity-0"

‎client/src/components/ui/PopupContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const PopupContainer = ({ isOpen, closePopup, children }: Props) => {
2222

2323
<div
2424
className={cn(
25-
"absolute left-1/2 top-1/2 z-50 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col gap-2 overflow-hidden rounded-md border border-gh-border bg-gh-bg shadow-sm transition-all duration-150",
25+
"fixed left-1/2 top-1/2 z-50 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col gap-2 overflow-hidden rounded-md border border-gh-border bg-gh-bg shadow-sm transition-all duration-150",
2626
isOpen
2727
? "pointer-events-auto scale-100 select-auto opacity-100"
2828
: "pointer-events-none scale-50 select-none opacity-0"

‎client/src/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
@layer base {
66
body {
7-
@apply bg-gh-bg font-segoe;
7+
@apply min-h-screen w-full overflow-x-hidden bg-gh-bg font-segoe;
88
}
99

1010
/* custom scrollbar */

0 commit comments

Comments
 (0)