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
WORKDIR /usr/src
WORKDIR /usr/src/app

18
deploy.sh
View file

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

4
docker-compose.yml
View file

@ -8,7 +8,7 @@ services:
context: .
dockerfile: Dockerfile
volumes:
- ./src:/usr/src/
- ./src:/usr/src/app/
ports:
- "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() {
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>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="space-y-4 text-center text-xl text-werefox-pink">
<div className="p-4 rounded-lg bg-werefox-grey ring-4 ring-werefox-blue">
<p>Oh hi I'm writing things and they're displaying on the browser preview</p>
<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="flex flex-col flex-grow space-y-6">
<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 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"],
},
colors: {
"werefox-blue": {
"ada-werefox-cyan": {
light: "#AAFFFF",
DEFAULT: "#50FFFF",
dark: "#008888",
},
"skye-werefox-blue": {
light: "#94C2FF",
DEFAULT: "#75B1FF",
dark: "#0052B8",
darker: "#00377A",
darkest: "#00326B",
},
"werefox-pink": {
"skye-werefox-pink": {
DEFAULT: "#FF84CA",
dark: "#9E0054",
darker: "#8A0040",
darkest: "#75003F",
},
"werefox-grey": {
"skye-werefox-grey": {
lightest: "#EEE",
lighter: "#DBDBDB",
light: "#CCC",
@ -28,6 +33,28 @@ module.exports = {
dark: "#242424",
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: {
5: "5 5 0%",
@ -46,19 +73,65 @@ module.exports = {
"0%, 100%": { transform: "scale(1, 1)" },
"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: {
wiggle: "wiggle 7s ease-in-out infinite",
jiggle: "jiggle 5s cubic-bezier(0.75,0.25,0.25,0.75) infinite",
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: {
extend: {
brightness: ["hover", "dark"],
ringColor: ["hover", "dark", "active"],
animation: ["hover", "focus"],
ringColor: ["hover", "dark", "active", "group-hover"],
animation: ["hover", "focus", "group-hover"],
},
},
plugins: [],