vinet/viossa.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: setup monorepo for static frontend app (vdn-static)

Browse source
This commit is contained in:
Benjamin Singleton 2025-06-09 22:23:16 -05:00
parent 1049d26a3d
commit 29f11689ee
48 changed files with 3219 additions and 337 deletions
Download patch file Download diff file Expand all files Collapse all files

24
apps/vdn-static/eslint.config.js Normal file
View file

@ -0,0 +1,24 @@
import js from '@eslint/js';
import globals from 'globals';
import ts from 'typescript-eslint';
import vue from 'eslint-plugin-vue';
export default ts.config(
{ ignores: ['dist'] },
{
extends: [
js.configs.recommended,
...ts.configs.recommendedTypeChecked,
...vue.configs.recommendedTypeChecked,
],
files: ['**/*.{js,ts,vue}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
projectService: true,
tsconfigRootDir: import.meta.dirname,
},
},
},
)

15
apps/vdn-static/index.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html>
<html lang="en" class="has-background-black has-navbar-fixed-top">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/viossa_circle.svg"/>
<link href='https://cdn.boxicons.com/fonts/basic/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Viossa.net</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

5498
apps/vdn-static/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

34
apps/vdn-static/package.json Normal file
View file

@ -0,0 +1,34 @@
{
"name": "@repo/vdn-static",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/vite": "^4.1.6",
"@types/node": "^22.15.17",
"bulma": "^1.0.4",
"tailwindcss": "^4.1.6",
"vue": "^3.5.13",
"vue-i18n": "^11.1.3",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.3",
"@vue/tsconfig": "^0.7.0",
"eslint": "^9.26.0",
"eslint-plugin-vue": "^10.1.0",
"prettier": "^3.5.3",
"sass": "^1.87.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.32.1",
"unplugin-vue-router": "^0.12.0",
"vite": "^6.3.5",
"vue-tsc": "^2.2.8"
},
"packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
}

26
apps/vdn-static/public/viossa_circle.svg Normal file
View file

