Intermediate refactoring...
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
import Router from 'preact-router'
|
||||
|
||||
import { HomePage } from './pages/Home.jsx'
|
||||
import { LoginPage } from './pages/Login.jsx'
|
||||
import { ProblemPage } from './pages/Problem.jsx'
|
||||
|
||||
export const App = ({ path }) => (
|
||||
<Router>
|
||||
<HomePage path="/" />
|
||||
<LoginPage path="/login" />
|
||||
<ProblemPage path="/problem/:id" />
|
||||
</Router>
|
||||
)
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useSignal } from '@preact/signals'
|
||||
import { useEffect, useMemo } from 'preact/hooks'
|
||||
|
||||
import URLPattern from 'url-pattern'
|
||||
|
||||
export const Router = ({ pages }) => {
|
||||
const compiledRoutes = useMemo(
|
||||
() =>
|
||||
Object.entries(pages).map(([pattern, Page]) => ({
|
||||
pattern: new URLPattern(pattern),
|
||||
Page,
|
||||
})),
|
||||
[pages]
|
||||
)
|
||||
|
||||
const routerUrl = useSignal(location.hash.slice(1))
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('hashchange', () => {
|
||||
routerUrl.value = location.hash.slice(1)
|
||||
})
|
||||
}, [])
|
||||
|
||||
const route = compiledRoutes.flatMap(({ pattern, Page }) => {
|
||||
const m = pattern.match(routerUrl.value.split('?', 1)[0])
|
||||
return m ? [{ Page, params: m }] : []
|
||||
})?.[0]
|
||||
|
||||
if (!route) {
|
||||
console.log(`Invalid route "${routerUrl.value}", redirecting to homepage`)
|
||||
|
||||
location.href = '/#/'
|
||||
routerUrl.value = '/'
|
||||
|
||||
return <>Redirecting...</>
|
||||
}
|
||||
|
||||
const { Page, params } = route
|
||||
|
||||
const queryPart =
|
||||
routerUrl.value.indexOf('?') === -1
|
||||
? ''
|
||||
: routerUrl.value.slice(routerUrl.value.indexOf('?') + 1)
|
||||
console.log(queryPart)
|
||||
|
||||
const queryParams =
|
||||
queryPart?.length > 0
|
||||
? Object.fromEntries(
|
||||
queryPart.split('&').map(kvPart => {
|
||||
const eqIndex = kvPart.indexOf('=')
|
||||
return eqIndex === -1
|
||||
? [kvPart, true]
|
||||
: [
|
||||
kvPart.slice(0, eqIndex),
|
||||
decodeURIComponent(kvPart.slice(eqIndex + 1)),
|
||||
]
|
||||
})
|
||||
)
|
||||
: {}
|
||||
|
||||
return <Page params={params} query={queryParams} />
|
||||
}
|
||||
|
||||
export const Link = ({ page, params, query, children }) => {
|
||||
for (const [key, value] of Object.entries(params ?? {})) {
|
||||
page = page.replace(':' + key, encodeURIComponent(value))
|
||||
}
|
||||
|
||||
let targetHref = page
|
||||
if (query) {
|
||||
targetHref +=
|
||||
'?' +
|
||||
Object.entries(query ?? {})
|
||||
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
|
||||
.join('&')
|
||||
}
|
||||
|
||||
return <a href={'/#' + targetHref}>{children}</a>
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { useEffect, useRef } from 'preact/hooks'
|
||||
|
||||
import { unified } from 'unified'
|
||||
import remarkParse from 'remark-parse'
|
||||
import remarkMath from 'remark-math'
|
||||
import remarkRehype from 'remark-rehype'
|
||||
import rehypeKatex from 'rehype-katex'
|
||||
import rehypeStringify from 'rehype-stringify'
|
||||
|
||||
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
|
||||
}
|
||||
}, [source])
|
||||
|
||||
return <div class="markdown" ref={elementRef}></div>
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Link } from '../Router.jsx'
|
||||
import { Markdown } from './Markdown.jsx'
|
||||
|
||||
export const Problem = ({ id, content }) => {
|
||||
return (
|
||||
<div class="problem">
|
||||
<div class="problem-header">
|
||||
<div class="problem-title">
|
||||
<Link page={`/problem/:id`} params={{ id }}>
|
||||
Problema {id}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem-content">
|
||||
<Markdown source={content} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
|
||||
export const useUser = () => {
|
||||
const [username, setUsername] = useState(null)
|
||||
|
||||
useEffect(async () => {
|
||||
const res = await fetch(`/api/current-user`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
const username = await res.json()
|
||||
setUsername(username)
|
||||
}, [])
|
||||
|
||||
return { username }
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Problem } from '../components/Problem.jsx'
|
||||
import { useUser } from '../hooks.jsx'
|
||||
|
||||
export const HomePage = () => {
|
||||
const { username } = useUser()
|
||||
|
||||
const logout = async () => {
|
||||
await fetch(`/api/logout`, {
|
||||
method: 'POST',
|
||||
})
|
||||
|
||||
location.reload()
|
||||
}
|
||||
|
||||
const problems = Array.from({ length: 20 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
content:
|
||||
`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n`.repeat(
|
||||
((i + 2) % 4) + 1
|
||||
),
|
||||
}))
|
||||
|
||||
return (
|
||||
<main class="home">
|
||||
<div class="logo">PHC / Problemi</div>
|
||||
<div class="subtitle">
|
||||
{username ? (
|
||||
<>
|
||||
Logged in as {username} (
|
||||
<span class="link" onClick={() => logout()}>
|
||||
Logout
|
||||
</span>
|
||||
)
|
||||
</>
|
||||
) : (
|
||||
<a href="/login">Login</a>
|
||||
)}
|
||||
</div>
|
||||
<div class="board">
|
||||
{problems.map(p => (
|
||||
<Problem {...p} />
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useState } from 'preact/hooks'
|
||||
|
||||
export const LoginPage = () => {
|
||||
const [username, setUsername] = useState('')
|
||||
|
||||
const login = async () => {
|
||||
await fetch(`/api/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username,
|
||||
}),
|
||||
})
|
||||
|
||||
location.href = '/#/'
|
||||
}
|
||||
|
||||
return (
|
||||
<main class="login">
|
||||
<div class="logo">PHC / Problemi</div>
|
||||
<div class="subtitle">Accedi</div>
|
||||
|
||||
<div class="form">
|
||||
<label for="login-username">Username</label>
|
||||
<input
|
||||
id="login-username"
|
||||
type="text"
|
||||
value={username}
|
||||
onInput={e => setUsername(e.target.value)}
|
||||
/>
|
||||
|
||||
<div class="fill">
|
||||
<button onClick={() => login()}>Accedi</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { useEffect, useRef, useState } from 'preact/hooks'
|
||||
import { Markdown } from '../components/Markdown.jsx'
|
||||
import { Problem } from '../components/Problem.jsx'
|
||||
|
||||
export const ProblemPage = ({ id }) => {
|
||||
const [source, setSource] = useState('')
|
||||
const editorRef = useRef()
|
||||
|
||||
const sendSolution = async () => {
|
||||
const res = await fetch(`/api/problem/${id}/new-solution`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
source,
|
||||
}),
|
||||
})
|
||||
|
||||
console.log(await res.json())
|
||||
}
|
||||
|
||||
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">
|
||||
<div class="logo">PHC / Problemi</div>
|
||||
<div class="subtitle">Testo del problema</div>
|
||||
<Problem
|
||||
id={id}
|
||||
content={`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n\n`.repeat(
|
||||
5
|
||||
)}
|
||||
/>
|
||||
<div class="subtitle">Invia una soluzione al problema</div>
|
||||
<div class="solution-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>
|
||||
<div class="submit-solution">
|
||||
<button onClick={sendSolution}>Invia Soluzione</button>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
$device-s-width: 640px;
|
||||
$device-m-width: 1200px;
|
||||
|
||||
// Normalize
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: none;
|
||||
outline: gray;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.25rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
border: none;
|
||||
outline: gray;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding: 0.5rem;
|
||||
|
||||
box-shadow: -2px 4px 4px 0 #00000020;
|
||||
border-radius: 0.25rem;
|
||||
background: #ffffff;
|
||||
|
||||
font-family: 'Lato';
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
font-family: 'Lato';
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
|
||||
border: 1px solid #c8c8c8;
|
||||
padding: 0.5rem 2rem;
|
||||
|
||||
box-shadow: -2px 4px 16px 0 #00000010, -2px 4px 4px 0 #00000010;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
background: linear-gradient(180deg, #f0f0f0, #dfdfdf 20%, #d8d8d8 80%, #c0c0c0);
|
||||
|
||||
transition: all 100ms ease-in;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #c4c4c4;
|
||||
box-shadow: -2px 4px 20px 4px #00000010, -2px 4px 6px 2px #00000010;
|
||||
background: linear-gradient(180deg, #f8f8f8, #e4e4e4 20%, #e4e4e4 80%, #c8c8c8);
|
||||
}
|
||||
}
|
||||
|
||||
.link,
|
||||
a,
|
||||
a:visited {
|
||||
cursor: pointer;
|
||||
|
||||
color: #3a9999;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
$base-font-size: 16px;
|
||||
$heading-scale: 1.25;
|
||||
|
||||
@function pow($number, $exponent) {
|
||||
$value: 1;
|
||||
|
||||
@if $exponent > 0 {
|
||||
@for $i from 1 through $exponent {
|
||||
$value: $value * $number;
|
||||
}
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@for $i from 1 through 4 {
|
||||
h#{$i} {
|
||||
margin: 0;
|
||||
|
||||
$factor: pow($heading-scale, 4 - $i);
|
||||
font-size: $base-font-size * $factor;
|
||||
font-weight: 500;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: 0.5rem * $factor;
|
||||
}
|
||||
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
.text-body {
|
||||
font-family: 'EB Garamond', serif;
|
||||
font-weight: 400;
|
||||
font-size: 21px;
|
||||
|
||||
line-height: 1.41;
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Structure
|
||||
//
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2rem 2rem 6rem;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
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 {
|
||||
.board {
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(60ch, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
main {
|
||||
.problem {
|
||||
padding: 1rem;
|
||||
// border: 1px solid #ddd;
|
||||
|
||||
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;
|
||||
|
||||
max-width: 80ch;
|
||||
|
||||
.problem-header {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
|
||||
.problem-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-content {
|
||||
@extend .text-body;
|
||||
}
|
||||
}
|
||||
|
||||
.solution-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: #444;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
min-width: 50ch;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
// border: 2px solid #ccc;
|
||||
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 {
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
//
|
||||
// Mobile
|
||||
//
|
||||
|
||||
// Not on mobile
|
||||
@media screen and (min-width: $device-s-width) and (pointer: fine) {
|
||||
// ...
|
||||
}
|
||||
|
||||
// On mobile
|
||||
@media screen and (max-width: $device-s-width), (pointer: coarse) {
|
||||
main {
|
||||
.solution-editor {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $device-m-width), (pointer: coarse) {
|
||||
main {
|
||||
.solution-editor {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
.preview,
|
||||
.editor {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user