Coder Social home page Coder Social logo

onsen.io's Introduction

onsen.io

Circle CI

This repository contains the assets in Onsen UI Website, available on http://onsen.io. Please Visit Onsen UI if you need access to the framework itself.

Installation

git clone --recurse-submodules [email protected]:OnsenUI/onsen.io.git
cd onsen.io
npm install -g gulp
npm install

# Update necessary submodules
git submodule update --remote dist/v2/OnsenUI dist/playground

# Build Onsen UI
(cd dist/v2/OnsenUI && npm install && npm run build && npm run docs)

How to Build

gulp generate --lang en
gulp generate --lang ja

Edit & Serve

gulp serve --lang en

Translate

1. $ gulp i18n-extract # This will generate POT files into src/i18n/gettext
2. And use PO editor to generate po files
3. $ gulp i18n-translate # This will translate and overwrite files into src/documents_ja/

Local development

To use your local version of the Onsen UI main repository, symlink it:

rm -rf dist/v2/OnsenUI/ && ln -s ~/src/OnsenUI/ dist/v2

Releasing to Production

This repository is set up on CircleCI to automatically build with every commit. Commits to master are automatically deployed to the staging website at s.onsen.io. To deploy to production, merge master into the production branch. Typically this merge is done through a pull request on GitHub, even if you immediately merge it yourself. Once merged, CircleCI will automatically deploy everything in the production branch.

How to contribute

We will happily accept contributions to the onsen.io website. However, it is much more likely that it is another repository that you want to make your pull request to. This repository contains the Onsen UI marketing materials, and brings in most of the rest of the content from other repositories.

Which repository to choose?

Here is where you should make changes:

Contributing to this repository

If the repository you need to make changes to is this one, then the workflow is simple, and the same as you will see in other open source projects.

  1. Fork the repository
  2. Commit your changes. Please squash commits where possible.
  3. Make a pull request to master.
  4. After you've made a pull request we will review it. If everything is fine and we like the change the contribution will be pulled into the repository. In the case where there are some issues with the code or we disagree with how it's been implemented we will describe the issues in the comments so they can be corrected.

onsen.io's People

Contributors

adamkozuch avatar anatoo avatar andipavllo avatar argelius avatar asial-matagawa avatar asialgearoid avatar asialmakki avatar balupton avatar cvetkovskin avatar didiyordanov avatar emccorson avatar erisu avatar frandiox avatar goofmint avatar iliasky avatar jackchuka avatar kanakoubukata avatar keijiodagawa avatar khemry avatar knaito-asial avatar konstantindinev avatar kruyvanna avatar masahirotanaka avatar mdeguchi avatar misterjunio avatar philolo1 avatar takuyaw avatar unaso avatar yong-asial avatar yukisekiguchi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

onsen.io's Issues

NodeBB broken in Onsen 2 doc

@frankdiox There's a couple of errors in the NodeBB code for the Onsen 2 docs.

This is the generated object:

  var articleData = {
    title_plain: 'ons-button',
    url: 'https://onsen.ioreference/ons-button.html',
    tags: [{title: 'ons-button'}],
    cid: 9,
    markDownContent: '<div>' + '[en]Button component. If you want to place a button in a toolbar, use ons-toolbar-button or ons-back-button instead.[/en]
[ja]ボタン用コンポーネント。ツールバーにボタンを設置する場合は、ons-toolbar-buttonもしくはons-back-buttonコンポーネントを使用します。[/ja]' + '</div>'
  };

Vue: Fix API document generation

When the Vue docs are generated, there are some mistakes:

  1. Some of the core elements have properties that are not reflected as attributes. For example, ons-toolbar has a visible property but no visible attribute.The Vue docs only show the core attributes, not the core properties. If both core property and attribute is defined, only core property should be shown in docs.
  2. Where the Vue component already has a prop defined, any core attributes or properties of the same name should not be shown e.g. if core and Vue both have a visible prop, only show the Vue visible prop.
  3. Read-only properties on the core element should not be shown as Vue props.

how to use es modules with create-react-app

hi, i'm trying to add onsen ui to a create-react-app app. while the react bindings work fine, they have blown out my app size. i see in https://onsen.io/v2/guide/appsize.html#es-modules that i can use es modules, and since create-react-app is already using webpack, the import works fine. sadly, my app throws an error when i try to add an element like ons-list-item. the error is TypeError: Constructor HTMLElement requires 'new' which i suspect occurs because react detects the capitalized function name and assumes it is a react component.

could you please add some documentation on how to use es modules with create-react-app? thanks.

image

Kuroshiro looks for dict in home directory

gulp generate fails because Kuroshiro is looking for the directory dict in the home directory.

I think the correct directory is node_modules/kuromoji/dict.

