wip: playground

Bernankez · Mar 12, 2024 · 76d8ae3 · 76d8ae3
1 parent 2939c5b
commit 76d8ae3
Show file tree

Hide file tree

Showing 18 changed files with 861 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,33 @@
-# vite-plugin-font-carrier
+# vite-plugin-font-carrier
+
+Compress fonts using [font-carrier](https://github.com/purplebamboo/font-carrier).
+
+## Install
+
+```sh
+npm install -D vite-plugin-font-carrier
+```
+
+## Configuration
+
+vite.config.ts
+
+```ts
+import { defineConfig } from "vite";
+import FontCarrier from "vite-plugin-font-carrier";
+
+export default defineConfig({
+  plugins: [FontCarrier({
+    /** fonts you want to compress */
+    fonts: [
+      {
+        path: "./path/to/your/font/my-font.woff",
+        /** characters to be retained */
+        input: "Cole52619"
+      }
+    ],
+    /** output type */
+    type: "woff2"
+  })]
+});
+```
diff --git a/fixtures/templates/main.ts b/fixtures/templates/main.ts
diff --git a/fixtures/templates/style.css b/fixtures/templates/style.css
diff --git a/fixtures/vanilla/src/counter.ts b/fixtures/vanilla/src/counter.ts
diff --git a/fixtures/vanilla/src/main.ts b/fixtures/vanilla/src/main.ts
@@ -1,38 +1,10 @@
 import "./style.css";
-import typescriptLogo from "./typescript.svg";
-import viteLogo from "/vite.svg";
-import { setupCounter } from "./counter.ts";
-import Biantaoti from "./biantaoti.woff";
-
-const fontFace = `@font-face {
-  font-family: BTT2;
-  src: url("${Biantaoti}");
-}`;
-
-const fontFace2 = `@font-face {
-  font-family: BTT2;
-  src: url("./biantaoti.woff");
-}`;
 
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
   <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="${viteLogo}" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://www.typescriptlang.org/" target="_blank">
-      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
-    </a>
-    <h1>Vite + TypeScript</h1>
-    <div style="font-family: BTT; font-size: 2rem;">Font test. 中文测试. 1234567</div>
-    <div style="font-family: BTT2; font-size: 2rem; ${fontFace}">Font test. 中文测试. 1234567</div>
-    <div style="font-family: BTT2; font-size: 2rem; ${fontFace2}">Font test. 中文测试. 1234567</div>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
-    <p class="read-the-docs">
-      Click on the Vite and TypeScript logos to learn more
-    </p>
+    <h1>vite-plugin-font-carrier</h1>
+    <p>Lorem Ipsum，也称乱数假文或者哑元文本， 是印刷及排版领域所常用的虚拟文字。由于曾经一台匿名的打印机刻意打乱了一盒印刷字体从而造出一本字体样品书，Lorem Ipsum从西元15世纪起就被作为此领域的标准文本使用。</p>
+    <p>0123456789</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt vulputate massa, id feugiat turpis sagittis eu. Curabitur convallis lectus quis metus tempus, at pharetra nibh maximus. Aliquam eget leo efficitur purus rutrum sollicitudin non vitae velit. Duis dui nisl, gravida ut volutpat id, auctor feugiat urna. Mauris vulputate consectetur nulla ac pretium.</p>
   </div>
 `;
-
-setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);
diff --git a/fixtures/vanilla/vite.config.ts b/fixtures/vanilla/vite.config.ts
@@ -1,21 +1,12 @@
 import { defineConfig } from "vite";
 import Inspect from "vite-plugin-inspect";
-import { FontCarrier } from "../../src";
+import FontCarrier from "../../src";
 
 export default defineConfig(() => {
   return {
     plugins: [
       FontCarrier({
-        fonts: [
-          {
-            path: "./src/assets/fonts/biantaoti.woff",
-            input: "中文",
-          },
-          {
-            path: "./src/assets/fonts/biantaoti2.woff",
-            input: "中文",
-          },
-        ],
+        fonts: [],
       }),
       Inspect(),
     ],

diff --git a/playground/.gitignore b/playground/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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" />
+    <title>vite-plugin-font-carrier</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/package.json b/playground/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "playground",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.1.6",
+    "vite-plugin-inspect": "^0.8.3"
+  }
+}