Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add script to auto update icons #760

Merged
merged 15 commits into from
Apr 30, 2024

Conversation

Jh123x
Copy link
Contributor

@Jh123x Jh123x commented Dec 25, 2023

  • feat: add auto import icon from fortawesome lib
  • feat: auto update documents in example website

I think this feature will be good for adding future icons to the page.

Possible future use:

  • We can make icons into a config file and generate the Docs for it via CI

Please let me know if there is anything else required for this MR.

Copy link

netlify bot commented Dec 25, 2023

Deploy Preview for hugo-congo ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit ed8f750
🔍 Latest deploy log https://app.netlify.com/sites/hugo-congo/deploys/662fa139bf06af0008dd78ce
😎 Deploy Preview https://deploy-preview-760--hugo-congo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@jpanther
Copy link
Owner

I think this is an interesting idea... although I wonder if the HTTP requests could be better avoided if this was included as an NPM package and copied across that way? It could then also be adapted to work with dependabot similarly to how the theme is rebuilt on other dependency updates.

I believe the brands icons are available through NPM at @fortawesome/free-brands-svg-icons. Thoughts?

@jpanther jpanther added the enhancement New feature or request label Dec 27, 2023
@wolfspyre
Copy link
Contributor

I'm all for an automagic tool to make dev life better....
eradicating toil for the win.

That being said, I do wonder about the challenges that might arise from baking a python script into the CI pipeline for a codebase that's predominantly golang and node.

I could see this being problematic, for example, if CI containers don't have a fully functional system... rather just the pieces to do the needful; and in this case, there's no existing python, so it'd be introducing the possibility of CI management pain for futureUs™️.

the brands icons' availability as an NPM package helps in one fashion for sure, but that doesn't really address the underlying need to manipulate the SVGs to get the fill/stroke properties set properly so's tailwind's voodoo works properly....

I wonder if it's worth trying to get fontAwesome to release the icons preprocessed such that this is a solved problem....

It seems to me that we're not the only ones... BY FAR... to have this need...
Perhaps this is already a solved problem?

@Jh123x
Copy link
Contributor Author

Jh123x commented Dec 28, 2023

I think this is an interesting idea... although I wonder if the HTTP requests could be better avoided if this was included as an NPM package and copied across that way? It could then also be adapted to work with dependabot similarly to how the theme is rebuilt on other dependency updates.

I believe the brands icons are available through NPM at @fortawesome/free-brands-svg-icons. Thoughts?

This seems like a good idea, maybe I'll give it a go.

@Jh123x
Copy link
Contributor Author

Jh123x commented Dec 28, 2023

I'm all for an automagic tool to make dev life better.... eradicating toil for the win.

That being said, I do wonder about the challenges that might arise from baking a python script into the CI pipeline for a codebase that's predominantly golang and node.

I could see this being problematic, for example, if CI containers don't have a fully functional system... rather just the pieces to do the needful; and in this case, there's no existing python, so it'd be introducing the possibility of CI management pain for futureUs™️.

the brands icons' availability as an NPM package helps in one fashion for sure, but that doesn't really address the underlying need to manipulate the SVGs to get the fill/stroke properties set properly so's tailwind's voodoo works properly....

I wonder if it's worth trying to get fontAwesome to release the icons preprocessed such that this is a solved problem....

It seems to me that we're not the only ones... BY FAR... to have this need... Perhaps this is already a solved problem?

Let me try to do more searching online

@Jh123x
Copy link
Contributor Author

Jh123x commented Dec 31, 2023

I can't seem to get the direct import from fontawesome working, but this script should work fine.

To run it just do

npm run add-icon <icon_name>

Please let me know if there is anything I missed out/any other suggestions

I will add the jsdocs for the functions when i am free later

@jpanther
Copy link
Owner

I really like this script but I still feel like a lot of the logic could be done locally if the SVG was just a direct file copy from node_modules/@fortawesome/free-brands-svg-icons/svgs/brands. Where was the issue you were having with this approach?

@Jh123x
Copy link
Contributor Author

Jh123x commented Jan 22, 2024

I really like this script but I still feel like a lot of the logic could be done locally if the SVG was just a direct file copy from node_modules/@fortawesome/free-brands-svg-icons/svgs/brands. Where was the issue you were having with this approach?

I'm not sure how the SVG works with the .ts files and .js files in the node modules.
image

@wolfspyre
Copy link
Contributor

yeah,
afaict
that scaffolding allows one to use fontawesome elements more easily in node,
when that module is installed does it put a bunch of svg files in the node_modules directory? i think that’s what James is referring to; (but correct me if i’m wrong here :) )

@Jh123x
Copy link
Contributor Author

Jh123x commented Jan 23, 2024

yeah, afaict that scaffolding allows one to use fontawesome elements more easily in node, when that module is installed does it put a bunch of svg files in the node_modules directory? i think that’s what James is referring to; (but correct me if i’m wrong here :) )

Nope, I don't see any SVGs in the directory sadly.
image
Not sure if these were the packages that you guys were referring to.

@Jh123x
Copy link
Contributor Author

Jh123x commented Mar 9, 2024

yeah, afaict that scaffolding allows one to use fontawesome elements more easily in node, when that module is installed does it put a bunch of svg files in the node_modules directory? i think that’s what James is referring to; (but correct me if i’m wrong here :) )

@wolfspyre @jpanther

Turns out I was using the wrong npm package.
Changed the package and it is now able to work offline

@jpanther
Copy link
Owner

Thanks for the update, I think this is now complete in terms of functionality. Are you happy with the current state of the PR?

@Jh123x
Copy link
Contributor Author

Jh123x commented Apr 29, 2024

Thanks for the update, I think this is now complete in terms of functionality. Are you happy with the current state of the PR?

Yeap, currently happy with the state of the MR.
Do we need anything else on top of it?

@jpanther
Copy link
Owner

No, I'm happy with how this is working now. The only potential addition is calling Prettier to reformat the Markdown files once the icon is added to the table but it's something that could be added later. Thanks for all your work on this one. I'll merge this in!

@jpanther jpanther merged commit afc163d into jpanther:dev Apr 30, 2024
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants