Move everything around in src (again)

To reflect the composition of the website with two distinct parts
(those being `Main` and `Infos`)
That way, it's much clearer what component belongs where

package.json

@@ -38,6 +38,10 @@
     "typescript-eslint": "^8.24.0",
     "vite": "^5.4.14"
   },
+  "imports": {
+    "#parts/*": "./src/parts/*",
+    "#contexts": "./src/contexts.js"
+  },
   "type": "module",
   "name": "taevas.xyz",
   "module": "index.ts"

src/App.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import {createRoot} from "react-dom/client";
 
-import Infos from "./views/Infos.js";
-import MainContent from "./views/MainContent.js";
+import MainContent from "./Main/index.js";
+import Infos from "./Infos/index.js";
+
 
 const container = document.getElementById("root");
 const root = createRoot(container!);

src/Infos/Anime/Anilist.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from "react";
-import Website from "../../Website.js";
-import ButtonLink from "../../Link/ButtonLink.js";
+import Website from "../Website.js";
+import ButtonLink from "#parts/ButtonLink.js";
 
 export type AnilistInfo = {
   title: string;

src/Infos/Anime/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Info from "../Info.js";
-import Anilist from "./Anime/Anilist.js";
+import Anilist from "./Anilist.js";
 
 export default function Anime() {
   const anilist = <Anilist key={"Anilist"}/>;

src/Infos/Coding/GitHub.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from "react";
-import Website from "../../Website.js";
-import ButtonLink from "../../Link/ButtonLink.js";
+import Website from "../Website.js";
+import ButtonLink from "#parts/ButtonLink.js";
 
 export interface GithubInfo {
   public?: {

src/Infos/Coding/GitLab.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from "react";
-import Website from "../../Website.js";
+import Website from "../Website.js";
 
 export type GitlabInfo = {
   date: string;

src/Infos/Coding/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Info from "../Info.js";
-import GitHub from "./Coding/GitHub.js";
-import GitLab from "./Coding/GitLab.js";
+import GitHub from "./GitHub.js";
+import GitLab from "./GitLab.js";
 
 export default function Coding() {
   const github = <GitHub key={"github"}/>;

src/Infos/Fediverse/KitsuClub.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from "react";
-import Website from "../../Website.js";
+import Website from "../Website.js";
 
 export type KitsuclubInfo = {
   id: string

src/Infos/Fediverse/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Info from "../Info.js";
-import KitsuClub from "./Fediverse/KitsuClub.js";
+import KitsuClub from "./KitsuClub.js";
 
 export default function Hacking() {
   const kitsuclub = <KitsuClub key={"kitsuclub"}/>;

src/Infos/Hacking/Hackthebox.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from "react";
-import Website from "../../Website.js";
-import ButtonLink from "../../Link/ButtonLink.js";
+import Website from "../Website.js";
+import ButtonLink from "#parts/ButtonLink.js";
 
 export type HacktheboxInfo = {
   id: string;

src/Infos/Hacking/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Info from "../Info.js";
-import Hackthebox from "./Hacking/Hackthebox.js";
+import Hackthebox from "./Hackthebox.js";
 
 export default function Hacking() {
   const hackthebox = <Hackthebox key={"hackthebox"}/>;

src/Infos/Japanese/Wanikani.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from "react";
-import Website from "../../Website.js";
+import Website from "../Website.js";
 import { WKLevelProgression, WKReset } from "@bachmacintosh/wanikani-api-types";
 
 export type WanikaniInfo = {

src/Infos/Japanese/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Info from "../Info.js";
-import Wanikani from "./Japanese/Wanikani.js";
+import Wanikani from "./Wanikani.js";
 
 export default function Japanese() {
   const wanikani = <Wanikani key={"wanikani"}/>;

src/Infos/Music/Lastfm.tsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect} from "react";
 import {format} from "timeago.js";
-import Website from "../../Website.js";
-import Link from "../../Link.js";
+import Website from "../Website.js";
+import Link from "#parts/Link.js";
 
 export type LastfmInfo = {
   artist: string;

src/Infos/Music/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Info from "../Info.js";
-import Lastfm from "./Music/Lastfm.js";
+import Lastfm from "./Lastfm.js";
 
 export default function Anime() {
   const lastfm = <Lastfm key={"Lastfm"}/>;

src/Infos/RhythmGames/Osu.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from "react";
-import Website from "../../Website.js";
+import Website from "../Website.js";
 import { Ruleset } from "osu-api-v2-js";
 
 export type OsuInfo = {
@@ -38,7 +38,7 @@ export default function Osu(args: {ruleset: Ruleset}) {
       try {
         setElements([
           <div key={`osu-${ruleset}`} className="flex">
-            <img className="m-auto w-16 h-16" alt={`${ruleset} mode logo`} src={`/mode-${ruleset}.png`}/>
+            <img className="m-auto w-16 h-16" alt={`${ruleset} mode logo`} src={`/osu_rulesets/${ruleset}.png`}/>
             <div className="m-auto">
               <p>Global: <strong>#{osu.ranks.global}</strong></p>
               <p>{osu.country}: <strong>#{osu.ranks.country}</strong></p>

src/Infos/RhythmGames/index.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react";
 import Info from "../Info.js";
 
-import Osu from "./RhythmGames/Osu.js";
+import Osu from "./Osu.js";
 import { Ruleset } from "osu-api-v2-js";
 
 export default function RhythmGames() {

src/Infos/Speedrun/Speedruncom.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from "react";
-import Website from "../../Website.js";
-import ButtonLink from "../../Link/ButtonLink.js";
+import Website from "../Website.js";
+import ButtonLink from "#parts/ButtonLink.js";
 
 export type SpeedruncomInfo = {
   place: number;

src/Infos/Speedrun/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Info from "../Info.js";
-import Speedruncom from "./Speedrunning/Speedruncom.js";
+import Speedruncom from "./Speedruncom.js";
 
 export default function Speedrun() {
   const speedruncom = <Speedruncom key={"speedruncom"}/>;

src/Infos/index.tsx

@@ -1,12 +1,12 @@
 import React, {Component} from "react";
-import Music from "../components/Info/Music.js";
-import Speedrun from "../components/Info/Speedrun.js";
-import Hacking from "../components/Info/Hacking.js";
-import Coding from "../components/Info/Coding.js";
-import RhythmGames from "../components/Info/RhythmGames.js";
-import Anime from "../components/Info/Anime.js";
-// import Japanese from "../components/Info/Japanese.js";
-import Fediverse from "../components/Info/Fediverse.js";
+import Music from "./Music/index.js";
+import Speedrun from "./Speedrun/index.js";
+import Hacking from "./Hacking/index.js";
+import Coding from "./Coding/index.js";
+import RhythmGames from "./RhythmGames/index.js";
+import Anime from "./Anime/index.js";
+// import Japanese from "./Japanese/index.js";
+import Fediverse from "./Fediverse/index.js";
 
 export default class Infos extends Component {
   private readonly dragbar = React.createRef<HTMLDivElement>();

src/Main/MainWindow/SocialButtons/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SocialButton from "../../../components/SocialButton.js";
+import SocialButton from "./SocialButton.js";
 
 export default function SocialButtons() {
   return (

src/Main/MainWindow/TabButtons/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import TabButton from "../../../components/TabButton.js";
-import Translatable from "../../../components/Translatable.js";
-import {type TabDetails, LanguageContext, TabContext} from "../../../contexts.js";
+import TabButton from "./TabButton.js";
+import Translatable from "#parts/Translatable.js";
+import {type TabDetails, LanguageContext, TabContext} from "#contexts";
 
 export default function TabButtons({
   setLang,

src/Main/MainWindow/index.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import AnimateHeight from "react-animate-height";
 
-import TabButtons from "./MainWindow/TabButtons.js";
-import SocialButtons from "./MainWindow/SocialButtons.js";
-import Translatable from "../../components/Translatable.js";
+import TabButtons from "./TabButtons/index.js";
+import SocialButtons from "./SocialButtons/index.js";
+import Translatable from "#parts/Translatable.js";
 
-import {type TabDetails, TabContext} from "../../contexts.js";
+import {type TabDetails, TabContext} from "#contexts";
 
 export default function MainWindow({
   setLang,

src/Main/Tabs/About/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import Tab from "../Tab.js";
-import Translatable from "../Translatable.js";
+import Translatable from "#parts/Translatable.js";
 import {UserProfile} from "@carbon/icons-react";
-import {type TabDetails} from "../../contexts.js";
-import Link from "../Link.js";
+import {type TabDetails} from "#contexts";
+import Link from "#parts/Link.js";
 
 export default function About({
   setTabs,

src/Main/Tabs/Contact/index.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import Tab from "../Tab.js";
-import CopyField from "../CopyField.js";
-import ButtonLink from "../Link/ButtonLink.js";
-import Translatable from "../Translatable.js";
 import {MailAll} from "@carbon/icons-react";
-import {type TabDetails} from "../../contexts.js";
-import Link from "../Link.js";
+import CopyField from "#parts/CopyField.js";
+import ButtonLink from "#parts/ButtonLink.js";
+import Translatable from "#parts/Translatable.js";
+import Link from "#parts/Link.js";
+import {type TabDetails} from "#contexts";
 
 export default function Contact({
   setTabs,

src/Main/Tabs/Projects/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import Tab from "../Tab.js";
-import Translatable from "../Translatable.js";
+import Translatable from "#parts/Translatable.js";
 import {Devices} from "@carbon/icons-react";
-import {type TabDetails} from "../../contexts.js";
-import Link from "../Link.js";
+import {type TabDetails} from "#contexts";
+import Link from "#parts/Link.js";
 
 export default function Projects({
   setTabs,

src/Main/Tabs/Support/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import Tab from "../Tab.js";
-import Translatable from "../Translatable.js";
+import Translatable from "#parts/Translatable.js";
 import {UserFavorite} from "@carbon/icons-react";
-import {type TabDetails} from "../../contexts.js";
-import ButtonLink from "../Link/ButtonLink.js";
+import {type TabDetails} from "#contexts";
+import ButtonLink from "#parts/ButtonLink.js";
 
 export default function Support({
   setTabs,

src/Main/Tabs/Tab.tsx

@@ -1,7 +1,7 @@
 import React, {Component} from "react";
 import AnimateHeight from "react-animate-height";
-import type Translatable from "./Translatable.js";
-import {type TabDetails, TabContext} from "../contexts.js";
+import type Translatable from "#parts/Translatable.js";
+import {type TabDetails, TabContext} from "#contexts";
 
 export default class Tab extends Component<{
   setTabs: React.Dispatch<React.SetStateAction<TabDetails[]>>;

src/Main/Tabs/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import About from "../../components/Tab/About.js";
-import Contact from "../../components/Tab/Contact.js";
-import Projects from "../../components/Tab/Projects.js";
-import Support from "../../components/Tab/Support.js";
-import {type TabDetails} from "../../contexts.js";
+import About from "./About/index.js";
+import Contact from "./Contact/index.js";
+import Projects from "./Projects/index.js";
+import Support from "./Support/index.js";
+import {type TabDetails} from "#contexts";
 
 export default function Tabs({
   setTabs,

src/Main/index.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react";
-import MainWindow from "./MainContent/MainWindow.js";
-import Tabs from "./MainContent/Tabs.js";
-import {type TabDetails, LanguageContext, TabContext} from "../contexts.js";
+import MainWindow from "./MainWindow/index.js";
+import Tabs from "./Tabs/index.js";
+import {type TabDetails, LanguageContext, TabContext} from "#contexts";
 
 export default function MainContent() {
   const [lang, setLang] = useState<string>(localStorage.getItem("lang") ?? "en");

src/parts/ButtonLink.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Link from "../Link.js";
+import Link from "./Link.js";
 
 export default function ButtonLink({
   link,

src/parts/Translatable.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {LanguageContext} from "../contexts.js";
+import {LanguageContext} from "#contexts";
 
 export default function Translatable<T extends string | React.JSX.Element>({
   en,