Skip to content

Commit 0d79a58

Browse files
Barbapapazesautofix-ci[bot]
Barbapapazes
and
autofix-ci[bot]
authored
feat: add relations (#290)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 41877f5 commit 0d79a58

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+2000
-94
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,5 +81,8 @@
8181
"json",
8282
"jsonc",
8383
"yaml"
84+
],
85+
"cSpell.words": [
86+
"unjs"
8487
]
8588
}

‎app.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,25 @@ useSchemaOrg([
1010
],
1111
}),
1212
])
13+
14+
const route = useRoute()
15+
const isRelation = computed(() => {
16+
return route.name === 'relations'
17+
})
1318
</script>
1419

1520
<template>
1621
<Html>
1722
<Body class="font-sans dark:bg-gray-900">
1823
<NuxtLoadingIndicator color="#ECDC5A" />
1924

20-
<Header />
25+
<TheHeader :class="{ 'z-10 absolute top-0 left-0 right-0': isRelation }" />
2126

22-
<div class="px-4 container mx-auto xl:max-w-7xl">
27+
<div :class="{ 'px-4 container mx-auto xl:max-w-7xl': !isRelation }">
2328
<NuxtPage />
2429
</div>
2530

26-
<Footer />
31+
<TheFooter v-if="!isRelation" />
2732

2833
<UNotifications />
2934
</Body>

‎components/Footer.vue renamed to ‎components/TheFooter.vue

File renamed without changes.

