diff --git a/.gitea/workflows/main.yaml b/.gitea/workflows/main.yaml index fa99440..00064ac 100644 --- 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 - zip -r vision-start.zip dist + run: npm run build + - name: Prepare release + run: | + 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 \ No newline at end of file diff --git a/README.md b/README.md index 0e6cd6d..804a91f 100755 --- 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 `""` 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 @@ -51,4 +81,4 @@ From a technical side: * Refactor everything :( -* Add small nginx demo (with docker) \ No newline at end of file +* Add small nginx demo (with docker) diff --git a/components/WebsiteTile.tsx b/components/WebsiteTile.tsx index 2ef4e3c..622c6ce 100755 --- a/components/WebsiteTile.tsx +++ b/components/WebsiteTile.tsx @@ -23,21 +23,37 @@ 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 = ({ website, isEditing, onEdit, onMove, tileSize }) => { - + const [isLoading, setIsLoading] = useState(false); const handleClick = (e: React.MouseEvent) => { @@ -46,7 +62,7 @@ const WebsiteTile: React.FC = ({ website, isEditing, onEdit, o return; } setIsLoading(true); - + // Simulate loading time (dev purpose) // e.preventDefault(); // setTimeout(() => { @@ -54,8 +70,8 @@ const WebsiteTile: React.FC = ({ 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 (
@@ -86,14 +102,14 @@ const WebsiteTile: React.FC = ({ website, isEditing, onEdit, o {isEditing && (
+ + + + + +
)}
diff --git a/components/layout/CategoryGroup.tsx b/components/layout/CategoryGroup.tsx index 8753131..d8b2a6c 100644 --- a/components/layout/CategoryGroup.tsx +++ b/components/layout/CategoryGroup.tsx @@ -41,7 +41,7 @@ const CategoryGroup: React.FC = ({ 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'}`} > - + )} @@ -63,8 +63,8 @@ const CategoryGroup: React.FC = ({ className={`text-white/50 hover:text-white transition-all duration-300 ease-in-out transform ${isEditing ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`} > - - + + )} diff --git a/components/layout/ConfigurationButton.tsx b/components/layout/ConfigurationButton.tsx index 06dd404..c5a0276 100644 --- a/components/layout/ConfigurationButton.tsx +++ b/components/layout/ConfigurationButton.tsx @@ -11,9 +11,10 @@ const ConfigurationButton: React.FC = ({ 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" > - - - + + + + ); diff --git a/components/utils/baseWallpapers.ts b/components/utils/baseWallpapers.ts index c587287..c746733 100644 --- 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', }, ]; diff --git a/screenshots/configuration-abstract-red.png b/screenshots/configuration-abstract-red.png new file mode 100644 index 0000000..65c0962 Binary files /dev/null and b/screenshots/configuration-abstract-red.png differ diff --git a/screenshots/dark-page.png b/screenshots/dark-page.png new file mode 100644 index 0000000..fe23297 Binary files /dev/null and b/screenshots/dark-page.png differ diff --git a/screenshots/editing-abstract-red.png b/screenshots/editing-abstract-red.png new file mode 100644 index 0000000..083a30b Binary files /dev/null and b/screenshots/editing-abstract-red.png differ diff --git a/download-icons.sh b/scripts/prepare_release.sh similarity index 100% rename from download-icons.sh rename to scripts/prepare_release.sh