@startinblox/component-newsfeed NPM

Solid-newsfeed

<solid-newsfeed> displays news feed and allows you to post new articles (title at least, content and picture), to edit and delete them.

<solid-newsfeed data-src="[url]" url-upload="[url-upload]"></solid-newsfeed>

Installation

The compenent allows you to upload a picture for each article, so a package to upload picture is needed. For example: pip install djangoldp_uploader

The compenent allows you to upload a picture for each article.

How to use

You need to import the module to use the component, and also the modules to use other sib components, such as solid-display, solid-form and solid-router.

<html>
  <head>
    <!-- import the necessary modules in the head of the page -->
    <script
      type="module"
      src="https://unpkg.com/@startinblox/oidc@0.8"
    ></script>
    <script
      type="module"
      src="https://unpkg.com/@startinblox/core@0.11"
    ></script>
    <script
      type="module"
      src="https://unpkg.com/@startinblox/router@latest"
    ></script>

    <script data-default-context type="application/ld+json">
      {
        "avatar": "foaf:depiction"
      }
    </script>

    <script type="module" src="solid-newsfeed.js"></script>
  </head>

  <body>
    <!-- use the component -->
    <solid-newsfeed
      data-src="http://localhost:8000/articles/"
      url-upload="http://localhost:8000/upload/"
    >
    </solid-newsfeed>
  </body>
</html>

Parameters

Name	Default	Description
`data-src`	undefined	URL of the LDP articles (news) to display
`url-upload`	undefined	URL of the picture to upload
`continue-reading-label-text`	"Continue reading"	Button text to read all the article
`edit-article-label-text`	"Edit the article"	Button text to access to the edit form of the current article
`add-article-button-text`	"Publish"	Submit button text form to add a new article
`edit-article-button- text`	"Edit"	Submit button text form to modify the current article
`delete-article-button-text`	"Delete the article"	Button text to delete the current article

Design

To customize the component, all the colors are editable, by setting the following css variables anywhere in your stylesheet to the color desired :

Variable name	Description/attribute
`--solid-newsfeed-font`	Font color (content of articles, titles of pages)
`--solid-newsfeed-header-font`	Header text color of the component
`--solid-newsfeed-header-background`	Header background color
`--solid-newsfeed-title-font`	Titles color of articles
`--solid-newsfeed-author-details`	Author details color (author name, publishing date)
`--solid-newsfeed-border`	Border color of inputs in forms
`--solid-newsfeed-button-main`	Main color of buttons
`--solid-newsfeed-button-reverse`	Reverse color of buttons
`--solid-newsfeed-delete-main`	Main color of delete button
`--solid-newsfeed-delete-reverse`	Reverse color of delete button

Output

In the top in the header, the routes to navigate between the main page displaying articles and the page with the form to create an article
The main page displays all the articles ranked from newest to oldest, eachone with a link to access to the entire content.
On the page of each article, a button allows to access to the edit form and a delete button.
The add form and the edit form must have at least a title.