feat: update the text & some layouts, also the buid was fixed

.github/workflows/main.yml

@@ -1,13 +1,17 @@
 name: Build and Test React Application
 
-# Controls when the action will run. 
+# Controls when the action will run.
 on:
+  workflow_dispatch:
   # Triggers the workflow on push or pull request events but only for the main branch
   push:
     branches: [ master ]
   pull_request:
     branches: [ master ]
 
+env:
+  NODE_OPTIONS: --openssl-legacy-provider # Temporary fix (remove later!)
+
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
   build_test:
@@ -16,20 +20,28 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [22.x]
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - name: npm i, build, test and lint
+      - name: npm ci, build, test and lint
         run: |
-          npm install
+          npm ci
           npm run build --if-present
-          npm test      
+          npm test
           npm run lint
-
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-output
+          path: |
+            dist/apps/alpsbte-api
+            dist/apps/alpsbte-web
+
+

apps/alpsbte-api/src/main.ts

@@ -1,13 +1,13 @@
-import * as express from 'express';
-import * as cors from 'cors';
+import express from 'express';
+import cors from 'cors';
 import { config } from './config';
 
 import { base, assets } from './app/routes';
 
 const port = process.env.port || 3333;
 
 const app = express();
-app.use(cors('*'));
+app.use(cors());
 app.use(express.json());
 
 app.get('/', (req: express.Request, res: express.Response) => {

apps/alpsbte-api/tsconfig.json

@@ -9,5 +9,10 @@
     {
       "path": "./tsconfig.spec.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "strict": true
+  }
 }

libs/application/src/components/application-step/application-step.tsx

@@ -1,36 +1,75 @@
 /* eslint-disable */
-import { tr } from '@alpsbte/shared/language';
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import './application-step.scss';
 
 export interface ApplicationStepProps {
   stepNumber: number;
   title: string;
   description: string;
-  img: string;
   style?: CSSProperties;
 }
 
 export const ApplicationStep = ({
   stepNumber,
   title,
   description,
-  img,
   style = {},
 }: ApplicationStepProps) => {
   return (
     <div className="application-step" style={style}>
-      <div className="application-step__img">
-        <img src={img} alt="Application Step Discord" />
-      </div>
       <div className="application-step__content">
         <h2>
           {stepNumber}. {title}
         </h2>
-        <p>{description}</p>
+        <p>{linkify(description)}</p>
       </div>
     </div>
   );
 };
 
+const linkify = (text: string): (string | ReactNode)[] => {
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+  const markdownLinkRegex = /\[([^\]]+)]\(([^)]+)\)/g;
+
+  return text
+    .split(markdownLinkRegex)
+    .flatMap((part: string, i: number) => {
+      if (i % 3 === 1) {
+        const linkText = part;
+        const linkUrl = text.split(markdownLinkRegex)[i + 1];
+        return [
+          <a
+            href={linkUrl}
+            key={i}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="link"
+          >
+            {linkText}
+          </a>,
+        ];
+      }
+      if (i % 3 === 2) {
+        return [];
+      }
+      return part.split(urlRegex).map((urlPart: string, j: number) => {
+        if (urlPart.match(urlRegex)) {
+          return (
+            <a
+              href={urlPart}
+              key={`${i}-${j}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="link"
+            >
+              {urlPart}
+            </a>
+          );
+        }
+        return urlPart;
+      });
+    })
+    .filter(Boolean);
+};
+
 export default ApplicationStep;

libs/application/src/lib/application.tsx

@@ -5,7 +5,6 @@ import { languageStore } from '@alpsbte/shared/stores';
 import { inject, observer } from 'mobx-react';
 import ApplicationStep from '../components/application-step/application-step';
 import { tr } from '@alpsbte/shared/language';
-import { apiUrl } from '@alpsbte/shared/config';
 
 export interface ApplicationProps {}
 
@@ -24,35 +23,31 @@ export const Application = inject(languageStore.storeKey)(
             stepNumber={1}
             title={tr('pages.application.steps.discord.title')}
             description={tr('pages.application.steps.discord.description')}
-            img={`${apiUrl}/api/assets/application/2.webp`}
           />
           <ApplicationStep
             stepNumber={2}
-            title={tr('pages.application.steps.plotSystem.title')}
-            description={tr('pages.application.steps.plotSystem.description')}
-            img={`${apiUrl}/api/assets/application/0.webp`}
+            title={tr('pages.application.steps.tutorialSystem.title')}
+            description={tr(
+              'pages.application.steps.tutorialSystem.description'
+            )}
           />
           <ApplicationStep
             stepNumber={3}
-            title={tr('pages.application.steps.applicationForm.title')}
-            description={tr(
-              'pages.application.steps.applicationForm.description'
-            )}
-            img={`${apiUrl}/api/assets/application/3.webp`}
+            title={tr('pages.application.steps.plotSystem.title')}
+            description={tr('pages.application.steps.plotSystem.description')}
           />
           <ApplicationStep
             stepNumber={4}
-            title={tr('pages.application.steps.becomingBuilder.title')}
+            title={tr('pages.application.steps.applicationForm.title')}
             description={tr(
-              'pages.application.steps.becomingBuilder.description'
+              'pages.application.steps.applicationForm.description'
             )}
-            img={`${apiUrl}/api/assets/application/1.webp`}
           />
           <div className="application__video">
             <iframe
               width="560"
               height="315"
-              src="https://www.youtube-nocookie.com/embed/zeX3rRKJenw"
+              src="https://www.youtube-nocookie.com/embed/MdFMsJ9pNls"
               title="YouTube video player"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             ></iframe>

libs/faq/src/components/accordeon/accordeon.tsx

@@ -1,50 +1,77 @@
-import { CSSProperties, useState, MouseEvent } from 'react';
+import { CSSProperties, useState, MouseEvent, ReactNode } from 'react';
 import './accordeon.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronUp } from '@fortawesome/free-solid-svg-icons';
 
 /* eslint-disable-next-line */
 export interface AccordeonProps {
-  title: string;
-  content: string;
-  open?: boolean;
-  style?: CSSProperties;
+  readonly title: string;
+  readonly content: string;
+  readonly open?: boolean;
+  readonly style?: CSSProperties;
 }
 
-export function Accordeon(props: AccordeonProps) {
-  const [open, setOpen] = useState(props.open ? true : false);
+export function Accordeon({ title, content, open, style }: AccordeonProps) {
+  const [isOpen, setIsOpen] = useState(!!open);
 
   const toggleAccordeon = (e: MouseEvent) => {
     e.preventDefault();
 
-    setOpen(open ? false : true);
+    setIsOpen(!isOpen);
   };
 
   return (
     <div className="accordion">
-      <div className="accordion__container">
-        <div
-          onClick={(e) => toggleAccordeon(e)}
-          className="accordion__subContainer"
-        >
-          <span className="accordeon_title">{props.title}</span>
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={toggleAccordeon}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            toggleAccordeon(e as unknown as MouseEvent);
+          }
+        }}
+        className="accordion__container"
+      >
+        <div className="accordion__subContainer">
+          <span className="accordeon_title">{title}</span>
           <span
             className="accordion__icon"
             style={{
-              ...props.style,
-              transform: open ? 'rotate(0deg)' : 'rotate(-180deg)',
+              ...style,
+              transform: isOpen ? 'rotate(0deg)' : 'rotate(-180deg)',
             }}
           >
             <FontAwesomeIcon icon={faChevronUp} />
           </span>
         </div>
 
-        <div className="accordion__content" aria-expanded={!open}>
-          <p className="accordion__content__text">{props.content}</p>
+        <div className="accordion__content" aria-expanded={!isOpen}>
+          <p className="accordion__content__text">{linkify(content)}</p>
         </div>
       </div>
     </div>
   );
 }
 
+const linkify = (text: string): (string | ReactNode)[] => {
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+  return text.split(urlRegex).map((part, i) => {
+    if (part.match(urlRegex)) {
+      return (
+        <a
+          href={part}
+          key={`${part}-${i}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="link"
+        >
+          {part}
+        </a>
+      );
+    }
+    return part;
+  });
+};
+
 export default Accordeon;

libs/shared/language/src/lib/interfaces/set.ts

@@ -43,15 +43,15 @@ export interface ISet {
           title: string;
           description: string;
         };
-        plotSystem: {
+        tutorialSystem: {
           title: string;
           description: string;
         };
-        applicationForm: {
+        plotSystem: {
           title: string;
           description: string;
         };
-        becomingBuilder: {
+        applicationForm: {
           title: string;
           description: string;
         };