Skip to content

Commit 2489ea8

Browse files
DerGooglerDerGoogler
committed
website improvements
1 parent f344a71 commit 2489ea8

File tree

10 files changed

+431
-212
lines changed

10 files changed

+431
-212
lines changed

‎.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 140,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": false,
7+
"trailingComma": "es5",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"fluid": false
11+
}

‎docs/components/repository/ModuleItem.vue‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<script setup>
2+
import { toFormattedFileSize } from "../../helper/toFormattedFileSize";
3+
import VPLink from "../vite/VPLink.vue";
4+
5+
defineProps(["module", "params"]);
6+
</script>
7+
8+
<template>
9+
<VPLink decoration="none" :href="'repository/' + params.name + '/' + module.id">
10+
<div :class="$style.feature">
11+
<article :class="$style.box">
12+
<h2 :class="$style.title" :id="module.id">{{ module.name }}</h2>
13+
<span :class="$style.author"> {{ module.version }} ({{ module.versionCode }}) by {{ module.author }}</span>
14+
<span :class="$style.details">{{ module.description }}</span>
15+
<div :class="$style.actionsContainer">
16+
<Badge v-if="module.size" type="info" :text="toFormattedFileSize(module.size)" />
17+
<Badge v-if="module.categories" type="info" :text="module.categories[0]" />
18+
<Badge v-if="module.track.antifeatures" type="danger" text="Anti-Features" />
19+
</div>
20+
</article>
21+
</div>
22+
</VPLink>
23+
</template>
24+
25+
<style module>
26+
.feature {
27+
user-select: none;
28+
cursor: pointer;
29+
text-decoration: none !important;
30+
display: block;
31+
border: 1px solid var(--vp-c-bg-soft);
32+
border-radius: 12px;
33+
height: 100%;
34+
background-color: var(--vp-c-bg-soft);
35+
transition: border-color 0.25s, background-color 0.25s;
36+
}
37+
38+
.box {
39+
display: flex;
40+
flex-direction: column;
41+
padding: 24px;
42+
height: 100%;
43+
}
44+
45+
.title {
46+
margin: unset !important;
47+
padding-top: unset !important;
48+
border-top: unset !important;
49+
color: initial !important;
50+
line-height: 24px !important;
51+
font-size: 16px !important;
52+
font-weight: 600 !important;
53+
}
54+
55+
.author {
56+
flex-grow: 1;
57+
line-height: 24px;
58+
font-size: 13px;
59+
font-weight: 500;
60+
color: var(--vp-badge-tip-text);
61+
}
62+
63+
.details {
64+
flex-grow: 1;
65+
padding-top: 8px;
66+
line-height: 24px;
67+
font-size: 14px;
68+
font-weight: 500;
69+
color: var(--vp-c-text-2);
70+
}
71+
72+
.actionsContainer {
73+
display: flex;
74+
flex-wrap: wrap;
75+
margin: -8px;
76+
padding-top: 20px;
77+
gap: 4px;
78+
}
79+
</style>

‎docs/components/repository/RepoHeader.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script setup>
2+
import VPButton from "../vite/VPButton.vue";
3+
4+
defineProps(["repo"]);
5+
6+
const openUrl = (url) => {
7+
window.open(url);
8+
};
9+
</script>
10+
11+
<template>
12+
<div :class="$style.repoMetaContainer">
13+
<img v-if="repo.cover" :class="$style.repoCover" :src="repo.cover" />
14+
<span :class="$style.repoTitle">{{ repo.name }}</span>
15+
<span v-if="repo.description" :class="$style.repoDetails">{{ repo.description }}</span>
16+
<div v-if="repo.submission || repo.support || repo.donate" :class="$style.repoActions">
17+
<VPButton v-if="repo.submission" text="Submit Module" size="medium" theme="brand" :href="repo.submission" />
18+
<VPButton v-if="repo.support" text="Support" size="medium" theme="alt" :href="repo.support" />
19+
<VPButton v-if="repo.donate" text="Donate" size="medium" theme="sponsor" :href="repo.donate" />
20+
</div>
21+
</div>
22+
</template>
23+
24+
<style module>
25+
.repoMetaContainer {
26+
padding-bottom: 16px;
27+
}
28+
29+
.repoActions {
30+
display: flex;
31+
gap: 8px;
32+
padding: 16px 0px 16px 0px;
33+
}
34+
35+
.repoCover {
36+
width: 100%;
37+
margin-bottom: 16px;
38+
border-radius: 16px;
39+
}
40+
41+
.repoTitle {
42+
display: flex;
43+
letter-spacing: -0.02em;
44+
line-height: 40px;
45+
font-size: 32px;
46+
}
47+
48+
.repoDetails {
49+
flex-grow: 1;
50+
padding-top: 8px;
51+
line-height: 24px;
52+
font-size: 14px;
53+
font-weight: 500;
54+
color: var(--vp-c-text-2);
55+
}
56+
</style>

