Merge pull request #210 from n0th1ng-else/dotenv

Author: n0th1ng-else

.env.dev

@@ -0,0 +1,13 @@
+DIST_ROOT=
+NODE_ENV=
+SELF_URL=
+COMMIT_HASH=
+APP_VERSION=
+GH_AUTHOR_LOGIN=
+GH_AUTHOR_LINKED_IN=
+GH_AUTHOR_TELEGRAM=
+GH_AUTHOR_MEDIUM=
+GH_AUTHOR_HABR=
+GH_AUTHOR_NPM=
+GH_AUTHOR_TWITTER=
+GH_AUTHOR_DEVTO=

.github/workflows/release.yml

@@ -82,7 +82,18 @@ jobs:
           tags: |
             ghcr.io/${{ github.actor }}/n0th1ng-else.github.io/n0th1ng-else-blog:latest
             ghcr.io/${{ github.actor }}/n0th1ng-else.github.io/n0th1ng-else-blog:${{ github.sha }}
-          build-args: APP_VERSION=${{ needs.version.outputs.version }},COMMIT_HASH=${{ env.APP_VERSION }},SELF_URL=${{ secrets.SELF_URL }},GH_AUTHOR_LOGIN=${{ secrets.GH_AUTHOR_LOGIN }},GH_AUTHOR_LINKED_IN=${{ secrets.GH_AUTHOR_LINKED_IN }},GH_AUTHOR_TELEGRAM=${{ secrets.GH_AUTHOR_TELEGRAM }},GH_AUTHOR_MEDIUM=${{ secrets.GH_AUTHOR_MEDIUM }},GH_AUTHOR_HABR=${{ secrets.GH_AUTHOR_HABR }},GH_AUTHOR_NPM=${{ secrets.GH_AUTHOR_NPM }},GH_AUTHOR_TWITTER=${{ secrets.GH_AUTHOR_TWITTER }},GH_AUTHOR_DEVTO=${{ secrets.GH_AUTHOR_DEVTO }}
+          build-args: |
+            APP_VERSION=${{ needs.version.outputs.version }}
+            COMMIT_HASH=${{ github.sha }}
+            SELF_URL=${{ secrets.SELF_URL }}
+            GH_AUTHOR_LOGIN=${{ secrets.GH_AUTHOR_LOGIN }}
+            GH_AUTHOR_LINKED_IN=${{ secrets.GH_AUTHOR_LINKED_IN }}
+            GH_AUTHOR_TELEGRAM=${{ secrets.GH_AUTHOR_TELEGRAM }}
+            GH_AUTHOR_MEDIUM=${{ secrets.GH_AUTHOR_MEDIUM }}
+            GH_AUTHOR_HABR=${{ secrets.GH_AUTHOR_HABR }}
+            GH_AUTHOR_NPM=${{ secrets.GH_AUTHOR_NPM }}
+            GH_AUTHOR_TWITTER=${{ secrets.GH_AUTHOR_TWITTER }}
+            GH_AUTHOR_DEVTO=${{ secrets.GH_AUTHOR_DEVTO }}
 
   production:
     runs-on: ubuntu-latest

package-lock.json

@@ -18,6 +18,7 @@
 		"@typescript-eslint/eslint-plugin": "5.39.0",
 		"@typescript-eslint/parser": "5.39.0",
 		"cross-spawn": "7.0.3",
+		"dotenv-cli": "^6.0.0",
 		"eslint": "8.24.0",
 		"eslint-config-prettier": "8.5.0",
 		"eslint-plugin-svelte3": "4.0.0",
@@ -48,14 +49,15 @@
 	},
 	"scripts": {
 		"meta": "node links.js",
+		"meta:dev": "dotenv npm run meta",
 		"version": "node version.js",
 		"format": "prettier --write",
 		"format:check": "prettier --check .",
 		"lint": "eslint",
 		"lint:all": "eslint .",
 		"build": "vite build",
 		"validate": "svelte-check",
-		"dev": "vite dev",
+		"dev": "dotenv vite dev",
 		"preview": "vite preview",
 		"start": "node dist"
 	},

package.json

@@ -16,14 +16,16 @@
 
 	const icon = type === 'up' ? iconUp : iconLeft;
 
+	const control = false;
+
 	let isDark = isDarkTheme(defaultTheme);
 
 	const unsubscribeTheme = onThemeChange(th => (isDark = isDarkTheme(th)));
 
 	onDestroy(() => unsubscribeTheme());
 </script>
 
-<Button secondary on:click="{onClick}">
+<Button secondary on:click="{onClick}" control="{control}">
 	<img class="btn-logo {size}" class:l="{!isDark}" class:d="{isDark}" src="{icon}" alt="" />
 </Button>
 

src/lib/browser/components/Arrow.svelte

@@ -17,7 +17,7 @@
 	const host = getServiceTitle(article.service);
 	const image = article.meta.image;
 
-	const btnText = host ? `Read more on ${host}` : 'Read More';
+	const btnText = host ? `Read more on ${host}` : 'Read more';
 </script>
 
 <section>
@@ -40,7 +40,7 @@
 			</SubTitle>
 		</div>
 		<p class="action">
-			<Button hint="Read more" href="{url}" disabled="{readonly}">{btnText}</Button>
+			<Button hint="Read more" href="{url}" disabled="{readonly}" external>{btnText}</Button>
 		</p>
 	</div>
 </section>

src/lib/browser/components/ArticlePreview.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onDestroy, createEventDispatcher } from 'svelte';
 	import { onThemeChange, isDarkTheme, defaultTheme } from '$lib/browser/stores/theme';
