Initial commit

.dockerignore

@@ -0,0 +1,6 @@
+node_modules/
+.git
+.gitignore
+*.log
+dist
+Dockerfile

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.gitignore

@@ -0,0 +1,37 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.local
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# Backend
+backend/target/
+
+# Custom
+src/assets/

.prettierrc.yml

@@ -0,0 +1,6 @@
+semi: false
+singleQuote: true
+trailingComma: 'es5'
+bracketSpacing: true
+printWidth: 500
+proseWrap: 'preserve'

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN corepack enable
+RUN pnpm install
+COPY . .
+RUN pnpm build
+
+FROM nginx:alpine AS runtime
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 8080

README.md

@@ -0,0 +1 @@
+# OCBO Portal

astro.config.mjs

@@ -0,0 +1,29 @@
+// @ts-check
+import { defineConfig } from 'astro/config'
+import solidJs from '@astrojs/solid-js'
+import compressor from 'astro-compressor'
+import robotsTxt from '@itsmatteomanf/astro-robots-txt'
+import purgecss from 'astro-purgecss'
+
+export default defineConfig({
+  prefetch: true,
+  integrations: [
+    solidJs(),
+    compressor({ gzip: false, brotli: true }),
+    robotsTxt(),
+    purgecss({
+      fontFace: true,
+      variables: true,
+    }),
+  ],
+  vite: {
+    css: {
+      transformer: 'lightningcss',
+    },
+  },
+  build: {
+    assets: '_fwt',
+    inlineStylesheets: 'never',
+  },
+  site: 'http://localhost:8080',
+})

docker-compose.yml

@@ -0,0 +1,9 @@
+services:
+  ocbo-portal:
+    container_name: ocbo-portal
+    restart: unless-stopped
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - 9000:8080

fwt/Optimizers/OptimizeBackground.tsx

@@ -0,0 +1,17 @@
+import sharp from 'sharp'
+
+const convertBackground = async () => {
+  const inputSrc = 'src/assets/images/background.png'
+  const webpOutput = 'fwt/images/background.webp'
+  const avifOutput = 'fwt/images/background.avif'
+
+  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(1920).toBuffer()
+  await sharp(avifBuffer).toFile(avifOutput)
+
+  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(1920).toBuffer()
+  await sharp(webpBuffer).toFile(webpOutput)
+}
+
+export default () => {
+  convertBackground()
+}

fwt/Optimizers/OptimizeImage.tsx

@@ -0,0 +1,21 @@
+import sharp from 'sharp'
+
+interface Props {
+  src: string
+  size?: number
+}
+
+const convertImage = async (props: Props) => {
+  const avifOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.avif`
+  const webpOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.webp`
+
+  const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
+  await sharp(avifBuffer).toFile(avifOutputPath)
+
+  const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(webpBuffer).toFile(webpOutputPath)
+}
+
+export default (props: Props) => {
+  convertImage(props)
+}

fwt/Optimizers/OptimizeLogo.tsx

@@ -0,0 +1,34 @@
+import sharp from 'sharp'
+
+interface Props {
+  size?: number
+  favicon?: boolean
+}
+
+const convertLogo = async (props: Props) => {
+  const inputSrc = 'src/assets/images/logo.png'
+  const webpImage = 'fwt/images/logo.webp'
+  const avifImage = 'fwt/images/logo.avif'
+
+  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(props.size).toBuffer()
+  await sharp(avifBuffer).toFile(avifImage)
+
+  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(webpBuffer).toFile(webpImage)
+}
+
+const generateFavicon = async (props: Props) => {
+  const inputSrc = 'src/assets/images/logo.png'
+  const favicon = 'public/favicon.png'
+
+  const faviconBuffer = await sharp(inputSrc).png({ quality: 90 }).resize(50).toBuffer()
+  await sharp(faviconBuffer).toFile(favicon)
+}
+
+export default (props: Props) => {
+  convertLogo(props)
+
+  if (props.favicon) {
+    generateFavicon(props)
+  }
+}

fwt/components/Background.tsx

