feat(plugins/community/16personalities): add plugin (#1402) [skip ci]

.github/actions/spelling/allow.txt

@@ -12,6 +12,7 @@ https
 IPlayer
 ISteam
 leetcode
+MBTI
 Nie
 npx
 personaname

source/plugins/community/16personalities/README.md

@@ -0,0 +1,12 @@
+<!--header-->
+<!--/header-->
+
+## ➡️ Available options
+
+<!--options-->
+<!--/options-->
+
+## ℹ️ Examples workflows
+
+<!--examples-->
+<!--/examples-->

source/plugins/community/16personalities/examples.yml

@@ -0,0 +1,12 @@
+- name: MBTI Personality profile
+  uses: lowlighter/metrics@latest
+  with:
+    filename: metrics.plugin.16personalities.svg
+    token: ${{ secrets.METRICS_TOKEN }}
+    base: ""
+    plugin_16personalities: yes
+    plugin_16personalities_url: ${{ secrets.SIXTEEN_PERSONALITIES_URL }}
+    plugin_16personalities_sections: personality, traits
+    plugin_16personalities_scores: no
+  test:
+    modes: []

source/plugins/community/16personalities/index.mjs

@@ -0,0 +1,63 @@
+//Setup
+export default async function({login, q, imports, data, account}, {enabled = false, extras = false} = {}) {
+  //Plugin execution
+  try {
+    //Check if plugin is enabled and requirements are met
+    if ((!q["16personalities"]) || (!imports.metadata.plugins["16personalities"].enabled(enabled, {extras})))
+      return null
+
+    //Load inputs
+    let {url, sections, scores} = imports.metadata.plugins["16personalities"].inputs({data, account, q})
+    if (!url)
+      throw {error: {message: "URL is not set"}}
+
+    //Start puppeteer and navigate to page
+    console.debug(`metrics/compute/${login}/plugins > 16personalities > starting browser`)
+    const browser = await imports.puppeteer.launch()
+    console.debug(`metrics/compute/${login}/plugins > 16personalities > started ${await browser.version()}`)
+    const page = await browser.newPage()
+    console.debug(`metrics/compute/${login}/plugins > 16personalities > loading ${url}`)
+    await page.goto(url, {waitUntil: imports.puppeteer.events})
+
+    //Fetch raw data
+    const raw = await page.evaluate(() => ({
+      color:getComputedStyle(document.querySelector(".card__bg")).backgroundColor, //eslint-disable-line no-undef
+      type:document.querySelector(".type__code").innerText,
+      personality:[...document.querySelectorAll(".personality-cards .sp-personality-card")].map(card => ({
+        category:card.querySelector(".card__title").innerText,
+        value:card.querySelector(".card__subtitle").innerText,
+        image:card.querySelector(".card__image").src,
+        text:card.querySelector(".card__text").innerText
+      })),
+      traits:[...document.querySelectorAll("#traits .card__body")].map(card => ({
+        category:card.querySelector(".card__title").innerText,
+        value:card.querySelector(".card__subtitle").innerText,
+        score:card.querySelector(".center__num").innerText,
+        text:card.querySelector("p").innerText
+      }))
+    }))
+
+    //Format data
+    const {color} = raw
+    const type = raw.type.replace("(", "").replace(")", "").trim()
+    const personality = await Promise.all(raw.personality.map(async ({category, value, image, text}) => ({
+      category,
+      value:value.replace(`(${type})`, "").trim(),
+      image:await imports.imgb64(image),
+      text:text.replace(`${category}\n${value}\n`, "").trim()
+    })))
+    const traits = raw.traits.map(({category, value, score, text}) => ({
+      category,
+      value:`${value[0]}${value.substring(1).toLocaleLowerCase()}`,
+      score:scores ? Number(score.replace("%", ""))/100 : NaN,
+      text:text.split(".").slice(1).join("."),
+    }))
+
+    //Results
+    return {sections, color, type, personality, traits}
+  }
+  //Handle errors
+  catch (error) {
+    throw imports.format.error(error)
+  }
+}

source/plugins/community/16personalities/metadata.yml

@@ -0,0 +1,56 @@
+name: 🧠 16personalities
+category: community
+description: |
+  This plugin displays personality profile from a [16personalities profile](https://www.16personalities.com/profile).
+disclaimer: |
+  This plugin is not affiliated, associated, authorized, endorsed by, or in any way officially connected with [16personalities](https://www.16personalities.com).
+  All product and company names are trademarks™ or registered® trademarks of their respective holders.
+examples:
+  default: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.16personalities.svg
+authors:
+  - lowlighter
+supports:
+  - user
+scopes: []
+inputs:
+
+  plugin_16personalities:
+    description: |
+      Enable 16personalities plugin
+    type: boolean
+    default: no
+
+  plugin_16personalities_url:
+    description: |
+      Profile URL
+
+      This can be obtained after doing the [test on 16personalities](https://www.16personalities.com/free-personality-test) and registering an email.
+      Login with the generated password received in your mailbox and copy the link that is displayed when sharing the profile.
+
+      <img src="/.github/readme/imgs/plugin_16personalities_profile.png" width="800" />
+
+    type: string
+    default: ""
+    example: https://www.16personalities.com/profiles/xxxxxxxxxxxxx
+
+  plugin_16personalities_sections:
+    description: |
+      Displayed sections
+
+      - `personality` will display personality type
+      - `profile` will display role and strategy
+      - `traits` will display mind, energy, nature, tactics and identity traits
+    type: array
+    format: comma-separated
+    default: personality
+    example: personality, profile, traits
+    values:
+      - personality
+      - profile
+      - traits
+
+  plugin_16personalities_scores:
+    description: |
+      Display traits scores
+    type: boolean
+    default: yes

source/templates/classic/partials/16personalities.ejs

@@ -0,0 +1,72 @@
+<% if (plugins["16personalities"]) { %>
+  <section>
+    <h2 class="field">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M5.5 4.25a2.25 2.25 0 0 1 4.5 0 .75.75 0 0 0 1.5 0 3.75 3.75 0 1 0-6.14 2.889l-2.272 4.258a.75.75 0 0 0 1.324.706L7 7.25a.75.75 0 0 0-.309-1.015A2.25 2.25 0 0 1 5.5 4.25Z"></path><path d="M7.364 3.607a.75.75 0 0 1 1.03.257l2.608 4.349a3.75 3.75 0 1 1-.628 6.785.75.75 0 0 1 .752-1.299 2.25 2.25 0 1 0-.033-3.88.75.75 0 0 1-1.03-.256L7.107 4.636a.75.75 0 0 1 .257-1.03Z"></path><path d="M2.9 8.776A.75.75 0 0 1 2.625 9.8 2.25 2.25 0 1 0 6 11.75a.75.75 0 0 1 .75-.751h5.5a.75.75 0 0 1 0 1.5H7.425a3.751 3.751 0 1 1-5.55-3.998.75.75 0 0 1 1.024.274Z"></path></svg>
+      <%= !plugins["16personalities"].error ? `${plugins["16personalities"].type} personality` : "Personality" %> <sub style="font-style: italic; margin-left: 4px; margin-top: -6px; font-size: 12px;">(results from 16personalities)</sub>
+    </h2>
+    <% if (plugins["16personalities"].error) { %>
+      <div class="row">
+        <section>
+          <div class="field error">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
+            <%= plugins["16personalities"].error.message %>
+          </div>
+        </section>
+      </div>
+    <% } else { %>
+      <% if ((plugins["16personalities"].sections.includes("personality"))||(plugins["16personalities"].sections.includes("profile"))) { %>
+        <div class="row fill-width">
+          <section class="personality-traits categories">
+            <% for (const {category, value, image, text} of plugins["16personalities"].personality) { if (((!plugins["16personalities"].sections.includes("personality"))&&(/personality/i.test(category)))||((!plugins["16personalities"].sections.includes("profile"))&&(!/personality/i.test(category)))) continue %>
+              <div class="category">
+                <img src="<%= image %>" alt="" />
+                <div class="explanation">
+                  <span class="title" style="color: <%= plugins["16personalities"].color %>;"><span class="subtitle"><%= value %></span> <%= category.toLocaleLowerCase() %></span>
+                  <span class="text"><%= text %></span>
+                </div>
+              </div>
+            <% } %>
+          </section>
+        </div>
+      <% } %>
+      <% if (plugins["16personalities"].sections.includes("traits")) { %>
+        <div class="row fill-width">
+          <section class="personality-traits categories">
+            <% for (const {category, value, score, text} of plugins["16personalities"].traits) { %>
+              <div class="category <%= category.toLocaleLowerCase() %>">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge">
+                <circle class="gauge-base" r="53" cx="60" cy="60"></circle>
+                <% if (!Number.isNaN(score)) { %>
+                  <circle class="gauge-arc" transform="rotate(-90 60 60)" r="53" cx="60" cy="60" stroke-dasharray="<%= score * 329 %> 329"></circle>
+                  <text x="60" y="60" dominant-baseline="central" ><%= Math.round(score*100) %></text>
+                <% } else { %>
+                  <circle class="gauge-arc" transform="rotate(-90 60 60)" r="53" cx="60" cy="60" stroke-dasharray="329 329"></circle>
+                  <text x="60" y="60" dominant-baseline="central" ><%= (/energy/i.test(category))&&(/intuitive/i.test(value)) ? "N" : value.charAt(0) %></text>
+                <% } %>
+                </svg>
+                <div class="explanation">
+                  <span class="title"><span class="subtitle"><%= value %></span> <%= category.toLocaleLowerCase() %></span>
+                  <span class="text"><%= text %></span>
+                </div>
+              </div>
+            <% } %>
+          </section>
+        </div>
+      <% } %>
+      <style>
+        .personality-traits { flex-direction: column; }
+        .personality-traits .category { flex-direction: row; }
+        .personality-traits .category .gauge, .personality-traits .category img { flex-shrink: 0; margin: 5px 9px; }
+        .personality-traits .category .explanation { display: flex; flex-direction: column; }
+        .personality-traits .category .subtitle { text-transform: uppercase; font-weight: bold; }
+        .personality-traits .category img { width: 50px; }
+        .mind .gauge, .mind .title { color: #4298b4; }
+        .energy .gauge, .energy .title { color: #e4ae3a; }
+        .nature .gauge, .nature .title { color: #33a474; }
+        .tactics .gauge, .tactics .title { color: #88619a; }
+        .identity .gauge, .identity .title { color: #f25e62; }
+        .text { font-size: 12px; color: #777; }
+      </style>
+    <% } %>
+  </section>
+<% } %>

source/templates/classic/partials/_.json

@@ -41,6 +41,7 @@
   "sponsors",
   "sponsorships",
   "poopmap",
+  "16personalities",
   "fortune",
   "splatoon",
   "steam"

tests/secrets.json

@@ -15,5 +15,6 @@
   "STEAM_TOKEN":"MOCKED_TOKEN",
   "SPLATOON_TOKEN":"{}",
   "SPLATOON_STATINK_TOKEN":"MOCKED_TOKEN",
-  "POOPMAP_TOKEN":"MOCKED_TOKEN"
+  "POOPMAP_TOKEN":"MOCKED_TOKEN",
+  "SIXTEEN_PERSONALITIES_URL":"https://www.16personalities.com/profiles/xxxxxxxxxxxxx"
 }