Skip to content

Commit 6447c90

Browse files
rigor789rigor789
committed
wip
1 parent a30b93b commit 6447c90

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+928
-44
lines changed

‎build/index.js

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,23 @@ Metalsmith(cwd)
3333
siteurl: 'https://nativescript-vue.org/',
3434
description: 'Build truly native apps using Vue.js',
3535
moment,
36-
lang(locale) {
37-
const found = this.links.find(l => l.endsWith(`${this.slug}/index.html`) && l.includes(locale));
38-
if(found) {
36+
lang(locale, slug) {
37+
locale = locale || this.locale || this.defaultLocale;
38+
slug = slug || this.slug;
39+
const found = this.links.find(l => l.endsWith(`${slug}/index.html`) && l.includes(locale));
40+
41+
if (found) {
3942
return found;
4043
}
41-
return `/${locale === 'en' ? '' : locale}`;
44+
return `/${locale === this.defaultLocale ? '' : locale}`;
45+
},
46+
sortCategories(a, b) {
47+
if (a.fileName) {
48+
return a.fileName.localeCompare(b.fileName);
49+
} else if (a.level) {
50+
// todo: we might need to alter this for correct ordering
51+
return a.level - b.level;
52+
}
4253
}
4354
})
4455
.use((files, metalsmith, done) => {
@@ -69,11 +80,18 @@ Metalsmith(cwd)
6980
"layouts/**/*": '**/*.md',
7081
}
7182
})))
72-
.use(order())
83+
.use((files, metalsmith, done) => {
84+
Object.keys(files).forEach(file => {
85+
files[file].fileName = path.basename(file);
86+
});
87+
88+
done();
89+
})
7390
.use(locales({
7491
defaultLocale: 'en',
75-
locales: ['en']
92+
locales: ['en', 'hu']
7693
}))
94+
.use(order())
7795
.use(categories())
7896
// group certain files into collections
7997
.use(collections({
@@ -103,9 +121,13 @@ Metalsmith(cwd)
103121
// generate the final files to have pretty urls
104122
.use(permalinks({
105123
sets: [
124+
{
125+
pattern: ['index.*', 'index_*.*'],
126+
format: ':dest'
127+
},
106128
{
107129
pattern: 'blog/**/*',
108-
format: 'blog/:slug',
130+
format: 'blog/:slug/index.html',
109131
},
110132
{
111133
pattern: 'docs/**/*',

‎build/plugins/categories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function plugin(opts) {
2727
// console.log(map[curr]);
2828
acc.push({
2929
title: curr || 'introduction',
30-
children: map[curr].sort((a, b) => a.order - b.order),
30+
children: map[curr],
3131
level: curr.split(':').length
3232
});
3333
return acc;

‎build/plugins/locales.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ function plugin(opts) {
3535
otherLocales.forEach((locale) => {
3636
requiredFiles.forEach((file) => {
3737
const original_file = file.replace('{LOCALE}', defaultLocale);
38+
const original_file_path = path.resolve(sourcePath, original_file);
3839

3940
const new_file = file.replace('{LOCALE}', locale);
4041
const new_file_path = path.resolve(sourcePath, new_file);
@@ -43,13 +44,11 @@ function plugin(opts) {
4344

4445
if (!fs.existsSync(new_file_path)) {
4546
const data = files[original_file];
46-
const contents = data ? data.contents : '';
47-
47+
const contents = fs.readFileSync(original_file_path);
4848
fs.writeFileSync(new_file_path, contents);
4949

5050
new_files[new_file] = Object.assign({}, data, {
51-
contents: new Buffer(contents),
52-
locale: locale
51+
contents: new Buffer(data.contents || '')
5352
});
5453
}
5554
})

‎build/plugins/order.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,14 @@ function plugin() {
88
return
99
}
1010

11+
1112
const res = path.basename(file).match(/^(\d+)-/);
1213
if (res) {
1314
const data = files[file];
1415
data.order = res[1];
1516

17+
data.slug = data.slug.replace(res[0], '');
18+
1619
// rename file to not include the order
1720
metalsmith.rename(file, file.replace(res[0], ''));
1821
}

‎build/plugins/permalinks.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@ module.exports = function permalinks(options = {}) {
1414
let format = (set && set.format) || opts.format;
1515

1616
try {
17-
if (file.includes('index.')) {
18-
format = format.replace('/index.html', '.html');
19-
}
20-
2117
const l = pl.format(format, file, files[file]);
2218
files[file].path = l;
2319
metalsmith.rename(file, l)

‎content/docs/hu/1-quick-start.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: Quick Start
3+
contributors: [naderio, galaxyblur]
4+
---
5+
6+
## Using `nativescript-vue-template`
7+
8+
1) Create a NativeScript app using `nativescript-vue-template`
9+
10+
```sh
11+
tns create MyApp --template nativescript-vue-template
12+
```
13+
14+
2) Run the app on Android or iOS:
15+
16+
```sh
17+
tns run android
18+
```
19+
20+
or
21+
22+
```sh
23+
tns run ios
24+
```
25+
26+
## Using `tns` CLI
27+
28+
1) Create a NativeScript app
29+
30+
```sh
31+
tns create sample-app
32+
```
33+
34+
2) Install `nativescript-vue`
35+
36+
```sh
37+
npm install --save nativescript-vue
38+
```
39+
3) Change `app.js` content to:
40+
41+
```javascript
42+
const Vue = require('nativescript-vue/dist/index');
43+
44+
new Vue({
45+
46+
template: `
47+
<page>
48+
<stack-layout>
49+
<label :text="message"></label>
50+
</stack-layout>
51+
</page>
52+
`,
53+
54+
data() {
55+
return {
56+
message: "Hello Vue!",
57+
};
58+
},
59+
60+
}).$start();
61+
```
62+
63+
4) Run the app on Android or iOS:
64+
65+
```sh
66+
tns run android
67+
```
68+
69+
or
70+
71+
```sh
72+
tns run ios
73+
```

‎content/docs/hu/10-articles.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Articles
3+
contributors: [rdlauer, naderio]
4+
---
5+
6+
- [A new Vue for NativeScript](https://www.nativescript.org/blog/a-new-vue-for-nativescript)
7+
- [Vue.js and NativeScript in One Minute](https://www.nativescript.org/blog/vue-and-nativescript-in-one-minute)
8+
- [Building Native iOS and Android Apps With Vue and NativeScript](https://developer.telerik.com/products/nativescript/native-ios-android-vue-nativescript/)
9+
- [Native apps with Vue.js: Weex or NativeScript?](https://hackernoon.com/native-apps-with-vue-js-weex-or-nativescript-8d8f0bac041d)

‎content/docs/hu/2-about-nativescript-vue.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: About NativeScript-Vue
3+
contributors: [rigor789, tjvantoll]
4+
---
5+
## What is [NativeScript](https://www.nativescript.org/)?
6+
7+
NativeScript is an open source framework for building truly native mobile application using JavaScript.
8+
9+
## What is [Vue.js](https://vuejs.org/)?
10+
11+
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects.
12+
13+
## What is NativeScript-Vue?
14+
15+
NativeScript-Vue is a NativeScript plugin which allows you to use Vue.js to craft your mobile application.
16+
17+
If you have used Vue.js before you will feel right at home with NativeScript-Vue.
18+
19+
## Why would you use this?
20+
21+
There are many options to build mobile apps. Here are some situations where we think NativeScript-Vue is a great fit.
22+
23+
* **You need a truly native iOS and Android app**: NativeScript builds your apps using native user interface components on iOS and Android. The apps you build are not web based, and therefore are not subject to the limitations inherent in WebView-based application frameworks. NativeScript also provides [an extensive collection of plugins](http://market.nativescript.org/) to tie into native device features. So if you need to tie into an iOS or Android API or feature as part of your app, you can do that with NativeScript.
24+
* **You like JavaScript**: With NativeScript you write your mobile applications in JavaScript—not Objective-C, not Swift, and not Java. If you like JavaScript, you’ll love writing native iOS and Android apps with the same language you use in your Web and/or Node apps.
25+
* **You like Vue**: Vue is known for its simple approach to the view layer. If you like building web apps with Vue, you’ll be right at home with NativeScript-Vue, as you’ll be using the same syntax for handling common tasks like data binding and event handling.
26+
27+
## What’s the catch?
28+
29+
If you have existing Vue experience, there are two big things you’ll need to learn to be successful with NativeScript-Vue.
30+
31+
* **Working with the NativeScript CLI**: NativeScript is a framework for building iOS and Android apps, not web apps. You’ll need to learn how a few commands in the NativeScript CLI, and some basics of how iOS simulators and Android Virtual Devices work.
32+
* **Learning the NativeScript UI components**: Because NativeScript uses native user interface components, HTML controls like `<div>` and `<span>` don’t exist in NativeScript. Instead you’ll need to learn a [new set of components](https://docs.nativescript.org/ui/components) you can use to render your interfaces.
33+
34+
Don’t worry though. Although there is a learning curve for working with NativeScript-Vue, you should find things much eaiser than learning iOS or Android from the ground up. After all, you’ll still be writing your source code in JavaScript and Vue.
35+
36+
## Want to get involved?
37+
38+
NativeScript-Vue is an open source project and contributions are very much encouraged. Check out the [project’s contributing guide](https://github.com/rigor789/nativescript-vue/blob/master/CONTRIBUTING.md) and **join us on in the #vue channel on the [NativeScript community Slack](http://tinyurl.com/nativescriptSlack)**.
39+
40+
## How stable is this project?
41+
42+
NativeScript-Vue is relatively feature complete. At this time we’re focusing on two things:
43+
44+
* **Documentation**: Not everything you can do in NativeScript-Vue is documented on this site. We’re actively adding samples and use cases to this site, and contributions are welcome.
45+
* **Sample apps**: We’re looking for people to put this plugin through its paces and send feedback our way. If you’re interested, join the [NativeScript community Slack](http://tinyurl.com/nativescriptSlack) and let us know in the #vue channel.

‎content/docs/hu/3-installing-nativescript.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Installing NativeScript
3+
extends: https://raw.githubusercontent.com/NativeScript/docs/master/docs/start/quick-setup.md
4+
rename:
5+
- '## Step 1: Install Node.js': '## Install Node.js'
6+
- '## Step 2: Install the NativeScript CLI': '## Install the NativeScript CLI'
7+
- '## Step 3: Install iOS and Android requirements': '## Install iOS and Android requirements'
8+
- '## Step 4: Verify the setup': '## Verify the setup'
9+
remove:
10+
- '## What’s Next'
11+
---

‎content/docs/hu/4-installation-nativescript-vue.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: Installation
3+
contributors: [naderio, teobugslayer]
4+
---
5+
6+
Install `nativescript-vue` using `npm` by running the following command:
7+
8+
```sh
9+
npm install --save nativescript-vue
10+
```

‎content/docs/hu/5-troubleshooting.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: Troubleshooting
3+
original: https://raw.githubusercontent.com/NativeScript/docs/master/docs/start/troubleshooting.md
4+
---
5+
6+
Todo

‎content/docs/hu/6-templates.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
title: Templates
3+
contributors: [rigor789, tralves]
4+
---
5+
6+
You can also use NativeScript's [template system](https://docs.nativescript.org/tooling/app-templates) to bootstrap your `nativescript-vue` app. All these templates generate a NativeScript app that uses the `nativescript-vue` plugin. Some templates are equipped with more features such as support for Vue.js Single File Component (`.vue`) and livereload.
7+
8+
## nativescript-vue-template
9+
10+
#### Project link
11+
12+
[](https://github.com/tralves/nativescript-vue-template)
13+
14+
#### Description
15+
16+
This one the most basic template. It contains a number of app samples that you can use as the starting point of your app. To try them, copy and paste the code from `app-with-list-view.js`, `app-with-router.js`, `app-with-tab-view.js`, or `app-with-vmodel.js` into your app’s `app.js` file.
17+
18+
#### Installation
19+
20+
```sh
21+
tns create sample-app --template nativescript-vue-template
22+
```
23+
*Follow the [project link](https://github.com/tralves/nativescript-vue-template) for further instructions.*
24+
25+
## nativescript-vue-rollup-template
26+
27+
#### Project link
28+
29+
[](https://github.com/tralves/nativescript-vue-rollup-template)
30+
31+
#### Description
32+
Originally a [fork from rigor789's](https://github.com/rigor789/nativescript-vue-rollup-template), this template is currently the most stable and feature complete. You can see it in action in the [🍏 🍍 🍓 Groceries Vue](https://github.com/tralves/groceries-ns-vue) app.
33+
It supports:
34+
35+
- livereload;
36+
- .vue Single-File Components;
37+
- scss imports and scss inside `<style>` tags in .vue files;
38+
- root imports (imports starting with `/ `refer to the root of the app folder);
39+
- babel with `es2015` and `stage-2` presets;
40+
41+
#### Installation
42+
```sh
43+
tns create sample-app --template nativescript-vue-rollup-template
44+
```
45+
*Follow the [project link](https://github.com/tralves/nativescript-vue-rollup-template) for further instructions.*
46+
47+
## nativescript-vue-webpack-template
48+
49+
#### Project link
50+
51+
[](https://github.com/tralves/nativescript-vue-webpack-template)
52+
53+
#### Description
54+
55+
The webpack template leverages webpack to provide the same functionality as the rollup counterpart. It is evolving to support code sharing, i.e., create projects that share as much of the logic as possible between a web build and the native (android/iOS) builds.
56+
57+
Features:
58+
59+
- livereload;
60+
- .vue Single-File Components;
61+
- scss imports and scss inside `<style>` tags in .vue files;
62+
- babel with `es2015` and `stage-2` presets;
63+
- (soon) native/web code sharing;
64+
65+
#### Installation
66+
```sh
67+
tns create sample-app --template https://github.com/tralves/nativescript-vue-webpack-template
68+
```
69+
*Follow the [project link](https://github.com/tralves/nativescript-vue-webpack-template) for further instructions.*

‎content/docs/hu/7-using-nativescript-plugins.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: Using NativeScript Plugins
3+
contributors: [naderio]
4+
---
5+
6+
Plugins work as in any other NativeScript app, but you may wonder how UI plugins would work with Vue.
7+
8+
UI plugins work almost identically to how you'd use a NativeScript UI plugin in an Angular app. For instance consider this example usage of [nativescript-gradient](https://github.com/EddyVerbruggen/nativescript-gradient) which is used in the [listview sample](https://github.com/rigor789/nativescript-vue/tree/master/samples/app/app-with-list-view.js):
9+
10+
Install the plugin by running this command in the samples folder:
11+
12+
```sh
13+
tns plugin add nativescript-gradient
14+
```
15+
16+
Open your vue file and right after the imports at the top, add:
17+
18+
```js
19+
Vue.registerElement("gradient", () => require("nativescript-gradient").Gradient);
20+
```
21+
22+
Then in your view template, add this to recreate the gradient in the sample:
23+
24+
```xml
25+
<gradient direction="to right" colors="#FF0077, red, #FF00FF" class="p-15">
26+
<label class="p-5 c-white" horizontalAlignment="center" text="My gradients are the best." textWrap="true"></label>
27+
<Label class="p-5 c-white" horizontalAlignment="center" text="It's true." textWrap="true"></Label>
28+
</gradient>
29+
```

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy