RNS-Things/reticulum-meshchatX
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

toggle page source in place rather than opening in a new tab

Browse Source
This commit is contained in:
liamcottle
2025-02-09 16:59:08 +13:00
parent 2662f96c8b
commit 9ea98eb0f0
1 changed files with 24 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/frontend/components/nomadnetwork/NomadNetworkPage.vue
View File

@@ -43,7 +43,7 @@
<path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
</svg>
</button>
<button @click="showNodePageSource" type="button" class="ml-1 my-auto text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded p-1 cursor-pointer">
<button @click="toggleNodePageSource" type="button" title="Toggle Source Code" class="ml-1 my-auto text-gray-500 dark:text-gray-300 rounded p-1 cursor-pointer" :class="[ isShowingNodePageSource ? 'bg-green-500 hover:bg-green-600 text-white' : 'bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700' ]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
</svg>
@@ -157,6 +157,7 @@ export default {
selectedNodePath: null,
isLoadingNodePage: false,
isShowingNodePageSource: false,
defaultNodePagePath: "/page/index.mu",
nodePageRequestSequence: 0,
nodePagePath: null,
@@ -449,36 +450,32 @@ export default {
},
renderPageContent(path, content) {
// check if page url ends with .mu but remove page data first
// address:/page/index.mu`Data=123
const [ pagePathWithoutData ] = path.split("`");
// render page content if we aren't viewing source
if(!this.isShowingNodePageSource){
// check if page url ends with .mu but remove page data first
// address:/page/index.mu`Data=123
const [ pagePathWithoutData ] = path.split("`");
// convert micron to html if page ends with .mu extension
if(pagePathWithoutData.endsWith(".mu")){
const muParser = new MicronParser();
return muParser.convertMicronToHtml(content);
}
// convert micron to html if page ends with .mu extension
if(pagePathWithoutData.endsWith(".mu")){
const muParser = new MicronParser();
return muParser.convertMicronToHtml(content);
}
// otherwise, we will just serve the content as is
return content;
// otherwise, we will just serve the raw content, making sure to prevent injecting html
return content
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
},
showNodePageSource() {
// create blob containing page content
const blob = new Blob([this.nodePageContent], {
type: "text/plain",
});
// create object url for blob
const objectUrl = URL.createObjectURL(blob);
// open blob in new tab
window.open(objectUrl, "_blank");
// revoke object url to clear memory
setTimeout(() => URL.revokeObjectURL(objectUrl), 10000);
toggleNodePageSource() {
this.isShowingNodePageSource = !this.isShowingNodePageSource;
},
async reloadNodePage() {
@@ -806,7 +803,7 @@ export default {
},
renderedNodePageContent() {
return this.renderPageContent(this.nodePagePath, this.nodePageContent);
}
},
},
}
</script>