@@ -0,0 +1,50 @@
+import '../styles/Background.sass'
+import { Show, createSignal } from 'solid-js'
+import fs from 'fs'
+import webpPath from '../images/background.webp'
+import avifPath from '../images/background.avif'
+import noBackground from '../images/no-background.webp'
+
+interface Props {
+  image?: boolean
+  color?: string
+}
+
+let [imageLoaded, setImageLoaded] = createSignal(false)
+
+const checkBackground = () => {
+  if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
+    setImageLoaded(true)
+  } else {
+    setImageLoaded(false)
+  }
+}
+
+export default (props: Props) => {
+  checkBackground()
+
+  return (
+    <>
+      <Show when={props.image}>
+        <Show when={imageLoaded()}>
+          <picture class="fullscreen">
+            <source srcset={avifPath.src} type="image/avif" />
+            <source srcset={webpPath.src} type="image/webp" />
+            <source srcset={noBackground.src} type="image/webp" />
+            <img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
+          </picture>
+        </Show>
+        <Show when={!imageLoaded()}>
+          <picture class="fullscreen">
+            <source srcset={noBackground.src} type="image/webp" />
+            <img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
+          </picture>
+        </Show>
+      </Show>
+
+      <Show when={!props.image}>
+        <div style={{ background: props.color }} class="fullscreen" />
+      </Show>
+    </>
+  )
+}

fwt/components/Box.tsx

@@ -0,0 +1,19 @@
+import '../styles/Box.sass'
+import { type JSXElement, createMemo } from 'solid-js'
+
+interface Props {
+  thickness: number
+  color?: string
+  children: JSXElement
+  curved?: boolean
+}
+
+export default (props: Props) => {
+  const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
+
+  return (
+    <section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
+      {props.children}
+    </section>
+  )
+}

fwt/components/Button.tsx

@@ -0,0 +1,83 @@
+import '../styles/Button.sass'
+import { Show, Switch, Match } from 'solid-js'
+
+interface Props {
+  label?: string
+  to?: string
+  onClick?: () => void
+  edges?: 'curved' | 'rounded' | 'flat'
+  design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
+  submit?: boolean
+  newtab?: boolean
+}
+
+const getBorderRadius = (edge: Props['edges']) => {
+  switch (edge) {
+    case 'curved':
+      return 'border-radius: 6px'
+    case 'rounded':
+      return 'border-radius: 32px'
+    case 'flat':
+      return 'border-radius: 0'
+    default:
+      return 'border-radius: 0'
+  }
+}
+
+export default (props: Props) => {
+  const borderRadius = getBorderRadius(props.edges)
+
+  return (
+    <>
+      <Show when={props.to}>
+        <Switch>
+          <Match when={props.design}>
+            <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
+              <button class={props.design} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </a>
+          </Match>
+          <Match when={!props.design}>
+            <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
+              <button class="button" style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </a>
+          </Match>
+        </Switch>
+      </Show>
+
+      <Show when={!props.to}>
+        <Switch>
+          <Match when={props.design}>
+            <Show when={props.submit}>
+              <button class={props.design} type="submit" style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+
+            <Show when={!props.submit}>
+              <button class={props.design} onClick={props.onClick} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+          </Match>
+          <Match when={!props.design}>
+            <Show when={props.submit}>
+              <button class="button" type="submit" style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+
+            <Show when={!props.submit}>
+              <button class="button" onClick={props.onClick} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+          </Match>
+        </Switch>
+      </Show>
+    </>
+  )
+}

fwt/components/Column.tsx

@@ -0,0 +1,18 @@
+import '../styles/Column.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </section>
+    </>
+  )
+}

fwt/components/Copyright.tsx

@@ -0,0 +1,14 @@
+interface Props {
+  year: string
+  name: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <span>
+        Copyright © {props.year} {props.name} All Rights Reserved.
+      </span>
+    </>
+  )
+}

fwt/components/Display.tsx

@@ -0,0 +1,41 @@
+import '../styles/Viewport.sass'
+import { type JSXElement, Switch, Match } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  desktop?: boolean
+  tablet?: boolean
+  mobile?: boolean
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Switch>
+        <Match when={props.desktop && !props.tablet && !props.mobile}>
+          <div class="on-desktop-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && !props.mobile}>
+          <div class="on-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && !props.tablet && props.mobile}>
+          <div class="on-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && props.tablet && !props.mobile}>
+          <div class="on-desktop-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && !props.tablet && props.mobile}>
+          <div class="on-desktop-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && props.mobile}>
+          <div class="on-tablet-mobile-only">{props.children}</div>
+        </Match>
+      </Switch>
+    </>
+  )
+}

