ada/werefox-obs-layouts
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Templated out theme.

Browse source
This commit is contained in:
Alexis Werefox 2022-01-21 03:49:30 +00:00
parent c913a91269
commit e9d4e3e098
5 changed files with 124 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Dockerfile
View file

@ -5,4 +5,4 @@ RUN apk update && \
RUN npm install RUN npm install
WORKDIR /usr/src WORKDIR /usr/src/app

18
deploy.sh
View file

@ -8,25 +8,25 @@ CONTAINER_NAME=werefox-obs-layouts
MODE=$1 MODE=$1
x=$(sudo docker container ls | grep next-js | wc -l) x=$(sudo docker container ls | grep next-js | wc -l)
if [ $x -eq 1 ]; then if [ $x -eq 1 ]; then
sudo MODE=$MODE APP_FOLDER=$APP_FOLDER docker-compose rm -sf sudo MODE=$MODE docker-compose rm -sf
fi fi
sudo MODE=$MODE APP_FOLDER=$APP_FOLDER docker-compose build sudo MODE=$MODE docker-compose build
sudo MODE=$MODE docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npm install --silent"
if [ ! -d "./src/$APP_FOLDER" ]; then if [ ! -d "./src/$APP_FOLDER" ]; then
sudo MODE=$MODE APP_FOLDER=$APP_FOLDER docker-compose run $CONTAINER_NAME npx create-next-app $APP_FOLDER sudo MODE=$MODE docker-compose run $CONTAINER_NAME npx create-next-app $APP_FOLDER
sudo MODE=$MODE APP_FOLDER=$APP_FOLDER docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npx tailwindcss init -p" sudo MODE=$MODE docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npx tailwindcss init -p"
sudo chown -R $USER:$USER ./src sudo chown -R $USER:$USER ./src
fi fi
sudo MODE=$MODE APP_FOLDER=$APP_FOLDER docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npm install --silent" sudo MODE=$MODE docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npx next telemetry disable"
sudo MODE=$MODE APP_FOLDER=$APP_FOLDER docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npx next telemetry disable"
if [ $MODE == "dev" ] || [ $MODE == "start" ]; then if [ $MODE == "dev" ] || [ $MODE == "start" ]; then
sudo MODE=$MODE APP_FOLDER=$APP_FOLDER docker-compose up --build --force-recreate --remove-orphans -d sudo MODE=$MODE docker-compose up --build --force-recreate --remove-orphans -d
sudo MODE=$MODE APP_FOLDER=$APP_FOLDER docker-compose logs -f sudo MODE=$MODE docker-compose logs -f
elif [ $MODE == "build" ]; then elif [ $MODE == "build" ]; then
sudo MODE=$MODE APP_FOLDER=$APP_FOLDER docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npm run build" sudo MODE=$MODE docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npm run build"
else else
echo "Please use 'dev', 'build', or 'start' as an argument." echo "Please use 'dev', 'build', or 'start' as an argument."
exit 1 exit 1

4
docker-compose.yml
View file

@ -8,7 +8,7 @@ services:
context: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
volumes: volumes:
- ./src:/usr/src/ - ./src:/usr/src/app/
ports: ports:
- "64209:64209" - "64209:64209"
command: bash -c "cd $APP_FOLDER && npm run $MODE" command: bash -c "cd werefox-obs-layouts && npm run $MODE"

40
src/werefox-obs-layouts/pages/index.js
View file

@ -1,18 +1,46 @@
import Head from 'next/head' import Head from "next/head";
import Image from "next/image";
export default function Home() { export default function Home() {
return ( return (
<div className="p-4 min-h-screen bg-werefox-grey-dark font-nerd"> <div className="min-h-screen font-nerd bg-opacity-0">
<Head> <Head>
<title>Create Next App</title> <title>Create Next App</title>
<meta name="description" content="Generated by create next app" /> <meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<div className="space-y-4 text-center text-xl text-werefox-pink"> <div className="p-4 flex flex-row space-x-6 text-center text-xl text-alice-werefox-red-light w-1080p h-1080p">
<div className="p-4 rounded-lg bg-werefox-grey ring-4 ring-werefox-blue"> <div className="flex flex-col flex-grow space-y-6">
<p>Oh hi I'm writing things and they're displaying on the browser preview</p> <div className="p-2 flex-grow rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark">
<p>Donation and stuff</p>
</div>
<div className="flex flex-col space-y-6 h-900p">
<div className="p-2 flex-grow rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark">
<p>this is the chat</p>
</div>
<div className="rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark bg-opacity-0 overflow-hidden aspect-ratio">
<div className="opacity-0">
<Image
src="/images/werefox_logo.svg"
width="720"
height="480"
></Image>
</div> </div>
</div> </div>
</div> </div>
) </div>
<div className="flex flex-col space-y-6">
<div className="p-2 flex-grow rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark">
<p>
Oh hi I'm writing things and they're displaying on the browser
preview
</p>
</div>
<div className="p-2 rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-darker w-900p h-900p bg-opacity-0">
<p className="p-4 text-8xl bg-alice-werefox-grey-darker bg-opacity-0"></p>
</div>
</div>
</div>
</div>
);
} }

