feat: more precise way to get htmlHolder and blocks

2 files changed, 28 insertions, 2 deletions

diff --git a/addon/index.mjs b/addon/index.mjs
index 2494ec4..7f33fc5 100644
--- a/addon/index.mjs
+++ b/addon/index.mjs
@@ -1,4 +1,26 @@
-const { Leaflet } = window.mapclay.renderers
+const url = new URL(window.location)
+if (url.host === 'www.ptt.cc') {
+  const content = document.querySelector('#main-content')
+  Array.from(content.childNodes)
+    .filter(n => !(n instanceof window.HTMLElement))
+    .forEach(text => {
+      const span = document.createElement('span')
+      span.innerText = text.textContent
+      text.replaceWith(span)
+    })
+}
+
+const blockSelectors = {
+  'developer.mozilla': '.section-content',
+  'hackmd.io': '#doc > *',
+  'www.ptt.cc': '#main-content > span',
+}
+const blockSelector = blockSelectors[url.host]
+
+const addBlocks = blockSelector
+  ? root => Array.from(root.querySelectorAll(blockSelector))
+  : undefined
+
 const simpleRender = window.mapclay.renderWith(config => ({
   use: 'Leaflet',
   width: '100%',
@@ -13,6 +35,7 @@ const simpleRender = window.mapclay.renderWith(config => ({
 
 window.generateMaps(document.querySelector('main') ?? document.body, {
   crs: url.searchParams.get('crs') ?? 'EPSG:4326',
+  addBlocks,
   initialLayout: '',
   render: simpleRender,
 })
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index cbd44b2..94fcc1d 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -171,8 +171,11 @@ export const generateMaps = (container, {
   container.dataset.layout = initialLayout ?? defaultLayouts[0].name
 
   /** Prepare Semantic HTML part and blocks of contents inside */
-  const htmlHolder = container.querySelector('.SemanticHtml, :has(article, section)') ?? container.firstElementChild
+  const htmlHolder = container.querySelector('.SemanticHtml') ??
+    Array.from(container.children).find(e => e.id?.includes('main') || e.className.includes('main')) ??
+    Array.from(container.children).sort((a, b) => a.textContent.length < b.textContent.length).at(0)
   htmlHolder.classList.add('.SemanticHtml')
+
   const blocks = addBlocks(htmlHolder)
   blocks.forEach(b => {
     b.classList.add('dumby-block')