Dev optimizations

.changeset/bitter-oranges-yawn.md

@@ -0,0 +1,5 @@
+---
+'@elek-io/client': patch
+---
+
+Added README.md and more developer documentation

.changeset/moody-tips-share.md

@@ -0,0 +1,5 @@
+---
+'@elek-io/client': patch
+---
+
+Fixed Shadcn init and components

.changeset/shy-badgers-drum.md

@@ -0,0 +1,5 @@
+---
+'@elek-io/client': patch
+---
+
+Using new provider for breadcrumbs to allow for static and dynamic page labels in conjuction with Tanstack router and query.

.changeset/violet-parks-move.md

@@ -0,0 +1,5 @@
+---
+'@elek-io/client': patch
+---
+
+Using Tanstack query as a wrapper around IPC calls for cache handling. Improved perceived performance since we do not wait for data to load before rendering pages and components.

.github/dependabot.yml

@@ -5,11 +5,11 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "daily"
+      interval: 'daily'
     ignore:
-    - dependency-name: "@types/node"
-      # Node.js types, ignore major updates since we don't want to use types for 22.x.x if we are using 20.x.x
-      update-types: ["version-update:semver-major"]
+      - dependency-name: '@types/node'
+        # Node.js types, ignore major updates since we don't want to use types for 22.x.x if we are using 20.x.x
+        update-types: ['version-update:semver-major']

.github/workflows/cd.yml

@@ -22,14 +22,19 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - name: Setup Node.js ${{ matrix.node-version }} environment
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
       - name: Install dependencies
-        run: npm install
-      # - name: Run linter
-      #   run: npm run lint
+        run: pnpm install --frozen-lockfile
+      - name: Run linter
+        run: pnpm run lint
       - name: Create or update pull request
         id: changesets
         uses: changesets/action@v1
@@ -40,6 +45,6 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Publish
         if: steps.changesets.outputs.hasChangesets == 'false'
-        run: npm run build
+        run: pnpm run build
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -21,24 +21,29 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - name: Setup Node.js ${{ matrix.node-version }} environment
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
       - name: Install dependencies
-        run: npm install
-      # - name: Run linter
-      #   run: npm run lint
+        run: pnpm install --frozen-lockfile
+      - name: Run linter
+        run: pnpm run lint
       # - name: Run typecheck
-      #   run: npm run typecheck
+      #   run: pnpm run check-types
       # - name: Identify misconfigurations and security anti-patterns
       #   uses: doyensec/electronegativity-action@v2
       # - name: Upload report
       #   uses: github/codeql-action/upload-sarif@v1
       # with:
       #   sarif_file: ../electronegativity_results
       - name: Build
-        run: npm run build
+        run: pnpm run build
       # Uncomment if necessary
       # For example to inspect the build applications
       - name: Upload artifact

.prettierignore

@@ -0,0 +1,3 @@
+pnpm-lock.yaml
+routeTree.gen.ts
+CHANGELOG.md

.prettierrc.json

@@ -5,5 +5,17 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "es5",
-  "bracketSpacing": true
+  "bracketSpacing": true,
+  "importOrder": [
+    "<THIRD_PARTY_MODULES>",
+    "^@renderer/(.*)$",
+    "^@elek-io/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "tailwindStylesheet": "./src/renderer/index.css"
 }

.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "bradlc.vscode-tailwindcss"]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "github.vscode-github-actions",
+    "bradlc.vscode-tailwindcss"
+  ]
 }

.vscode/settings.json

@@ -9,9 +9,6 @@
     "**/routeTree.gen.ts": true
   },
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "always"
-  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "typescript.tsdk": "./node_modules/typescript/lib"
 }

README.md

