Skip to content

Commit

Permalink
enhance(docs): add new use cases and improve website structure (#4399)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rschlaefli
rschlaefli authored Dec 20, 2024
1 parent 54fdd47 commit 6d8aa25
Show file tree
Hide file tree
Showing 25 changed files with 3,418 additions and 2,348 deletions.
22 changes: 10 additions & 12 deletions apps/docs/docusaurus.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import remarkMath from 'remark-math'

const config: Config = {
future: {
experimental_faster: true,
experimental_faster: false,
},
trailingSlash: true,
title: 'KlickerUZH',
Expand Down Expand Up @@ -72,17 +72,9 @@ const config: Config = {
},
}
},
// [
// '@gabrielcsapo/docusaurus-plugin-matomo',
// {
// matomoUrl: 'https://webstats.uzh.ch',
// siteUrl: 'https://www.klicker.uzh.ch',
// siteId: '356',
// matomoPhpScript: 'matomo.php',
// matomoJsScript: 'matomo.js',
// dev: true,
// },
// ],

'docusaurus-plugin-matomo',

[
'@docusaurus/plugin-ideal-image',
{
Expand Down Expand Up @@ -110,6 +102,12 @@ const config: Config = {
],
],
themeConfig: {
matomo: {
matomoUrl: 'https://webstats.uzh.ch',
siteId: '356',
phpLoader: '/matomo.php',
jsLoader: '/matomo.js',
},
announcementBar: {
id: 'release_v3',
content:
Expand Down
22 changes: 11 additions & 11 deletions apps/docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,28 @@
"version": "3.3.0-alpha.10",
"license": "AGPL-3.0",
"devDependencies": {
"@docusaurus/core": "~3.6.0",
"@docusaurus/faster": "~3.6.0",
"@docusaurus/module-type-aliases": "~3.6.0",
"@docusaurus/plugin-client-redirects": "~3.6.0",
"@docusaurus/plugin-ideal-image": "~3.6.0",
"@docusaurus/preset-classic": "~3.6.0",
"@docusaurus/theme-classic": "~3.6.0",
"@docusaurus/theme-common": "~3.6.0",
"@docusaurus/tsconfig": "~3.6.0",
"@docusaurus/types": "~3.6.0",
"@docusaurus/core": "~3.6.3",
"@docusaurus/faster": "~3.6.3",
"@docusaurus/module-type-aliases": "~3.6.3",
"@docusaurus/plugin-client-redirects": "~3.6.3",
"@docusaurus/plugin-ideal-image": "~3.6.3",
"@docusaurus/preset-classic": "~3.6.3",
"@docusaurus/theme-classic": "~3.6.3",
"@docusaurus/theme-common": "~3.6.3",
"@docusaurus/tsconfig": "~3.6.3",
"@docusaurus/types": "~3.6.3",
"@fortawesome/fontawesome-svg-core": "~6.6.0",
"@fortawesome/free-brands-svg-icons": "~6.6.0",
"@fortawesome/free-regular-svg-icons": "~6.6.0",
"@fortawesome/free-solid-svg-icons": "~6.6.0",
"@fortawesome/react-fontawesome": "~0.2.2",
"@gabrielcsapo/docusaurus-plugin-matomo": "~0.1.2",
"@mdx-js/react": "~3.1.0",
"@tailwindcss/typography": "~0.5.15",
"@types/react": "^18.3.11",
"@uzh-bf/design-system": "3.0.0-alpha.35",
"autoprefixer": "~10.4.20",
"cross-env": "~7.0.3",
"docusaurus-plugin-matomo": "~0.0.8",
"nodemon": "~3.1.7",
"npm-run-all": "~4.1.5",
"postcss": "~8.4.47",
Expand Down
124 changes: 104 additions & 20 deletions apps/docs/src/components/usecases/UseCase.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,30 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core'
import {
faBook,
faBookOpen,
faCircleCheck,
faHandshake,
faLightbulb,
faToolbox,
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { H1, H2, Tag } from '@uzh-bf/design-system'
import { USE_CASES } from '../../constants'
import UseCaseLayout from './UseCaseLayout'

import { USE_CASES } from '../../constants'
interface SectionHeaderProps {
icon: IconProp
header: string
}

function SectionHeader({ icon, header }: SectionHeaderProps) {
return (
<div className="mb-4 flex flex-row items-center gap-4 rounded bg-slate-100 p-4 text-slate-700">
<FontAwesomeIcon icon={icon} className="text-3xl" />
<H2 className={{ root: 'mb-0' }}>{header}</H2>
</div>
)
}

interface UseCaseProps {
slug: string
Expand All @@ -13,38 +36,99 @@ function UseCase({ slug }: UseCaseProps) {
return (
<UseCaseLayout path={`/use_cases/${slug}`}>
<img
className={'max-h-20 w-full object-cover md:max-h-80'}
className="h-32 w-full object-cover sm:h-48 md:h-64 lg:h-80"
src={useCase.headerImgSrc}
/>
<div className="grid grid-cols-3 gap-4 md:mt-4 md:gap-8">
<div className="order-1 col-span-3">
<H1>{useCase.title}</H1>
<div className="grid grid-cols-1 gap-4 md:p-4 lg:grid-cols-3 lg:gap-8 lg:p-0 lg:pt-8">
<div className="col-span-1 lg:col-span-3">
<H1 className={{ root: 'mb-4' }}>{useCase.title}</H1>
<div className="flex flex-row flex-wrap gap-2">
{useCase.tags?.map((tag) => <Tag key={tag} label={tag} />)}
</div>
</div>
<div className="prose order-3 col-span-3 max-w-none md:order-2 md:col-span-2">
<section id="Introduction">
<H2 className={{ root: 'mt-0' }}>Introduction</H2>
{useCase.introduction}
</section>
<section id="Background">
<H2>Background</H2>

<div className="prose sticky top-4 order-1 col-span-1 h-fit bg-slate-100 p-4 shadow-sm md:order-2 lg:rounded-lg">
<H2 className={{ root: 'mb-2 text-slate-600' }}>Goals</H2>
<div className="space-y-2 text-sm">
{useCase.goals?.map((goal, index) => {
// Check if the goal is a nested structure
if (Array.isArray(goal)) {
const [category, subgoals] = goal
return (
<div key={index} className="space-y-2">
<div className="font-bold text-slate-600">{category}</div>
{subgoals.map((subgoal, subIndex) => (
<div key={subIndex} className="flex items-start gap-3">
<FontAwesomeIcon
icon={faCircleCheck}
className="mt-1 text-slate-400"
/>
<div>{subgoal}</div>
</div>
))}
</div>
)
}
// Handle flat goal structure
return (
<div key={index} className="flex items-start gap-3">
<FontAwesomeIcon
icon={faCircleCheck}
className="mt-1 text-slate-400"
/>
<div>{goal}</div>
</div>
)
})}
</div>

{useCase.references && (
<div className="mt-8">
<H2 className={{ root: 'mb-2 text-slate-600' }}>References</H2>
<div className="space-y-2 text-sm">
{useCase.references?.map((reference, index) => (
<div key={index} className="flex items-start gap-3">
<FontAwesomeIcon
icon={faBook}
className="mt-1 text-slate-400"
/>
<div>{reference}</div>
</div>
))}
</div>
</div>
)}
</div>

<div className="prose order-2 col-span-1 max-w-none md:order-1 lg:col-span-2">
<section id="Introduction">{useCase.introduction}</section>
</div>

<div className="prose order-3 col-span-1 max-w-none lg:col-span-3">
<section id="Background" className="mb-12">
<SectionHeader icon={faBookOpen} header="Background" />
{useCase.background}
</section>
<section id="Scenario">
<H2>Scenario Description with KlickerUZH</H2>

<section id="Scenario" className="mb-12">
<SectionHeader
icon={faToolbox}
header="Scenario Description with KlickerUZH"
/>
{useCase.scenario}
</section>
<section id="Learnings">
<H2>Our Learnings</H2>

<section id="Learnings" className="mb-8">
<SectionHeader icon={faLightbulb} header="Our Learnings" />
{useCase.learnings}
</section>
</div>

<div className="prose order-2 col-span-3 bg-slate-50 p-4 md:order-2 md:col-span-1 md:rounded">
<H2>Goals</H2>
<ul>{useCase.goals?.map((goal) => <li key={goal}>{goal}</li>)}</ul>
{useCase.acknowledgements && (
<section id="Acknowledgements" className="mb-8">
<SectionHeader icon={faHandshake} header="Acknowledgements" />
{useCase.acknowledgements}
</section>
)}
</div>
</div>
</UseCaseLayout>
Expand Down
Loading

0 comments on commit 6d8aa25

Please sign in to comment.