copy from default-theme

.preview/config.ts

@@ -1,4 +1,5 @@
 import { encode } from '@devprotocol/clubs-core'
+import { GlobalConfig, HomeConfig } from '../src/types'
 
 export default () =>
 	encode({
@@ -9,19 +10,32 @@ export default () =>
 		propertyAddress: '',
 		chainId: 137,
 		rpcUrl: 'https://polygon-rpc.com/',
-		adminRolePoints: 50,
+		adminRolePoints: 0,
 		plugins: [
 			{
-				id: 'example-theme',
-				options: [],
-			},
-			{
-				id: 'unique-and-descriptive-name-here',
+				id: 'devprotocol:clubs:theme-2',
 				options: [
-					{ key: 'slug', value: 'stokens' },
-					{ key: 'rpc', value: 'https://polygon-rpc.com/' },
-					{ key: 'maxpage', value: 30 },
+					{
+						key: 'homeConfig',
+						value: {
+							hero: {
+								image:
+									'https://images.unsplash.com/photo-1681106447892-fde093d56df8?q=80&w=2626&auto=format&fit=crop',
+								text: '',
+							},
+							body: 'Hendrerit pellentesque tincidunt, sociis dictumst.',
+							description: 'Description',
+						} satisfies HomeConfig,
+					},
+					{
+						key: 'globalConfig',
+						value: { bg: '#ADADAD', ink: '#fff' } satisfies GlobalConfig,
+					},
 				],
 			},
+			{
+				id: 'example',
+				options: [],
+			},
 		],
 	})

.preview/example/Default.astro

@@ -0,0 +1,52 @@
+<section>
+	<p>
+		Hendrerit pellentesque tincidunt, sociis dictumst. Rutrum laoreet nulla
+		taciti ante felis. Ornare quisque et ad hac enim. Vulputate habitasse lacus
+		mattis elit magna nunc. Mollis elit dui aliquet ultricies nunc tortor dolor.
+		Vehicula feugiat netus commodo nec quisque netus tempor nam condimentum.
+		Tortor himenaeos magna netus suspendisse morbi iaculis. Ut magnis nam
+		sagittis dapibus nulla eget nullam tempor mi maecenas. Habitasse magnis
+		faucibus scelerisque quisque sagittis eget. Montes eleifend luctus molestie
+		lacinia nisl etiam montes pharetra aptent sociosqu. Eleifend magna natoque
+		adipiscing fermentum in sed sit ligula ridiculus vel suscipit augue. Posuere
+		consectetur, phasellus.
+	</p>
+	<p>
+		Nostra ridiculus mus placerat litora tortor senectus eleifend dictumst orci
+		cum volutpat netus. Velit pellentesque morbi suscipit platea ultricies
+		purus? Habitant penatibus laoreet consectetur feugiat dapibus praesent ipsum
+		vestibulum auctor netus. Purus, aliquet fringilla tempor curabitur ipsum
+		lacus tristique sapien sed. Id cursus vestibulum nibh rutrum conubia in
+		ultricies eu donec etiam. Elit amet dictumst orci. Porta potenti habitasse
+		duis adipiscing sed magnis elementum. Nam ultrices molestie parturient
+		ultrices, suspendisse scelerisque suspendisse luctus. Metus at aliquam enim
+		orci pretium interdum risus lacus quam pretium. At mollis proin ridiculus.
+	</p>
+	<p>
+		Aptent feugiat, ornare adipiscing inceptos nisl. Aliquam nec netus metus
+		dictum pretium viverra tempus nam sapien suscipit. Leo vestibulum cum quis
+		quisque donec risus. Dui euismod lobortis, himenaeos fusce. Nisl, aptent
+		aliquam curae;. Sed eleifend senectus dolor rutrum facilisi natoque purus.
+		Praesent lorem in turpis est velit. Felis sagittis sociosqu morbi sapien.
+		Per.
+	</p>
+	<p>
+		Inceptos vehicula class purus rhoncus sagittis! Lacus interdum tempor
+		dignissim lorem netus suspendisse. Feugiat venenatis fermentum congue
+		sodales sociosqu porta fermentum cubilia pellentesque class. Fringilla hac
+		feugiat tempor ullamcorper tellus quam. Habitant lacus etiam donec, primis
+		mattis. Neque gravida a non ante ad semper cras suscipit ultricies. Diam,
+		dignissim consectetur commodo posuere. Hac tortor sem, semper aliquam cursus
+		a lectus tempus.
+	</p>
+	<p>
+		Turpis, magna bibendum mauris. Imperdiet volutpat leo imperdiet inceptos
+		cubilia fusce per, magnis eros. Arcu erat purus fringilla habitant sit.
+		Varius praesent, lobortis erat dui dapibus elit quam ullamcorper vel
+		praesent sit. Hac laoreet cras natoque tincidunt eleifend dignissim eget non
+		a varius facilisis potenti. Vivamus et curae; curabitur cum sapien venenatis
+		aliquam porta? Sociosqu elit tincidunt senectus aliquet ultricies hendrerit
+		feugiat montes. Ligula augue at massa sem tellus facilisis dui congue
+		faucibus laoreet.
+	</p>
+</section>