fwt/components/Footer.tsx

@@ -0,0 +1,16 @@
+import '../styles/Footer.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <footer class="footer">
+        <small>{props.children}</small>
+      </footer>
+    </>
+  )
+}

fwt/components/Form.tsx

@@ -0,0 +1,16 @@
+import '../styles/Form.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <form method="post" enctype="application/x-www-form-urlencoded">
+        {props.children}
+      </form>
+    </>
+  )
+}

fwt/components/HTML.tsx

@@ -0,0 +1,46 @@
+import '../styles/HTML.sass'
+import { type JSXElement, Show } from 'solid-js'
+import background1 from '../images/background.avif'
+import background2 from '../images/background.webp'
+
+interface Props {
+  title: string
+  name: string
+  description: string
+  children: JSXElement
+  font?: 'roboto' | 'inter' | 'montserrat' | 'open-sans' | 'public-sans'
+  preloadBackground?: boolean
+  author: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <html lang="en">
+        <head>
+          <base href="/" />
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+          <meta name="name" content={props.name} />
+          <meta name="description" content={props.description} />
+          <meta name="title" property="og:title" content={props.name} />
+          <meta name="keywords" content="HTML, CSS, JavaScript" />
+          <meta name="author" content={props.author} />
+          <meta property="og:description" content={props.description} />
+          <meta property="og:type" content="website" />
+          <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+          <Show when={props.font}>
+            <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+          </Show>
+          <Show when={props.preloadBackground}>
+            <link rel="preload" href={background1.src} as="image" type="image/svg+xml" />
+            <link rel="preload" href={background2.src} as="image" type="image/svg+xml" />
+          </Show>
+          <title>{props.title}</title>
+        </head>
+
+        <body class={props.font}>{props.children}</body>
+      </html>
+    </>
+  )
+}

fwt/components/Image.tsx

@@ -0,0 +1,19 @@
+interface Props {
+  avif: string
+  webp: string
+  size?: number
+  alt?: string
+  radius?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <picture>
+        <source srcset={props.avif} type="image/avif" />
+        <source srcset={props.webp} type="image/webp" />
+        <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+      </picture>
+    </>
+  )
+}

fwt/components/Input.tsx

@@ -0,0 +1,27 @@
+import '../styles/Input.sass'
+import { createSignal } from 'solid-js'
+
+interface Props {
+  placeholder?: string
+  value?: string
+  onChange?: (value: string) => void
+}
+
+export default (props: Props) => {
+  const [inputValue, setInputValue] = createSignal(props.value || '')
+
+  const handleChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const newValue = target.value
+    setInputValue(newValue)
+    if (props.onChange) {
+      props.onChange(newValue)
+    }
+  }
+
+  return (
+    <>
+      <input class="input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
+    </>
+  )
+}

fwt/components/Link.tsx

@@ -0,0 +1,17 @@
+import '../styles/Link.sass'
+
+interface Props {
+  to: string
+  children?: any
+  newtab?: boolean
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <a href={props.to} aria-label={`Go to ${props.to}`} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
+        {props.children}
+      </a>
+    </>
+  )
+}

fwt/components/Logo.tsx

@@ -0,0 +1,19 @@
+import webpPath from '../images/logo.webp'
+import avifPath from '../images/logo.avif'
+
+interface Props {
+  size?: number
+  alt?: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <picture>
+        <source srcset={avifPath.src} type="image/avif" />
+        <source srcset={webpPath.src} type="image/webp" />
+        <img width={props.size} height="auto" decoding="async" loading="lazy" alt="logo" />
+      </picture>
+    </>
+  )
+}

fwt/components/Modal.tsx

@@ -0,0 +1,27 @@
+import '../styles/Modal.sass'
+import { type JSXElement, Show, createSignal } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  background?: string
+  color?: string
+  border?: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.border}>
+        <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
+          {props.children}
+        </div>
+      </Show>
+
+      <Show when={!props.border}>
+        <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+          {props.children}
+        </div>
+      </Show>
+    </>
+  )
+}

fwt/components/Navbar.tsx

@@ -0,0 +1,17 @@
+import '../styles/Navbar.sass'
+import Row from './Row'
+
+interface Props {
+  transparent?: boolean
+  children: HTMLElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <nav class="nav" role="navigation" aria-label="main navigation">
+        <Row content="split">{props.children}</Row>
+      </nav>
+    </>
+  )
+}

