From d1e528fd95ad4cf6a91d226ccaef77815698c013 Mon Sep 17 00:00:00 2001 From: Eric Fennis Date: Mon, 25 Mar 2024 16:35:43 +0100 Subject: [PATCH] feat(site): Add team section and subtle ads (#2016) * Add team member cards * finish up * Final improvements * Add ads * Fix lint errors * Update docs/.vitepress/data/teamData.json Co-authored-by: Jakob Guddas * Update docs/.vitepress/data/teamData.json Co-authored-by: Karsa --------- Co-authored-by: Jakob Guddas Co-authored-by: Karsa --- docs/.vitepress/data/teamData.json | 48 +++++++++ .../theme/components/base/Badge.vue | 1 - .../theme/components/base/CardGrid.vue | 12 +-- .../theme/components/base/GridSection.vue | 32 +----- .../components/home/HomeHeroIconsCard.vue | 7 -- .../components/home/HomePackagesSection.vue | 11 +-- .../components/home/HomeSectionTitle.vue | 26 +++++ .../theme/components/home/HomeSponsorCard.vue | 46 +++++++++ .../theme/components/home/HomeTeamSection.vue | 91 ++++++++++++++++++ .../theme/components/home/TeamMemberCard.vue | 91 ++++++++++++++++++ .../components/icons/CarbonAdOverlay.vue | 83 ++++++++++++++++ .../components/icons/IconDetailOverlay.vue | 16 +-- .../theme/components/icons/IconItem.vue | 3 +- .../icons/IconsCategoryOverview.vue | 11 ++- .../theme/components/icons/IconsOverview.vue | 12 ++- .../theme/components/packages/PackageList.vue | 31 +----- .../components/showcase/ShowcaseList.vue | 29 ------ docs/.vitepress/vue-shim.d.ts | 8 +- docs/icons/categories.md | 1 - docs/index.md | 2 + docs/public/open-collective.png | Bin 0 -> 6698 bytes 21 files changed, 435 insertions(+), 126 deletions(-) create mode 100644 docs/.vitepress/data/teamData.json create mode 100644 docs/.vitepress/theme/components/home/HomeSectionTitle.vue create mode 100644 docs/.vitepress/theme/components/home/HomeSponsorCard.vue create mode 100644 docs/.vitepress/theme/components/home/HomeTeamSection.vue create mode 100644 docs/.vitepress/theme/components/home/TeamMemberCard.vue create mode 100644 docs/.vitepress/theme/components/icons/CarbonAdOverlay.vue create mode 100644 docs/public/open-collective.png diff --git a/docs/.vitepress/data/teamData.json b/docs/.vitepress/data/teamData.json new file mode 100644 index 000000000..ac71685fa --- /dev/null +++ b/docs/.vitepress/data/teamData.json @@ -0,0 +1,48 @@ +[ + { + "name": "Eric Fennis", + "title": "Creator of Lucide & Software engineer @nedap", + "image": "https://github.com/ericfennis.png?size=192", + "sponsor": "https://github.com/sponsors/ericfennis", + "socialLinks": [ + { + "icon": "github", + "link": "https://github.com/ericfennis" + }, + { + "icon": "x", + "link": "https://github.com/ericfennis" + } + ] + }, + { + "name": "Karsa Rigó", + "title": "Maintainer of Lucide & Software engineer @sztaki", + "image": "https://github.com/karsa-mistmere.png?size=192", + "socialLinks": [ + { + "icon": "github", + "link": "https://github.com/karsa-mistmere" + }, + { + "icon": "linkedin", + "link": "https://www.linkedin.com/in/karsamistmere" + } + ] + }, + { + "name": "jguddas", + "title": "Maintainer of Lucide & Software engineer @lego", + "image": "https://github.com/jguddas.png?size=192", + "socialLinks": [ + { + "icon": "github", + "link": "https://github.com/jguddas" + }, + { + "icon": "linkedin", + "link": "https://www.linkedin.com/in/jguddas" + } + ] + } +] diff --git a/docs/.vitepress/theme/components/base/Badge.vue b/docs/.vitepress/theme/components/base/Badge.vue index aabe58c56..0abedf2d6 100644 --- a/docs/.vitepress/theme/components/base/Badge.vue +++ b/docs/.vitepress/theme/components/base/Badge.vue @@ -1,6 +1,5 @@ + + + + diff --git a/docs/.vitepress/theme/components/home/HomeSponsorCard.vue b/docs/.vitepress/theme/components/home/HomeSponsorCard.vue new file mode 100644 index 000000000..3c3fd726a --- /dev/null +++ b/docs/.vitepress/theme/components/home/HomeSponsorCard.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/docs/.vitepress/theme/components/home/HomeTeamSection.vue b/docs/.vitepress/theme/components/home/HomeTeamSection.vue new file mode 100644 index 000000000..e128ca6d4 --- /dev/null +++ b/docs/.vitepress/theme/components/home/HomeTeamSection.vue @@ -0,0 +1,91 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/home/TeamMemberCard.vue b/docs/.vitepress/theme/components/home/TeamMemberCard.vue new file mode 100644 index 000000000..8d472e8ea --- /dev/null +++ b/docs/.vitepress/theme/components/home/TeamMemberCard.vue @@ -0,0 +1,91 @@ + + + + + + + diff --git a/docs/.vitepress/theme/components/icons/CarbonAdOverlay.vue b/docs/.vitepress/theme/components/icons/CarbonAdOverlay.vue new file mode 100644 index 000000000..548e15b20 --- /dev/null +++ b/docs/.vitepress/theme/components/icons/CarbonAdOverlay.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue b/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue index ec5150953..9dc8d21de 100644 --- a/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue +++ b/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue @@ -13,12 +13,18 @@ import { computedAsync } from '@vueuse/core'; import { satisfies } from 'semver'; const props = defineProps<{ - iconName: string + iconName: string | null }>() +const { go } = useRouter() + const icon = computedAsync(async () => { if (props.iconName) { - return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity + try { + return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity + } catch (err) { + go(`/icons/${props.iconName}`) + } } return null }, null) @@ -36,8 +42,6 @@ function onClose() { emit('close') } -const { go } = useRouter() - const CloseIcon = createLucideIcon('Close', x) const Expand = createLucideIcon('Expand', expand) @@ -144,11 +148,11 @@ const Expand = createLucideIcon('Expand', expand) } .drawer-enter-active { - transition: all 0.2s cubic-bezier(.21,.8,.46,.9); + transition: opacity 0.5s, transform 0.25s ease; } .drawer-leave-active { - transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1); + transition: opacity 0.25s ease, transform 1.6s ease-out; } .drawer-enter-from, diff --git a/docs/.vitepress/theme/components/icons/IconItem.vue b/docs/.vitepress/theme/components/icons/IconItem.vue index 6bfa6be5b..e02564237 100644 --- a/docs/.vitepress/theme/components/icons/IconItem.vue +++ b/docs/.vitepress/theme/components/icons/IconItem.vue @@ -52,8 +52,7 @@ async function navigateToIcon(event) { event.preventDefault() window.history.pushState({}, '', `/icons/${props.name}`) emit('setActiveIcon', props.name) - } - else { + } else { event.preventDefault() go(`/icons/${props.name}`) } diff --git a/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue b/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue index 19b9faf81..bcfbbd018 100644 --- a/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue +++ b/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue @@ -12,6 +12,7 @@ import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core'; import chunkArray from '../../utils/chunkArray'; import { CategoryRow } from './IconsCategory.vue'; import useScrollToCategory from '../../composables/useScrollToCategory'; +import CarbonAdOverlay from './CarbonAdOverlay.vue'; const ICON_SIZE = 56; const ICON_GRID_GAP = 8; @@ -133,6 +134,12 @@ function onFocusSearchInput() { const NoResults = defineAsyncComponent(() => import('./NoResults.vue')); const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue')); + +function handleCloseDrawer() { + setActiveIconName(''); + + window.history.pushState({}, '', '/icons/categories'); +} diff --git a/docs/.vitepress/theme/components/showcase/ShowcaseList.vue b/docs/.vitepress/theme/components/showcase/ShowcaseList.vue index cf1a58b35..340ef299f 100644 --- a/docs/.vitepress/theme/components/showcase/ShowcaseList.vue +++ b/docs/.vitepress/theme/components/showcase/ShowcaseList.vue @@ -40,33 +40,4 @@ import ShowcaseListItem from "./ShowcaseListItem.vue"; .package-group { margin-bottom: 96px; } - -.grid { - display: flex; - flex-wrap: wrap; - align-items: stretch; - justify-content: center; - align-content: space-evenly; - box-sizing: border-box; - margin: -8px; -} - -.grid > * { - flex-basis: 100%; - box-sizing: border-box; - padding: 8px; -} - -@media (min-width: 960px) { - .grid > * { - flex-basis: 50%; - } -} - -@media (min-width: 1280px) { - .grid > * { - flex-basis: 33.33%; - } -} - diff --git a/docs/.vitepress/vue-shim.d.ts b/docs/.vitepress/vue-shim.d.ts index 90ab0a63e..478b6d7ad 100644 --- a/docs/.vitepress/vue-shim.d.ts +++ b/docs/.vitepress/vue-shim.d.ts @@ -1,5 +1,7 @@ +import { IconNode } from 'lucide-vue-next/src/createLucideIcon'; +import Vue from 'vue'; + declare module '*.vue' { - import Vue from 'vue'; export default Vue; } @@ -16,3 +18,7 @@ declare const resvg_wasm: RequestInfo | URL | Response | BufferSource | WebAssem declare module 'node:module' { function createRequire(filename: string): NodeRequire; } + +declare module '*.node.json' { + export default IconNode; +} diff --git a/docs/icons/categories.md b/docs/icons/categories.md index 619c62e4c..6b211ec9e 100644 --- a/docs/icons/categories.md +++ b/docs/icons/categories.md @@ -10,7 +10,6 @@ import { data } from './icons.data.ts' import { data as categoriesData } from './categories.data.ts' import PageContainer from '../.vitepress/theme/components/PageContainer.vue' import IconsCategoryOverview from '../.vitepress/theme/components/icons/IconsCategoryOverview.vue' -
diff --git a/docs/index.md b/docs/index.md index 28436c656..0eae54567 100644 --- a/docs/index.md +++ b/docs/index.md @@ -56,7 +56,9 @@ features: + diff --git a/docs/public/open-collective.png b/docs/public/open-collective.png new file mode 100644 index 0000000000000000000000000000000000000000..c24d24d004925bf6300c2ade9c5e594347dc5db2 GIT binary patch literal 6698 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