Javascript Posts
How to connect strapi CMS in gatsby websiteJavascript

How to connect strapi CMS in gatsby websiteJavascript
Gatsby
Gatsby is a blazing-fast website framework for React. It allows developers to build React-based websites within minutes.
Strapi CMS
Strapi is an open-source, Node.js based, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks.
Integrate Gatsby with Strapi
Install gatsby-source-strapi package
npm i gatsby-source-strapi
gatsby-config.js file
- add the gatsby config file in the following code
plugins: [
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: "your strapi server",
contentTypes: ["restaurant"], //add your collections name
queryLimit: 1000,
}
}
]
Now connect your gatsby website and strapi CMS
- Here is an example of the GraphQL API query
import { StaticQuery, graphql } from 'gatsby';
const query = graphql`
query {
allStrapiRestaurant {
edges {
node {
strapiId
name
description
}
}
}
}
`
const IndexPage = () => (
<StaticQuery
query={query}
render={data => (
<ul>
{data.allStrapiRestaurant.edges.map(restaurant => (
<li key={restaurant.node.strapiId}>{restaurant.node.name}</li>
))}
</ul>
)}
/>
);
export default IndexPage;
Hope this helps.
Show saved annotations from database in document using PDFTronJavascript

Show saved annotations from database in document using PDFTronJavascript
Here we will learn how to import annotations saved in the database using PDFTron.
In my last blog, we have learned how to save annotations in the database.
Events for import annotation
At the time of document load, we will get all annotations saved in the database using AJAX call and then we'll import that annotation. Now the question is if we import annotation then that will be drawn and again annotation changed event will fire and again annotation will be saved (as I say in my last blog), so this will become an infinite flow, but we can overcome this problem by checking if an annotation is imported or not. If an annotation is not imported then only we'll save annotation in the database process otherwise we'll ignore it.
When we draw any annotation, the "annotationChanged" event will be fired, and check if it is an imported annotation, then we can ignore it(eg, save annotation process).
Here is an example of how to import annotations from the database.
Example
WebViewer({
path: 'path_to_the_PDFTron_'lib'_folder_on_your_server',
css: 'webviewer_css',
licenseKey: 'YOUR_PDF_TRON_LICENSE_KEY',
initialDoc: 'YOUR_FILE URL' //url of a file to load
}, document.getElementById('viewer'))
.then(function (instance) {
let docViewer = instance.docViewer;
let annotManager = instance.annotManager;
annotManager.on('annotationChanged', (annots, action, e) => {
//if annotation is imported we'll return
if (e.imported) return;
//when document will loaded we'll get annotations fro db
docViewer.on('documentLoaded', function () {
$.ajax({
url: `URL_TO_SAVE_ANNOTATION`,
type: 'GET',
success: function (result) {
if (result.success) {
result.data.forEach(annotationObj => {
annotManager.importAnnotations(annotationObj.annotation);
});
}
},
error: function (result) {
console.log(result);
}
});
});
});
});
Export annotations of PDFTron using jqueryJavascript

Export annotations of PDFTron using jqueryJavascript
Here we will learn how to export annotations drawn using PDFTron.
Events for export annotation
When we draw any annotation "annotationChanged" event will be fired, then we cache that event and we can export that annotation using "exportAnnotations".
When we draw annotations we'll save them in the database and when we reload the same document we can retrieve saved annotations from the database and can again show them, we will learn that in my next blog post.
Here is an example of how to save an annotation in a database.
Example
WebViewer
(
{ path: 'path_to_the_PDFTron_'lib'_folder_on_your_server',
css: 'webviewer_css',
licenseKey: 'YOUR_PDF_TRON_LICENSE_KEY',
initialDoc: 'YOUR_FILE URL' //url of a file to load
},
document.getElementById('viewer')
)
.then(function (instance) {
let docViewer = instance.docViewer;
let annotManager = instance.annotManager;
annotManager.on('annotationChanged',
(annots, action, e) => {
if (e.imported) return;
annotManager.exportAnnotations({
links: false,
widgets: false,
annotList: annots
}).then(function (xfdfStrings) {
annots.forEach(function (annot) {
if (action === "delete") {
deleteAnnotation(annot.mu);
} else {
saveAnnotation(annot.mu, xfdfStrings);
}
});
if (action === "add") {
annotManager.selectAnnotation(annots[0]);
if (annots[0] !== 'Comment') {
// to open comment box
document.getElementById('viewer').childNodes[0].contentWindow.document.querySelector
('div[data element="annotationCommentButton"]').click();
}
}
});
});
});
let saveAnnotation = function (annotationId, annotationXfdf) {
let saveAnnotationUrl = '';
if (fromExtension) {
saveAnnotationUrl = YOUR_PROJECT_URL/annotations/${annotationId};
} else {
saveAnnotationUrl = YOUR_PROJECT_URL/annotations/${annotationId};
}
$.ajax({
url: saveAnnotationUrl,
type: 'POST',
data: {annotation: annotationXfdf},
success: function (result) {
console.log(result);
},
error: function (result) {
console.log(result);
}
});
};
let deleteAnnotation = function (annotationId) {
let deleteAnnotationUrl = '';
if (fromExtension) {
deleteAnnotationUrl = YOUR_PROJECT_URL/annotations/${annotationId};
} else {
deleteAnnotationUrl = YOUR_PROJECT_URL/annotations/${annotationId};
}
$.ajax({
url: deleteAnnotationUrl,
type: 'DELETE',
success: function (result) {
console.log(result);
},
error: function (result) {
console.log(result);
}
});
};