fwt/components/Padding.tsx

@@ -0,0 +1,13 @@
+import { type JSXElement } from 'solid-js'
+
+interface Props {
+  left: number
+  right: number
+  top?: number
+  bottom?: number
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return <div style={{ padding: `${props.top || 0}rem ${props.right}rem ${props.bottom || 0}rem ${props.left}rem` }}>{props.children}</div>
+}

fwt/components/Page.tsx

@@ -0,0 +1,20 @@
+import '../styles/Page.sass'
+import { Show } from 'solid-js'
+
+interface Props {
+  children?: any
+  alignment?: 'row' | 'column'
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.alignment}>
+        <main class={props.alignment}>{props.children}</main>
+      </Show>
+      <Show when={!props.alignment}>
+        <main class="page">{props.children}</main>
+      </Show>
+    </>
+  )
+}

fwt/components/Row.tsx

@@ -0,0 +1,24 @@
+import '../styles/Row.sass'
+import { Show, type JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.gap}>
+        <section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+          {props.children}
+        </section>
+      </Show>
+
+      <Show when={!props.gap}>
+        <section class={`row-${props.content || 'center'}`}>{props.children}</section>
+      </Show>
+    </>
+  )
+}

fwt/index.ts

@@ -0,0 +1,21 @@
+export { default as Background } from './components/Background'
+export { default as Box } from './components/Box'
+export { default as Button } from './components/Button'
+export { default as Column } from './components/Column'
+export { default as Copyright } from './components/Copyright'
+export { default as Footer } from './components/Footer'
+export { default as Form } from './components/Form'
+export { default as HTML } from './components/HTML'
+export { default as Image } from './components/Image'
+export { default as Link } from './components/Link'
+export { default as Logo } from './components/Logo'
+export { default as Navbar } from './components/Navbar'
+export { default as Page } from './components/Page'
+export { default as Row } from './components/Row'
+export { default as Display } from './components/Display'
+export { default as Padding } from './components/Padding'
+export { default as Modal } from './components/Modal'
+
+export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
+export { default as OptimizeImage } from './Optimizers/OptimizeImage'
+export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'

fwt/styles/Background.sass

@@ -0,0 +1 @@
+@use '/src/styles/classes.sass'

fwt/styles/Box.sass

@@ -0,0 +1,6 @@
+.box
+  padding: 1rem
+
+.curvedbox
+  @extend .box
+  border-radius: 8px

fwt/styles/Button.sass

