Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
  • dev
  • djangoldp-quickstart
  • 0.13
4 results
History
Forked from Documentation / General documentation
Source project has a limited visibility.
Jean-Baptiste Pasquier's avatar
hotfix: force core 0.19 as fallback
Jean-Baptiste Pasquier authored
493b3ca8
Name Last commit Last update
public
src
.gitignore
.gitlab-ci.yml
README.md
index.html
package-lock.json
package.json
postcss.config.js
vite.config.js
README.md

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