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

• Introduction
• Examples
• Project Architecture

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