@@ -0,0 +1,223 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/fonts.sass' as fonts
+@use 'sass:color'
+
+$bulmaPrimary: rgb(0, 235, 199)
+$bulmaPrimaryText: rgb(0, 31, 26)
+$bulmaLink: rgb(92, 111, 255)
+$bulmaLinkText: rgb(245, 246, 255)
+$bulmaInfo: rgb(128, 217, 255)
+$bulmaInfoText: rgb(0, 36, 51)
+$bulmaSuccess: rgb(91, 205, 154)
+$bulmaSuccessText: rgb(10, 31, 21)
+$bulmaWarning: rgb(255, 191, 41)
+$bulmaWarningText: rgb(41, 29, 0)
+$bulmaDanger: rgb(255, 128, 153)
+$bulmaDangerText: rgb(26, 0, 5)
+$bulmaLight: rgb(255, 255, 255)
+$bulmaLightText: rgb(46, 51, 61)
+$bulmaDark: rgb(57, 63, 76)
+$bulmaDarkText: rgb(243, 244, 246)
+$bulmaText: rgb(31, 34, 41)
+$bulmaTextText: rgb(235, 236, 240)
+$bulmaGhost: rgba(0,0,0,0)
+$bulmaGhostText: rgb(66, 88, 255)
+
+$bootstrapTextLight: rgb(255, 255, 253)
+$bootstrapTextDark: rgb(0, 0, 2)
+$bootstrapTextLink: rgb(139, 185, 254)
+$bootstrapPrimary: rgb(13, 110, 253)
+$bootstrapSecondary: rgb(92, 99, 106)
+$bootstrapSuccess: rgb(21, 115, 71)
+$bootstrapDanger: rgb(187, 45, 59)
+$bootstrapWarning: rgb(255, 202, 44)
+$bootstrapInfo: rgb(49, 210, 242)
+$bootstrapLight: rgb(211, 212, 213)
+$bootstrapDark: rgb(33, 37, 41)
+
+.button
+  background-color: vars.$primaryColor
+  border: none
+  color: white
+  padding: 0.5rem 1.25rem
+  text-align: center
+  text-decoration: none
+  display: inline-block
+  font-size: 1rem
+  font-weight: 500
+  cursor: pointer
+  transition: all 0.2s ease-out
+
+  &:hover
+    background-color: color.adjust(vars.$primaryColor, $blackness: 20%)
+
+  &:active
+    transform: scale(0.95)
+
+.bu-primary
+  @extend .button
+  font-family: fonts.$Inter
+  background-color: $bulmaPrimary
+  color: $bulmaPrimaryText
+  border: none
+  font-size: 1rem
+  border-radius: 0.375rem
+  font-weight: 500
+  padding: 0.5rem 1.25rem
+  height: 2.5rem
+
+  &:hover
+    background-color: color.adjust($bulmaPrimary, $lightness: 10%)
+
+.bu-link
+  @extend .bu-primary
+  background-color: $bulmaLink
+  color: $bulmaLinkText
+
+  &:hover
+    background-color: color.adjust($bulmaLink, $lightness: 5%)
+
+.bu-info
+  @extend .bu-primary
+  background-color: $bulmaInfo
+  color: $bulmaInfoText
+
+  &:hover
+    background-color: color.adjust($bulmaInfo, $lightness: 5%)
+
+.bu-success
+  @extend .bu-primary
+  background-color: $bulmaSuccess
+  color: $bulmaSuccessText
+
+  &:hover
+    background-color: color.adjust($bulmaSuccess, $lightness: 5%)
+
+.bu-warning
+  @extend .bu-primary
+  background-color: $bulmaWarning
+  color: $bulmaWarningText
+
+  &:hover
+    background-color: color.adjust($bulmaWarning, $lightness: 5%)
+
+.bu-danger
+  @extend .bu-primary
+  background-color: $bulmaDanger
+  color: $bulmaDangerText
+
+  &:hover
+    background-color: color.adjust($bulmaDanger, $lightness: 5%)
+
+.bu-light
+  @extend .bu-primary
+  background-color: $bulmaLight
+  color: $bulmaLightText
+
+  &:hover
+    background-color: color.adjust($bulmaLight, $lightness: 5%)
+
+.bu-dark
+  @extend .bu-primary
+  background-color: $bulmaDark
+  color: $bulmaDarkText
+
+  &:hover
+    background-color: color.adjust($bulmaDark, $lightness: 5%)
+
+.bu-text
+  @extend .bu-primary
+  background-color: rgba(0,0,0,0)
+  color: $bulmaTextText
+  text-decoration: underline
+
+  &:hover
+    background-color: hsl(221,14%,14%)
+
+.bu-ghost
+  @extend .bu-primary
+  background-color: $bulmaGhost
+  color: $bulmaGhostText
+
+  &:hover
+    background-color: transparent
+    text-decoration: underline
+
+.bo-primary
+  @extend .button
+  font-family: 'Segoe UI', fonts.$Roboto
+  background-color: $bootstrapPrimary
+  color: $bootstrapTextLight
+  border: none
+  font-size: 1rem
+  border-radius: 0.375rem
+  font-weight: 400
+  padding: 0.5rem 1.25rem
+  height: 2.5rem
+  margin: 0.25rem 0.125rem
+
+  &:hover
+    background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
+
+.bo-secondary
+  @extend .bo-primary
+  background-color: $bootstrapSecondary
+
+  &:hover
+    background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
+
+.bo-success
+  @extend .bo-primary
+  background-color: $bootstrapSuccess
+
+  &:hover
+    background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
+
+.bo-danger
+  @extend .bo-primary
+  background-color: $bootstrapDanger
+
+  &:hover
+    background-color: color.adjust($bootstrapDanger, $blackness: 10%)
+
+.bo-warning
+  @extend .bo-primary
+  background-color: $bootstrapWarning
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapWarning, $lightness: 5%)
+
+.bo-info
+  @extend .bo-primary
+  background-color: $bootstrapInfo
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapInfo, $lightness: 5%)
+
+.bo-light
+  @extend .bo-primary
+  background-color: $bootstrapLight
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapLight, $blackness: 10%)
+
+.bo-dark
+  @extend .bo-primary
+  background-color: $bootstrapDark
+  // color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapDark, $lightness: 10%)
+
+.bo-link
+  @extend .bo-primary
+  background-color: transparent
+  color: $bootstrapTextLink
+  text-decoration: underline
+
+  &:hover
+    color: color.adjust($bootstrapTextLink, $lightness: 5%)
+    background-color: transparent