eric@x1:~/src/onsen.io$ gulp generate --lang en
[12:51:18] Language: --lang=en
[12:51:18] Environment: staging
[12:51:18] Source: './src/documents_en'
[12:51:18] Destination: './out_en'
[12:51:18] Using gulpfile ~/src/onsen.io/gulpfile.js
[12:51:18] Starting 'generate'...
[12:51:18] Starting 'less'...
[12:51:19] Finished 'less' after 874 ms
[12:51:19] Starting 'metalsmith'...
[12:51:20] 'metalsmith' errored after 1.26 s
[12:51:20] Error: Kuroshiro initialize failed! Error: ENOENT: no such file or directory, open '/home/eric/dict/check.dat.gz'
  at formatError (/home/eric/.nvm/versions/node/v10.14.1/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/format-error.js:20:10)
  at Gulp.<anonymous> (/home/eric/.nvm/versions/node/v10.14.1/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/log/events.js:31:15)
  at Gulp.emit (events.js:187:15)
  at Gulp.EventEmitter.emit (domain.js:442:20)
  at Object.error (/home/eric/src/onsen.io/node_modules/undertaker/lib/helpers/createExtensions.js:61:10)
  at handler (/home/eric/src/onsen.io/node_modules/now-and-later/lib/mapSeries.js:43:14)
  at f (/home/eric/src/onsen.io/node_modules/once/once.js:25:25)
  at f (/home/eric/src/onsen.io/node_modules/once/once.js:25:25)
  at tryCatch (/home/eric/src/onsen.io/node_modules/async-done/index.js:24:15)
  at done (/home/eric/src/onsen.io/node_modules/async-done/index.js:40:12)
  at Domain.onError (/home/eric/src/onsen.io/node_modules/async-done/index.js:51:5)
  at Object.onceWrapper (events.js:273:13)
  at Domain.emit (events.js:182:13)
  at Domain.EventEmitter.emit (domain.js:442:20)
  at Domain._errorHandler (domain.js:224:23)
  at Object.setUncaughtExceptionCaptureCallback (domain.js:140:29)
  at process._fatalException (internal/bootstrap/node.js:490:31)

[12:51:20] 'generate' errored after 2.14 s

The quick workaround is to symlink node_modules/kuromoji/dict to the home directory.

Angular 2+ css import error

I have an Angular 2+ project with scss styleengine (created by angular cli ng new app --style=scss), the angular cli install itself with the following dependencies:
[email protected]
[email protected]
[email protected]

With this configuration if I follow the documentation and try to import the onsenui css files with
@import '../node_modules/onsenui/css/onsenui.css';
@import '../node_modules/onsenui/css/onsen-css-components.css';

In buildtime I got error:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed: Error: Can't resolve 'ionicons/css/ionicons.min.css' in 'your-project-path\node_modules\onsenui\css'

I have to open the node_modules\onsenui\css\onsenui.css file and manually change the imports path to relative paths (e.x. from ionicons/css/ionicons.min.css to ./ionicons/css/ionicons.min.css):
@import url("./ionicons/css/ionicons.min.css");
@import url("./material-design-iconic-font/css/material-design-iconic-font.min.css");
@import url("./font_awesome/css/font-awesome.min.css");

Error installing vue-onsenui

hello there, i was trying to install onsenui in a fresh vue 3 installation following the docs but there's a problem when i try to install the vue-onsenui package:

npm install vue-onsenui
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   vue@"^3.2.22" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"~2.6.0" from [email protected]
npm ERR! node_modules/vue-onsenui
npm ERR!   vue-onsenui@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/monster/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/monster/.npm/_logs/2023-02-21T19_59_17_381Z-debug-0.log

this is the docs page i've following https://onsen.io/v2/guide/vue3/#setting-up-a-new-project
and the problems seems to be related to the vue-onsenui required packages, how can install it for vue 3?

Failed to setup in local

(cd dist/v2/OnsenUI/bindings/react && yarn install && yarn gen-docs)

➜  onsen.io git:(master) ✗ (cd dist/v2/OnsenUI/bindings/react && yarn install && yarn gen-docs)
cd: no such file or directory: dist/v2/OnsenUI/bindings/react

gulp serve --lang en

