first release maybe?

2025-07-30 17:29:50 -03:00
parent 2849ed3bb2
commit af7b778561
10 changed files with 123 additions and 56 deletions
--- a/.gitea/workflows/main.yaml
+++ b/.gitea/workflows/main.yaml
@@ -1,29 +1,45 @@
-name: Check scripts syntax
-on: [push]
+name: Build and Release
+
+on:
+  push:
+    branches:
+      - main
+  tag:

 jobs:
-  build-release:
+  build:
+    if: gitea.event_name == 'push'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - name: Install JS dependencies
+        run: npm install
+      - name: Run build
+        run: npm run build
+
+  release:
+    if: gitea.event_name == 'tag'
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository code
        uses: actions/checkout@v4
      - name: Setup zip
-        run: |
-          sudo apt-get install zip -y
+        run: sudo apt-get install zip -y
      - name: Install JS dependencies
-        run: |
-          npm install
-      - name: Run scripts
-        run: |
-          bash download-icons.sh
+        run: npm install
      - name: Run build
+        run: npm run build
+      - name: Prepare release
        run: | 
-          npm run build
-          zip -r vision-start.zip dist
+          bash scripts/prepare_release.sh
+          mv dist vision-start/
+          mv manifest.json vision-start/
+      - name: Create zip archive
+        run: zip -r vision-start-${{ gitea.ref_name }}.zip vision-start
      - name: Release zip
        uses: akkuman/gitea-release-action@v1
        with:
-          name: latest
-          tag_name: latest
-          files: |-
-            vision-start.zip
+          name: ${{ gitea.ref_name }}
+          tag_name: ${{ gitea.ref_name }}
+          files: vision-start-${{ gitea.ref_name }}.zip
--- a/README.md
+++ b/README.md
@@ -1,27 +1,57 @@
 # Vision Start
-#### Small startpage 
+#### A glassmorphism-looking like, modern and customizable startpage built with React.

-## Predefined themes
+## Screenshots

-1. Abstract
-2. Aurora (Vista vibes)
-3. Mountain
+![Vision Start with the Dark background](screenshots/dark-page.png)
+![Editing page with Abstract Red background](screenshots/editing-abstract-red.png)
+![Configuration Tab opened](screenshots/configuration-abstract-red.png)

-## Run Locally
+## Backgrounds

-**Prerequisites:**  Node.js
+It comes with a selection of some nice pre-defined backgrounds. You can also upload up to one image to it.

