30:T556,html`

${md` # Ridiculously Rapid Software-as-a-Service (SaaS) development with Observable, Firebase and Stripe Despite Observable being targeted at the visualization community, I find the rapid feedback and reactive model a delight to work with, and, a huge productivity booster. So much, in fact, that I have started building customer facing software with it. My productivity is boosted because there are __no toolchains or deployment steps__ interrupting me. If I am unsure of the behaviour of the program, I can open a cell and play, immediately. I can iteratively refactor, right in the browser, without context switches. It is magical. It's applied [*Bret Victor*](http://worrydream.com/ExplorableExplanations/), FFS. In short, Observable is an amazing tool for trying out ideas, including, business ideas. 👀 As it turns out, it is possible to make money, right inside Observable. In this tutorial, I will walk you through the bare essentials fo building a SaaS product. __*Login, persisting customer data, security, implementing a backend, periodic jobs and charging money*__. As will also share my low effort tips to __make things pretty, easily build UIs__ and some help hiding Observable's warts when building SaaS.

`31:T893,html`

${md` Note how you can open another browser on another devices and see the results! Also the reactive updates works with the data admin console at https://console.firebase.google.com data viewer too! ## Security The chat demo relies on public read and write access being granted to the \`/apps/saas/msgs/\` location in Firestore Rules. By default Firestore won't allow this, you have to grant an exception. The rules to enable the demo looks like as follows: ~~~js rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /apps/saas/msgs/{entry_id} { allow read: if request.query.limit <= 10; allow write: if isValid(request.resource.data) function isValid(entry) { return entry.keys().hasOnly(["time", "msg"]) && entry.msg is string && entry.msg.size() < 100 && entry.time == request.time } } } } ~~~ which grants everyone read access if they are fetching less than 10 rows, and provides write access provided the data is structured correctly. Billing is a function of data transferred. Thus, I want to protect myself from having a huge build up of messages and someone accidentally downloading them all when fiddling with the notebook :) This is an especially acute problem on a public endpoint like this. Hence, I put that the query limit on read access, bounding the amount of messages that can be downloaded in one go. (Firestore also bills by documents written but the potential impact does not scale with history) ## Private data Our mini chat demo we implemented with publicly readable data. You can store private data too with access checks based on the user's uid. This value is available in the notebook as user.uid which will only become available after the user logs in using their identity provider. You can grant read/write access to a customer document in the rules as follows:- ~~~js ... match /customers/{uid} { allow read, write: if request.auth.uid == uid; } ... ~~~ There are many more examples in the Firestore Rules [documentation](https://firebase.google.com/docs/firestore/security/rules-conditions) `}

`32:T11a1,html`