‎components/Header.vue renamed to ‎components/TheHeader.vue

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ const navigation = [
1616
path: '/blog',
1717
title: 'Blog',
1818
},
19+
{
20+
path: '/relations',
21+
title: 'Relations',
22+
},
1923
].filter(Boolean) as { path: string, title: string }[]
2024
2125
const { data: stars } = await useFetch('/api/content/packages.json', {
@@ -49,9 +53,9 @@ function toDesignKit() {
4953

5054
<template>
5155
<div class="h-16 border-b border-gray-100 dark:border-gray-800">
52-
<header class="h-full px-4 container mx-auto xl:max-w-7xl md:px-6 grid grid-cols-2 lg:grid-cols-3 items-center">
56+
<header class="h-full px-4 container mx-auto xl:max-w-7xl md:px-6 grid grid-cols-2 lg:grid-cols-3 items-center bg-white/40 backdrop-blur-sm dark:bg-gray-900/60">
5357
<div class="flex items-center">
54-
<NuxtLink to="/?utm_source=unjs.io&utm_medium=header-icon" @click.right.prevent="toDesignKit()">
58+
<NuxtLink to="/?utm_source=unjs.io&utm_medium=header-icon&utm_campaign=unjs.io" @click.right.prevent="toDesignKit()">
5559
<AppLogo />
5660
</NuxtLink>
5761
</div>
@@ -87,22 +91,22 @@ function toDesignKit() {
8791
</nav>
8892

8993
<div class="flex justify-end items-center">
90-
<UTooltip text="Open Search" :shortcuts="[metaSymbol, 'K']">
94+
<UTooltip text="Open Search" :shortcuts="[metaSymbol, 'K']" :popper="{ adaptative: false, placement: 'bottom', strategy: 'absolute' }">
9195
<UButton size="md" icon="i-heroicons-magnifying-glass" color="gray" variant="ghost" :ui="{ size: { md: 'text-base' }, ...uiButton }" aria-label="Open Search" square @click="openSearch = true" />
9296
</UTooltip>
9397

94-
<UTooltip class="ml-1 lg:hidden" text="Open Navigation">
98+
<UTooltip class="ml-1 lg:hidden" text="Open Navigation" :popper="{ adaptative: false, placement: 'bottom', strategy: 'absolute' }">
9599
<UButton square size="md" variant="ghost" color="gray" icon="i-heroicons-bars-3-bottom-right" :ui="uiButton" aria-label="Open Navigation" @click="openNavigation = true" />
96100
</UTooltip>
97101

98-
<UTooltip class="ml-1 hidden lg:flex" text="GitHub Stars">
102+
<UTooltip class="ml-1 hidden lg:flex" text="GitHub Stars" :popper="{ adaptative: false, placement: 'bottom', strategy: 'absolute' }">
99103
<UButton size="md" variant="ghost" color="gray" :icon="github.icon" :to="github.url" :target="github.target" :aria-label="`Follow us on ${github.name}`" :ui="{ size: { md: 'text-base' }, ...uiButton }">
100104
{{ stars ? formatNumber(stars) : '' }}
101105
</UButton>
102106
</UTooltip>
103107
</div>
104108
</header>
109+
<NavigationModal v-model:open="openNavigation" :navigation="navigation" />
110+
<SearchModal v-model:open="openSearch" />
105111
</div>
106-
<NavigationModal v-if="navigation" v-model:open="openNavigation" :navigation="navigation" />
107-
<SearchModal v-model:open="openSearch" />
108112
</template>

‎components/blog/BlogCard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import type { Author } from '~/types/blog'
2+
import type { Author } from '~/types/author'
33
44
defineProps<{
55
path: string

‎components/learn/LearnCard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import type { Author } from '~/types/blog'
2+
import type { Author } from '~/types/author'
33
44
const props = defineProps<{
55
path: string

‎components/packages/PackagesCard.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ defineProps<{
44
description: string
55
path: string
66
stars: number
7-
monthlyDownloads?: number
8-
contributors?: number
7+
monthlyDownloads: number | null
8+
contributors: number | null
99
}>()
1010
</script>
1111

‎components/relations/RelationsAbout.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script setup lang="ts">
2+
const { metaSymbol } = useShortcuts()
3+
</script>
4+
5+
<template>
6+
<section class="prose dark:prose-invert">
7+
<p>
8+
Welcome to UnJS Relations, a tool to help you visualize the interdependencies between packages in the <strong>
9+
UnJS
10+
</strong> ecosystem and with other npm packages.
11+
</p>
12+
<p>
13+
<strong>
14+
UnJS
15+
</strong> is a large and <strong>complex ecosystem</strong>. It's not easy to get to grips with, to understand and can be very intimidating, especially for beginners.
16+
</p>
17+
<p>
18+
Despite this, it's very <strong>powerful</strong>, with packages that can be integrated into all your projects. Understanding and visualizing the links between the different packages could help you to <strong>better understand</strong> how the ecosystem is composed and articulated.
19+
</p>
20+
<p>
21+
To start using the tool, you can click on <em>UnJS Packages</em> or <em>npm Packages</em> in the menu to selection the packages you want to visualize. You can also use the settings to show or hide dependencies, devDependencies and children (packages using selected packages).
22+
</p>
23+
<p>
24+
Happy discovering! 🚀
25+
</p>
26+
<p>
27+
If you encounter bugs, feel free to <a href="https://github.com/unjs/websites/issues" target="_blank" rel="noopener">open an issue on GitHub</a>.
28+
</p>
29+
<p>
30+
For more informations or just to chat, you can <a href="https://github.com/unjs/community/discussions" target="_blank" rel="noopener">open a discussion on GitHub</a>.
31+
</p>
32+
<p>
33+
You can use multiple shortcuts to manipulate the interface:
34+
</p>
35+
<ul>
36+
<li>
37+
<kbd>{{ metaSymbol }}</kbd> + <kbd>m</kbd> toggle the menu
38+
</li>
39+
<li>
40+
<kbd>{{ metaSymbol }}</kbd> + <kbd>l</kbd> toggle the legend
41+
</li>
42+
<li>
43+
<kbd>{{ metaSymbol }}</kbd> + <kbd>i</kbd> toggle the info
44+
</li>
45+
<li>
46+
<kbd>{{ metaSymbol }}</kbd> + <kbd>h</kbd> open the GitHub discussions
47+
</li>
48+
</ul>
49+
</section>
50+
</template>

‎components/relations/RelationsGitHubForm.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts" setup>
2+
const emits = defineEmits<{
3+
add: [string]
4+
}>()
5+
6+
const input = defineModel<string>('input', { required: true })
7+
const loading = defineModel<boolean>('loading', { required: true })
8+
9+
function add() {
10+
emits('add', input.value)
11+
}
12+
</script>
13+
14+
<template>
15+
<form class="grow mt-1 flex gap-2 items-end" @submit.prevent="add">
16+
<UFormGroup class="grow" label="Add packages from GitHub">
17+
<UInput v-model="input" color="white" variant="outline" placeholder="nuxt/nuxt, adonisjs..." :ui="{ wrapper: 'grow' }" icon="i-simple-icons-github" />
18+
</UFormGroup>
19+
<UButton color="primary" :disabled="!input" size="sm" type="submit" :loading="loading">
20+
Add
21+
</UButton>
22+
</form>
23+
</template>

0 commit comments

Comments
 (0)