Merge pull request #275 from DarkFlorist/ui-version

Add version id in footer

.github/workflows/deploy.yml

@@ -15,6 +15,11 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
       - name: Install and Build
         run: |
+          VERSION_FILE=app/ts/version.ts
+          GIT_COMMIT_SHA="${{ github.sha }}"
+          GIT_TAG=$(basename "${{ github.ref }}")
+          echo export const gitCommitSha = \"$GIT_COMMIT_SHA\" > $VERSION_FILE
+          echo export const version = \"$VERSION\" >> $VERSION_FILE
           npm install --ignore-scripts
           npm run vendor
           npm run build

.github/workflows/ipfs-deploy.yml

@@ -6,7 +6,7 @@ on:
     branches:
       - master
 
-    # Publish `v1.2.3` tags as releases.
+    # Publish tags starting with `v` as releases.
     tags:
       - v*
 
@@ -29,7 +29,13 @@ jobs:
 
       - name: Build image
         run: |
-          docker build --file Dockerfile --tag $IMAGE_TAG .
+          if [[ "${{ github.ref_type }}" == 'tag' ]]; then
+            GIT_TAG=$(basename "${{ github.ref }}")
+            GIT_COMMIT_SHA=${{ github.sha }}
+            docker build --file Dockerfile --tag $IMAGE_TAG --build-arg GIT_TAG=$GIT_TAG --build-arg GIT_COMMIT_SHA=$GIT_COMMIT_SHA .
+          else
+            docker build --file Dockerfile --tag $IMAGE_TAG .
+          fi
 
       # Uses the `docker/login-action` action to log in to the Container registry registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here.
       - name: Log in to the Container registry

Dockerfile

@@ -4,6 +4,11 @@
 
 FROM node:20-alpine3.19@sha256:e96618520c7db4c3e082648678ab72a49b73367b9a1e7884cf75ac30a198e454 as builder
 
+ARG GIT_TAG
+ENV GIT_TAG=$GIT_TAG
+ARG GIT_COMMIT_SHA
+ENV GIT_COMMIT_SHA=$GIT_COMMIT_SHA
+
 # Install app dependencies
 COPY ./package.json /source/package.json
 COPY ./package-lock.json /source/package-lock.json
@@ -21,6 +26,13 @@ COPY ./tsconfig.json /source/tsconfig.json
 COPY ./app/css/ /source/app/css/
 COPY ./app/img/ /source/app/img/
 COPY ./app/ts/ /source/app/ts/
+RUN if [ -n "$GIT_COMMIT_SHA" ] && [ -n "$GIT_TAG" ]; then \
+		echo "export const gitCommitSha = '$GIT_COMMIT_SHA'" > /source/app/ts/version.ts && \
+		echo "export const version = '$GIT_TAG'" >> /source/app/ts/version.ts; \
+	else \
+		echo "GIT_COMMIT_SHA or GIT_TAG is not set. Skipping copy and build."; \
+	fi
+RUN cat /source/app/ts/version.ts
 RUN npm run build
 
 # --------------------------------------------------------

app/css/index.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
 	line-height: 1.5;
 	/* 1 */
 	-webkit-text-size-adjust: 100%;
@@ -43,26 +45,14 @@ html {
 	/* 3 */
 	tab-size: 4;
 	/* 3 */
-	font-family:
-		ui-sans-serif,
-		system-ui,
-		-apple-system,
-		BlinkMacSystemFont,
-		'Segoe UI',
-		Roboto,
-		'Helvetica Neue',
-		Arial,
-		'Noto Sans',
-		sans-serif,
-		'Apple Color Emoji',
-		'Segoe UI Emoji',
-		'Segoe UI Symbol',
-		'Noto Color Emoji';
+	font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 	/* 4 */
 	font-feature-settings: normal;
 	/* 5 */
 	font-variation-settings: normal;
 	/* 6 */
+	-webkit-tap-highlight-color: transparent;
+	/* 7 */
 }
 
 /*
@@ -133,8 +123,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -143,8 +135,12 @@ samp,
 pre {
 	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 	/* 1 */
-	font-size: 1em;
+	font-feature-settings: normal;
 	/* 2 */
+	font-variation-settings: normal;
+	/* 3 */
+	font-size: 1em;
+	/* 4 */
 }
 
 /*
@@ -213,6 +209,8 @@ textarea {
 	/* 1 */
 	line-height: inherit;
 	/* 1 */
+	letter-spacing: inherit;
+	/* 1 */
 	color: inherit;
 	/* 1 */
 	margin: 0;
@@ -236,9 +234,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
 	-webkit-appearance: button;
 	/* 1 */
 	background-color: transparent;
@@ -594,16 +592,6 @@ input[type='password']:autofill {
 	margin-bottom: 10%;
 }
 
-.my-2 {
-	margin-top: 0.5rem;
-	margin-bottom: 0.5rem;
-}
-
-.my-3 {
-	margin-top: 0.75rem;
-	margin-bottom: 0.75rem;
-}
-
 .mb-1 {
 	margin-bottom: 0.25rem;
 }
@@ -636,6 +624,10 @@ input[type='password']:autofill {
 	display: block;
 }
 
+.inline-block {
+	display: inline-block;
+}
+
 .inline {
 	display: inline;
 }
@@ -1012,6 +1004,10 @@ input[type='password']:autofill {
 	border-radius: 9999px;
 }
 
+.rounded-sm {
+	border-radius: 0.125rem;
+}
+
 .border {
 	border-width: 1px;
 }
@@ -1202,11 +1198,6 @@ input[type='password']:autofill {
 	padding-bottom: 1rem;
 }
 
-.py-1 {
-	padding-top: 0.25rem;
-	padding-bottom: 0.25rem;
-}
-
 .pl-4 {
 	padding-left: 1rem;
 }
@@ -1295,6 +1286,11 @@ input[type='password']:autofill {
 	color: rgb(245 158 11 / var(--tw-text-opacity));
 }
 
+.text-black {
+	--tw-text-opacity: 1;
+	color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
 	--tw-text-opacity: 1;
 	color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1635,6 +1631,11 @@ input[type='password']:autofill {
 	display: none;
 }
 
+.has-\[\:not\(\:placeholder-shown\)\:invalid\]\:border-red-400:has(:not(:placeholder-shown):invalid) {
+	--tw-border-opacity: 1;
+	border-color: rgb(248 113 113 / var(--tw-border-opacity));
+}
+
 .modified\:enabled\:invalid\:border-red-400:invalid:not(:disabled):not([data-pristine]) {
 	--tw-border-opacity: 1;
 	border-color: rgb(248 113 113 / var(--tw-border-opacity));

app/ts/components/MainFooter.tsx

@@ -1,3 +1,5 @@
+import { gitCommitSha, version } from "../version.js"
+
 export const MainFooter = () => {
 	return (
 		<div class='p-4'>
@@ -21,7 +23,7 @@ export const MainFooter = () => {
 
 			<div class='text-white/50 text-center'>
 				<div class='mt-8'>
-					Lunaria by{' '}
+					Lunaria <span title={gitCommitSha} class='inline-block text-xs bg-white/50 text-black px-1 rounded-sm'>{version}</span> by{' '}
 					<a class='text-white hover:underline' href='https://dark.florist'>
 						Dark Florist
 					</a>

app/ts/version.ts

@@ -0,0 +1,2 @@
+export const gitCommitSha = 'development'
+export const version = 'dev'