Added toggle for 'repointing' as well as (slightly) better documentation and homepage

README.md

@@ -1,3 +1,15 @@
 # Motto
 
-Static file beautifier
+Motto presents files from a static file server in a more friendly way
+
+## Documentation
+
+### Configuration
+
+- `ROOT_URL=(url)` - the static file server instance to get files from
+- `ENABLE_REPOINTING=(true|default:false)` - enable [repointing](#Repointing)
+
+### Repointing
+
+If enabled, repointing allows a url to be specified in the `root` query parameter that will override
+the default url of the static file server

src/app/[...file]/page.tsx

@@ -18,23 +18,24 @@ function get_path(file: string[]) {
 	return file.join("/");
 }
 
-function get_root(search_params: SearchParams) {
+function get_root(enable_repointing: boolean, search_params: SearchParams) {
-	return search_params['root'] ?? 'raw.monodon.me';
+	return `https://${search_params['root'] ?? 'raw.monodon.me'}/`;
 }
 
 export async function generateMetadata(
 	{ params, searchParams }: Props,
 ): Promise<Metadata> {
 	return {
-		title: `${get_path(params.file)} | ${get_root(searchParams)}`,
+		title: `${get_path(params.file)} | ${get_root(true, searchParams)}`,
 	};
 }
 
 export default async function Page({
 	params, searchParams
 }: Props) {
+	const enable_repointing = process.env.ENABLE_REPOINTING == 'true';
 	const path = get_path(params.file);
-	const root = `https://${get_root(searchParams)}/`;
+	const root = get_root(enable_repointing, searchParams);
 	const full = `${root}${path}`;
 
 	const download_ttys = [
@@ -68,7 +69,10 @@ export default async function Page({
 				<div className={style.download_tty_group}>
 					{download_ttys.map((text, index) => <Copy key={index} text={text}>{text}</Copy>)}
 				</div>
-				<Content src={`${root}${path}`} />
+				{(!enable_repointing && searchParams['root'] != undefined) ?
+					<p>Error: this instance of Motto does not have repointing enabled</p> :
+					<Content src={`${root}${path}`} />
+				}
 			</div>
 		</div>
 	);

src/app/globals.css.ts

@@ -10,3 +10,12 @@ globalStyle('html, body', {
 	color:           colors.foreground,
 	fontFamily:      'sans-serif',
 });
+
+globalStyle('a:link, a:visited', {
+	color:          colors.accent,
+	textDecoration: 'none',
+});
+
+globalStyle('a:hover', {
+	textDecorationLine: 'underline',
+});

src/app/page.css.ts

@@ -0,0 +1,38 @@
+import { style } from '@vanilla-extract/css';
+
+import * as colors from './colors.css'
+
+export const center = style({
+	display:        'flex',
+	justifyContent: 'center',
+	width:          '100%',
+	height:         '100%',
+});
+
+export const version = style({
+	float: 'right',
+	color: colors.foreground2,
+});
+
+export const content = style({
+	margin:       '1em',
+	height:       'max-content',
+	maxWidth:     '50em',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			marginTop: '5em',
+		},
+	},
+});
+
+export const title = style({
+	width:         '100%',
+	borderBottom:  `1px solid ${colors.background2}`,
+	paddingBottom: '0.15em',
+});
+
+export const description = style({
+	
+});
+
+

src/app/page.tsx

@@ -1,8 +1,21 @@
+import * as style from './page.css';
+
 export default function App() {
+	const supports_repointing = process.env.ENABLE_REPOINTING == 'true';
+	console.log(supports_repointing);
 	return (
-		<div>
+		<div className={style.center}>
-			<h1>Dev - Motto</h1>
+			<div className={style.content}>
-			<p>Motto is a WIP</p>
+				<h1 className={style.title}>Motto<span className={style.version}>v0.0.1-dev</span></h1>
+				<p className={style.description}>
+					Motto is a static file server beautifier. <a href="https://forge.monodon.me/Gnarwhal/motto/">Click here</a> for more information.
+				</p>
+				<p>This instance is currently pointed to <a href={process.env.ROOT_URL}>{process.env.ROOT_URL}</a> {
+					supports_repointing ?
+					<>but supports <a href="https://forge.monodon.me/Gnarwhal/motto#Repointing">repointing.</a></> :
+					<>and does not support <a href="https://forge.monodon.me/Gnarwhal/motto#Repointing">repointing.</a></>
+				}</p>
+			</div>
 		</div>
 	);
 }