├── .gitignore ├── .vscode └── settings.json ├── LICENSE ├── README.md └── examples ├── angular-basic ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.ts │ │ ├── app.firebase.config.ts │ │ ├── app.module.ts │ │ ├── components │ │ │ └── navbar │ │ │ │ ├── navbar.component.html │ │ │ │ ├── navbar.component.scss │ │ │ │ └── navbar.component.ts │ │ ├── shared │ │ │ └── services │ │ │ │ └── flamelink.service.ts │ │ └── templates │ │ │ └── home │ │ │ ├── home.component.html │ │ │ ├── home.component.scss │ │ │ └── home.component.ts │ ├── assets │ │ └── .gitkeep │ ├── browserslist │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── karma.conf.js │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json ├── tsconfig.json ├── tslint.json └── yarn.lock ├── angular-universal └── README.md ├── firebase-cloud-functions └── README.md ├── nuxt-basic ├── .editorconfig ├── .env.sample ├── .eslintrc.js ├── .gitignore ├── README.md ├── assets │ └── README.md ├── components │ ├── AppLogo.vue │ ├── Product.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ └── index.vue ├── plugins │ ├── README.md │ └── flamelink.js ├── static │ ├── README.md │ └── favicon.ico ├── store │ └── README.md └── yarn.lock └── vue-basic ├── .browserslistrc ├── .env ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .prettierrc ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico ├── img │ ├── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── msapplication-icon-144x144.png │ │ ├── mstile-150x150.png │ │ └── safari-pinned-tab.svg │ └── main-navigation.png ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── Container.vue │ ├── MainNav.vue │ └── PageTitle.vue ├── main.js ├── plugins │ └── flamelink.js ├── registerServiceWorker.js ├── router.js ├── utils │ └── api.js └── views │ ├── About.vue │ ├── ContactForm.vue │ ├── Home.vue │ ├── NotFound.vue │ ├── OurVision.vue │ └── People.vue └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": [ 3 | "flamelink" 4 | ] 5 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Flamelink 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flamelink Examples 2 | 3 | A collection of examples for incorporating Flamelink with different frameworks and technologies 4 | -------------------------------------------------------------------------------- /examples/angular-basic/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /examples/angular-basic/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /examples/angular-basic/README.md: -------------------------------------------------------------------------------- 1 | # Flamelink Basic Angular Boilerplate 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.1. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Flamelink Project 18 | 19 | Update details in `src/app/app.firebase.config.ts` to point to your Firebase Project that has already been added to Flamelink, with some schemas created. 20 | 21 | ## Flamelink Data 22 | 23 | For getting content from Flamelink using the SDK, please refer to the SDK documentation `https://flamelink.github.io/flamelink-js-sdk` 24 | Sample implementation can be seen in the Home Component at `src/app/templates/home/home.component.ts` 25 | -------------------------------------------------------------------------------- /examples/angular-basic/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "flamelink-boilerplate": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": { 12 | "@schematics/angular:component": { 13 | "styleext": "scss", 14 | "spec": false 15 | }, 16 | "@schematics/angular:class": { 17 | "spec": false 18 | }, 19 | "@schematics/angular:directive": { 20 | "spec": false 21 | }, 22 | "@schematics/angular:guard": { 23 | "spec": false 24 | }, 25 | "@schematics/angular:module": { 26 | "spec": false 27 | }, 28 | "@schematics/angular:pipe": { 29 | "spec": false 30 | }, 31 | "@schematics/angular:service": { 32 | "spec": false 33 | } 34 | }, 35 | "architect": { 36 | "build": { 37 | "builder": "@angular-devkit/build-angular:browser", 38 | "options": { 39 | "outputPath": "dist/flamelink-boilerplate", 40 | "index": "src/index.html", 41 | "main": "src/main.ts", 42 | "polyfills": "src/polyfills.ts", 43 | "tsConfig": "src/tsconfig.app.json", 44 | "assets": [ 45 | "src/favicon.ico", 46 | "src/assets" 47 | ], 48 | "styles": [ 49 | "src/styles.scss", 50 | "node_modules/bootstrap/dist/css/bootstrap.min.css" 51 | ], 52 | "scripts": [ 53 | "node_modules/jquery/dist/jquery.min.js", 54 | "node_modules/bootstrap/dist/js/bootstrap.min.js" 55 | ] 56 | }, 57 | "configurations": { 58 | "production": { 59 | "fileReplacements": [ 60 | { 61 | "replace": "src/environments/environment.ts", 62 | "with": "src/environments/environment.prod.ts" 63 | } 64 | ], 65 | "optimization": true, 66 | "outputHashing": "all", 67 | "sourceMap": false, 68 | "extractCss": true, 69 | "namedChunks": false, 70 | "aot": true, 71 | "extractLicenses": true, 72 | "vendorChunk": false, 73 | "buildOptimizer": true 74 | } 75 | } 76 | }, 77 | "serve": { 78 | "builder": "@angular-devkit/build-angular:dev-server", 79 | "options": { 80 | "browserTarget": "flamelink-boilerplate:build" 81 | }, 82 | "configurations": { 83 | "production": { 84 | "browserTarget": "flamelink-boilerplate:build:production" 85 | } 86 | } 87 | }, 88 | "extract-i18n": { 89 | "builder": "@angular-devkit/build-angular:extract-i18n", 90 | "options": { 91 | "browserTarget": "flamelink-boilerplate:build" 92 | } 93 | }, 94 | "test": { 95 | "builder": "@angular-devkit/build-angular:karma", 96 | "options": { 97 | "main": "src/test.ts", 98 | "polyfills": "src/polyfills.ts", 99 | "tsConfig": "src/tsconfig.spec.json", 100 | "karmaConfig": "src/karma.conf.js", 101 | "styles": [ 102 | "src/styles.scss" 103 | ], 104 | "scripts": [], 105 | "assets": [ 106 | "src/favicon.ico", 107 | "src/assets" 108 | ] 109 | } 110 | }, 111 | "lint": { 112 | "builder": "@angular-devkit/build-angular:tslint", 113 | "options": { 114 | "tsConfig": [ 115 | "src/tsconfig.app.json", 116 | "src/tsconfig.spec.json" 117 | ], 118 | "exclude": [ 119 | "**/node_modules/**" 120 | ] 121 | } 122 | } 123 | } 124 | }, 125 | "flamelink-boilerplate-e2e": { 126 | "root": "e2e/", 127 | "projectType": "application", 128 | "architect": { 129 | "e2e": { 130 | "builder": "@angular-devkit/build-angular:protractor", 131 | "options": { 132 | "protractorConfig": "e2e/protractor.conf.js", 133 | "devServerTarget": "flamelink-boilerplate:serve" 134 | } 135 | }, 136 | "lint": { 137 | "builder": "@angular-devkit/build-angular:tslint", 138 | "options": { 139 | "tsConfig": "e2e/tsconfig.e2e.json", 140 | "exclude": [ 141 | "**/node_modules/**" 142 | ] 143 | } 144 | } 145 | } 146 | } 147 | }, 148 | "defaultProject": "flamelink-boilerplate" 149 | } 150 | -------------------------------------------------------------------------------- /examples/angular-basic/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /examples/angular-basic/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /examples/angular-basic/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/angular-basic/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /examples/angular-basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flamelink-basic-angular-boilerplate", 3 | "version": "0.2.0", 4 | "engines": { 5 | "node": ">=6" 6 | }, 7 | "scripts": { 8 | "ng": "ng", 9 | "start": "ng serve", 10 | "build": "ng build", 11 | "test": "ng test", 12 | "lint": "ng lint", 13 | "e2e": "ng e2e" 14 | }, 15 | "private": true, 16 | "dependencies": { 17 | "@angular/animations": "^8.2.2", 18 | "@angular/common": "^8.2.2", 19 | "@angular/compiler": "^8.2.2", 20 | "@angular/core": "^8.2.2", 21 | "@angular/fire": "^5.2.1", 22 | "@angular/forms": "^8.2.2", 23 | "@angular/http": "^7.2.15", 24 | "@angular/platform-browser": "^8.2.2", 25 | "@angular/platform-browser-dynamic": "^8.2.2", 26 | "@angular/router": "^8.2.2", 27 | "bootstrap": "^4.3.1", 28 | "core-js": "^2.5.4", 29 | "firebase": "^6.4.0", 30 | "flamelink": "^1.0.0-alpha.26", 31 | "jquery": "^3.5.0", 32 | "rxjs": "^6.5.2", 33 | "zone.js": "^0.10.2" 34 | }, 35 | "devDependencies": { 36 | "@angular-devkit/build-angular": "~0.802.2", 37 | "@angular/cli": "~8.2.2", 38 | "@angular/compiler-cli": "^8.2.2", 39 | "@angular/language-service": "^8.2.2", 40 | "@types/jasmine": "~3.4.0", 41 | "@types/jasminewd2": "~2.0.6", 42 | "@types/node": "~12.7.2", 43 | "codelyzer": "~5.1.0", 44 | "jasmine-core": "~3.4.0", 45 | "jasmine-spec-reporter": "~4.2.1", 46 | "karma": "~4.2.0", 47 | "karma-chrome-launcher": "~3.1.0", 48 | "karma-coverage-istanbul-reporter": "~2.1.0", 49 | "karma-jasmine": "~2.0.1", 50 | "karma-jasmine-html-reporter": "^1.4.2", 51 | "protractor": "~5.4.2", 52 | "ts-node": "~8.3.0", 53 | "tslint": "~5.18.0", 54 | "typescript": "^3.5.3" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { HomeComponent } from './templates/home/home.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: HomeComponent } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forRoot(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class AppRoutingModule { } 14 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/angular-basic/src/app/app.component.scss -------------------------------------------------------------------------------- /examples/angular-basic/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'app'; 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/app.firebase.config.ts: -------------------------------------------------------------------------------- 1 | export const firebaseConfig = { 2 | apiKey: 'AIzaSyB3b9SAhteDU_ItQrCLui9LBA0lYpl4ZUA', 3 | authDomain: 'meetup-boilerplate.firebaseapp.com', 4 | databaseURL: 'https://meetup-boilerplate.firebaseio.com', 5 | projectId: 'meetup-boilerplate', 6 | storageBucket: 'meetup-boilerplate.appspot.com', 7 | messagingSenderId: '975201502714' 8 | }; 9 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { HomeComponent } from './templates/home/home.component'; 7 | import { AngularFireModule } from '@angular/fire'; 8 | import { firebaseConfig } from './app.firebase.config'; 9 | import { NavbarComponent } from './components/navbar/navbar.component'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | AppComponent, 14 | HomeComponent, 15 | NavbarComponent 16 | ], 17 | imports: [ 18 | BrowserModule, 19 | AppRoutingModule, 20 | AngularFireModule.initializeApp(firebaseConfig) 21 | ], 22 | providers: [], 23 | bootstrap: [AppComponent] 24 | }) 25 | export class AppModule { } 26 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/components/navbar/navbar.component.html: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/components/navbar/navbar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/angular-basic/src/app/components/navbar/navbar.component.scss -------------------------------------------------------------------------------- /examples/angular-basic/src/app/components/navbar/navbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FlamelinkService } from '../../shared/services/flamelink.service'; 3 | 4 | @Component({ 5 | selector: 'app-navbar', 6 | templateUrl: './navbar.component.html', 7 | styleUrls: ['./navbar.component.scss'] 8 | }) 9 | export class NavbarComponent implements OnInit { 10 | 11 | navItems: any[]; 12 | 13 | constructor(private _fl: FlamelinkService) { } 14 | 15 | ngOnInit() { 16 | this._fl.getApp().nav.subscribe({ 17 | navigationKey: 'main', 18 | callback: (error, menu) => { 19 | if (error) { 20 | return console.error('Something went wrong while retrieving the entry. Details:', error); 21 | } 22 | 23 | console.log('The menu object:', menu); 24 | this.navItems = Object.values(menu.items); 25 | } 26 | }); 27 | } 28 | 29 | } 30 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/shared/services/flamelink.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Inject } from '@angular/core'; 2 | import * as firebase from 'firebase/app'; 3 | // import 'firebase/database' if you're using Realtime Database 4 | import 'firebase/firestore'; 5 | import 'firebase/storage'; 6 | import 'firebase/auth'; 7 | import { FirebaseApp } from '@angular/fire'; 8 | import flamelink from 'flamelink/app'; 9 | // Import all Flamelink modules you're going to use (replace `cf` with `rtdb` if using the Realtime Database) 10 | import 'flamelink/cf/settings'; 11 | import 'flamelink/cf/content'; 12 | import 'flamelink/cf/navigation'; 13 | import 'flamelink/cf/storage'; 14 | import 'flamelink/cf/users'; 15 | 16 | @Injectable({ 17 | providedIn: 'root' 18 | }) 19 | export class FlamelinkService { 20 | 21 | // GET|SET flApp 22 | private _flApp: flamelink.app.App; 23 | 24 | get flApp() { 25 | return this._flApp; 26 | } 27 | 28 | set flApp(value) { 29 | this._flApp = value; 30 | } 31 | 32 | constructor(@Inject(FirebaseApp) private _fb: firebase.app.App) { 33 | this.flApp = flamelink({ 34 | firebaseApp: this._fb, 35 | env: 'production', 36 | locale: 'en-US', 37 | dbType: 'cf' // dbType should match the imports (rtdb or cf) 38 | }); 39 | } 40 | 41 | getApp() { 42 | return this.flApp; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/templates/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