+	import Link from './Link.svelte';
 
 	let isDark = isDarkTheme(defaultTheme);
 
@@ -20,41 +21,49 @@
 
 	export let icon = '';
 
-	export let hint = '';
+	export let hint: string | undefined = undefined;
 
 	export let disabled = false;
 
 	export let href = '';
+
+	export let external = false;
+
+	export let control = true;
 </script>
 
 {#if href}
-	<a
-		class:l="{!isDark}"
-		class:d="{isDark}"
-		class:secondary
-		class:inline
-		class="ui-button"
+	<Link
 		on:click="{onClick}"
-		title="{hint}"
-		href="{href}"
+		external="{external}"
+		url="{href}"
+		hint="{hint}"
+		raw
+		inline
+		control="{control}"
 	>
-		<span class="ui-button__text">
-			<slot />
+		<span class:l="{!isDark}" class:d="{isDark}" class:secondary class:inline class="ui-button">
+			<span class="ui-button__text">
+				<slot />
+			</span>
+			{#if icon}
+				<img src="{icon}" class="ui-button__icon" alt="{hint}" />
+			{/if}
 		</span>
-		{#if icon}
-			<img src="{icon}" class="ui-button__icon" alt="{hint}" />
-		{/if}
-	</a>
+	</Link>
 {:else}
 	<button
+		class="ui-button"
 		class:l="{!isDark}"
 		class:d="{isDark}"
 		class:secondary
 		class:inline
-		class="ui-button"
+		class:no-print="{!control}"
 		on:click="{onClick}"
 		title="{hint}"
 		disabled="{disabled}"
+		aria-hidden="{control ? undefined : 'true'}"
+		tabindex="{control ? undefined : -1}"
 	>
 		<span class="ui-button__text">
 			<slot />
@@ -99,6 +108,12 @@
 			padding: 0;
 		}
 
+		@media print {
+			&.no-print {
+				display: none;
+			}
+		}
+
 		&.l {
 			@include button-style($l-primary, $l-accent);
 		}
@@ -110,7 +125,6 @@
 		&__text {
 			@include set-font();
 			font-size: $font-size-small;
-			text-transform: capitalize;
 		}
 
 		&__icon {

src/lib/browser/ui/Button.svelte

@@ -38,17 +38,17 @@
 	<div class="ui-card__actions ui-card__section">
 		{#if item.url}
 			<div class="ui-card__action">
-				<Button href="{item.url}" disabled="{readonly}">Web</Button>
+				<Button href="{item.url}" disabled="{readonly}" external>Website</Button>
 			</div>
 		{/if}
 		{#if item.source}
 			<div class="ui-card__action">
-				<Button href="{item.source}" disabled="{readonly}">Source</Button>
+				<Button href="{item.source}" disabled="{readonly}" external>Source</Button>
 			</div>
 		{/if}
 		{#if item.registry}
 			<div class="ui-card__action">
-				<Button href="{item.registry}" disabled="{readonly}">Package</Button>
+				<Button href="{item.registry}" disabled="{readonly}" external>Package</Button>
 			</div>
 		{/if}
 	</div>

src/lib/browser/ui/Card.svelte

@@ -1,11 +1,25 @@
 <script lang="ts">
-	import { onDestroy } from 'svelte';
+	import { createEventDispatcher, onDestroy } from 'svelte';
 	import { onThemeChange, isDarkTheme, defaultTheme } from '$lib/browser/stores/theme';
 
 	export let external = false;
+
 	export let inline = false;
+
 	export let url = 'javascript:void(0);';
 
+	export let hint: string | undefined = undefined;
+
+	export let raw = false;
+
+	export let control = true;
+
+	const dispatch = createEventDispatcher();
+
+	const onClick = (): void => {
+		dispatch('click');
+	};
+
 	let isDark = isDarkTheme(defaultTheme);
 
 	const unsubscribeTheme = onThemeChange(th => (isDark = isDarkTheme(th)));
@@ -16,17 +30,32 @@
 {#if external}
 	<a
 		class="ui-link"
+		class:filled="{!raw}"
 		class:inline
 		class:l="{!isDark}"
 		class:d="{isDark}"
+		on:click="{onClick}"
+		aria-hidden="{control ? undefined : 'true'}"
+		tabindex="{control ? undefined : -1}"
 		href="{url}"
+		title="{hint}"
 		target="_blank"
 		rel="noreferrer noopener"
 	>
 		<slot />
 	</a>
 {:else}
-	<a class="ui-link" class:inline class:l="{!isDark}" class:d="{isDark}" href="{url}">
+	<a
+		class="ui-link"
+		class:filled="{!raw}"
+		class:l="{!isDark}"
+		class:d="{isDark}"
+		class:inline
+		class:no-print="{!control}"
+		on:click="{onClick}"
+		href="{url}"
+		title="{hint}"
+	>
 		<slot />
 	</a>
 {/if}
@@ -57,7 +86,14 @@
 		&.inline {
 			margin: 0;
 		}
+		@media print {
+			&.no-print {
+				display: none;
+			}
+		}
+	}
 
+	.filled {
 		&.l {
 			@include link-style($l-tertiary, $l-accent);
 		}

src/lib/browser/ui/Link.svelte

@@ -82,7 +82,7 @@
 	<List>
 		<ListItem>Blazing fast with Svelte</ListItem>
 		<ListItem>Tricky deployment workflow to make it working</ListItem>
-		<ListItem>Baking stuff on my MacBook Pro 2020</ListItem>
+		<ListItem>Baking stuff on my MacBook Pro 2021</ListItem>
 	</List>
 </article>