Updated dependencies

.forgejo/workflows/deploy.yml

@@ -26,6 +26,7 @@ jobs:
         run: npm run build
         
       - name: Deploy
-        uses: https://itsblue.dev/actions/codeberg-pages-deploy@v1
+        uses: https://forge.monodon.me/pages/codeberg-pages-deploy@v1
         with:
           folder: ./out
+          force: true

package.json

@@ -9,11 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/css": "^1.15.5",
     "@vanilla-extract/next-plugin": "^2.3.2",
-    "next": "14.0.3",
+    "next": "^14.2.13",
-    "react": "^18",
+    "react": "^18.3.1",
-    "react-dom": "^18"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/airstrip_one/0/components/BeegText.css.ts

@@ -1,10 +1,10 @@
-import { style } from '@vanilla-extract/css'
+import { style } from '@vanilla-extract/css';
 
 export const beeg_container = style({
 	position: 'relative',
 	width:    'max-content',
 	height:   'max-content',
-})
+});
 
 const beeg = style({
 	position: 'absolute',
@@ -14,21 +14,21 @@ const beeg = style({
 			fontSize: '3em',
 		}
 	}
-})
+});
 
 export const beeg_dummy = style([beeg, {
 	position: 'static',
 	color:    'transparent',
-}])
+}]);
 
 export const beeg_foreground = style([beeg, {
 	background:     'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,255,0,1) 16%, rgba(0,255,0,1) 33%, rgba(0,255,255,1) 50%, rgba(0,0,255,1) 66%, rgba(255,0,255,1) 83%, rgba(255,0,0,1) 100%)',
 	backgroundClip: 'text',
 	color:          'transparent',
-}])
+}]);
 
 export const beeg_background = style([beeg, {
 	left:           '-0.1em',
 	top:            ' 0.1em',
 	color:          'black',
-}])
+}]);

src/app/airstrip_one/0/components/BeegText.tsx

@@ -3,7 +3,7 @@ import {
 	beeg_dummy,
 	beeg_foreground,
 	beeg_background,
-} from './BeegText.css'
+} from './BeegText.css';
 
 export default function BeegText({ children }: { children: React.ReactNode }) {
 	return (
@@ -12,5 +12,5 @@ export default function BeegText({ children }: { children: React.ReactNode }) {
 			<p className={beeg_foreground}>{children}</p>
 			<p className={beeg_dummy}     >{children}</p>
 		</div>
-	)
+	);
 }

src/app/airstrip_one/0/components/Input.css.ts

@@ -0,0 +1,23 @@
+import { style } from "@vanilla-extract/css";
+
+export const message_style = style({
+	boxSizing:       'border-box',
+	width:           '100%',
+	height:          'max-content',
+	margin:          0,
+	border:          'none',
+	padding:         '0.5em',
+	fontSize:        '1em',
+	color:           'magenta',
+	backgroundColor: 'black',
+	overflowWrap:    'break-word',
+	textAlign:       'center',
+	':focus': {
+		outline: 'none',
+	},
+	'@media': {
+		'screen and (min-width: 768px)': {
+			fontSize: '2em'
+		}
+	}
+});