83
src/werefox-obs-layouts/tailwind.config.js
View file

@ -7,20 +7,25 @@ module.exports = {
nerd: ["DejaVuSansMono"], nerd: ["DejaVuSansMono"],
}, },
colors: { colors: {
"werefox-blue": { "ada-werefox-cyan": {
light: "#AAFFFF",
DEFAULT: "#50FFFF",
dark: "#008888",
},
"skye-werefox-blue": {
light: "#94C2FF", light: "#94C2FF",
DEFAULT: "#75B1FF", DEFAULT: "#75B1FF",
dark: "#0052B8", dark: "#0052B8",
darker: "#00377A", darker: "#00377A",
darkest: "#00326B", darkest: "#00326B",
}, },
"werefox-pink": { "skye-werefox-pink": {
DEFAULT: "#FF84CA", DEFAULT: "#FF84CA",
dark: "#9E0054", dark: "#9E0054",
darker: "#8A0040", darker: "#8A0040",
darkest: "#75003F", darkest: "#75003F",
}, },
"werefox-grey": { "skye-werefox-grey": {
lightest: "#EEE", lightest: "#EEE",
lighter: "#DBDBDB", lighter: "#DBDBDB",
light: "#CCC", light: "#CCC",
@ -28,6 +33,28 @@ module.exports = {
dark: "#242424", dark: "#242424",
darker: "#121212", darker: "#121212",
}, },
"alice-werefox-grey": {
lightest: "#EEE",
lighter: "#DBDBDB",
light: "#CCC",
DEFAULT: "#242424",
dark: "#121212",
darker: "#000",
},
"alice-werefox-red": {
light: "#E08587",
DEFAULT: "#c93439",
dark: "#800008",
darker: "#550006",
darkest: "#7A0000",
},
"alice-werefox-blue": {
light: "#9197F3",
DEFAULT: "#1b29e0",
dark: "#3300FF",
darker: "#2C00DB",
darkest: "#2700C2",
},
}, },
flex: { flex: {
5: "5 5 0%", 5: "5 5 0%",
@ -46,19 +73,65 @@ module.exports = {
"0%, 100%": { transform: "scale(1, 1)" }, "0%, 100%": { transform: "scale(1, 1)" },
"50%": { transform: "scale(1.01, 1.01)" }, "50%": { transform: "scale(1.01, 1.01)" },
}, },
topslide: {
"0%": { "margin-top": "10em" },
"4%": { "margin-top": "0em" },
"31%": { "margin-top": "0em" },
"35%": { "margin-top": "-10em" },
"64%": { "margin-top": "-10em" },
"68%": { "margin-top": "-20em" },
"96%": { "margin-top": "-20em" },
"100%": { "margin-top": "-30em" },
},
heightslide: {
"0%": { width: "auto", padding: "0.5em 1em", border: "thin solid" },
"49.99%": {
width: "auto",
padding: "0.5em 1em",
border: "thin solid",
},
"50.01%": { width: "0", padding: "0", border: "none" },
"100%": { width: "0", padding: "0", border: "none" },
},
}, },
animation: { animation: {
wiggle: "wiggle 7s ease-in-out infinite", wiggle: "wiggle 7s ease-in-out infinite",
jiggle: "jiggle 5s cubic-bezier(0.75,0.25,0.25,0.75) infinite", jiggle: "jiggle 5s cubic-bezier(0.75,0.25,0.25,0.75) infinite",
yip: "yip 0.1s ease-in-out", yip: "yip 0.1s ease-in-out",
topslide: "topslide 12s ease-in-out infinite",
heightslide: "heightslide 8s linear infinite",
},
width: {
"1080p": "1920px",
"900p": "1600px",
"720p": "1280px",
"480p": "720px",
},
height: {
"1080p": "1080px",
"900p": "900px",
"720p": "720px",
"480p": "480px",
},
maxWidth: {
"1080p": "1920px",
"900p": "1600px",
"720p": "1280px",
"480p": "720px",
},
maxHeight: {
"1080p": "1080px",
"900p": "900px",
"720p": "720px",
"480p": "480px",
}, },
}, },
}, },
variants: { variants: {
extend: { extend: {
brightness: ["hover", "dark"], brightness: ["hover", "dark"],
ringColor: ["hover", "dark", "active"], ringColor: ["hover", "dark", "active", "group-hover"],
animation: ["hover", "focus"], animation: ["hover", "focus", "group-hover"],
}, },
}, },
plugins: [], plugins: [],