@startinblox/component-newsfeed
v2.0.10
Published
Newsfeed component for Startinblox
Downloads
5
Keywords
Readme
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/[email protected]"
></script>
<script
type="module"
src="https://unpkg.com/@startinblox/[email protected]"
></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 [email protected].
Maintener : [email protected]