Skip to content

Commit

Permalink
Merge pull request #10 from saurabhdaware/feat/dark-theme
Browse files Browse the repository at this point in the history
Feat/data-theme
  • Loading branch information
saurabhdaware authored Nov 26, 2019
2 parents f59aa72 + d8f639e commit 5fafa4b
Show file tree
Hide file tree
Showing 9 changed files with 328 additions and 28 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
***Changelogs are mentioned in the [Releases](https://github.com/saurabhdaware/DEV-widget/releases) Section***
36 changes: 33 additions & 3 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
If you are contributing to the Open Source for the first time, You can checkout [First Time Contributors Guide](#first-time-contributors-guide)
If you are contributing to the Open Source for the first time, You can check out [First Time Contributors Guide](#first-time-contributors-guide)

# Local Setup
- [Fork](https://github.com/saurabhdaware/DEV-widget/fork) the repository
Expand All @@ -18,7 +18,7 @@ The code is based upon web components and does not use any dependency. You can r
```

# Sending Pull Request
- Create a branch in your forked repository with relevant name (`e.g enhanced-styling`, `feature-autoreload`)
- Create a branch in your forked repository with a relevant name (`e.g enhanced-styling`, `feature-autoreload`)
- Push your changes to the branch
- Create a pull request from your branch to `master` of my branch.

Expand All @@ -31,4 +31,34 @@ The code is based upon web components and does not use any dependency. You can r
- You can checkout the [Issues](https://github.com/saurabhdaware/DEV-widget/issues) and select the one that you like (You can comment on issue with something like *"Let me work on this or I'll kill you"* to let me know that you are working on it.)
- There are issues with label `Difficulty: Easy` and `Difficulty: Super Easy` which are easier to solve as compare to the other issues. Though if you know JavaScript well you can solve `Difficulty: Medium` and `Difficulty: Hard` issues as well.
- Just go through the [Local Setup Guide](#local-setup) to locally setup the project
- Once you are done making changes you can create a Pull Request to the master of this (https://github.com/saurabhdaware/DEV-widget) repository.
- Once you are done making changes you can create a Pull Request to the master of this (https://github.com/saurabhdaware/DEV-widget) repository.


# Other Guides

## - Creating Themes

Before you work on a code please create an issue and mention the colors that you want to add and wait for the response. Since adding themes increase the size of the code, only few themes will be chosen for the final version.

Here's an example from `card.style.mjs`:
```css
.card.pink{
--header-bg:#ffc0cb;
--header-color:#222;
--header-logo-filter: invert(0%);
--content-bg: #fff;
--content-bghover: #ffc0cb44;
--content-border: #ffc0cb66;
--content-color: #555;
--button-bg: #222;
--button-color: #ddd;
--scroll-track: #ffc0cb;
--scroll-thumb: #999;
--likes-color: #999;
--likes-icon-filter: invert(0%);
}
```

To create a theme named "yellow", You will have to create a css block for `.card.yellow` and set the variable names as given in the above example.

With these settings adding `data-theme="yellow"` in the file will apply your colors to the card.
19 changes: 15 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ You can use it in your website/blog and show off your DEV.to articles :sunflower
<dev-widget data-username="saurabhdaware"></dev-widget>

<!-- Place script tag before the end of the body tag -->
<script src="https://unpkg.com/dev-widget@1.0.3/dist/card.component.mjs" type="module"></script>
<script src="https://unpkg.com/dev-widget@1.1.0/dist/card.component.min.mjs" type="module"></script>
```


Expand All @@ -47,21 +47,32 @@ import 'dev-widget'
|---------------|-------------------------------|--------------------------|
| data-username | Your DEV.to Username | |
| data-width | Width of the card | 300px |
| data-theme | **Theme of the card** (dark, ocean, pink, default) | default |
| data-name (optional) | Name to display on card | Will be fetched from API |
| data-limit | Number of articles to display | 30 |

**Note:** Value of `data-limit` should not be too high. An API request has to be made for every 30 articles so for `data-limit=200` 7 API requests will be made synchronously.

So a full example would look something like
```html
<dev-widget data-username="saurabhdaware" data-width="320px" data-limit="3" data-name="Saurabh 😎"></dev-widget>
<dev-widget data-username="saurabhdaware" data-width="320px" data-theme="ocean" data-limit="3" data-name="Saurabh 😎" ></dev-widget>

<!-- Place script tag before the end of the body tag -->
<script src="https://unpkg.com/dev-widget@1.0.3/dist/card.component.mjs" type="module"></script>
<script src="https://unpkg.com/dev-widget@1.1.0/dist/card.component.min.mjs" type="module"></script>
```

---
## Themes
`default` `ocean` `pink` `dark`
![DEV Widget themes](https://res.cloudinary.com/saurabhdaware/image/upload/v1574802681/saurabhdawaretk/dev-widget-2.png)

---

## Changelog
**[RELEASES](https://github.com/saurabhdaware/DEV-widget/releases)**

---

## Contributing

I would love to have some of your contributions on this project. You can checkout [CONTRIBUTING.md](CONTRIBUTING.md) for Contribution guidelines.
I would love to have some of your contributions to this project. You can checkout [CONTRIBUTING.md](CONTRIBUTING.md) for Contribution guidelines.
11 changes: 11 additions & 0 deletions build/build.main.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
const fse = require('fs-extra');
const minify = require('@node-minify/core');
const terser = require('@node-minify/terser');

if(fse.existsSync('dist')){
fse.removeSync('dist')
}

fse.copySync('src','dist');

minify({
compressor: terser,
input: 'src/card.component.mjs',
output: 'dist/card.component.min.mjs',
callback: function(err, min) {}
});

fse.writeFileSync('dist/index.js',"export * from './card.component.mjs';")
167 changes: 166 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 5fafa4b

Please sign in to comment.