From 8593a5864591a2c74d1df8b41926cecd559cb3a1 Mon Sep 17 00:00:00 2001 From: TheClashFruit Date: Mon, 17 Jun 2024 13:29:21 +0200 Subject: [PATCH] feat: about tab --- .data/team.json | 43 +++++++++++++ README.md | 18 +++++- css/src/style.scss | 119 ++++++++++++++++++++++++++++++++++++ index.php | 63 ++++++++++++++++--- template/404.twig | 21 +++++++ template/about.twig | 54 ++++++++++++++++ template/includes/head.twig | 4 ++ template/includes/nav.twig | 6 +- util/DatabaseUtil.php | 4 ++ util/DiscordUtil.php | 4 ++ 10 files changed, 320 insertions(+), 16 deletions(-) create mode 100644 .data/team.json create mode 100644 template/404.twig create mode 100644 template/about.twig create mode 100644 util/DatabaseUtil.php create mode 100644 util/DiscordUtil.php diff --git a/.data/team.json b/.data/team.json new file mode 100644 index 0000000..be52bee --- /dev/null +++ b/.data/team.json @@ -0,0 +1,43 @@ +[ + { + "role": 0, + "name": "Blurryface (aka Clyde)", + "picture": "https://crss.fra1.cdn.digitaloceanspaces.com/avatars/786634586452787201.png", + "banner": "linear-gradient(40deg, #a657fa, #7447e4)", + "links": [ + { + "icon": { + "id": "lucide.globe" + }, + "name": "Website", + "url": "https://blurryface.xyz/" + } + ] + }, + { + "role": 1, + "name": "TheClashFruit", + "picture": "https://crss.fra1.cdn.digitaloceanspaces.com/avatars/394888268446957569.png", + "links": [ + { + "icon": { + "id": "lucide.globe" + }, + "name": "Website", + "url": "https://theclashfruit.me/" + }, + { + "icon": { + "id": "simpleicons.mastodon", + "extra": { + "width": "24", + "height": "24", + "fill": "currentColor" + } + }, + "name": "Mastodon", + "url": "https://wetdry.world/@TheClashFruit" + } + ] + } +] \ No newline at end of file diff --git a/README.md b/README.md index e6e3264..e463bc3 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,17 @@ -# Website +# CRSS Server's Website -> Newer version of the CRSS site written with PHP! +This is the official website for the CRSS Server. -# why did I choose php help me \ No newline at end of file +## Documentation + +### Contributing + +tba + +## License + +``` +This work is licensed under CC BY 4.0. +``` + +See the [LICENSE](LICENSE) file for more information. \ No newline at end of file diff --git a/css/src/style.scss b/css/src/style.scss index 5c93017..a33fee2 100644 --- a/css/src/style.scss +++ b/css/src/style.scss @@ -14,6 +14,14 @@ } } +*::selection { + background: rgba($colorPrimary, 0.75); + + @media (prefers-color-scheme: dark) { + background: rgba($colorPrimary, 0.65); + } +} + body { display: flex; flex-direction: column; @@ -55,6 +63,26 @@ ol, ul { margin-left: 1rem; } +pre { + overflow-x: scroll; + + max-width: 100%; + + display: block; + + padding: 1rem; + + background: $colorSurfaceLight2; + + border: 1px solid $colorBorderLight1; + border-radius: .5rem; + + @media (prefers-color-scheme: dark) { + background: $colorSurfaceDark2; + border-color: $colorBorderDark1; + } +} + .container { max-width: 1100px; @@ -197,6 +225,8 @@ ol, ul { border-bottom: 1px solid $colorBorderLight1; + z-index: 999999999; + > .container { display: flex; @@ -568,4 +598,93 @@ ol, ul { border-color: $colorBorderDark1; } +} + +.teamList { + display: grid; + + gap: 1rem; + + grid-template-columns: repeat(3, minmax(200px, 1fr)); + + > .teamCard { + border: 1px solid $colorBorderLight1; + border-radius: 1rem; + + background: $colorSurfaceLight2; + + > .memberBanner { + height: 150px; + + position: relative; + + background: $colorPrimary; + + border-top-left-radius: calc(1rem - 1px); + border-top-right-radius: calc(1rem - 1px); + + > img { + position: absolute; + + bottom: -52px; + left: 16px; + + border-radius: 1rem; + border: 4px solid $colorSurfaceLight2; + + @media (prefers-color-scheme: dark) { + border-color: $colorSurfaceDark2; + } + } + + &[data-has-background] { + background: var(--background); + } + } + + > .memberContent { + padding: 0 1rem 1rem; + + > h3 { + margin: 0; + } + + > .memberLinks { + display: flex; + + justify-content: end; + align-items: end; + + gap: .5rem; + + list-style: none; + + margin: 1rem 0 .5rem; + + > li > a { + display: flex; + + align-items: center; + + padding: 4px; + + color: $colorBorderLight3; + + &:hover { + color: $colorPrimary; + } + + @media (prefers-color-scheme: dark) { + color: $colorBorderDark3; + } + } + } + } + + @media (prefers-color-scheme: dark) { + border-color: $colorBorderDark1; + + background: $colorSurfaceDark2; + } + } } \ No newline at end of file diff --git a/index.php b/index.php index 714331e..eaccfa1 100644 --- a/index.php +++ b/index.php @@ -5,6 +5,7 @@ use Bramus\Router\Router; use anlutro\cURL\cURL; + use Twig\TwigFilter; use Twig\TwigFunction; $curl = new cURL(); @@ -38,31 +39,45 @@ $iconData = preg_replace('/(class="\b[^"]*)"/i', '$1 ' . $value . '"', $iconData); else $iconData = preg_replace('/(<]*)>/i', '$1 ' . $key . '="' . $value . '">', $iconData); - - $dom = new DOMDocument('1.0'); - $dom->preserveWhiteSpace = false; - $dom->formatOutput = false; - $dom->loadXML($iconData); - - $iconData = $dom->saveHTML(); - $iconData = preg_replace('/(/i', '', $iconData); - $iconData = preg_replace('/\n/', ' ', $iconData); } + $dom = new DOMDocument('1.0'); + + $dom->preserveWhiteSpace = false; + $dom->formatOutput = false; + $dom->loadXML($iconData); + + $iconData = $dom->saveHTML(); + + $iconData = preg_replace('/(/i', '', $iconData); + $iconData = preg_replace('/\n/', ' ', $iconData); + return $iconData; }); + // override the default merge filter to add type casting + $mergeOverride = new TwigFilter('merge', function($array1, $array2) { + return array_merge((array) $array1, (array) $array2); + }); + $twig->addFunction($iconsFun); - $twig->addGlobal('git', $buildData->git); + $twig->addFilter($mergeOverride); + $twig->addGlobal('git', $buildData->git); $twig->addGlobal('server', [ 'version' => '1.11.2', ]); + // recommended to start a five-server server for live reloading + if (isset($_ENV['IS_DEV'])) + $twig->addGlobal('is_dev', true); + + /* $twig->addGlobal('user', [ 'name' => 'John Doe' ]); + */ $router->get('/', function() { global $twig; @@ -71,6 +86,22 @@ 'page' => [ 'title' => 'Home', 'path' => '/', + 'id' => 'home' + ] + ]); + }); + + $router->get('/about', function() { + global $twig; + + echo $twig->render('about.twig', [ + 'page' => [ + 'title' => 'About Us', + 'path' => '/about', + 'id' => 'about' + ], + 'props' => [ + 'team' => json_decode(file_get_contents('.data/team.json')) ] ]); }); @@ -80,4 +111,16 @@ echo '