➜  onsen.io git:(master) ✗ gulp serve --lang en
[21:50:17] Language: --lang=en
[21:50:17] Environment: staging
[21:50:17] Source: './src/documents_en'
[21:50:17] Destination: './out_en'
[21:50:17] Using gulpfile ~/projects/onsenui/onsen.io/gulpfile.js
[21:50:17] Starting 'serve'...
[21:50:17] Starting 'generate'...
[21:50:17] Starting 'less'...
[21:50:18] Finished 'less' after 1.14 s
[21:50:18] Starting 'metalsmith'...
(node:43247) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[21:50:22] Generated into './out_en'
[21:50:22] Finished 'metalsmith' after 4.61 s
[21:50:22] Starting 'blog'...
tags
Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments:
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 2015-12-3, _f: undefined, _strict: undefined, _locale: [object Object]
Error
    at Function.createFromInputFallback (/Users/asial/projects/onsenui/onsen.io/node_modules/moment/moment.js:1:1)
    at configFromString (/Users/asial/projects/onsenui/onsen.io/node_modules/moment/moment.js:1:1)
    at configFromInput (/Users/asial/projects/onsenui/onsen.io/node_modules/moment/moment.js:1:1)
    at prepareConfig (/Users/asial/projects/onsenui/onsen.io/node_modules/moment/moment.js:1:1)
    at createFromConfig (/Users/asial/projects/onsenui/onsen.io/node_modules/moment/moment.js:1:1)
    at createLocalOrUTC (/Users/asial/projects/onsenui/onsen.io/node_modules/moment/moment.js:1:1)
    at createLocal (/Users/asial/projects/onsenui/onsen.io/node_modules/moment/moment.js:1:1)
    at hooks (/Users/asial/projects/onsenui/onsen.io/node_modules/moment/moment.js:1:1)
    at Object.renderBlogDateShort (/Users/asial/projects/onsenui/onsen.io/modules/helpers.js:1:1)
    at Object.eval (<anonymous>:1:1)
    at Object.eval (<anonymous>:1:1)
    at eval (<anonymous>:1:1)
    at Function.eco.render (/Users/asial/projects/onsenui/onsen.io/node_modules/eco/lib/index.js:1:1)
    at Object.renderFileContent (/Users/asial/projects/onsenui/onsen.io/modules/helpers.js:1:1)
    at Object.partial (/Users/asial/projects/onsenui/onsen.io/modules/helpers.js:1:1)
    at Object.eval (<anonymous>:1:1)
    at Object.eval (<anonymous>:1:1)
    at eval (<anonymous>:1:1)
    at Function.eco.render (/Users/asial/projects/onsenui/onsen.io/node_modules/eco/lib/index.js:1:1)
    at exports.eco.render (/Users/asial/projects/onsenui/onsen.io/node_modules/metalsmith-templates/node_modules/consolidate/lib/consolidate.js:1:1)
    at convert (/Users/asial/projects/onsenui/onsen.io/node_modules/metalsmith-templates/lib/index.js:1:1)
    at /Users/asial/projects/onsenui/onsen.io/node_modules/metalsmith-templates/node_modules/async/lib/async.js:1:1
    at Array.forEach (<anonymous>:null:null)
    at _each (/Users/asial/projects/onsenui/onsen.io/node_modules/metalsmith-templates/node_modules/async/lib/async.js:1:1)
    at async.each (/Users/asial/projects/onsenui/onsen.io/node_modules/metalsmith-templates/node_modules/async/lib/async.js:1:1)
    at /Users/asial/projects/onsenui/onsen.io/node_modules/metalsmith-templates/lib/index.js:1:1
    at Immediate.next [as _onImmediate] (/Users/asial/projects/onsenui/onsen.io/node_modules/metalsmith-branch/node_modules/ware/lib/index.js:1:1)
    at processImmediate (node:internal/timers:1:1)
    at process.topLevelDomainCallback (node:domain:1:1)
    at process.callbackTrampoline (node:internal/async_hooks:1:1)

[21:50:26] Finished 'blog' after 3.81 s
[21:50:26] Starting 'authors'...
[21:50:26] Finished 'authors' after 253 ms
[21:50:26] Finished 'generate' after 9.82 s
[21:50:26] Starting 'serve'...
[21:50:27] Finished 'serve' after 258 ms
[21:50:27] Finished 'serve' after 10 s
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.11.3:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: out_en

gulp i18n-translate

➜  onsen.io git:(master) ✗  gulp i18n-translate
[21:53:53] Language: --lang=ja
[21:53:53] Environment: staging
[21:53:53] Source: './src/documents_ja'
[21:53:53] Destination: './out_ja'
[21:53:53] Using gulpfile ~/projects/onsenui/onsen.io/gulpfile.js
[21:53:53] Starting 'i18n-translate'...
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/appsize.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/appsize.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/architecture.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/architecture.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/build.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/build.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/community.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/community.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/compilation.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/compilation.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/cordova.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/cordova.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/deploy.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/deploy.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/extend.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/extend.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/faq.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/faq.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/features.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/features.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/frameworks.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/frameworks.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/fundamentals.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/fundamentals.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/index.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/index.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/installation.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/installation.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/lifecycle.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/lifecycle.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/monaca.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/monaca.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/theming.po...
ENOENT: no such file or directory, open '/p/gh/OnsenUI/onsen.io/src/documents_en/v2/guide/theming.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/angular1/index.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/angular1/index.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/angular2/index.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/angular2/index.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/jquery/index.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/jquery/index.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/react/index.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/react/index.html'
[21:53:53] Processing /Users/asial/projects/onsenui/onsen.io/src/i18n/gettext/v2/guide/vue/index.po...
ENOENT: no such file or directory, open '/Users/masahiro/Data/onsen.io/src/documents_en/v2/guide/vue/index.html'
[21:53:53] Finished 'i18n-translate' after 114 ms

react select platform

Hi,

To set platform to IOS , in javascript i use
Ons.platform.select('ios')

how to set platform in Reacj js ? any example please.

Guide on adding blog posts.

Write a comprehensive guide on how to add a blog post in README.md.

It should include all the steps necessary such as:

  • Add a new author in both config.js and a {{NAME}}.markdown file
  • Where to put blog post
  • Blog header format
  • Where to put images
  • How to make a pull request.

When this is done we can refer to this guide when people want to write blog posts.

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.