feat: Site #1

johnletey · 2020-06-09T17:05:59Z

Light Mode	Dark Mode

A new site for this Feather Icons fork. Here are some highlights:

Pull icon data from the icons directory.
- Site code in main repository.
Updated UI.
Simplify site: Use Next.js with TypeScript.

moeenio · 2020-06-10T08:06:08Z

I think we should have a master branch and a seperate site branch that contains the site.

johnletey · 2020-06-10T08:18:48Z

a seperate site branch that contains the site.

@locness3 I disagree with this, as the site is pulling from the icons directory, which is very useful for deploy previews of new icons.

However if the site were in a different branch that wouldn't happen.

moeenio · 2020-06-10T12:35:27Z

erm, okay i guess

moeenio · 2020-06-13T06:18:40Z

you might wanna change that

johnletey · 2020-06-13T08:32:06Z

@locness3 since the site code isn't deployed to NPM or anything, it's okay to leave this as is.

johnletey · 2020-06-13T08:33:44Z

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?

moeenio · 2020-06-13T11:04:25Z

I don't think so.

Also, we should find a unique name for the project, to avoid confusion

johnletey · 2020-06-13T11:09:40Z

we should find a unique name for the project

Completely agree! That will help when publishing packages etc!

Any ideas 😅

Also, might be good to transfer this repo to an org as well 🤔

moeenio · 2020-06-13T15:54:54Z

Any ideas 😅

Featherity? (feather + community) 😅

johnletey · 2020-06-13T16:24:21Z

Featherity? (feather + community)

I like it 😅 Created @featherity

moeenio · 2020-06-13T16:39:08Z

Didn't expect this name to be actually used 😂

johnletey · 2020-06-13T16:40:59Z

Lol idk I like it it's catchy 😂 We can always rename if we want 😅

johnletey · 2020-06-25T11:23:25Z

I have deployed the site, you can now view it at featherity.netlify.app.

Let me know what you think!

ericfennis · 2020-06-25T11:25:05Z

Looks awesome!
Is the darkmode gone?

johnletey · 2020-06-25T11:26:13Z

@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 😍

moeenio · 2020-07-01T05:36:33Z

It seems like the version at https://featherity.netlify.app doesn't have the new icons.

moeenio · 2020-07-01T05:37:13Z

Also, the page is missing a title

ericfennis · 2020-07-03T14:41:14Z

Should we merge this one?
Then the website will automatically be updated when new icons are added to the master branch.

moeenio · 2020-07-04T05:43:57Z

Should we merge this one?

We should first mark it "Ready for review"

johnletey · 2020-07-04T07:33:53Z

I'm all for merging this. If anyone has any comments let me know!

ericfennis · 2020-07-05T09:29:20Z

packages/site/src/pages/index.tsx

+
+  const [numColumns, setNumColumns] = useState(1);
+  useEffect(() => {
+    setNumColumns(Math.floor(window.outerWidth / 160));
+  }, []);


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.

Suggested change

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());

}, []);

@ericfennis You can't use the window attribute outside of the useEffect 😕

oh really, didn't know that.
But you can use It in useState right?

Suggested change

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));

}, []);

Nope for some reason that doesn't work either 🤔 I don't know why, this is very strange!

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)

@aelfric Thanks for your code snippet, it fixed the issue!

krisu5 · 2020-07-08T00:03:51Z

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

* 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]>

site: pull data from "icons" dir

51b0b78

johnletey self-assigned this Jun 9, 2020

johnletey mentioned this pull request Jun 9, 2020

Icon Request: Currency feathericons/feather#182

Open

John Letey added 5 commits June 9, 2020 19:04

site: display icons

ea5bd43

site: remove redundant code

72689ad

site: colour mode support

5ff3513

site: header

bd57502

site: order imports

7fb1d8d

John Letey added 2 commits June 10, 2020 09:13

site: search

05e45bf

site: add toast when copying icon

67e0247

John Letey added 2 commits June 10, 2020 10:48

site: styling

14fd4a4

site: hero

fb79e70

fix: disable theme toggle transitions

1eb89f8

johnletey mentioned this pull request Jun 13, 2020

