feat: use @pesca-dev/atomicity and custom font

H1ghBre4k3r · Dec 23, 2024 · e9c6c24 · e9c6c24
1 parent d638596
commit e9c6c24
Show file tree

Hide file tree

Showing 27 changed files with 203 additions and 53 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -9,4 +9,17 @@ export default [
   { languageOptions: { globals: globals.browser } },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
+  {
+    rules: {
+      // note you must disable the base rule
+      // as it can report incorrect errors
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn", // or "error"
+        {
+          varsIgnorePattern: "^a$",
+        },
+      ],
+    },
+  },
 ];
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/styles/fonts.css" />
     <title>Vite + TS</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,5 +16,8 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.1",
     "vite": "^6.0.3"
+  },
+  "dependencies": {
+    "@pesca-dev/atomicity": "^0.1.1"
   }
 }
diff --git a/public/fonts/FliegeMono-Black.woff b/public/fonts/FliegeMono-Black.woff
diff --git a/public/fonts/FliegeMono-Black.woff2 b/public/fonts/FliegeMono-Black.woff2
diff --git a/public/fonts/FliegeMono-Bold.woff b/public/fonts/FliegeMono-Bold.woff
diff --git a/public/fonts/FliegeMono-Bold.woff2 b/public/fonts/FliegeMono-Bold.woff2
diff --git a/public/fonts/FliegeMono-ExtraBold.woff b/public/fonts/FliegeMono-ExtraBold.woff
diff --git a/public/fonts/FliegeMono-ExtraBold.woff2 b/public/fonts/FliegeMono-ExtraBold.woff2
diff --git a/public/fonts/FliegeMono-ExtraLight.woff b/public/fonts/FliegeMono-ExtraLight.woff
diff --git a/public/fonts/FliegeMono-ExtraLight.woff2 b/public/fonts/FliegeMono-ExtraLight.woff2
diff --git a/public/fonts/FliegeMono-Light.woff b/public/fonts/FliegeMono-Light.woff
diff --git a/public/fonts/FliegeMono-Light.woff2 b/public/fonts/FliegeMono-Light.woff2
diff --git a/public/fonts/FliegeMono-Medium.woff b/public/fonts/FliegeMono-Medium.woff
diff --git a/public/fonts/FliegeMono-Medium.woff2 b/public/fonts/FliegeMono-Medium.woff2
diff --git a/public/fonts/FliegeMono-Regular.woff b/public/fonts/FliegeMono-Regular.woff
diff --git a/public/fonts/FliegeMono-Regular.woff2 b/public/fonts/FliegeMono-Regular.woff2
diff --git a/public/fonts/FliegeMono-SemiBold.woff b/public/fonts/FliegeMono-SemiBold.woff
diff --git a/public/fonts/FliegeMono-SemiBold.woff2 b/public/fonts/FliegeMono-SemiBold.woff2
diff --git a/public/fonts/FliegeMono-Thin.woff b/public/fonts/FliegeMono-Thin.woff
diff --git a/public/fonts/FliegeMono-Thin.woff2 b/public/fonts/FliegeMono-Thin.woff2
diff --git a/public/styles/fonts.css b/public/styles/fonts.css
@@ -0,0 +1,89 @@
+@font-face {
+  font-family: "Fliege Mono";
+  src:
+    url("/fonts/FliegeMono-Black.woff2") format("woff2"),
+    url("/fonts/FliegeMono-Black.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fliege Mono";
+  src:
+    url("/fonts/FliegeMono-Light.woff2") format("woff2"),
+    url("/fonts/FliegeMono-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fliege Mono";
+  src:
+    url("/fonts/FliegeMono-ExtraLight.woff2") format("woff2"),
+    url("/fonts/FliegeMono-ExtraLight.woff") format("woff");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fliege Mono";
+  src:
+    url("/fonts/FliegeMono-Bold.woff2") format("woff2"),
+    url("/fonts/FliegeMono-Bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fliege Mono 100";
+  src:
+    url("/fonts/FliegeMono-Thin.woff2") format("woff2"),
+    url("/fonts/FliegeMono-Thin.woff") format("woff");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fliege Mono";
+  src:
+    url("/fonts/FliegeMono-Medium.woff2") format("woff2"),
+    url("/fonts/FliegeMono-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fliege Mono";
+  src:
+    url("/fonts/FliegeMono-ExtraBold.woff2") format("woff2"),
+    url("/fonts/FliegeMono-ExtraBold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fliege Mono";
+  src:
+    url("/fonts/FliegeMono-SemiBold.woff2") format("woff2"),
+    url("/fonts/FliegeMono-SemiBold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fliege Mono";
+  src:
+    url("/fonts/FliegeMono-Regular.woff2") format("woff2"),
+    url("/fonts/FliegeMono-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/src/main.ts b/src/main.ts
@@ -2,6 +2,7 @@ import "./style.css";
 import typescriptLogo from "./typescript.svg";
 import viteLogo from "/vite.svg";
 import { setupCounter } from "./counter.ts";
+import "./test";
 
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
   <div>
@@ -18,6 +19,7 @@ document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
     <p class="read-the-docs">
       Click on the Vite and TypeScript logos to learn more
     </p>
+      <my-test name="H1ghBre4k3r"></my-test>
   </div>
 `;
 

diff --git a/src/style.css b/src/style.css
@@ -1,5 +1,6 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
+  font-family: Fliege Mono;
   line-height: 1.5;
   font-weight: 400;
 

diff --git a/src/test.tsx b/src/test.tsx
@@ -0,0 +1,29 @@
+import {
+  AbstractElement,
+  ObservedAttributes,
+  Transformers,
+  a,
+} from "@pesca-dev/atomicity";
+
+type Attributes = {
+  name: string;
+};
+const transformers: Transformers<Attributes> = {
+  name: [(arg) => arg, ""],
+};
+
+export class Test extends AbstractElement<Attributes> {
+  constructor() {
+    super(transformers);
+  }
+
+  public static get observedAttributes(): ObservedAttributes<Attributes> {
+    return ["name"];
+  }
+
+  render() {
+    return <div>Hello, {this.attrs.name}</div>;
+  }
+}
+
+customElements.define("my-test", Test);