fwt/styles/Column.sass

@@ -0,0 +1,39 @@
+.column-top
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.column-center
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.column-right
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.column-split
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.column-spaced
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center

fwt/styles/Footer.sass

@@ -0,0 +1,13 @@
+@use '/src/styles/breakpoint.sass' as view
+
+.footer
+  padding: 1rem 0
+  margin: 0 2rem
+  position: fixed
+  bottom: 0
+  width: 100%
+  opacity: 0.8
+  font-size: 1rem
+
+  @media only screen and (max-width: view.$tablet)
+    font-size: 0.75rem

fwt/styles/HTML.sass

@@ -0,0 +1,25 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/fonts.sass' as fonts
+
+.body
+  color: vars.$textColor
+
+.inter
+  @extend .body
+  font-family: fonts.$Inter
+
+.roboto
+  @extend .body
+  font-family: fonts.$Roboto
+
+.montserrat
+  @extend .body
+  font-family: fonts.$Montserrat
+
+.open-sans
+  @extend .body
+  font-family: fonts.$OpenSans
+
+.public-sans
+  @extend .body
+  font-family: fonts.$PublicSans

fwt/styles/Input.sass

@@ -0,0 +1,27 @@
+.input
+  font-size: 1rem
+  padding: 0.5rem 1rem
+  width: 100%
+  border: 2px solid #ccc
+  border-radius: 4px
+  outline: none
+  transition: border-color 0.3s, box-shadow 0.3s
+
+  &:focus
+    border-color: #3377AC
+    box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
+
+  &::placeholder
+    color: #888
+    font-style: italic
+
+  &:disabled
+    background-color: #f0f0f0
+    border-color: #ddd
+
+  &--error
+    border-color: #ff4d4f
+    box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
+
+    &:focus
+      border-color: #e81123

fwt/styles/Link.sass

@@ -0,0 +1,3 @@
+a
+  text-decoration: none
+  color: inherit

fwt/styles/Modal.sass

@@ -0,0 +1,20 @@
+@use '/src/styles/variables.sass' as vars
+@use 'sass:color'
+
+.modal
+  display: flex
+  justify-content: center
+  align-items: center
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  backdrop-filter: blur(20px)
+  background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.6)
+  z-index: 999
+
+  &__content
+    border-radius: 8px
+    padding: 2rem
+    position: relative

fwt/styles/Navbar.sass

@@ -0,0 +1,7 @@
+.nav
+  position: fixed
+  top: 0
+  width: 100%
+  padding: 1rem 0
+  // margin: 5rem
+

fwt/styles/Page.sass

@@ -0,0 +1,13 @@
+.page
+  margin: 2rem
+  height: auto
+  min-height: 90vh
+
+.column
+  @extend .page
+  display: flex
+  flex-direction: column
+
+.row
+  @extend .column
+  flex-direction: row

fwt/styles/Row.sass

@@ -0,0 +1,47 @@
+.row-left
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.row-center
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.row-right
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.row-split
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.row-spaced
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center
+
+.row-even
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-evenly
+  align-items: center
+  align-content: center

fwt/styles/Viewport.sass

@@ -0,0 +1 @@
+@use '/src/styles/breakpoint.sass'

nginx/nginx.conf

@@ -0,0 +1,31 @@
+worker_processes  1;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  server {
+    listen 8080;
+    server_name   _;
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    include /etc/nginx/mime.types;
+
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+    error_page 404 /404.html;
+    location = /404.html {
+            root /usr/share/nginx/html;
+            internal;
+    }
+
+    location / {
+            try_files $uri $uri/index.html =404;
+    }
+  }
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "ocbo-portal",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/solid-js": "^5.1.1",
+    "@itsmatteomanf/astro-robots-txt": "^0.2.0",
+    "@nanostores/solid": "^1.1.1",
+    "astro": "^5.15.1",
+    "astro-compressor": "^1.2.0",
+    "astro-purgecss": "^5.3.0",
+    "gsap": "^3.13.0",
+    "lightningcss": "^1.30.2",
+    "nanostores": "^1.0.1",
+    "purgecss": "^7.0.2",
+    "sharp": "^0.34.4",
+    "solid-icons": "^1.1.0",
+    "solid-js": "^1.9.9"
+  },
+  "devDependencies": {
+    "@types/node": "^24.9.1",
+    "sass-embedded": "^1.93.2"
+  }
+}

