Merge pull request #69 from minedelve/develop

v0.4.14

.github/workflows/release.yml

@@ -0,0 +1,69 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1 : Check repository
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Step 2 : Config Node.js
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      # Step 3 : install and build
+      - name: Install dependencies
+        run: npm install
+
+      - name: Authenticate to NPM
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
+
+      # Step 4 : Get local version
+      - name: Get version from NPM
+        id: get_npm_version
+        run: |
+          PACKAGE_NAME="mytril"
+          NPM_VERSION=$(npm show $PACKAGE_NAME version || echo "0.0.0")
+          echo "npm_version=$NPM_VERSION" >> $GITHUB_ENV
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+
+      # Step 5 : Verify version on NPM
+      - name: Compare versions
+        id: compare_versions
+        run: |
+          LOCAL_VERSION=$(node -p "require('./package.json').version")
+          echo "Local version: $LOCAL_VERSION"
+          echo "NPM version: $NPM_VERSION"
+
+          if [ "$LOCAL_VERSION" = "$NPM_VERSION" ]; then
+            echo "Local version is equal to NPM version. Skipping publication."
+            exit 0
+          fi
+
+          if [ "$(printf '%s\n' "$NPM_VERSION" "$LOCAL_VERSION" | sort -V | tail -n1)" != "$LOCAL_VERSION" ]; then
+            echo "Local version is not greater than NPM version. Skipping publication."
+            exit 0
+          else
+            echo "Local version is greater than NPM version. Proceeding to publish."
+          fi
+
+        env:
+          NPM_VERSION: ${{ env.npm_version }}
+
+      # Step 6: Publish on NPM
+      - name: Publish to NPM
+        if: steps.compare_versions.outcome == 'success'
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.14] - 2025-01-25
+
+### Added
+
+- Add first CLI for publish mytril !
+
 ## [0.4.13] - 2025-01-02
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mytril",
 	"description": "Mytril Svelte library component for rapidly building modern websites based on Svelte and Sveltekit",
-	"version": "0.4.13",
+	"version": "0.4.14",
 	"author": {
 		"name": "Nycolaide",
 		"email": "[email protected]"

src/components/app/app.legacy.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { innerHeight, innerWidth, scrollOrientation, scrollY } from '$lib/composables/display.js';
+	import Provider from './provider.svelte';
+
+	// state
+	let width = 0;
+	let height = 0;
+	let y = 0;
+
+	$: {
+		if (width > 0) {
+			innerWidth.set(width);
+		}
+		if (height > 0) {
+			innerHeight.set(height);
+		}
+		if (y > 0) {
+			scrollY.set(y);
+
+			if (y > $scrollOrientation.position) {
+				scrollOrientation.set({
+					position: y,
+					orientation: 'down'
+				});
+			} else if (y < $scrollOrientation.position) {
+				scrollOrientation.set({
+					position: y,
+					orientation: 'up'
+				});
+			}
+		}
+	}
+</script>
+
+<svelte:window bind:innerWidth={width} bind:innerHeight={height} bind:scrollY={y} />
+
+<Provider>
+	<slot />
+</Provider>

src/components/app/app.svelte

@@ -1,39 +1,41 @@
 <script lang="ts">
-	import { innerHeight, innerWidth, scrollOrientation, scrollY } from '$lib/composables/display.js';
-	import Provider from './provider.svelte';
+	import { onMount, setContext } from 'svelte';
+	import { createTheme } from '$lib/contexts/theme.svelte.js';
 
-	// state
-	let width = 0;
-	let height = 0;
-	let y = 0;
+	let { children } = $props();
 
-	$: {
-		if (width > 0) {
-			innerWidth.set(width);
-		}
-		if (height > 0) {
-			innerHeight.set(height);
-		}
-		if (y > 0) {
-			scrollY.set(y);
-
-			if (y > $scrollOrientation.position) {
-				scrollOrientation.set({
-					position: y,
-					orientation: 'down'
-				});
-			} else if (y < $scrollOrientation.position) {
-				scrollOrientation.set({
-					position: y,
-					orientation: 'up'
-				});
-			}
-		}
+	const theme = createTheme();
+
+	let value = $state({ count: 0 });
+	setContext('counter', value);
+
+	function toggle() {
+		theme.update(theme.current === 'light' ? 'dark' : 'light');
+		document.documentElement.classList.remove('light', 'dark');
+		document.documentElement.classList.add(theme.current);
 	}
+
+	onMount(() => {
+		theme.init();
+	});
 </script>
 
-<svelte:window bind:innerWidth={width} bind:innerHeight={height} bind:scrollY={y} />
+<svelte:head>
+	<script>
+		{
+			const theme = localStorage.getItem('@mytril:theme');
+
+			document.documentElement.classList.add(
+				theme === 'system'
+					? window.matchMedia('(prefers-color-scheme: dark)').matches
+						? 'dark'
+						: 'light'
+					: theme
+			);
+		}
+	</script>
+</svelte:head>
+
+{@render children()}
 
-<Provider>
-	<slot />
-</Provider>
+<button onclick={() => toggle()}>Change Theme current</button>

src/components/app/app.svelte.ts

@@ -0,0 +1,20 @@
+// import { contextMytrilTheme } from '$lib/contexts/theme.svelte.js';
+import { getAllContexts, setContext } from 'svelte';
+
+export function mytrilContext() {
+	const contexts = getAllContexts();
+
+	// contextMytrilTheme();
+
+	$effect.pre(() => {
+		console.log('contexts', contexts);
+	});
+
+	const inital = (config: object) => {
+		setContext('mytril', config);
+	};
+
+	return {
+		inital
+	};
+}

src/contexts/theme.svelte.ts

@@ -0,0 +1,28 @@
+export const createTheme = () => {
+	let current = $state('light');
+
+	const update = (theme: string) => {
+		current = theme;
+		localStorage.setItem('@mytril:theme', theme);
+	};
+
+	const init = () => {
+		const theme = localStorage.getItem('@mytril:theme');
+
+		if (theme === 'system') {
+			if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+				current = 'dark';
+			else current = 'light';
+		} else if (theme) {
+			current = theme;
+		}
+	};
+
+	return {
+		update,
+		init,
+		get current() {
+			return current;
+		}
+	};
+};