@startinblox/component-communities

v2.0.4

Published

12 days ago

## How to use

Downloads

0High
0Medium
0Low

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme