-
-
Notifications
You must be signed in to change notification settings - Fork 701
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: Site #1
feat: Site #1
Conversation
I think we should have a |
@locness3 I disagree with this, as the site is pulling from the However if the site were in a different branch that wouldn't happen. |
erm, okay i guess |
@locness3 since the site code isn't deployed to NPM or anything, it's okay to leave this as is. |
I'm waiting on #4 before I merge this, since that PR allows us to deploy the site successfully. @locness3 I think the site is okay to deploy, but should I add the attribute customisation feature that feathericons.com has? |
I don't think so. Also, we should find a unique name for the project, to avoid confusion |
Completely agree! That will help when publishing packages etc! Any ideas 😅 Also, might be good to transfer this repo to an org as well 🤔 |
Featherity? (feather + community) 😅 |
I like it 😅 Created @featherity |
Didn't expect this name to be actually used 😂 |
Lol idk I like it it's catchy 😂 We can always rename if we want 😅 |
I have deployed the site, you can now view it at featherity.netlify.app. Let me know what you think! |
Looks awesome! |
@ericfennis There was a small bug, but nothing I can fix on my end 😕 I can add it back if you guys want. I did really love it 😍 |
It seems like the version at https://featherity.netlify.app doesn't have the new icons. |
Should we merge this one? |
We should first mark it "Ready for review" |
I'm all for merging this. If anyone has any comments let me know! |
packages/site/src/pages/index.tsx
Outdated
|
||
const [numColumns, setNumColumns] = useState(1); | ||
useEffect(() => { | ||
setNumColumns(Math.floor(window.outerWidth / 160)); | ||
}, []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I noticed that when page loads, all the icons where displayed in full-width for a second. I think we can fix this by calculating and setting it before render.
const [numColumns, setNumColumns] = useState(1); | |
useEffect(() => { | |
setNumColumns(Math.floor(window.outerWidth / 160)); | |
}, []); | |
const idealColumnCount = () => Math.floor(window.outerWidth / 160); | |
const [numColumns, setNumColumns] = useState(idealColumnCount()); | |
useEffect(() => { | |
setNumColumns(idealColumnCount()); | |
}, []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ericfennis You can't use the window
attribute outside of the useEffect
😕
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oh really, didn't know that.
But you can use It in useState right?
const [numColumns, setNumColumns] = useState(1); | |
useEffect(() => { | |
setNumColumns(Math.floor(window.outerWidth / 160)); | |
}, []); | |
const idealColumnCount = ({outerWidth}) => Math.floor(outerWidth / 160); | |
const [numColumns, setNumColumns] = useState(idealColumnCount(window)); | |
useEffect(() => { | |
setNumColumns(idealColumnCount(window)); | |
}, []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nope for some reason that doesn't work either 🤔 I don't know why, this is very strange!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you want to get rid of the flash of one large column, I think you can avoid using JS to calculate the column width altogether. Remove the useEffect
and useState
and instead change the grid css to be:
diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
index c31eb3d..6f3f04a 100644
--- a/packages/site/src/pages/index.tsx
+++ b/packages/site/src/pages/index.tsx
@@ -45,11 +45,6 @@ const IndexPage = ({ data }) => {
return () => window.removeEventListener("keydown", handleKeyDown);
}, []);
- const [numColumns, setNumColumns] = useState(1);
- useEffect(() => {
- setNumColumns(Math.floor(window.outerWidth / 160));
- }, []);
-
return (
<Layout>
<Flex direction="column" align="center" justify="center">
@@ -81,7 +76,7 @@ const IndexPage = ({ data }) => {
</InputGroup>
{results.length > 0 ? (
<Grid
- templateColumns={`repeat(${numColumns > 5 ? 5 : numColumns}, 1fr)`}
+ templateColumns={`repeat(auto-fill, minmax(160px, 1fr))`}
gap={5}
>
{results.map((icon) => {
(sorry I don't know how to use the suggestion feature)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@aelfric Thanks for your code snippet, it fixed the issue!
Needs Github project link to top-right, imo. |
* Update peerDependencies to support Svelte 5 * Bump svelte version * Bump @testing-library/svelte version * Remove alias in vitest.config.ts that causes tests to fail due to deprecated svelte/internal API * Convert to svelte 5 syntax * Bump vite & @sveltejs/vite-plugin-svelte version * Fix error during render when children prop is missing & fix components being mounted on the server during tests * Update test snapshots to reflect the differences in the html generated by svelte 5 * Convert class attribute to new array syntax with built-in clsx * Convert export template to svelte 5 syntax
* Update peerDependencies to support Svelte 5 * Bump svelte version * Bump @testing-library/svelte version * Remove alias in vitest.config.ts that causes tests to fail due to deprecated svelte/internal API * Convert to svelte 5 syntax * Bump vite & @sveltejs/vite-plugin-svelte version * Fix error during render when children prop is missing & fix components being mounted on the server during tests * Update test snapshots to reflect the differences in the html generated by svelte 5 * Convert class attribute to new array syntax with built-in clsx * Convert export template to svelte 5 syntax
* Lucide svelte (#1) * Update peerDependencies to support Svelte 5 * Bump svelte version * Bump @testing-library/svelte version * Remove alias in vitest.config.ts that causes tests to fail due to deprecated svelte/internal API * Convert to svelte 5 syntax * Bump vite & @sveltejs/vite-plugin-svelte version * Fix error during render when children prop is missing & fix components being mounted on the server during tests * Update test snapshots to reflect the differences in the html generated by svelte 5 * Convert class attribute to new array syntax with built-in clsx * Convert export template to svelte 5 syntax * Move svelte 5 to separate directory * Update snapshots * Update docs * fix(icon): change variable declaration from let to const in Icon.svelte * Lucide svelte (#1) (#2727) * Update peerDependencies to support Svelte 5 * Bump svelte version * Bump @testing-library/svelte version * Remove alias in vitest.config.ts that causes tests to fail due to deprecated svelte/internal API * Convert to svelte 5 syntax * Bump vite & @sveltejs/vite-plugin-svelte version * Fix error during render when children prop is missing & fix components being mounted on the server during tests * Update test snapshots to reflect the differences in the html generated by svelte 5 * Convert class attribute to new array syntax with built-in clsx * Convert export template to svelte 5 syntax * Revert changes in lucide-svelte library * Update package lock * Update test files * Formatting * Update clean command * Fix build * Update packages * update deps * Fix export script * Format code * Revert version number change in package json * Update workflows --------- Co-authored-by: Aurélien Richard <[email protected]>
A new site for this Feather Icons fork. Here are some highlights:
icons
directory.