Skip to content

Commit

Permalink
Merge branch 'Dev-Mehta-main'
Browse files Browse the repository at this point in the history
  • Loading branch information
@ncase
ncase committed Oct 11, 2024
2 parents f54b7cd + 37fccc0 commit f83beae
Show file tree
Hide file tree
Showing 4 changed files with 292 additions and 13 deletions.
9 changes: 6 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ <h1 id="toc_0">: What is Nutshell?</h1>

<p>But why not links? Well, unlike links, Nutshell lets you include <em>only</em> the snippet you need, not the whole page. And instead of a jungle of new tabs, your reader stays on one page, keeping their flow of reading. Even if you <a href="#Interruption">:interrupt a sentence</a>, Nutshell recaps the sentence afterwards, so your reader never loses context.</p>

<p><em>But wait, there&#39;s more!</em> It&#39;s not just text &amp; pictures you can embed! You can also embed <a href="indexpage/malicious.html#InteractivePlay">:interactive playthings</a>, <a href="https://www.youtube.com/watch?v=i_RLYSaPvak">:YouTube videos</a>, and – hey, why not – <a href="https://en.wikipedia.org/wiki/Catgirl">:Wikipedia articles</a>. (That includes <a href="https://fr.wikipedia.org/wiki/Baguette_(pain)">:other languages</a> and <a href="https://simple.wikipedia.org/wiki/Universe">:Simple Wikipedia</a>, too!)</p>
<p><em>But wait, there&#39;s more!</em> It&#39;s not just text &amp; pictures you can embed! You can also embed <a href="indexpage/malicious.html#InteractivePlay">:interactive playthings</a>, <a href="https://www.youtube.com/watch?v=i_RLYSaPvak">:YouTube videos</a>, and – hey, why not – <a href="https://en.wikipedia.org/wiki/Chicago_rat_hole">:Wikipedia articles</a>. (That includes <a href="https://fr.wikipedia.org/wiki/Baguette_(pain)">:other languages</a> and <a href="https://simple.wikipedia.org/wiki/Universe">:Simple Wikipedia</a>, too!)</p>

<p>So: whether you&#39;re writing a blog, a news article, a glossary, educational material, code documentation, etc... I hope Nutshell helps you help <em>your</em> readers.</p>

Expand Down Expand Up @@ -165,13 +165,15 @@ <h1 id="toc_4">: Who made this?</h1>

<iframe src='https://ncase.me/thanks/aug2022.html?credits=1&v=2' width='750px' height='400px'></iframe>

<p>If you&#39;d like to help Nicky keep making free educational stuff &amp; talking about themselves in the third person, dispose of your disposable cash <strong><a href="https://www.patreon.com/ncase">on their Patreon!</a></strong></p>
<p>If you&#39;d like to help Nicky keep making free educational stuff &amp; talking about themselves in the third person, dispose of your disposable cash <strong><a href="https://www.patreon.com/ncase">on her Patreon!</a></strong></p>

<p>But seriously, thank you to everyone above. I appreciate y&#39;all.</p>

<p>🥜,<br>
~ Nicky Case</p>

<p><strong>Update Oct 11, 2024:</strong> Also thank you to <strong><a href="https://github.com/Dev-Mehta">Dev Mehta</a></strong> for adding the ability to use Nutshell on <em>specific</em> Wikipedia sub-sections, and with recursive expandable links! Like so — <a href="https://en.wikipedia.org/wiki/Binary_number#Addition">: Binary Addition</a></p>

<h2 id="toc_5">: Recursion</h2>

<p><img src="indexpage/sprites/recursion.gif" data-float="left" width="200"/></p>
Expand Down Expand Up @@ -268,7 +270,7 @@ <h2 id="toc_17">: Nicky Case</h2>

<p><img src="indexpage/sprites/nicky.png" data-float="left" width="200"/></p>

<p>Nicky Case is an internet person who explains stuff with games, &quot;games&quot;, and pictures with words. See what they&#39;ve wrought upon humanity at <a href="https://ncase.me">ncase.me</a>.</p>
<p>Nicky Case is an internet person who explains stuff with games, &quot;games&quot;, and pictures with words. See what she hath wrought at <a href="https://ncase.me">ncase.me</a>.</p>

<h2 id="toc_18">: Open Source</h2>

Expand All @@ -278,5 +280,6 @@ <h2 id="toc_18">: Open Source</h2>