@ -0,0 +1,26 @@
<ns0:svg xmlns:ns0="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0px" y="0px" width="144.0" height="144.0" viewBox="56.0 56.0 144.0 144.0" style="enable-background:new 0 0 256 256;" xml:space="preserve">
<ns0:style type="text/css">
.Drop_x0020_Shadow{fill:none;}
.Thick_x0020_Blue_x0020_Neon{fill:none;stroke:#0073BC;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;}
.Illuminating_x0020_Aqua{fill:url(#SVGID_1_);stroke:#FFFFFF;stroke-width:0.25;stroke-miterlimit:1;}
.Black_x0020_Highlight{fill:url(#SVGID_00000121249889455812460230000004963949080483821184_);stroke:#FFFFFF;stroke-width:0.362861;stroke-miterlimit:1;}
.Bugaboo_GS{fill-rule:evenodd;clip-rule:evenodd;fill:#FFDD00;}
.st0{fill:#4DABF7;}
.st1{fill:#F8F9FA;}
</ns0:style>
<ns0:linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="6.123234e-17" y2="-1">
<ns0:stop offset="0" style="stop-color:#1D59F4" />
<ns0:stop offset="0.617977" style="stop-color:#2D65EE" />
<ns0:stop offset="0.629213" style="stop-color:#3864F3" />
<ns0:stop offset="0.983146" style="stop-color:#00DDFC" />
</ns0:linearGradient>
<ns0:linearGradient id="SVGID_00000029744916847460459310000011004185732043246012_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="6.123234e-17" y2="-1">
<ns0:stop offset="0" style="stop-color:#060606" />
<ns0:stop offset="0.617977" style="stop-color:#000000" />
<ns0:stop offset="0.629213" style="stop-color:#000000" />
<ns0:stop offset="0.983146" style="stop-color:#000000" />
</ns0:linearGradient>
<ns0:circle class="st0" cx="128" cy="128" r="72" />
<ns0:path class="st1" d="M187.6656494,101.3799362h1.3769073l-0.4589691,1.1474228l-2.2948303,2.0653458l-3.2127686,2.7537994 l-3.4422455,2.983284l-3.2127686,2.5243149l-2.9832916,2.0653534l-11.4741516,6.8844986l-4.8191528,3.67173l-4.5896606,3.4422531 l-3.9012299,2.7537994l-2.2948303,2.7537994l-1.6063843,2.5243073l1.6063843-0.4589691h0.9179382l-0.4589691,1.1474152 l-1.3768921,1.6063843l-2.9832916,2.2948456l-0.917923,0.688446l-0.6884613,5.5075989l-1.6063843,3.2127686l-2.5243073,2.7537994 l-2.0653534,0.917923h-2.2948303l-2.2948303-0.917923l-1.8358765-2.0653534l-2.7537918-4.5896606l-2.0653534-2.2948456 l-2.2948303-1.6063843l-3.67173-1.8358612l-2.983284-0.9179382l-9.8677826-1.606369l-8.9498444-2.0653534l-15.8343506-3.9012146 l-4.8191452-1.6063843l-3.6717377-1.8358765l-3.2127609-2.0653381l-1.1474228-1.3768997l0.2294846-0.2294846h2.294838 l8.7203598,2.7537994l9.8677826,2.2948303l5.7370834,0.9179382l12.1626129,0.2294769l5.2781143,0.688446l5.5075989,1.1474152 l3.9012146,1.3769073l2.983284,1.6063843l2.5243149,1.8358612l1.1474228,0.688446h2.2948303l5.2781067-0.917923l2.9832916-0.2294922 l1.6063843-0.688446l2.5243073-4.3601837l2.2948456-3.2127686l2.7537994-2.7537918l3.9012146-2.983284l5.7370758-3.4422531 l5.5075989-2.7537994l4.3601837-2.0653458l5.2781219-3.4422531l3.6717224-2.5243149l3.6717377-2.7537994l2.9832764-2.2948303 l3.9012146-2.5243149L187.6656494,101.3799362z" />
</ns0:svg>

49
apps/vdn-static/src/App.vue Normal file
View file

@ -0,0 +1,49 @@
<script setup lang="ts">
import "./assets/style.scss";
import { ref, type Ref } from "vue";
const burgerOpen: Ref<boolean> = ref<boolean>(false);
const toggleBurger = (): void => {
burgerOpen.value = !burgerOpen.value;
};
</script>
<template>
<div class="min-h-screen flex flex-col">
<!-- Main application wrapper -->
<nav
class="navbar is-fixed-top"
role="navigation"
aria-label="main navigation">
<div class="navbar-brand">
<RouterLink class="navbar-item has-text-weight-bold" to="/"
><img src="@/assets/ViossaFlagRect.svg" alt=""
/></RouterLink>
<div class="navbar-item">
<button
type="button"
@click="toggleBurger()"
:class="`button is-link is-hoverable is-hidden-desktop ${burgerOpen ? 'is-active' : ''}`"
aria-label="menu"
:aria-expanded="`${burgerOpen ? 'true' : 'false'}`">
<span class="bx bx-burger"></span>
</button>
</div>
</div>
<div :class="`navbar-menu ${burgerOpen ? 'is-active' : ''}`">
<div class="navbar-start">
<RouterLink class="navbar-item" to="/"
>What is Viossa?</RouterLink
>
<RouterLink class="navbar-item" to="/resources"
>Resources</RouterLink
>
</div>
</div>
</nav>
<RouterView />
</div>
</template>

75
apps/vdn-static/src/assets/ViossaFlagCirc3_2ratio.svg Normal file
View file

@ -0,0 +1,75 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="360mm"
height="360mm"
viewBox="0 0 360 360"
version="1.1"
id="svg5"
xml:space="preserve"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
sodipodi:docname="viossaFlag.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="5.7299663"
inkscape:cx="86.126161"
inkscape:cy="613.87795"
inkscape:window-width="2400"
inkscape:window-height="1411"
inkscape:window-x="2391"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="layer2"><inkscape:grid
type="xygrid"
id="grid302" /></sodipodi:namedview><defs
id="defs2" /><g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer 2"
transform="translate(134.0933,87.179113)"><path
style="fill:#00bbff;fill-opacity:1;stroke:none;stroke-width:0.0289973;stroke-miterlimit:22.2;stroke-dasharray:none;stroke-opacity:1"
id="path6216"
sodipodi:type="arc"
sodipodi:cx="45.906708"
sodipodi:cy="92.820892"
sodipodi:rx="180"
sodipodi:ry="180"
sodipodi:start="4.6934522"
sodipodi:end="4.6302294"
sodipodi:open="true"
sodipodi:arc-type="arc"
d="M 42.498291,-87.146834 A 180,180 0 0 1 225.79809,86.568504 180,180 0 0 1 55.001506,272.59098 180,180 0 0 1 -133.69718,104.75583 180,180 0 0 1 31.134615,-86.571932"
inkscape:export-filename="..\Finished\ViossaFlagCirc3_2ratio.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" /><g
id="g5819"
transform="matrix(0.93405356,0,0,0.93405356,-53.016663,-34.779538)"><path
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.399354;stroke-miterlimit:22.2"
id="path385"
sodipodi:type="arc"
sodipodi:cx="105.9076"
sodipodi:cy="136.60933"
sodipodi:rx="128.47229"
sodipodi:ry="128.47374"
sodipodi:start="4.6934522"
sodipodi:end="4.6302294"
sodipodi:open="true"
sodipodi:arc-type="arc"
d="M 103.47489,8.1586244 A 128.47229,128.47374 0 0 1 234.30236,132.14673 128.47229,128.47374 0 0 1 112.39888,264.91897 128.47229,128.47374 0 0 1 -22.281972,145.12781 128.47229,128.47374 0 0 1 95.364242,8.5689572" /><path
style="fill:#00bbff;fill-opacity:1;stroke:none;stroke-width:0.029;stroke-miterlimit:22.2;stroke-dasharray:none"
d="m 117.05457,164.17654 c 8.03452,-0.0462 8.49627,-1.08512 8.49627,-1.08512 9.82856,-19.81483 22.21219,-26.80177 41.97341,-36.29385 8.34356,-3.68297 19.0164,-10.96258 27.61288,-17.13106 6.26354,-4.49445 12.05177,-10.297107 20.17864,-13.621734 8.53145,-3.490137 -10.80504,12.328824 -10.80504,12.328824 -9.0042,8.12686 -14.95674,11.81852 -22.02565,15.97668 -10.7129,6.30168 -14.31359,8.34425 -19.30131,12.14412 -5.80492,4.42245 -9.88634,7.92764 -13.66791,10.29711 -7.29571,4.57136 -9.28125,7.66511 -10.11241,8.77332 -0.83116,1.10821 -3.97108,5.95663 -3.97108,5.95663 1.66231,-0.50793 4.94076,-1.01586 4.94076,-1.01586 0.0462,2.40112 -5.49486,6.7416 -5.49486,6.7416 -2.77053,1.89319 -5.77193,4.47901 -5.77193,4.47901 1.20056,11.49767 -5.58722,18.0084 -5.58722,18.0084 -9.28124,10.20475 -18.3427,0.76386 -20.22481,-4.20196 -3.17843,-8.38609 -13.802587,-15.78912 -23.687967,-17.82369 -11.028807,-2.26991 -14.129558,-1.84483 -21.05597,-3.46315 -19.763059,-4.61754 -25.561421,-6.75206 -38.510261,-9.37361 -7.526586,-1.52379 -13.8064366,-4.20196 -13.8064366,-4.20196 0,0 -10.8973881,-4.84841 -13.5293844,-8.35774 -2.6319962,-3.50933 7.20335825,-0.3694 7.20335825,-0.3694 0,0 5.60046125,2.09797 8.49626865,2.81669 19.1627801,4.75607 27.5461821,6.95957 33.8465491,7.24953 6.300367,0.29001 17.394868,0.27841 17.394868,0.27841 17.211282,0.25025 32.426083,4.51346 41.247855,12.11969 1.92916,1.66334 3.41698,1.73157 4.42129,1.92782 3.28987,0.10945 8.16149,-1.974 11.74009,-2.1587 z"
id="path455"
sodipodi:nodetypes="cczccscccsscccccsssscssccscc" /></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

70
apps/vdn-static/src/assets/ViossaFlagRect.svg Normal file
View file

@ -0,0 +1,70 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="508mm"
height="341.04791mm"
viewBox="0 0 508 341.04791"
version="1.1"
id="svg5"
xml:space="preserve"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
sodipodi:docname="viossaFlag.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="5.7299663"
inkscape:cx="86.126161"
inkscape:cy="613.87795"
inkscape:window-width="2400"
inkscape:window-height="1411"
inkscape:window-x="2391"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="layer2"><inkscape:grid
type="xygrid"
id="grid302" /></sodipodi:namedview><defs
id="defs2" /><g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer 2"
transform="translate(150.306,34.583659)"><g
id="g5950"
inkscape:export-filename="..\Finished\ViossaFlagFullSize.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"><rect
style="fill:#00bbff;fill-opacity:1;stroke:none;stroke-width:0.0615961;stroke-miterlimit:22.2;stroke-dasharray:none;stroke-opacity:1"
id="rect5873"
width="508"
height="341.04791"
x="-150.306"
y="-34.58366" /><g
id="g5819"
transform="translate(-2.2136002,-0.66903305)"><path
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.399354;stroke-miterlimit:22.2"
id="path385"
sodipodi:type="arc"
sodipodi:cx="105.9076"
sodipodi:cy="136.60933"
sodipodi:rx="128.47229"
sodipodi:ry="128.47374"
sodipodi:start="4.6934522"
sodipodi:end="4.6302294"
sodipodi:open="true"
sodipodi:arc-type="arc"
d="M 103.47489,8.1586244 A 128.47229,128.47374 0 0 1 234.30236,132.14673 128.47229,128.47374 0 0 1 112.39888,264.91897 128.47229,128.47374 0 0 1 -22.281972,145.12781 128.47229,128.47374 0 0 1 95.364242,8.5689572" /><path
style="fill:#00bbff;fill-opacity:1;stroke:none;stroke-width:0.029;stroke-miterlimit:22.2;stroke-dasharray:none"
d="m 117.05457,164.17654 c 8.03452,-0.0462 8.49627,-1.08512 8.49627,-1.08512 9.82856,-19.81483 22.21219,-26.80177 41.97341,-36.29385 8.34356,-3.68297 19.0164,-10.96258 27.61288,-17.13106 6.26354,-4.49445 12.05177,-10.297107 20.17864,-13.621734 8.53145,-3.490137 -10.80504,12.328824 -10.80504,12.328824 -9.0042,8.12686 -14.95674,11.81852 -22.02565,15.97668 -10.7129,6.30168 -14.31359,8.34425 -19.30131,12.14412 -5.80492,4.42245 -9.88634,7.92764 -13.66791,10.29711 -7.29571,4.57136 -9.28125,7.66511 -10.11241,8.77332 -0.83116,1.10821 -3.97108,5.95663 -3.97108,5.95663 1.66231,-0.50793 4.94076,-1.01586 4.94076,-1.01586 0.0462,2.40112 -5.49486,6.7416 -5.49486,6.7416 -2.77053,1.89319 -5.77193,4.47901 -5.77193,4.47901 1.20056,11.49767 -5.58722,18.0084 -5.58722,18.0084 -9.28124,10.20475 -18.3427,0.76386 -20.22481,-4.20196 -3.17843,-8.38609 -13.802587,-15.78912 -23.687967,-17.82369 -11.028807,-2.26991 -14.129558,-1.84483 -21.05597,-3.46315 -19.763059,-4.61754 -25.561421,-6.75206 -38.510261,-9.37361 -7.526586,-1.52379 -13.8064366,-4.20196 -13.8064366,-4.20196 0,0 -10.8973881,-4.84841 -13.5293844,-8.35774 -2.6319962,-3.50933 7.20335825,-0.3694 7.20335825,-0.3694 0,0 5.60046125,2.09797 8.49626865,2.81669 19.1627801,4.75607 27.5461821,6.95957 33.8465491,7.24953 6.300367,0.29001 17.394868,0.27841 17.394868,0.27841 17.211282,0.25025 32.426083,4.51346 41.247855,12.11969 1.92916,1.66334 3.41698,1.73157 4.42129,1.92782 3.28987,0.10945 8.16149,-1.974 11.74009,-2.1587 z"
id="path455"
sodipodi:nodetypes="cczccscccsscccccsssscssccscc" /></g></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

21564
apps/vdn-static/src/assets/bulma.css vendored Normal file
View file

File diff suppressed because it is too large Load diff

BIN
apps/vdn-static/src/assets/discord.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
apps/vdn-static/src/assets/flakka.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 72 KiB

26
apps/vdn-static/src/assets/style.scss Normal file
View file

@ -0,0 +1,26 @@
@use "./bulma.css";
* {
--bulma-primary-h: 196deg;
--bulma-primary-l: 50%;
--bulma-primary-s: 100%;
--bulma-link-h: 293deg;
--bulma-link-l: 50%;
--bulma-link-s: 45%;
--bulma-warning-h: 31deg;
--bulma-warning-l: 75%;
--bulma-warning-s: 100%;
--bulma-info-h: 90deg;
--bulma-info-l: 50%;
--bulma-info-s: 45%;
--bulma-family-primary: Nunito,Inter,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
--bulma-family-secondary: Nunito,Inter,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
--bulma-body-family: Nunito,Inter,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
};

1
apps/vdn-static/src/assets/vue.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 496 B

9
apps/vdn-static/src/components/atoms/atoms.md Normal file
View file

@ -0,0 +1,9 @@
# What are atoms?
https://bradfrost.com/blog/post/atomic-web-design/
Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.

37
apps/vdn-static/src/components/molecules/HomeSectionWrapper.vue Normal file
View file

@ -0,0 +1,37 @@
<script setup lang="ts">
defineProps<{
title: string;
text: string;
image?: string;
alt?: string;
reverse: boolean;
}>();
</script>
<template>
<div class="box my-5 px-4 py-3 columns is-vcentered">
<template v-if="reverse">
<div class="column">
<h2 class="title is-4">{{ title }}</h2>
<p class="has-text-white">{{ text }}</p>
</div>
<div class="column is-one-quarter" v-if="image">
<figure class="image">
<img :src="image" :alt="alt" :title="alt" />
</figure>
</div>
</template>
<template v-else>
<div class="column is-one-quarter" v-if="image">
<figure class="image">
<img :src="image" :alt="alt" :title="alt" />
</figure>
</div>
<div class="column">
<h2 class="title is-4">{{ title }}</h2>
<p class="has-text-white">{{ text }}</p>
</div>
</template>
</div>
</template>

53
apps/vdn-static/src/components/molecules/LearningResourceWrapper.vue Normal file
View file

@ -0,0 +1,53 @@
<template>
<div class="box columns is-vcentered is-gap-4">
<div class="column is-one-quarter" v-if="image">
<figure class="image">
<img :src="image" :alt="alt" :title="alt" />
</figure>
</div>
<div class="column">
<h4 class="title">{{ title }}</h4>
<p class="subtitle">{{ subtitle }}</p>
<p class="content">{{ desc }}</p>
<div class="level">
<a :href="link"
target="_blank"
rel="noopener noreferrer nofollow"
class="button is-primary is-medium"
:text="joinText">
</a>
<a :href="``"
target="_blank"
rel="noopener noreferrer nofollow"
class="button is-info is-outlined is-medium"
:text="rulesText">
</a>
<a :href="rulesLink"
target="_blank"
rel="noopener noreferrer nofollow"
class="button is-warning is-outlined is-medium"
:text="rulesText">
</a>
</div>
</div>
</div>
</template>
<script setup lang="ts">
defineProps({
title: String,
subtitle: String,
desc: String,
link: String,
rulesLink: String,
joinText: String,
rulesText: String,
image: { type: String, required: false },
alt: { type: String, required: false },
})
</script>

9
apps/vdn-static/src/components/molecules/PaddingWrapper.vue Normal file
View file

@ -0,0 +1,9 @@
<template>
<div class="box my-6">
<slot />
</div>
</template>
<script lang="ts">
export default { name: "PaddingWrapper" };
</script>

9
apps/vdn-static/src/components/molecules/molecules.md Normal file
View file

@ -0,0 +1,9 @@
# What are molecules?
https://bradfrost.com/blog/post/atomic-web-design/
Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.

3
apps/vdn-static/src/components/organisms/SideBar.vue Normal file
View file

@ -0,0 +1,3 @@
<script setup></script>
<template></template>

11
apps/vdn-static/src/components/organisms/organisms.md Normal file
View file

@ -0,0 +1,11 @@
# What are organisms?
https://bradfrost.com/blog/post/atomic-web-design/
Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
We’re starting to get increasingly concrete. A client might not be terribly interested in the molecules of a design system, but with organisms we can see the final interface beginning to take shape. Dan Mall (who I’m working with on several projects) uses element collages, which articulate ideas for a few key organisms to facilitate client conversations and shape the visual direction (all without having to construct full comps).
Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.
Building up from molecules to organisms encourages creating standalone, portable, reusable components.

47
apps/vdn-static/src/components/pages/HomePage.vue Normal file
View file

@ -0,0 +1,47 @@
<script setup lang="ts">
import HomeSectionWrapper from "@/components/molecules/HomeSectionWrapper.vue";
import "@/assets/style.scss";
import { useI18n } from "vue-i18n";
import type { MessageSchema } from "@/i18n/types";
import { computed } from "vue";
const { tm } = useI18n();
const sectionList = computed<MessageSchema["sections"]>(() => tm("sections"));
const sectionsWithImages = computed(() =>
sectionList.value.map((section) => {
if (!section.image) return section;
return {
...section,
image: new URL(`../../assets/${section.image}`, import.meta.url)
.href,
};
}),
);
console.log(sectionList.value);
</script>
<template>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="title">BRÅTULA VIOSSA.NET MÅDE</div>
<div class="subtitle">
Hadjiplas per lera para Viossa – glossa fu vi
</div>
</div>
</section>
<section class="section container">
<HomeSectionWrapper
v-for="(section, index) in sectionsWithImages"
:key="index"
:title="section.title"
:text="section.text"
:image="section.image"
:alt="section.alt"
:reverse="index % 2 !== 0" />
</section>
</div>
</template>

46
apps/vdn-static/src/components/pages/ResourcesPage.vue Normal file
View file

@ -0,0 +1,46 @@
<script setup lang="ts">
import LearningResourceWrapper from "@/components/molecules/LearningResourceWrapper.vue";
import "@/assets/style.scss";
import { useI18n } from "vue-i18n";
import type { MessageSchema } from "@/i18n/types";
import { computed } from "vue";
const { tm } = useI18n();
const resourceList = computed<MessageSchema["resources"]>(() =>
tm("resources"),
);
const resourcesWithImages = computed(() =>
resourceList.value.map((resource) => {
if (!resource.image) return resource;
return {
...resource,
image: new URL(`../../assets/${resource.image}`, import.meta.url)
.href,
};
}),
);
</script>
<template>
<div>
<section class="section">
<h1 class="title">Learning Resources</h1>
</section>
<section class="section container">
<LearningResourceWrapper
v-for="(resource, index) in resourcesWithImages"
:key="index"
:title="resource.title"
:subtitle="resource.subtitle"
:desc="resource.desc"
:link="resource.link"
:rulesLink="resource.rulesLink"
:image="resource.image"
:alt="resource.alt"
:joinText="resource.joinText"
:rulesText="resource.rulesText" />
</section>
</div>
</template>

17
apps/vdn-static/src/i18n/index.ts Normal file
View file

@ -0,0 +1,17 @@
import { createI18n } from "vue-i18n";
import en_US from "../locales/en_US";
import vp_VL from "../locales/vp_VL";
import type { MessageSchema } from "./types";
const locales = { en_US, vp_VL } as const;
export type Locale = keyof typeof locales;
const i18n = createI18n<[MessageSchema], Locale>({
legacy: false,
locale: "vp_VL" satisfies Locale,
fallbackLocale: "en_US" satisfies Locale,
messages: locales,
});
export default i18n;

8
apps/vdn-static/src/i18n/types.ts Normal file
View file

@ -0,0 +1,8 @@
import en_US from "../locales/en_US";
export interface MessageSchema extends Broaden<typeof en_US> {}
type Broaden<T> = {
[K in keyof T]: T[K] extends object ? Broaden<T[K]>
: T[K] extends string ? string
: T[K];
} & {};

33
apps/vdn-static/src/locales/en_US.ts Normal file
View file

@ -0,0 +1,33 @@
export default {
sections: [
{
title: "What is Viossa?",
text: "Viossa is a community-created artificial pidgin language, created to simulate the formation of natural pidgin languages. Viossa is characterized by its lack of standardization, with each speaker developing a personal idiolect. Spelling and pronunciation can vary greatly, and serve as a form of personal self-expression. Viossa is learnt and taught entirely by immersion — translation is prohibited while learning.",
image: "flakka.png",
alt: "Flag of the Viossa Language",
},
{
title: "History of Viossa",
text: "Viossa began as a Skype group in 2014, created by members of the r/conlangs community on Reddit, as an experiment to simulate the formation of a pidgin language. Pidgins are simplified languages resulting from contact between populations with no shared common language. Unlike most pidgins, which usually have two to three contributor languages, Viossa comes from many diverse languages. This is because people from all around the world helped to contribute to Viossa's vocabulary.",
image: "flakka.png",
alt: "Flag of the Viossa Language",
},
{
title: "Community",
text: "The Viossa community is rich and colourful, drawing from many global traditions due to its worldwide online membership. Since the teaching culture puts an emphasis on linguistic immersion, and discourages prescriptivism, the culture of Viossa is as diverse and varied as the language and the people who speak it. For many, their personal dialect is a key form of identity and expression. The fluid nature of Viossa and lack of defined meanings makes Viossa popular for creative purposes, such as poetry and songwriting.",
},
],
resources: [
{
title: "Discord Server",
subtitle: "This is where most of the action happens! Hop on in!",
desc: "Originally started in 2015 something something read the rules here, then click the link below to join!",
link: "https://discord.gg/g3mG2gYjZD",
rulesLink: "https://viossadiskordserver.github.io/rules",
image: "discord.png",
alt: "Discord logo",
joinText: "Join",
rulesText: "Rules",
},
],
};

35
apps/vdn-static/src/locales/vp_VL.ts Normal file
View file

@ -0,0 +1,35 @@
import type { MessageSchema } from "@/i18n/types";
export default {
sections: [
{
title: "Kafaen afto Viossa",
text: "Viossa tte glossa mahena grun vi nai vil fshtojena na bakadjin, grun vi svinnur ja! De aldjin zovti lera ne",
image: "flakka.png",
alt: "Flag of the Viossa Language",
},
{
title: "History of Viossa",
text: "Viossa began as a Skype group in 2014, created by members of the r/conlangs community on Reddit, as an experiment to simulate the formation of a pidgin language. Pidgins are simplified languages resulting from contact between populations with no shared common language. Unlike most pidgins, which usually have two to three contributor languages, Viossa comes from many diverse languages. This is because people from all around the world helped to contribute to Viossa's vocabulary.",
image: "flakka.png",
alt: "Flag of the Viossa Language",
},
{
title: "Community",
text: "The Viossa community is rich and colourful, drawing from many global traditions due to its worldwide online membership. Since the teaching culture puts an emphasis on linguistic immersion, and discourages prescriptivism, the culture of Viossa is as diverse and varied as the language and the people who speak it. For many, their personal dialect is a key form of identity and expression. The fluid nature of Viossa and lack of defined meanings makes Viossa popular for creative purposes, such as poetry and songwriting.",
},
],
resources: [
{
title: "Discord Server",
subtitle: "This is where most of the action happens! Hop on in!",
desc: "Originally started in 2015 something something read the rules here, then click the link below to join!",
link: "https://discord.gg/g3mG2gYjZD",
rulesLink: "https://viossadiskordserver.github.io/rules",
image: "discord.png",
alt: "Discord logo",
joinText: "Join",
rulesText: "Rules",
},
],
} as const satisfies MessageSchema;

6
apps/vdn-static/src/main.ts Normal file
View file

@ -0,0 +1,6 @@
import { createApp } from "vue";
import App from "./App.vue";
import router from "./routes";
import i18n from "./i18n";
createApp(App).use(i18n).use(router).mount("#app");

19
apps/vdn-static/src/routes/index.ts Normal file
View file

@ -0,0 +1,19 @@
import { createRouter, createWebHistory } from "vue-router";
import type { RouteRecordRaw } from "vue-router";
import HomePage from "@/components/pages/HomePage.vue";
import ResourcesPage from "@/components/pages/ResourcesPage.vue";
const routes: RouteRecordRaw[] = [
{ path: "/", name: "Home", component: HomePage },
{ path: "/resources", name: "Resources", component: ResourcesPage },
// {
// path: '/:pathMatch(.*)*', // Vue Router 4 catch-all for 404s
// name: 'NotFound',
// component: NotFoundPage,
// },
];
const router = createRouter({ history: createWebHistory(), routes });
export default router;

5
apps/vdn-static/src/shims-vue.d.ts vendored Normal file
View file

@ -0,0 +1,5 @@
declare module "*.vue" {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}

22
apps/vdn-static/src/typed-router.d.ts vendored Normal file
View file

@ -0,0 +1,22 @@
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
// It's recommended to commit this file.
// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
declare module 'vue-router/auto-routes' {
import type {
RouteRecordInfo,
ParamValue,
ParamValueOneOrMore,
ParamValueZeroOrMore,
ParamValueZeroOrOne,
} from 'vue-router'
/**
* Route name map generated by unplugin-vue-router
*/
export interface RouteNamedMap {
}
}

2
apps/vdn-static/src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1,2 @@
/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

25
apps/vdn-static/tsconfig.app.json Normal file
View file

@ -0,0 +1,25 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"noUncheckedIndexedAccess": true,
"module": "esnext",
"moduleResolution": "bundler",
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
},
"include": [
"src"
]
}

7
apps/vdn-static/tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

28
apps/vdn-static/tsconfig.node.json Normal file
View file

@ -0,0 +1,28 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": [
"ES2023"
],
"module": "NodeNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "nodenext",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"esModuleInterop": true,
},
"include": [
"vite.config.ts"
]
}

8
apps/vdn-static/vite.config.ts Normal file
View file

@ -0,0 +1,8 @@
import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue({})],
resolve: { alias: { "@": path.resolve(import.meta.dirname, "src") } },
});