Hello World!!

'; }); + $router->set404(function() { + global $twig; + + echo $twig->render('404.twig', [ + 'page' => [ + 'title' => '404 Not Found', + 'path' => $_SERVER['REQUEST_URI'], + 'id' => '404' + ] + ]); + }); + $router->run(); \ No newline at end of file diff --git a/template/404.twig b/template/404.twig new file mode 100644 index 0000000..e02f7e3 --- /dev/null +++ b/template/404.twig @@ -0,0 +1,21 @@ +{% include 'includes/head.twig' %} + +{% include 'includes/hero.twig' %} +{% include 'includes/nav.twig' %} + +
+
+

404 Not Found

+ +

+ We couldn't find this page :( +

+ +

Debug Info

+ + 
{{ { 'page': page, 'git': git, 'server': server, 'user': user } | json_encode(constant('JSON_PRETTY_PRINT')) | format }}
+
+
+ +{% include 'includes/footer.twig' %} +{% include 'includes/foot.twig' %} \ No newline at end of file diff --git a/template/about.twig b/template/about.twig new file mode 100644 index 0000000..cc3b811 --- /dev/null +++ b/template/about.twig @@ -0,0 +1,54 @@ +{% include 'includes/head.twig' %} + +{% include 'includes/hero.twig' %} +{% include 'includes/nav.twig' %} + +
+
+

About Us

+ +

+ We are a small team running this server. +

+ +

Team

+ +
+ {% for member in props.team %} +
+
+ {{ member.name }}'s Profile Picture +
+ +
+ + +

{{ member.name }}

+ +
+
+ {% endfor %} +
+
+
+ +{% include 'includes/footer.twig' %} +{% include 'includes/foot.twig' %} \ No newline at end of file diff --git a/template/includes/head.twig b/template/includes/head.twig index 429b065..b4968a1 100644 --- a/template/includes/head.twig +++ b/template/includes/head.twig @@ -49,5 +49,9 @@ + + {% if is_dev %} + + {% endif %} \ No newline at end of file diff --git a/template/includes/nav.twig b/template/includes/nav.twig index 08f9c73..9e6993a 100644 --- a/template/includes/nav.twig +++ b/template/includes/nav.twig @@ -9,21 +9,21 @@