Application.tsx

import { Fetch, Program, Route, Router, Viewport } from 'yuzu'
import { createElement, provideContext } from 'yuzu/tools'

import { Content } from '~/services/Content'

import { Flexbox } from './components/Flexbox'
import { AboutPage } from './pages/AboutPage'
import { ArticlePage } from './pages/ArticlePage'
import { AuthorPage } from './pages/AuthorPage'
import { ContactPage } from './pages/ContactPage'
import { NewsPage } from './pages/NewsPage'
import { IndexPage } from './pages/IndexPage'
import { VideosPage } from './pages/VideosPage'
import { WatchPage } from './pages/WatchPage'

const PROGRAM_TITLE = 'UAP Agency'
const PROGRAM_DESCRIPTION = 'Think like a skeptic.'

export class Application extends Program {

    protected configure() {
        return [
            <Program title={ PROGRAM_TITLE }>
                <Program.Meta name='description' content={ PROGRAM_DESCRIPTION }/>
                <Program.Meta name='viewport' content='width=device-width, initial-scale=1'/>
                <Program.Meta name='color-scheme' content='dark'/>
                <Program.Style textContent={ 
                    createStyleSheet(css => {
                        css.selectIs([ 'html', 'body' ], css => {
                            css.write(`
                                background: rgb(5 6 7);
                                color: rgb(255 255 255);
                                display: flex;
                                flex-direction: column;
                                font-size: 13px;
                                height: 100%;
                                margin: 0;
                                scroll-behavior: smooth;
                            `)
                        })
                    }) 
                }/>
            </Program>
        ]
    }

    protected render() {
        return provideContext([
            Fetch,
            Content,
            Viewport,
            Theme
        ], [
            <Flexbox align={ Flexbox.Alignment.Center } direction={ Flexbox.Direction.Column } grow>
                <Router>
                    <Route path='/' template={ IndexPage }/>
                    <Route path='/about' template={ AboutPage }/>
                    <Route path='/authors' switch>
                        <Route path='/{ authorId }/{ authorSlug }' template={ AuthorPage }/>
                    </Route>
                    <Route path='/contact' template={ ContactPage }/>
                    <Route path='/news' switch>
                        <Route path='/' template={ NewsPage }/>
                        <Route path='/{ articleId }/{ articleSlug }' template={ ArticlePage }/>
                    </Route>
                    <Route path='/videos' switch>
                        <Route path='/' template={ VideosPage }/>
                        <Route path='/{ videoId }/{ videoSlug }' template={ WatchPage }/>
                    </Route>
                    <Modal.Portal/>
                </Router>
            </Flexbox>
        ])
    }
}

<application-component></application-component>