{{ content?.title }}

5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |

{{ post.title }}

14 |
{{ post.blurb }}
15 |
16 |
17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/templates/home/home.component.scss: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | background-size: cover; 3 | background-repeat: no-repeat; 4 | background-position: center; 5 | } 6 | -------------------------------------------------------------------------------- /examples/angular-basic/src/app/templates/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FlamelinkService } from '../../shared/services/flamelink.service'; 3 | 4 | @Component({ 5 | selector: 'app-home', 6 | templateUrl: './home.component.html', 7 | styleUrls: ['./home.component.scss'] 8 | }) 9 | export class HomeComponent implements OnInit { 10 | 11 | content: any; 12 | posts: any[]; 13 | 14 | constructor(private _fl: FlamelinkService) { } 15 | 16 | ngOnInit() { 17 | this._fl.getApp().content.subscribe({ 18 | schemaKey: 'schemaDemo', 19 | populate: ['banner'], 20 | callback: (error, data) => { 21 | if (error) { 22 | return console.error(error); 23 | } 24 | 25 | this.content = data; 26 | } 27 | }); 28 | 29 | this._fl.getApp().content.subscribe({ 30 | schemaKey: 'collectionDemo', 31 | callback: (error, data) => { 32 | if (error) { 33 | return console.error(error); 34 | } 35 | 36 | this.posts = Object.values(data); 37 | } 38 | }); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/angular-basic/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/angular-basic/src/assets/.gitkeep -------------------------------------------------------------------------------- /examples/angular-basic/src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | > 0.5% 6 | last 2 versions 7 | Firefox ESR 8 | not dead 9 | # IE 9-11 -------------------------------------------------------------------------------- /examples/angular-basic/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /examples/angular-basic/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /examples/angular-basic/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/angular-basic/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular-basic/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flamelink Boilerplate 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/angular-basic/src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /examples/angular-basic/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /examples/angular-basic/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Web Animations `@angular/platform-browser/animations` 51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 53 | **/ 54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 55 | 56 | /** 57 | * By default, zone.js will patch all possible macroTask and DomEvents 58 | * user can disable parts of macroTask/DomEvents patch by setting following flags 59 | */ 60 | 61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 64 | 65 | /* 66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 68 | */ 69 | // (window as any).__Zone_enable_cross_context_check = true; 70 | 71 | /*************************************************************************************************** 72 | * Zone JS is required by default for Angular itself. 73 | */ 74 | import 'zone.js/dist/zone'; // Included with Angular CLI. 75 | 76 | 77 | 78 | /*************************************************************************************************** 79 | * APPLICATION IMPORTS 80 | */ 81 | -------------------------------------------------------------------------------- /examples/angular-basic/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /examples/angular-basic/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /examples/angular-basic/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2015", 6 | "types": [] 7 | }, 8 | "exclude": [ 9 | "src/test.ts", 10 | "**/*.spec.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /examples/angular-basic/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "types": [ 7 | "jasmine", 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "test.ts", 13 | "polyfills.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /examples/angular-basic/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/angular-basic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "esModuleInterop": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2017", 18 | "dom" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/angular-basic/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "deprecation": { 15 | "severity": "warn" 16 | }, 17 | "eofline": true, 18 | "forin": true, 19 | "import-blacklist": [ 20 | true, 21 | "rxjs/Rx" 22 | ], 23 | "import-spacing": true, 24 | "indent": [ 25 | true, 26 | "spaces" 27 | ], 28 | "interface-over-type-literal": true, 29 | "label-position": true, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-arg": true, 47 | "no-bitwise": true, 48 | "no-console": [ 49 | true, 50 | "debug", 51 | "info", 52 | "time", 53 | "timeEnd", 54 | "trace" 55 | ], 56 | "no-construct": true, 57 | "no-debugger": true, 58 | "no-duplicate-super": true, 59 | "no-empty": false, 60 | "no-empty-interface": true, 61 | "no-eval": true, 62 | "no-inferrable-types": [ 63 | true, 64 | "ignore-params" 65 | ], 66 | "no-misused-new": true, 67 | "no-non-null-assertion": true, 68 | "no-shadowed-variable": true, 69 | "no-string-literal": false, 70 | "no-string-throw": true, 71 | "no-switch-case-fall-through": true, 72 | "no-trailing-whitespace": true, 73 | "no-unnecessary-initializer": true, 74 | "no-unused-expression": true, 75 | "no-use-before-declare": true, 76 | "no-var-keyword": true, 77 | "object-literal-sort-keys": false, 78 | "one-line": [ 79 | true, 80 | "check-open-brace", 81 | "check-catch", 82 | "check-else", 83 | "check-whitespace" 84 | ], 85 | "prefer-const": true, 86 | "quotemark": [ 87 | true, 88 | "single" 89 | ], 90 | "radix": true, 91 | "semicolon": [ 92 | true, 93 | "always" 94 | ], 95 | "triple-equals": [ 96 | true, 97 | "allow-null-check" 98 | ], 99 | "typedef-whitespace": [ 100 | true, 101 | { 102 | "call-signature": "nospace", 103 | "index-signature": "nospace", 104 | "parameter": "nospace", 105 | "property-declaration": "nospace", 106 | "variable-declaration": "nospace" 107 | } 108 | ], 109 | "unified-signatures": true, 110 | "variable-name": false, 111 | "whitespace": [ 112 | true, 113 | "check-branch", 114 | "check-decl", 115 | "check-operator", 116 | "check-separator", 117 | "check-type" 118 | ], 119 | "no-output-on-prefix": true, 120 | "use-input-property-decorator": true, 121 | "use-output-property-decorator": true, 122 | "use-host-property-decorator": true, 123 | "no-input-rename": true, 124 | "no-output-rename": true, 125 | "use-life-cycle-interface": true, 126 | "use-pipe-transform-interface": true, 127 | "component-class-suffix": true, 128 | "directive-class-suffix": true 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /examples/angular-universal/README.md: -------------------------------------------------------------------------------- 1 | # Angular Universal Flamelink 2 | 3 | This is a placeholder for [Josh King](https://github.com/jkinger)'s awesome example [repo](https://github.com/jkinger/Angular-Universal-Flamelink) for building a universal app using [Angular](https://angular.io/) and [Flamelink](https://flamelink.io) - hosted on [Firebase Hosting](https://firebase.google.com/docs/hosting/) and [Firebase Functions](https://firebase.google.com/docs/functions/). 4 | -------------------------------------------------------------------------------- /examples/firebase-cloud-functions/README.md: -------------------------------------------------------------------------------- 1 | # Flamelink in Firebase Cloud Functions 2 | 3 | The Flamelink SDK works equally well on the server as in the browser. This also includes withing Firebase Cloud Functions. 4 | 5 | ## Basic example 6 | 7 | ```javascript 8 | const functions = require('firebase-functions') 9 | const flamelink = require('flamelink') 10 | const admin = require('firebase-admin') 11 | 12 | // Initialize your Firebase app using the convenient functions config helper 13 | const firebaseApp = admin.initializeApp(functions.config().firebase) 14 | 15 | // Initialize your Flamelink app like you would on any other server env (isAdminApp is important!) 16 | const app = flamelink({ firebaseApp, isAdminApp: true }) 17 | 18 | // Example HTTPS request function - could be any other function handler 19 | exports.addMessage = functions.https.onRequest((req, res) => { 20 | // Get all "messages" content from your DB 21 | return app.content.get('messages') 22 | .then(messages => res.status(200).json({ messages })) 23 | .catch(error => res.status(500).json({ error })) 24 | }); 25 | ``` -------------------------------------------------------------------------------- /examples/nuxt-basic/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /examples/nuxt-basic/.env.sample: -------------------------------------------------------------------------------- 1 | FLAMELINK_API_KEY="" 2 | FLAMELINK_AUTH_DOMAIN="" 3 | FLAMELINK_DB_URL="" 4 | FLAMELINK_PROJECT_ID="" 5 | FLAMELINK_STORAGE_BUCKET="" 6 | FLAMELINK_PATH_TO_SERVICE_ACCOUNT="" 7 | -------------------------------------------------------------------------------- /examples/nuxt-basic/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | 'plugin:vue/essential' 14 | ], 15 | // required to lint *.vue files 16 | plugins: [ 17 | 'vue' 18 | ], 19 | // add your custom rules here 20 | rules: {} 21 | } 22 | -------------------------------------------------------------------------------- /examples/nuxt-basic/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | -------------------------------------------------------------------------------- /examples/nuxt-basic/README.md: -------------------------------------------------------------------------------- 1 | # nuxt-basic 2 | 3 | > Basic example showing how to use Flamelink with Nuxt, both server and client side. 4 | 5 | ___ 6 | 7 | ## Assumption 8 | 9 | This example assumes you have a Flamelink project with a `Products` collection with at least the following fields: 10 | 11 | **Field Name**: Field Type 12 | * **Name**: Text 13 | * **Price**: Number 14 | * **Image**: Media 15 | 16 | ___ 17 | 18 | ## Setup 19 | 20 | ### Install Dependencies 21 | 22 | ``` bash 23 | $ npm install # Or yarn install 24 | ``` 25 | 26 | ### Set environment variables 27 | 28 | * Copy the `.env.sample` file and name it `.env` 29 | * Replace all the dummy placeholder values with your Firebase project details, eg. `` becomes `https://flamelink-example-project.firebaseio.com` 30 | 31 | The `firebase` SDK package does not support server-side usage for things like accessing the Storage bucket. For that reason, `flamelink` requires that you use the `firebase` SDK client/browser side and the `firebase-admin` SDK server-side. This example aims to hide some of that for you, and only requires that you specify the absolute path to your Firebase service account JSON file in the `.env` file. 32 | 33 | You can read more about creating the service account JSON file and setting up the `firebase-admin` app instance in the [Firebase docs](https://firebase.google.com/docs/admin/setup)). 34 | 35 | > Important! Node v10 is currently NOT supported 36 | 37 | ### (optional) Configure Firestore DB 38 | 39 | _You could skip this step if you use Realtime Database._ 40 | 41 | If you use Firestore DB, then change the import and flamelink initialisation lines in [`plugins/flamelink.js`](https://github.com/flamelink/examples/blob/master/examples/nuxt-basic/plugins/flamelink.js) file to the following: 42 | 43 | ``` javascript 44 | import 'flamelink/cf/content' 45 | import 'flamelink/cf/storage' 46 | ``` 47 | 48 | ```javascript 49 | app.flamelink = flamelink({ firebaseApp, dbType: 'cf' }) 50 | ``` 51 | 52 | ## Usage 53 | 54 | ``` bash 55 | # serve with hot reload at localhost:3000 56 | $ npm run dev 57 | 58 | # build for production and launch server 59 | $ npm run build 60 | $ npm start 61 | 62 | # generate static project 63 | $ npm run generate 64 | ``` 65 | 66 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). 67 | -------------------------------------------------------------------------------- /examples/nuxt-basic/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /examples/nuxt-basic/components/AppLogo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 80 | -------------------------------------------------------------------------------- /examples/nuxt-basic/components/Product.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 22 | 23 | 55 | -------------------------------------------------------------------------------- /examples/nuxt-basic/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /examples/nuxt-basic/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /examples/nuxt-basic/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 53 | -------------------------------------------------------------------------------- /examples/nuxt-basic/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /examples/nuxt-basic/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /* 3 | ** Headers of the page 4 | */ 5 | head: { 6 | title: 'nuxt-basic', 7 | meta: [ 8 | { charset: 'utf-8' }, 9 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 10 | { hid: 'description', name: 'description', content: 'Basic example showing how to use Flamelink with Nuxt, both server and client side.' } 11 | ], 12 | link: [ 13 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 14 | ] 15 | }, 16 | /* 17 | ** Customize the progress bar color 18 | */ 19 | loading: { color: '#3B8070' }, 20 | /* 21 | ** Build configuration 22 | */ 23 | build: { 24 | /* 25 | ** Run ESLint on save 26 | */ 27 | extend (config, { isDev, isClient }) { 28 | if (isDev && isClient) { 29 | config.module.rules.push({ 30 | enforce: 'pre', 31 | test: /\.(js|vue)$/, 32 | loader: 'eslint-loader', 33 | exclude: /(node_modules)/ 34 | }) 35 | } 36 | } 37 | }, 38 | plugins: ['~/plugins/flamelink'], 39 | modules: [ 40 | '@nuxtjs/dotenv' 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /examples/nuxt-basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-basic", 3 | "version": "1.0.0", 4 | "description": "Basic example showing how to use Flamelink with Nuxt, both server and client side.", 5 | "author": "JP Erasmus ", 6 | "private": true, 7 | "engines": { 8 | "node": ">=8" 9 | }, 10 | "scripts": { 11 | "dev": "nuxt", 12 | "build": "nuxt build", 13 | "start": "nuxt start", 14 | "generate": "nuxt generate", 15 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 16 | "precommit": "npm run lint" 17 | }, 18 | "dependencies": { 19 | "@nuxtjs/dotenv": "^1.4.0", 20 | "core-js": "^2.6.5", 21 | "firebase": "^6.3.5", 22 | "firebase-admin": "^8.3.0", 23 | "flamelink": "^1.0.0-alpha.24", 24 | "lodash.get": "^4.4.2", 25 | "nuxt": "^2.8.1" 26 | }, 27 | "devDependencies": { 28 | "babel-eslint": "^10.0.2", 29 | "eslint": "^6.1.0", 30 | "eslint-friendly-formatter": "^4.0.1", 31 | "eslint-loader": "^2.2.1", 32 | "eslint-plugin-vue": "^5.2.3" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/nuxt-basic/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /examples/nuxt-basic/pages/index.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 46 | 47 | 91 | -------------------------------------------------------------------------------- /examples/nuxt-basic/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /examples/nuxt-basic/plugins/flamelink.js: -------------------------------------------------------------------------------- 1 | import flamelink from 'flamelink/app' 2 | // This example uses RTDB (Realtime Database) - replace with `cf` for Cloud Firestore 3 | import 'flamelink/rtdb/content' 4 | import 'flamelink/rtdb/storage' 5 | // import 'flamelink/rtdb/settings' 6 | // import 'flamelink/rtdb/navigation' 7 | // import 'flamelink/rtdb/users' 8 | 9 | export default ({ app }) => { 10 | let firebaseApp 11 | 12 | if (process.server) { 13 | const admin = require ('firebase-admin') 14 | 15 | if (!admin.apps.length) { 16 | const serviceAccount = require(process.env.FLAMELINK_PATH_TO_SERVICE_ACCOUNT) 17 | 18 | firebaseApp = admin.initializeApp({ 19 | credential: admin.credential.cert(serviceAccount), 20 | databaseURL: process.env.FLAMELINK_DB_URL, 21 | storageBucket: process.env.FLAMELINK_STORAGE_BUCKET 22 | }); 23 | } else { 24 | firebaseApp = admin.app() 25 | } 26 | } else { 27 | const firebase = require('firebase/app') 28 | // require('firebase/auth') 29 | // require('firebase/firestore') 30 | require('firebase/database') 31 | require('firebase/storage') 32 | 33 | if (!firebase.apps.length) { 34 | firebaseApp = firebase.initializeApp({ 35 | apiKey: process.env.FLAMELINK_API_KEY, 36 | authDomain: process.env.FLAMELINK_AUTH_DOMAIN, 37 | databaseURL: process.env.FLAMELINK_DB_URL, 38 | projectId: process.env.FLAMELINK_PROJECT_ID, 39 | storageBucket: process.env.FLAMELINK_STORAGE_BUCKET, 40 | messagingSenderId: process.env.FLAMELINK_MESSAGING_SENDER_ID 41 | }) 42 | } else { 43 | firebaseApp = firebase.app() 44 | } 45 | } 46 | 47 | app.flamelink = flamelink({ firebaseApp, dbType: 'rtdb' }) 48 | } 49 | -------------------------------------------------------------------------------- /examples/nuxt-basic/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /examples/nuxt-basic/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/nuxt-basic/static/favicon.ico -------------------------------------------------------------------------------- /examples/nuxt-basic/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /examples/vue-basic/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 -------------------------------------------------------------------------------- /examples/vue-basic/.env: -------------------------------------------------------------------------------- 1 | VUE_APP_FLAMELINK_API_KEY="" 2 | VUE_APP_FLAMELINK_AUTH_DOMAIN="" 3 | VUE_APP_FLAMELINK_DB_URL="" 4 | VUE_APP_FLAMELINK_PROJECT_ID="" 5 | VUE_APP_FLAMELINK_STORAGE_BUCKET="" 6 | VUE_APP_FLAMELINK_MESSAGING_SENDER_ID="" -------------------------------------------------------------------------------- /examples/vue-basic/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/prettier' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } -------------------------------------------------------------------------------- /examples/vue-basic/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | !.env 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw* 23 | -------------------------------------------------------------------------------- /examples/vue-basic/.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } -------------------------------------------------------------------------------- /examples/vue-basic/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false, 3 | "semi": true 4 | } 5 | -------------------------------------------------------------------------------- /examples/vue-basic/README.md: -------------------------------------------------------------------------------- 1 | # vue-basic 2 | 3 | > Project bootstrapped with [@vue/cli](https://cli.vuejs.org/) 4 | 5 | This aims to be an example of how you would connect Flamelink with your Vue application. 6 | 7 | View the app running [here](https://flamelink-vue-basic.firebaseapp.com/#/) 8 | 9 | ## Setup 10 | 11 | ### Firebase Project Config 12 | 13 | If you want to follow along: 14 | 15 | - Ensure that you have an existing [Firebase project](https://console.firebase.google.com/u/0/) that you can use. 16 | - Copy the `.env` file and save as `.env.local`. 17 | - Replace all the environment variables with your Firebase project config details, for example: 18 | 19 | Change: 20 | 21 | ```sh 22 | VUE_APP_FLAMELINK_API_KEY="" 23 | ``` 24 | 25 | with: 26 | 27 | ```sh 28 | VUE_APP_FLAMELINK_API_KEY=AIzaSyDuTZiS23eqbkLA557_rlO9F0NBRZWViRx 29 | ``` 30 | 31 | #### Database Rules 32 | 33 | To quickly make the content and navigation items available from our app without a user being authenticated, I've updated the default Flamelink Database rules to the following: 34 | 35 | ```json 36 | { 37 | "rules": { 38 | "flamelink": { 39 | ".read": "auth != null", 40 | ".write": "auth != null", 41 | "environments": { 42 | "$env": { 43 | ".read": true 44 | } 45 | }, 46 | "users": { 47 | ".indexOn": ["email"] 48 | } 49 | } 50 | } 51 | } 52 | ``` 53 | 54 | This simply makes everything inside the `flamelink/environments` reference readable to anyone. 55 | 56 | > **Important**! As always, once you are ready to you roll your app out to your end users, make sure to set the strictest rules possible for your use case. When it comes to these rules and security in general, it is a good idea to following the [Principle of Least Privilege](https://en.wikipedia.org/wiki/Principle_of_least_privilege). Check out: [Understanding Firebase Realtime Database Rules](https://firebase.google.com/docs/database/security/). 57 | 58 | #### Database Structure 59 | 60 | The following database structure was created from within the Flamelink CMS: 61 | 62 | ##### Navigation 63 | 64 | ![Main Navigation](public/img/main-navigation.png) 65 | 66 | - Navigation Name: Main Navigation 67 | - NaKey: mainNavigation 68 | - Navigation Items: 69 | 70 | ```text 71 | -- Home 72 | - Title: Home 73 | - URI: / 74 | - CSS Class: home-page 75 | - Component: Home 76 | -- About 77 | - Title: About 78 | - URI: /about 79 | - CSS Class: about-page 80 | - Component: About 81 | -- Our Vision 82 | - Title: Our Vision 83 | - URI: our-vision 84 | - CSS Class: about-page 85 | - Component: OurVision 86 | -- Who we are 87 | - Title: Who we are 88 | - URI: who-we-are 89 | - CSS Class: about-page 90 | - Component: People 91 | -- Contact Us 92 | - Title: Contact Us 93 | - URI: /contact-us 94 | - CSS Class: contact-us-page 95 | - Component: ContactForm 96 | ``` 97 | 98 | ##### Schemas 99 | 100 | ```text 101 | -- Home 102 | - Title: Home 103 | - Schema ID: home 104 | - Type: Single 105 | - Group: Pages 106 | - Enabled: true 107 | -- Fields: 108 | -- Text 109 | - Field Name: Page Title 110 | - Field Key: pageTitle 111 | - Show in overview table: true 112 | -- Textarea 113 | - Field Name: Page Body 114 | - Field Key: pageBody 115 | - Show in overview table: false 116 | 117 | -- Our Vision 118 | - Title: Our Vision 119 | - Schema ID: ourVision 120 | - Type: Single 121 | - Group: Pages 122 | - Enabled: true 123 | -- Fields: 124 | -- Text 125 | - Field Name: Title 126 | - Field Key: title 127 | - Show in overview table: true 128 | -- Textarea 129 | - Field Name: Body 130 | - Field Key: body 131 | - Show in overview table: false 132 | 133 | -- Who We Are 134 | - Title: Who We Are 135 | - Schema ID: whoWeAre 136 | - Type: Single 137 | - Group: Pages 138 | - Enabled: true 139 | -- Fields: 140 | -- Text 141 | - Field Name: Title 142 | - Field Key: title 143 | - Show in overview table: true 144 | -- Textarea 145 | - Field Name: Body 146 | - Field Key: body 147 | - Show in overview table: false 148 | -- Repeater 149 | - Field Name: People 150 | - Field Key: people 151 | - Field Layout: Table 152 | - Show in overview table: false 153 | -- Fields: 154 | -- Text 155 | - Field Name: Name 156 | - Field Key: name 157 | -- Text 158 | - Field Name: Job Title 159 | - Field Key: jobTitle 160 | -- Textarea 161 | - Field Name: Bio 162 | - Field Key: bio 163 | -- Media 164 | - Field Name: Avatar 165 | - Field Key: avatar 166 | - Selection Limit: 1 167 | - Media Types: Images 168 | ``` 169 | 170 | ##### Content 171 | 172 | Make sure you add any data for the fields we've created in our schema 173 | 174 | ### Install dependencies 175 | 176 | ```bash 177 | yarn install 178 | ``` 179 | 180 | ### Compiles and hot-reloads for development 181 | 182 | ```bash 183 | yarn run serve 184 | ``` 185 | 186 | ### Compiles and minifies for production 187 | 188 | ```bash 189 | yarn run build 190 | ``` 191 | 192 | ### Lints and fixes files 193 | 194 | ```bash 195 | yarn run lint 196 | ``` 197 | -------------------------------------------------------------------------------- /examples/vue-basic/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/app"] 3 | }; 4 | -------------------------------------------------------------------------------- /examples/vue-basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-basic", 3 | "version": "0.1.0", 4 | "private": true, 5 | "engines": { 6 | "node": ">= 6 < 10" 7 | }, 8 | "scripts": { 9 | "serve": "vue-cli-service serve", 10 | "build": "vue-cli-service build", 11 | "lint": "vue-cli-service lint", 12 | "deploy": "npm run build && cd dist && surge" 13 | }, 14 | "dependencies": { 15 | "flamelink": "^0.17.1", 16 | "register-service-worker": "^1.0.0", 17 | "vue": "^2.5.17", 18 | "vue-router": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "^3.0.0-rc.12", 22 | "@vue/cli-plugin-eslint": "^3.0.0-rc.12", 23 | "@vue/cli-plugin-pwa": "^3.0.0-rc.12", 24 | "@vue/cli-service": "^3.0.0-rc.12", 25 | "@vue/eslint-config-prettier": "^3.0.0-rc.12", 26 | "node-sass": "^4.9.0", 27 | "sass-loader": "^7.0.1", 28 | "vue-template-compiler": "^2.5.17" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /examples/vue-basic/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/favicon.ico -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /examples/vue-basic/public/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /examples/vue-basic/public/img/main-navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/public/img/main-navigation.png -------------------------------------------------------------------------------- /examples/vue-basic/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-basic 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/vue-basic/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-basic", 3 | "short_name": "vue-basic", 4 | "icons": [ 5 | { 6 | "src": "/img/icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/img/icons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "/index.html", 17 | "display": "standalone", 18 | "background_color": "#000000", 19 | "theme_color": "#4DBA87" 20 | } 21 | -------------------------------------------------------------------------------- /examples/vue-basic/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /examples/vue-basic/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 34 | -------------------------------------------------------------------------------- /examples/vue-basic/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flamelink/examples/5738f4cb5dce07cea1e0169afc48e4eb6697b372/examples/vue-basic/src/assets/logo.png -------------------------------------------------------------------------------- /examples/vue-basic/src/components/Container.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 17 | 23 | -------------------------------------------------------------------------------- /examples/vue-basic/src/components/MainNav.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | 31 | 32 | 57 | -------------------------------------------------------------------------------- /examples/vue-basic/src/components/PageTitle.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /examples/vue-basic/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import FlamelinkPlugin from "./plugins/flamelink"; 4 | import getRouter from "./router"; 5 | import "./registerServiceWorker"; 6 | 7 | Vue.config.productionTip = false; 8 | 9 | Vue.use(FlamelinkPlugin, { 10 | apiKey: process.env.VUE_APP_FLAMELINK_API_KEY, 11 | authDomain: process.env.VUE_APP_FLAMELINK_AUTH_DOMAIN, 12 | databaseURL: process.env.VUE_APP_FLAMELINK_DB_URL, 13 | projectId: process.env.VUE_APP_FLAMELINK_PROJECT_ID, 14 | storageBucket: process.env.VUE_APP_FLAMELINK_STORAGE_BUCKET, 15 | messagingSenderId: process.env.VUE_APP_FLAMELINK_MESSAGING_SENDER_ID 16 | }); 17 | 18 | getRouter() 19 | .then(router => { 20 | new Vue({ 21 | router, 22 | render: h => h(App) 23 | }).$mount("#app"); 24 | }) 25 | .catch(console.error); 26 | -------------------------------------------------------------------------------- /examples/vue-basic/src/plugins/flamelink.js: -------------------------------------------------------------------------------- 1 | import flamelink from "flamelink"; 2 | 3 | const FlamelinkPlugin = { 4 | install(Vue, options) { 5 | if (!options) { 6 | throw new Error("Please specify the Flamelink config options"); 7 | } 8 | 9 | const app = flamelink(options); 10 | 11 | // Ensure app is available on all vue instances 12 | Vue.prototype.$flamelinkApp = app; 13 | 14 | // Ensure app is available globally - useful for querying data not used in a view (eg. router setup, etc) 15 | Vue.flamelinkApp = app; 16 | } 17 | }; 18 | 19 | export default FlamelinkPlugin; 20 | -------------------------------------------------------------------------------- /examples/vue-basic/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from "register-service-worker"; 4 | 5 | if (process.env.NODE_ENV === "production") { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready() { 8 | console.log( 9 | "App is being served from cache by a service worker.\n" + 10 | "For more details, visit https://goo.gl/AFskqB" 11 | ); 12 | }, 13 | cached() { 14 | console.log("Content has been cached for offline use."); 15 | }, 16 | updated() { 17 | console.log("New content is available; please refresh."); 18 | }, 19 | offline() { 20 | console.log( 21 | "No internet connection found. App is running in offline mode." 22 | ); 23 | }, 24 | error(error) { 25 | console.error("Error during service worker registration:", error); 26 | } 27 | }); 28 | } 29 | -------------------------------------------------------------------------------- /examples/vue-basic/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Router from "vue-router"; 3 | import { camelCase } from "lodash"; 4 | import { getMainNav } from "./utils/api"; 5 | 6 | Vue.use(Router); 7 | 8 | const prepareRoute = route => { 9 | return { 10 | path: route.url, 11 | name: camelCase(route.component), 12 | // route level code-splitting - which is lazy-loaded when the route is visited. 13 | component: () => import(`./views/${route.component || "NotFound"}.vue`), 14 | children: route.children ? route.children.map(prepareRoute) : [], 15 | meta: { 16 | name: route.title, 17 | cssClass: route.cssClass 18 | } 19 | }; 20 | }; 21 | 22 | const getRouter = async () => { 23 | const navItems = await getMainNav(); 24 | const routes = navItems.sort((a, b) => a.order >= b.order).map(prepareRoute); 25 | return new Router({ routes }); 26 | }; 27 | 28 | export default getRouter; 29 | -------------------------------------------------------------------------------- /examples/vue-basic/src/utils/api.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | 3 | export const getMainNav = () => 4 | Vue.flamelinkApp.nav.getItems("mainNavigation", { structure: "nested" }); 5 | -------------------------------------------------------------------------------- /examples/vue-basic/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 33 | -------------------------------------------------------------------------------- /examples/vue-basic/src/views/ContactForm.vue: -------------------------------------------------------------------------------- 1 |