+
+ Hello {{ user.displayName }}!
+ +Please login.
+ +-
+
- + {{ item.name }} + +
-
+
- + {{ item.name }} + +
-
+
- + {{ shirt.name }} is {{ shirt.price }} + +
-
+
- + {{ deposit.description }} for {{ deposit.amount }} + +
-
+
- + {{ log.description }} for {{ log.amount }} + +
-
+
- + {{ item.name }} + +
+ {{ (item | async)?.name }}
+
+ {% endraw %}`
+})
+export class AppComponent {
+ private itemDoc: AngularFirestoreDocument-
+
- + {{item.name}} + +
+
+ {%- linkbutton "/get-started/quick-start" %}
+ Get started
+ {%- endlinkbutton %}
+
+
+ {%- linkbutton "https://github.com/angular/fire", "secondary", true %}
+ GitHub
+ {%- endlinkbutton %}
+
+
+
+{% disclaimerprod %}
+
+## What is AngularFire?
+
+AngularFire smooths over the rough edges an Angular developer might encounter when implementing the framework-agnostic Firebase JS SDK & aims to provide a more natural developer experience by conforming to Angular conventions.
+
+### Dependency injection
+Provide and Inject Firebase services in your components
+
+### Zone.js wrappers
+Stable zones allow proper functionality of service workers, forms, SSR, and pre-rendering
+
+### Observable based
+Utilize RxJS rather than callbacks for realtime streams
+
+### NgRx friendly API
+Integrate with NgRx using AngularFire's action based APIs.
+
+### Lazy-loading
+AngularFire dynamically imports much of Firebase, reducing time to load your app
+
+### Deploy schematics
+Get your Angular application deployed on Firebase Hosting with a single command
+
+### Google Analytics
+Zero-effort Angular Router awareness in Google Analytics
+
+### Router Guards
+Guard your Angular routes with built-in Firebase Authentication checks
diff --git a/site/src/ionic/authentication.md b/site/src/ionic/authentication.md
new file mode 100644
index 000000000..a42a946e4
--- /dev/null
+++ b/site/src/ionic/authentication.md
@@ -0,0 +1,100 @@
+---
+title: Authentication
+eleventyNavigation:
+ key: Authentication
+ parent: Ionic
+---
+
+## Setting up Ionic and Firebase Auth
+
+First start out by installing the needed plugins below.
+
+```
+ionic cordova plugin add cordova-universal-links-plugin
+ionic cordova plugin add cordova-plugin-buildinfo
+ionic cordova plugin add cordova-plugin-browsertab
+ionic cordova plugin add cordova-plugin-inappbrowser
+(for ios)
+ionic cordova plugin add cordova-plugin-customurlscheme
+```
+
+## Add Firebase to your Ionic app
+
+Follow [this tutorial](https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md) to make a basic setup for your Ionic project.
+
+### To set up in an Android app
+
+Go to [Firebase console](https://console.firebase.google.com/) then click *Add Firebase to your Android app* and follow the setup steps.
+
+## Set up Firebase Authentication for Cordova
+
+*This is a summary from the [Firebase instructions](https://firebase.google.com/docs/auth/web/cordova).*
+
+### Setup Dynamic Link
+In the Firebase console, open the *Dynamic Links* section at bottom left panel, setup by their instruction
+
+Add this to config.xml at root level of project:
+
+```xml
+ -
+
- + {{ item | json }} + +
-
+
- + + + + +
{{ (item | async)?.name }}
+ {%endraw%}`, +}) +export class AppComponent { + item: Observable{{ item | async | json }}
+ + ++ + + + {%endraw%}`, +}) +export class AppComponent { + itemRef: AngularFireObject
Firebase widgets!
+
+
+ -
+
-
+ {{ item.payload.val().text }}
+
{{ item.payload.key }}+
+
No results, try clearing filters
+
+
+ {%endraw%}`,
+})
+export class AppComponent {
+ items$: ObservableFilter by size
+ + + + + +
+
`;
+ }
+}
+
+module.exports = {
+ shortcodes: [
+ disclaimerprod
+ ]
+};
diff --git a/site/src/shortcodes/filters/index.js b/site/src/shortcodes/filters/index.js
new file mode 100644
index 000000000..98d8916b9
--- /dev/null
+++ b/site/src/shortcodes/filters/index.js
@@ -0,0 +1,104 @@
+const console = require('console');
+const { resolve } = require('path');
+
+const findByName = {
+ name: "findByName",
+ type: "addNunjucksFilter",
+ create(list, name) {
+ return list.find((item) => item.name === name);
+ }
+};
+
+const log = {
+ name: "log",
+ type: "addNunjucksFilter",
+ create(object, logName) {
+ console.log(logName, object);
+ return object;
+ }
+};
+
+const json = {
+ name: "json",
+ type: "addNunjucksFilter",
+ create(object, spacer = 3) {
+ let cache = [];
+ const json = JSON.stringify(
+ object,
+ (key, value) => {
+ if (typeof value === "object" && value !== null) {
+ if (cache.includes(value)) {
+ return;
+ }
+ cache.push(value);
+ }
+ return value;
+ },
+ spacer
+ );
+ cache = null;
+ return json;
+ }
+};
+
+const findPreviousEntry = {
+ name: "findPreviousEntry",
+ type: "addNunjucksFilter",
+ create(children, eleventyNavigation) {
+ const itemIndex = children.findIndex(entry => entry.key === eleventyNavigation.key);
+ const previousIndex = itemIndex - 1;
+ return children[previousIndex];
+ }
+};
+
+const findNextEntry = {
+ name: "findNextEntry",
+ type: "addNunjucksFilter",
+ create(children, eleventyNavigation) {
+ const itemIndex = children.findIndex(entry => entry.key === eleventyNavigation.key);
+ const nextIndex = itemIndex + 1;
+ return children[nextIndex];
+ }
+};
+
+/**
+ * This filter reads the custom navigation in the global _data/ folder
+ * and merges it with the eleventyNavigation config. Eleventy Navigation
+ * works great for parent folders but it's less good for child navigation
+ * when it comes to "next/prev" routing. This allows us to keep the good
+ * parts of Eleventy Navigation and have a custom child path routing.
+ *
+ * Eventually I'd like to customize Eleventy Navigation to do child routing
+ * because this is extremely inefficient to loop over nav for every page. It
+ * doesn't effect this build too bad though.
+ */
+const mergeNavigation = {
+ name: "mergeNavigation",
+ type: "addNunjucksFilter",
+ create(eleventyNavigation) {
+ const customNavigation = require(resolve(__dirname, '../../_data/nextprev.json'));
+ const customKeys = Object.keys(customNavigation);
+ customKeys.forEach(key => {
+ const eleventyNavMatch = eleventyNavigation.find(item => item.key === key);
+ if(eleventyNavMatch != undefined) {
+ const matchKids = eleventyNavMatch.children;
+ const newKids = customNavigation[key].children.map(child => {
+ return matchKids.find(c => c.key === child.key);
+ });
+ eleventyNavigation.find(item => item.key === key).children = newKids;
+ }
+ });
+ return eleventyNavigation;
+ }
+}
+
+module.exports = {
+ shortcodes: [
+ findByName,
+ log,
+ json,
+ findPreviousEntry,
+ findNextEntry,
+ mergeNavigation,
+ ],
+};
diff --git a/site/src/shortcodes/headings/index.js b/site/src/shortcodes/headings/index.js
new file mode 100644
index 000000000..57f1a72e0
--- /dev/null
+++ b/site/src/shortcodes/headings/index.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Usage: {% headingone %} My title! {% endheadingone %}
+const headingOne = {
+ name: "headingone",
+ type: "addPairedShortcode",
+ create (content) {
+ return `Beta Site!
+This is a brand new guide site that is in beta. During this time period we'd love to hear your feedback on our GitHub Discussion board. Please let us know what you think of the usability, content, and any ideas for improvement. All contributors are welcome!
+${ content }
` + } +}; + +const subHeading = { + name: "subheading", + type: "addPairedShortcode", + create (content) { + return `${content}
`;
+ }
+};
+
+module.exports = {
+ shortcodes: [
+ headingOne,
+ subHeading,
+ ]
+};
+
diff --git a/site/src/shortcodes/includecode/fetch.js b/site/src/shortcodes/includecode/fetch.js
new file mode 100644
index 000000000..d122d5be2
--- /dev/null
+++ b/site/src/shortcodes/includecode/fetch.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fetch = require("node-fetch");
+
+function convertToGitHubApiUrl(githubPath) {
+ const urlPieces = githubPath.split('/');
+ const [user, repo] = urlPieces.slice(0, 2);
+ // TODO(davideast): Don't hardcode main branch
+ const githubApiUrl = [user, repo, 'master', ...urlPieces.slice(2, urlPieces.length)].join('/');
+ return `https://raw.githubusercontent.com/${githubApiUrl}`;
+}
+
+async function fetchCode(githubPath) {
+ const githubApiUrl = convertToGitHubApiUrl(githubPath);
+ const response = await fetch(githubApiUrl);
+ return response.text();
+}
+
+module.exports = { fetchCode };
diff --git a/site/src/shortcodes/includecode/from-local.js b/site/src/shortcodes/includecode/from-local.js
new file mode 100644
index 000000000..9db02271b
--- /dev/null
+++ b/site/src/shortcodes/includecode/from-local.js
@@ -0,0 +1,24 @@
+const { readFile } = require('fs');
+const { resolve } = require('path');
+const { promisify } = require('util');
+const readFileAsync = promisify(readFile);
+
+function convertGitHubPathToLocal(githubPath) {
+ return resolve(__dirname, '../../../repo_clones', githubPath);
+}
+
+async function fetchCode(githubPath = '') {
+ let content = '';
+ try {
+ const localPath = convertGitHubPathToLocal(githubPath);
+ content = await readFileAsync(localPath, 'utf-8');
+ } catch(error) {
+ console.error(error);
+ content = 'File not found 😭';
+ }
+ return content;
+}
+
+module.exports = {
+ fetchCode,
+};
diff --git a/site/src/shortcodes/includecode/index.js b/site/src/shortcodes/includecode/index.js
new file mode 100644
index 000000000..3d0a6526d
--- /dev/null
+++ b/site/src/shortcodes/includecode/index.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const { fetchCode } = require('./from-local');
+const { processSnippet } = require('./snippets');
+const prism = require('markdown-it-prism');
+const MarkdownIt = require('markdown-it');
+const md = new MarkdownIt({ html: true });
+md.use(prism);
+
+function embedInCodeticks(code) {
+ return '```js\n' + code + '\n```';
+}
+
+// Usage: {% includecode github_path="firebase/snippets-web/snippets/auth-next/anonymous/auth_anon_sign_in.js" %}
+const includecode = {
+ name: "includecode",
+ type: "addNunjucksAsyncShortcode",
+ create({ github_path }) {
+ return fetchCode(github_path)
+ .then(processSnippet)
+ .then(embedInCodeticks)
+ .then(output => md.render(output));
+ }
+};
+
+// Usage: {% codeswitcher eap_github_path="" current_github_path="" %}
+const codeswitcher = {
+ name: "codeswitcher",
+ type: "addNunjucksAsyncShortcode",
+ async create({ eap_github_path, current_github_path }) {
+
+ let eapCode = '';
+ if(eap_github_path != undefined && eap_github_path !== '') {
+ eapCode = await fetchCode(eap_github_path);
+ eapCode = processSnippet(eapCode);
+ eapCode = embedInCodeticks(eapCode);
+ eapCode = md.render(eapCode);
+ eapCode = eapCode.trim();
+ }
+
+ let currentCode = '';
+ if(current_github_path != undefined && current_github_path !== '') {
+ currentCode = await fetchCode(current_github_path);
+ currentCode = processSnippet(currentCode);
+ currentCode = embedInCodeticks(currentCode);
+ currentCode = md.render(currentCode);
+ eapCode = eapCode.trim();
+ }
+ const eapId = Math.random().toString(36).substring(7);
+ const currentId = Math.random().toString(36).substring(7);
+ return /*html*/`{{ uploadPercent | async }}
+ {{ downloadURL | async }}
+ {%endraw%}`
+})
+export class AppComponent {
+ uploadPercent: Observable{{ meta | async }}