Private Page Embed Userscript

• Content that should not be seen by others is written in /blu3mo-private.

• I’ve always wanted to link this with the main content.

  • I don’t need to link it with tags, but I want to manage it within the same project at least.

• Using a Userscript, I embed it with an iframe to display the private content.

  • I thought it would work every time I open a page, but it didn’t.
  • How to catch page transitions with a UserScript in Scrapbox
  • Callback after link transition
  • Maybe I can make it work by using these.
  • Additional note
    • muta

• Example

  • Expert in Information Science: Workshop Presentation Materials

• It’s a rough implementation, but I put it in /bluemountain-theme.

  • (I don’t really understand JavaScript)
  • Well, it works, so it’s good!
    • I really want to know this concept (tkgshn)

    • Do you have to reflect the management of Scrapbox UserScripts in all workspaces? Can you just place a .json file on GitHub and include code to load it into your own page?

    • — Shunsuke Takagi (@tkgshn) March 12, 2021

    • What’s happening with this import-like thing? 6044ab6079e1130000896f4c
    • Something like /takker/scrapbox-parser for UserScript?
      • It would be great if you could provide an explanatory article (tkgshn)(tkgshn)(tkgshn)(tkgshn)(tkgshn)(tkgshn)(tkgshn)
    • (blu3mo) I’m not doing anything complicated like that.
      • Using Scrapbox’s API, I can load the script.js of the page “XXX” from scrapbox.io/api/code/bluemountain-theme/XXX/script.js.
      • I’m just importing it.

• If I simply display it in an iframe, it’s too narrow, so I removed the max-width restriction of .col-page only at that time.

2021-05-04 20:40:22 I fixed the indentation issue (takker)

• I also simplified some of the code.
• 🙏🙏(blu3mo)
• Do you prefer indenting with tabs or spaces? (takker)
  • I want to match (blu3mo)‘s preference.
  • I usually use spaces (blu3mo)
    • (Thank you very much for your consideration🙇‍♂️🙇‍♂️)
    • It’s just meddling, so please don’t worry about it (takker)
      • Even if my mind is not motivated to work on the current task and I’m doing something else, I can’t say it even if my mouth is torn apart. script.js

let lastTitle = "";
function presentPrivateFrameIfInPrivatePage() {
    lastTitle = scrapbox.Page.title;
    const page = document.getElementsByClassName("page")[0]; 
    const colPage = document.getElementsByClassName("col-page")[0];
    const privateFrame = document.getElementById('privateFrame');
    privateFrame?.remove();
    const privateLink = document.getElementById('privateLink');
    privateLink?.remove();
    console.log(colPage);
    colPage.classList.remove("ignore-max-width"); 
    		
    //var pagename = document.location.pathname.split("/").pop();

↑ Is pagename the page title?

• If so, the following code is only processing pages that start with private-, right?
• Yes, that’s the specification, I think.
  • Oh, are you not using it now? (takker)
  • I’m not using it now (blu3mo)
    • (Now that I’m looking at it again after a long time, I’m starting to think it might be useful)
• It seems that Scrapbox allows connecting strings even if there are characters in between (blu3mo) script.js

    if(!scrpabox.Page.title.startsWith("private-")) return;
    
    console.log("addFrame");
    page.insertAdjacentHTML('afterbegin',
  `<iframe id='privateFrame' style='width:100%; height:100vh;' src='https://scrapbox.io/blu3mo-private/${pagename.slice(8, pagename.length)}</iframe>`);
    page.insertAdjacentHTML('afterbegin',
  `<a id='privateLink' href='https://scrapbox.io/blu3mo-private/${scrapbox.Page.title.slice(8)}">Go to the page</a>`);
   colPage.classList.add("ignore-max-width");
}

script.js

presentPrivateFrameIfInPrivatePage();
 
const observer = new MutationObserver((mutation)=>{
    if (lastTitle === location.href) return;
    presentPrivateFrameIfInPrivatePage();
});
observer.observe(document.getElementsByClassName("page-wrapper")[0], {attributes: true, attributeFilter: ["class"]});

style.css

 .ignore-max-width {
 	max-width: 100% !important;
 }