From d0a5aa84a4ccff0abdfc38ef1df7416791a62c0a Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sun, 27 May 2018 20:57:50 +0300 Subject: [PATCH 01/14] Changed regex that captures date --- build/plugins/order.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/plugins/order.js b/build/plugins/order.js index c497b00b..0b148b49 100644 --- a/build/plugins/order.js +++ b/build/plugins/order.js @@ -9,7 +9,7 @@ function plugin() { } - const res = path.basename(file).match(/^(\d+)-/); + const res = path.basename(file).match(/^(\d+)-(\d+)-(\d+)/); if (res) { const data = files[file]; data.order = res[1]; From be1dbdea9ca4cdc5dd9ff0e6ecd9b775ac09730f Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sun, 27 May 2018 21:03:22 +0300 Subject: [PATCH 02/14] Testing with more posts --- content/blog/2018-02-17-remove-me.md | 81 ++++++++++++++++++++++++++ content/blog/2018-05-23-delete-this.md | 81 ++++++++++++++++++++++++++ 2 files changed, 162 insertions(+) create mode 100644 content/blog/2018-02-17-remove-me.md create mode 100644 content/blog/2018-05-23-delete-this.md diff --git a/content/blog/2018-02-17-remove-me.md b/content/blog/2018-02-17-remove-me.md new file mode 100644 index 00000000..7e69703c --- /dev/null +++ b/content/blog/2018-02-17-remove-me.md @@ -0,0 +1,81 @@ +--- +title: Remove This Test Post +authors: [jlooper] +toc: true +intro: Font icons are a great way to add icons to your app that look great on all screen sizes. In this short tutorial we cover how you can add them to your NativeScript-Vue application. +--- + +Font icons are a great way to add icons to your app that look great on all screen sizes. In this short tutorial we cover how you can add them to your NativeScript-Vue application. + +Assuming you are using the Vue-CLI and have scaffolded your app using the standard template, it's quite straightforward to use fonticons. + +### Install the [nativescript-fonticon plugin](https://market.nativescript.org/plugins/nativescript-fonticon) + +```shell +$ npm install nativescript-fonticon --save +``` + +The most recent version of the plugin will be added to your `package.json` file. You may need to refresh your app by running `npm run clean`. + +### Add the CSS + +Import your fonticon's font files (normally a .ttf, TrueType Font) into `src/assets/fonts`. FontAwesome, for example, has a font file called fontawesome-webfont.ttf. + +Add a line to `styles.scss` to set the fonticon's base class: + +```css +.fa { + font-family: FontAwesome, fontawesome-webfont; +} +``` + +Finally, add the fonticon's .css file to `src/assets`. This file contains the fonticon's class and its unicode reference, and is downloaded with the fonticon. For FontAwesome, the file contains references like these: + +```css +.fa-glass:before { + content: "\f000"; +} +.fa-music:before { + content: "\f001"; +} +``` + +You can edit this file to only contain the fonticons you need. + +### Initialize the plugin + +In main.js, add the following snippet: + +```js +import {TNSFontIcon, fonticon} from 'nativescript-fonticon'; + +TNSFontIcon.debug = true; +TNSFontIcon.paths = { + 'fa': './font-awesome.css', + 'ion': './ionicons.css' +}; +TNSFontIcon.loadCss(); + +Vue.filter('fonticon', fonticon); +``` + +In this example, you would have access to both FontAwesome icons and Ionicons. Use what you need. + +### Use the fonticons + +In labels and buttons, use the fonticons with the proper css class and a pipe indicating a Vue.filter: + +```html + + +``` + + +If you need to combine an icon and text, you may use a [FormattedString](/en/docs/elements/components/label/#styling-the-label), or in many cases you can use the mustache syntax: + +```html + +``` diff --git a/content/blog/2018-05-23-delete-this.md b/content/blog/2018-05-23-delete-this.md new file mode 100644 index 00000000..60b82d70 --- /dev/null +++ b/content/blog/2018-05-23-delete-this.md @@ -0,0 +1,81 @@ +--- +title: Delete This Test Post +authors: [jlooper] +toc: true +intro: Font icons are a great way to add icons to your app that look great on all screen sizes. In this short tutorial we cover how you can add them to your NativeScript-Vue application. +--- + +Font icons are a great way to add icons to your app that look great on all screen sizes. In this short tutorial we cover how you can add them to your NativeScript-Vue application. + +Assuming you are using the Vue-CLI and have scaffolded your app using the standard template, it's quite straightforward to use fonticons. + +### Install the [nativescript-fonticon plugin](https://market.nativescript.org/plugins/nativescript-fonticon) + +```shell +$ npm install nativescript-fonticon --save +``` + +The most recent version of the plugin will be added to your `package.json` file. You may need to refresh your app by running `npm run clean`. + +### Add the CSS + +Import your fonticon's font files (normally a .ttf, TrueType Font) into `src/assets/fonts`. FontAwesome, for example, has a font file called fontawesome-webfont.ttf. + +Add a line to `styles.scss` to set the fonticon's base class: + +```css +.fa { + font-family: FontAwesome, fontawesome-webfont; +} +``` + +Finally, add the fonticon's .css file to `src/assets`. This file contains the fonticon's class and its unicode reference, and is downloaded with the fonticon. For FontAwesome, the file contains references like these: + +```css +.fa-glass:before { + content: "\f000"; +} +.fa-music:before { + content: "\f001"; +} +``` + +You can edit this file to only contain the fonticons you need. + +### Initialize the plugin + +In main.js, add the following snippet: + +```js +import {TNSFontIcon, fonticon} from 'nativescript-fonticon'; + +TNSFontIcon.debug = true; +TNSFontIcon.paths = { + 'fa': './font-awesome.css', + 'ion': './ionicons.css' +}; +TNSFontIcon.loadCss(); + +Vue.filter('fonticon', fonticon); +``` + +In this example, you would have access to both FontAwesome icons and Ionicons. Use what you need. + +### Use the fonticons + +In labels and buttons, use the fonticons with the proper css class and a pipe indicating a Vue.filter: + +```html + + +``` + + +If you need to combine an icon and text, you may use a [FormattedString](/en/docs/elements/components/label/#styling-the-label), or in many cases you can use the mustache syntax: + +```html + +``` From 3d40aad4538e768e7382b1cec8bc96da4e1eaa7d Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sun, 27 May 2018 21:08:46 +0300 Subject: [PATCH 03/14] Print date from file name in log --- build/plugins/order.js | 1 + 1 file changed, 1 insertion(+) diff --git a/build/plugins/order.js b/build/plugins/order.js index 0b148b49..73e4d0b6 100644 --- a/build/plugins/order.js +++ b/build/plugins/order.js @@ -10,6 +10,7 @@ function plugin() { const res = path.basename(file).match(/^(\d+)-(\d+)-(\d+)/); + console.log(res); if (res) { const data = files[file]; data.order = res[1]; From eec3eef768eb550a992203fe647218fe403e7d0f Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sun, 27 May 2018 21:12:29 +0300 Subject: [PATCH 04/14] Console log --- build/plugins/order.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/build/plugins/order.js b/build/plugins/order.js index 73e4d0b6..d93e4d43 100644 --- a/build/plugins/order.js +++ b/build/plugins/order.js @@ -10,13 +10,12 @@ function plugin() { const res = path.basename(file).match(/^(\d+)-(\d+)-(\d+)/); - console.log(res); if (res) { const data = files[file]; data.order = res[1]; - + console.log(res[1]); data.slug = data.slug.replace(res[0], ''); - + console.log(res[0]); // rename file to not include the order metalsmith.rename(file, file.replace(res[0], '')); } From 1decb99cc7304b7ce2adc475796c4eac7f1baa34 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sun, 27 May 2018 21:16:34 +0300 Subject: [PATCH 05/14] Removing console log --- build/plugins/order.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/build/plugins/order.js b/build/plugins/order.js index d93e4d43..0b148b49 100644 --- a/build/plugins/order.js +++ b/build/plugins/order.js @@ -13,9 +13,9 @@ function plugin() { if (res) { const data = files[file]; data.order = res[1]; - console.log(res[1]); + data.slug = data.slug.replace(res[0], ''); - console.log(res[0]); + // rename file to not include the order metalsmith.rename(file, file.replace(res[0], '')); } From 92e0b3766a3041d1eab497a297c544c06c0d635a Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sun, 27 May 2018 21:28:08 +0300 Subject: [PATCH 06/14] Updated regex for date in filename --- build/plugins/order.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/plugins/order.js b/build/plugins/order.js index 0b148b49..3a35a508 100644 --- a/build/plugins/order.js +++ b/build/plugins/order.js @@ -9,7 +9,7 @@ function plugin() { } - const res = path.basename(file).match(/^(\d+)-(\d+)-(\d+)/); + const res = path.basename(file).match(/^(\d{4}-\d{2}-\d{2})/); if (res) { const data = files[file]; data.order = res[1]; From a43674eba9737db3787f4fe0e0fef0d24facd60a Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sun, 27 May 2018 21:31:00 +0300 Subject: [PATCH 07/14] Change sorting after fixing order --- build/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/index.js b/build/index.js index 85353cd4..7de2d23b 100644 --- a/build/index.js +++ b/build/index.js @@ -122,7 +122,7 @@ Metalsmith(cwd) .use(collections({ blog: { pattern: 'blog/*.md', - sortBy: 'date', + sortBy: 'order', reverse: true, refer: false }, From fb1dd7222a8f2b017a809d88504dfba53f3b4685 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sun, 27 May 2018 21:34:46 +0300 Subject: [PATCH 08/14] Adding more posts for testing --- .../2018-02-28-test-delete-duplicate-date.md | 92 +++++++++++++++++++ content/blog/2018-04-18-delete-delete.md | 81 ++++++++++++++++ 2 files changed, 173 insertions(+) create mode 100644 content/blog/2018-02-28-test-delete-duplicate-date.md create mode 100644 content/blog/2018-04-18-delete-delete.md diff --git a/content/blog/2018-02-28-test-delete-duplicate-date.md b/content/blog/2018-02-28-test-delete-duplicate-date.md new file mode 100644 index 00000000..70c96ec0 --- /dev/null +++ b/content/blog/2018-02-28-test-delete-duplicate-date.md @@ -0,0 +1,92 @@ +--- +title: Test Delete +authors: [damain] +toc: true +intro: We are accustomed to using firebase as a backend in our native apps, and that requires using the native SDK because the JavaScript SDK does not work on native. But if we are using one codebase to deploy an app to web and native, we don't want to write our backend functions twice. +--- + +We are accustomed to using firebase as a backend in our native apps, and that requires using the native SDK because the JavaScript SDK does not work on native. But if we are using one codebase to deploy an app to web and native, we don't want to write our backend functions twice. Which as of February 2018 is the case. + +This brings us to Parse. [Parse](http://parseplatform.org/) was handed over to the open-source community by Facebook in 2016 and has a comparable feature set to Firebase. And we can use the Parse JavaScript SDK on native and web! + +Lets see how we use Parse in NativeScript-Vue (it should also work in NativeScript). I am going to assume the following: +* We are starting a new NativeScript-Vue project called `myApp` from scratch. +* You have already signed up for a Parse account at a hosting provider or created your own parse server on Heroku. If you dont have an account I would suggest [back4app.com](https://www.back4app.com) they have a generous free tier. + +Lets jump into it. +Open terminal and enter the following to create a new NativeScript-Vue app +```sh +$ tns create myApp --template nativescript-vue-template +``` + +Go into the app folder and install a few packages +```sh +$ cd myApp +$ npm install parse +$ npm install events +$ npm install nativescript-localstorage +``` + +In the `app.js` file we add the following at the top +```js +require("nativescript-localstorage") +const Parse = require('parse') +Parse.initialize("your api key", "your javascript key") +Parse.serverURL="https://parseapi.back4app.com/" +``` +You will find the API key and JavaScript key in the server settings of the Parse dashboard. +Please note that **you must use the JavaScript key it is not optional**. +That's all it took to get Parse working! But lets test it out. + +To test it out we will add a textfield and a button to the template and save the text to the Parse server when the save button is clicked. +```html + + + + +