@smbcloud / solanastockholmmeetup
Code Commits Issues Pulls Cloud Agent CI/CD
dependabot/npm_and_yarn/eslint-plugin-astro-1.5.0
dependabot/npm_and_yarn/eslint-9.39.1 dependabot/npm_and_yarn/eslint-plugin-astro-1.5.0 dependabot/npm_and_yarn/eslint/js-9.39.1 dependabot/npm_and_yarn/katex-0.16.25 dependabot/npm_and_yarn/sharp-0.34.5 dependabot/npm_and_yarn/tailwindcss/vite-4.1.17 dependabot/npm_and_yarn/tsx-4.20.6 dependabot/npm_and_yarn/typescript-eslint-8.46.4 dependabot/npm_and_yarn/typescript-eslint/eslint-plugin-8.36.0 dependabot/npm_and_yarn/typescript-eslint/parser-8.46.4 main
astro 120 lines 2.47 KB
Raw
1 ---
2 import { getEntry } from 'astro:content'
3 import { render } from 'astro:content'
4 import { Image } from 'astro:assets'
5
6 const aboutEntry = await getEntry('about', 'about')
7 // Check if there is actual content (excluding comments)
8 const hasContent = aboutEntry?.body
9 ? aboutEntry.body.replace(/<!--[\s\S]*?-->/g, '').trim().length > 0
10 : false
11 const { Content } = hasContent && aboutEntry ? await render(aboutEntry) : { Content: null }
12 ---
13
14 {
15 hasContent && Content && (
16 <div class="about prose">
17 <div class="app-header">
18 <Image
19 src="/images/1f3f5-fe0f.png"
20 alt="SuperTeam Stockholm App Icon"
21 width="120"
22 height="120"
23 class="app-icon"
24 />
25 </div>
26 <Content />
27 <div id="join-us" class="download-badges">
28 <h2>Join Us</h2>
29 <div class="badge-container">
30 <a
31 href="https://t.me/+H5UTU3562KoyYTA8"
32 target="_blank"
33 class="store-badge"
34 aria-label="Join our Telegram channel"
35 >
36 <img
37 src="https://upload.wikimedia.org/wikipedia/commons/8/82/Telegram_logo.svg"
38 alt="Join our Telegram channel"
39 class="badge-image"
40 />
41 </a>
42 </div>
43 </div>
44 </div>
45 )
46 }
47
48 <style>
49 .about:not(:empty) {
50 margin-bottom: 1.25rem;
51 }
52
53 .app-header {
54 text-align: center;
55 margin-bottom: 2rem;
56 }
57
58 .app-icon {
59 border-radius: 22%;
60 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
61 }
62
63 .download-badges {
64 margin-top: 3rem;
65 padding-top: 2rem;
66 border-top: 1px solid var(--border-color, #e5e7eb);
67 text-align: center;
68 scroll-margin-top: 2rem;
69 }
70
71 .download-badges h2 {
72 margin-bottom: 1.5rem;
73 font-size: 1.5rem;
74 }
75
76 .badge-container {
77 display: flex;
78 justify-content: center;
79 align-items: center;
80 gap: 1rem;
81 flex-wrap: wrap;
82 margin-bottom: 1rem;
83 }
84
85 .store-badge {
86 display: inline-block;
87 transition:
88 transform 0.2s ease,
89 opacity 0.2s ease;
90 }
91
92 .store-badge:hover {
93 transform: scale(1.05);
94 opacity: 0.9;
95 }
96
97 .badge-image {
98 height: 50px;
99 width: auto;
100 display: block;
101 }
102
103 .coming-soon {
104 font-size: 0.9rem;
105 color: var(--text-secondary, #6b7280);
106 font-style: italic;
107 margin-top: 0.5rem;
108 }
109
110 @media (max-width: 640px) {
111 .badge-container {
112 flex-direction: column;
113 gap: 0.75rem;
114 }
115
116 .badge-image {
117 height: 45px;
118 }
119 }
120 </style>