feat: Add react package #4

Merged

John Letey added 2 commits June 13, 2020 12:56

chore: Merge master

366cf0a

feat: Use Yarn Workspaces

8609c2d

John Letey added 2 commits June 25, 2020 11:48

refactor: Update site deploy scripts

c7e2cbf

refactor: Remove dark mode for now

2f9fabf

John Letey added 5 commits July 1, 2020 09:25

chore: Merge master

649ae88

feat: Add site title

b175d39

refactor: Fix warning and format

0ac3b09

feat: Add dark mode back 👀

9953948

feat: Escape key to reset query

98f8bbd

moeenio marked this pull request as ready for review July 4, 2020 05:44

ericfennis reviewed Jul 5, 2020

View reviewed changes

ericfennis added 4 commits August 29, 2020 22:49

Fix by aelfric

58c442a

Merge branch 'master' into feat/site

ae84f2c

Add Github link

194efea

Fix #40

9d1d75a

ericfennis merged commit e3e4514 into master Aug 29, 2020

ericfennis deleted the feat/site branch August 29, 2020 21:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Site #1

feat: Site #1

johnletey commented Jun 9, 2020 •

edited

Loading

moeenio commented Jun 10, 2020 •

edited

Loading

johnletey commented Jun 10, 2020

moeenio commented Jun 10, 2020

moeenio commented Jun 13, 2020

johnletey commented Jun 13, 2020

johnletey commented Jun 13, 2020

moeenio commented Jun 13, 2020

johnletey commented Jun 13, 2020

moeenio commented Jun 13, 2020

johnletey commented Jun 13, 2020

moeenio commented Jun 13, 2020

johnletey commented Jun 13, 2020

johnletey commented Jun 25, 2020 •

edited

Loading

ericfennis commented Jun 25, 2020

johnletey commented Jun 25, 2020

moeenio commented Jul 1, 2020

moeenio commented Jul 1, 2020

ericfennis commented Jul 3, 2020

moeenio commented Jul 4, 2020

johnletey commented Jul 4, 2020

ericfennis Jul 5, 2020

johnletey Jul 5, 2020 •

edited

Loading

ericfennis Jul 5, 2020

johnletey Jul 5, 2020

aelfric Jul 8, 2020 •

edited

Loading

ericfennis Aug 29, 2020

krisu5 commented Jul 8, 2020

feat: Site #1

feat: Site #1

Conversation

johnletey commented Jun 9, 2020 • edited Loading

moeenio commented Jun 10, 2020 • edited Loading

johnletey commented Jun 10, 2020

moeenio commented Jun 10, 2020

moeenio commented Jun 13, 2020

johnletey commented Jun 13, 2020

johnletey commented Jun 13, 2020

moeenio commented Jun 13, 2020

johnletey commented Jun 13, 2020

moeenio commented Jun 13, 2020

johnletey commented Jun 13, 2020

moeenio commented Jun 13, 2020

johnletey commented Jun 13, 2020

johnletey commented Jun 25, 2020 • edited Loading

ericfennis commented Jun 25, 2020

johnletey commented Jun 25, 2020

moeenio commented Jul 1, 2020

moeenio commented Jul 1, 2020

ericfennis commented Jul 3, 2020

moeenio commented Jul 4, 2020

johnletey commented Jul 4, 2020

ericfennis Jul 5, 2020

Choose a reason for hiding this comment

johnletey Jul 5, 2020 • edited Loading

Choose a reason for hiding this comment

ericfennis Jul 5, 2020

Choose a reason for hiding this comment

johnletey Jul 5, 2020

Choose a reason for hiding this comment

aelfric Jul 8, 2020 • edited Loading

Choose a reason for hiding this comment

ericfennis Aug 29, 2020

Choose a reason for hiding this comment

krisu5 commented Jul 8, 2020

johnletey commented Jun 9, 2020 •

edited

Loading

moeenio commented Jun 10, 2020 •

edited

Loading

johnletey commented Jun 25, 2020 •

edited

Loading

johnletey Jul 5, 2020 •

edited

Loading

aelfric Jul 8, 2020 •

edited

Loading