app dev and CI

2024-12-17 19:26:53 -06:00 · 2024-12-17 19:26:53 -06:00 · d32a6b412e
commit d32a6b412e
parent 960a5b4c57
12 changed files with 162 additions and 10 deletions
--- a/.gitea/workflows/ci.yaml
+++ b/.gitea/workflows/ci.yaml
@ -0,0 +1,44 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  docker_image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+
+      - name: Install Docker
+        run: curl -fsSL https://get.docker.com | sh
+
+      - name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: git.marinodev.com
+          username: ${{ vars.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and Push Docker Image
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          tags: git.marinodev.com/marinodev/FBLA25:latest
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: docker_image
+    steps:
+      - name: Restart Service
+        uses: https://github.com/appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ vars.DEPLOY_HOST }}
+          username: ${{ vars.DEPLOY_USER }}
+          password: ${{ secrets.DEPLOY_PASSWORD }}
+          script: |
+            cd ${{ vars.DEPLOY_PATH }}
+            git pull
+            docker-compose down && docker-compose pull && docker-compose up -d
--- a/.gitignore
+++ b/.gitignore
@ -23,3 +23,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Postgres
+postgresql
--- a/11
+++ b/11
@ -0,0 +1,11 @@
+FROM git.marinodev.com/MarinoDev/node_gitea_ci:latest
+
+RUN cd /srv && \
+    git clone https://git.marinodev.com/MarinoDev/FBLA25.git
+WORKDIR /srv/FBLA25
+
+RUN npm ci --omit dev
+RUN npm run build
+
+EXPOSE 8080
+ENTRYPOINT cd /srv/FBLA25 && PORT=8080 node build
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,23 @@
+version: '3.8'
+
+services:
+  postgres:
+    image: postgres:17
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB}
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_PASSWORD: /run/secrets/postgres_password
+    ports:
+      - "5433:5432"
+    volumes:
+      - ./postgresql/data:/var/lib/postgresql/data
+  FBLA25:
+    image: git.marinodev.com/marinodev/FBLA25
+    restart: on-failure
+    ports:
+      - "8002:8080"
+
+secrets:
+  postgres_password:
+    file: ./postgres/postgres_password.txt
--- a/package-lock.json
+++ b/package-lock.json
@ -24,7 +24,7 @@
 				"globals": "^15.0.0",
 				"prettier": "^3.3.2",
 				"prettier-plugin-svelte": "^3.2.6",
-				"prettier-plugin-tailwindcss": "^0.6.5",
+				"prettier-plugin-tailwindcss": "^0.6.9",
 				"svelte": "^5.0.0",
 				"svelte-check": "^4.0.0",
 				"tailwindcss": "^3.4.9",
--- a/package.json
+++ b/package.json
@ -24,7 +24,7 @@
 		"globals": "^15.0.0",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
-		"prettier-plugin-tailwindcss": "^0.6.5",
+		"prettier-plugin-tailwindcss": "^0.6.9",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.4.9",
--- a/src/app.css
+++ b/src/app.css
@ -1,3 +1,29 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
+
+:root {
+  --text-color: #000000;
+  --bg-color: #f4f4f4;
+}
+
+[data-theme='dark'] {
+    --text-color: #f4f4f4;
+    --bg-color: #010101;
+}
+
+body {
+  background: var(--bg-color);
+  color: var(--text-color);
+}
+
+h1 {
+    color: var(--text-color);
+    @apply  text-4xl
+}
+
+a {
+    @apply text-blue-500
+}
+
+
--- a/src/app.html
+++ b/src/app.html
@ -9,6 +9,7 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
+		<script src="%sveltekit.assets%/themeGetter.ts"></script>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,13 +1,26 @@
 <script lang="ts">
 	import '../app.css';
+	import { theme, toggleTheme } from '../stores/themeStore';
+	import { onMount } from 'svelte';

 	let { children } = $props();
+
+	onMount(() => {
+		theme.subscribe((value) => {
+			document.documentElement.setAttribute('data-theme', value);
+		});
+	});
 </script>

-<nav>
-	<a href="/">Home</a>
-	<a href="/about">About </a>
-	<a href="/settings">Settings </a>
-</nav>
+<div class="flex justify-between p-6">
+	<nav>
+		<a href="/" class="pr-3">Home</a>
+		<a href="/about" class="px-6">About</a>
+		<a href="/settings" class="px-6">Settings</a>
+	</nav>
+	<button onclick={toggleTheme} class="object-right px-6">Toggle Theme</button>
+</div>

-{@render children()}
+<div class="p-4">
+	{@render children()}
+</div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,2 +1,6 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Test Text</p>
+<h1>Hello world</h1>
+
+<div class="text-center text-green-500">
+	<p class="text-red-800">Test Text</p>
+	<p>hello</p>
+</div>
--- a/src/stores/themeStore.ts
+++ b/src/stores/themeStore.ts
@ -0,0 +1,18 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+let storedTheme: string = 'light';
+if (browser) {
+	storedTheme = localStorage.getItem('theme') || 'light';
+}
+export const theme = writable(storedTheme);
+
+theme.subscribe((value) => {
+	if (browser) {
+		localStorage.setItem('theme', value);
+	}
+});
+
+export function toggleTheme() {
+	theme.update((currentTheme) => (currentTheme === 'light' ? 'dark' : 'light'));
+}
--- a/static/themeGetter.ts
+++ b/static/themeGetter.ts
@ -0,0 +1,9 @@
+const saved_theme = localStorage.getItem('theme');
+if (saved_theme) {
+	document.body.setAttribute('data-theme', saved_theme);
+} else {
+	const prefers_dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+	const theme = prefers_dark ? 'dark' : 'light';
+	document.body.setAttribute('data-theme', theme);
+	localStorage.setItem('theme', theme);
+}