@@ -0,0 +1,50 @@
+# elek.io Client
+
+> A modern, offline-first content management system (CMS) and digital asset manager (DAM).
+
+[![Version](https://img.shields.io/badge/version-0.3.2-blue.svg)](https://github.com/elek-io/client/releases)
+[![Platform](https://img.shields.io/badge/platform-Windows%20%7C%20macOS%20%7C%20Linux-lightgrey.svg)](https://github.com/elek-io/client)
+[![License](https://img.shields.io/badge/license-todo-red.svg)](LICENSE)
+
+> [!IMPORTANT]  
+> elek.io Client is under active development and not yet ready for production usage! Feel free to check it out and make suggestions.
+
+### Motivation
+
+Traditional CMS solutions like WordPress need to be installed on a server, leading to costs for hosting it 24/7, security vulnerabilities by exposing the server to the internet, and the need to maintain / keep the server, database and CMS up to date.
+
+elek.io Client solves these problems by being an offline-first desktop application that works entirely on your local machine, with optional remote synchronization.
+
+### What Makes It Special
+
+- **Offline-first**: Works entirely locally with optional remote synchronization
+- **Cross-Platform**: Desktop apps for Windows, macOS, and Linux
+- **Version Control**: Every Project is a Git repository with full version history
+- **Easy backups & collaboration (optional)**: Synchronize to any Git hosting service (GitHub, GitLab, Bitbucket etc.) to work together with others and have a backup if needed
+- **Multi-Language**: Built-in support for 25 languages
+- **Structured Content**: Define custom content types (Collections) with field definitions
+- **Developer-Friendly**: Local read-only OpenAPI REST API with optional typesafe TS/JS API Client generation and JSON file exports for programmatic access to your content e.g. to use with static site generators
+
+## Installation
+
+### Download
+
+Download the latest version for your platform:
+
+- **Windows**: [Download installer](https://github.com/elek-io/client/releases)
+- **macOS**: [Download DMG](https://github.com/elek-io/client/releases)
+- **Linux**: Download [AppImage](https://github.com/elek-io/client/releases) / [Snap](https://snapcraft.io/) / [DEB](https://github.com/elek-io/client/releases)
+
+### System Requirements
+
+Altough elek.io Client might run on older hard and software than listed below, the following is the recommended minimum:
+
+- **Windows**: Windows 10 or later
+- **macOS**: macOS 13.7.6 (Ventura) or later
+- **Linux**: Ubuntu 22.04.5, or equivalent
+- **RAM**: 4 GB minimum, 8 GB recommended
+- **Disk Space**: 500 MB for elek.io Client + space for your Projects
+
+## For Developers
+
+For insight on how elek.io Client works, please refer to the [documentation folder](documentation/overview.md).

components.json

@@ -1,18 +1,22 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "new-york",
-  "rsc": true,
+  "rsc": false,
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "src/renderer/src/index.css",
+    "css": "@renderer/index.css",
     "baseColor": "zinc",
-    "cssVariables": false,
+    "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@renderer/components",
-    "utils": "@renderer/util"
+    "utils": "@renderer/lib/utils",
+    "ui": "@renderer/components/ui",
+    "lib": "@renderer/lib",
+    "hooks": "@renderer/hooks"
   },
-  "iconLibrary": "lucide"
+  "registries": {}
 }

documentation/README.md

@@ -0,0 +1,44 @@
+# Developer Documentation
+
+Welcome to the elek.io Client developer documentation. This guide will help you understand the codebase architecture and development patterns.
+
+> [!NOTE]
+> If your main interest is using Projects content inside your own applications, you can skip to the [Consuming Content Locally](./consuming-content-locally.md) section.
+
+## Prerequisites
+
+- Familiarity with TypeScript and React
+- Basic understanding of Electron architecture
+- Knowledge of React Hook Form and TanStack Query (helpful but not required)
+- Understanding of Git and version control concepts
+
+## Getting Started
+
+**Start with [Overview](./overview.md)** to understand the application architecture, security model, and how the different processes communicate.
+
+Then proceed to the specific topics based on your interests or contribution goals:
+
+- **[Loading and Updating Data](./renderer/loading-and-updating-data.md)** - TanStack Query patterns for data fetching and mutations
+- **[Dynamic Form Generation](./renderer/dynamic-form-field-generation.md)** - How user-defined forms work with field definitions
+- **[Breadcrumb Navigation](./renderer/breadcrumb-navigation.md)** - Route-based breadcrumb system for hierarchical navigation
+
+## Contributing
+
+When updating these docs:
+
+- Keep code examples up-to-date with actual implementation
+- Include file references with line numbers where relevant
+- Add practical examples for complex concepts
+- Update the "Last Updated" date at the bottom of each document
+
+## Additional Resources
+
+- [Electron Documentation](https://www.electronjs.org/docs/latest)
+- [TanStack Query Documentation](https://tanstack.com/query/latest)
+- [React Hook Form Documentation](https://react-hook-form.com/get-started)
+- [shadcn/ui Documentation](https://ui.shadcn.com/docs)
+- [@elek-io/core Repository](https://github.com/elek-io/core)
+
+---
+
+**Last Updated:** 2025-12-04