diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..7931796 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,19 @@ +# Misc directories +.svelte-kit +.vscode +node_modules + +# Misc files +LICENSE +README.md +vite.config.js.timestamp-* + +# Git +.git +.github +.gitignore + +# Docker +.dockerignore +docker-compose.yml +Dockerfile \ No newline at end of file diff --git a/.envrc b/.envrc new file mode 100644 index 0000000..3550a30 --- /dev/null +++ b/.envrc @@ -0,0 +1 @@ +use flake diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..79dca76 --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +node_modules + +# Output +.output +.vercel +.netlify +.wrangler +/.svelte-kit +/build + +# OS +.DS_Store +Thumbs.db + +# Env +.env +.env.* +!.env.example +!.env.test +.direnv + +# Vite +vite.config.js.timestamp-* +vite.config.ts.timestamp-* +package-lock.json diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..6562bcb --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +# Package Managers +package-lock.json +pnpm-lock.yaml +yarn.lock +bun.lock +bun.lockb diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..d54b24a --- /dev/null +++ b/.prettierrc @@ -0,0 +1,19 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 80, + "tabWidth": 4, + "semi": true, + "bracketSpacing": true, + "bracketSameLine": true, + "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], + "overrides": [ + { + "files": "*.svelte", + "options": { + "parser": "svelte" + } + } + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..779ad19 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" +} diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..f8d7e6d --- /dev/null +++ b/Dockerfile @@ -0,0 +1,26 @@ +FROM node:22 AS build +WORKDIR /app + +COPY package*.json . +RUN npm install + +COPY . . +RUN npm run build + +# Stage 1: Create production image +FROM node:22-alpine AS production +WORKDIR /app + +# Install only production dependencies +COPY package*.json . +ENV NODE_ENV production +RUN npm ci --omit dev + +# Copy build files from stage 0 +COPY --from=build /app/build ./build + +# Run build on given port +# https://kit.svelte.dev/docs/adapter-node#environment-variables-port-host-and-socket-path +ENV PORT 5173 +EXPOSE 5173 +CMD ["node", "build"] \ No newline at end of file diff --git a/README.md b/README.md index d688287..1890537 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,17 @@ # devlink-frontend-svelte -Frontend for the DevLink platform - developed with Svelte +Frontend for the DevLink platform - developed with [Svelte](https://svelte.dev/) + +# Installation and usage +1. Get the source code of the project from the repository e.g. with `git clone https://github.com/DevLink-dev/devlink-frontend-svelte.git` in the terminal or via your favorite git GUI Tool +2. Navigate to the source folder `cd devlink-frontend` + +## Run application +- have [Docker](https://www.docker.com/) installed + +run `docker compose up` + +## Development Setup +1. have [node](https://nodejs.org/en) installed +2. Open the frontend with your favorite editor +2. Install the needed depedncies with `npm install` +3. Run app locally with `npm run dev` \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..33713bc --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,6 @@ +services: + devlink.frontend: + container_name: DevlinkFrontend + build: . + ports: + - "5173:5173" \ No newline at end of file diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..ef07d32 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,36 @@ +import prettier from 'eslint-config-prettier'; +import js from '@eslint/js'; +import { includeIgnoreFile } from '@eslint/compat'; +import svelte from 'eslint-plugin-svelte'; +import globals from 'globals'; +import { fileURLToPath } from 'node:url'; +import ts from 'typescript-eslint'; +import svelteConfig from './svelte.config.js'; + +const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url)); + +export default ts.config( + includeIgnoreFile(gitignorePath), + js.configs.recommended, + ...ts.configs.recommended, + ...svelte.configs.recommended, + prettier, + ...svelte.configs.prettier, + { + languageOptions: { + globals: { ...globals.browser, ...globals.node } + }, + rules: { 'no-undef': 'off' } + }, + { + files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'], + languageOptions: { + parserOptions: { + projectService: true, + extraFileExtensions: ['.svelte'], + parser: ts.parser, + svelteConfig + } + } + } +); diff --git a/flake.lock b/flake.lock new file mode 100644 index 0000000..1ed4c4f --- /dev/null +++ b/flake.lock @@ -0,0 +1,43 @@ +{ + "nodes": { + "nixpkgs": { + "locked": { + "lastModified": 1751011381, + "narHash": "sha256-krGXKxvkBhnrSC/kGBmg5MyupUUT5R6IBCLEzx9jhMM=", + "owner": "nixos", + "repo": "nixpkgs", + "rev": "30e2e2857ba47844aa71991daa6ed1fc678bcbb7", + "type": "github" + }, + "original": { + "owner": "nixos", + "ref": "nixos-unstable", + "repo": "nixpkgs", + "type": "github" + } + }, + "root": { + "inputs": { + "nixpkgs": "nixpkgs", + "systems": "systems" + } + }, + "systems": { + "locked": { + "lastModified": 1681028828, + "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=", + "owner": "nix-systems", + "repo": "default", + "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e", + "type": "github" + }, + "original": { + "owner": "nix-systems", + "repo": "default", + "type": "github" + } + } + }, + "root": "root", + "version": 7 +} diff --git a/flake.nix b/flake.nix new file mode 100644 index 0000000..6b14a1b --- /dev/null +++ b/flake.nix @@ -0,0 +1,40 @@ +{ + inputs = { + nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable"; + systems.url = "github:nix-systems/default"; # can run on all systems + }; + + outputs = { self, nixpkgs, systems, ... }: + let + eachSystem = fn: nixpkgs.lib.genAttrs (import systems) (system: fn system (import nixpkgs { + inherit system; + })); + in + { + packages = eachSystem (system: pkgs: rec { + default = devlink-frontend-svelte; + devlink-frontend-svelte = pkgs.buildNpmPackage { + name = "devlink-frontend-svelte"; + src = ./.; + + npmDepsHash = "sha256-kZBP7PGScGrbqAqwOEPqqatcgMILVVzy2/qyKnajdU8="; + + # runs `npm run build` by default + + installPhase = '' + mkdir -p $out/bin/src + cp -r build/* $out/bin/src + makeWrapper "${pkgs.nodejs}/bin/node" "$out/bin/devlink-frontend-svelte" \ + --add-flags "$out/bin/src" \ + --set PORT 4173 + ''; + }; + }); + + devShells = eachSystem (system: pkgs: { + default = pkgs.mkShell { + nativeBuildInputs = [ pkgs.nodejs ]; + }; + }); + }; +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..c92707b --- /dev/null +++ b/package.json @@ -0,0 +1,41 @@ +{ + "name": "devlink-frontend-svelte", + "private": true, + "version": "0.0.1", + "type": "module", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "prepare": "svelte-kit sync || echo ''", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "format": "prettier --write .", + "lint": "prettier --check . && eslint ." + }, + "devDependencies": { + "@eslint/compat": "^1.3.1", + "@eslint/js": "^9.18.0", + "@skeletonlabs/skeleton": "^3.1.3", + "@skeletonlabs/skeleton-svelte": "^1.2.3", + "@sveltejs/adapter-auto": "^4.0.0", + "@sveltejs/kit": "^2.22.2", + "@sveltejs/vite-plugin-svelte": "^5.1.0", + "@tailwindcss/forms": "^0.5.10", + "@tailwindcss/typography": "^0.5.16", + "@tailwindcss/vite": "^4.1.11", + "eslint": "^9.30.0", + "eslint-config-prettier": "^10.1.5", + "eslint-plugin-svelte": "^3.10.1", + "globals": "^16.2.0", + "prettier": "^3.6.2", + "prettier-plugin-svelte": "^3.4.0", + "prettier-plugin-tailwindcss": "^0.6.13", + "svelte": "^5.34.9", + "svelte-check": "^4.2.2", + "tailwindcss": "^4.0.0", + "typescript": "^5.8.3", + "typescript-eslint": "^8.35.0", + "vite": "^6.3.5" + } +} diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..f05359e --- /dev/null +++ b/src/app.css @@ -0,0 +1,9 @@ +@import 'tailwindcss'; +@plugin '@tailwindcss/forms'; +@plugin '@tailwindcss/typography'; + +@import '@skeletonlabs/skeleton'; +@import '@skeletonlabs/skeleton/optional/presets'; +@import '@skeletonlabs/skeleton/themes/cerberus'; + +@source '../node_modules/@skeletonlabs/skeleton-svelte/dist'; diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..da08e6d --- /dev/null +++ b/src/app.d.ts @@ -0,0 +1,13 @@ +// See https://svelte.dev/docs/kit/types#app.d.ts +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface PageState {} + // interface Platform {} + } +} + +export {}; diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..5dc1ce0 --- /dev/null +++ b/src/app.html @@ -0,0 +1,15 @@ + + + + + + + + %sveltekit.head% + + + +
%sveltekit.body%
+ + + \ No newline at end of file diff --git a/src/lib/index.ts b/src/lib/index.ts new file mode 100644 index 0000000..856f2b6 --- /dev/null +++ b/src/lib/index.ts @@ -0,0 +1 @@ +// place files you want to import through the `$lib` alias in this folder. diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..8921562 --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,7 @@ + + +{@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..cc88df0 --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,2 @@ +

Welcome to SvelteKit

+

Visit svelte.dev/docs/kit to read the documentation

diff --git a/static/favicon.png b/static/favicon.png new file mode 100644 index 0000000..825b9e6 Binary files /dev/null and b/static/favicon.png differ diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..1295460 --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,18 @@ +import adapter from '@sveltejs/adapter-auto'; +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + // Consult https://svelte.dev/docs/kit/integrations + // for more information about preprocessors + preprocess: vitePreprocess(), + + kit: { + // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. + // If your environment is not supported, or you settled on a specific environment, switch out the adapter. + // See https://svelte.dev/docs/kit/adapters for more information about adapters. + adapter: adapter() + } +}; + +export default config; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..0b2d886 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "moduleResolution": "bundler" + } + // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias + // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files + // + // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes + // from the referenced tsconfig.json - TypeScript does not merge them in +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..2d35c4f --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import tailwindcss from '@tailwindcss/vite'; +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vite'; + +export default defineConfig({ + plugins: [tailwindcss(), sveltekit()] +});