Merge branch 'pivoshenko:main' into main

.github/FUNDING.yaml

@@ -1,5 +1,4 @@
-github: volopivoshenko
-ko_fi: volopivoshenko
+github: pivoshenko
 custom:
-  - https://www.buymeacoffee.com/volopivoshenko
-  - https://savelife.in.ua/en/donate-en/
+  - https://www.buymeacoffee.com/pivoshenko
+  - https://savelife.in.ua/en/donate-en

.github/ISSUE_TEMPLATE/bug_report.md

@@ -37,6 +37,6 @@ Add any other context about the problem here.
 
 [gist]: https://gist.github.com
 
-[issues]: https://github.com/volopivoshenko/catppuccin-startpage/issues
+[issues]: https://github.com/pivoshenko/catppuccin-startpage/issues
 
-[latest]: https://github.com/volopivoshenko/catppuccin-startpage/releases/latest
+[latest]: https://github.com/pivoshenko/catppuccin-startpage/releases/latest

.github/ISSUE_TEMPLATE/feature_request.md

@@ -25,6 +25,6 @@ A clear and concise description of any alternative solutions or features you've
 
 Add any other context or screenshots about the feature request here.
 
-[documentation]: https://github.com/volopivoshenko/catppuccin-startpage
+[documentation]: https://github.com/pivoshenko/catppuccin-startpage
 
-[issues]: https://github.com/volopivoshenko/catppuccin-startpage/issues
+[issues]: https://github.com/pivoshenko/catppuccin-startpage/issues

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Volodymyr Pivoshenko
+Copyright (c) 2024 Volodymyr Pivoshenko
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,60 +1,80 @@
-<div align="center">
-    <a href="https://github.com/volopivoshenko/catppuccin-startpage">
-        <img alt="logo" src="https://github.com/volopivoshenko/catppuccin-startpage/blob/main/docs/static/assets/page.png?raw=True" height=400>
-    </a>
-</div>
+<h3 align="center">
+  <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+  <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin <a href="https://github.com/pivoshenko/catppuccin-startpage">Startpage</a>
+  <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
 <p align="center">
-    <a href="https://www.buymeacoffee.com/volopivoshenko" target="_blank">
-        <img alt="buymeacoffee" src="https://img.shields.io/badge/buy_me_-a_coffee-ff6964?logo=buymeacoffee">
-    </a>
-    <a href="https://stand-with-ukraine.pp.ua/">
-        <img alt="standwithukraine" src="https://img.shields.io/badge/Support-Ukraine-FFD500?style=flat&labelColor=005BBB">
-    </a>
-    <a href="https://stand-with-ukraine.pp.ua">
-        <img alt="standwithukraine" src="https://img.shields.io/badge/made_in-Ukraine-ffd700.svg?labelColor=0057b7">
-    </a>
-    <a href="https://wakatime.com/badge/user/9862508c-0a86-427a-929c-46186f2d191a/project/6f149575-e390-48f9-9b7a-fd557bda4a6a">
-        <img src="https://wakatime.com/badge/user/9862508c-0a86-427a-929c-46186f2d191a/project/6f149575-e390-48f9-9b7a-fd557bda4a6a.svg" alt="wakatime">
-    </a>
+  <a href="https://github.com/pivoshenko/catppuccin-startpage/stargazers">
+    <img src="https://img.shields.io/github/stars/pivoshenko/catppuccin-startpage?style=for-the-badge&logo=starship&color=a6e3a1&logoColor=D9E0EE&labelColor=302D41">
+  </a>
+  <a href="https://github.com/pivoshenko/catppuccin-startpage/issues">
+    <img src="https://img.shields.io/github/issues/pivoshenko/catppuccin-startpage?style=for-the-badge&logo=gitbook&color=fab387&logoColor=D9E0EE&labelColor=302D41">
+  </a>
+  <a href="https://github.com/pivoshenko/catppuccin-startpage/contributors">
+    <img src="https://img.shields.io/github/contributors/pivoshenko/catppuccin-startpage?style=for-the-badge&logo=github&color=f38ba8&logoColor=D9E0EE&labelColor=302D41">
+  </a>
 </p>
 
