spencermountain / wtf_wikipedia

a pretty-committed wikipedia markup parser
https://observablehq.com/@spencermountain/wtf_wikipedia
MIT License
776 stars 129 forks source link

How to get numeric custom template? #427

Open tanwanjern opened 3 years ago

tanwanjern commented 3 years ago

Hi, I'm trying to get the 'Playoffs' data from this wiki page and I was able to get it using the code below.

async ()=> {
    let resp = await wtf.fetch('ONE_Esports/Singapore_Major/2021', {
        'Accept-Encoding': 'gzip',
        'User-Agent': 'your_user_agent',
        domain: 'liquipedia.net',
        path: 'dota2/api.php'
    })
    .then(function(doc) {
        console.log(doc.section(24))
        return doc.section(24);
    })

    return resp;
}

Then, according to this template doc, I expect the response data includes all these templates {{8DE4LTeamBracket ... }}, {{BracketMatchSummary}}, {{Match}}

However, all the numeric templates {{8DE4LTeamBracket ... }} are missing. I only got {{BracketMatchSummary}} and {{Match}}. So I tried to add a new template using the code below, but I got this error An identifier or keyword cannot immediately follow a numeric literal.

wtf.extend((models, templates) => {
  // create a custom parser function
  templates.8DE4LTeamBracket = (tmpl, list, parse) => {
    let obj = parse(tmpl) //or do a custom regex
    list.push(obj)
    return 'new-text'
  }

  // array-syntax allows easy-labeling of parameters
  templates.8DE4LTeamBracket = ['a', 'b', 'c']

  // number-syntax for returning by param # '{{name|zero|one|two}}'
  templates.baz = 0

  // replace the template with a string '{{asterisk}}' -> '*'
  templates.asterisk = '*'
})

Any example I can follow to add a numeric template? Or any other better way to get the 'Playoffs' data without using the template()?

For example, just display HTML for section(24), is that possible/recommended? because there's a lot of bracket template, I might not able to convert all the template into custom element/component.

spencermountain commented 3 years ago

hey Lester! Nice job on this - that's a very complex page. yep - you're very close. Javascript doesn't like a number starting the property name (for some reason!) so you'll need to use this syntax instead - templates['8DE4LTeamBracket']

here's a working example:

wtf.extend((models, templates) => {
  // create a custom parser function
  templates['8DE4LTeamBracket'] = (tmpl, list, parse) => {
    let obj = parse(tmpl) //or do a custom regex
    list.push(obj)
    return 'new-text'
  }

  // array-syntax allows easy-labeling of parameters
  templates['8DE4LTeamBracket'] = ['a', 'b', 'c']

  // number-syntax for returning by param # '{{name|zero|one|two}}'
  templates.baz = 0

  // replace the template with a string '{{asterisk}}' -> '*'
  templates.asterisk = '*'
})

;(async () => {
  let resp = await wtf
    .fetch('ONE_Esports/Singapore_Major/2021', {
      'Accept-Encoding': 'gzip',
      'User-Agent': 'your_user_agent',
      domain: 'liquipedia.net',
      path: 'dota2/api.php',
    })
    .then(function (doc) {
      let s = doc.section(24)
      console.log(s.templates().map((t) => t.json()))
      return doc.section(24)
    })

  return resp
})()

cheers!

spencermountain commented 3 years ago

liquipedia seems like a pretty-cool wiki, if you want to put-together a plugin for it, I'd be happy to help.

tanwanjern commented 3 years ago

Oh, thanks so much for the example!

Wow sure, I would like to get a plugin! 😍 🙌 let me know what I can help too

tanwanjern commented 3 years ago

Sorry, can I ask another question here?

doc.section(24).html()

When I try to get the HTML from section(24). I got this result

<div class="section">
  <h1function depth() {
    return this._depth;
  }>Playoffs</h1function depth() {
    return this._depth;
  }>
</div>

May I know why? Can't find more details because the doc still in progress