add footer to ui with commit hash

frontend/src/components/layout/RightColumn/RightColumn.scss

@@ -1,11 +0,0 @@
-@use '../../../tailwind-values.scss' as tailwind;
-
-.right-column-wrapper {
-  height: calc(100vh - 20px);
-}
-
-@media (max-width: tailwind.$xl-breakpoint) {
-  .right-column-wrapper {
-    height: calc(100vh - 3.9rem);
-  }
-}

frontend/src/components/layout/RightColumn/RightColumn.tsx

@@ -1,7 +1,6 @@
-import { component$, useStylesScoped$ } from '@builder.io/qwik'
+import { component$ } from '@builder.io/qwik'
 import { Link, useLocation } from '@builder.io/qwik-city'
 import { WildebeestLogo } from '~/components/MastodonLogo'
-import styles from './RightColumn.scss?inline'
 
 type LinkConfig = {
 	iconName: string
@@ -11,7 +10,6 @@ type LinkConfig = {
 }
 
 export default component$(() => {
-	useStylesScoped$(styles)
 	const location = useLocation()
 
 	const renderNavLink = ({ iconName, linkText, linkTarget, linkActiveRegex }: LinkConfig) => {
@@ -40,8 +38,8 @@ export default component$(() => {
 	const aboutLink = { iconName: 'fa-ellipsis', linkText: 'About', linkTarget: '/about', linkActiveRegex: /^\/about/ }
 
 	return (
-		<div class="bg-wildebeest-600 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-wildebeest-200">
-			<div>
+		<div class="bg-wildebeest-600 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-wildebeest-200 flex-1">
+			<div class="sticky top-[3.9rem]">
 				<div class="xl:p-4">
 					<a class="no-underline hidden xl:flex items-center" href="https://mastodon.social">
 						<WildebeestLogo size="medium" />

frontend/src/routes/layout.tsx

@@ -6,6 +6,7 @@ import LeftColumn from '../components/layout/LeftColumn/LeftColumn'
 import RightColumn from '../components/layout/RightColumn/RightColumn'
 import { InstanceConfigContext } from '~/utils/instanceConfig'
 import { WildebeestLogo } from '~/components/MastodonLogo'
+import { getCommitHash } from '~/utils/getCommitHash'
 
 const pathsWithoutColumns = ['/first-login', '/start-instance']
 
@@ -38,7 +39,7 @@ export default component$(() => {
 					</a>
 				</header>
 			)}
-			<main class="h-full flex justify-center main-wrapper sticky top-[3.9rem]">
+			<main class="h-full flex justify-center main-wrapper top-[3.9rem]">
 				{showHeaderAndColumns && (
 					<div class="w-fit md:w-72 hidden xl:block mx-[10px]">
 						<div class="sticky top-[10px]">
@@ -52,13 +53,16 @@ export default component$(() => {
 					</div>
 				</div>
 				{showHeaderAndColumns && (
-					<div class="w-fit md:w-72 border-l xl:border-l-0 border-wildebeest-700 xl:mx-[10px]">
-						<div class="sticky top-[3.9rem] xl:top-[10px]">
+					<div class="w-fit md:w-72 border-l xl:border-l-0 border-wildebeest-700 xl:mx-[10px] flex flex-col">
+						<div class="xl:top-[10px] flex-1 flex flex-col">
 							<RightColumn />
 						</div>
 					</div>
 				)}
 			</main>
+			<footer class="flex justify-end p-2 bg-wildebeest-600 border-t border-wildebeest-700 xl:bg-transparent xl:mt-10 xl:mx-6">
+				<p class="text-sm text-wildebeest-500">v.{getCommitHash()}</p>
+			</footer>
 		</>
 	)
 })

frontend/src/utils/getCommitHash.ts

@@ -0,0 +1,7 @@
+declare const COMMIT_INFO: {
+	hash: string
+}
+
+export function getCommitHash(): string {
+	return COMMIT_INFO.hash
+}

frontend/vite.config.ts

@@ -2,9 +2,15 @@ import { defineConfig } from 'vite'
 import { qwikVite } from '@builder.io/qwik/optimizer'
 import { qwikCity } from '@builder.io/qwik-city/vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import { execSync } from 'child_process'
+
+const commitHash = execSync('git rev-parse --short HEAD').toString().replace(/\n/g, '')
 
 export default defineConfig(() => {
 	return {
+		define: {
+			COMMIT_INFO: JSON.stringify({ hash: commitHash }),
+		},
 		plugins: [
 			qwikCity({
 				trailingSlash: false,