https://github.com/michaelravedoni/at-article
Web components and layout for blog and academic articles
https://github.com/michaelravedoni/at-article
Last synced: 5 months ago
JSON representation
Web components and layout for blog and academic articles
- Host: GitHub
- URL: https://github.com/michaelravedoni/at-article
- Owner: michaelravedoni
- License: mit
- Created: 2018-01-24T12:55:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-15T14:15:12.000Z (over 7 years ago)
- Last Synced: 2025-09-14T22:42:34.344Z (9 months ago)
- Language: HTML
- Homepage: https://michaelravedoni.github.io/at-article/
- Size: 2.65 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
at-article
Write clean and flat articles
## Table of Contents
- [Introduction](#introduction)
- [Features](#features)
- [Install](#install)
- [Usage](#usage)
- [Building](#building)
- [Contributing](#contributing)
- [Release History](#release-history)
- [Authors and acknowledgment](#authors-and-acknowledgment)
## Introduction
[](https://www.npmjs.com/package/at-article)
[](https://conventionalcommits.org)
[](https://github.com/michaelravedoni/at-article/blob/master/LICENSE)
## Features
- 12 web-components for web native article writing
- usable in any web environment
- clean and flat design
## Install
Use one of this solution to "install" the `at-article` component in your project.
### Script tag
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html, etc.
### Node Modules
- Run `npm install at-article --save`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html, etc.
### In a stencil-starter app
- Run `npm install at-article --save`
- Add an import to the npm packages `import my-component;`
- Then you can use the element anywhere in your template, JSX, html, etc.
## Usage
Check the documentation for more informations : [Documentation](https://michaelravedoni.github.io/documentation)
**Example with the `at-block` component**
The block element allows to highlight content with a contrasted graphic aspect with the rest of the article.
```html
Lorem ispum
```
Property | Default | Explanations
--- | --- | ---
caption | `false` | If `true`, display a numbered caption
heading | | Display a heading
type | `default` | The values can be `default`, `info`, `example`, `warning`, `definition` or `fact`
## Build with
- [Stencil](https://github.com/ionic-team/stencil) is a compiler for building fast web apps using Web Components.
## Building
```bash
git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin
```
and run:
```bash
npm install
npm start
```
To watch for file changes during develop, run:
```bash
npm run dev
```
To build the component for production, run:
```bash
npm run build
```
To run the unit tests for the components, run:
```bash
npm test
```
Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
## Contributing
We’re really happy to accept contributions from the community, that’s the main reason why we open-sourced it! There are many ways to contribute, even if you’re not a technical person.
1. Fork it ()
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes (`git commit -am 'Add some fooBar'`)
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
## Release History
You will find the releases history in the [release](https://github.com/michaelravedoni/at-article/releases) section. For more detail, you can check the [changelog.md](https://github.com/michaelravedoni/at-article/blob/master/CHANGELOG.md) file.
## Roadmap
- `citeproc-js` implementation
- themes implementation
- pdf export
## Authors and acknowledgment
* **Michael Ravedoni** - *Initial work* - [michaelravedoni](https://github.com/michaelravedoni)
See also the list of [contributors](https://github.com/michaelravedoni/at-article/contributors) who participated in this project.
## License
[MIT License](https://opensource.org/licenses/MIT)