rdfa-wasm 0.3.6

Graph rdfa Processor
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

async function loadWasmContext() {
  const module = await import("./pkg/rdfa_wasm.js");
  await module.default();
  // return module.compute_as_string; use that one instead to create the heap from javascript
  return module.html_to_rdfa;
}
function toggleForm(form, toggle) {
  const elements = form.elements;
  for (let i = 0, len = elements.length; i < len; ++i) {
    elements[i].readOnly = toggle;
  }
  const submitButton = form.querySelector('button[type="submit"]');
  submitButton.disabled = toggle;
}
async function run() {
  const form = document.querySelector("form");
  toggleForm(form, true);
  const html_to_rdfa = await loadWasmContext();
  toggleForm(form, false);

  // initLoadFromUrl();
  const text_area = document.querySelector("#html");
  text_area.value = `
            <!DOCTYPE html>
            <html prefix="foaf: http://xmlns.com/foaf/0.1/">
              <head>
              <title>Test 0083</title>
              </head>
              <body>
             <div about="http://www.example.org/#somebody" rel="foaf:knows">
                 <p property="foaf:name">Ivan Herman</p>
              <p rel="foaf:mailbox" resource="mailto:ivan@w3.org">mailto:ivan@w3.org</p>
              <p about="http://danbri.org/foaf.rdf#danbri" typeof="foaf:Person" property="foaf:name">Dan Brickley</p>
             </div>
              </body>
            </html>
        `;

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    let res = html_to_rdfa(
      data.get("html") || "",
      data.get("base") || "",
      data.get("wellKnownPrefix") || "",
    );
    const out = document.querySelector("pre");
    out.innerText = res;
  });
  const issueLink = document.querySelector("#issueLink");
  issueLink.onclick = (e) => {
    e.preventDefault();
    const a = document.createElement("a");
    let params = new URLSearchParams();
    const data = new FormData(form);
    params.append("title", "RDFa processing bug");

    params.append(
      "body",
      `
### Base: 
  
  \`${data.get("base") || ""}\`

### Well Known Prefix:

  \`${data.get("base") || ""}\`

### Html:
  
   \`\`\`html
   ${data.get("html") || ""}
   \`\`\`

          `,
    );
    a.href = `https://github.com/nbittich/graph-rdfa-processor/issues/new?${params.toString()}`;
    a.target = "_blank";
    a.click();
  };
}

function initLoadFromUrl() {
  const loadBtn = document.querySelector("#loadFromUrlBtn");
  loadBtn.addEventListener('click', async (e) => {
    e.stopPropagation();
    e.preventDefault();
    const url = document.querySelector('#fromUrl');
    const urlContent = url.value;
    if (urlContent?.length) {
      try {
        const _ = new URL(urlContent);// just to make sure url is valid

        const response = await fetch(urlContent);
        if (response.status === 200) {
          // doesn't work on gh pages because of CORS
          alert(await response.text());
        }
      } catch (e) {
        alert("url seems invalid, check logs");
        console.log(e);
      }

    }
  });
}
const copyToClipboardBtn = document.querySelector("#copyToClipboard");
copyToClipboardBtn.onclick = function (e) {
  e.preventDefault();
  const out = document.querySelector("pre");

  navigator.clipboard.writeText(out.innerText);

  alert("Copied to clipboard");
};

run();