Giter Club home page Giter Club logo

oce's Introduction

Contributors Forks Stargazers Issues MIT License


Logo

oce

App to translate Scripture step by step
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. License
  7. Contact
  8. Acknowledgments

About The Project

![Product Name Screen Shot][product-screenshot]

Purpose

  • The purpose of this project

Problem

  • The problem statement

Scope

  • What's in scope and out of scope for this project?

Background

  • What led us to this point? How did we get here?

(back to top)

Built With

(back to top)

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

Data what is the source of the data and data formats are covered by this project?

This is an example of how to list things you need to use the software and how to install them.

  • npm 
    npm install npm@latest -g

Installation/First Steps

  1. Get a free API Key at https://example.com
  2. Clone the repo 
    git clone https://github.com/texttree/oce.git
  3. Install NPM packages 
    npm install
  4. Enter your API in config.js 
    const API_KEY = 'ENTER YOUR API';

(back to top)

Usage/Integration

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

(back to top)

Roadmap

  • [] Feature 1
  • [] Feature 2
  • [] Feature 3
    • [] Nested Feature

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. Guidelines for external contributions.

You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

If you would like to fork the repo and create a pull request.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Discord: oce

Project Link: https://github.com/texttree/oce

(back to top)

Acknowledgments

(back to top)

oce's People

Contributors

pavel064 avatar foxprogs avatar valyukhov avatar vorobushec avatar

Stargazers

총 avatar avatar

Watchers

avatar avatar

oce's Issues

adapt ComponentCard

Сделать все статические текста, картинки (любую информацию) импортируемыми через пропс. Поставить проверки на их отсутствие

Index Page

image

начальная страница включает в себя:
header
блок с заголовком и двумя внутренними ссылками (вынести в отдельный компонент)
Slider of components
Slider of Apps
Блок с текстом и ссылкой (вынести в отдельный компонент)
footer

image

Compoent Page

image

Страница отображения компонента включает в себя:

header
заголовок
краткое описание
версия, дата публикации(если есть)
лейблы выводить в строку
4 вкладки:
image

  1. Ридми файл
  2. В каких приложениях есть
  3. От чего зависит
  4. Кто зависит от него
    sidebar справа
    image

App Page

изображение
страница приложения включает в себя:

header
заголовок
краткое описание, картинка
версия, дата публикации
image

лейблы выводить в строку
image

4 вкладки:
изображение
Ридми приложения
Какие рсл использует
От чего зависит
Кто от него зависит (наверное надо это убрать)

sidebar справа
изображение

Error Page

изображение
Исправить чтобы был нормальный дизайн у страницы с ошибкой

Setup webhooks

Pull updates for:
Readme.md
OCE.json
Package.json
topics
url of home page
description

Get started page

image

Сверстать начальную страницу со ссылками на статичные страницы

card of component in search page

изображение
Карточка фиксированного размера по высоте, чтобы не ломала сетку
Заголовок в одну строку, добавить три точки если он длинный
Лейблы в одну строку, три точки если их больше
Описание в три строки, три точки если оно больше
аватар владельца
версия компонента, если есть

Slider of Apps

изображение
Слева название компонента "Apps", под ним описание и карусель состоящая из компонентов Apps (см скриншот)
Напротив названия (с правой стороны) стрелочки влево-вправо которые позволяют листать карусель

Layout setup

изображение
Настроить лейаут. Он будет одинаковый на всех страницах. Шапка, контент и футер

sidebar in layout

image

this component is repeated in component & app pages
displays license information, home page, release repository, version, owner, and list of contributors

Footer

image

слева: svg + название
центр Авторское право
справа: ссылки

filter component

image

языка и размера не будет

все изменения меняют юрл
три параметра:
order - порядок сортировки, по популярности или по обновлению,
direction - направление сортировки,
topics: [], - тут массив с метками, которые выбраны
query: '' - тут строка запроса поиска

App in Component Page

image_2022-07-25_10-59-42
Создать компонент. Картинка слева. Справа название, под ним описание
Клик ведет на страницу приложения

connecting custom font

подключить в конфиге TWCSS шрифт Ubuntu как основной

Changes in design

  1. Get Started - other color
    image
    image
  2. Remove text under header image
  3. Remove top pazzleman
    image

image
reduce the distance between header and heading by 2/3
5.
image
image

reduce the distance by 2 times
6.
image
image

reduce the distance between header and heading by 2/3
7.
image
reduce the distance by 2 times

image
remove
9.
image
remove

List of components

изображение
Показывать 20 компонентов. При прокрутке догружать остальные, если есть

footer adjustment

image

Скорректировать дизайн футера согласно правкам в фигма

header component for static page

image
Сделать шапку для статических страниц. Компонент принимает название, автора, дату публикации

Header

image

Создать компонент Header:
слева: svg + название
справа: ссылки

Labels Component

изображение
изображение

Две версии, маленькая (вверху) или большая (внизу)
Маленькая отличается тем что метки записаны в одну строку, и три точки в конце дописываются
Добавить 16 цветов
Придумать алгоритм, по которому будет браться цвет. Чтобы одна и та же метка всегда была одним и тем же цветом (например по количеству букв, или по какому-то хешу от имени)
По клику на метку переходить на страницу поиска компонентов, и чтобы была в фильтре выбрана уже эта метка

about: active anchor

image

на странице 4 якорные ссылки.
при переходе по ссылке необходимо делать активной саму ссылку

contributors

image
In sidebar
List about contributors of current app or RCL from github. Need to find Api.
Title +count
in bottom - list of avatars

Search query

Сейчас страница не реагирует на поисковый запрос. Надо это исправить в компоненте ComponentsList, useComponents, api/components, везде прокинуть этот query

Make theme palette

Создать палитру цветов с primary (синий), secondary(желтый), текст (серый) и использовать их на сайте.

about page

image

сверстать страницу About

Components Page

image

страница со списком компонентов включает в себя:

header
блок с заголовком
фильтр + поиск
Text Tree тут не будет
список компонентов в виде таблицы
footer

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.