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

feat: unplugin-vue-router, prettier, eslint, .gitattributes

Browse source
This commit is contained in:
Benjamin Singleton 2025-05-13 15:24:17 -05:00
parent 0d98f11e21
commit 53c6efa701
24 changed files with 3175 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/App.vue
View file

@ -1,34 +1,9 @@
<template>
<div class="min-h-screen flex flex-col" style="gap: 4rem;"><!-- Main application wrapper -->
<!-- <SideBar /> -->
<h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
<PaddingWrapper v-for="(sectionName, index) in sectionList" :key="index">
<component :is="sectionName" />
</PaddingWrapper>
</div>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/resources">Resources</RouterLink>
</nav>
<main>
<RouterView />
</main>
</template>
<script lang="ts">
// import SideBar from './components/organisms/SideBar.vue'
import PaddingWrapper from './components/molecules/PaddingWrapper.vue'
import IntroSection from './components/organisms/IntroSection.vue'
import HistorySection from './components/organisms/HistorySection.vue'
import './assets/style.scss'
import 'bulma/css/bulma.css'
export default {
name: 'app',
components: {
PaddingWrapper,
IntroSection,
HistorySection
},
data() {
return {
sectionList: ['IntroSection', 'HistorySection']
}
}
}
</script>

17
src/assets/style.scss
View file

@ -1,13 +1,16 @@
@import 'bulma/css/bulma.css';
@import "bulma/css/bulma.css";
$viossa-blue: #65B7F9;
$viossa-blue: #65b7f9;
body {
background-color: $viossa-blue;
font: normal Verdana, Arial, sans-serif;
color: black;
background-color: $viossa-blue;
font:
normal Verdana,
Arial,
sans-serif;
color: black;
}
h1 {
font-size: 48px;
}
font-size: 48px;
}

2
src/components/atoms/atoms.md
View file

@ -6,4 +6,4 @@ Atoms are the basic building blocks of matter. Applied to web interfaces, atoms
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.
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.

12
src/components/molecules/PaddingWrapper.vue
View file

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

2
src/components/molecules/molecules.md
View file

@ -6,4 +6,4 @@ Things start getting more interesting and tangible when we start combining atoms
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.
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.

48
src/components/organisms/HistorySection.vue
View file

@ -1,18 +1,34 @@
<template>
<div class="columns is-vcentered">
<div class="columns is-vcentered">
<!-- Text Column (left 3/4) -->
<div class="column">
<h2 class="title is-4">Viossa's History</h2>
<p class="has-text-white">
Knock over christmas tree... If it fits i sits, jump five feet
high and sideways when a shadow moves, rub face on owner and
sometimes switches in french and say "miaou" just because well
why not. Good morning sunshine, pet a cat, rub its belly, endure
blood and agony, quietly weep, keep rubbing belly. Chase ball of
string stares at human while pushing stuff off a table ooooh
feather moving feather! jump up to edge of bath, fall in then
scramble in a mad panic to get out slap kitten brother with paw
for chase mice. Have a lot of grump in yourself because you
can't forget to be grumpy and not be like king grumpy cat
mmmmmmmmmeeeeeeeeooooooooowwwwwwww but cough furball into food
bowl then scratch owner for a new one. Scream at teh bath open
the door, let me out, let me out, let me-out, let me-aow, let
meaow, meaow!
</p>
</div>
<!-- Text Column (left 3/4) -->
<div class="column">
<h2 class="title is-4">Viossa's History</h2>
<p class="has-text-white">Knock over christmas tree... If it fits i sits, jump five feet high and sideways when a shadow moves, rub face on owner and sometimes switches in french and say "miaou" just because well why not. Good morning sunshine, pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly. Chase ball of string stares at human while pushing stuff off a table ooooh feather moving feather! jump up to edge of bath, fall in then scramble in a mad panic to get out slap kitten brother with paw for chase mice. Have a lot of grump in yourself because you can't forget to be grumpy and not be like king grumpy cat mmmmmmmmmeeeeeeeeooooooooowwwwwwww but cough furball into food bowl then scratch owner for a new one. Scream at teh bath open the door, let me out, let me out, let me-out, let me-aow, let meaow, meaow!</p>
</div>
<!-- Image Column (right 1/4) -->
<div class="column is-one-quarter">
<figure class="image">
<img src="/src/assets/flakka.png" alt="Flag of the Viossa Language">
</figure>
</div>
</div>
</template>
<!-- Image Column (right 1/4) -->
<div class="column is-one-quarter">
<figure class="image">
<img
src="/src/assets/flakka.png"
alt="Flag of the Viossa Language"
/>
</figure>
</div>
</div>
</template>

