mirror of
https://github.com/Xevion/icons.git
synced 2025-12-06 03:15:24 -06:00
Switch to Next.js
This commit is contained in:
Xevion
79
README.md
79
README.md
@@ -1,54 +1,57 @@
|
||||
# Astro Starter Kit: Basics
|
||||
# icons
|
||||
|
||||
```
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
The `react-icons` demo page is great, providing a fast search and a decent view into
|
||||
each of the various icon providers it includes.
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
But it could be better.
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
This project intends to
|
||||
- Use Next.js for an optimized React static-site generator
|
||||
- Utilize Vercel for builds & fast hosting
|
||||
- Use hooks to regenerate & update React-Icons to the latest version constantly
|
||||
- Use OpenAI's GPT-3 to suggest keywords
|
||||
|
||||
|
||||
## Builds
|
||||
|
||||
This project requires a complicated build flow in order to work perfectly.
|
||||
- The latest React-Icons must be pulled at build time.
|
||||
- The Cloudflare KV API & OpenAI APIs are contacted to acquire keyword suggestions for the various icons in the pack.
|
||||
- All changes fetched from the APIs must be updated in Algolia.
|
||||
|
||||
## 🚀 Project Structure
|
||||
## Filter by subset quickly
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
## Display Order
|
||||
Currently, React Icons displays icons in a set ordered manner - each icon is filtered inside the set, and the sets render in the same order each time.
|
||||
Not only does this seem inefficient and strange, but it doesn't offer any ability to order by keyword matching.
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Card.astro
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.astro
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
## Icon List
|
||||
The total icon list of all of these thousands of icons needs to be made available for searching at build time before we
|
||||
begin a migration to build time export & Algolia.
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
## Element Flash & Animation
|
||||
If possible, I'd like to animate the appearance, disappearance & shifting of the various Icons smoothly.
|
||||
The major issue with React Icons currently is that searching creates a flash of content.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
## Most Popular Icons Display
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
At build time, we can fetch the most popular used icons
|
||||
|
||||
## 🧞 Commands
|
||||
## Icon Popularity Analytics
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
Icon popularity can be measured by searches & interactions through the Algolia API.
|
||||
- When an icon is hovered over for more than ~1.5 seconds.
|
||||
- When an icon is clicked (to copy), a strong interaction is measured.
|
||||
|
||||
| Command | Action |
|
||||
| :--------------------- | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro --help` | Get help using the Astro CLI |
|
||||
## Pages
|
||||
|
||||
## 👀 Want to learn more?
|
||||
- `/` The index will show a list of all of the supported icon sets, the number of icons currently available, and an
|
||||
icon or image display the logo of the given set. Hopefully, each of the sets has a logo of itself.
|
||||
- `/[id]` Statically generated, each of the sets will have it's own page using just the identifier. They will be statically pulled from the icon manifests
|
||||
and have another search bar, but it only searches just the given icon set. A button will be shown to move the search from the given
|
||||
icon set to the global set.
|
||||
- `/settings` Any settings I come up with will be on this page. This site is static and will
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
## Algolia Search
|
||||
|
||||
At build time, we'll generate a list of all the current icons and output it into a JSON file.
|
||||
We'll then query
|
||||
Reference in New Issue
Block a user