-- [🔮 Overview](#-overview)
-- [️⌨️ Keybindings](#️️-keybindings)
-- [⚙️ Configuration Dialog](#️-configuration-dialog)
-- [🔍 Search Dialog](#-search-dialog)
-- [🖼 Available banners](#-available-banners)
+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)
+
+## 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`] and [`tartarus-startpage`], which has even more functionality.
+I've tweaked the page's style to match [Catppuccin] palette and my [`dotfiles`].
+
+### Main principles
+
+- Minimalism in everything
+- Consistency
+- Simplicity
+- One style
+- Reduced visual noise
+
+## Usage
+
+1. Create your own repository for the startpage and clone it
+2. Clone this repository with:
 
-## 🔮 Overview
+```shell
+git clone https://github.com/pivoshenko/catppuccin-startpage.git pivoshenko-catppuccin-startpage
+```
 
-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 a bit to match [catppuccin] style.
+3. Copy the assets and configs from `pivoshenko-catppuccin-startpage` to your repository:
 
-## ️⌨️ Keybindings
+```shell
+cp pivoshenko-catppuccin-startpage/* <YOUR REPOSITORY>
+```
 
-| Hotkey                                                         | Action        |
-| -------------------------------------------------------------- | ------------- |
-| <kbd>Numrow</kbd> \| <kbd>MouseWheel</kbd> \| <kbd>Click</kbd> | Switch tabs   |
-| <kbd>s</kbd>                                                   | Search Dialog |
-| <kbd>Esc</kbd>                                                 | Close Dialogs |
+4. Remove `.github` directory as it contains only PR templates, issue labels etc that are linked to this repository
+5. Update [`userconfig.js`]:
+   - 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
 
-## ⚙️ Configuration Dialog
+> [!TIP]
+> You can find icons for your bookmarks using [`tabler-icons`]
+>
+> If you want to reduce the loading time of the icons, you could install the icon [font] locally and activate the option `"localIcons": true` in the config to disable the remote styles
 
-The default configuration file is [userconfig.js](userconfig.js), but you can change it in the configuration dialog. You can find more information about how the file works in the [original repository](https://github.com/b-coimbra/dawn). The available components are tabs, a clock, and weather.
+#### As Homepage
 
-Additionally, there's a new option called `fastlink` to set the link of the Pokéball button.
+- Click the menu button and select `Options/Preferences`
+- Click the home panel
+- Click the menu next to the homepage and new windows and choose to show custom URLs and add your GitHub Pages link
 
-## 🔍 Search Dialog
+#### As New Tab
 
-The search dialog allows you to display a search bar with various search engines defined in the configuration. To select each one, you simply need to prefix the query with the corresponding `!<id>`.
+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)
 
-By default, the defined search engines are:
-- `!g`: google
-- `!d`: duckduckgo
-- `!y`: youtube
-- `!r`: reddit
-- `!p`: pinterest
 
-## 🖼 Available banners
+### Available banners
 
 | cbg-2                                           | cbg-3                                           | cbg-4                                           | cbg-5                                           |
 | ----------------------------------------------- | ----------------------------------------------- | ----------------------------------------------- | ----------------------------------------------- |
@@ -69,6 +89,10 @@ By default, the defined search engines are:
 | <img src="src/img/banners/cbg-10.gif" width=175> | <img src="src/img/banners/cbg-11.gif" width=175> | <img src="src/img/banners/cbg-12.gif" width=175> | <img src="src/img/banners/cbg-13.gif" width=175> |
 
 
-[dawn]: https://github.com/b-coimbra/dawn
-[catppuccin]: https://github.com/catppuccin/catppuccin
-[tartarus-startpage]:https://github.com/AllJavi/tartarus-startpage
+[`dawn`]: https://github.com/b-coimbra/dawn
+[Catppuccin]: https://github.com/catppuccin/catppuccin
+[`tartarus-startpage`]:https://github.com/AllJavi/tartarus-startpage
+[`dotfiles`]: https://github.com/pivoshenko/dotfiles
+[`userconfig.js`]: userconfig.js
+[`tabler-icons`]: https://tabler.io/icons
+[font]: src/fonts

index.html

@@ -11,7 +11,7 @@
         <link href="https://cdn.jsdelivr.net/gh/monzanifabio/cryptofont/cryptofont.css" rel="stylesheet" />
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css" />
         <link href="src/css/style.css" rel="stylesheet" type="text/css" />
-        <!-- <link href="src/css/tabler-icons.min.css" rel="stylesheet"> -->
+        <link href="src/css/tabler-icons.min.css" rel="stylesheet">
         <link rel="icon" type="image/png" href="src/img/favicon.png" />
         <title>~/.config</title>
     </head>
@@ -36,9 +36,6 @@
 
         <script type="text/javascript" src="src/components/statusbar/statusbar.component.js"></script>
 
-        <script type="text/javascript" src="src/components/search/search.component.js"></script>
-        <script type="text/javascript" src="src/components/config/config.component.js"></script>
-
         <script type="text/javascript" src="src/common/module.js"></script>
     </body>
 </html>

src/common/component.js

@@ -10,8 +10,7 @@ class Component extends HTMLElement {
       raleway: '<link href="https://fonts.googleapis.com/css?family=Raleway:600" rel="stylesheet">',
     },
     icons: {
-      material:
-        '<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">',
+      material: '<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">',
       cryptofont: '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/monzanifabio/cryptofont/cryptofont.css">',
       tabler: '<link rel="stylesheet" href="src/css/tabler-icons.min.css">',
     },
@@ -23,18 +22,12 @@ 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 [];
-  }
+  style()    { return null; }
+  template() { return null; }
+  imports()  { return []; }
 
   /**
    * Reference an external css file
@@ -53,7 +46,8 @@ class Component extends HTMLElement {
   get getResources() {
     const imports = this.imports();
 
-    if (this.resources?.style) imports.push(this.resources.style);
+    if (this.resources?.style)
+      imports.push(this.resources.style);
 
     return imports;
   }
@@ -65,7 +59,8 @@ class Component extends HTMLElement {
   async loadStyles() {
     let html = this.getResources.join("\n");
 
-    if (this.style()) html += `<style>${this.style()}</style>`;
+    if (this.style())
+      html += `<style>${this.style()}</style>`;
 
     return html;
   }
@@ -75,7 +70,8 @@ class Component extends HTMLElement {
    * @returns {string} html
    */
   async buildHTML() {
-    return (await this.loadStyles()) + (await this.template());
+    return await this.loadStyles() +
+          await this.template();
   }
 
   /**
@@ -99,7 +95,7 @@ class Component extends HTMLElement {
       set: (target, prop, value) => {
         this.shadow.querySelector(target[prop]).innerHTML = value;
         return true;
-      },
+      }
     });
   }
 

src/common/config.js

@@ -7,25 +7,16 @@ class Config {
     },
     clock: {
       format: "h:i p",
-      iconColor: "#ff7b95",
-    },
-    search: {
-      engines: {
-        g: ["https://google.com/search?q=", "Google"],
-        y: ["https://youtube.com/results?search_query=", "Youtube"],
-      },
+      iconColor: "#f38ba8",
     },
     disabled: [],
     openLastVisitedTab: false,
     tabs: [],
-    keybindings: {
-      s: "search-bar",
-    },
   };
 
   config;
 
-  constructor(config) {
+  constructor (config) {
     this.config = config;
     this.storage = new Storage("config");
 
@@ -36,7 +27,8 @@ class Config {
     return new Proxy(this, {
       ...this,
       __proto__: this.__proto__,
-      set: (target, prop, value) => this.settingUpdatedCallback(target, prop, value),
+      set: (target, prop, value) =>
+        this.settingUpdatedCallback(target, prop, value)
     });
   }
 
@@ -60,10 +52,14 @@ class Config {
    * @returns {void}
    */
   autoConfig() {
-    Object.keys(this.defaults).forEach((setting) => {
-      if (this.canOverrideStorage(setting)) this[setting] = this.config[setting];
-      else if (this.storage.hasValue(setting)) this[setting] = this.storage.get(setting);
-      else this[setting] = this.defaults[setting];
+    Object.keys(this.defaults).forEach(setting => {
+      if (this.canOverrideStorage(setting))
+        this[setting] = this.config[setting];
+      else
+        if (this.storage.hasValue(setting))
+          this[setting] = this.storage.get(setting);
+        else
+          this[setting] = this.defaults[setting];
     });
   }
 
@@ -92,7 +88,8 @@ class Config {
     document.onkeypress = ({ key }) => {
       if (document.activeElement !== document.body) return;
 
-      if (Object.keys(this.config.keybindings).includes(key)) Actions.activate(this.config.keybindings[key]);
+      if (Object.keys(this.config.keybindings).includes(key))
+        Actions.activate(this.config.keybindings[key]);
     };
   }
 

src/common/module.js

@@ -1,12 +1,11 @@
 const components = {
-  "search-bar": Search,
-  "config-tab": ConfigTab,
   "status-bar": Statusbar,
   "current-time": Clock,
   "weather-forecast": Weather,
   "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]);
 });

src/common/strftime.js

@@ -3,6 +3,14 @@
 | STRFTIME |
 +----------+
 Author: https://github.com/b-coimbra
+Description:
+silly strftime function implementation in js without the percentage notation.
+based off https://strftime.org
+
+USAGE:
+new Date().strftime("H:M p - A") => 21:32 AM - Thursday
+new Date().strftime("m/b/Y")     => 1/Jan/2018
+new Date().strftime("do B Y")    => 18th January 2018
 */
 
 Date.prototype.strftime = function (format = "c") {

src/components/clock/clock.component.js

@@ -17,12 +17,12 @@ class Clock extends Component {
         .clock-time {
             white-space: nowrap;
             font: 300 9pt 'Roboto', sans-serif;
-            color: #cad3f5;
+            color: #cdd6f4;
             letter-spacing: .5px;
         }
 
         .clock-icon {
-            color: #ed8796;
+            color: #f38ba8;
             font-size: 10pt;
             margin-right: 10px;
         }