merge from upstream

Matt-FTW · Sep 17, 2024 · 141ecd9 · 141ecd9
2 parents f025866 + b1584d7
commit 141ecd9
Show file tree

Hide file tree

Showing 17 changed files with 218 additions and 90 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,4 +2,4 @@
 
 **Resolves: #issue-number-here**
 
- [ ] Updated **documentation** for changed code
+- [ ] Updated **documentation** for changed code
diff --git a/README.md b/README.md
@@ -20,11 +20,14 @@
 https://github.com/pivoshenko/catppuccin-startpage/assets/40499728/d96c8bd6-168e-408f-b4f0-0e339569c696
 
 > [!NOTE]
->  A live demo can be found [here](https://pivoshenko.github.io/catppuccin-startpage)
+> A live demo can be found [here](https://pivoshenko.github.io/catppuccin-startpage)
+
+> [!CAUTION]
+> Currently, I am doing some refactoring, so README will look way better and closer to the standard Catppuccin project
 
 ## Overview
 
-Aesthetic and clean startpage in [**Catppuccin Mocha**](https://catppuccin.com/palette) style, hosted on GitHub Pages. This start page is based on the [`dawn`](https://github.com/b-coimbra/dawn) and [`tartarus-startpage`](https://github.com/AllJavi/tartarus-startpage), which has even more functionality.
+Aesthetic and clean startpage in [**Catppuccin**](https://catppuccin.com/palette) style, hosted on GitHub Pages. This start page is based on the [`dawn`](https://github.com/b-coimbra/dawn) and [`tartarus-startpage`](https://github.com/AllJavi/tartarus-startpage), which has even more functionality.
 I've tweaked the page's style to match [Catppuccin](https://github.com/catppuccin/catppuccin) palette and my [`dotfiles`](https://github.com/pivoshenko/dotfiles).
 
 ### Main principles
@@ -35,13 +38,21 @@ I've tweaked the page's style to match [Catppuccin](https://github.com/catppucci
 - One style
 - Reduced visual noise
 
+### Supported Palettes
+
+- Latte
+- Frappé
+- Macchiato
+- Mocha
+
 ## Usage
 
 1. Fork this repository and clone it
 
 2. Remove `.github` directory as it contains only PR templates, issue labels etc that are linked to this repository
 
 3. Update [`userconfig.js`](userconfig.js):
+   - Set the desired palette: `latte / frappe / macchiato / mocha`
    - Set your location for the weather widget
    - Update the number of pages and their banners
    - Update bookmarks and quick links for the one you are using the most :3
@@ -60,11 +71,11 @@ I've tweaked the page's style to match [Catppuccin](https://github.com/catppucci
 #### As New Tab
 
 You can use different Add-ons/Extensions for it
+
 - If you use Firefox: [Custom New Tab Page](https://addons.mozilla.org/en-US/firefox/addon/custom-new-tab-page/?src=search) and make sure you enable "Force links to open in the top frame (experimental)" in the extension's preferences page
 
 - If you use Chromium (Brave, Chrome): [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia)
 
-
 ### Available banners
 
 | cbg-2                                           | cbg-3                                           | cbg-4                                           | cbg-5                                           |

diff --git a/index.html b/index.html
@@ -11,9 +11,11 @@
     <link rel="icon" type="image/png" href="src/img/logo.png" />
     <title>~/</title>
   </head>
+
   <body>
     <tabs-list></tabs-list>
 
+    <script type="text/javascript" src="src/common/palette.js"></script>
     <script type="text/javascript" src="src/common/utils.js"></script>
     <script type="text/javascript" src="src/common/storage.js"></script>
     <script type="text/javascript" src="src/common/actions.js"></script>

diff --git a/src/common/component.js b/src/common/component.js
@@ -22,21 +22,25 @@ class Component extends HTMLElement {
   constructor() {
     super();
 
-    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow = this.attachShadow({
+      mode: "open",
+    });
   }
 
   style() {
     return null;
   }
+
   template() {
     return null;
   }
+
   imports() {
     return [];
   }
 
   /**
-   * Reference an external css file
+   * Reference an external CSS file.
    * OBS: External style loading not yet fully supported with web components, causes flickering.
    * @param {string} path
    * @returns {void}

diff --git a/src/common/config.js b/src/common/config.js
@@ -7,7 +7,6 @@ class Config {
     },
     clock: {
       format: "h:i p",
-      iconColor: "#f38ba8",
     },
     disabled: [],
     openLastVisitedTab: false,
@@ -16,8 +15,9 @@ class Config {
 
   config;
 
-  constructor(config) {
+  constructor(config, palette) {
     this.config = config;
+    this.palette = palette;
     this.storage = new Storage("config");
 
     this.autoConfig();
@@ -72,7 +72,10 @@ class Config {
    * @returns {Object}
    */
   toJSON() {
-    return { ...this, defaults: undefined };
+    return {
+      ...this,
+      defaults: undefined,
+    };
   }
 
   /**
@@ -90,15 +93,4 @@ class Config {
   save() {
     this.storage.save(stringify(this));
   }
-
-  exportSettings() {
-    const anchor = document.createElement("a");
-    const filename = "dawn.config.json";
-    const mimeType = "data:text/plain;charset=utf-8,";
-
-    anchor.href = mimeType + encodeURIComponent(stringify(this, null, 2));
-    anchor.download = filename;
-
-    anchor.click();
-  }
 }
diff --git a/src/common/module.js b/src/common/module.js
@@ -5,7 +5,6 @@ const components = {
   "tabs-list": Tabs,
 };
 
-Object.keys(components).forEach(componentName => {
-  if (!CONFIG.disabled.includes(componentName))
-    customElements.define(componentName, components[componentName]);
+Object.keys(components).forEach((componentName) => {
+  if (!CONFIG.disabled.includes(componentName)) customElements.define(componentName, components[componentName]);
 });
diff --git a/src/common/palette.js b/src/common/palette.js
@@ -0,0 +1,115 @@
+const latte = {
+  rosewater: "#dc8a78",
+  flamingo: "#dd7878",
+  pink: "#ea76cb",
+  mauve: "#8839ef",
+  red: "#d20f39",
+  maroon: "#e64553",
+  peach: "#fe640b",
+  yellow: "#df8e1d",
+  green: "#40a02b",
+  teal: "#179299",
+  sky: "#04a5e5",
+  sapphire: "#209fb5",
+  blue: "#1e66f5",
+  lavender: "#7287fd",
+  text: "#4c4f69",
+  subtext1: "#5c5f77",
+  subtext0: "#6c6f85",
+  overlay2: "#7c7f93",
+  overlay1: "#8c8fa1",
+  overlay0: "#9ca0b0",
+  surface2: "#acb0be",
+  surface1: "#bcc0cc",
+  surface0: "#ccd0da",
+  base: "#eff1f5",
+  mantle: "#e6e9ef",
+  crust: "#dce0e8",
+};
+
+const frappe = {
+  rosewater: "#f2d5cf",
+  flamingo: "#eebebe",
+  pink: "#f4b8e4",
+  mauve: "#ca9ee6",
+  red: "#e78284",
+  maroon: "#ea999c",
+  peach: "#ef9f76",
+  yellow: "#e5c890",
+  green: "#a6d189",
+  teal: "#81c8be",
+  sky: "#99d1db",
+  sapphire: "#85c1dc",
+  blue: "#8caaee",
+  lavender: "#babbf1",
+  text: "#c6d0f5",
+  subtext1: "#b5bfe2",
+  subtext0: "#a5adce",
+  overlay2: "#949cbb",
+  overlay1: "#838ba7",
+  overlay0: "#737994",
+  surface2: "#626880",
+  surface1: "#51576d",
+  surface0: "#414559",
+  base: "#303446",
+  mantle: "#292c3c",
+  crust: "#232634",
+};
+
+const macchiato = {
+  rosewater: "#f4dbd6",
+  flamingo: "#f0c6c6",
+  pink: "#f5bde6",
+  mauve: "#c6a0f6",
+  red: "#ed8796",
+  maroon: "#ee99a0",
+  peach: "#f5a97f",
+  yellow: "#eed49f",
+  green: "#a6da95",
+  teal: "#8bd5ca",
+  sky: "#91d7e3",
+  sapphire: "#7dc4e4",
+  blue: "#8aadf4",
+  lavender: "#b7bdf8",
+  text: "#cad3f5",
+  subtext1: "#b8c0e0",
+  subtext0: "#a5adcb",
+  overlay2: "#939ab7",
+  overlay1: "#8087a2",
+  overlay0: "#6e738d",
+  surface2: "#5b6078",
+  surface1: "#494d64",
+  surface0: "#363a4f",
+  base: "#24273a",
+  mantle: "#1e2030",
+  crust: "#181926",
+};
+
+const mocha = {
+  rosewater: "#f5e0dc",
+  flamingo: "#f2cdcd",
+  pink: "#f5c2e7",
+  mauve: "#cba6f7",
+  red: "#f38ba8",
+  maroon: "#eba0ac",
+  peach: "#fab387",
+  yellow: "#f9e2af",
+  green: "#a6e3a1",
+  teal: "#94e2d5",
+  sky: "#89dceb",
+  sapphire: "#74c7ec",
+  blue: "#89b4fa",
+  lavender: "#b4befe",
+  text: "#cdd6f4",
+  subtext1: "#bac2de",
+  subtext0: "#a6adc8",
+  overlay2: "#9399b2",
+  overlay1: "#7f849c",
+  overlay0: "#6c7086",
+  surface2: "#585b70",
+  surface1: "#45475a",
+  surface0: "#313244",
+  base: "#1e1e2e",
+  mantle: "#181825",
+  crust: "#11111b",
+};
diff --git a/src/common/strftime.js b/src/common/strftime.js
@@ -25,23 +25,29 @@ Date.prototype.strftime = function (format = "c") {
   };
 
   Number.prototype.ord = function () {
-    return { 1: "st", 2: "nd", 3: "rd" }[(num = this.toString()).length > 1 ? parseInt(num.split("")[1]) : num] || "th";
+    return (
+      {
+        1: "st",
+        2: "nd",
+        3: "rd",
+      }[(num = this.toString()).length > 1 ? parseInt(num.split("")[1]) : num] || "th"
+    );
   };
 
   const month = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ],
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ],
     days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
     result = [],
     formats = {

diff --git a/src/common/utils.js b/src/common/utils.js
@@ -1,7 +1,7 @@
 const { parse, stringify } = JSON;
 
 /**
- * Handler for document.querySelector(All)
+ * Handler for document.querySelector(All).
  * @returns {HTMLElement | Array<HTMLElement>}
  */
 const $ = (e, options) => {

diff --git a/src/components/clock/clock.component.js b/src/components/clock/clock.component.js
@@ -18,12 +18,12 @@ class Clock extends Component {
             white-space: nowrap;
             font: 300 9pt JetBrainsMono Nerd Font;
             src: url(../fonts/jetbrains-mono.ttf);
-            color: #cad3f5;
+            color: ${CONFIG.palette.text};
             letter-spacing: .5px;
         }
 
         .clock-icon {
-            color: ##ed8796;
+            color: ${CONFIG.palette.red};
             font-size: 10pt;
             margin-right: 10px;
         }
@@ -38,12 +38,11 @@ class Clock extends Component {
   }
 
   setIconColor() {
-    this.refs.icon.style.color = CONFIG.clock.iconColor;
+    this.refs.icon.style.color = CONFIG.palette.maroon;
   }
 
   setTime() {
     const date = new Date();
-
     this.refs.clock = date.strftime(CONFIG.clock.format);
   }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@

		Resolves: #issue-number-here

		[ ] Updated documentation for changed code
		- [ ] Updated documentation for changed code