Websites/liljudd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity

fix/features #1

Merged
moonleay merged 2 commits from fix/features into master 2023-12-04 16:22:56 +00:00
Conversation 0 Commits 2 Files changed 14 +265 -179
13 changed files with 265 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 4e41363ec9 - Show all commits

14
src/components/Footer.astro
View file

@ -27,23 +27,23 @@ import '../styles/components/Footer.scss'
<h3>The Software</h3> <h3>The Software</h3>
<div class="footerLinks"> <div class="footerLinks">
<a href="https://git.moonleay.net/DiscordBots/lilJudd" target="_blank" <a href="https://git.moonleay.net/DiscordBots/lilJudd" target="_blank"
>The code of the bot</a >The code of the bot <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a
> >
<a <a
href="https://git.moonleay.net/Websites/liljudd-website" href="https://git.moonleay.net/Websites/liljudd-website"
target="_blank">The code of the website</a target="_blank">The code of the website <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a
> >
<a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">The todo list</a> <a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">The todo list <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
<a href="/acknowledgements" target="_self">Acknowledgements</a> <a href="/acknowledgements" target="_self">Acknowledgements</a>
</div> </div>
</div> </div>
<div> <div>
<h3>More</h3> <h3>More</h3>
<div class="footerLinks"> <div class="footerLinks">
<a href="https://moonleay.net/" target="_self">My homepage</a> <a href="https://moonleay.net/" target="_self">My homepage <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
<a href="https://moonleay.net/blog/" target="_blank">My blog</a> <a href="https://moonleay.net/blog/" target="_blank">My blog <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
<a href="/contact" target="_self">Contact me</a> <a href="/contact" target="_self">Contact me</a>
<a href="https://status.moonleay.net/" target="_blank">Server Status</a> <a href="https://status.moonleay.net/" target="_blank">Server Status <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
</div> </div>
</div> </div>
<div> <div>
@ -54,7 +54,7 @@ import '../styles/components/Footer.scss'
<a href="/terms-of-service" target="_self">Terms of Service</a> <a href="/terms-of-service" target="_self">Terms of Service</a>
<a <a
href="https://git.moonleay.net/DiscordBots/lilJudd/src/branch/master/LICENSE" href="https://git.moonleay.net/DiscordBots/lilJudd/src/branch/master/LICENSE"
target="_blank">The license</a target="_blank">The license <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a
> >
</div> </div>
</div> </div>

22
src/components/ImageSection.astro
View file