src/app/airstrip_one/0/components/Input.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useEffect, useRef } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+import { message_style } from '../components/Input.css';
+
+export default function Input() {
+	const search_params = useSearchParams();
+	const input_ref = useRef<HTMLParagraphElement>(null);
+
+	function set_message(message: string) {
+		const encoded = btoa(message);
+		const new_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?e=${encoded}`;
+		window.history.replaceState('', '', new_url);
+	}
+
+	const message = search_params.get('e') ?
+		atob(search_params.get('e')!) :
+		(
+			search_params.get('m')
+			?? 'At the apex of the pyramid comes Big Brother. Big Brother is infallible and all-powerful. Every success, every achievement, every victory, every scientific discovery, all knowledge, all wisdom, all happiness, all virtue, are held to issue directly from his leadership and inspiration.'
+		);
+
+	useEffect(() => {
+		set_message(message);
+	});
+
+	return (
+		<p
+			ref={input_ref}
+			className={message_style}
+			onInput={() => set_message(input_ref.current!.textContent ?? '')}
+			contentEditable
+		>
+			{message}
+		</p>
+	);
+}

src/app/airstrip_one/0/components/Marquee.css.ts

@@ -1,4 +1,4 @@
-import { style, keyframes } from '@vanilla-extract/css'
+import { style, keyframes } from '@vanilla-extract/css';
 
 export const marquee_container = style({
 	display:         'flex',
@@ -6,12 +6,12 @@ export const marquee_container = style({
 	height:          'max-content',
 	overflow:        'hidden',
 	backgroundColor: 'black',
-})
+});
 
 const scroll_marquee = keyframes({
 	'0%':   { left: '   0%' },
 	'100%': { left: '-100%' },
-})
+});
 
 export const marquee_content = style({
 	position:                'relative',
@@ -27,4 +27,4 @@ export const marquee_content = style({
 			fontSize: '1em',
 		}
 	}
-})
+});

src/app/airstrip_one/0/components/Marquee.tsx

@@ -1,7 +1,7 @@
 import {
 	marquee_container,
 	marquee_content,
-} from './Marquee.css'
+} from './Marquee.css';
 
 export default function Marquee({ children }: { children: React.ReactNode }) {
 	return (
@@ -9,5 +9,5 @@ export default function Marquee({ children }: { children: React.ReactNode }) {
 			<p className={marquee_content}>{children}</p>
 			<p className={marquee_content}>{children}</p>
 		</div>
-	)
+	);
 }

src/app/airstrip_one/0/ministry_of_truth/page.css.ts

@@ -14,38 +14,16 @@ export const center_vertical = style({
 			width: '50%',
 		}
 	}
-})
+});
 
 export const border = style({
 	width:        '61%',
 	marginBottom: '4em',
 	border:       '0.3em solid purple',
-})
+});
 
 export const big_brother_style = style({
 	display: 'block',
 	width:   '100%',
 	height:  'auto',
-})
+});
-
-export const message_style = style({
-	boxSizing:       'border-box',
-	width:           '100%',
-	height:          'max-content',
-	margin:          0,
-	border:          'none',
-	padding:         '0.5em',
-	fontSize:        '1em',
-	color:           'magenta',
-	backgroundColor: 'black',
-	overflowWrap:    'break-word',
-	textAlign:       'center',
-	':focus': {
-		outline: 'none',
-	},
-	'@media': {
-		'screen and (min-width: 768px)': {
-			fontSize: '2em'
-		}
-	}
-})

src/app/airstrip_one/0/ministry_of_truth/page.tsx

@@ -1,47 +1,26 @@
-'use client'
+import React from 'react';
-
+import Image from 'next/image';
-import { useEffect, useRef } from 'react'
+import BeegText from '../components/BeegText';
-import Image from 'next/image'
+import Marquee from '../components/Marquee';
-import { useSearchParams } from 'next/navigation'
+import Input from '../components/Input';
-import BeegText from '../components/BeegText'
-import Marquee from '../components/Marquee'
 import {
 	center_vertical,
 	border,
 	big_brother_style,
-	message_style,
+} from './page.css';
-} from './page.css'
 
 export default function Home() {
-	const search_params = useSearchParams()
-	const input_ref = useRef<HTMLParagraphElement>(null)
-
-	const set_message = (message: string) => {
-		const encoded = btoa(message)
-		const new_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?e=${encoded}`
-		window.history.replaceState('', '', new_url)
-	}
-
-	const message = search_params.get('e') ?
-		atob(search_params.get('e')!) :
-		(
-			search_params.get('m')
-			?? 'At the apex of the pyramid comes Big Brother. Big Brother is infallible and all-powerful. Every success, every achievement, every victory, every scientific discovery, all knowledge, all wisdom, all happiness, all virtue, are held to issue directly from his leadership and inspiration.'
-		)
-
-	useEffect(() => {
-		set_message(message)
-	})
-
 	return (
 		<div className={center_vertical}>
 			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
 			<BeegText>THE MINISTRY OF TRUTH</BeegText>
 			<div className={border}>
 				<Image className={big_brother_style} width={400} height={300} src='/big_brother_screen.gif' alt='Big Brother' />
-				<p ref={input_ref} className={message_style} onInput={() => set_message(input_ref.current!.textContent ?? '')} contentEditable>{message}</p>
+				<React.Suspense>
+					<Input />
+				</React.Suspense>
 			</div>
 			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
 		</div>
-	)
+	);
 }

src/app/airstrip_one/0/page.css.ts

@@ -13,7 +13,7 @@ export const center_vertical = style({
 			width: '50%',
 		}
 	}
-})
+});
 
 export const big_brother_style = style({
 	width:  '60%',
@@ -24,7 +24,7 @@ export const big_brother_style = style({
 			width: '40%',
 		}
 	}
-})
+});
 
 export const cats_div = style({
 	display:        'flex',
@@ -32,21 +32,21 @@ export const cats_div = style({
 	justifyContent: 'space-between',
 	width:          '100%',
 	borderTop:      '0.3em solid purple'
-})
+});
 
 export const subcats_div = style({
 	display:        'flex',
 	justifyContent: 'flex-start',
 	width:          '50%',
 	height:         'max-content',
-})
+});
 
 export const reverse_subcats_div = style([subcats_div, {
 	transform: 'scale(-1, 1)'
-}])
+}]);
 
 export const cat = style({
 	display: 'block',
 	width:   '25%',
 	height:  'auto',
-})
+});

src/app/global.css.ts

@@ -1,4 +1,4 @@
-import { globalStyle } from "@vanilla-extract/css"
+import { globalStyle } from "@vanilla-extract/css";
 
 export const global_style = globalStyle('html,body', {
 	margin:           '0',
@@ -6,4 +6,4 @@ export const global_style = globalStyle('html,body', {
 	height:           '100%',
 	backgroundImage:  'url("/background.png")',
 	backgroundRepeat: 'repeat'
-})
+});

src/app/layout.tsx

@@ -1,11 +1,11 @@
-import type { Metadata } from 'next'
+import type { Metadata } from 'next';
-import localFont from 'next/font/local'
+import localFont from 'next/font/local';
-import './global.css'
+import './global.css';
 
 const comic_sans = localFont({
 	src:    './comic.ttf',
 	weight: '100',
-})
+});
 
 export default function RootLayout({
 	children,
@@ -16,5 +16,5 @@ export default function RootLayout({
 		<html lang="en">
 			<body className={comic_sans.className}>{children}</body>
 		</html>
-	)
+	);
 }