‎docs/components/vite/VPButton.vue‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<script setup lang="ts">
2+
import { computed } from "vue";
3+
import { EXTERNAL_URL_RE, normalizeLink } from "../../helper/vite-util";
4+
5+
interface Props {
6+
tag?: string;
7+
size?: "medium" | "big";
8+
theme?: "brand" | "alt" | "sponsor";
9+
text: string;
10+
href?: string;
11+
target?: string;
12+
rel?: string;
13+
}
14+
const props = withDefaults(defineProps<Props>(), {
15+
size: "medium",
16+
theme: "brand",
17+
});
18+
19+
const isExternal = computed(() => props.href && EXTERNAL_URL_RE.test(props.href));
20+
21+
const component = computed(() => {
22+
return props.tag || (props.href ? "a" : "button");
23+
});
24+
</script>
25+
26+
<template>
27+
<component
28+
:is="component"
29+
class="VPButton"
30+
:class="[size, theme]"
31+
:href="href ? normalizeLink(href) : undefined"
32+
:target="props.target ?? (isExternal ? '_blank' : undefined)"
33+
:rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
34+
>
35+
{{ text }}
36+
</component>
37+
</template>
38+
39+
<style scoped>
40+
.VPButton {
41+
text-decoration: none;
42+
display: inline-block;
43+
border: 1px solid transparent;
44+
text-align: center;
45+
font-weight: 600;
46+
white-space: nowrap;
47+
transition: color 0.25s, border-color 0.25s, background-color 0.25s;
48+
}
49+
50+
.VPButton:active {
51+
transition: color 0.1s, border-color 0.1s, background-color 0.1s;
52+
}
53+
54+
.VPButton.medium {
55+
border-radius: 20px;
56+
padding: 0 20px;
57+
line-height: 38px;
58+
font-size: 14px;
59+
}
60+
61+
.VPButton.big {
62+
border-radius: 24px;
63+
padding: 0 24px;
64+
line-height: 46px;
65+
font-size: 16px;
66+
}
67+
68+
.VPButton.brand {
69+
border-color: var(--vp-button-brand-border);
70+
color: var(--vp-button-brand-text);
71+
background-color: var(--vp-button-brand-bg);
72+
}
73+
74+
.VPButton.brand:hover {
75+
border-color: var(--vp-button-brand-hover-border);
76+
color: var(--vp-button-brand-hover-text);
77+
background-color: var(--vp-button-brand-hover-bg);
78+
}
79+
80+
.VPButton.brand:active {
81+
border-color: var(--vp-button-brand-active-border);
82+
color: var(--vp-button-brand-active-text);
83+
background-color: var(--vp-button-brand-active-bg);
84+
}
85+
86+
.VPButton.alt {
87+
border-color: var(--vp-button-alt-border);
88+
color: var(--vp-button-alt-text);
89+
background-color: var(--vp-button-alt-bg);
90+
}
91+
92+
.VPButton.alt:hover {
93+
border-color: var(--vp-button-alt-hover-border);
94+
color: var(--vp-button-alt-hover-text);
95+
background-color: var(--vp-button-alt-hover-bg);
96+
}
97+
98+
.VPButton.alt:active {
99+
border-color: var(--vp-button-alt-active-border);
100+
color: var(--vp-button-alt-active-text);
101+
background-color: var(--vp-button-alt-active-bg);
102+
}
103+
104+
.VPButton.sponsor {
105+
border-color: var(--vp-button-sponsor-border);
106+
color: var(--vp-button-sponsor-text);
107+
background-color: var(--vp-button-sponsor-bg);
108+
}
109+
110+
.VPButton.sponsor:hover {
111+
border-color: var(--vp-button-sponsor-hover-border);
112+
color: var(--vp-button-sponsor-hover-text);
113+
background-color: var(--vp-button-sponsor-hover-bg);
114+
}
115+
116+
.VPButton.sponsor:active {
117+
border-color: var(--vp-button-sponsor-active-border);
118+
color: var(--vp-button-sponsor-active-text);
119+
background-color: var(--vp-button-sponsor-active-bg);
120+
}
121+
</style>

‎docs/components/vite/VPLink.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script lang="ts" setup>
2+
import { computed } from "vue";
3+
import { EXTERNAL_URL_RE, normalizeLink } from "../../helper/vite-util";
4+
5+
const props = defineProps<{
6+
tag?: string;
7+
href?: string;
8+
noIcon?: boolean;
9+
target?: string;
10+
rel?: string;
11+
decoration?: string;
12+
}>();
13+
14+
const tag = computed(() => props.tag ?? (props.href ? "a" : "span"));
15+
16+
const decoration = computed(() => props.decoration ?? "underline");
17+
const isExternal = computed(() => (props.href && EXTERNAL_URL_RE.test(props.href)) || props.target === "_blank");
18+
</script>
19+
20+
<template>
21+
<component
22+
:is="tag"
23+
class="VPLink"
24+
:style="{
25+
cursor: props.href ? 'pointer' : 'default',
26+
textDecoration: decoration,
27+
}"
28+
:class="{
29+
link: href,
30+
'vp-external-link-icon': isExternal,
31+
'no-icon': noIcon,
32+
}"
33+
:href="href ? normalizeLink(href) : undefined"
34+
:target="target ?? (isExternal ? '_blank' : undefined)"
35+
:rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
36+
>
37+
<slot />
38+
</component>
39+
</template>

0 commit comments

Comments
 (0)