Skip to content

Add Fluxer chat link to PlasmaTrap info page, mark Discord as legacy #38

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

Merged
PrivateGER merged 1 commit into from
Jul 28, 2026
Merged

Add Fluxer chat link to PlasmaTrap info page, mark Discord as legacy #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added packages/frontend/assets/fluxer.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
137 changes: 118 additions & 19 deletions packages/frontend/src/pages/services.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import cobaltlogo from '/client-assets/cobalt.png';
import excalidrawlogo from '/client-assets/excalidraw.svg';
import pipedlogo from '/client-assets/piped.svg';
import uptimekumalogo from '/client-assets/uptimekuma.svg';
import fluxerlogo from '/client-assets/fluxer.png';
import MkMention from '@/components/MkMention.vue';

definePage(() => ({
Expand All @@ -43,17 +44,25 @@ definePage(() => ({
Your home in the fediverse. PlasmaTrap is more than just a Sharkey server – we offer many unique features and host various services for our community.
</p>

<!-- Discord link -->
<div class="discord-section">
<!-- Chat links -->
<div class="chat-section">
<a href="https://chat.plasmatrap.com/" target="_blank" class="fluxer-link">
<img :src="fluxerlogo" alt="Fluxer logo" class="fluxer-logo"/>
<div class="fluxer-text">
<span class="fluxer-title">Join our Fluxer <span class="fluxer-badge">New</span></span>
<span class="fluxer-subtitle">Chat with the community on our own instance</span>
</div>
</a>

<a href="https://discord.gg/2yFXBDAPAJ" target="_blank" class="discord-link">
<div class="discord-icon-container">
<svg width="24" height="18" viewBox="0 0 65 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41.2351 0C40.6164 1.09866 40.0607 2.2352 39.5556 3.397C34.7569 2.67719 29.8697 2.67719 25.0584 3.397C24.5658 2.2352 23.9976 1.09866 23.3788 0C18.8705 0.770324 14.4759 2.12155 10.3085 4.02841C2.04967 16.2652 -0.185531 28.1863 0.925755 39.9432C5.76238 43.517 11.1799 46.2447 16.951 47.9874C18.2517 46.2447 19.4009 44.3883 20.3859 42.4562C18.5169 41.7616 16.7111 40.8903 14.981 39.88C15.4356 39.5517 15.8776 39.2107 16.307 38.8824C26.4475 43.6559 38.1917 43.6559 48.3449 38.8824C48.7742 39.236 49.2162 39.577 49.6708 39.88C47.9408 40.9029 46.1349 41.7616 44.2533 42.4688C45.2383 44.4009 46.3875 46.2573 47.6882 48C53.4593 46.2573 58.8768 43.5422 63.7134 39.9684C65.0268 26.3299 61.4656 14.5099 54.3054 4.04104C50.1507 2.13418 45.7561 0.782952 41.2478 0.0252565L41.2351 0ZM21.8003 32.7072C18.6811 32.7072 16.0923 29.8785 16.0923 26.3804C16.0923 22.8824 18.5801 20.041 21.7876 20.041C24.9952 20.041 27.5461 22.895 27.4956 26.3804C27.4451 29.8658 24.9826 32.7072 21.8003 32.7072ZM42.8389 32.7072C39.7071 32.7072 37.1436 29.8785 37.1436 26.3804C37.1436 22.8824 39.6314 20.041 42.8389 20.041C46.0465 20.041 48.5848 22.895 48.5343 26.3804C48.4838 29.8658 46.0213 32.7072 42.8389 32.7072Z" fill="white"/>
</svg>
</div>
<div class="discord-text">
<span class="discord-title">Join our Discord</span>
<span class="discord-subtitle">Connect with the community</span>
<span class="discord-title">Discord <span class="legacy-badge">Legacy</span></span>
<span class="discord-subtitle">Our previous community chat</span>
</div>
</a>
</div>
Expand Down Expand Up @@ -225,35 +234,108 @@ definePage(() => ({
</template>

<style scoped lang="scss">
.discord-section {
.chat-section {
margin: 2rem 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}

.discord-link {
@keyframes fluxer-shimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.fluxer-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 16px;
text-decoration: none;
color: var(--MI_THEME-fg);
padding: 16px 24px;
background: linear-gradient(135deg, color-mix(in srgb, #5865F2 12%, transparent), color-mix(in srgb, #7289DA 8%, transparent));
border: 1px solid color-mix(in srgb, #5865F2 25%, transparent);
padding: 18px 28px;
background: linear-gradient(135deg, color-mix(in srgb, #4641D9 14%, transparent), color-mix(in srgb, #6A66F0 10%, transparent), color-mix(in srgb, #4641D9 14%, transparent));
background-size: 200% 200%;
animation: fluxer-shimmer 6s ease infinite;
border: 1px solid color-mix(in srgb, #4641D9 35%, transparent);
border-radius: 16px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 16px color-mix(in srgb, #5865F2 15%, transparent), 0 2px 8px color-mix(in srgb, #000 10%, transparent);
box-shadow: 0 4px 20px color-mix(in srgb, #4641D9 20%, transparent), 0 2px 8px color-mix(in srgb, #000 10%, transparent);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px color-mix(in srgb, #5865F2 25%, transparent), 0 4px 12px color-mix(in srgb, #000 15%, transparent);
transform: translateY(-2px) scale(1.01);
box-shadow: 0 8px 32px color-mix(in srgb, #4641D9 35%, transparent), 0 4px 12px color-mix(in srgb, #6A66F0 20%, transparent);
}
}

.discord-icon-container {
padding: 12px;
background: linear-gradient(135deg, #5865F2, #7289DA);
.fluxer-logo {
width: 48px;
height: 48px;
border-radius: 12px;
box-shadow: 0 2px 8px color-mix(in srgb, #5865F2 30%, transparent);
box-shadow: 0 2px 12px color-mix(in srgb, #4641D9 40%, transparent);
}

.fluxer-text {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}

.fluxer-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 1.15em;
letter-spacing: -0.02em;
}

.fluxer-badge {
padding: 2px 8px;
font-size: 0.6em;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(135deg, #4641D9, #6A66F0);
border-radius: 999px;
box-shadow: 0 1px 6px color-mix(in srgb, #6A66F0 40%, transparent);
}

.fluxer-subtitle {
font-size: 0.85em;
opacity: 0.8;
font-weight: 400;
}

.discord-link {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--MI_THEME-fg);
padding: 10px 18px;
opacity: 0.7;
background: color-mix(in srgb, #5865F2 6%, transparent);
border: 1px solid color-mix(in srgb, #5865F2 15%, transparent);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

&:hover {
opacity: 1;
transform: translateY(-1px);
box-shadow: 0 4px 16px color-mix(in srgb, #5865F2 20%, transparent);
}
}

.discord-icon-container {
padding: 8px;
background: linear-gradient(135deg, color-mix(in srgb, #5865F2 70%, #888), color-mix(in srgb, #7289DA 70%, #888));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -263,17 +345,34 @@ definePage(() => ({
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}

.discord-title {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 1.1em;
font-size: 0.95em;
letter-spacing: -0.02em;
}

.discord-subtitle {
font-size: 0.85em;
.legacy-badge {
padding: 2px 8px;
font-size: 0.65em;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--MI_THEME-fg);
opacity: 0.8;
background: color-mix(in srgb, var(--MI_THEME-fg) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--MI_THEME-fg) 15%, transparent);
border-radius: 999px;
}

.discord-subtitle {
font-size: 0.8em;
opacity: 0.7;
font-weight: 400;
}
</style>
Loading