https://github.com/SRNV/Ogone

Advanced Web Composition for Future
https://github.com/SRNV/Ogone

deno front-end front-end-development frontend frontend-framework javascript ogone typescript webcomponent webcomponents-framework yaml

Last synced: 3 months ago
JSON representation

Advanced Web Composition for Future

• Host: GitHub
• URL: https://github.com/SRNV/Ogone
• Owner: SRNV
• License: mit
• Archived: true
• Created: 2020-04-21T08:07:11.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-07-27T12:04:53.000Z (over 3 years ago)
• Last Synced: 2024-05-21T12:12:52.008Z (6 months ago)
• Topics: deno, front-end, front-end-development, frontend, frontend-framework, javascript, ogone, typescript, webcomponent, webcomponents-framework, yaml
• Language: TypeScript
• Homepage:
• Size: 3.93 MB
• Stars: 38
• Watchers: 3
• Forks: 4
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        



  



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](https://discord.gg/gCnGzh2wMc)

If you want to collaborate: [please find the project's architecture here](https://whimsical.com/ogone-flow-and-architecture-F8AqYfXs46t65gL9eofFkk) 

# Installation

```shell

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

```

- [Introduction](https://github.com/SRNV/Ogone/tree/master/docs/introduction.md)

- [Examples](https://github.com/SRNV/Ogone/tree/master/docs/examples.md)

- [Project Architecture](https://whimsical.com/ogone-flow-and-architecture-F8AqYfXs46t65gL9eofFkk)

# Overview

> find this example in this repository

```typescript

import component StoreMenu from '@/examples/app/stores/StoreMenu.o3';

/**

 * @name Burger

 * @description

 *   this component will open the menu in the application

*/

  

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

      }

    }

  

  

  


    


    


    


  


  declare:

    public isOpen: boolean = false;

  case 'click:openMenu':

    Store.dispatch('menu/toggle')

    Store.dispatch('menu/checkController')

      .then((res: any) => {

        console.warn(res);

      });

    break;

```

---

# 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