podman.container

@@ -0,0 +1,13 @@
+[Unit]
+Description=OCBO Portal
+
+[Container]
+ContainerName=ocbo-portal
+Image=localhost/ocbo-portal
+PublishPort=9000:8080
+
+[Service]
+Restart=always
+
+[Install]
+WantedBy=multi-user.target default.target

src/components/Card/Card.sass

@@ -0,0 +1,22 @@
+.card
+  // display: flex
+  // flex-direction: column
+  // align-items: flex-start
+  // justify-content: flex-start
+  border: 1px solid transparent
+  border-radius: 20px
+  padding: 2rem
+  cursor: pointer
+  width: 15rem
+
+  &:hover
+    border: 1px solid white
+
+  &__name
+    padding: 1rem 0 0 0
+    font-size: 1rem
+    font-weight: 500
+
+  &__description
+    padding: 0.5rem 0 0 0
+    font-size: 0.75rem

src/components/Card/Card.tsx

@@ -0,0 +1,23 @@
+import './Card.sass'
+import { Image, Column, Row } from '../../../fwt'
+
+interface Props {
+  avif: string
+  webp: string
+  name: string
+  description: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <section class="card">
+        <Column>
+          <Image avif={props.avif} webp={props.webp} size={140} />
+            <span class="card__name">{props.name}</span>
+            <span class="card__description">{props.description}</span>
+        </Column>
+      </section>
+    </>
+  )
+}

src/components/Counter/Counter.sass

@@ -0,0 +1,47 @@
+.counter
+  display: flex
+  flex-direction: column
+  align-items: center
+  gap: 1rem
+  margin: 2rem
+  color: white
+  border: 1px solid rgba(22, 34, 60, 0.5)
+  padding: 1rem 2rem
+  border-radius: 16px
+  background: rgba(134, 152, 217, 0.1)
+
+  &__display
+    font-size: 1.75rem
+    font-weight: bold
+
+  &__buttons
+    display: flex
+    justify-content: center
+    gap: 0.25rem
+
+    // &:hover
+    // background: color.adjust(vars.$primaryColor, $blackness: 20%)
+
+
+  &__decrement
+    width: 2rem
+    height: 2.25rem
+    padding: auto
+    font-size: 1rem
+    font-weight: bold
+    cursor: pointer
+    text-decoration: none
+    background-color: rgba(86, 14, 14, 0.915)
+    border-radius: 8px
+    color: white
+    border: 1px solid rgba(255,255,255,0.2)
+
+    &:active
+      transform: scale(0.95)
+
+  &__increment
+    @extend .counter__decrement
+    background-color: rgb(14, 42, 86, 0.915)
+
+    &:active
+      transform: scale(0.95)

src/components/Counter/Counter.tsx

@@ -0,0 +1,30 @@
+import './Counter.sass'
+import { createSignal } from 'solid-js'
+
+let [count, setCount] = createSignal(0)
+
+const increment = () => {
+  setCount(count() + 1)
+}
+
+const decrement = () => {
+  setCount(count() - 1)
+}
+
+export default () => {
+  return (
+    <>
+      <section class="counter">
+        <div class="counter__display">{count()}</div>
+        <div class="counter__buttons">
+          <button class="counter__decrement" onClick={decrement}>
+            -
+          </button>
+          <button class="counter__increment" onClick={increment}>
+            +
+          </button>
+        </div>
+      </section>
+    </>
+  )
+}

src/components/Input/Input.tsx

@@ -0,0 +1,12 @@
+import Input from '../../../fwt/components/Input'
+import { createSignal } from 'solid-js'
+
+const [sample, setSample] = createSignal('')
+
+export default () => {
+  return (
+    <>
+      <Input onChange={(val) => setSample(val)}></Input>
+    </>
+  )
+}

src/layouts/Layout.astro