${md` ### Acting on Payments Probably the more common case is you want to *do* something in exchange for someone giving you money. This is a little bit more involved to setup, but with combined with Firebase Functions it can be achieved relatively painlessly. The idea is that Stipe will contact the backend directly after payment is confirmed through webhooks hitting Firebase Functions. #### Add a webhook to Stripe and register for events At a minimum you need to register a webhook with Stripe and request notifications for two events. One event is called when the basket finalizes, and the other fires when payment is finalized. You configure these at https://dashboard.stripe.com/webhooks.

To save myself some effort when in MVP mode, I generate a really long ID to be my webhook URL, and keep it a secret. #### Acting on Stripe Events The webhook is implemented as an express app in its own file. We have two handlers: - *handleSessionCheckoutCompleted* is notified from Stripe when the [checkout session](https://stripe.com/docs/api/checkout/sessions) is finalized. We persist that session payload to Firestore keyed by the *payment_intent* id for use later. - *handlePaymentIntentSucceeded* fires when payment is confirmed. We can pull the session data back out of Firestore using the *payment_intent* id. ~~~js // stripe.js const app = require('express')(); const bodyParser = require('body-parser'); const admin = require('firebase-admin'); const db = admin.firestore(); app.post('/webhook', bodyParser.raw({type: 'application/json'}), async (request, response) => { let event = request.body; try { switch (event.type) { case 'payment_intent.succeeded': await handlePaymentIntentSucceeded(event.data.object); break; case 'checkout.session.completed': await handleSessionCheckoutCompleted(event.data.object); break; default: throw Error(\`Unhandled event type \${event.type}\`); } // Return a response to acknowledge receipt of the event response.json({received: true}); } catch (err) { response.status(500).send({message: err.message}); } }); async function handleSessionCheckoutCompleted(session) { // https://stripe.com/docs/api/checkout/sessions await db.collection("paymentSessionsByIntent").doc(session.payment_intent).set(session); } async function handlePaymentIntentSucceeded(paymentIntent) { // https://stripe.com/docs/api/payment_intents/object ({amount, currency, id} = paymentIntent); const session = (await db.collection("paymentSessionsByIntent").doc(id).get()).data(); ({client_reference_id} = session); ... } exports.stripeHandler = app; ~~~ The session object contains the *client_reference_id* which can be set in the front end. For instance, it can be set as the *user.uid* allowing us to figure out *who* purchased the items in terms Firebase understands. Thus in the handler of *handlePaymentIntentSucceeded* we can piece together that - payment is confirmed and the amount spent - who made the purchase (user.uid in the client_reference_id) - a link to the checkout contents (via line_items in session) We can achieve all this without actually using the serverside Stripe API or using Stripe secrets. However, when you want to expand the *line_items* you will need to make authenticated calls with the Stripe Backend and complexity goes up. #### Attach Stripe handler to Functions Webhook The security of the webhook hinges on using an unguessable URL for the Stripe to Firebase integration. ~~~js exports. = functions.region("europe-west1").https.onRequest(require("./stripe").stripeHandler); ~~~ This is 'ok' for MVPs. The risk is that users will discover the URL somehow and get free things. The obvious next level of security would be using a Stripe supplied [signing key](https://stripe.com/docs/webhooks/signatures) to authenticate the inbound webhooks. You can store the secret in [Google Secret Manager](https://cloud.google.com/secret-manager). All Firebase projects are also Google Cloud Projects, so this is a useful and easily available technology. #### Create product chooser For simple services where users buy credit you don't need line items. Here is a simple interface that allows customers to purchase credit. `}

`33:T457,buyCredit = { function buy(price) { stripe.redirectToCheckout({ lineItems: [{ price: price, quantity: 1}], mode: 'payment', successUrl: `https://observablehq.com/@tomlarkworthy/minecraft-servers`, cancelUrl: `https://observablehq.com/@tomlarkworthy/saas-tutorial#buyCredit`, clientReferenceId: user.uid, customerEmail: user.email, }) } return html`

` }34:T86c,html`

${md` # And That's how you SaaS in Observable! The combination of Observable, Firebase and Stripe is amazing. It took me about 3 weeks of spare time to build [Minecraft hosting](https://observablehq.com/@tomlarkworthy/minecraft-servers) for families.

The beauty of Observable is people can see how things are implemented by expanding the cells. So please feel free to take a look around in the [product](https://observablehq.com/@tomlarkworthy/minecraft-servers) to see a fully featured example in action. Of particular interest is creating an __*onboarding process, invites, auto-creating usernames and detecting when a user is not logged in*__ *etc.* One unavoidable issue with building SaaS in Observable is that it soon becomes overloaded with ugly import statements. These can be a real turnoff to non-technical users. To alleviate this issue, the public facing [Minecraft hosting notebook](https://observablehq.com/@tomlarkworthy/minecraft-servers) imports everything from a hidden [backend notebook](https://observablehq.com/@tomlarkworthy/minecraft-servers-be) in a single line. This greatly reduces the import sprawl. BTW, I was one of the original Firebase Realtime Database engineers before Google acquired Firebase. I joined Firebase in 2014 because I could see it was a *much* better way of developing backend services. I get exactly the same feeling with Observable. Observable, to me, is the missing front end piece to Firebase. They both radically emphasize the UX of development, and the ergonomics of reactivity. They pair *really* well for building services. I tried my best to combine them both in [firebaseui](https://observablehq.com/@tomlarkworthy/firebaseui). The [DocsView](https://observablehq.com/@tomlarkworthy/firebaseui#DocsView) component is a very nice abstraction that bridges these two worlds quite nicely in my opinion. If you enjoyed this article, please share it, like it or discuss it, or, Lol, buy me a coffee! Even better, use the knowledge to build something magnificent! `}

