Skip to content

Commit de88db5

Browse files
MrCrayfishMrCrayfish
committed
📦 Add community addons section
1 parent 82b579c commit de88db5

4 files changed

Lines changed: 137 additions & 15 deletions

File tree

‎src/components/HomepageFeatures/index.js‎

Lines changed: 97 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import clsx from 'clsx';
22
import Heading from '@theme/Heading';
33
import styles from './styles.module.css';
44
import Link from '@docusaurus/Link';
5+
import BannerImage from '@site/static/img/vintage.png';
6+
import CurseForgeIcon from '@site/static/img/curseforge_icon.png';
57

68
const AddonDocumentationList = [
79
{
@@ -18,23 +20,94 @@ const AddonDocumentationList = [
1820
),
1921
action_text: 'View Guide'
2022
},
23+
{
24+
title: (
25+
<>
26+
Installing Addons <span class="badge badge--success">Easy</span>
27+
</>
28+
),
29+
link: '#',
30+
description: (
31+
<>
32+
This guide will show you how to download and install addons for Backpacked
33+
</>
34+
),
35+
action_text: 'Coming Soon'
36+
},
37+
]
38+
39+
const Addons = [
40+
{
41+
name: 'Backpacked: World of Colours',
42+
author: 'Beast135',
43+
author_avatar: 'https://static-cdn.jtvnw.net/jtv_user_pictures/11d756f3-a687-489a-a229-c39757625059-profile_image-150x150.png',
44+
author_link: 'https://www.curseforge.com/members/beast135',
45+
description: 'Adds dye variants of the Standard Backpack',
46+
link: 'https://www.curseforge.com/minecraft/mc-mods/backpacked-world-of-color',
47+
icon: 'https://media.forgecdn.net/avatars/thumbnails/1005/64/64/64/638526407638986123_animated.gif',
48+
},
49+
{
50+
name: 'Backpacked: Shells',
51+
author: 'Beast135',
52+
author_avatar: 'https://static-cdn.jtvnw.net/jtv_user_pictures/11d756f3-a687-489a-a229-c39757625059-profile_image-150x150.png',
53+
author_link: 'https://www.curseforge.com/members/beast135',
54+
description: 'Adds 2 cool new shell backpacks to Backpacked!',
55+
link: 'https://www.curseforge.com/minecraft/mc-mods/backpacked-shells',
56+
icon: 'https://media.forgecdn.net/avatars/thumbnails/1637/383/64/64/639048018777295430.png',
57+
},
58+
{
59+
name: 'MrCrayfish\'s Furniture Mod: Refurbished',
60+
author: 'MrCrayfish',
61+
author_avatar: 'https://static-cdn.jtvnw.net/jtv_user_pictures/4ce607d6-66e9-45b8-a5ea-db8577519da2-profile_image-150x150.jpeg',
62+
author_link: 'https://www.curseforge.com/members/mrcrayfish',
63+
description: 'Adds an exclusive Storage Cabinet backpack when this mod is installed alongside Backpacked. ',
64+
link: 'https://www.curseforge.com/minecraft/mc-mods/refurbished-furniture',
65+
icon: 'https://media.forgecdn.net/avatars/thumbnails/934/904/64/64/638411339753659456.png',
66+
},
2167
]
2268

2369
function Documentation({ title, description, link, action_text }) {
2470
return (
2571
<div className={clsx('col col--6 margin-bottom--lg')}>
26-
<div class="card-demo">
27-
<div class="card shadow--lw">
28-
<div class="card__header">
29-
<h3>{title}</h3>
30-
<p>{description}</p>
31-
</div>
32-
<div class="card__footer">
33-
<Link
34-
className="button button--secondary button--lg button--block"
35-
to={link}>
36-
{action_text}
37-
</Link>
72+
<div class="card shadow--lw fill-height">
73+
<div class="card__header">
74+
<h3>{title}</h3>
75+
<p>{description}</p>
76+
</div>
77+
<div class="card__footer">
78+
<Link
79+
className="button button--secondary button--lg button--block"
80+
to={link}>
81+
{action_text}
82+
</Link>
83+
</div>
84+
</div>
85+
</div>
86+
);
87+
}
88+
89+
function Addon({ name, link, author, author_avatar, author_link, description, icon }) {
90+
return (
91+
<div className={clsx('col col--12 margin-bottom--lg')}>
92+
<div class="card shadow--lw">
93+
<div class="card__body">
94+
<div class="container">
95+
<div class="row">
96+
<img src={icon} width={100} height={100}/>
97+
<div class="margin-left--md">
98+
<div class="addon-header">
99+
<h3 class="margin-bottom--sm">{name}</h3>
100+
<div class="avatar avatar-author avatar--xs margin-left--sm">
101+
<img class="avatar__photo avatar__photo--xs" src={author_avatar} />
102+
<div class="avatar__intro">
103+
<div class="avatar__name"><a href={author_link}>{author}</a></div>
104+
</div>
105+
</div>
106+
</div>
107+
<p class="margin-bottom--sm">{description}</p>
108+
<a class="button curseforge" href={link} target="_blank"><img src={CurseForgeIcon} height={12}/> CurseForge</a>
109+
</div>
110+
</div>
38111
</div>
39112
</div>
40113
</div>
@@ -45,16 +118,25 @@ function Documentation({ title, description, link, action_text }) {
45118
export default function HomepageFeatures() {
46119
return (
47120
<div>
121+
<div className={clsx('hero hero--backpacked how-to-center-a-div')}>
122+
<img src={BannerImage} width={250} height={250} />
123+
</div>
48124
<section className={styles.features}>
49125
<div className="container">
50-
<Heading as="h1">📦 Addons</Heading>
51-
<div className="row">
126+
<Heading as="h1">📙 Guides</Heading>
127+
<div className="row row--align-stretch">
52128
{AddonDocumentationList.map((props, idx) => (
53129
<Documentation key={idx} {...props} />
54130
))}
55131
</div>
132+
<Heading as="h1">🏘️ Community Addons</Heading>
133+
<div className="row row--align-stretch">
134+
{Addons.map((props, idx) => (
135+
<Addon key={idx} {...props} />
136+
))}
137+
</div>
56138
</div>
57139
</section>
58140
</div>
59141
);
60-
}
142+
}

‎src/css/custom.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,43 @@
3535
padding: 1em 1em 0;
3636
margin-bottom: 1em;
3737
}
38+
39+
.fill-height {
40+
min-height: 100%;
41+
}
42+
43+
.avatar-author {
44+
--ifm-badge-background-color: var(--ifm-color-secondary);
45+
--ifm-badge-border-color: var(--ifm-badge-background-color);
46+
background-color: var(--ifm-badge-background-color);
47+
border: var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);
48+
border-radius: var(--ifm-badge-border-radius);
49+
color: var(--ifm-badge-color);
50+
padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
51+
display: flex
52+
}
53+
54+
.avatar--xs {
55+
--ifm-avatar-photo-size: 1.5rem;
56+
--ifm-avatar-intro-margin: 0.5rem;
57+
}
58+
59+
.addon-header {
60+
display: flex;
61+
}
62+
63+
.curseforge {
64+
background-color: #eb622b;
65+
color: white;
66+
}
67+
68+
.how-to-center-a-div {
69+
display: flex;
70+
flex-direction: column;
71+
justify-content: center;
72+
align-items: center;
73+
}
74+
75+
.hero--backpacked {
76+
--ifm-hero-background-color: #c0ab9a;
77+
}

‎static/img/curseforge_icon.png‎

566 Bytes
Loading

‎static/img/vintage.png‎

984 KB
Loading

0 commit comments

Comments
 (0)