@ -5,6 +5,7 @@ interface Props {
title: string; title: string;
description: string; description: string;
note: string; note: string;
idnr: number;
centered?: boolean; centered?: boolean;
} }
const { const {
@ -13,20 +14,19 @@ const {
title, title,
description, description,
note, note,
idnr,
centered = false, centered = false,
} = Astro.props; } = Astro.props;
import "../styles/components/ImageSection.scss"; import "../styles/components/ImageSection.scss";
--- ---
<section class:list={["ImageSection", { centered }]}> <section style={{"--id":idnr}} class:list={["ImageSection", { centered }]}>
<div class="firstHalf">
<h1>{title}</h1>
<div class="imgDiv">
<img src={imgUrl} alt={imgAlt} />
<p>{description}</p>
</div>
</div>
<div class="noteP">
<p>{note}</p>
</div>
</section> </section>
<h1 style={{"--id":idnr}}>{title}</h1>
<div style={{"--id":idnr}} class="imgDiv">
<img src={imgUrl} alt={imgAlt} />
<p>{description}</p>
</div>
<div style={{"--id":idnr}} class="noteP">
<p>{note}</p>
</div>

109
src/pages/about.astro
View file

@ -1,62 +1,67 @@
--- ---
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import "../styles/pages/about.scss";
--- ---
<Layout> <Layout>
<section> <h1>About</h1>
<h1>Why does this bot exist?</h1> <div class="aboutdiv">
<p> <section>
We had a person in our team, who sent <a <h2>Why does this bot exist?</h2>
href="https://static.moonleay.net/img/lilJuddWeb/about/oldplanningmsg.png" <p>
>these planning messages</a We had a person in our team, who sent <a
href="https://static.moonleay.net/img/lilJuddWeb/about/oldplanningmsg.png"
target="_blank"
>these planning messages</a
> and I thought that this should be automated. Some time later the first > and I thought that this should be automated. Some time later the first
version of li'l Judd was born. Today the bot has more features and keeps getting more of them! It is version of li'l Judd was born. Today the bot has more features and keeps getting more of them! It is
designed to actually improve the Splatoon experience and not be the designed to actually improve the Splatoon experience and not be the
10000th moderation and general utility bot with the same features as all 10000th moderation and general utility bot with the same features as all
bots. bots.
</p> </p>
</section> </section>
<section> <section>
<h1>Who is behind this?</h1> <h2>Who is behind this?</h2>
<p> <p>
The bot is currently being developed by <a The bot is currently being developed by <a
href="https://discord.com/users/372703841151614976" href="/contact"
target="_blank">moonleay</a target="_self">moonleay</a
> (hey that&apos;s me!) with occasional help from his friends! > (hey that&apos;s me!) with occasional help from his friends!
</p> </p>
</section> </section>
<section> <section>
<h1>How can I trust you, that you will not abuse your access?</h1> <h2>How can I trust you </h2>
<p> <p>
The bot only requests permissions, which are needed for it to work. Additionally, The bot only requests permissions, which are needed for it to work. Additionally,
if you want to check how the bot works under the hood, you can if you want to check how the bot works under the hood, you can
<a href="https://git.moonleay.net/DiscordBots/lilJudd">read the code</a> <a href="https://git.moonleay.net/DiscordBots/lilJudd">read the code</a>
and if you still don't trust me, you can always host the bot yourself! and if you still don't trust me, you can always host the bot yourself!
A guide on how to do that can be found in the README of the git project. A guide on how to do that can be found in the README of the git project.
</p> </p>
</section> </section>
<section> <section>
<h1>Where is my data stored?</h1> <h2>Where is my data stored?</h2>
<p> <p>
Your data is stored in a VPS from Contabo in Germany, Bavaria. The bot used to be hosted on a server in my basement, Your data is stored in a VPS from Contabo in Germany. The bot used to be hosted on a server in my basement,
but I moved it to a VPS, because my internet connection was not stable enough. but I moved it to a VPS, because my internet connection was not stable enough.
</p> </p>
</section> </section>
<section> <section>
<h1>So whats in the future?</h1> <h2>So whats in the future?</h2>
<p> <p>
I plan on adding features, which are aimed to improve your and your teams I plan on adding features, which are aimed to improve your and your teams
competitive experience! You can check out my public todo list <a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">here</a>. competitive experience! You can check out my public todo list <a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">here</a>.
</p> </p>
</section> </section>
<section> <section>
<h1>Hey, there is this really cool idea I have! Can you add it?</h1> <h2>Hey, there is this really cool idea I have! Can you add it?</h2>
<p> <p>
Just message me! I can't promise anything, but I am always open to new Just message me! I can't promise anything, but I am always open to new
ideas and improvements! You can find ways to contact me <a ideas and improvements! You can find ways to contact me <a
href="/contact" href="/contact"
target="_blank">here</a target="_self">here</a
>. >.
</p> </p>
</section> </section>
</div>
</Layout> </Layout>

21
src/pages/contact.astro
View file

@ -1,15 +1,20 @@
--- ---
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import "../styles/pages/contact.scss";
--- ---
<Layout> <Layout>
<section> <div class="wrapper">
<h1>Contact</h1> <h1>Contact</h1>
<p> <section class="contact">
EMail: <a href="mailto:contact@moonleay.net">contact@moonleay.net</a> <a href="mailto:contact@moonleay.net" target="_blank">
</p> <img src="https://static.moonleay.net/img/lilJuddWeb/logos/email.svg" alt="Email"/>
<p> contact@moonleay.net
Discord: <a>@moonleay</a> </a>
</p> <a href="https://discord.com/users/372703841151614976" target="_blank">
</section> <img src="https://static.moonleay.net/img/lilJuddWeb/logos/discord.svg" alt="Discord"/>
@moonleay
</a>
</section>
</div>
</Layout> </Layout>

5
src/pages/features.astro
View file

@ -14,6 +14,7 @@ import "../styles/pages/features.scss";
title="Time Planning and Management" title="Time Planning and Management"
description="Helps you to see on which days your fellow team mates are available." description="Helps you to see on which days your fellow team mates are available."
note="The bot can send these planning messages every monday at 3AM. Members can click the buttons on each message to communicate, if they have time on that day." note="The bot can send these planning messages every monday at 3AM. Members can click the buttons on each message to communicate, if they have time on that day."
idnr={1}
/> />
<ImageSection <ImageSection
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/matchplanner.png" imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/matchplanner.png"
@ -21,6 +22,7 @@ import "../styles/pages/features.scss";
title="Match Planner" title="Match Planner"
description="Make sure that you know when your next match is and who will participate." description="Make sure that you know when your next match is and who will participate."
note="The bot can send these planning messages, when the command /match is used. Members can click the buttons on each message to communicate, if they will participate in the match. Participating members will get a role until the match has started." note="The bot can send these planning messages, when the command /match is used. Members can click the buttons on each message to communicate, if they will participate in the match. Participating members will get a role until the match has started."
idnr={2}
/> />
<ImageSection <ImageSection
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/notifs.png" imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/notifs.png"
@ -28,6 +30,7 @@ import "../styles/pages/features.scss";
title="Notifications" title="Notifications"
description="Make sure that you and your team members remember to vote in the Time Planner." description="Make sure that you and your team members remember to vote in the Time Planner."
note="The bot can add roles. The first one gets pinged, when the time planner sends the messages, the other one gets assigned to the available members of the day, so that it is possible to ping all available people." note="The bot can add roles. The first one gets pinged, when the time planner sends the messages, the other one gets assigned to the available members of the day, so that it is possible to ping all available people."
idnr={3}
/> />
<ImageSection <ImageSection
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/rotationstatus.png" imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/rotationstatus.png"
@ -35,6 +38,7 @@ import "../styles/pages/features.scss";
title="Rotation Status" title="Rotation Status"
description="Li'l Judd can show you the current map rotation in his status." description="Li'l Judd can show you the current map rotation in his status."
note="The bot cycles through the current map and mode rotation. It updates every few seconds." note="The bot cycles through the current map and mode rotation. It updates every few seconds."
idnr={4}
/> />
<ImageSection <ImageSection
centered centered
@ -43,6 +47,7 @@ import "../styles/pages/features.scss";
title="More to come.." title="More to come.."
description="The bot is still in development. More features will be added." description="The bot is still in development. More features will be added."
note="If you have a specific feature request, you can contact me on Discord: @moonleay or email: contact at moonleay dot net" note="If you have a specific feature request, you can contact me on Discord: @moonleay or email: contact at moonleay dot net"
idnr={5}
/> />
</div> </div>
</div> </div>

2
src/pages/how-do-i.astro
View file

@ -33,6 +33,6 @@ import "../styles/pages/how-do-i.scss";
</div> </div>
</section> </section>
<section class="footernotesection"> <section class="footernotesection">
<p>Is something missing here? Please contact me!</p> <p>Is something missing here? Please <a href="/contact" target="_self">contact me</a>!</p>
</section> </section>
</Layout> </Layout>

45
src/pages/stack.astro
View file

@ -6,51 +6,42 @@ import "../styles/pages/stack.scss"
<Layout> <Layout>
<h1 class="title">The Stack</h1> <h1 class="title">The Stack</h1>
<section class="stacksection"> <section class="stacksection">
<div class="stackgrid_1 stackitm"> <img
<img src="https://static.moonleay.net/img/lilJuddWeb/logos/kotlin.svg"
src="https://static.moonleay.net/img/lilJuddWeb/logos/kotlin.svg" alt="Kotlin 'K' logo"
alt="Kotlin 'K' logo" />
/>
</div>
<div class="stackgrid_3 stackitm"> <div class="stackgrid_3 stackitm">
<h1>The Kotlin programming language</h1> <h1>The Kotlin programming language</h1>
<p> <p>
I chose this programming language because it is my main one. There is A programming language, which runs in the JVM. Also my main language.
nothing more to that.
</p> </p>
</div> </div>
</section> </section>
<section class="stacksection"> <section class="stacksection">
<div class="stackgrid_1 stackitm"> <img
<img src="https://static.moonleay.net/img/lilJuddWeb/logos/kord.png"
src="https://static.moonleay.net/img/lilJuddWeb/logos/kord.png" alt="The Kord logo"
alt="The Kord logo" />
/>
</div>
<div class="stackgrid_3 stackitm"> <div class="stackgrid_3 stackitm">
<h1>The Kord library</h1> <h1>The Kord library</h1>
<p>A Kotlin library for creating Discord bots. Pretty bare bones.</p> <p>A Kotlin library for creating Discord bots. Pretty bare bones.</p>
</div> </div>
</section> </section>
<section class="stacksection"> <section class="stacksection">
<div class="stackgrid_1 stackitm"> <img
<img src="https://static.moonleay.net/img/lilJuddWeb/logos/kordextensions.png"
src="https://static.moonleay.net/img/lilJuddWeb/logos/kordextensions.png" alt="The Kord-Extensions logo"
alt="The Kord-Extensions logo" />
/>
</div>
<div class="stackgrid_3 stackitm"> <div class="stackgrid_3 stackitm">
<h1>The Kord Extensions library</h1> <h1>The Kord Extensions library</h1>
<p>A Kotlin library to improve the Kord experience.</p> <p>A Kotlin library to improve the Kord experience.</p>
</div> </div>
</section> </section>
<section class="stacksection"> <section class="stacksection">
<div class="stackgrid_1 stackitm"> <img
<img src="https://static.moonleay.net/img/lilJuddWeb/logos/pgelephant.png"
src="https://static.moonleay.net/img/lilJuddWeb/logos/pgelephant.png" alt="The PostgreSQL elephant"
alt="The PostgreSQL elephant" />
/>
</div>
<div class="stackgrid_3 stackitm"> <div class="stackgrid_3 stackitm">
<h1>The PostgreSQL database</h1> <h1>The PostgreSQL database</h1>
<p> <p>
@ -61,7 +52,7 @@ import "../styles/pages/stack.scss"
</section> </section>
<section class="stacknote"> <section class="stacknote">
<p> <p>
To see all used libraries and their licenses, check the <a href="/acknowledgements">Acknowledgements</a>. To view all used libraries and their licenses, check the <a href="/acknowledgements">Acknowledgements</a>.
</p> </p>
</section> </section>
</Layout> </Layout>

7
src/styles/components/Footer.scss
View file

@ -29,6 +29,13 @@ footer {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 20px; gap: 20px;
div {
img {
margin: auto;
max-width: 0.5rem;
}
}
h3 { h3 {
margin-bottom: 8px; margin-bottom: 8px;
} }

103
src/styles/components/ImageSection.scss
View file

@ -1,6 +1,10 @@
.ImageSection { .ImageSection {
border-radius: 0.5rem; border-radius: 0.5rem;
width: 100%; width: 100%;
grid-row: var(--id)/calc(var(--id) + 2);
grid-row: var(--id)/calc(var(--id) + 2);
grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
@media (max-width: 1100px) { @media (max-width: 1100px) {
max-width: 80vw; max-width: 80vw;
} }
@ -9,15 +13,6 @@
background-size: contain; background-size: contain;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
//background-color: rgba(183, 183, 183, 0.5);
//backdrop-filter: blur(5px);
//background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/tapes-bg.png"),
// linear-gradient(
// 180deg,
// rgba(2, 0, 36, 0.1) 0%,
// rgba(0, 0, 0, 0) 35%,
// rgba(0, 0, 0, 0.25) 100%
// );
&.centered { &.centered {
grid-column: 1/-1; grid-column: 1/-1;
@ -25,54 +20,56 @@
justify-self: center; justify-self: center;
} }
.firstHalf { }
display: flex; h1 {
flex-direction: column; z-index: 1;
align-items: center; grid-row: var(--id)/calc(var(--id) + 1);
justify-content: space-around; grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
}
.imgDiv {
z-index: 1;
grid-row: calc(var(--id) + 1)/calc(var(--id) + 2);
grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
padding: 0.5rem;
margin-left: 3rem;
margin-right: 3rem;
border-radius: 0.5rem;
.imgDiv { display: flex;
//background-color: rgba(0, 0, 0, 0.4); flex-direction: column;
//backdrop-filter: blur(5px); align-items: center;
padding: 0.5rem; img {
margin-left: 3rem; border-radius: 0.5rem;
margin-right: 3rem; max-width: 80%;
border-radius: 0.5rem; max-height: 280px;
display: flex;
flex-direction: column;
align-items: center;
img {
border-radius: 0.5rem;
max-width: 80%;
max-height: 280px;
}
p {
padding-top: 2px;
font-size: 0.8rem;
text-align: center;
}
}
} }
.noteP { p {
line-height: 1.5; padding-top: 2px;
vertical-align: middle; font-size: 0.8rem;
margin: auto;
font-size: 1rem;
text-align: center; text-align: center;
}
display: flex; }
justify-content: center;
align-items: center; .noteP {
z-index: 1;
p { grid-row: calc(var(--id) + 2)/calc(var(--id) + 3);
margin: auto; grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
padding: 2rem;
} line-height: 1.5;
vertical-align: middle;
margin: auto;
font-size: 1rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
p {
margin: auto;
padding: 2rem;
} }
} }

30
src/styles/pages/about.scss Normal file
View file

@ -0,0 +1,30 @@
h1 {
font-size: 3rem;
text-align: center;
margin-bottom: 1.2rem;
}
.aboutdiv {
section {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 1rem;
padding: 1rem;
display: block;
}
h2 {
font-size: 1.5rem;
}
a {
color: white;
text-decoration: underline;
font-size: 0.9rem;
transition: 0.5s;
&:hover {
color: rgb(96 59 255) !important;
}
}
}

23
src/styles/pages/contact.scss Normal file
View file

@ -0,0 +1,23 @@
.wrapper {
margin: 0;
h1 {
font-size: 3rem;
text-align: center;
margin-bottom: 1.2rem;
}
text-align: center;
.contact {
display: flex;
flex-direction: column;
align-items: center;
a {
display: flex;
align-items: center;
img {
margin: 0 5px;
}
}
}
}

21
src/styles/pages/how-do-i.scss
View file

@ -26,7 +26,7 @@
img { img {
display: flex; display: flex;
border-radius: 5px; border-radius: 5px;
max-width: 90%; max-width: 100%;
} }
p, code { p, code {
@ -36,3 +36,22 @@
} }
} }
.footernotesection {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 1rem;
padding: 1rem;
display: block;
text-align: center;
a {
color: white;
text-decoration: underline;
font-size: 0.9rem;
transition: 0.5s;
&:hover {
color: rgb(96 59 255) !important;
}
}
}

42
src/styles/pages/stack.scss
View file

@ -8,33 +8,31 @@
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px; border-radius: 4px;
margin: 1rem; margin: 1rem;
padding: 1rem; padding: 1.5rem;
display: block; display: block;
@media (min-width: 800px) {
display: grid; @media (min-width: 950px) {
grid-template-columns: repeat(4, 1fr); max-width: 900px;
margin: 1rem auto;
display: flex;
width: 100%;
justify-content: space-between;
//display: grid;
//grid-template-columns: repeat(4, 1fr);
} }
.stackgrid_1 { img {
grid-column: span 1; max-width: 80%;
text-align: center; max-height: 200px;
width: 200px;
img { border-radius: 5px;
max-width: 80%;
max-height: 200px;
width: 200px;
border-radius: 5px;
}
} }
.stackgrid_3 { .stackgrid_3 {
grid-column: span 3; //grid-column: span 3;
text-align: center; text-align: center;
align-self: center; align-self: center;
margin: auto
}
.stackitm {
margin: auto; margin: auto;
} }
} }
@ -43,6 +41,12 @@
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px; border-radius: 4px;
margin: 1rem; margin: 1rem;
@media (min-width: 950px) {
width: 900px;
margin: 1rem auto;
}
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;