@startinblox/component-communities NPM

Solid Communities

How to use

Once the package is installed, you can use the solid-communities component:

<html>
  <head>
    <!-- import the module in the head of the page -->
    <script
      type="module"
      src="https://cdn.skypack.dev/@startinblox/component-communities"
    ></script>
  </head>

  <body>
    <!-- use the component -->
    <solid-communities
      data-src="/server/communities/"
      addresses="/server/community-addresses/"
      uploads="/server/upload/"
    ></solid-communities>
  </body>
</html>

Parameters

Name	Default	Description
`data-src`	`undefined`	Data source of your communities container
`addresses`	`undefined`	Data source of your communities' addresses container
`uploads`	`undefined`	Where to upload files, like community pictures
`paginate-by`	`20`	How many cards per page
`allow-community-creation`	`false`	Allow users to create their own communities
`allow-community-list-members`	`false`	Allow users to see all community's members
`allow-community-add-member`	`false`	Allow users to add other users to their communities, require list-members
`range-user`	`undefined`	Data source of your user container
`allow-community-join-leave`	`false`	Allow users to join/leave a community by themselves
`display-*`	`undefined`	See below
`form-*`	`undefined`	See below
`search-*`	`undefined`	See below
`extra-context`	`{}`	Custom extra context
`disable-community-map-display`	`false`	Disable the display of the community map ?
`disable-community-picture-display`	`false`	Disable the display of the profile picture

display-* - Customize community display

With a display-* you can add your own fields to a community display.

A display-extra-* will add values to the default attribute instead of replacing it.

Examples:

Display a some_extra_field with a solid-display-markdown widget:

    <solid-communities
      ...
      display-extra-fields="some_extra_field"
      display-widget-some_extra_field="solid-display-markdown"
      ...

Replace all displayed fields with a custom set with no social profile icons and no pictures:

    <solid-communities
      ...
      display-fields="segment0(segment1(community-picture(logo)), segment2(segment3(segment4(name), segment6(profile.shortDescription), segment8(addresses, members, profile.website, profile.email, profile.phone), segment9(profile.description), segment10(edit)))"
      ...

Add text-color-secondary class to profile.shortdescription field:

    <solid-communities
      ...
      display-extra-class-profile.shortdescription="text-color-secondary"
      ...

form-* - Customize community edition form

With a form-* you can add your own fields to a community edition form.

A form-extra-* will add values to the default attribute instead of replacing it.

See display-* for examples.

search-* - Customize community list and map search form

With a search-* you can add your own fields to a community edition form.

A search-extra-* will add values to the default attribute instead of replacing it.

See display-* for examples.

Troubleshooting

I don't see the community creation button even with allow-community-creation="true"

Ensure that your server have proper permissions on the community endpoint.

Developpers

Installation:

npm install

Build with:

npm run build

Watch files & rebuild on change with this command:

npm run watch

autoprefixer cssnano postcss postcss-preset-env postcss-scss sass vite

@everything-registry/sub-chunk-865 @infinitebrahmanuniverse/nolb-_star @zalastax/nolb-_star

1 month ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

6 months ago

6 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago