Docusaurus: is writing to the filesystem during loadContent poor practice for plugins? - plugins

I'd like to populate my Docusaurus project with documentation using the "docs" plugin and a custom (JavaScript) plugin to connect it to a headless CMS. Currently, I'm using the loadContent Lifecycle API event to call my Headless CMS API and then using fs.writeFileSync to create physical markdown files in '/docs' and overwriting the ./sidebars.js file so the 'docs' plugin that comes with the classic preset works.
./my-plugin/index.js:
module.exports = function (context, options) {
return {
name: 'my-docusaurus-plugin',
async loadContent() {
//calls to Headless CMS API for documentation content
let response = await fetchArticles('documentation');
// Adds the markdown files for 'docs' plugin using fs.writeFileSync
await buildArticles(response)
//fetch homepage and navigation sections from CMS API
let homepage = await fetchPages('homepage');
let sidebarSection = await fetchPages('page');
//overwrite ./sidebars.js with API navigation data using fs.writeFileSync
await buildSidebar(homepage, sidebarSection);
}
};
};
This works in that I get content from my CMS and the Documentation renders, but it seems more like a workaround than an elegant solution for connecting a headless CMS with Docusaurus. Am I missing some best practices or is there a better approach using other lifecycle events?

Related

Unable to do a Nuxt axios post

