Skip to content

New website #1216

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.

Sign up for GitHub

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

Draft
colebemis wants to merge 14 commits into
base: main
Choose a base branch
from
Draft

New website #1216

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
154d0f9
Init astro site
colebemis Aug 20, 2023
580d47e
Move site to docs directory
colebemis Aug 20, 2023
2cc6d67
Install tailwind
colebemis Aug 20, 2023
af89f6b
Configure react
colebemis Aug 20, 2023
b9d5013
Render icon grid
colebemis Aug 20, 2023
f34a220
Update scripts
colebemis Aug 20, 2023
dbec94b
Add nvmrc
colebemis Aug 20, 2023
309224d
Update prebuild script
colebemis Aug 20, 2023
7a216c9
Implement search
colebemis Aug 20, 2023
72e279a
Design new site
colebemis Aug 20, 2023
f4207f9
Use Inter
colebemis Aug 20, 2023
0555720
Adjust styles
colebemis Aug 20, 2023
ea1677e
Clean up
colebemis Sep 15, 2023
7ca79bf
Start implementing responsive layout
colebemis Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Implement search
  • Loading branch information
@colebemis
colebemis committed Aug 20, 2023
commit 7a216c947974a50711527ca2d782f35791405c37
103 changes: 103 additions & 0 deletions docs/src/components/icon-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import React from 'react';
import iconsJson from '../../../dist/icons.json';
import tagsJson from '../../../src/tags.json';

const icons = Object.entries(iconsJson).map(([name, svg]) => {
const tags: Array<string> = tagsJson[name] || [];
return { name, svg, tags };
});

export function IconGrid() {
const [query, setQuery] = React.useState(() => {
if (typeof window !== 'undefined') {
return new URLSearchParams(window.location.search).get('query') || '';
}

return '';
});

const deferredQuery = React.useDeferredValue(query);

// Sync the query to the URL
React.useEffect(() => {
if (typeof window !== 'undefined') {
const url = new URL(window.location.href);

if (query) {
url.searchParams.set('query', query);
} else {
url.searchParams.delete('query');
}

window.history.replaceState({}, '', url.toString());
}
}, [query]);

const results = React.useMemo(() => {
if (!deferredQuery) {
return icons;
}

return icons.filter(name => {
return (
name.name.toLowerCase().includes(deferredQuery.toLowerCase()) ||
name.tags.some(tag =>
tag.toLowerCase().includes(deferredQuery.toLowerCase()),
)
);
});
}, [deferredQuery]);

const searchRef = React.useRef<HTMLInputElement>(null);

React.useEffect(() => {
function handleKeydown(event: KeyboardEvent) {
if (!searchRef.current) return;

if (event.key === '/') {
event.preventDefault();
searchRef.current.focus();
}
}

console.log('adding event listener');

window.addEventListener('keydown', handleKeydown);

return () => {
window.removeEventListener('keydown', handleKeydown);
};
}, []);

return (
<div>
<input
ref={searchRef}
className="w-full bg-bg px-4 py-3 border-b border-border sticky top-0 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-border-focus [&::-webkit-search-cancel-button]:appearance-none"
type="search"
placeholder={`Search ${icons.length} icons...`}
value={query}
onChange={event => setQuery(event.target.value)}
/>
<ul className="grid grid-cols-[repeat(auto-fill,minmax(4rem,1fr))]">
{results.map(icon => {
return (
<li className="w-full aspect-square grid place-items-center">
<svg
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
dangerouslySetInnerHTML={{ __html: icon.svg }}
/>
</li>
);
})}
</ul>
</div>
);
}
17 changes: 17 additions & 0 deletions docs/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
:root {
color-scheme: light dark;

--color-text: #000;
--color-bg: #fff;
--color-border: #ccc;
--color-border-focus: #0d99ff;
}

@media (prefers-color-scheme: dark) {
:root {
--color-text: #eeee;
--color-bg: #111;
--color-border: #333;
--color-border-focus: #0c8ce9;
}
}
27 changes: 4 additions & 23 deletions docs/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,12 @@
---
import icons from '../../../dist/icons.json';
import '../index.css';
import { IconGrid } from '../components/icon-grid';
---

<html>
<body>
<body class="text-text bg-bg">
<main>
<ul class="grid grid-cols-[repeat(auto-fill,minmax(4rem,1fr))]">
{
Object.entries(icons).map(([name, svg]) => {
return (
<li class="w-full aspect-square grid place-items-center">
<svg
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
set:html={svg}
/>
</li>
);
})
}
</ul>
<IconGrid client:load />
</main>
</body>
</html>
9 changes: 8 additions & 1 deletion docs/tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,14 @@
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
colors: {
transparent: 'transparent',
current: 'currentColor',
text: 'var(--color-text)',
bg: 'var(--color-bg)',
border: 'var(--color-border)',
'border-focus': 'var(--color-border-focus)',
},
},
plugins: [],
};