init

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+   "extends": "next/core-web-vitals",
+   "rules": {
+      "semi": [
+         "error",
+         "always"
+      ],
+      "quotes": [
+         "error",
+         "double"
+      ],
+      "react/no-unknown-property": [
+         1,
+         {
+            "ignore": [
+               "bar-id"
+            ]
+         }
+      ]
+   }
+}

.gitignore

@@ -23,4 +23,6 @@ yarn-debug.log*
 yarn-error.log*
 
 *.prettierrc
-*.cargo-ok
+*.cargo-ok
+
+*.next

README.md

@@ -7,7 +7,7 @@
 ![File Size](https://img.shields.io/github/languages/code-size/DarkIntaqt/challenges)
 </div>
 
-Check out the deployed version [challenges.darkintaqt.com](https://challenges.darkintaqt.com/)
+Check out the deployed version on [challenges.darkintaqt.com](https://challenges.darkintaqt.com/)
 
 This project contains:
 * Summary of a summoners challenges

src/img/logo.svg → assets/logo.svg.js

@@ -1,13 +1,11 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
-<g>
-<rect width="460" height="460" x="26" y="26" fill="white"/>
-</g>
-<g transform="translate(0,512) scale(0.1,-0.1)"
-fill="#0dbdff" stroke="none">
-<path d="M433 5105 c-203 -55 -365 -219 -418 -422 -23 -86 -23 -4160 0 -4246
+export default function Logo(props) {
+   return <svg version="1.0" {...props}
+      xmlns="http://www.w3.org/2000/svg" width="512pt" height="512pt" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+      <g>
+         <rect width="460" height="460" x="26" y="26" fill="white" />
+      </g>
+      <g transform="translate(0,512) scale(0.1,-0.1)" stroke="none" fill="#0dbdff">
+         <path d="M433 5105 c-203 -55 -365 -219 -418 -422 -23 -86 -23 -4160 0 -4246
 53 -205 217 -369 422 -422 86 -23 4160 -23 4246 0 205 53 369 217 422 422 23
 86 23 4160 0 4246 -53 205 -217 369 -422 422 -83 22 -4169 21 -4250 0z m4330
 -1576 c52 -14 73 -59 53 -116 -31 -89 -126 -261 -160 -291 -59 -52 -84 -55
@@ -17,5 +15,6 @@ fill="#0dbdff" stroke="none">
 681 -6 709 -25 47 -31 56 -69 56 -223 0 -128 -2 -142 -23 -173 -41 -62 -32
 -61 -757 -56 -720 4 -739 6 -940 69 -407 129 -699 424 -766 776 -103 539 368
 1054 1036 1131 114 13 3226 13 3273 0z"/>
-</g>
-</svg>
+      </g>
+   </svg>;
+}

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "challenges/*": [
+        "./*"
+      ]
+    }
+  }
+}

layouts/Header.js

@@ -0,0 +1,69 @@
+import { Component, createRef } from "react";
+import css from "challenges/styles/header.module.scss";
+
+import Link from "next/link";
+import Logo from "challenges/assets/logo.svg";
+
+export class Header extends Component {
+   constructor() {
+      super();
+
+      this.header = createRef(null);
+   }
+
+
+   render() {
+
+      return <nav className={css.header} id="header" ref={this.header}>
+
+         <Link href="/" >
+            <p>Challenge Tracker</p>
+         </Link>
+
+         <div className={css.scrollSection}>
+
+            <Link href="/">
+               <i className="fa-solid fa-house"></i>
+               <p>Home</p>
+            </Link>
+
+            <Link href="/challe nges">
+               <i className="fa-solid fa-compass"></i>
+               <p>Challenges</p>
+            </Link>
+
+            <Link href="/">
+               <i className="fa-solid fa-ranking-star"></i>
+               <p>Leaderboards</p>
+            </Link>
+
+            <Link href="/">
+               <i className="fa-solid fa-award"></i>
+               <p>Titles</p>
+            </Link>
+
+            <Link href="/">
+               <i className="fa-solid fa-user-group"></i>
+               <p>Communities</p>
+            </Link>
+
+            <Link href="/">
+               <i className="fa-solid fa-gear"></i>
+               <p>Settings</p>
+            </Link>
+
+         </div>
+
+         <div className={css.footer}>
+
+            <button type="button">
+               <i className="fa-solid fa-chevron-left"></i>
+               <p>Collapse</p>
+            </button>
+
+         </div>
+
+      </nav>;
+
+   }
+}

layouts/Layout.js

@@ -0,0 +1,28 @@
+import { Header } from "./Header";
+import css from "challenges/styles/layout.module.scss";
+
+export default function Layout(props) {
+
+   let attributes = {};
+
+   for (const attribute in props) {
+      if (Object.hasOwnProperty.call(props, attribute)) {
+
+         if (attribute !== "children") {
+            attributes[attribute] = props[attribute];
+         }
+
+      }
+   }
+
+   return <section {...props} className={css.wrapper}>
+
+      <Header>
+      </Header>
+
+      <section className={css.contentWrapper}>
+         {props.children}
+      </section>
+
+   </section>;
+}

next.config.js

@@ -0,0 +1,47 @@
+const path = require("path");
+const loaderUtils = require("loader-utils");
+
+const hashOnlyIdent = (context, _, exportName) =>
+   loaderUtils
+      .getHashDigest(
+         Buffer.from(
+            `filePath:${path
+               .relative(context.rootContext, context.resourcePath)
+               .replace(/\\+/g, "/")}#className:${exportName}`,
+         ),
+         "md4",
+         "base64",
+         6,
+      )
+      .replace(/[^a-zA-Z0-9-_]/g, "_")
+      .replace(/^(-?\d|--)/, "_$1");
+
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+   reactStrictMode: true,
+   webpack(config, { dev }) {
+      const rules = config.module.rules
+         .find((rule) => typeof rule.oneOf === "object")
+         .oneOf.filter((rule) => Array.isArray(rule.use));
+
+      if (!dev)
+         rules.forEach((rule) => {
+            rule.use.forEach((moduleLoader) => {
+               if (
+                  moduleLoader.loader?.includes("css-loader") &&
+                  !moduleLoader.loader?.includes("postcss-loader")
+               )
+                  moduleLoader.options.modules.getLocalIdent = hashOnlyIdent;
+
+               // earlier below statements were sufficient:
+               // delete moduleLoader.options.modules.getLocalIdent;
+               // moduleLoader.options.modules.localIdentName = '[hash:base64:6]';
+            });
+         });
+
+      return config;
+   },
+}
+
+module.exports = nextConfig