-1. Install dependencies:
-   `npm install`
-2. Run the app:
-   `npm run dev`
+* **Abstract**
+* **Abstract Red**
+* **Beach**
+* **Dark**
+* **Mountain**
+* **Waves**
+
+## Features
+
+* **Customizable Website Tiles:** Add, edit, and organize your favorite websites for quick access.
+* **Elegant Clock:** A clock because all startpages have one.
+* **Server Status Widgets:** Monitor the status of services directly from the startpage.
+* **Glassmorphism UI:** A modern and stylish interface with a frosted glass effect.
+* **Icon Library:** It uses the [Dashboard Icon library](https://dashboardicons.com/) for a better look and feel. It also supports auto-fetch for some websites.
+* **Future**: a long to do list :(
+
+## Running Locally
+
+**Prerequisites:** Node.js
+
+1.  Clone the repository:
+```bash
+git clone https://gitea.com/ivan/vision-start.git
+cd vision-start
+```
+2.  Install dependencies:
+```bash
+npm install
+```
+3.  Run the development server:
+```bash
+npm run dev
+```
+
+## To-do

-## to-do
 * [x] Multiple Wallpapers
 * [x] Remake icons
-* [] Increase offline compatibility
-  * Use chrome.storage.local for wallpapers
-  * Use chrome.storage.local for some logos
+* [] Increase offline compatibility (might not be possible)
+  * Use chrome.storage.local for user wallpapers -- this one is
+  * Use chrome.storage.local for some logos -- a bit hard
    * Some logos have CORS enabled, we can add `"<all_urls>"` to the manifest.json file and cache them on storage local
 * Dynamic Weather Widget
  * A box with information about the current weather, with manual entry on the location
--- a/components/WebsiteTile.tsx
+++ b/components/WebsiteTile.tsx
@@ -23,18 +23,34 @@ const getTileSizeClass = (size: string | undefined) => {
  }
 };

-const getIconSize = (size: string | undefined) => {
+
+// Returns normal icon size in px
+const getIconPixelSize = (size: string | undefined): number => {
  switch (size) {
    case 'small':
-      return 8;
+      return 32;
    case 'medium':
-      return 10;
+      return 40;
    case 'large':
-      return 12;
+      return 48;
    default:
-      return 10;
+      return 40;
  }
-}
+};
+
+// Returns loading icon size in px
+const getIconLoadingPixelSize = (size: string | undefined): number => {
+  switch (size) {
+    case 'small':
+      return 24;
+    case 'medium':
+      return 32;
+    case 'large':
+      return 40;
+    default:
+      return 32;
+  }
+};

 const WebsiteTile: React.FC<WebsiteTileProps> = ({ website, isEditing, onEdit, onMove, tileSize }) => {

@@ -54,8 +70,8 @@ const WebsiteTile: React.FC<WebsiteTileProps> = ({ website, isEditing, onEdit, o
    // }, 3500); // Small delay to show spinner before navigation
  };

-  const iconSizeClass = `w-${getIconSize(tileSize)} h-${getIconSize(tileSize)}`;
-  const iconSizeLoadingClass = `w-${getIconSize(tileSize) - 4} h-${getIconSize(tileSize) - 4}`;
+  const iconSizeClass = `w-[${getIconPixelSize(tileSize)}px] h-[${getIconPixelSize(tileSize)}px]`;
+  const iconSizeLoadingClass = `w-[${getIconLoadingPixelSize(tileSize)}px] h-[${getIconLoadingPixelSize(tileSize)}px]`;

  return (
    <div className={`relative ${getTileSizeClass(tileSize)} transition-all duration-300 ease-in-out`}>
@@ -86,14 +102,14 @@ const WebsiteTile: React.FC<WebsiteTileProps> = ({ website, isEditing, onEdit, o
      {isEditing && (
        <div className="absolute bottom-2 left-0 right-0 flex justify-center gap-2">
          <button onClick={() => onMove(website, 'left')} className="text-white/50 hover:text-white transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-left" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
-</svg></button>
+            <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
+          </svg></button>
          <button onClick={() => onEdit(website)} className="text-white/50 hover:text-white transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pencil" viewBox="0 0 16 16">
-  <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
-</svg></button>
+            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
+          </svg></button>
          <button onClick={() => onMove(website, 'right')} className="text-white/50 hover:text-white transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-right" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
-</svg></button>
+            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
+          </svg></button>
        </div>
      )}
    </div>
--- a/components/layout/CategoryGroup.tsx
+++ b/components/layout/CategoryGroup.tsx
@@ -41,7 +41,7 @@ const CategoryGroup: React.FC<CategoryGroupProps> = ({
            className={`ml-2 text-white/50 hover:text-white transition-all duration-300 ease-in-out transform ${isEditing ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" className="bi bi-pencil" viewBox="0 0 16 16">
-              <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zM1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+              <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
            </svg>
          </button>
        )}
@@ -63,8 +63,8 @@ const CategoryGroup: React.FC<CategoryGroupProps> = ({
            className={`text-white/50 hover:text-white transition-all duration-300 ease-in-out transform ${isEditing ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" className="bi bi-plus-circle" viewBox="0 0 16 16">
-              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-              <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+              <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
            </svg>
          </button>
        )}
--- a/components/layout/ConfigurationButton.tsx
+++ b/components/layout/ConfigurationButton.tsx
@@ -11,9 +11,10 @@ const ConfigurationButton: React.FC<ConfigurationButtonProps> = ({ onClick }) =>
        onClick={onClick}
        className="bg-black/25 backdrop-blur-md border border-white/10 rounded-xl p-3 text-white flex items-center gap-2 hover:bg-white/25 transition-colors"
      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-gear-wide" viewBox="0 0 16 16">
-          <path d="M8.932.727c-.243-.97-1.62-.97-1.864 0l-.071.286a.96.96 0 0 1-1.622.434l-.205-.211c-.695-.719-1.888-.03-1.613.931l.08.284a.96.96 0 0 1-1.186 1.187l-.284-.081c-.96-.275-1.65.918-.931 1.613l.211.205a.96.96 0 0 1-.434 1.622l-.286.071c-.97.243-.97 1.62 0 1.864l.286.071a.96.96 0 0 1 .434 1.622l-.211.205c-.719.695-.03 1.888.931 1.613l.284-.08a.96.96 0 0 1 1.187 1.187l-.081.283c-.275.96.918 1.65 1.613.931l.205-.211a.96.96 0 0 1 1.622.434l.071.286c.243.97 1.62.97 1.864 0l.071-.286a.96.96 0 0 1 1.622-.434l.205.211c.695.719 1.888.03 1.613-.931l-.08-.284a.96.96 0 0 1 1.187-1.187l.283.081c.96.275 1.65-.918-.931-1.613l-.211-.205a.96.96 0 0 1 .434-1.622l.286-.071c.97-.243.97-1.62 0-1.864l-.286-.071a.96.96 0 0 1-.434-1.622l.211-.205c.719-.695.03-1.888-.931-1.613l-.284.08a.96.96 0 0 1-1.187-1.186l.081-.284c.275-.96-.918-1.65-1.613-.931l-.205.211a.96.96 0 0 1-1.622-.434zM8 12.997a4.998 4.998 0 1 1 0-9.995 4.998 4.998 0 0 1 0 9.996z"/>
-        </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="2" fill="none"/>
+            <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09c.7 0 1.31-.4 1.51-1a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06c.51.51 1.31.61 1.82.33.51-.28 1-.81 1-1.51V3a2 2 0 1 1 4 0v.09c0 .7.49 1.23 1 1.51.51.28 1.31.18 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82c.2.6.81 1 1.51 1H21a2 2 0 1 1 0 4h-.09c-.7 0-1.31.4-1.51 1z"/>
+          </svg>
      </button>
    </div>
  );
--- a/components/utils/baseWallpapers.ts
+++ b/components/utils/baseWallpapers.ts
@@ -14,12 +14,16 @@ export const baseWallpapers: Wallpaper[] = [
    name: 'Beach',
    url: 'https://wallpapershome.com/images/pages/pic_h/615.jpg'
  },
+  {
+    name: 'Dark',
+    url: 'https://i.imgur.com/qHlRO0s.jpeg'
+  },
  {
    name: 'Mountain',
    url: 'https://i.imgur.com/yHfOZUd.jpeg'
  },
  {
    name: 'Waves',
-    url: '/waves.jpg',
+    url: 'https://i.imgur.com/E8uxZ7R.png',
  },
 ];
--- a/screenshots/configuration-abstract-red.png
+++ b/screenshots/configuration-abstract-red.png
--- a/screenshots/dark-page.png
+++ b/screenshots/dark-page.png
--- a/screenshots/editing-abstract-red.png
+++ b/screenshots/editing-abstract-red.png
--- a/scripts/prepare_release.sh
+++ b/scripts/prepare_release.sh