<p>** One common requirement is &quot;give credit&quot;. Fair enough. Some open source licenses go further: they require that your remix <em>also</em> be published under the same license. These are called <strong>copyleft</strong> licenses. Licenses without that requirement are called <strong>permissive</strong> licenses.</p>


</body>
</html>
73 changes: 66 additions & 7 deletions nutshell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
██║░╚███║╚██████╔╝░░░██║░░░██████╔╝██║░░██║███████╗███████╗███████╗
╚═╝░░╚══╝░╚═════╝░░░░╚═╝░░░╚═════╝░╚═╝░░╚═╝╚══════╝╚══════╝╚══════╝
v1.0.7 - "Baby's First XSS Vulnerability"
v1.0.8 - "Recursive Wikipedia Rabbithole"
( NOTE TO SELF: When updating version, remember to edit... )
( this js file's "Nutshell.version", include_nutshell.js )
Expand Down Expand Up @@ -127,7 +127,7 @@ Bubble: the box that expands below an expandable, containing a Nutshell Section
window.Nutshell = {};

// Version! & CDN
Nutshell.version = 'v1.0.7';
Nutshell.version = 'v1.0.8';
//Nutshell.cdn = `https://cdn.jsdelivr.net/gh/ncase/nutshell@${Nutshell.version}/nutshell.js`;
Nutshell.cdn = `https://cdn.jsdelivr.net/gh/ncase/nutshell/nutshell.js`;

Expand Down Expand Up @@ -841,7 +841,7 @@ Bubble: the box that expands below an expandable, containing a Nutshell Section
Nutshell.promisePurifiedHTMLFromURL = (url)=>{

// A promise...
return new Promise((resolvePurifiedHTML, rejectPurifiedHTML)=>{
return new Promise(async (resolvePurifiedHTML, rejectPurifiedHTML)=>{

// If already in cache, return that.
if(Nutshell.htmlCache[url]){
Expand All @@ -859,17 +859,76 @@ Bubble: the box that expands below an expandable, containing a Nutshell Section
articleTitle = decodeURIComponent( splitPath[splitPath.length-1] );
// Which language wikipedia? (including Simple...)
let domain = urlObject.host.split('.')[0];

// get section of article, if any
let sectionID = urlObject.hash.slice(1);

// Fetch lede
let resourceParams = {
// Request from anywhere, in JSON
action: "query", origin: "*", format: "json",
// Extract just the lead paragraph & thumbnail
prop: "extracts|pageimages", exintro: "", pithumbsize:500,
prop: "extracts|pageimages|sections", exintro: "", pithumbsize:500,
// THIS PAGE
titles: articleTitle
}
// Parse API
let params = {
action: "parse", origin: "*", format: "json",
page: articleTitle,
prop: "text|sections"
}
let resourceQueryString = _objectToURLParams(resourceParams);

let parseQueryString = _objectToURLParams(params);

let parseURL = `https://${domain}.wikipedia.org/w/api.php?${parseQueryString}`
let found = false;
await fetch(parseURL)
.then(response => response.json())
.then(data => {
const sections = data.parse.sections;
for(let i = 0; i < sections.length; i++){
if(sections[i].anchor === sectionID){
params.section = sections[i].index;
found = true;
break;
}
}
}
);

if(found){
fetch(`https://${domain}.wikipedia.org/w/api.php?${_objectToURLParams(params)}`)
.then(response => response.json())
.then(data => {
let pageHTML = data.parse.text['*'];
// show images
pageHTML = pageHTML.replaceAll("\"//upload.wikimedia.org/", "\"https://upload.wikimedia.org/");
// remove all elements with class editsection
pageHTML = pageHTML.replace(/<span class="mw-editsection">.*?<\/span>/g, "");
// remove all links with title that starts with Edit Section
pageHTML = pageHTML.replace(/<a.*?title="Edit section.*?<\/a>/g, "");
pageHTML = pageHTML.replace(/<span class="mw-editsection-bracket">.*?<\/span>/g, "");

// create valid links
pageHTML = pageHTML.replaceAll(/href="\/wiki/g, `href="https://${domain}.wikipedia.org/wiki`);

// get all a tags with wiki links and any title and change inner text to have : in front
// don't touch images
pageHTML = pageHTML.replace(/<a.*?href="https:\/\/.*?\.wikipedia\.org\/wiki\/(.*?)".*?>(.*?)<\/a>/g, (match, p1, p2) => {
// if it's an image, don't touch it
if(p1.includes("File:")){
return match;
}
return `<a href="https://${domain}.wikipedia.org/wiki/${p1}">:${p2}</a>`;
});

Nutshell.htmlCache[url] = pageHTML;
// FULFIL THE PROPHECY
resolvePurifiedHTML( Nutshell.htmlCache[url] );

});
}else{
let resourceURL = `https://${domain}.wikipedia.org/w/api.php?${resourceQueryString}`;
fetch(resourceURL)
.then(response => response.json())
Expand All @@ -891,7 +950,7 @@ Bubble: the box that expands below an expandable, containing a Nutshell Section
resolvePurifiedHTML(pageHTML);

});

}
// (Wait some time before giving up, and telling user)
setTimeout(()=>{
rejectPurifiedHTML(
Expand Down Expand Up @@ -1102,7 +1161,7 @@ Bubble: the box that expands below an expandable, containing a Nutshell Section
// Get expandable's url & queryString
let href = expandable.href,
splitHref = href.split("#"),
url = splitHref[0],
url = expandable.href,
queryString = splitHref[1];

// The container for the Section... get it, boiiiiii.
Expand Down
8 changes: 5 additions & 3 deletions words/words.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ What's more, **you can embed explanations from _other_ webpages and authors, eve

But why not links? Well, unlike links, Nutshell lets you include *only* the snippet you need, not the whole page. And instead of a jungle of new tabs, your reader stays on one page, keeping their flow of reading. Even if you [:interrupt a sentence](#Interruption), Nutshell recaps the sentence afterwards, so your reader never loses context.

*But wait, there's more!* It's not just text & pictures you can embed! You can also embed [:interactive playthings](indexpage/malicious.html#InteractivePlay), [:YouTube videos](https://www.youtube.com/watch?v=i_RLYSaPvak), and – hey, why not – [:Wikipedia articles](https://en.wikipedia.org/wiki/Catgirl). (That includes [:other languages](https://fr.wikipedia.org/wiki/Baguette_(pain)) and [:Simple Wikipedia](https://simple.wikipedia.org/wiki/Universe), too!)
*But wait, there's more!* It's not just text & pictures you can embed! You can also embed [:interactive playthings](indexpage/malicious.html#InteractivePlay), [:YouTube videos](https://www.youtube.com/watch?v=i_RLYSaPvak), and – hey, why not – [:Wikipedia articles](https://en.wikipedia.org/wiki/Chicago_rat_hole). (That includes [:other languages](https://fr.wikipedia.org/wiki/Baguette_(pain)) and [:Simple Wikipedia](https://simple.wikipedia.org/wiki/Universe), too!)

So: whether you're writing a blog, a news article, a glossary, educational material, code documentation, etc... I hope Nutshell helps you help _your_ readers.

Expand Down Expand Up @@ -76,13 +76,15 @@ Nicky <strike>panhandles on the internet</strike> was supported by these kind fo

<iframe src='https://ncase.me/thanks/aug2022.html?credits=1&v=2' width='750px' height='400px'></iframe>

If you'd like to help Nicky keep making free educational stuff & talking about themselves in the third person, dispose of your disposable cash **[on their Patreon!](https://www.patreon.com/ncase)**
If you'd like to help Nicky keep making free educational stuff & talking about themselves in the third person, dispose of your disposable cash **[on her Patreon!](https://www.patreon.com/ncase)**

But seriously, thank you to everyone above. I appreciate y'all.

🥜,
~ Nicky Case

**Update Oct 11, 2024:** Also thank you to **[Dev Mehta](https://github.com/Dev-Mehta)** for adding the ability to use Nutshell on *specific* Wikipedia sub-sections, and with recursive expandable links! Like so — [: Binary Addition](https://en.wikipedia.org/wiki/Binary_number#Addition)

## : Recursion

<img src="indexpage/sprites/recursion.gif" data-float="left" width="200"/>
Expand Down Expand Up @@ -179,7 +181,7 @@ There's probably many more StretchText-likes, but I haven't heard of 'em.

<img src="indexpage/sprites/nicky.png" data-float="left" width="200"/>

Nicky Case is an internet person who explains stuff with games, "games", and pictures with words. See what they've wrought upon humanity at [ncase.me](https://ncase.me).
Nicky Case is an internet person who explains stuff with games, "games", and pictures with words. See what she hath wrought at [ncase.me](https://ncase.me).

## : Open Source

Expand Down
Loading

0 comments on commit f83beae

Please sign in to comment.