[Feat]: Update available icons dynamically

[loftwah]

Feature request

Icons can be dynamically found here. I noticed your version was slightly behind or didn't include all of them. You could gather them here and generate the options this way. It would be a cool feature. I could build it if you'd like a PR.

[schmelto]

That is a great idea. Do you want to tackle this issue or is it free to grab for someone else?

[schmelto]

It should work with something like this:

async function geticons() {
  try {
    const response = await axios.get(
      `https://raw.githubusercontent.com/EddieHubCommunity/LinkFree/main/src/config/links.json`
    );
    icons = Object.keys(response.data.validIcons);
  } catch (error) {
    console.error(error);
  }
}

[schmelto]

@loftwah feel free to raise a PR for this topic.

[loftwah]

Thanks, I will when I get around to adding it. Thank you.

[loftwah]

Trying to figure out how to use the function in the context of the HTML in the script.js. I think I had it working and accidentally overwrote the file doh.

[schmelto]

I have not tested it but maybe something like this can help you

async function geticons() {
  const response = await fetch(
    "https://raw.githubusercontent.com/EddieHubCommunity/LinkFree/main/src/config/links.json",
    {
      method: "GET",
      mode: "cors",
    }
  );
  const data = await response.json();
  console.log(data);
}

geticons();

[schmelto]

Now I got time to test it. This will get you the following console.log:

  "validIcons": {
    "android": "#3DDC84",
    "apple": "#000000",
    "book": "#2196F3",
    "codeforces": "#1F8ACB",
    "codewars": "#A52A2A",
    "dev.to": "#000000",
    "discord": "#5865F2",
    "dollar": "#808080",
    "envelope": "#5F6368",
    "facebook": "#1877F2",
    "github": "#171515",
    "gitlab": "#2E2E2E",
    "globe": "#808080",
    "graduation-hat": "#808080",
    "hackerrank": "#0c0c14",
    "hashnode": "#2962FF",
    "instagram": "#833AB4",
    "laravel": "#F05340",
    "leetcode": "#F2A50A",
    "link": "#1a1817",
    "linkedin": "#0077b5",
    "medium": "#000000",
    "microsoft": "#5E5E5E",
    "node-js": "#3C873A",
    "open-source": "#0fc81d",
    "paypal": "#00457C",
    "polywork": "#6776F9",
    "send": "#2AA2DE",
    "slack": "#4A154B",
    "snapchat": "#FFFC00",
    "spotify": "#1ED760",
    "stackoverflow": "#F58025",
    "telegram": "#4995be",
    "tiktok": "#000000",
    "twitch": "#9146FF",
    "twitter": "#00ACEE",
    "vimeo": "#1AB7EA",
    "youtube": "#FF0000"

[loftwah]

Thank you, that's what I was aiming to get in what I did last night. Appreciated.

[schmelto]

Here maybe some more thoughts on this. This is also lightly tested.

let icons = [];

async function geticons() {
  const response = await fetch(
    "https://raw.githubusercontent.com/EddieHubCommunity/LinkFree/main/src/config/links.json",
    {
      method: "GET",
      mode: "cors",
    }
  );
  const data = await response.json();
  icons = Object.keys(data.validIcons);
}

geticons();

the icons in the dropdown than can be mapped like this:

${icons.map((icon) => `<option value="${icon}">${icon}</option>`)}

[loftwah]

Oh nice, I had something sort of working, but it only gave me the first key. Your way is probably much better, I'm just not quite sure about the placement of stuff, but I think your example has enough.

<select class="form-select" name="icon${counter}" aria-label="Select Icon" required>
                  <option value="" selected>-- Select Icon --</option>
                  <option value="${Object.keys(data.validIcons)[counter]}">${Object.keys(data.validIcons)[counter]}</option>
              </select>

[loftwah]

I have it working here, and it is up to date and ready to go in my branch. I'll raise a PR as soon as October hits :).