feat: generate and host accents (#89)

.github/workflows/gh-pages.yml

@@ -20,7 +20,7 @@ jobs:
           cache: "yarn"
 
       - run: yarn install
-      - run: yarn build
+      - run: yarn release
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3

README.md

@@ -59,6 +59,12 @@
 @import url("https://catppuccin.github.io/discord/dist/catppuccin-macchiato.theme.css");
 /* mocha */
 @import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha.theme.css");
+
+/* You can also append Catppuccin colors to customize the accent, e.g. */
+/* mocha (pink accent)*/
+@import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha-pink.theme.css");
+/* frappe (maroon accent) */
+@import url("https://catppuccin.github.io/discord/dist/catppuccin-frappe-maroon.theme.css");
 ```
 
 ### [DiscoCSS](https://github.com/mlvzk/discocss)
@@ -74,7 +80,13 @@ curl -L https://catppuccin.github.io/discord/dist/catppuccin-frappe.theme.css >
 # macchiato
 curl -L https://catppuccin.github.io/discord/dist/catppuccin-macchiato.theme.css > ~/.config/discocss/custom.css
 # mocha
-curl -L https://catppuccin.github.io/discord/dist/catppuccin-mocha.theme.css> ~/.config/discocss/custom.css
+you can also append Catppuccin colors to customize the accent
+
+# You can also append Catppuccin colors to customize the accent, e.g.
+# mocha (pink accent)
+curl -L https://catppuccin.github.io/discord/dist/catppuccin-mocha-pink.theme.css > ~/.config/discocss/custom.css
+# frappe (maroon accent)
+curl -L https://catppuccin.github.io/discord/dist/catppuccin-frappe-maroon.theme.css > ~/.config/discocss/custom.css
 ```
 
 ### [Stylus](https://github.com/openstyles/stylus)

build.js

@@ -0,0 +1,59 @@
+const fs = require("fs").promises;
+const path = require("path");
+
+const sourceFiles = [
+  "src/catppuccin-frappe.theme.scss",
+  "src/catppuccin-latte.theme.scss",
+  "src/catppuccin-macchiato.theme.scss",
+  "src/catppuccin-mocha.theme.scss",
+];
+
+const accents = [
+  "rosewater",
+  "flamingo",
+  "pink",
+  "mauve",
+  "red",
+  "maroon",
+  "peach",
+  "yellow",
+  "green",
+  "teal",
+  "sky",
+  "sapphire",
+  "blue",
+  "lavender",
+];
+
+(async () => {
+  await Promise.all(sourceFiles.map(generateAccents));
+  console.log("Generated all accents for all flavours");
+})();
+
+// read sourceFile and generate all accents for it
+async function generateAccents(sourceFilePath) {
+  const _sourceFilePath = path.join(__dirname, sourceFilePath);
+  const sourceFileData = await fs.readFile(_sourceFilePath, {
+    encoding: "utf8",
+  });
+  return Promise.all(
+    accents.map((accent) =>
+      generateAccent(sourceFileData, sourceFilePath, accent)
+    )
+  );
+}
+
+// replace brand and write to separate file
+async function generateAccent(sourceFileData, sourceFilePath, accent) {
+  const modifiedFileContent = sourceFileData.replace(
+    /\$brand: .*;/gm,
+    `$brand: \$${accent};`
+  );
+  const outputFileName = sourceFilePath
+    .split(".")
+    .map((s, i) => (i === 0 ? s.concat(`-${accent}`) : s))
+    .join(".");
+  const outputFilePath = path.join(__dirname, outputFileName);
+  await fs.writeFile(outputFilePath, modifiedFileContent);
+  console.log(`Generated: ${outputFileName}`);
+}

package.json

@@ -17,6 +17,7 @@
   "private": true,
   "scripts": {
     "build": "mkdir -p dist/dist; sass --no-charset --no-source-map src:dist/dist",
+    "release": "node build.js; mkdir -p dist/dist; sass --no-charset --no-source-map src:dist/dist; rm src/catppuccin-*-*.theme.scss",
     "watch": "mkdir -p dist/dist; sass --no-charset --no-source-map src:dist/dist -w",
     "prepare": "husky install"
   },