51
src/components/organisms/IntroSection.vue
View file

@ -1,18 +1,37 @@
<template>
<div class="columns is-vcentered">
<div class="columns is-vcentered">
<!-- Image Column (left 1/4) -->
<div class="column is-one-quarter">
<figure class="image">
<img
src="/src/assets/flakka.png"
alt="Flag of the Viossa Language"
/>
</figure>
</div>
<!-- Image Column (left 1/4) -->
<div class="column is-one-quarter">
<figure class="image">
<img src="/src/assets/flakka.png" alt="Flag of the Viossa Language">
</figure>
</div>
<!-- Text Column (right 3/4) -->
<div class="column">
<h2 class="title is-4">What is Viossa?</h2>
<p class="has-text-white">Cat ipsum dolor sit amet, be superior eats owners hair then claws head gimme attention gimme attention gimme attention gimme attention gimme attention gimme attention just kidding i don't want it anymore meow bye. Avoid the new toy and just play with the box it came in floof tum, tickle bum, jellybean footies curly toes curl up and sleep on the freshly laundered towels hiss and stare at nothing then run suddenly away. Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me attack the dog then pretend like nothing happened jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap steal raw zucchini off kitchen counter...</p>
</div>
</div>
</template>
<!-- Text Column (right 3/4) -->
<div class="column">
<h2 class="title is-4">What is Viossa?</h2>
<p class="has-text-white">
Cat ipsum dolor sit amet, be superior eats owners hair then
claws head gimme attention gimme attention gimme attention gimme
attention gimme attention gimme attention just kidding i don't
want it anymore meow bye. Avoid the new toy and just play with
the box it came in floof tum, tickle bum, jellybean footies
curly toes curl up and sleep on the freshly laundered towels
hiss and stare at nothing then run suddenly away. Need to check
on human, have not seen in an hour might be dead oh look, human
is alive, hiss at human, feed me attack the dog then pretend
like nothing happened jump on human and sleep on her all night
long be long in the bed, purr in the morning and then give a
bite to every human around for not waking up request food, purr
loud scratch the walls, the floor, the windows, the humans eat
prawns daintily with a claw then lick paws clean wash down
prawns with a lap of carnation milk then retire to the warmest
spot on the couch to claw at the fabric before taking a catnap
steal raw zucchini off kitchen counter...
</p>
</div>
</div>
</template>

8
src/components/organisms/SideBar.vue
View file

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

2
src/components/organisms/organisms.md
View file

@ -8,4 +8,4 @@ We’re starting to get increasingly concrete. A client might not be terribly in
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.
Building up from molecules to organisms encourages creating standalone, portable, reusable components.

12
src/main.ts
View file

@ -1,5 +1,9 @@
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { createRouter, createWebHistory } from "vue-router";
import { routes } from "vue-router/auto-routes";
createApp(App).mount('#app')
const router = createRouter({ history: createWebHistory(), routes: routes });
createApp(App).use(router).mount("#app");

32
src/routes/index.vue Normal file
View file

@ -0,0 +1,32 @@
<template>
<div class="min-h-screen flex flex-col" style="gap: 4rem">
<!-- Main application wrapper -->
<!-- <SideBar /> -->
<h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
<PaddingWrapper
v-for="(sectionName, index) in sectionList"
:key="index"
>
<component :is="sectionName" />
</PaddingWrapper>
</div>
</template>
<script lang="ts">
// import SideBar from './components/organisms/SideBar.vue'
import PaddingWrapper from "../components/molecules/PaddingWrapper.vue";
import IntroSection from "../components/organisms/IntroSection.vue";
import HistorySection from "../components/organisms/HistorySection.vue";
import "../assets/style.scss";
import "bulma/css/bulma.css";
export default {
name: "app",
components: { PaddingWrapper, IntroSection, HistorySection },
data() {
return { sectionList: ["IntroSection", "HistorySection"] };
},
};
</script>

3
src/routes/resources.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<h1>Resources</h1>
</template>

10
src/shims-vue.d.ts vendored
View file

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

94
src/style.css
View file

@ -1,79 +1,79 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 1em;
padding: 1em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

24
src/typed-router.d.ts vendored Normal file
View file

@ -0,0 +1,24 @@
/* 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 {
'/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
'/resources': RouteRecordInfo<'/resources', '/resources', Record<never, never>, Record<never, never>>,
}
}

1
src/vite-env.d.ts vendored
View file

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