Citations with Zotero and OpenAire in Volto
Medesan, Alexandru
Addon that uses Volto Slate plugin, that allows user to make citations by referencing documents in Zotero library and OpenAire. Documents from Openaire can be added to Zotero.
 Thank you. So share my screen. Okay. I hope we can see it. Okay. So, Volto add-ons, right? This is an example of another Volto add-on, but you can also call it an add-on to an add-on. What do I mean by this? So, for example, one of the requirements that we had is the ability to reference citations to texts inside what we are writing. And the way we chose to do this is by extending the abilities that Volto slate had. So we have to select a Volto block, a Slate Volto Slate block. So, for example, we write some text, let's say, Best Tea Drink, and the word tea would be the one that we want to show the available citations. Right now what we see is the available formatting options for rich text provided by Volto Slate. The last one is inserted by this Volto add-on that I created based on the Volto footnotes, which is another add-on. On the right, we get a side portal, which is something that is used in Volto Slate. Right now we are seeing available collections in the Zotero Web Library, which is something that I understand is commonly used. It also has a word extension. So, let's look at what the Zotero Web Library has. So, on the left part, we see the collections, and these collections look like folders. And if we go to the library, we see the items, clicking on one of them, we see the available information. These items can be added to the Web Library by multiple ways. We will see later. So, these are some of the information that we will try to show in the app. The way the structure is, these items are associated to collections, but they're not part of collections. So, make sure when you delete one that it will be deleted from the other collection. Okay. Now, on the left, we see the way they are structured. Like I said, they don't actually contain these items, and they can also be nested collection within collection that can also have items inside them apart from collections. As we see, the last ones that we have here in an alphabetical order are the 2020, 2021, and all outside goes. And yeah, this is pretty much the architecture that it is here. Okay. So, we see that we are only requesting 10 right now, since they are not all shown. As you can see, there are more of them. A load more button appears. This button is aware of the list it has, and it will disappear if there are no more results to show, but also it goes the last one we saw earlier. Okay. Now, the nested part. It would be tricky to go through the rabbit hole to see all the nested collections and still remember to go back to each one of them. So, the way we look is we go through the nested, but we go back to the original without loading them again. Right now, we see a combination of both results that are within that collection is a collection that you would represent, but we show the arrow, and they have different behaviors if you click on them. One will show what's inside the other. We can use as a citation. If you click on it, we see metadata, which is publication author available, doi or isb, and if there are. On the top part, we see this is a summary of these information. It's not the exact citation style that we will see, because this is something that the user can change based on some configuration that we will see later. Okay. So, we see it's the exact same one that was in 2019 and has the same information that it's here. We show it there. So, let's use it by clicking the check mark, and the way this is shown. If we click outside, we'll see that there is a light blue background on the word. And if we want to actually see the footnotes that we create, there's another block. It's called footnotes, and this can be dragged and drop whatever, and it will still know what to show in each order. If we save, that's what it looks like. As you can see, the number at which this citation it is, it's the first one. And it also has a popover, which shows the exact style that comes from the Zotero web library. Okay. Now, if we click on it, we see another panel of chases, which are now not the original, they are not the initial from the Volto slate. There are the two things that we can do is either go back to the site panel and edit or remove it. So, let's go through the nested portion. We can go through it. And at one moment, we'll see there are more collections and items here than we show. Again, the little button comes, and it knows that it would get this list and not the original list of collections for the top level collections. Same thing, collections look and behave differently than items. So, let's change the one we had with the new one. Okay. So, how do we do this? How do we get this into our app? So, there's a portion called site setup, where there are two things we need to do. In the site setup add-ons, we need to install the Aizotero, which is in the rest API portion of it. And then the control panel portion of it, which we click will have the information that we need. So, the first thing is basically the ID. We have the whole URL, because maybe in the future we can customize, but that ID, where do we find it, is in the Zotero user account part, which is user ID, we'll be using API calls. Next is the Zotero API key. This key is generated if we click on creating a private key, give it a name, set the desired access level. One thing we need to remember is the Zotero also creates items inside it. So, also check the read-write one. If we press the save key, it will take us to an end screen that will show only once that key that we need to add here. So, Zotero default collection, like I said, we can add things into Zotero through this add-on, and we need to specify what that collection is. Where do we get this? Again, it's in the URL. Every collection in the URL is easy to use. The citation style. So, basically, we don't just write the metadata information that the article has in a one simple way. It's something that is specified that the user should choose its own style. If we go to the Zotero documentation, we see that there is a Zotero style repository. To my surprise, there are about 20,000 styles of citations that you can use. I don't know how big the customization can be for a few data. But yeah, there's a... So, one thing, the E1 wasn't in the list. So, the documentation specifies the Web API with three basics that there's two ways you can do this. Either by name, which is, if you find it in the list I showed before, or URL to remote to remote CSL file. It's what we used. Another thing we can do is other than browsing through the list, we can also search by name. And this search, for example, we want to add coffee to the list of drinks. And we will try to add a citation for the coffee. Again, we click on it, which is the notebook icon. We have the site panel, and we go to the search. So, what we see now after we enter the word that we want to search, it will change. So, we'll no longer see the browsing. We will see a three-tab screen that has two types of results. So, this is everything that is in Zotero that has anything to do with coffee. We see the Zotero logo, and this is the same summary of the most important data in the metadata of the file that if you can expand, we see the most important ones. Okay, journal article, doi, if it's present, and then we can use it. So, let's use this one, see how it looks as we can see. The second one appeared, and they're automatically counted. For example, if we had more, and we chose to delete any one of them, the counting would be rearranged, and each one of them has the popover that shows the exact style that was set up in the counting part. Okay, so, let's look at OpenIR. What is OpenIR? So, we see two kinds of data that we get, publication, and research data, basically, they're types of results. We see the OpenIR logo and the label that says this is the publication, and the others are research data. Okay, so OpenIR is similar to Zotero, but it doesn't look in just in what you have, it looks in everything that it has. And as we can see, we got inspired by the way they show the data here. I think it's very easy if you want to only show, look for the authors, it's very easy to see, or for those or title or stuff like that. On the right, on the left, we will see the available types, which are publications and research data. These are the two that we consider most important to show in our researches, in our search results. So, let's take this one, let's use this one. First, we will try to see if it already is in the Zotero. We will see why. So, at the moment, it isn't. We're going to use it, and why this is important, because we can see we get successful added to Zotero. So, the thing is, if we want Zotero to give us the desired style that we specified, it is the EA way, we need to add it to Zotero. So, right now, it has been added. If we search for it, we will see it, and it's the exact same that we wanted to add. The citations is, the citation is updated with the desired citation, and right now we look for it. As I said, it's in that collection where everything outside goes, and it's the first one. Another thing, if we look for it again, just by the T, not by the name of the author, we will see it's not in the first 10, so we need to load more. Okay, maybe it's here. It's not. So, yeah, it's the second to last. This is the one that we added. Another thing is, the Zotero results of the priority, we don't want to add open IE results, open and over to Zotero. So, if it would have, if these results would come through open IE, then they will be taken out of the list and only keep those rings of the Zotero. This tab shows everything. The two results come by. We can filter the type of results, which is a simple slice. No requests are done for taking them out or putting them back in. If a research doesn't show any results, we'll show this nice message that I think in the future will be customizable through a similar way like the other covering creations were done in the control panel. Yeah. Okay, let's put them back in. So, the load more is here again. And again, it knows, as we can see, this is a long scroll bar, because it has only 10 results. We go here, we load more data. It's shortened because both of the types are getting requested, but there's a Zotero ones. We go. It's only 10. So, it's again, aware of where it is and which listing is to scroll also. It didn't go back to the top. So, you miss your position. It keeps it there. It's not some magic. It's a simple slice of the array stuff. Okay, so let's add some text to see. So, the popover here comes into play. If you have a lot of text and you want to see what is the reference there, you can just scroll it. Another thing is you can also, so let's, yeah, it takes you to the citation. Also, it is highlighted yellow and that small arrow at the back, it will take you to where that citation is, which is, yeah, it's the correct one. Okay. Search for doi. This is, this is again something else that we can do, not just search by name, which would give multiple results, but search by doi, which ideally should return one. Maybe some buggy will return more because of if it's already in Zotero and also shows the one in, okay, so the one we got is nothing Zotero. It is only in open air. It worked. It's, yeah. Okay, let's use it. It changed. So, let's do something a bit more difficult. Let's add another one. So, I understood that there are people that could use just pasting there some, maybe two arrays and maybe add some text depending on what copy paste they did. Let's see if this works. It also works. It shows the two, it's basically some very good regex that I found that extracts the doi from the text and it only searches for them. This functionality is not yet perfect, but yeah, based on some feedback that we will receive, we should know if there's need to improve it more. Okay. Yeah, so the one we added is in the collection that where everything that is outside of Zotero goes. So, something that we can make and also remove the citation. So, we remove it, the decoration disappears and the numbering is corrected. Yeah, it's only one. So, we can delete this block and some users might want to do this because there's too much text and they can also see the citations here. It's enough for them. That's okay. But if you want to add them, it just automatically comes back and it knows what to show and it works. Yeah. Okay, so we also have notations. It's something that Aline mentioned. My version would be a notational steroids, which is a citation. So what's the difference? Well, for starters, it's another icon that you have to press. It uses some of the same functionality, but you can you can see notations that not the citations but those footnotes that the author writes for clarifications or, I don't know, some synonyms for some words or something like that. But it gets integrated with the footnotes. It looks the same as a popover and the numbering is taken into consideration also on the footnotes block. Okay, resources. This is found that GitHub in the EA repo. And there are two ways to use this either you want to just add the plugin, which is described here, you can see uses the new yeoman way of doing it. You can see the add-ons, the dependencies, or if you want to contribute to it, you can go to develop and see there how to do this. You need to install Mrs. Developer. This is one version just that the Mrs. Developer with the informations described there. And it will appear in the sources inside the add-ons folder. And you can go in your terminal there and you can get check or commit. Next, the Zotero API. Take a short look there in the documentation. We see that there are some things already provided. And the getting pulled, yes. How to use the API. So they created some client libraries, PHP Objective C Python. We are using the, since it's JavaScript, we are using the Web API, which has a lot less data than those applications. It's not as powerful, but it was enough for us to add and to get the add items and collections that we need. One thing, it's interesting, they have collections and top collections. So if you want to see the order as I did, we have to get the top otherwise, their alphabetical order is not what you'd expect. Another thing is the total results is something that comes inside the response headers. So if you want to show that, you need to intercept it before you get JSON. Open IEAR also has a way to develop. So this is where you get the APIs and what you can do with them. Sort by search by doys, so search by publication ID type. So this is most of what I've used. The total results are in the JSON. Okay, so this has been my presentation. Thanks for watching. Thanks. That was really impressive. All the care that you took in the interactions and all the use cases. I mean, it's, it's beautiful. And I can see in the Slack, there's a lot of people paying attention and I think a lot of people are going to steal this code and hopefully contribute to it right. Yeah, it's still need some work, but we'll get there. One question I see in the Slido. Armin was asking, where are the markdown shortcuts coming from markdown shortcuts. Can he explain it a bit. Do you mean the situation, the XML for the citations. So although he may be able to clarify what he meant in the face to face. So maybe let's join in the face to face. So everyone who's watching, please use the blue button below the video in your loud swarm page and you can talk to Alex some more and ask him the questions directly. And I really appreciate your showing us this this is yet more encouragement for everyone in the plum community to start moving over to the photo and work. Thank you.
 Thank you. So share my screen. Okay. I hope we can see it. Okay. So, Volto add-ons, right?  This is an example of another Volto add-on, but you can also call it an add-on to an add-on.  What do I mean by this? So, for example, one of the requirements that we had is the ability to  reference citations to texts inside what we are writing. And the way we chose to do this is by  extending the abilities that Volto slate had. So we have to select a Volto block, a Slate Volto  Slate block. So, for example, we write some text, let's say, Best Tea Drink, and the word tea would  be the one that we want to show the available citations. Right now what we see is the available  formatting options for rich text provided by Volto Slate. The last one is inserted by this  Volto add-on that I created based on the Volto footnotes, which is another add-on.  On the right, we get a side portal, which is something that is used in Volto Slate.  Right now we are seeing available collections in the Zotero Web Library, which is something  that I understand is commonly used. It also has a word extension. So,  let's look at what the Zotero Web Library has.  So, on the left part, we see the collections, and these collections look like folders. And if we go  to the library, we see the items, clicking on one of them, we see the available information.  These items can be added to the Web Library by multiple ways. We will see later. So, these are  some of the information that we will try to show in the app. The way the structure is, these items  are associated to collections, but they're not part of collections. So, make sure when you delete  one that it will be deleted from the other collection. Okay. Now, on the left, we see the way they are  structured. Like I said, they don't actually contain these items, and they can also be  nested collection within collection that can also have items inside them apart from collections.  As we see, the last ones that we have here in an alphabetical order are the 2020, 2021,  and all outside goes. And yeah, this is pretty much the architecture that it is here.  Okay. So, we see that we are only requesting 10 right now, since they are not all shown.  As you can see, there are more of them. A load more button appears. This button is aware of the list  it has, and it will disappear if there are no more results to show, but also it goes the last one  we saw earlier. Okay. Now, the nested part. It would be tricky to go through the rabbit hole to  see all the nested collections and still remember to go back to each one of them. So, the way we  look is we go through the nested, but we go back to the original without loading them again.  Right now, we see a combination of both results that are within that collection is a collection  that you would represent, but we show the arrow, and they have different behaviors if you click on  them. One will show what's inside the other. We can use as a citation. If you click on it, we see  metadata, which is publication author available, doi or isb, and if there are. On the top part,  we see this is a summary of these information. It's not the exact citation style that we will see,  because this is something that the user can change based on some configuration that we will see later.  Okay. So, we see it's the exact same one that was in 2019 and has the same information that  it's here. We show it there. So, let's use it by clicking the check mark, and the way this is shown.  If we click outside, we'll see that there is a light blue background on the word. And if we want  to actually see the footnotes that we create, there's another block. It's called footnotes,  and this can be dragged and drop whatever, and it will still know what to show in each order.  If we save, that's what it looks like. As you can see, the number at which this  citation it is, it's the first one. And it also has a popover, which shows the exact style that  comes from the Zotero web library. Okay. Now, if we click on it, we see another  panel of chases, which are now not the original, they are not the initial from the Volto slate.  There are the two things that we can do is either go back to the site panel and edit or remove it.  So, let's go through the nested portion. We can go through it. And at one moment, we'll see there are  more collections and items here than we show. Again, the little button comes, and it knows that it  would get this list and not the original list of collections for the top level collections.  Same thing, collections look and behave differently than items. So, let's change  the one we had with the new one. Okay. So, how do we do this? How do we get this into our app?  So, there's a portion called site setup, where there are two things we need to do. In the  site setup add-ons, we need to install the Aizotero, which is in the rest API portion of it.  And then the control panel portion of it, which we click will have the information that we need.  So, the first thing is basically the ID. We have the whole URL, because maybe in the future we can  customize, but that ID, where do we find it, is in the Zotero user account part, which is user ID,  we'll be using API calls. Next is the Zotero API key. This key is generated if we click on  creating a private key, give it a name, set the desired access level. One thing we need to remember  is the Zotero also creates items inside it. So, also check the read-write one. If we press the  save key, it will take us to an end screen that will show only once that key that we need to add here.  So, Zotero default collection, like I said, we can add things into Zotero through this add-on,  and we need to specify what that collection is. Where do we get this? Again, it's in the URL. Every  collection in the URL is easy to use. The citation style. So, basically, we don't just write the  metadata information that the article has in a one simple way. It's something that is specified  that the user should choose its own style. If we go to the Zotero documentation, we see that there  is a Zotero style repository. To my surprise, there are about 20,000 styles of citations that  you can use. I don't know how big the customization can be for a few data. But yeah, there's a...  So, one thing, the E1 wasn't in the list. So, the documentation specifies the Web API  with three basics that there's two ways you can do this. Either by name, which is, if you find it  in the list I showed before, or URL to remote to remote CSL file. It's what we used.  Another thing we can do is other than browsing through the list, we can also search by name.  And this search, for example, we want to add coffee to the list of drinks. And we will try to add a  citation for the coffee. Again, we click on it, which is the notebook icon. We have the site panel,  and we go to the search. So, what we see now after we enter the word that we want to search,  it will change. So, we'll no longer see the browsing. We will see a three-tab screen that  has two types of results. So, this is everything that is in Zotero that has anything to do with coffee.  We see the Zotero logo, and this is the same summary of the most important data in the metadata of  the file that if you can expand, we see the most important ones. Okay, journal article,  doi, if it's present, and then we can use it. So, let's use this one, see how it looks as we can see.  The second one appeared, and they're automatically counted. For example, if we had more, and we  chose to delete any one of them, the counting would be rearranged, and each one of them has the  popover that shows the exact style that was set up in the counting part. Okay, so,  let's look at OpenIR. What is OpenIR? So, we see two kinds of data that we get, publication,  and research data, basically, they're types of results. We see the OpenIR logo and the label  that says this is the publication, and the others are research data. Okay, so OpenIR is similar to Zotero,  but it doesn't look in just in what you have, it looks in everything that it has. And as we can see,  we got inspired by the way they show the data here. I think it's very easy if you want to only show,  look for the authors, it's very easy to see, or for those or title or stuff like that. On the right,  on the left, we will see the available types, which are publications and research data. These are  the two that we consider most important to show in our researches, in our search results. So, let's  take this one, let's use this one. First, we will try to see if it already is in the Zotero. We will  see why. So, at the moment, it isn't. We're going to use it, and why this is important, because we  can see we get successful added to Zotero. So, the thing is, if we want Zotero to give us the  desired style that we specified, it is the EA way, we need to add it to Zotero. So, right now, it has  been added. If we search for it, we will see it, and it's the exact same that we wanted to add.  The citations is, the citation is updated with the desired citation, and right now we look for  it. As I said, it's in that collection where everything outside goes, and it's the first one.  Another thing, if we look for it again, just by the T, not by the name of the author, we will see  it's not in the first 10, so we need to load more. Okay, maybe it's here. It's not. So,  yeah, it's the second to last. This is the one that we added. Another thing is, the Zotero results  of the priority, we don't want to add open IE results, open and over to Zotero. So, if it would  have, if these results would come through open IE, then they will be taken out of the list and  only keep those rings of the Zotero. This tab shows everything. The two results come by.  We can filter the type of results, which is a simple slice. No requests are done for taking them out  or putting them back in. If a research doesn't show any results, we'll show this nice message that  I think in the future will be customizable through a similar way like the other  covering creations were done in the control panel. Yeah. Okay, let's put them back in.  So, the load more is here again. And again, it knows, as we can see, this is a long scroll bar,  because it has only 10 results. We go here, we load more data. It's shortened because both of the  types are getting requested, but there's a Zotero ones. We go. It's only 10. So, it's again, aware  of where it is and which listing is to scroll also. It didn't go back to the top. So, you miss  your position. It keeps it there. It's not some magic. It's a simple slice of the array stuff.  Okay, so let's add some text to see. So, the popover here comes into play. If you have a lot of  text and you want to see what is the reference there, you can just scroll it. Another thing is you  can also, so let's, yeah, it takes you to the citation. Also, it is highlighted yellow and that  small arrow at the back, it will take you to where that citation is, which is, yeah, it's the correct  one. Okay. Search for doi. This is, this is again something else that we can do, not just search  by name, which would give multiple results, but search by doi, which ideally should return one. Maybe  some buggy will return more because of if it's already in Zotero and also shows the one in, okay, so the one  we got is nothing Zotero. It is only in open air. It worked. It's, yeah. Okay, let's use it.  It changed. So, let's do something a bit more difficult.  Let's add another one. So, I understood that there are people that could use just pasting there some,  maybe two arrays and maybe add some text depending on what copy paste they did. Let's see if this works.  It also works. It shows the two, it's basically some very good regex that I found that extracts the doi from the text  and it only searches for them. This functionality is not yet perfect, but yeah, based on some feedback that we will  receive, we should know if there's need to improve it more. Okay.  Yeah, so the one we added is in the collection that where everything that is outside of Zotero goes.  So, something that we can make and also remove the citation.  So, we remove it, the decoration disappears and the numbering is corrected.  Yeah, it's only one.  So, we can delete this block and some users might want to do this because there's too much text and they can also see the citations here.  It's enough for them. That's okay. But if you want to add them, it just automatically comes back and it knows what to show and it works.  Yeah.  Okay, so we also have notations. It's something that Aline mentioned.  My version would be a notational steroids, which is a citation. So what's the difference? Well, for starters, it's another icon that you have to press.  It uses some of the same functionality, but you can you can see notations that not the citations but those footnotes that the author writes for clarifications or, I don't know,  some synonyms for some words or something like that. But it gets integrated with the footnotes. It looks the same as a popover and the numbering is taken into consideration also on the footnotes block.  Okay, resources. This is found that GitHub in the EA repo.  And there are two ways to use this either you want to just add the plugin, which is described here, you can see uses the new yeoman way of doing it.  You can see the add-ons, the dependencies, or if you want to contribute to it, you can go to develop  and see there how to do this. You need to install Mrs. Developer. This is one version just that the Mrs. Developer with the informations described there.  And it will appear in the sources inside the add-ons folder. And you can go in your terminal there and you can get check or commit.  Next, the Zotero API. Take a short look there in the documentation. We see that there are some things already provided.  And the getting pulled, yes. How to use the API. So they created some client libraries, PHP Objective C Python. We are using the, since it's JavaScript, we are using the Web API, which has a lot less data than those applications.  It's not as powerful, but it was enough for us to add and to get the add items and collections that we need.  One thing, it's interesting, they have collections and top collections. So if you want to see the order as I did, we have to get the top otherwise, their alphabetical order is not what you'd expect.  Another thing is the total results is something that comes inside the response headers. So if you want to show that, you need to intercept it before you get JSON.  Open IEAR also has a way to develop.  So this is where you get the APIs and what you can do with them.  Sort by search by doys, so search by publication ID type. So this is most of what I've used.  The total results are in the JSON.  Okay, so this has been my presentation.  Thanks for watching.  Thanks. That was really impressive. All the care that you took in the interactions and all the use cases. I mean, it's, it's beautiful.  And I can see in the Slack, there's a lot of people paying attention and I think a lot of people are going to steal this code and hopefully contribute to it right.  Yeah, it's still need some work, but we'll get there.  One question I see in the Slido.  Armin was asking, where are the markdown shortcuts coming from markdown shortcuts.  Can he explain it a bit.  Do you mean the situation, the XML for the citations.  So although he may be able to clarify what he meant in the face to face. So maybe let's join in the face to face. So everyone who's watching, please use the blue button below the video in your loud swarm page and you can talk to Alex some more and ask him the questions directly.  And I really appreciate your showing us this this is yet more encouragement for everyone in the plum community to start moving over to the photo and work. Thank you.
Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_0_275.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_276_455.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_456_1139.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_1140_1451.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_1452_1631.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_1632_1835.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_1836_2507.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_2508_6959.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_6960_7727.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_7728_8051.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_8052_8555.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_8556_16319.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_16320_17327.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_17328_20879.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_20880_24971.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_24972_25463.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_25464_29471.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_29472_30419.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_30420_31751.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_31752_34019.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_34020_34727.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_34728_35291.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_35292_38159.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_38160_39035.png Citations_with_Zotero_and_OpenAire_in_Volto_-_Alex_n6svg2v7yFI_39036_40101.png
Thank you. So share my screen. Okay. I hope we can see it. Okay. So, Volto add-ons, right? This is an example of another Volto add-on, but you can also call it an add-on to an add-on. What do I mean by this? So, for example, one of the requirements that we had is the ability to reference citations to texts inside what we are writing. And the way we chose to do this is by extending the abilities that Volto slate had. So we have to select a Volto block, a Slate Volto Slate block. So, for example, we write some text, let's say, Best Tea Drink, and the word tea would be the one that we want to show the available citations. Right now what we see is the available formatting options for rich text provided by Volto Slate. The last one is inserted by this Volto add-on that I created based on the Volto footnotes, which is another add-on. On the right, we get a side portal, which is something that is used in Volto Slate. Right now we are seeing available collections in the Zotero Web Library, which is something that I understand is commonly used. It also has a word extension. So, let's look at what the Zotero Web Library has. So, on the left part, we see the collections, and these collections look like folders. And if we go to the library, we see the items, clicking on one of them, we see the available information. These items can be added to the Web Library by multiple ways. We will see later. So, these are some of the information that we will try to show in the app. The way the structure is, these items are associated to collections, but they're not part of collections. So, make sure when you delete one that it will be deleted from the other collection. Okay. Now, on the left, we see the way they are structured. Like I said, they don't actually contain these items, and they can also be nested collection within collection that can also have items inside them apart from collections. As we see, the last ones that we have here in an alphabetical order are the 2020, 2021, and all outside goes. And yeah, this is pretty much the architecture that it is here. Okay. So, we see that we are only requesting 10 right now, since they are not all shown. As you can see, there are more of them. A load more button appears. This button is aware of the list it has, and it will disappear if there are no more results to show, but also it goes the last one we saw earlier. Okay. Now, the nested part. It would be tricky to go through the rabbit hole to see all the nested collections and still remember to go back to each one of them. So, the way we look is we go through the nested, but we go back to the original without loading them again. Right now, we see a combination of both results that are within that collection is a collection that you would represent, but we show the arrow, and they have different behaviors if you click on them. One will show what's inside the other. We can use as a citation. If you click on it, we see metadata, which is publication author available, doi or isb, and if there are. On the top part, we see this is a summary of these information. It's not the exact citation style that we will see, because this is something that the user can change based on some configuration that we will see later. Okay. So, we see it's the exact same one that was in 2019 and has the same information that it's here. We show it there. So, let's use it by clicking the check mark, and the way this is shown. If we click outside, we'll see that there is a light blue background on the word. And if we want to actually see the footnotes that we create, there's another block. It's called footnotes, and this can be dragged and drop whatever, and it will still know what to show in each order. If we save, that's what it looks like. As you can see, the number at which this citation it is, it's the first one. And it also has a popover, which shows the exact style that comes from the Zotero web library. Okay. Now, if we click on it, we see another panel of chases, which are now not the original, they are not the initial from the Volto slate. There are the two things that we can do is either go back to the site panel and edit or remove it. So, let's go through the nested portion. We can go through it. And at one moment, we'll see there are more collections and items here than we show. Again, the little button comes, and it knows that it would get this list and not the original list of collections for the top level collections. Same thing, collections look and behave differently than items. So, let's change the one we had with the new one. Okay. So, how do we do this? How do we get this into our app? So, there's a portion called site setup, where there are two things we need to do. In the site setup add-ons, we need to install the Aizotero, which is in the rest API portion of it. And then the control panel portion of it, which we click will have the information that we need. So, the first thing is basically the ID. We have the whole URL, because maybe in the future we can customize, but that ID, where do we find it, is in the Zotero user account part, which is user ID, we'll be using API calls. Next is the Zotero API key. This key is generated if we click on creating a private key, give it a name, set the desired access level. One thing we need to remember is the Zotero also creates items inside it. So, also check the read-write one. If we press the save key, it will take us to an end screen that will show only once that key that we need to add here. So, Zotero default collection, like I said, we can add things into Zotero through this add-on, and we need to specify what that collection is. Where do we get this? Again, it's in the URL. Every collection in the URL is easy to use. The citation style. So, basically, we don't just write the metadata information that the article has in a one simple way. It's something that is specified that the user should choose its own style. If we go to the Zotero documentation, we see that there is a Zotero style repository. To my surprise, there are about 20,000 styles of citations that you can use. I don't know how big the customization can be for a few data. But yeah, there's a... So, one thing, the E1 wasn't in the list. So, the documentation specifies the Web API with three basics that there's two ways you can do this. Either by name, which is, if you find it in the list I showed before, or URL to remote to remote CSL file. It's what we used. Another thing we can do is other than browsing through the list, we can also search by name. And this search, for example, we want to add coffee to the list of drinks. And we will try to add a citation for the coffee. Again, we click on it, which is the notebook icon. We have the site panel, and we go to the search. So, what we see now after we enter the word that we want to search, it will change. So, we'll no longer see the browsing. We will see a three-tab screen that has two types of results. So, this is everything that is in Zotero that has anything to do with coffee. We see the Zotero logo, and this is the same summary of the most important data in the metadata of the file that if you can expand, we see the most important ones. Okay, journal article, doi, if it's present, and then we can use it. So, let's use this one, see how it looks as we can see. The second one appeared, and they're automatically counted. For example, if we had more, and we chose to delete any one of them, the counting would be rearranged, and each one of them has the popover that shows the exact style that was set up in the counting part. Okay, so, let's look at OpenIR. What is OpenIR? So, we see two kinds of data that we get, publication, and research data, basically, they're types of results. We see the OpenIR logo and the label that says this is the publication, and the others are research data. Okay, so OpenIR is similar to Zotero, but it doesn't look in just in what you have, it looks in everything that it has. And as we can see, we got inspired by the way they show the data here. I think it's very easy if you want to only show, look for the authors, it's very easy to see, or for those or title or stuff like that. On the right, on the left, we will see the available types, which are publications and research data. These are the two that we consider most important to show in our researches, in our search results. So, let's take this one, let's use this one. First, we will try to see if it already is in the Zotero. We will see why. So, at the moment, it isn't. We're going to use it, and why this is important, because we can see we get successful added to Zotero. So, the thing is, if we want Zotero to give us the desired style that we specified, it is the EA way, we need to add it to Zotero. So, right now, it has been added. If we search for it, we will see it, and it's the exact same that we wanted to add. The citations is, the citation is updated with the desired citation, and right now we look for it. As I said, it's in that collection where everything outside goes, and it's the first one. Another thing, if we look for it again, just by the T, not by the name of the author, we will see it's not in the first 10, so we need to load more. Okay, maybe it's here. It's not. So, yeah, it's the second to last. This is the one that we added. Another thing is, the Zotero results of the priority, we don't want to add open IE results, open and over to Zotero. So, if it would have, if these results would come through open IE, then they will be taken out of the list and only keep those rings of the Zotero. This tab shows everything. The two results come by. We can filter the type of results, which is a simple slice. No requests are done for taking them out or putting them back in. If a research doesn't show any results, we'll show this nice message that I think in the future will be customizable through a similar way like the other covering creations were done in the control panel. Yeah. Okay, let's put them back in. So, the load more is here again. And again, it knows, as we can see, this is a long scroll bar, because it has only 10 results. We go here, we load more data. It's shortened because both of the types are getting requested, but there's a Zotero ones. We go. It's only 10. So, it's again, aware of where it is and which listing is to scroll also. It didn't go back to the top. So, you miss your position. It keeps it there. It's not some magic. It's a simple slice of the array stuff. Okay, so let's add some text to see. So, the popover here comes into play. If you have a lot of text and you want to see what is the reference there, you can just scroll it. Another thing is you can also, so let's, yeah, it takes you to the citation. Also, it is highlighted yellow and that small arrow at the back, it will take you to where that citation is, which is, yeah, it's the correct one. Okay. Search for doi. This is, this is again something else that we can do, not just search by name, which would give multiple results, but search by doi, which ideally should return one. Maybe some buggy will return more because of if it's already in Zotero and also shows the one in, okay, so the one we got is nothing Zotero. It is only in open air. It worked. It's, yeah. Okay, let's use it. It changed. So, let's do something a bit more difficult. Let's add another one. So, I understood that there are people that could use just pasting there some, maybe two arrays and maybe add some text depending on what copy paste they did. Let's see if this works. It also works. It shows the two, it's basically some very good regex that I found that extracts the doi from the text and it only searches for them. This functionality is not yet perfect, but yeah, based on some feedback that we will receive, we should know if there's need to improve it more. Okay. Yeah, so the one we added is in the collection that where everything that is outside of Zotero goes. So, something that we can make and also remove the citation. So, we remove it, the decoration disappears and the numbering is corrected. Yeah, it's only one. So, we can delete this block and some users might want to do this because there's too much text and they can also see the citations here. It's enough for them. That's okay. But if you want to add them, it just automatically comes back and it knows what to show and it works. Yeah. Okay, so we also have notations. It's something that Aline mentioned. My version would be a notational steroids, which is a citation. So what's the difference? Well, for starters, it's another icon that you have to press. It uses some of the same functionality, but you can you can see notations that not the citations but those footnotes that the author writes for clarifications or, I don't know, some synonyms for some words or something like that. But it gets integrated with the footnotes. It looks the same as a popover and the numbering is taken into consideration also on the footnotes block. Okay, resources. This is found that GitHub in the EA repo. And there are two ways to use this either you want to just add the plugin, which is described here, you can see uses the new yeoman way of doing it. You can see the add-ons, the dependencies, or if you want to contribute to it, you can go to develop and see there how to do this. You need to install Mrs. Developer. This is one version just that the Mrs. Developer with the informations described there. And it will appear in the sources inside the add-ons folder. And you can go in your terminal there and you can get check or commit. Next, the Zotero API. Take a short look there in the documentation. We see that there are some things already provided. And the getting pulled, yes. How to use the API. So they created some client libraries, PHP Objective C Python. We are using the, since it's JavaScript, we are using the Web API, which has a lot less data than those applications. It's not as powerful, but it was enough for us to add and to get the add items and collections that we need. One thing, it's interesting, they have collections and top collections. So if you want to see the order as I did, we have to get the top otherwise, their alphabetical order is not what you'd expect. Another thing is the total results is something that comes inside the response headers. So if you want to show that, you need to intercept it before you get JSON. Open IEAR also has a way to develop. So this is where you get the APIs and what you can do with them. Sort by search by doys, so search by publication ID type. So this is most of what I've used. The total results are in the JSON. Okay, so this has been my presentation. Thanks for watching. Thanks. That was really impressive. All the care that you took in the interactions and all the use cases. I mean, it's, it's beautiful. And I can see in the Slack, there's a lot of people paying attention and I think a lot of people are going to steal this code and hopefully contribute to it right. Yeah, it's still need some work, but we'll get there. One question I see in the Slido. Armin was asking, where are the markdown shortcuts coming from markdown shortcuts. Can he explain it a bit. Do you mean the situation, the XML for the citations. So although he may be able to clarify what he meant in the face to face. So maybe let's join in the face to face. So everyone who's watching, please use the blue button below the video in your loud swarm page and you can talk to Alex some more and ask him the questions directly. And I really appreciate your showing us this this is yet more encouragement for everyone in the plum community to start moving over to the photo and work. Thank you.
Volto Slate. The last one is inserted by this items can be added to the Web Library by multiple everything that is in Zotero that has anything to