{t("Welcome")}
; +``` + +You can also interpolate variables: + +```tsx +import { useI18n } from "./hooks/useI18n"; +... +const { t } = useI18n(); +return ( + + {t("You have {count} new message(s) from {sender}", { + count: "2", + sender: "Teacher", + })} + +); +``` + +### Usage Outside React: + +```ts +import { t } from "./i18n/t"; +const label = t("Username"); +``` + +### Prerequisites + +- Node v20 +- npm + +Run `npm install` to install all dependencies then run `npm run dev` to start the development server. + +Run `npm run format` and `npm run lint` to format and lint the code. + +Run `npm run update-api` after having started the BFF to update the typed API client. diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js new file mode 100644 index 0000000..c3bd3e0 --- /dev/null +++ b/frontend/eslint.config.js @@ -0,0 +1,33 @@ +import js from "@eslint/js"; +import globals from "globals"; +import reactHooks from "eslint-plugin-react-hooks"; +import reactRefresh from "eslint-plugin-react-refresh"; +import tseslint from "typescript-eslint"; +import eslintConfigPrettier from "eslint-config-prettier/flat"; + +export default tseslint.config( + { ignores: ["dist"] }, + { + extends: [ + js.configs.recommended, + ...tseslint.configs.recommended, + eslintConfigPrettier, + ], + files: ["**/*.{ts,tsx}"], + languageOptions: { + ecmaVersion: 2023, + globals: globals.browser, + }, + plugins: { + "react-hooks": reactHooks, + "react-refresh": reactRefresh, + }, + rules: { + ...reactHooks.configs.recommended.rules, + "react-refresh/only-export-components": [ + "warn", + { allowConstantExport: true }, + ], + }, + }, +); diff --git a/frontend/i18n.config.ts b/frontend/i18n.config.ts new file mode 100644 index 0000000..dbe9b1a --- /dev/null +++ b/frontend/i18n.config.ts @@ -0,0 +1,12 @@ +/** + * All supported language codes for the app. + * + * If you add a new translation, add it here and it will automatically + * propagate to extraction and compilation. + */ +export const SUPPORTED_LANGUAGES: string[] = ["en", "sv"]; + +/** + * Default fallback language. + */ +export const DEFAULT_LANGUAGE = "en"; diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..8eaecda --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,14 @@ + + + + + + + +
+ 
+
+ );
+}
+
+export default App;
diff --git a/frontend/src/Studentportalen.tsx b/frontend/src/Studentportalen.tsx
new file mode 100644
index 0000000..90b9f40
--- /dev/null
+++ b/frontend/src/Studentportalen.tsx
@@ -0,0 +1,17 @@
+import { BrowserRouter, Route, Routes } from "react-router";
+import Home from "./studentportalen/Home.tsx";
+import Layout from "./studentportalen/Layout.tsx";
+
+export default function Studentportalen() {
+ return (
+ <>
+
+
+ {t("Student portal")}
+{t("Department of Computer and Systems Sciences")}
+ {extraContent} +{t("Welcome back")}
; + * ``` + */ +export const useI18n = () => useContext(I18nContext); diff --git a/frontend/src/i18n/I18nContext.ts b/frontend/src/i18n/I18nContext.ts new file mode 100644 index 0000000..467a876 --- /dev/null +++ b/frontend/src/i18n/I18nContext.ts @@ -0,0 +1,27 @@ +import { createContext } from "react"; +import type { TFunction } from "./t"; +import { DEFAULT_LANGUAGE } from "../../i18n.config"; + +/** + * The type of the context used by TranslationProvider. + * + * - `t`: the translation function (msgid -> msgstr) + * - `lang`: the currently selected language (e.g. "en", "sv") + * - `setLang`: function to switch the active language + */ +export type I18nContextType = { + t: TFunction; + lang: string; + setLang: (lang: string) => void; +}; + +/** + * The actual React context object shared via{t("Home screen")}
+{t("Here you can see the latest and greatest")}
+ + ); +} diff --git a/frontend/src/studentportalen/Layout.tsx b/frontend/src/studentportalen/Layout.tsx new file mode 100644 index 0000000..7fa0357 --- /dev/null +++ b/frontend/src/studentportalen/Layout.tsx @@ -0,0 +1,20 @@ +import Header from "./Header.tsx"; +import Menu from "./Menu.tsx"; +import { Outlet } from "react-router"; +import Footer from "./Footer.tsx"; +import "./layout.css"; + +export default function Layout() { + return ( + <> +
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/studentportalen/Menu.tsx b/frontend/src/studentportalen/Menu.tsx
new file mode 100644
index 0000000..ea00661
--- /dev/null
+++ b/frontend/src/studentportalen/Menu.tsx
@@ -0,0 +1,25 @@
+import { NavLink } from "react-router";
+import "./menu.css";
+import { useState } from "react";
+import { useI18n } from "../hooks/useI18n";
+
+export default function Menu() {
+ const { t } = useI18n();
+ const [subMenuVisible, setSubMenuVisible] = useState(false);
+ return (
+
+ );
+}
diff --git a/frontend/src/studentportalen/header.css b/frontend/src/studentportalen/header.css
new file mode 100644
index 0000000..29b26e3
--- /dev/null
+++ b/frontend/src/studentportalen/header.css
@@ -0,0 +1,12 @@
+header {
+ height: 4em;
+ background-color: var(--color-su-primary);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-right: 1em;
+ color: white;
+ img {
+ max-height: 100%;
+ }
+}
diff --git a/frontend/src/studentportalen/layout.css b/frontend/src/studentportalen/layout.css
new file mode 100644
index 0000000..af17ddb
--- /dev/null
+++ b/frontend/src/studentportalen/layout.css
@@ -0,0 +1,6 @@
+#layout {
+ min-height: 100vh;
+}
+main {
+ padding: 0 1em;
+}
diff --git a/frontend/src/studentportalen/menu.css b/frontend/src/studentportalen/menu.css
new file mode 100644
index 0000000..bcbeffc
--- /dev/null
+++ b/frontend/src/studentportalen/menu.css
@@ -0,0 +1,57 @@
+menu.main {
+ position: fixed;
+ bottom: 0;
+ background-color: var(--color-su-primary);
+ margin: 0;
+ padding: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ li {
+ list-style: none;
+ margin: 0;
+ flex-basis: 1px;
+ &:last-child {
+ margin-left: auto;
+ }
+ }
+ a,
+ button {
+ color: white;
+ padding: 1.3em;
+ display: block;
+ margin: 0;
+ height: 100%;
+ width: 100%;
+ min-width: 5em;
+ }
+ button {
+ background: none;
+ border: none;
+ span {
+ transform: rotate(90deg);
+ display: block;
+ }
+ }
+ menu.sub.visible {
+ display: flex;
+ }
+ menu.sub {
+ flex-direction: column-reverse;
+ display: none;
+ position: absolute;
+ bottom: 100%;
+ right: 0;
+ padding: 0;
+ margin: 0;
+ color: white;
+ background-color: var(--color-su-primary-80);
+
+ li {
+ min-width: 10em;
+ padding: 1em;
+ border: 1px solid black;
+ border-bottom: none;
+ }
+ }
+}
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+///