Fix markdown usage error: p elements can't nest!

package.json

@@ -22,6 +22,7 @@
     "react": "18.2.0",
     "react-bootstrap": "^2.7.4",
     "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
     "typescript": "5.0.4"
   }
 }

src/PersonalData.ts

@@ -12,37 +12,84 @@ export const personalData: PersonalData = {
         {icon: 'telephone', text: '+420 111 222 333'},
         {icon: 'geo-alt', text: 'Brno, Czechia'}
     ],
+
     jobs: {
         current: {
-            position: 'Janitor',
+            position: 'Senior Software Development Manager (UI Platform)',
-            company: 'Cleaners Limited',
+            company: 'Oracle|NetSuite',
             timerange: '2022 - present',
-            description: 'Cleanup duty 24/7.',
+            description: `Engineering lead for multiple UI Platform teams. Development of UI frameworks, components and tools.
+            Leading a UI testing architecture group, supplemental product owner.`,
+            tags: ['TypeScript', 'Preact', 'NodeJs', 'Oracle JET', 'Java', 'Git']
         },
         previous: [
             {
-                position: 'CEO',
+                position: 'Software Development Manager (UI Platform)',
-                company: 'CryptoDancers',
+                company: 'Oracle|NetSuite',
-                timerange: '2019 - 2022',
+                timerange: '2020 - 2022',
-                description: 'Revolutionizing the crypto world.',
+                description: 'Engineering lead for a UI Platform team. Development of UI components. Supplementing a product owner when bootstrapping a team.',
+                tags: ['TypeScript', 'Preact', 'NodeJs', 'Oracle JET', 'Java', 'Git']
+            },
+            {
+                position: 'Software Development Manager (ERP, Tax)',
+                company: 'Oracle|NetSuite',
+                timerange: '2017 - 2020',
+                description: 'Developer lead for ERP: Tax. Design and implementation of a pluggable Tax calculation engine. Coordination of multiple squads supporting both the legacy and the next-gen systems concurrently.',
+                tags: ['Java', 'Oracle SQL', 'JavaScript', 'Perforce', 'Git', 'Software Architecture']
+            },
+            {
+                position: 'Senior Software Engineer (ERP, Tax)',
+                company: 'Oracle|NetSuite',
+                timerange: '2013 - 2017',
+                description: `Development of Tax calculation and reporting modules in a cloud ERP system.
+                Large-scale refactoring of legacy code. Introduction of a pluggable architecture.`,
+                tags: ['Java', 'Oracle SQL', 'JavaScript', 'Perforce', 'Legacy code refactoring']
+            },
+            {
+                position: 'Software Engineer',
+                company: 'Q2 Interactive',
+                timerange: '2009 - 2013',
+                description: `Development and project leadership of multiple web applications:
+                - CRM system (PHP backend server, JavaScript frontend, Android client app),
+                - Accounting web app (PHP, JavaScript),
+                - e-commerce sites (Magento),
+                - Linux server maintenance.`,
+                tags: ['PHP', 'Java', 'JavaScript', 'MySQL', 'Server hosting', 'Linux', 'Android', 'Subversion (SVN)']
             }
         ]
     },
+
+    projects: {
+        current: {
+            position: `Personal projects`,
+            description: `Various hardware and software projects. Usually open sourced and published on [projects.dejvino.com](https://projects.dejvino.com) .
+            These include video games, utilities, 3D models, devices with embedded microcontrollers etc.`,
+            tags: ['Java', 'Python', 'C/C++', 'Embedded devices', 'OpenSCAD', 'TypeScript', 'Linux', 'Git', 'Self-hosting']
+        }
+    },
+
     education: {
         previous: [
             {
-                position: 'Information Technology (unfinished)',
+                position: `Master's degree, Parallel and Distributed Systems`,
-                company: 'University of Benimoto',
+                company: `Faculty of Informatics, Masaryk University Brno`,
-                timerange: '2010 - 2017',
+                timerange: '2011 - 2013',
-                description: '',
+                description: `Master's thesis: Efficient computation and visualization of correlations in medical signals.`,
+            },
+            {
+                position: `Bachelor's degree, Parallel and Distributed Systems`,
+                company: `Faculty of Informatics, Masaryk University Brno`,
+                timerange: '2008 - 2011',
+                description: `Bachelor's thesis: Parallel implementation of force-field decompression algorithm.`,
             }
         ]
     },
