npm package: @startinblox/component-newsfeed
Description: Newsfeed component for Startinblox
Latest version: 2.0.10

﻿# 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.

```html
<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
<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.

## Notes

Compatible with the version core@0.11.

**Maintener** : [manon.bourgognon@gmail.com](mailto:manon.bourgognon@gmail.com)