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

Installation

deno install -Afq --unstable https://deno.land/x/ogone/cli/ogone.ts

Overview

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>
  <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>

<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>

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