.preview/example/index.ts

@@ -0,0 +1,22 @@
+import {
+	type ClubsFunctionGetPagePaths,
+	ClubsPluginCategory,
+	ClubsPluginMeta,
+	ClubsFunctionPlugin,
+} from '@devprotocol/clubs-core'
+import Default from './Default.astro'
+
+export const getPagePaths = (async () => [
+	{ paths: ['example'], component: Default },
+]) satisfies ClubsFunctionGetPagePaths
+
+export const meta = {
+	id: 'example',
+	displayName: 'Example',
+	category: ClubsPluginCategory.Uncategorized,
+} satisfies ClubsPluginMeta
+
+export default {
+	getPagePaths,
+	meta,
+} satisfies ClubsFunctionPlugin

.preview/plugins.ts

@@ -1,4 +1,4 @@
-import theme from './theme'
+import example from './example'
 import thisPlugin from '../src/index'
 
-export default [theme, thisPlugin]
+export default [example, thisPlugin]

.preview/preview.ssr/.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1725850446302
+	}
+}

src/README.md

@@ -0,0 +1,22 @@
+**Built-in home page:**
+
+- Display all your memberships in beautifully
+- Responsive design & mobile first
+- Short description to let people know about your project
+- YouTube-embed enabled profiles to show more detailed descriptions
+
+**Multiple color schemes:**
+| | Preview |
+| --- | --- |
+| Purple | <img src="https://i.imgur.com/3wx23Mc.png" width=50 height=50 /> |
+| Grey | <img src="https://i.imgur.com/n7ptXWf.png" width=50 height=50 /> |
+| Black | <img src="https://i.imgur.com/qPY2XHC.png" width=50 height=50 /> |
+| Brown | <img src="https://i.imgur.com/mghNp7m.png" width=50 height=50 /> |
+| Stone | <img src="https://i.imgur.com/XQ2SVr0.png" width=50 height=50 /> |
+| Matcha | <img src="https://i.imgur.com/CYW8Ov9.png" width=50 height=50 /> |
+| Pink | <img src="https://i.imgur.com/cdrh8AT.png" width=50 height=50 /> |
+
+**Supported slots:**
+
+- `ClubsSlotName.PageContentHomeBeforeContent` = "page:content:home:before-content"
+- `ClubsSlotName.PageContentHomeAfterContent` = "page:content:home:after-content"

src/components/About.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { i18nFactory } from '@devprotocol/clubs-core'
+
+  import { Strings } from '../i18n'
+
+  export let name: string = 'Clubs'
+
+  const i18nBase = i18nFactory(Strings)
+  let i18n = i18nBase(['en'])
+
+  onMount(() => {
+    i18n = i18nBase(navigator.languages)
+  })
+</script>
+
+<h2 class="text-center text-xl font-bold lg:text-4xl">
+  {i18n('About', [name])}
+</h2>

src/components/Card/Card.astro

@@ -0,0 +1,10 @@
+---
+const { class: className } = Astro.props as {
+  blur?: boolean
+  class?: string
+}
+---
+
+<div class={`rounded-lg p-6 bg-black/5 ${className ? className : ''}`}>
+  <slot />
+</div>

src/components/Header/Header.astro

@@ -0,0 +1,25 @@
+---
+import { ClubsLogo as Clubs } from '@devprotocol/clubs-core/layouts'
+import type { ClubsPropsPages } from '@devprotocol/clubs-core'
+
+const { connection = true } = Astro.props as ClubsPropsPages & {
+  connection?: boolean
+}
+---
+
+<header class="absolute z-10 flex w-full items-center">
+  <a
+    href="https://www.clubs.place/"
+    class="absolute left-0 top-0 m-4 flex items-center justify-center gap-2"
+    ><span
+      class="flex h-10 w-10 p-1 items-center justify-center rounded-full bg-[var(--backgroundColor)]"
+      ><Clubs class="h-full" /></span
+    ></a
+  >
+  <div
+    class="container mx-auto flex max-w-7xl items-center justify-between px-6 xl:px-0"
+  >
+    <i class="h-20" role="presentation"></i>
+    {connection && <slot name="header:connect-button" />}
+  </div>
+</header>

src/components/Hero/Description.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  let open = false
+
+  const onClick = () => {
+    open = !open
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<section class="cursor-pointer lg:cursor-auto" on:click={onClick}>
+  <p class={`overflow-hidden text-left lg:text-xl ${open ? '' : 'truncate'}`}>
+    <slot />
+  </p>
+</section>