diff --git a/package-lock.json b/package-lock.json index 0ae85a5..2ffd223 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1718,6 +1718,12 @@ "object.assign": "^4.1.0" } }, + "babel-plugin-prismjs": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-1.1.1.tgz", + "integrity": "sha512-MmwxA//jBpXH0IhJ2FbpBJmd6Bvq5rBe3UD3udUqfkkOdh6lmQeYxoVGpkIvLuuXecrynWjpPqwM0JPxErebpQ==", + "dev": true + }, "babel-polyfill": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz", @@ -2373,6 +2379,17 @@ } } }, + "clipboard": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz", + "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==", + "optional": true, + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "cliui": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", @@ -3167,6 +3184,12 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "optional": true + }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -4905,6 +4928,15 @@ } } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "optional": true, + "requires": { + "delegate": "^3.1.2" + } + }, "graceful-fs": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz", @@ -7947,6 +7979,14 @@ "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", "dev": true }, + "prismjs": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz", + "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==", + "requires": { + "clipboard": "^2.0.0" + } + }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -8636,6 +8676,12 @@ "ajv-keywords": "^3.1.0" } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "optional": true + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -9629,6 +9675,12 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", + "optional": true + }, "tinycolor2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", diff --git a/package.json b/package.json index 54a27bd..fd3eb2d 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@fullhuman/postcss-purgecss": "^1.3.0", "autoprefixer": "^9.6.0", "babel-loader": "^8.0.6", + "babel-plugin-prismjs": "^1.1.1", "babel-polyfill": "^6.26.0", "cross-env": "^6.0.3", "css-loader": "^2.1.1", @@ -33,6 +34,7 @@ "opn-browser-webpack-plugin": "0.0.7", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-loader": "^3.0.0", + "prismjs": "^1.17.1", "source-map-loader": "^0.2.4", "tailwindcss": "^1.0.4", "terser-webpack-plugin": "^1.3.0", diff --git a/src/index.js b/src/index.js index 7a6a8ca..62d1b53 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,18 @@ import './style.css' +import Prism from 'prismjs' + +import 'prismjs/themes/prism-coy.css' +import 'prismjs/components/prism-bash' +import 'prismjs/components/prism-javascript' + +import 'prismjs/plugins/line-numbers/prism-line-numbers' +import 'prismjs/plugins/line-numbers/prism-line-numbers.css' + +import './prism.css' + +Prism.highlightAll(); + window.displayMailChimpStatus = function (data) { if (!data.result || !data.msg) return diff --git a/src/pages/docs.html b/src/pages/docs.html new file mode 100644 index 0000000..ba971d2 --- /dev/null +++ b/src/pages/docs.html @@ -0,0 +1,12 @@ +
First you need a Userbase account. You will be able to create a free account when Userbase gets launched. No credit card required.
+ +Then you need to include the Userbase SDK into your web app.
+You can either include the SDK with a <script> tag:
+ +
+ <script type="text/javascript"
+ src="https://userbase-public.s3-us-west-2.amazonaws.com/userbase-js/userbase.js">
+</script>
+
+
+ Or else you can include the SDK into your build pipeline:
+ +
+ npm --install --save userbase-js
+
+
+ From your Userbase account, create a new App and get the Application ID. Then you just need to configure the Userbase SDK to use it:
+ +
+ userbase.configure({ appId: 'a43ae910-fc89-43fe-a7a3-a11a53b49325' })
+
+
+ And you're all set.
+You can use Userbase through a simple JavaScript SDK in the browser. The following is the complete set of Userbase APIs that let you create user accounts, handle logins, and persist user data.
+ +Use these APIs to create user accounts, handle logins and logouts, and resume sessions when a user returns to your web app.
+Use these APIs to store and retrieve user data. All data handled by these APIs is highly-durable, immediately consistent, and end-to-end encrypted.
+Delete lets your delete an item from a user's database. This API with will return a promise that gets resolved once the item has been durably deleted from the database.
+ +
+ userbase.delete(databaseName, itemId)
+ .then(() => {
+ // item deleted
+ })
+ .catch((e) => console.error(e))
+
+
+ Insert lets your add items to a user's database. This API with will return a promise that gets resolved once the item has been durably inserted into the database.
+ +
+ userbase.insert(databaseName, itemId, item)
+ .then(() => {
+ // item inserted
+ })
+ .catch((e) => console.error(e))
+
+
+ OpenDatabase lets your retrieve data stored by the users of your web app. You also need to have a database open before storing or modify user data. This API with will return a promise that gets resolved once the database becomes available for use.
+ +
+ userbase.openDatabase(databaseName, changeHandler)
+ .then(() => {
+ // the database can now be used
+ })
+ .catch((e) => console.error(e))
+
+
+ SignInWithSession lets you automatically log in a user using the last used session. This API with will return a promise that gets resolved once the session has been validated. If the session is valid, the user gets automatically logged in.
+ +
+ userbase.signInWithSession()
+ .then((session) => {
+ if (session.user) {
+ // there is a valid active session
+ console.log(session.user.username)
+ }
+ })
+ .catch((e) => console.error(e))
+
+
+ SignIn lets your users log into your web app. This API with will return a promise that gets resolved once the user has been logged in.
+ +
+ userbase.signIn(username, password)
+ .then((user) => {
+ // user logged in
+ })
+ .catch((e) => console.error(e))
+
+
+ SignOut lets your users log out of your web app. This API with will return a promise that gets resolved once the user has been logged out.
+ +
+ userbase.signOut()
+ .then(() => {
+ // user logged out
+ })
+ .catch((e) => console.error(e))
+
+
+ SignUp lets you create user accounts for your web app. This API with will return a promise that gets resolved once the user account has been created.
+ +
+ userbase.signUp(username, password)
+ .then((user) => {
+ // user account created
+ })
+ .catch((e) => console.error(e))
+
+
+
+ userbase.transaction(databaseName, operations)
+ .then(() => {
+
+ })
+ .catch((e) => console.error(e))
+
+
+ Update lets your modify an existing item in a user's database. This API with will return a promise that gets resolved once the item has been durably updated into the database.
+ +
+ userbase.update(databaseName, itemId, item)
+ .then(() => {
+ // item updated
+ })
+ .catch((e) => console.error(e))
+
+
+