Updated dependencies
All checks were successful
/ deploy (push) Successful in 2m37s

This commit is contained in:
Gnarwhal 2024-09-26 21:35:11 +00:00
parent 477907aa50
commit c38898efce
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
16 changed files with 3378 additions and 7452 deletions

View file

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

3679
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -9,11 +9,11 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@vanilla-extract/css": "^1.14.0", "@vanilla-extract/css": "^1.15.5",
"@vanilla-extract/next-plugin": "^2.3.2", "@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": { "devDependencies": {
"@types/node": "^20", "@types/node": "^20",

File diff suppressed because it is too large Load diff

View file

@ -1,10 +1,10 @@
import { style } from '@vanilla-extract/css' import { style } from '@vanilla-extract/css';
export const beeg_container = style({ export const beeg_container = style({
position: 'relative', position: 'relative',
width: 'max-content', width: 'max-content',
height: 'max-content', height: 'max-content',
}) });
const beeg = style({ const beeg = style({
position: 'absolute', position: 'absolute',
@ -14,21 +14,21 @@ const beeg = style({
fontSize: '3em', fontSize: '3em',
} }
} }
}) });
export const beeg_dummy = style([beeg, { export const beeg_dummy = style([beeg, {
position: 'static', position: 'static',
color: 'transparent', color: 'transparent',
}]) }]);
export const beeg_foreground = style([beeg, { 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%)', 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', backgroundClip: 'text',
color: 'transparent', color: 'transparent',
}]) }]);
export const beeg_background = style([beeg, { export const beeg_background = style([beeg, {
left: '-0.1em', left: '-0.1em',
top: ' 0.1em', top: ' 0.1em',
color: 'black', color: 'black',
}]) }]);

View file

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

View file

@ -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'
}
}
});

View file

@ -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>
);
}

View file

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

View file

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

View file

@ -14,38 +14,16 @@ export const center_vertical = style({
width: '50%', width: '50%',
} }
} }
}) });
export const border = style({ export const border = style({
width: '61%', width: '61%',
marginBottom: '4em', marginBottom: '4em',
border: '0.3em solid purple', border: '0.3em solid purple',
}) });
export const big_brother_style = style({ export const big_brother_style = style({
display: 'block', display: 'block',
width: '100%', width: '100%',
height: 'auto', 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'
}
}
})

View file

@ -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 { import {
center_vertical, center_vertical,
border, border,
big_brother_style, big_brother_style,
message_style, } from './page.css';
} from './page.css'
export default function Home() { 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 ( return (
<div className={center_vertical}> <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> <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> <BeegText>THE MINISTRY OF TRUTH</BeegText>
<div className={border}> <div className={border}>
<Image className={big_brother_style} width={400} height={300} src='/big_brother_screen.gif' alt='Big Brother' /> <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> </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> <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> </div>
) );
} }

View file

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

View file

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

View file

@ -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({ const comic_sans = localFont({
src: './comic.ttf', src: './comic.ttf',
weight: '100', weight: '100',
}) });
export default function RootLayout({ export default function RootLayout({
children, children,
@ -16,5 +16,5 @@ export default function RootLayout({
<html lang="en"> <html lang="en">
<body className={comic_sans.className}>{children}</body> <body className={comic_sans.className}>{children}</body>
</html> </html>
) );
} }

3268
yarn.lock Normal file

File diff suppressed because it is too large Load diff