Pagina admin con creazione problemi e pagina utente personale

README.md

@@ -22,3 +22,41 @@ $ npm run dev
 $ npm run build
 $ npm run serve
 ```
+
+# TODO
+
+- Pagina profilo utente
+    - Lista soluzioni inviate (con stato delle soluzioni: approvate o rifiutate)
+
+- Pagina dell'admin 
+    - Lista delle soluzioni non corrette
+    - Creazione nuovi problemi
+
+- DBv2
+
+    ```js
+    relations: [
+        {
+            from: 'Solution'
+            name: 'for'
+            to: 'Problem'
+            entries: [
+                ['LRLAH2NoLFQAQHQgz', '1']
+                ['JzyiDnwRCrkpzLL8W', '1']
+                ['FFYMJjP2yr4ohdmdT', '2']
+                ['VFHTb8fSrLOkPNVFx', '2']
+            ]
+        }
+        {
+            from: 'User'
+            name: 'owns'
+            to: 'Solution'
+            entries: [
+                ['aziis98',    'LRLAH2NoLFQAQHQgz']
+                ['aziis98',    'JzyiDnwRCrkpzLL8W']
+                ['BachoSeven', 'FFYMJjP2yr4ohdmdT']
+                ['BachoSeven', 'VFHTb8fSrLOkPNVFx']
+            ]
+        }
+    ]
+    ```

client/App.jsx

@@ -1,10 +1,12 @@
 import Router from 'preact-router'
 import { route } from 'preact-router'
 import { useEffect } from 'preact/hooks'
+import { AdminPage } from './pages/Admin.jsx'
 
 import { HomePage } from './pages/Home.jsx'
 import { LoginPage } from './pages/Login.jsx'
 import { ProblemPage } from './pages/Problem.jsx'
+import { ProfilePage } from './pages/Profile.jsx'
 
 const Redirect = ({ to }) => {
     useEffect(() => {
@@ -23,7 +25,9 @@ export const App = ({ url }) => {
         <Router url={url}>
             <HomePage path="/" />
             <LoginPage path="/login" />
+            <ProfilePage path="/profile" />
             <ProblemPage path="/problem/:id" />
+            <AdminPage path="/admin" />
             <Redirect default to="/" />
         </Router>
     )

client/api.jsx

@@ -0,0 +1,18 @@
+export const server = {
+    async get(url) {
+        const res = await fetch(url, { credentials: 'include' })
+        return await res.json()
+    },
+    async post(url, body) {
+        const res = await fetch(url, {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        })
+
+        return await res.json()
+    },
+}

client/components/Header.jsx

@@ -0,0 +1,39 @@
+import { Link } from 'preact-router/match'
+
+const ROLE_LABEL = {
+    admin: 'Admin',
+    moderator: 'Moderatore',
+}
+
+export const Header = ({ user, noLogin }) => (
+    <header>
+        <div class="logo">
+            <a href="/">PHC / Problemi</a>
+        </div>
+        <nav>
+            {user ? (
+                <>
+                    {user.role !== 'student' && (
+                        <div class="nav-item">
+                            <Link activeClassName="active" href="/admin">
+                                Pannello Admin
+                            </Link>
+                        </div>
+                    )}
+                    <div class="nav-item">
+                        <Link activeClassName="active" href="/profile">
+                            @{user.username}
+                            {user.role !== 'student' && <> ({ROLE_LABEL[user.role]})</>}
+                        </Link>
+                    </div>
+                </>
+            ) : (
+                !noLogin && (
+                    <div class="nav-item">
+                        <Link href="/login">Login</Link>
+                    </div>
+                )
+            )}
+        </nav>
+    </header>
+)

client/components/Markdown.jsx

@@ -7,20 +7,34 @@ import remarkRehype from 'remark-rehype'
 import rehypeKatex from 'rehype-katex'
 import rehypeStringify from 'rehype-stringify'
 
+async function renderMarkdownAsync(source) {
+    return await unified()
+        .use(remarkParse)
+        .use(remarkMath)
+        .use(remarkRehype)
+        .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
+        .use(rehypeStringify)
+        .process(source)
+}
+
+// function renderMarkdownSync(source) {
+//     console.warn(`[Markdown] Rendering ${source.length} characters of markdown in sync mode`)
+
+//     return unified()
+//         .use(remarkParse)
+//         .use(remarkMath)
+//         .use(remarkRehype)
+//         .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
+//         .use(rehypeStringify)
+//         .processSync(source)
+// }
+
 export const Markdown = ({ source }) => {
     const elementRef = useRef()
 
     useEffect(async () => {
-        const renderedHtml = await unified()
-            .use(remarkParse)
-            .use(remarkMath)
-            .use(remarkRehype)
-            .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
-            .use(rehypeStringify)
-            .process(source)
-
         if (elementRef.current) {
-            elementRef.current.innerHTML = renderedHtml
+            elementRef.current.innerHTML = await renderMarkdownAsync(source)
         }
     }, [source])
 

client/components/MarkdownEditor.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'preact/hooks'
+import { Markdown } from './Markdown.jsx'
+
+export const MarkdownEditor = ({ source, setSource }) => {
+    const editorRef = useRef()
+
+    useEffect(() => {
+        if (editorRef.current) {
+            // settare questo ad "auto" toglie l'altezza al contenitore che passa alla sua
+            // dimensione minima iniziale, ciò serve per permettere all'autosize della textarea di
+            // crescere e ridursi ma ha il problema che resetta lo scroll della pagina che deve
+            // essere preservato a mano
+            const oldScrollY = window.scrollY
+            editorRef.current.style.height = 'auto'
+            editorRef.current.style.height = editorRef.current.scrollHeight + 'px'
+            window.scrollTo(0, oldScrollY)
+        }
+    }, [source])
+
+    return (
+        <div class="markdown-editor">
+            <div class="editor">
+                <h1>Editor</h1>
+                <textarea
+                    onInput={e => setSource(e.target.value)}
+                    value={source}
+                    cols="60"
+                    ref={editorRef}
+                    placeholder="Scrivi una nuova soluzione..."
+                ></textarea>
+            </div>
+            <div class="preview">
+                <h1>Preview</h1>
+                <div class="preview-content">
+                    {source.trim().length ? (
+                        <Markdown source={source} />
+                    ) : (
+                        <div class="placeholder">Scrivi una nuova soluzione...</div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}

client/components/Problem.jsx

@@ -7,7 +7,6 @@ export const Problem = ({ id, content, createdBy }) => {
                 <div class="problem-title">
                     <a href={`/problem/${id}`}>Problema {id}</a>
                 </div>
-                {createdBy && <div class="problem-author">Creato da @{createdBy}</div>}
             </div>
             <div class="problem-content">
                 <Markdown source={content} />

client/components/Select.jsx

@@ -0,0 +1,12 @@
+export const Select = ({ options, value, setValue }) => (
+    <div class="input-select">
+        <select onInput={e => setValue?.(e.target.value)}>
+            {Object.entries(options).map(([k, v]) => (
+                <option value={k} selected={value === k}>
+                    {v}
+                </option>
+            ))}
+        </select>
+        <span class="material-symbols-outlined">expand_more</span>
+    </div>
+)

client/components/Solution.jsx

@@ -1,10 +1,24 @@
 import { Markdown } from './Markdown.jsx'
 
-export const Solution = ({ userId, content }) => {
+export const Solution = ({ userId, problemId, content }) => {
     return (
         <div class="solution">
             <div class="solution-header">
-                <div>@{userId}</div>
+                <div>
+                    Soluzione
+                    {userId && (
+                        <>
+                            {' '}
+                            di <a href={`/user/${userId}`}>@{userId}</a>
+                        </>
+                    )}
+                    {problemId && (
+                        <>
+                            {' '}
+                            per il <a href={`/problem/${problemId}`}>Problema {problemId}</a>
+                        </>
+                    )}
+                </div>
             </div>
             <div class="solution-content">
                 <Markdown source={content} />

client/entry-client.jsx

@@ -2,11 +2,3 @@ import { hydrate } from 'preact'
 import { App } from './App.jsx'
 
 hydrate(<App />, document.body)
-
-window.fetchServer = url => {
-    fetch(url, { credentials: 'include' })
-        .then(res => res.ok && res.json())
-        .then(data => {
-            console.log(data)
-        })
-}

client/hooks.jsx

@@ -1,32 +1,24 @@
 import { useEffect, useState } from 'preact/hooks'
 
 import { createContext } from 'preact'
+import { server } from './api.jsx'
 
 export const MetadataContext = createContext({})
 
 export const useCurrentUser = onLoaded => {
     const [user, setUser] = useState(null)
 
-    const logout = () => {
+    const logout = async () => {
+        await server.post('/api/logout')
         setUser(null)
     }
 
     useEffect(async () => {
-        const res = await fetch(`/api/current-user`, {
+        const user = await server.get('/api/current-user')
-            credentials: 'include',
-        })
-        const user = await res.json()
         setUser(user)
-
-        console.log(`Current user is`, user)
-
         onLoaded?.(user)
     }, [])
 
-    useEffect(() => {
-        console.log(user)
-    }, [user])
-
     return [user, logout]
 }
 
@@ -35,8 +27,8 @@ export const useReadResource = (url, initialValue) => {
 
     function refresh() {
         const controller = new AbortController()
-
+        const realUrl = typeof url === 'function' ? url() : url
-        fetch(url, { signal: controller.signal })
+        fetch(realUrl, { signal: controller.signal })
             .then(res => {
                 if (res.ok) {
                     return res.json()

client/pages/Admin.jsx

@@ -1,26 +1,46 @@
 import { route } from 'preact-router'
-import { useEffect } from 'preact/hooks'
+import { useEffect, useState } from 'preact/hooks'
+import { server } from '../api.jsx'
+import { Header } from '../components/Header.jsx'
+import { MarkdownEditor } from '../components/MarkdownEditor.jsx'
 import { useCurrentUser } from '../hooks.jsx'
 
-export const Admin = ({}) => {
+const CreateProblem = ({}) => {
+    const [source, setSource] = useState('')
+    const createProblem = async () => {
+        const id = await server.post('/api/problem', {
+            content: source,
+        })
+
+        route(`/problem/${id}`)
+    }
+
+    return (
+        <>
+            <MarkdownEditor {...{ source, setSource }} />
+            <button onClick={createProblem}>Aggiungi Problema</button>
+        </>
+    )
+}
+
+export const AdminPage = ({}) => {
     const [user] = useCurrentUser(user => {
-        if (!user || user.role !== 'admin') {
+        if (!user) {
+            route('/login', true)
+        } else if (user.role !== 'admin' && user.role !== 'moderator') {
             route('/', true)
         }
     })
 
     return (
-        <main class="admin">
+        user && (
-            <div class="logo">PHC / Problemi</div>
+            <main class="page-admin">
-            <div class="subtitle">
+                <Header {...{ user }} />
-                {user ? (
+                <div class="subtitle">Nuovo problema</div>
-                    <>
+                <CreateProblem />
-                        Logged in as {user.role} @{user.username}
+                <div class="subtitle">Soluzioni ancora da approvare/rifiutare</div>
-                    </>
+                ...
-                ) : (
+            </main>
-                    <a href="/login">Login</a>
+        )
-                )}
-            </div>
-        </main>
     )
 }

client/pages/Home.jsx

@@ -1,39 +1,33 @@
 import { route } from 'preact-router'
 import { useEffect, useState } from 'preact/hooks'
+import { Header } from '../components/Header.jsx'
 
 import { Problem } from '../components/Problem.jsx'
+import { Select } from '../components/Select.jsx'
 import { useReadResource, useCurrentUser } from '../hooks.jsx'
 
 export const HomePage = () => {
-    const [user, logout] = useCurrentUser()
+    const [user] = useCurrentUser()
-
-    const handleLogout = async () => {
-        await fetch(`/api/logout`, {
-            method: 'POST',
-        })
-
-        logout()
-    }
-
     const [problems] = useReadResource('/api/problems', [])
 
     return (
-        <main class="home">
+        <main class="page-home">
-            <div class="logo">PHC / Problemi</div>
+            <Header {...{ user }} />
-            <div class="subtitle">
-                {user ? (
-                    <>
-                        Logged in as {user.role} @{user.username} (
-                        <span class="link" onClick={handleLogout}>
-                            Logout
-                        </span>
-                        )
-                    </>
-                ) : (
-                    <a href="/login">Login</a>
-                )}
-            </div>
             <div class="board">
+                <div class="fill-row board-controls">
+                    <div class="sort-order">
+                        <Select
+                            value="oldest"
+                            options={{
+                                'latest': 'Prima più recenti',
+                                'oldest': 'Prima più antichi',
+                                'top-solved': 'Prima più risolti',
+                                'least-solved': 'Prima meno risolti',
+                            }}
+                        />
+                    </div>
+                </div>
+
                 {problems.map(p => (
                     <Problem {...p} />
                 ))}

client/pages/Login.jsx

@@ -1,6 +1,7 @@
 import { route } from 'preact-router'
 
 import { useState } from 'preact/hooks'
+import { Header } from '../components/Header.jsx'
 
 export const LoginPage = () => {
     const [username, setUsername] = useState('')
@@ -20,10 +21,9 @@ export const LoginPage = () => {
     }
 
     return (
-        <main class="login">
+        <main class="page-login">
-            <div class="logo">PHC / Problemi</div>
+            <Header noLogin />
             <div class="subtitle">Accedi</div>
-
             <div class="form">
                 <label for="login-username">Username</label>
                 <input

client/pages/Problem.jsx

@@ -1,5 +1,7 @@
 import { useContext, useEffect, useRef, useState } from 'preact/hooks'
-import { Markdown } from '../components/Markdown.jsx'
+import { server } from '../api.jsx'
+import { Header } from '../components/Header.jsx'
+import { MarkdownEditor } from '../components/MarkdownEditor.jsx'
 import { Problem } from '../components/Problem.jsx'
 import { Solution } from '../components/Solution.jsx'
 import { MetadataContext, useCurrentUser, useReadResource } from '../hooks.jsx'
@@ -11,49 +13,23 @@ export const ProblemPage = ({ id }) => {
     const [user] = useCurrentUser()
 
     const [source, setSource] = useState('')
-    const editorRef = useRef()
 
     const [{ content }] = useReadResource(`/api/problem/${id}`, { content: '' })
 
     const [solutions] = useReadResource(`/api/solutions?problem=${id}`, [])
 
     const sendSolution = async () => {
-        const res = await fetch(`/api/solution`, {
+        await server.post('/api/solution', {
-            method: 'POST',
+            problemId: id,
-            credentials: 'include',
+            content: source,
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                problemId: id,
-                content: source,
-            }),
         })
 
         location.reload()
     }
 
-    useEffect(() => {
-        if (editorRef.current) {
-            // settare questo ad "auto" toglie l'altezza al contenitore che passa alla sua
-            // dimensione minima iniziale, ciò serve per permettere all'autosize della textarea di
-            // crescere e ridursi ma ha il problema che resetta lo scroll della pagina che deve
-            // essere preservato a mano
-            const oldScrollY = window.scrollY
-            editorRef.current.style.height = 'auto'
-            editorRef.current.style.height = editorRef.current.scrollHeight + 'px'
-            window.scrollTo(0, oldScrollY)
-        }
-    }, [source])
-
     return (
-        <main class="problem">
+        <main class="page-problem">
-            <div class="logo">PHC / Problemi</div>
+            <Header {...{ user }} />
-            {user && (
-                <div class="subtitle">
-                    Logged in as {user.role} @{user.username}
-                </div>
-            )}
             <div class="subtitle">Testo del problema</div>
             <Problem id={id} content={content} />
             {solutions.length > 0 && (
@@ -66,39 +42,12 @@ export const ProblemPage = ({ id }) => {
                     </div>
                 </details>
             )}
-            {user ? (
+            {user && (
                 <>
                     <div class="subtitle">Invia una soluzione al problema</div>
-                    <div class="solution-editor">
+                    <MarkdownEditor {...{ source, setSource }} />
-                        <div class="editor">
+                    <button onClick={sendSolution}>Invia Soluzione</button>
-                            <h1>Editor</h1>
-                            <textarea
-                                onInput={e => setSource(e.target.value)}
-                                value={source}
-                                cols="60"
-                                ref={editorRef}
-                                placeholder="Scrivi una nuova soluzione..."
-                            ></textarea>
-                        </div>
-                        <div class="preview">
-                            <h1>Preview</h1>
-                            <div class="preview-content">
-                                {source.trim().length ? (
-                                    <Markdown source={source} />
-                                ) : (
-                                    <div class="placeholder">Scrivi una nuova soluzione...</div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                    <div class="submit-solution">
-                        <button onClick={sendSolution}>Invia Soluzione</button>
-                    </div>
                 </>
-            ) : (
-                <div class="subtitle">
-                    <a href="/login">Accedi</a> per inviare una soluzione
-                </div>
             )}
         </main>
     )

client/pages/Profile.jsx

@@ -0,0 +1,39 @@
+import { route } from 'preact-router'
+import { useState } from 'preact/hooks'
+import { server } from '../api.jsx'
+import { Header } from '../components/Header.jsx'
+import { Solution } from '../components/Solution.jsx'
+import { useCurrentUser, useReadResource } from '../hooks.jsx'
+
+export const ProfilePage = ({}) => {
+    const [solutions, setSolutions] = useState([])
+
+    const [user, logout] = useCurrentUser(async user => {
+        if (!user) {
+            route('/login', true)
+        }
+
+        setSolutions(await server.get(`/api/solutions?user=${user.username}`))
+    })
+
+    const handleLogout = () => {
+        logout()
+        route('/')
+    }
+
+    return (
+        user && (
+            <main class="page-profile">
+                <Header {...{ user }} />
+                <div class="subtitle">Le tue soluzioni</div>
+                <div class="solution-list">
+                    {solutions.map(({ problemId, content }) => (
+                        <Solution {...{ problemId, content }} />
+                    ))}
+                </div>
+                <div class="subtitle">Altro</div>
+                <button onClick={handleLogout}>Logout</button>
+            </main>
+        )
+    )
+}

client/styles/main.scss

@@ -1,6 +1,10 @@
 $device-s-width: 640px;
 $device-m-width: 1200px;
 
+:root {
+    --accent: #7b3a99;
+}
+
 // Normalize
 
 *,
@@ -58,6 +62,51 @@ input[type='text'] {
     color: #555;
 }
 
+.input-select {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+
+    cursor: pointer;
+    font-family: 'Lato';
+    font-weight: 600;
+    font-size: 18px;
+    color: #555;
+
+    border: 1px solid #c8c8c8;
+    padding: 0 0.5rem;
+    margin: 0;
+
+    box-shadow: -2px 2px 16px 0 #00000010;
+    border-radius: 0.25rem;
+
+    background: linear-gradient(180deg, #f0f0f0, #e8e8e8 20%, #e0e0e0 90%, #cdcdcd);
+
+    &:hover {
+        border: 1px solid #c4c4c4;
+        box-shadow: -2px 2px 20px 0 #00000010;
+        background: linear-gradient(180deg, #fff, #ededed 20%, #e8e8e8 90%, #c0c0c0);
+    }
+
+    select {
+        cursor: pointer;
+        height: 100%;
+
+        appearance: none;
+
+        padding: 0.5rem 0;
+        margin: 0;
+        border: none;
+        outline: none;
+        background: none;
+
+        font-family: 'Lato';
+        font-weight: 600;
+        font-size: 18px;
+        color: #555;
+    }
+}
+
 button {
     cursor: pointer;
 
@@ -88,7 +137,7 @@ a,
 a:visited {
     cursor: pointer;
 
-    color: #3a9999;
+    color: var(--accent);
     text-decoration: none;
 
     &:hover {
@@ -96,7 +145,13 @@ a:visited {
     }
 }
 
+//
 // Typography
+//
+
+.math-inline {
+    font-size: 95%;
+}
 
 p {
     margin: 0;
@@ -176,21 +231,12 @@ main {
 
     gap: 2rem;
 
-    .logo {
-        // font-size: 42px;
-        // font-family: 'EB Garamond';
-        // font-weight: 600;
-        font-size: 38px;
-        font-family: 'Lato';
-        font-weight: 300;
-    }
-
     .subtitle {
         font-size: 24px;
     }
 }
 
-main.home {
+main.page-home {
     .board {
         width: 100%;
         // min-width: 0;
@@ -200,171 +246,208 @@ main.home {
         gap: 2rem;
 
         justify-content: center;
+
+        .fill-row {
+            grid-column: 1 / -1;
+        }
+
+        .board-controls {
+            justify-self: start;
+        }
     }
 }
 
-main.problem {
+main.page-problem {
     summary {
         padding: 1rem;
         text-align: center;
 
         user-select: none;
     }
-
-    .solution-list {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
 }
 
 //
 // Components
 //
 
-main {
+.solution-list {
-    .problem {
+    display: flex;
-        padding: 1rem;
+    flex-direction: column;
+    gap: 1rem;
+}
 
-        max-width: 80ch;
+header {
+    display: grid;
+    place-content: center;
 
-        box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
+    width: 100%;
-        border-radius: 0.5rem;
+    position: relative;
-        background: #ffffff;
 
-        display: grid;
+    .logo {
-        grid-template-rows: auto 1fr;
+        font-size: 42px;
-        gap: 0.5rem;
+        font-family: 'Lato';
+        font-weight: 300;
 
-        .problem-header {
+        a:hover {
-            display: grid;
+            text-decoration: none;
-            grid-template-columns: auto;
+            border-bottom: 3px solid var(--accent);
-            gap: 0.25rem;
-
-            .problem-title {
-                font-size: 24px;
-                font-weight: 700;
-            }
-
-            .problem-author {
-                grid-row: 2;
-
-                font-size: 16px;
-                color: #000000dd;
-                // font-weight: 400;
-            }
-        }
-
-        .problem-content {
-            @extend .text-body;
         }
     }
 
-    .solution {
+    nav {
-        padding: 1rem;
+        position: absolute;
-
+        right: 0;
-        max-width: 80ch;
-
-        box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
-        border-radius: 0.5rem;
-        background: #ffffff;
-
-        display: grid;
-        grid-template-rows: auto 1fr;
-        gap: 0.5rem;
-
-        .solution-header {
-            display: grid;
-            grid-template-columns: auto;
-            gap: 0.25rem;
-        }
-
-        .solution-content {
-            @extend .text-body;
-        }
-    }
-
-    .solution-editor {
-        display: grid;
-        width: 100%;
-        grid-template-columns: repeat(2, 1fr);
 
+        display: flex;
         gap: 1rem;
 
-        .editor,
+        .nav-item {
-        .preview {
+            font-size: 24px;
-            width: 100%;
+            font-weight: 300;
-            max-width: 70ch;
 
-            display: flex;
+            a.active {
-            flex-direction: column;
+                border-bottom: 1px solid var(--accent);
-            align-items: center;
-
-            gap: 1rem;
-        }
-
-        .editor {
-            justify-self: end;
-
-            textarea {
-                font-family: 'DM Mono', monospace;
-                font-size: 18px;
-
-                resize: none;
-                overflow-y: hidden;
-
-                min-height: 8rem;
-            }
-        }
-
-        .preview {
-            justify-self: start;
-
-            .placeholder {
-                color: #444;
             }
 
-            .preview-content {
+            a:hover {
-                @extend .text-body;
+                text-decoration: none;
-
+                border-bottom: 2px solid var(--accent);
-                width: 100%;
-
-                padding: 1rem;
-
-                box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
-                border-radius: 0.25rem;
-                background: #ffffff;
             }
         }
     }
-
-    .form {
-        min-width: 50ch;
-
-        background: #e0e0e0;
-
-        display: grid;
-        grid-template-columns: auto 1fr;
-
-        border: 1px solid #c0c0c0;
-        border-radius: 1rem;
-
-        // box-shadow: -2px 4px 16px 4px #00000018, -2px 4px 4px 1px #00000018;
-
-        padding: 1.5rem 2rem 1rem;
-        gap: 1rem;
-
-        align-items: center;
-
-        .fill {
-            grid-column: span 2;
-            justify-self: center;
-        }
-    }
 }
 
-.math-inline {
+.problem {
-    font-size: 95%;
+    padding: 1rem;
+
+    max-width: 80ch;
+
+    box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
+    border-radius: 0.5rem;
+    background: #ffffff;
+
+    display: grid;
+    grid-template-rows: auto 1fr;
+    gap: 0.5rem;
+
+    .problem-header {
+        display: grid;
+        grid-template-columns: auto;
+        gap: 0.25rem;
+
+        .problem-title {
+            font-size: 24px;
+            font-weight: 400;
+        }
+    }
+
+    .problem-content {
+        @extend .text-body;
+    }
+}
+
+.solution {
+    padding: 1rem;
+
+    max-width: 80ch;
+
+    box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
+    border-radius: 0.5rem;
+    background: #ffffff;
+
+    display: grid;
+    grid-template-rows: auto 1fr;
+    gap: 0.5rem;
+
+    .solution-header {
+        display: grid;
+        grid-template-columns: auto;
+        gap: 0.25rem;
+
+        font-size: 18px;
+    }
+
+    .solution-content {
+        @extend .text-body;
+    }
+}
+
+.form {
+    min-width: 50ch;
+
+    background: #e0e0e0;
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+
+    border: 1px solid #c0c0c0;
+    border-radius: 1rem;
+
+    // box-shadow: -2px 4px 16px 4px #00000018, -2px 4px 4px 1px #00000018;
+
+    padding: 1.5rem 2rem 1rem;
+    gap: 1rem;
+
+    align-items: center;
+
+    .fill {
+        grid-column: span 2;
+        justify-self: center;
+    }
+}
+
+.markdown-editor {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(2, 1fr);
+
+    gap: 1rem;
+
+    .editor,
+    .preview {
+        width: 100%;
+        max-width: 70ch;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        gap: 1rem;
+    }
+
+    .editor {
+        justify-self: end;
+
+        textarea {
+            font-family: 'DM Mono', monospace;
+            font-size: 18px;
+
+            resize: none;
+            overflow-y: hidden;
+
+            min-height: 8rem;
+        }
+    }
+
+    .preview {
+        justify-self: start;
+
+        .placeholder {
+            color: #666;
+        }
+
+        .preview-content {
+            @extend .text-body;
+
+            width: 100%;
+
+            padding: 1rem;
+
+            box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
+            border-radius: 0.25rem;
+            background: #ffffff;
+        }
+    }
 }
 
 //
@@ -379,23 +462,69 @@ main {
 // On mobile
 @media screen and (max-width: $device-s-width), (pointer: coarse) {
     main {
-        .solution-editor {
+        padding: 1rem 1rem 6rem;
-            grid-template-columns: auto;
+
-            grid-template-rows: auto auto;
+        &.page-home {
+            .board {
+                gap: 1rem;
+            }
         }
     }
+
+    header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        gap: 2rem;
+
+        nav {
+            position: relative;
+            right: unset;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+
+    .problem {
+        padding: 0.75rem;
+    }
+
+    .markdown-editor {
+        grid-template-columns: auto;
+        grid-template-rows: auto auto;
+    }
+
+    .form {
+        width: 100%;
+        padding: 1rem;
+
+        min-width: unset;
+
+        display: flex;
+        flex-direction: column;
+
+        label {
+            align-self: start;
+        }
+    }
+
+    textarea,
+    .markdown-editor .preview .preview-content {
+        padding: 0.75rem;
+    }
 }
 
 @media screen and (max-width: $device-m-width), (pointer: coarse) {
-    main {
+    .markdown-editor {
-        .solution-editor {
+        grid-template-columns: auto;
-            grid-template-columns: auto;
+        grid-template-rows: auto auto;
-            grid-template-rows: auto auto;
 
-            .preview,
+        .preview,
-            .editor {
+        .editor {
-                justify-self: center;
+            justify-self: center;
-            }
         }
     }
 }

index.html

@@ -17,6 +17,10 @@
             href="https://fonts.googleapis.com/css2?family=DM+Mono&display=swap"
             rel="stylesheet"
         />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
+            rel="stylesheet"
+        />
 
         <link rel="stylesheet" href="/node_modules/katex/dist/katex.css" />
         <link rel="stylesheet" href="/client/styles/main.scss" />

server.js

@@ -8,7 +8,7 @@ import { createServer as createViteServer } from 'vite'
 
 import { createApiRouter } from './server/routes.js'
 
-const HTML_ROUTES = ['/', '/login', '/problem/:id', '/admin']
+const HTML_ROUTES = ['/', '/login', '/problem/:id', '/admin', '/profile']
 
 const config = {
     isDevelopment: process.env.MODE === 'development',

server/db/database.js

@@ -112,6 +112,24 @@ export const getUser = (db, id) =>
 // Problems
 //
 
+export const createProblem = (db, { content, createdBy }) =>
+    withDatabase(db, state => {
+        const nextId = (
+            Object.keys(state.problems)
+                .map(k => parseInt(k))
+                .reduce((acc, id) => Math.max(acc, id)) + 1
+        ).toString()
+
+        state.problems[nextId] = {
+            id: nextId,
+            content,
+            createdBy,
+            createdAt: new Date().toJSON(),
+        }
+
+        return nextId
+    })
+
 export const getProblem = (db, id) =>
     withDatabase(db, state => {
         return state.problems[id]

server/routes.js

@@ -8,6 +8,7 @@ import express from 'express'
 import { createStatusRouter, PingRouter } from './middlewares.js'
 import {
     createDatabase,
+    createProblem,
     createSolution,
     getProblem,
     getProblems,
@@ -92,6 +93,25 @@ export async function createApiRouter() {
         res.json(await getProblem(db, req.params.id))
     })
 
+    r.post('/api/problem', async (req, res) => {
+        const user = await getRequestUser(req)
+        if (!user) {
+            res.sendStatus(401)
+            return
+        }
+        if (user.role !== 'admin' && user.role !== 'moderator') {
+            res.sendStatus(401)
+            return
+        }
+
+        const id = await createProblem(db, {
+            content: req.body.content,
+            createBy: user.username,
+        })
+
+        res.json(id)
+    })
+
     r.get('/api/solutions', async (req, res) => {
         let queryUserId = req.query.user
         let queryProblemId = req.query.problem
@@ -146,10 +166,5 @@ export async function createApiRouter() {
         res.json(requestedUser)
     })
 
-    // r.post('/api/user/:id', async (req, res) => {
-    //     await updateUser(db, req.params.id, req.body)
-    //     res.sendStatus(200)
-    // })
-
     return r
 }