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.
Notes
Compatible with the version core@0.11.
Maintener : manon.bourgognon@gmail.com