diff --git a/src/cards/wakatime-card.ts b/src/cards/wakatime-card.ts
index e8713216..440c2b8e 100644
--- a/src/cards/wakatime-card.ts
+++ b/src/cards/wakatime-card.ts
@@ -11,16 +11,7 @@ import {
import { getStyles } from "../getStyles";
import { wakatimeCardLocales } from "../translations";
-/** Import language colors.
- *
- * @description Here we use the workaround found in
- * https://stackoverflow.com/questions/66726365/how-should-i-import-json-in-node
- * since vercel is using v16.14.0 which does not yet support json imports without the
- * --experimental-json-modules flag.
- */
-import { createRequire } from "module";
-const require = createRequire(import.meta.url);
-const languageColors = require("../common/languageColorson"); // now works
+import languageColors from "../common/languageColors.json";
/**
* @param {{color: string, text: string}} param0
diff --git a/src/common/Card.ts b/src/common/Card.ts
index b78a5a4c..43a40d89 100644
--- a/src/common/Card.ts
+++ b/src/common/Card.ts
@@ -1,7 +1,78 @@
import { getAnimations } from "../getStyles";
import { encodeHTML, flexLayout } from "./utils";
-class Card {
+/** Card colors. */
+export interface CardColors {
+ /** Title color. */
+ titleColor: string;
+ /** Text color. */
+ textColor: string;
+ /** Icon color. */
+ iconColor: string;
+ /** Background color. */
+ bgColor: string;
+ /** Border color. */
+ borderColor: string;
+}
+
+/** Accessibility label. */
+interface AccessibilityLabel {
+ /** The label to display. */
+ title: string;
+ /** The value to display. */
+ desc: string;
+}
+
+/** Card properties. */
+interface CardProps {
+ /** Card width. */
+ width: number;
+ /** Card height. */
+ height: number;
+ /** Card border radius. */
+ border_radius: number;
+ /** Card colors. */
+ colors: CardColors | {};
+ /** Card title. */
+ customTitle?: string;
+ /** Card default title. */
+ defaultTitle?: string;
+ /** Card title prefix icon. */
+ titlePrefixIcon?: string;
+}
+
+/**
+ * Card class.
+ */
+export class Card {
+ /** Card width. */
+ width: number;
+ /** Card height. */
+ height: number;
+ /** Whether the card border is hidden. */
+ hideBorder: boolean;
+ /** Whether the card title is hidden. */
+ hideTitle: boolean;
+ /** Border radius. */
+ border_radius: number;
+ /** Card colors. */
+ colors: CardColors | {};
+ /** Card title. */
+ title: string;
+ /** Card css. */
+ css: string;
+ /** Card x padding. */
+ paddingX: number;
+ /** Card y padding. */
+ paddingY: number;
+ /** Card title prefix icon. */
+ titlePrefixIcon?: string;
+ /** Whether the card is animated. */
+ animations: boolean;
+ /** Accessibility label title. */
+ a11yTitle: string;
+ /** Accessibility label description. */
+ a11yDesc: string;
/**
* @param {object} args
* @param {number?=} args.width
@@ -20,7 +91,7 @@ class Card {
customTitle,
defaultTitle = "",
titlePrefixIcon,
- }) {
+ }: CardProps) {
this.width = width;
this.height = height;
@@ -53,7 +124,7 @@ class Card {
/**
* @param {{title: string, desc: string}} prop
*/
- setAccessibilityLabel({ title, desc }) {
+ setAccessibilityLabel({ title, desc }: AccessibilityLabel) {
this.a11yTitle = title;
this.a11yDesc = desc;
}
@@ -61,21 +132,21 @@ class Card {
/**
* @param {string} value
*/
- setCSS(value) {
+ setCSS(value: string) {
this.css = value;
}
/**
* @param {boolean} value
*/
- setHideBorder(value) {
+ setHideBorder(value: boolean) {
this.hideBorder = value;
}
/**
* @param {boolean} value
*/
- setHideTitle(value) {
+ setHideTitle(value: boolean) {
this.hideTitle = value;
if (value) {
this.height -= 30;
@@ -85,7 +156,7 @@ class Card {
/**
* @param {string} text
*/
- setTitle(text) {
+ setTitle(text: string) {
this.title = text;
}
@@ -137,7 +208,7 @@ class Card {
gradientTransform="rotate(${this.colors.bgColor[0]})"
gradientUnits="userSpaceOnUse"
>
- ${gradients.map((grad, index) => {
+ ${gradients.map((grad: string, index: number) => {
let offset = (index * 100) / (gradients.length - 1);
return ``;
})}
@@ -150,7 +221,7 @@ class Card {
/**
* @param {string} body
*/
- render(body) {
+ render(body: string) {
return `