<template>
	<main>
		<h1>
			Build Info
		</h1>
		<dl>
			<dt>Builder:</dt><dd>{{ builder }}</dd>
			<dt>Git Ref:</dt><dd>{{ gitRef }}</dd>
			<dt>Git Commit:</dt><dd>{{ gitCommit }}</dd>
			<dt>App mode:</dt><dd>{{ appMode }}</dd>
			<dt>Base URL:</dt><dd>{{ baseUrl }}</dd>
			<dt>NODE_ENV:</dt><dd>{{ nodeEnv }}</dd>
			<dt>Server Side:</dt><dd data-allow-mismatch="text">{{ serverSide }}</dd>
			<dt>Dev server:</dt><dd>{{ devServer }}</dd>
			<dt>Prerender:</dt><dd data-allow-mismatch="text">{{ prerender }}</dd>
		</dl>
	</main>
</template>

<script setup lang="ts">
import { BUILDER, GIT_REF, GIT_SHA } from '~/shared/utils/build-info';

useHead({
	title: "Build Info",
});

// App specific
const builder = BUILDER;
const gitRef = GIT_REF;
const gitCommit = GIT_SHA;

// Vite specific
const appMode = import.meta.env.MODE;
const baseUrl = import.meta.env.BASE_URL;
const prod = import.meta.env.PROD;
const dev = import.meta.env.DEV;
const nodeEnv = prod ? "production" : dev ? "development" : "unknown";
const serverSide = import.meta.env.SSR;

// Nuxt Specific
const devServer = import.meta.dev;
const prerender = import.meta.prerender;
</script>

<style scoped>
dl {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.5em;
}
dd {
	white-space: pre-wrap;
}
</style>