I have spent some hours trying to figure out my problem without any success.
before reading the explanation
My nuxt site generates dynamic content and works well on client side but for SEO to work and social media shares render dynamic content i need to move my app to SSR. This axios post request do work on client side rendering but does not on SSR and I don't understand the reason and I need help to understand it.
Thanks
For starters I am building a Nuxt app that consumes Drupal as a CMS using a fully decoupled approach and I have been using it for several VUE apps without problem and now I need to do them on Nuxt with a SSR approach because I need heavy SEO on the sites. With Nuxt the same request against oauth/token on drupal doesn't work and I have gone from the complex structure we had to the simple one using both Axios and Nuxt/Axios without any success and alway getting a 400 error code.
I need to run this code first on my app so I can get drupal access token and do some request for data.
Code on store
export const actions = {
async nuxtServerInit({dispatch}, vuexContext, context, app){
await dispatch("setToken");
},
async setToken({ commit, dispatch, getters }, context) {
//prep form data to send
const FormData = require('form-data');
const body = new FormData();
body.append("param1", apiConfig.getValue("param1"));
body.append("param2", apiConfig.getValue("param2"));
body.append("param3", apiConfig.getValue("param3"));
body.append("param4", apiConfig.getValue("param4"));
body.append("param5", apiConfig.getValue("5"));
await this.$axios.$post(url, body)
.then(({data}) => {
//code to process data
commit("SET_TOKEN_DATA", data);
}).catch(error => {
console.log(error)
}).finally(() => {
console.log("FINALY");
});;
}
Some updates
base url is defined on nuxt.config as
// module options for axios
axios: {
baseURL: 'mysite.com'
},
I have tied on http request the following request using both axios and nuxt/axios, I will write short request just to show what I edid
await this.$axios.$post('mysite.com/oauth/token', body)
await this.$axios.$post('/oauth/token', body)
await this.$axios.$post('oauth/token', body)
I have also tried to use
const api = $axios.crate({
baseURL: 'url'
})
api.$axios.post('oauth/token', body)
another updated
Crated a Client Side Nuxt app and the request works.
Fix it, after literally 16 hours trying. When multiform post data you need to send FormData headers on the post and again, this works without any issues using CSR on VUE and Nuxt.
await this.$axios.$post(url, body, { headers: body.getHeaders()}).yada
I don't know if it's Axios or Nuxt the one doing this but I followed a breadcrumb trail to this post https://github.com/axios/axios/issues/318

Is it possible to display data from SeatGeek API call on my Squarespace site?

Is it possible to connect to the SeatGeek API to display local event data on a Squarespace site?
The Squarespace API docs all seem directed towards commerce-related goals.
I am familiar with how to connect to the SeatGeek API in the context of a mobile application. But I don't know whether connecting to APIs (other than those listed for commerce) from within a Squarespace is doable.
SeatGeek would be an unofficial integration . I've posted on the squarespace forums with no response, so asking here to see if anyone out there knows about it.
Thanks very much for any help!
Squarespace websites above the "Personal" plan tier support the addition of custom JavaScript via Code Blocks and Code Injection.
Therefore, if SeatGeek supports using their API via JavaScript (and it appears that they do), then you can obtain the data from within your Squarespace website.
Where within your site the code is added and what initialization methods are used will vary on a case-by-case basis. For example, factors include: whether you are using Squarespace 7.0 or 7.1 and whether the template you're using supports AJAX Loading and has it enabled.
However, regardless of where the code is added and the initialization methods used, it looks to me, based on what I see here, that obtaining data from SeatGeek via JavaScript is possible. (Select "JavaScript > XMLHttpRequest" or "JavaScript > Fetch" from the upper-right "Code Snippet" panel where it says "(Node.js) Unirest" by default):
var data = null;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
xhr.open("GET", "https://seatgeek-seatgeekcom.p.rapidapi.com/events");
xhr.setRequestHeader("x-rapidapi-host", "seatgeek-seatgeekcom.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key", "SIGN-UP-FOR-KEY");
xhr.send(data);
Or, via fetch:
fetch("https://seatgeek-seatgeekcom.p.rapidapi.com/events", {
"method": "GET",
"headers": {
"x-rapidapi-host": "seatgeek-seatgeekcom.p.rapidapi.com",
"x-rapidapi-key": "SIGN-UP-FOR-KEY"
}
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
});
While it varies on a case-by-case basis, in most cases you'll want to use the sitewide code injection area vs. code blocks or page-level code injection. Then, on Squarespace 7.0 sites, you'll want to wrap your code in:
window.Squarespace.onInitialize(Y, function() {
// do stuff here
});
For Squarespace 7.1 sites on the other hand, one would usually wrap the code in:
document.addEventListener('DOMContentLoaded', function() {
// do stuff here
}, false);
Finally, you'll need to think about how you're outputting the data. You could either add HTML markup via a Code Block in the body of the target page, or add the markup to the page as part of your JavaScript.

IBM Connections Cloud custom contextual data

I followed the official documentation and created a minor community app for my website.
What I'd like to know is if there's a way "to shim" custom data to IBM Connections Cloud when uploading my app as a JSON and then retrieve it inside the message handler after my app loads:
window.addEventListener('message', function(event) {
if (event.origin === "https://apps.collabservnext.com"){
// event.data contains the full context
console.log("Running in community named " + event.data.source.resourceId);
}
}, false);
parent.postMessage("appReady", "*");
So far I'm only getting the extraContent, source and user JSON keys in event.data. It would be awesome if there was a way to retrieve say hello: world.
Thanks.

SAP Fiori Get logged in user details in UI5 application

I've a SAP Fiori application and I need to get the current logged in user details.
I've searched web but unable to find a solution.
is there any way to get current logged in user details from launchpad.
There is a UserInfo service from the FLP shell which can be retrieved like this:
{ // In Controller
doSomethingUserDetails: async function() {
const oUserInfo = await this.getUserInfoService();
const sUserId = oUserInfo.getId(); // And in SAPUI5 1.86, those became public: .getEmail(), .getFirstName(), .getLastName(), .getFullName(), ...
// ...
},
getUserInfoService: function() {
return new Promise(resolve => sap.ui.require([
"sap/ushell/library"
], oSapUshellLib => {
const oContainer = oSapUshellLib.Container;
const pService = oContainer.getServiceAsync("UserInfo"); // .getService is deprecated!
resolve(pService);
}));
},
}
To align with the current best practices, avoid calling sap.ushell.Container.getService directly!
getService is deprecated. Use getServiceAsync instead.
Require the library instead of referencing the Container via global namespace (sap.ushell.*) as shown above.
Alternatively, information about the the current user can be also retrieved via the user API service exposed by the application router from the SAP Business Technology Platform (SAP BTP).
* In case the app is deployed to the old Neo environment, see the previous edit.
The User-ID can be retrieved from SDK.
Please refer to class sap.ushell.services.UserInfo
Try this:
new sap.ushell.services.UserInfo().getId()
If you want to access the user detail when you are running your application in launchpad. then you can retrieve current user detail by adding following code snippet:
var userInfo = sap.ushell.Container.getService("UserInfo");
var email = userInfo.getEmail();
Then further detail about the user can be retrieved like email and fullname. See the API here.

Set up facebook UrchinTracker for aJax calls for Google Analytics

I have set up the Google Analytics in my FBML facebook application. It works for tracking the php pages. (I can see the report in GA).
However, I also want to track the aJax calls, because most of the pages of my application is ajax driven, rather than loading differnet php pages.
so, that's what I put in the code (before ajax call)
Facebook.urchinTracker('/importantpage/');
THere is no error return when running the application.
However, when I look at the Google Analytics, I can't find any report showing this is being tracked. I look at the Event tracking.. nothing. I look at the overview, it only shows the php pages statistic.
So, where should I look in Google Analytics? and do I need to set up anything in GA for tracking the ajax call for 'importantpage' ?
try calling urchin within you AJAX function. Like :
function callPage(div,params, page)
{
Facebook.urchinTracker(page);
var ajax_content = new Ajax();
ajax_content.responseType = Ajax.FBML;
ajax_content.ondone = function(data)
{
document.getElementById(div).setInnerFBML(data);
}
var params={"Params":params,"target":div};
ajax_content.post(page,params);
}