Ogone
Description
Ogone for Front-end fields using Deno. Designed differently, start creating differently. Everything is a component because everything is a part of the composition.
Actually Ogone is too young to be used for production, expect breaking chnages until the 1.0.0.
Ogone has it own extension *.o3 which allow some new features.
If you're interested by this project: please join the Discord here
If you want to collaborate: please find the project's architecture here
Installation
deno install -Afq --unstable https://deno.land/x/ogone/cli/ogone.tsOverview
find this example in this repository
import component StoreMenu from '@/examples/app/stores/StoreMenu.o3';
/**
* @name Burger
* @description
* this component will open the menu in the application
*/
<template>
<style>
@const shadowColor = #00000045;
@const lineBackground = #848181;
.container {
padding: 9px;
width: 28px;
height: auto;
background: var(--o-header);
display: flex;
flex-direction: column;
filter: drop-shadow(0px 0px 0px $shadowColor);
&:hover {
filter: drop-shadow(0px 5px 3px $shadowColor);
}
&:hover .line {
background: var(--o-primary);
}
.line {
background: $lineBackground;
margin-top: 2px;
margin-bottom: 2px;
height: 4px;
}
.line, & {
border-radius: 5px;
transition: filter 0.2s ease;
cursor: pointer;
}
}
</style>
<StoreMenu namespace="menu" />
<div class="container" --click:openMenu>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</template>
<proto>
declare:
public isOpen: boolean = false;
case 'click:openMenu':
Store.dispatch('menu/toggle')
Store.dispatch('menu/checkController')
.then((res: any) => {
console.warn(res);
});
break;
</proto>Extensions
the only extension available is Otone on Visual Studio Code, this one includes the following configurations:
- snippets
- syntax high-lighting
- diagnostics
- webview (live edition)
- overviews
- quick naviguation