@@ -0,0 +1,13 @@
+---
+const { title } = Astro.props
+
+const websiteName = 'Template'
+const websiteDescription = 'This is just a template.'
+
+import { Background, HTML } from '../../fwt'
+---
+
+<HTML title={title} name={websiteName} description={websiteDescription} font="roboto" author="Patrick Alvin Alcala">
+  <Background color="#0c1b31" />
+  <slot />
+</HTML>

src/pages/index.astro

@@ -0,0 +1,29 @@
+---
+import Layout from '../layouts/Layout.astro'
+import { Button, Logo, Link, Page, Row, Image, Column } from '../../fwt/'
+import Card from '../components/Card/Card'
+import OLA from '../../fwt/images/ocbo-portal.avif'
+import OLW from '../../fwt/images/ocbo-portal.webp'
+import OcboLogoA from '../../fwt/images/ocbologo.avif'
+import OcboLogoW from '../../fwt/images/ocbologo.webp'
+---
+
+<Layout title="FWT">
+  <Page alignment="column">
+    <Column>
+      <Row content="center">
+        <Image avif={OLA.src} webp={OLW.src} size={150} />
+        <h1>OCBO Portal for Applications</h1>
+      </Row>
+
+      <Card avif={OcboLogoA.src} webp={OcboLogoW.src} name="OCBO e-Sign" description="A secure way of signing permits." />
+    </Column>
+  </Page>
+
+  <style lang="sass">
+    h1
+      color: #3377AC
+      margin: 0
+      font-size: 3.25rem
+  </style>
+</Layout>

src/stores/sample.ts

@@ -0,0 +1,3 @@
+// import { atom } from 'nanostores'
+
+// export const $sample = atom(0)

src/styles/breakpoint.sass

@@ -0,0 +1,51 @@
+$mobile: 375px
+$tablet: 768px
+$desktop: 1440px
+
+.on-desktop-only
+  @media only screen and (min-width: 0px) and (max-width: $desktop)
+    display: none
+
+  @media only screen and (min-width: $desktop)
+    display: block
+
+.on-tablet-only
+  @media only screen and (min-width: 0px) and (max-width: $tablet)
+    display: none
+
+  @media only screen and (min-width: $tablet) and (max-width: $desktop)
+    display: block
+
+  @media only screen and (min-width: $desktop)
+    display: none
+
+.on-mobile-only
+  @media only screen and (min-width: $mobile)
+    display: block
+
+  @media only screen and (min-width: $tablet)
+    display: none
+
+.on-desktop-tablet-only
+  @media only screen and (min-width: 0px) and (max-width: $tablet)
+    display: none
+
+  @media only screen and (min-width: $tablet)
+    display: block
+
+.on-desktop-mobile-only
+  @media only screen and (min-width: 0px) and (max-width: $mobile)
+    display: block
+
+  @media only screen and (min-width: $mobile) and (max-width: $desktop)
+    display: none
+
+  @media only screen and (min-width: $desktop)
+    display: block
+
+.on-tablet-mobile-only
+  @media only screen and (min-width: 0px) and (max-width: $desktop)
+    display: block
+
+  @media only screen and (min-width: $desktop)
+    display: none

src/styles/classes.sass

@@ -0,0 +1,9 @@
+.fullscreen
+  position: absolute
+  top: 0
+  left: 0
+  width: 100vw
+  height: 100vh
+  object-fit: cover
+  z-index: -1
+  opacity: 1

src/styles/fonts.sass

@@ -0,0 +1,45 @@
+$Roboto: Roboto, sans-serif
+$Inter: Inter, sans-serif
+$Montserrat: Montserrat, sans-serif
+$OpenSans: 'Open Sans', sans-serif
+$PublicSans: 'Public Sans', sans-serif
+
+@font-face
+  font-family: 'Roboto'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Inter'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Montserrat'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/montserrat:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Open Sans'
+  font-style: normal
+  font-display: swap
+  font-weight: 300 800
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Public Sans'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/public-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD

src/styles/variables.sass

@@ -0,0 +1,16 @@
+@use 'sass:color'
+
+$background: #0c1b31
+$textColor: #f0f8ff
+
+$fontSize: 1rem
+
+$borderMargin: 2rem
+
+$primaryColor: #0075BB
+$secondaryColor: #57687F
+$accentColor: #00887C
+$infoColor: #0082A4
+$successColor: #009435
+$warningColor: #E5B400
+$errorColor: #E8595C

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}