Skip to content
Snippets Groups Projects
Forked from Documentation / General documentation
Source project has a limited visibility.

A simple example

This is a simple component to provide an easy way to start a component with Startin'blox.

Try the demo

To launch the demo, please run at the root of the component :

python3 -m http.server 8001

Look at the code

There are many comments to help you to understand how does it work. This exemple simply retrieve Happy Dev event data source and display the image, the date, the title and the link of the event. If you need more examples, have a look on which have been done.

Look for more explanation

If you want more information about web components, we recommend you to visit webcomponents.org. If your questions concern more, our use of web components at Startin'blox, come and ask your questions to our community, we're waiting for you :)

Let's improve this example !

You can open a issue directly on the repository of this example or directly contact the current maintainer : alice@startinblox.com

A template to document your component

SIB Tutorial

The description of your functionality should be clear and should be the same as the description of your project

<sib-tutorial> is [description].

Try the demo

Before publishing your component, make sure that the demo work.

To launch the demo, please run at the root of the component :

python3 -m http.server 8001

Installation

Some time, you'll need to add a Django package in the server you use to get the apprpriate datas.

In your django server, add the djangoldp_[name] package:

# settings.py
DJANGOLDP_PACKAGES = [
  'djangoldp_[name]',
]

How to use

Show how to implement it.

Once the package is installed, you can use the sib-tutorial component:

<html>
<head>
  <!-- import the module in the head of the page -->
  <script type="module" src="link/to/your/component"></script>
</head>

<body>
  <!-- use the component -->
  <sib-tutorial
    data-src="[url]">
  </sib-tutorial>
</body>
</html>

Notes :

Anything to add about how it works?

Parameters

Name Default Description
data-src undefined URL of ..
extra-context {} Custom extra context
attribute_x 10 Explanation about the attribute named 'attribute_x'

A personal message

Feel free to share a personal message with your readers. If you leave your email, it's cool :)

If you're having a hard time, come visit us at community.startinblox.com. We'll be there.