`35:[{"id":"1168ec6a37b4850a1fd3e4c5e603c62f0f39ca106b4c1d0320d826494abc6d8cdbc5701f578789931196794acdd6d35b89949b5decb926a581ec98df9ea207bf","href":"https://static.observableusercontent.com/files/1168ec6a37b4850a1fd3e4c5e603c62f0f39ca106b4c1d0320d826494abc6d8cdbc5701f578789931196794acdd6d35b89949b5decb926a581ec98df9ea207bf","name":"image@3.png","type":"image/png","lastModified":1604658961431.128,"size":159426},{"id":"96bdbcea4968de70a3e01967dcb436f8d3fcc09443fedd518535a4128b282eed152382193bf1ef762fd0129285241db7ecfc9c5c6a55a253d8d0fcfa396fbe67","href":"https://static.observableusercontent.com/files/96bdbcea4968de70a3e01967dcb436f8d3fcc09443fedd518535a4128b282eed152382193bf1ef762fd0129285241db7ecfc9c5c6a55a253d8d0fcfa396fbe67","name":"image@4.png","type":"image/png","lastModified":1604668409422.694,"size":41375},{"id":"bd743aa81fb2b71fde23187d69adb59472763d712b954c5b933bf1efed3a9edd720b95209a1f8acc96b302b5d62d41e76668fc018a281184f7a94a1f5751c257","href":"https://static.observableusercontent.com/files/bd743aa81fb2b71fde23187d69adb59472763d712b954c5b933bf1efed3a9edd720b95209a1f8acc96b302b5d62d41e76668fc018a281184f7a94a1f5751c257","name":"image@1.png","type":"image/png","lastModified":1604648632912.575,"size":71877},{"id":"c790c0f2fb7a58f85643628807609a43486cad0a6e4bb2aec1e32931111f3878d86a626bf4e893ec481945ed9148045ef2adea75e940ae83cbf14c45217fef6e","href":"https://static.observableusercontent.com/files/c790c0f2fb7a58f85643628807609a43486cad0a6e4bb2aec1e32931111f3878d86a626bf4e893ec481945ed9148045ef2adea75e940ae83cbf14c45217fef6e","name":"image.png","type":"image/png","lastModified":1604618196502.712,"size":130562},{"id":"7199ac3fa403ef0da9974f380e7463ff6c4b89880a929c2fa552ff2b1a27ac22b4c66258546273343d30024eccac863bf6355e7e5a65bf9857e042751136f583","href":"https://static.observableusercontent.com/files/7199ac3fa403ef0da9974f380e7463ff6c4b89880a929c2fa552ff2b1a27ac22b4c66258546273343d30024eccac863bf6355e7e5a65bf9857e042751136f583","name":"image@2.png","type":"image/png","lastModified":1604658430414.784,"size":29713}] 2e:{"title":"Ridiculously Rapid Software-as-a-Service (SaaS) development with Observable, Firebase and Stripe","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"html`