+
     skills: {
-        primary: ['Java', 'TypeScript', 'JavaScript'],
+        primary: ['Java', 'TypeScript', 'JavaScript', 'Engineering leadership', 'Linux'],
-        secondary: ['Kotlin', 'Go'],
+        secondary: ['SQL', 'Kotlin', 'Go', 'C/C++', 'NodeJs', 'Git', 'Preact', 'Embedded devices'],
         languages: ['Czech (native)', 'English (proficient)', 'German (elementary)'],
         others: ['Driver\'s license (B)']
     },
-    interests: ['Guitars and Heavy Metal', 'Mazda MX-5', 'DIY electronics'],
+    interests: ['Guitars', 'Heavy Metal', 'Mazda MX-5', 'DIY electronics', 'Linux', 'Open source'],
 };

src/PersonalDataTypes.ts

@@ -5,9 +5,10 @@ export type Contact = {
 
 export type Job = {
     position: string,
-    company: string,
+    company?: string,
-    timerange: string,
+    timerange?: string,
-    description: string
+    description: string,
+    tags?: string[],
 }
 
 export type Jobs = {
@@ -17,6 +18,8 @@ export type Jobs = {
 
 export type Education = Jobs;
 
+export type Projects = Jobs;
+
 export type Skills = {
     primary: string[],
     secondary?: string[],
@@ -30,6 +33,7 @@ export type PersonalData = {
     brief: string,
     contacts: Contact[],
     jobs: Jobs,
+    projects?: Projects,
     education?: Education,
     skills: Skills,
     interests: string[]

src/app/components/AboutBrief.tsx

@@ -1,15 +1,14 @@
 import React, { useContext } from 'react';
 import Container from 'react-bootstrap/Container';
-import Image from 'react-bootstrap/Image'
 import { usePersonContext } from '../hooks/PersonContext';
-import { Col, Row } from 'react-bootstrap';
+import md from './Markdown';
 
 export default function AboutBrief() {
     const person = usePersonContext()
     return (
       <Container className='about-brief' fluid>
         <h1>{person.name}</h1>
-        <p className='brief'>{person.brief}</p>
+        <div className='brief'>{md(person.brief)}</div>
       </Container>
     )
 }

src/app/components/Contacts.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react'
 import { usePersonContext } from '../hooks/PersonContext'
 import Container from 'react-bootstrap/esm/Container'
-import { useAutoFocus } from '../hooks/FocusedElement'
 import { Col, Row } from 'react-bootstrap'
 
 export function Contact(props: {icon?: string, text: string}) {
@@ -30,9 +29,8 @@ export function Contact(props: {icon?: string, text: string}) {
 
 export function Contacts() {
     const person = usePersonContext()
-    const focus = useAutoFocus<HTMLDivElement>('contacts')
     return (
-        <Container ref={focus} className='contacts' fluid>
+        <Container className='contacts' fluid>
             <Row>
                 <h2>Contacts</h2>
             </Row>

src/app/components/Education.tsx

@@ -1,9 +1,9 @@
 
 import React from 'react';
 import { usePersonContext } from '../hooks/PersonContext';
-import JobHistory from './JobHistory';
+import JobHistory from './job/JobsHistory';
 
-export default function WorkExperience() {
+export default function Education() {
     const person = usePersonContext()
 
     return person.education ? (

src/app/components/JobCard.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import Card from 'react-bootstrap/Card';
-import { useAutoFocus, useFocusedElement } from '../hooks/FocusedElement';
-
-export type Props = {
-    heading?: string,
-    position: string,
-    timerange: string,
-    company: string, 
-    description: string
-};
-
-export default function JobCard(props: Props) {
-    const focusRef = useAutoFocus<HTMLDivElement>([props.position, props.company, props.timerange].join(' - '))
-    return (
-        <Card ref={focusRef} className='job-card'>
-            {props.heading && (
-                <Card.Header>{props.heading}</Card.Header>
-            )}
-            <Card.Body>
-                <Card.Title>{props.position}</Card.Title>
-                <Card.Subtitle>
-                    <span className='company-name'>{props.company}</span>, <span className='timerange'>{props.timerange}</span>
-                    </Card.Subtitle>
-                <Card.Text>{props.description}</Card.Text>
-            </Card.Body>
-        </Card>
-    );
-}

src/app/components/JobHistory.tsx

@@ -1,94 +0,0 @@
-
-import React from 'react';
-import Container from 'react-bootstrap/Container';
-import Col from 'react-bootstrap/Col';
-import Row from 'react-bootstrap/Row';
-import JobCard from './JobCard';
-import { partition } from '../utils';
-import { Job, Jobs } from '@/PersonalDataTypes';
-import useSize from '../hooks/Size';
-import { Accordion } from 'react-bootstrap';
-
-type JobListProps = {
-  jobs: Jobs,
-  entriesPerRow?: number,
-  currentHeading?: string,
-}
-
-export type Props = {
-  heading: string,
-} & JobListProps
-
-const defaultProps = {
-  entriesPerRow: 2,
-  currentHeading: 'Currently',
-}
-
-function FullList(props: JobListProps) {
-  const {jobs} = props
-  const config = {...defaultProps, ...props}
-  return (
-    <Container>
-      {jobs.current && (
-      <Row>
-        <Col>
-          <JobCard heading={config.currentHeading} {...jobs.current} />
-        </Col>
-      </Row>
-      )}
-      {partition(jobs.previous, config.entriesPerRow).map((jobs, index) => (
-      <Row key={index}>
-        {(jobs.map((job, subindex) => (
-        <Col key={index + '_' + subindex}>
-          <JobCard {...job} />
-        </Col>
-        )))}
-      </Row>
-      ))}
-    </Container>
-  )
-}
-
-function SmallList(props: JobListProps) {
-  const {jobs} = props
-  const config = {...defaultProps, ...props}
-  function jobTitle(job: Job) {
-    return `${job.position} at ${job.company}, ${job.timerange}`
-  }
-  return (
-    <Accordion defaultActiveKey={jobs.current ? 'current' : 'previous-0'} alwaysOpen>
-      {jobs.current && (
-      <Accordion.Item eventKey="current">
-        <Accordion.Header>{config.currentHeading}:<br />{jobTitle(jobs.current)} </Accordion.Header>
-        <Accordion.Body>
-          {jobs.current.position}
-        </Accordion.Body>
-      </Accordion.Item>
-      )}
-      {jobs.previous?.map((job, index) => (
-      <Accordion.Item eventKey={`previous-${index}`} key={index}>
-        <Accordion.Header>{jobTitle(job)}</Accordion.Header>
-        <Accordion.Body>
-        {job.description}
-        </Accordion.Body>
-      </Accordion.Item>
-      ))}
-    </Accordion>
-  )
-}
-
-export default function JobHistory(props: Props) {
-  const {SizeWrapper, size} = useSize()
-  const jobs = props.jobs
-
-  const jobsList = size.width < 600 ? <SmallList {...props} /> : <FullList {...props} />
-
-  return (
-    <Container>
-      <h2>{props.heading}</h2>
-      <SizeWrapper>
-        {jobsList}
-      </SizeWrapper>
-    </Container>
-  )
-}

src/app/components/Markdown.tsx

@@ -0,0 +1,5 @@
+import ReactMarkdown from "react-markdown";
+
+export default function md(text: string) {
+    return <ReactMarkdown>{text}</ReactMarkdown>
+}

src/app/components/Projects.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import { usePersonContext } from '../hooks/PersonContext';
+import JobHistory from './job/JobsHistory';
+
+export default function Projects() {
+    const person = usePersonContext()
+
+    return person.projects ? (
+      <JobHistory
+        jobs={person.projects}
+        heading='Projects'
+        currentHeading='Currently active'
+        />
+    ) : <></>
+}

src/app/components/Tag.tsx

@@ -0,0 +1,7 @@
+import React from "react"
+
+export default function Tag(props: {text: string}) {
+    return (
+        <span className='badge text-bg-light'>{props.text}</span>
+    )
+}

src/app/components/TagCloud.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import Container from 'react-bootstrap/Container';
-import { useAutoFocus, useFocusedElement } from '../hooks/FocusedElement';
+import Tag from './Tag';
 
 export type Props = {
     title: string,
@@ -9,19 +9,10 @@ export type Props = {
     style?: 'primary' | 'light'
 }
 
-function Tag(props: {text: string}) {
-    const tagKey = 'tag ' + props.text;
-    const elementRef = useAutoFocus(tagKey)
-    return (
-        <span ref={elementRef} className='badge text-bg-light'>{props.text}</span>
-    )
-}
-
 export default function TagCloud(props: Props) {
-    const focusRef = useAutoFocus<HTMLDivElement>('tags ' + props.title)
     const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')]
     return (
-        <Container ref={focusRef} className={containerClasses.join(' ')}>
+        <Container className={containerClasses.join(' ')}>
             <h4>{props.icon && (<i className={'bi-' + props.icon}> </i>)}{props.title}</h4>
             <Container className='tag-badges'>
                 {props.tags.map((tag: string) => (<Tag key={tag} text={tag} />) )}

src/app/components/WorkExperience.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { usePersonContext } from '../hooks/PersonContext';
-import JobHistory from './JobHistory';
+import JobHistory from './job/JobsHistory';
 
 export default function WorkExperience() {
     const person = usePersonContext()

src/app/components/job/JobCard.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+import { Placeholder } from 'react-bootstrap';
+import JobTags from './JobTags';
+import { Job } from '@/PersonalDataTypes';
+import md from '../Markdown';
+
+export type Props = Job & {
+    heading?: string
+};
+
+export function JobCardPlaceholder() {
+    return <Card className='job-card'>
+        <Card.Body>
+        <Placeholder as={Card.Title} animation="glow">
+            <Placeholder xs={6} />
+        </Placeholder>
+        <Placeholder as={Card.Text} animation="glow">
+            <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={5} />{' '}
+            <Placeholder xs={4} /> <Placeholder xs={3} />
+        </Placeholder>
+        </Card.Body>
+    </Card>
+}
+
+export default function JobCard(props: Props) {
+    return (
+        <Card className='job-card'>
+            {props.heading && (
+                <Card.Header>{props.heading}</Card.Header>
+            )}
+            <Card.Body>
+                <Card.Title>{props.position}</Card.Title>
+                <Card.Subtitle>
+                    {props.company && <span className='company-name'>{props.company}</span>}
+                    {props.company && props.timerange && <span>, </span>}
+                    {props.timerange && <span className='timerange'>{props.timerange}</span>}
+                    </Card.Subtitle>
+                <Card.Text className='multiline'>{md(props.description)}</Card.Text>
+                {props.tags && <JobTags tags={props.tags} />}
+            </Card.Body>
+        </Card>
+    );
+}

src/app/components/job/JobTags.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Container } from "react-bootstrap";
+import Tag from "../Tag";
+
+export type Props = {
+    tags: string[],
+}
+
+export default function JobTags(props: Props) {
+    return (
+        <Container className='job-tags' fluid>
+            {props.tags.map((tag, index) => <Tag key={index} text={tag} />)}
+        </Container>
+    )
+}

src/app/components/job/JobsAccordion.tsx

@@ -0,0 +1,51 @@
+
+import React from 'react';
+import { Job } from '@/PersonalDataTypes';
+import { Accordion } from 'react-bootstrap';
+import { JobListProps } from './types';
+import JobTags from './JobTags';
+import md from '../Markdown';
+
+function JobTitle(props: {job: Job, heading?: string}) {
+  const {job, heading} = props
+  return (
+    <div>
+      <div><strong>{job.position}</strong></div>
+      <div>{[job.company, job.timerange].filter(x => x).join(', ')}</div>
+      {heading && (<div>({heading})</div>)}
+    </div>
+  )
+}
+
+function AccordionJobItem(props: {job: Job, eventKey: string, heading?: string}) {
+  const {job, eventKey} = props
+  return (
+    <Accordion.Item eventKey={eventKey}>
+        <Accordion.Header><JobTitle job={job} /></Accordion.Header>
+        <Accordion.Body className='multiline'>
+        {md(job.description)}
+        {job.tags && <JobTags tags={job.tags} />}
+        </Accordion.Body>
+    </Accordion.Item>
+  )
+}
+
+export type Props = {
+  heading: string,
+} & JobListProps
+
+const defaultProps = {
+  entriesPerRow: 2,
+  currentHeading: 'Currently',
+}
+
+export default function JobsAccordion(props: JobListProps) {
+  const {jobs} = props
+  const config = {...defaultProps, ...props}
+  return (
+    <Accordion defaultActiveKey={jobs.current ? 'current' : 'previous-0'}>
+      {jobs.current && <AccordionJobItem  job={jobs.current} heading={config.currentHeading} eventKey={'current'}/>}
+      {jobs.previous?.map((job, index) => <AccordionJobItem key={index} job={job} eventKey={`previous-${index}`} />)}
+    </Accordion>
+  )
+}

src/app/components/job/JobsCards.tsx

@@ -0,0 +1,46 @@
+
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import JobCard, { JobCardPlaceholder } from './JobCard';
+import { JobListProps } from './types';
+
+export type Props = {
+  heading: string,
+} & JobListProps
+
+const defaultProps = {
+  entriesPerRow: 2,
+  currentHeading: 'Currently',
+}
+
+export function JobsCardsPlaceholder() {
+  return <Container>
+    <Row><Col><JobCardPlaceholder /></Col></Row>
+    <Row><Col><JobCardPlaceholder /></Col></Row>
+  </Container>
+}
+
+export default function JobsCards(props: JobListProps) {
+  const {jobs} = props
+  const config = {...defaultProps, ...props}
+  return (
+    <Container fluid>
+      {jobs.current && (
+      <Row>
+        <Col>
+          <JobCard heading={config.currentHeading} {...jobs.current} />
+        </Col>
+      </Row>
+      )}
+      <Row>
+      {jobs.previous?.map((job, index) => (
+        <Col key={index} xs={12} md={12} lg={6} xl={12}>
+          <JobCard {...job} />
+        </Col>
+        ))}
+      </Row>
+    </Container>
+  )
+}

src/app/components/job/JobsHistory.tsx

@@ -0,0 +1,32 @@
+
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import useSize from '../../hooks/Size';
+import { JobListProps } from './types';
+import JobsAccordion from './JobsAccordion';
+import JobsCards, { JobsCardsPlaceholder } from './JobsCards';
+
+export type Props = {
+  heading: string,
+} & JobListProps
+
+const defaultProps = {
+  entriesPerRow: 2,
+  currentHeading: 'Currently',
+}
+
+export default function JobHistory(props: Props) {
+  const {SizeWrapper, size} = useSize()
+
+  const jobsList = size.width === 0 ? <JobsCardsPlaceholder /> : (
+    size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />)
+
+  return (
+    <Container>
+      <h2>{props.heading}</h2>
+      <SizeWrapper>
+        {jobsList}
+      </SizeWrapper>
+    </Container>
+  )
+}

src/app/components/job/types.tsx

@@ -0,0 +1,7 @@
+import { Jobs } from "@/PersonalDataTypes";
+
+export type JobListProps = {
+    jobs: Jobs,
+    entriesPerRow?: number,
+    currentHeading?: string,
+  }

src/app/globals.css

@@ -13,9 +13,11 @@ body {
 }
 .footer {
     margin-top: 2rem;
+    filter: opacity(75%)
 }
 .tiny {
     font-size: 75%;
+    filter: opacity(75%)
 }
 
 .container > h2, h3, h4 {
@@ -29,6 +31,12 @@ body {
 .job-card .timerange {
     font-style: italic;
 }
+.job-card .card-text {
+    margin-left: 0.4rem;
+}
+.job-card .card-subtitle {
+    margin-bottom: 0.5rem;
+}
 
 .cloud-primary .tag-badges  {
     font-size: 180%;
@@ -55,4 +63,13 @@ body {
 }
 .contacts .contact {
     margin: 0.75em;
-}
+}
+.accordion-button.collapsed {
+    background-color: #eff2ff;
+}
+.accordion {
+    margin: 1rem;
+}
+.multiline {
+    white-space: pre-line;
+}

src/app/hooks/FocusedElement.tsx

@@ -1,69 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from "react";
-
-const focusUrlParamName = 'focus'
-const focusChangedEventName = "focus-changed"
-const focusedElementClassName = 'focused-element'
-
-function triggerElementFocused(elementKey?: string) {
-    const url = new URL(window.location.href);
-    if (elementKey) {
-        url.searchParams.set(focusUrlParamName, elementKey)
-    } else {
-        url.searchParams.delete(focusUrlParamName)
-    }
-    const focusChangeEvent = new Event(focusChangedEventName)
-    history.pushState({}, "", url);
-    window.dispatchEvent(focusChangeEvent)
-}
-
-export function useFocusedElement<ElementType extends HTMLElement>(elementKey: string) {
-    const [isFocusedElement, setFocusedElement] = useState(false)
-    const focusedClass = isFocusedElement ? focusedElementClassName : ''
-    const elementRef = useRef<ElementType>(null)
-
-    const focusElement = useCallback(() => {
-        triggerElementFocused(isFocusedElement ? undefined : elementKey)
-    }, [isFocusedElement, elementKey])
-
-    useEffect(() => {
-        function updateFocusedState() {
-            const params = new URLSearchParams(window.location.search)
-            const focusedElement = params.get(focusUrlParamName)
-            const focused: boolean = focusedElement && focusedElement == elementKey || false
-            setFocusedElement(focused)
-        }
-
-        updateFocusedState()
-        addEventListener(focusChangedEventName, updateFocusedState)
-        return () => {
-            removeEventListener(focusChangedEventName, updateFocusedState)
-        }
-    }, [elementKey, setFocusedElement, focusElement])
-
-    isFocusedElement && elementRef.current?.scrollIntoView()
-
-    return {isFocusedElement, focusedClass, elementRef, focusElement}
-}
-
-export function useAutoFocus<ElementType extends HTMLElement>(elementKey: string) {
-    const {elementRef, focusedClass, focusElement} = useFocusedElement<ElementType>(elementKey);
-
-    useEffect(() => {
-        let cleanup = () => {}
-        if (elementRef.current) {
-            const elem = elementRef.current
-            elem.onclick = (evt) => {
-                evt.stopPropagation()
-                focusElement()
-            }
-            const classNameBackup = elem.className
-            elem.className += ' focusable ' + focusedClass
-            cleanup = () => {
-                elem.className = classNameBackup
-            }
-        }
-        return cleanup
-    }, [elementRef, focusedClass, focusElement])
-
-    return elementRef
-}

src/app/page.tsx

@@ -9,7 +9,7 @@ import Education from './components/Education';
 import { Col, Row } from 'react-bootstrap';
 import Footer from './components/Footer';
 import Photo from './components/Photo';
-import useSize from './hooks/Size';
+import Projects from './components/Projects';
 
 export default function Home() {
   return (
@@ -27,6 +27,7 @@ export default function Home() {
       <Row>
         <Col xs={12} xl={7}>
           <Row><WorkExperience /></Row>
+          <Row><Projects /></Row>
           <Row><Education /></Row>
         </Col>
         <Col>

src/app/utils.ts

@@ -1,10 +0,0 @@
-export function partition<T>(array: T[]|undefined, entriesPerRow: number): T[][] {
-    return array ? array.reduce((accumulator: T[][], current: T, index) => {
-      if (index % entriesPerRow == 0) {
-        accumulator[accumulator.length] = [current]
-      } else {
-        accumulator[accumulator.length - 1]
-      }
-      return accumulator
-    }, []) : []
-  }

src/index.html

@@ -1,71 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Bootstrap w/ Webpack</title>
-  </head>
-  <body>
-    <div class="container py-4 px-3 mx-auto">
-      <header class="d-flex justify-content-between align-items-md-center pb-3 mb-5 border-bottom">
-        <h1 class="h4">
-          <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
-            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-bootstrap-fill d-inline-block me-2" viewBox="0 0 16 16">
-              <path d="M6.375 7.125V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z"/>
-              <path d="M4.002 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4h-8zm1.06 12V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396H5.062z"/>
-            </svg>
-            <span>Webpack</span>
-          </a>
-        </h1>
-        <a href="https://github.com/twbs/examples/tree/main/webpack/" target="_blank" rel="noopener">View on GitHub</a>
-      </header>
-
-      <h1>Build Bootstrap with Webpack</h1>
-      <div class="col-lg-8 px-0">
-        <p class="fs-4">You've successfully loaded the Bootstrap + Webpack example! It's loaded up with <a href="https://getbootstrap.com/">Bootstrap 5</a> and uses Webpack to compile and bundle our Sass and JavaScript. It also includes Autoprefixer.</p>
-        <p>If this button appears blue and the link appears purple, you've done it!</p>
-      </div>
-
-      <button type="button" class="btn btn-primary me-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Toggle offcanvas</button>
-      <a id="popoverButton" class="text-success" href="#" role="button" data-bs-toggle="popover" title="Custom popover" data-bs-content="This is a Bootstrap popover.">Example popover</a>
-
-      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
-        <div class="offcanvas-header">
-          <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
-          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-        </div>
-        <div class="offcanvas-body">
-          <div>
-            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-          </div>
-          <div class="dropdown mt-3">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
-              Dropdown button
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              <li><a class="dropdown-item" href="#">Action</a></li>
-              <li><a class="dropdown-item" href="#">Another action</a></li>
-              <li><a class="dropdown-item" href="#">Something else here</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <hr class="col-1 my-5 mx-0">
-
-      <h2>Guides</h2>
-      <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
-      <ul class="icon-list">
-        <li><a href="https://getbootstrap.com/docs/5.2/getting-started/introduction/">Bootstrap quick start guide</a></li>
-        <li><a href="https://getbootstrap.com/docs/5.2/getting-started/webpack/">Bootstrap Webpack guide</a></li>
-        <li><a href="https://getbootstrap.com/docs/5.2/getting-started/parcel/">Bootstrap Parcel guide</a></li>
-        <li><a href="https://getbootstrap.com/docs/5.2/getting-started/vite/">Bootstrap Vite guide</a></li>
-        <li><a href="https://getbootstrap.com/docs/5.2/getting-started/build-tools/">Contributing to Bootstrap</a></li>
-      </ul>
-
-      <hr class="mt-5 mb-4">
-
-      <p class="text-muted">Created and open sourced by the Bootstrap team. Licensed MIT.</p>
-    </div>
-  </body>
-</html>