Add Wikipedia extract to Page

[shabegom]

✂️ Copy of your #42SmartBlock from Roam

- #42SmartBlock Wiki Page
    - <%NOBLOCKOUTPUT%><%CURRENTPAGENAME:title%><%SET:wikiData,<%JAVASCRIPTASYNC:return await fetch(`https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(title)}`).then(res => res.json()).then(s => JSON.stringify(s))%>%>
    - <%JAVASCRIPT: return JSON.parse(wikiData).thumbnail ? `![](${JSON.parse(wikiData).thumbnail.source})` : 'no thumbnail'%>
    - <%JAVASCRIPT: return JSON.parse(wikiData).extract%>
    - <%JAVASCRIPT: return JSON.parse(wikiData).content_urls.desktop.page%><%CURSOR%>

📋 Describe the SmartBlock

I love David Vargas' Wiki Data extension: https://roamjs.com/docs/extensions/wiki-data

I typically find myself adding the Wikipedia extract to my pages as a sort of definition. This SmartBlock grabs the Wikipedia extract based on the page title and adds it, along with the image and url from Wikipedia to the page.

Example:

✅ Describe any prerequisites or dependencies that are required for this SmartBlock

I've chosen to store this data in roam42.smartBlocks.wikiData to sort of namespace the data instead of attaching it to the window or document object. I'm not sure this is a best practice, or if there is a better place to store the return from the API.

This SmartBlock will fail if there is no Wikipedia article for that page. for example: https://en.wikipedia.org/api/rest_v1/page/summary/Smart%20Block%20Testing will throw an error and nothing will be returned to the page. I haven't done anything to guard against missing data, so it is possible some of the returns will be undefined.

📷 Screenshot of your #42SmartBlock workflow/template from Roam

[shabegom]

here's a version that fetches a random wiki article:

• #42SmartBlock Random Wiki
  • <%NOBLOCKOUTPUT%><%JAVASCRIPTASYNC: javascript await fetch('https://en.wikipedia.org/w/api.php?action=query&list=random&format=json&rnnamespace=0&origin=*&rnlimit=1') .then(res => res.json()) .then(data => data.query.random[0].title) .then(async (title) => { return roam42.smartBlocks.activeWorkflow.vars.randomWiki = await fetch(`https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURI(title)}`).then(res => res.json()) })%>
  • <%JAVASCRIPT: return roam42.smartBlocks.activeWorkflow.vars.randomWiki.title%>
    • <%JAVASCRIPT: javascript return roam42.smartBlocks.activeWorkflow.vars.randomWiki.thumbnail ? `![](${roam42.smartBlocks.activeWorkflow.vars.randomWiki.thumbnail.source})` : 'no thumbnail' %>
    • <%JAVASCRIPT: return roam42.smartBlocks.activeWorkflow.vars.randomWiki.extract%>
    • <%JAVASCRIPT: return roam42.smartBlocks.activeWorkflow.vars.randomWiki.content_urls.desktop.page%><%CURSOR%>

[GitMurf]

By Kevin Murray:

This looks promising. I copied the blocks, but I can't get it to work. I can operate other Smartblocks and refreshed just in case. I've matched the page and Wiki title, tried those with and without images. Is there any other special condition?
_{View in Slack}

[GitMurf]

By Bill Petro:

<@U01EQGD75M4> I’m with <@U010CKC72R5> I’ve copied it from Github, but cannot get it to fire off. Is the proper approach:
;;Wiki Page Plato
or is it:
;;Wiki Page then Plato?
_{View in Slack}

[GitMurf]

By Sam Morrison:

<@U011K4KUG78> this is meant to grab the page title of the current page you’re on in roam. It then assumes there is a matching article in Wikipedia.

For my Plato example I was on my Page titled “Plato” and ran ;;Wiki Page

I noticed it was failing if there was no thumbnail present and added a guard against that.

_{View in Slack}

[GitMurf]

By Bill Petro:

I didn’t realize I need to be on a Roam page called “Plato”
_{View in Slack}

[GitMurf]

<@U011K4KUG78> <@U010CKC72R5> is this the tweak you were looking for? I have modified it to show a prompt asking for which wiki page you'd like and it defaults to the current page so you can also just get current page by pressing enter (accepting the default) when the prompt appears.

Here is the code:

- #42SmartBlock Wiki Page
    - <%JAVASCRIPTASYNC:
var findWiki = prompt('Enter name of wiki page.',document.title);
roam42.smartBlocks.activeWorkflow.vars["wikiData"] = await fetch(`https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURI(findWiki)}`).then(res => res.json());
return 'Searched for: ' + findWiki;
%>
        - <%JAVASCRIPT: return roam42.smartBlocks.activeWorkflow.vars["wikiData"].thumbnail ? `![](${roam42.smartBlocks.activeWorkflow.vars["wikiData"].thumbnail.source})` : 'no thumbnail'; %>
        - <%JAVASCRIPT: return roam42.smartBlocks.activeWorkflow.vars["wikiData"].extract; %>
        - <%JAVASCRIPT: return roam42.smartBlocks.activeWorkflow.vars["wikiData"].content_urls.desktop.page; %><%CURSOR%>

Here is a screenshot on how it is supposed to look in Roam (notice the "soft" line breaks for multi lines of javascript).

Notice the backticks are in the Javascript but when rendered in Roam it shows as "code" which is grey with my theme. Make sure the backticks are actually in there.

_{View in Slack}

[GitMurf]

Another cool thing about this API for wikipedia is that it will try to find a close page match for you. So with my modification to the SB where you can input a page you want to search for, if you try "ninja turtles" it will actually return the page / results for "Teenage_Mutant_Ninja_Turtles" which is cool! So you don't have to be exact with your search! This is awesome... thanks <@U01EQGD75M4> for building this SB!

_{View in Slack}

[christopheryeo]

Hi everyone,

This code was working fine until I switched to Vivaldi as a browser. Anyone knows why? Here's the error code. I can't seem to determine the error after some time debugging.

• Block threw an error while running: <%NOBLOCKOUTPUT%><%JAVASCRIPTASYNC: roam42.smar...
• Block threw an error while running: <%JAVASCRIPT: return roam42.smartBlocks.wikiDat...
• Block threw an error while running: <%JAVASCRIPT: return roam42.smartBlocks.wikiDat...
• Block threw an error while running: <%JAVASCRIPT: return roam42.smartBlocks.wikiDat...