${md`\n## Setup Firebase\nWe will need Firebase for login and backend services. Create a Firebase account at http://console.firebase.google.com\n\nYou will need to create a Web App and grab a copy of its *Project Settings* from the *Settings* menu. It will look something like this:\n\n

\n\nIf you drop the const, and the object with \$ \$ you can copy and paste into Observable. You will need to add an additional \"uiConfig\" block for login customization\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"firebaseConfig = ({\n apiKey: \"AIzaSyD882c8YEgeYpNkX01fhpUDfioWl_ETQyQ\",\n authDomain: \"endpointservice.firebaseapp.com\",\n databaseURL: \"https://endpointservice.firebaseio.com\",\n projectId: \"endpointservice\",\n storageBucket: \"endpointservice.appspot.com\",\n messagingSenderId: \"1986724398\",\n appId: \"1:1986724398:web:9b8bc33895b45dd2e095bf\",\n uiConfig: {\n // https://github.com/firebase/firebaseui-web#configuration\n signInOptions: [\"google.com\", \"facebook.com\", \"phone\", \"anonymous\"]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":852,"value":"note_api_keys = md`\n*sidenote: Unlike some APIs, Firebase API Keys are not [secrets](https://twitter.com/tomlarkworthy/status/1329365181907005440).* (thanks [@oleksandr_now](https://twitter.com/oleksandr_now))\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"html`

${md`\n## Customer Signin\n\nIt is useful for customers to be able to signin to your service using existing identity providers. You will need to enable the signing methods you want within the Firebase console, and place the signin for using an Observable wrapper for *[FirebaseUI](https://firebase.google.com/docs/auth/web/firebaseui)*. \n\nImport the FirebaseUI *viewof* into your notebook but redirect it *firebaseConfig* dependency we setup earlier in the hosting notebook\n`}

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"import {\n firebase, // Main Firebase SDK\n viewof user, // For login\n DocView, // For reading and writing to locations\n DocsView, // For reading collections\n listen // For reading from RTDB and Firestore collections and documents\n} with { firebaseConfig } from \"@tomlarkworthy/firebase\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"html`

${md`\n\nNext we place the component somewhere in our notebook as a UI control to a user variable. \n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof exampleUI = viewof user // Yes, its 1 line of code...","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"html`

${md`\nThe FirebaseUI component embraces the reactive programming model of Observable, __the user variable is not resolved until a user signs in__. This means you can have cells depend on the user variable and they are not evaluated until the user logs in. An important user field is the *uid*. Note the following cell does not display a UID until you login.\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"uidExample = `Your uid is ${user.uid}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"html`

${md`\nYou will need to register apps and OAuth 2.0 domains for each login provider. Instructions are in the [Firebase Authentication Web documentation](https://firebase.google.com/docs/auth/web/start). Under the hood, Observable serves cells from the domain. You often need to allowlist this domain in the configuration of identity providers \n\n .static.observableusercontent.com'\n\nConfiguring Google login is very easy as it can be done from within the Firebase console in the \\`authentication/providers\\` settings.\n\n![Autherorized domain](${await FileAttachment(\"image@1.png\").url()})\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"html`

${md`\n## Persisting Customer Data\n\nTo safely store customer data, we need a database. There are some additional tools in [firebase](https://observablehq.com/@tomlarkworthy/firebaseui) to help combining Firestore wih Observable.\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"// See import {firebase, DocView, DocsView, listen} from @tomlarkworthy/firebase","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"html`

${md`\n\n*firebase* is the core SDK which can do many things. *DocView* and *DocsView* are helpers for creating reactive views of Firestore documents and query results.\n\nTo shorten the amount of typing I do I usually map the variable *db* to the Firestore service.\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"db = firebase.firestore()","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"html`

${md`\n## Reading data\n\nWe can bind a Firestore location, or query, to an Observable cell value, which will update in realtime, if that location is written to.\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"msgs = listen(\n db.collection(\"apps\").doc(\"saas\").collection(\"msgs\").limit(5).orderBy(\"time\", \"desc\")\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"html`

${md`\nThe returned value of a listen (e.g. *msgs*) is an array of normal Javascript objects. The contents will update to all writes made locally or by other users.\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"msgsAsString = JSON.stringify(msgs.map(entry => entry.msg).reverse(), null, 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"html`

${md`\n## Writing data\n\nWe can use Firestore SDK to perform writes imperatively whenever we need to.\n~~~js\ndb.collection(\"collection\").doc(\"doc\").set({...})\n~~~\n\nFor our demo we will create a mini chat interface. To make it easy to bind functions to HTML, we use the amazing [hypertext literal](/@observablehq/htl) from Observable. To ensure the UI tracks state across renders we use a react-like reconciliation algorithm.\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"import {html} from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"import {reconcile} from '@tomlarkworthy/reconcile-nanomorph'","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"html`

${md`\nNow we can create a simple input that saves the text into the *msgs* collection when enter is pressed. \n\nNote how the view automatically updates, and everything dependent on it does too. Thanks to Firestore latency compensation the local view updates instantly without a network call, leading to highly responsive interfaces. The last message was __*\"${msgs[0].msg}\"*__.\n\nTry it out...\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof ui = {\n async function sendMsg(evt) {\n if (evt.keyCode === 13) {\n await db\n .collection(\"apps\")\n .doc(\"saas\")\n .collection(\"msgs\")\n .add({\n time: firebase.firebase_.firestore.FieldValue.serverTimestamp(),\n msg: evt.target.value\n });\n }\n }\n return reconcile(\n this,\n html`\n ${msgs.map(entry => html`

${entry.msg}

`).reverse()}\n <-- enter text`\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"html`

${md`\n## Adding a Backend API\n\nYou can achieve a lot in the front end in Observable, but not everything. __*Integration with 3rd party services, private code, secrets and periodic jobs*__ are best suited to backend implementation. __*Firebase Functions for Firebase*__ can cover these use-cases. It's especially easy to add due to Authentication and Firestore features.\n\nYou can quickly setup the development environment using the Firebase CLI and npm. See the [quick start](https://firebase.google.com/docs/functions/get-started).\n\n~~~js\nnpm install -g firebase-tools\nfirebase login\nfirebase init functions\n~~~\n\nThe backend is deployed at the commandline with \n\n~~~js\nfirebase deploy --only functions\n~~~\n\nDeployment can be quite slow, for anything non-trivial use the [Firebase emulator](https://firebase.google.com/docs/emulator-suite) to test locally first.\n\n~~~js\nfirebase emulators:start\n~~~\n\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"html`

${md`\n### Calling Remote Backend Functions\n\nAn Observable notebook can call a named private backend method using the Firebase functions service. It is very simple to pass in a JSON and get a response JSON out.\n\n~~~js\nconst result = await firebase.app().functions(\"europe-west1\").httpsCallable(\"api\")({\n ...\n });\n~~~\n\nThe backend has to define the named \\`onCall\\` handler\n\n~~~js\nexports.api = functions.region(\"europe-west1\").https\n .onCall(async (data, context) => {\n const uid = context.auth.uid;\n console.log(\\`\\${JSON.stringify(data)}\\`);\n return asyncHandler(data, uid);\n });\n~~~\n\nSee the [callables](https://firebase.google.com/docs/functions/callable) documention\n`}

`\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"html`

${md`\n### Periodic work\n\nYou can do periodic work too using Cloud Scheduler Pubsub notifications\n\n~~~js\nexports.per_day = functions.region(\"europe-west1\").pubsub.schedule('every 1 days')\n .onRun(async (context) => {\n const work = [];\n ...\n return await Promise.all(work);\n });\n~~~\n\nSee the [scheduling functions](https://firebase.google.com/docs/functions/schedule-functions) documentation.\n`}

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"html`

${md`\n### On Firestore Writes\n\nBecause the latency compensation of Firestore matches with Observables, I have, over time, found I prefer triggering backend work via document writes to the Firestore database.\n\nA Firestore write function will execute serverside Javascript when documents are mutated, e.g. by the Observable frontend. The nice thing about initiating the work like this in front end, is that the intent to mutate a document is reflected on the client side instantly. This can be used to simplify or remove the need for [spinners](https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e).\n~~~js\nexports.msgWrite = functions.region(\"europe-west1\").firestore\n .document('apps/saas/msgs/{entry}')\n .onWrite(async (change, context) => {\n if (!change.after.exists) {\n // Deleting\n } else if(!change.before.exists) { \n // Creating\n } else { \n // Updating\n }\n });\n~~~\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"html`

${md`\n## Making Money with Stripe\n\nYou're not a business until customers give you money. Luckily even this step is very simple thanks to the great work of Stripe. First you need to create an account at https://dashboard.stripe.com/register\n\nWe will be using Stripe Checkout, find the full details on [Stripe's website](https://stripe.com/docs/payments/checkout).\n\nYou need to grab your public API key\n\n![Stripe Key UI](${await FileAttachment(\"image@2.png\").url()})\n\nAnd you need this to initialize a Stripe SDK wrapper for Observable.\n\n\n\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"import {Stripe} from '@tomlarkworthy/stripe'","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"stripe = Stripe(\"pk_live_51HbQzcHGNosi6Ft0JM18AKCtG3cIs707E1ft1B5ePvpptHb5yoLnXHXLWkyBbDjHgtlPMOT0233jrcfvWAGj6AYp00RxIZdaky\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"html`

${md`\n### Unverified Payments \n\nFor very simple use cases like collecting a donation, you don't need to do very much. You just need to add a product in the Stripe interface and make note of its *price code*.\n\n![Stripe product config](${await FileAttachment(\"image@3.png\").url()})\n\nThe price code is used in a widget attached to a button to trigger the checkout process for that item. It's *that* simple:\n\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"buy = html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":556,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"buy2 = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"html`

${md`\nCheers! have a poke around at some of my other Observable experiments as well, I have quite a collation of [apps](https://observablehq.com/collection/@tomlarkworthy/apps) and [libraries](https://observablehq.com/collection/@tomlarkworthy/libraries) these days. __*I am all in on Observable*__ as you may have noticed...\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"credits = html`

${md`\n### Credits\n\nThanks to Observable's [@Fil](https://observablehq.com/@fil) (Twitter [@recifs](https://twitter.com/recifs)) for the PRs fixing some of the many typographical errors in this tutorial.\n`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"futurice_profile_bulma","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"import {futurice_profile_bulma} from '@tomlarkworthy/tom-larkworthy'","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}