Skip to content

[3.0] Minify CSS and JS, update dependencies & documentation, fix issues from PR 22 #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
richard67 merged 13 commits into from
Dec 30, 2025
Merged

[3.0] Minify CSS and JS, update dependencies & documentation, fix issues from PR 22 #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0f41d6a
Minify CSS with lightningcss-cli
richard67 Dec 29, 2025
1d9cd47
Minor dependency updates
richard67 Dec 29, 2025
2b0dbf3
Major update less
richard67 Dec 29, 2025
051cfba
Use minified CSS as default for facebooklike dialog.
richard67 Dec 29, 2025
8aa1e83
Update README docs for minified CSS
richard67 Dec 29, 2025
42d0c59
Update README docs for including JavaScript
richard67 Dec 29, 2025
392d38b
Major update jsdom
richard67 Dec 29, 2025
7783098
Add rollup/plugin-terser and minify JavaScript
richard67 Dec 29, 2025
a1b25ce
Add rollup.config.js
richard67 Dec 29, 2025
34dde75
Add minified JS to .gitignore
richard67 Dec 29, 2025
0a94767
Fix share counter for facebooklike
richard67 Dec 29, 2025
a118588
Fix parsing objects/arrays from dataset
richard67 Dec 30, 2025
c96c0cc
Fix query selector for script src
richard67 Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,13 @@ demo/*.ttf
demo/*.woff2
demo/app.css
demo/facebooklike_dlg.css
demo/facebooklike_dlg.min.css
demo/shariff.complete.css
demo/shariff.complete.js
demo/shariff.complete.min.css
demo/shariff.complete.min.js
demo/shariff.min.css
demo/shariff.min.min.css

# test files
test/shariff.complete.js
19 changes: 9 additions & 10 deletions README-de.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,13 @@ Shariff besteht aus zwei Teilen. Der erste Teil ist eine einfache JavaScript-Bib

1. Das [aktuellste Shariff-Plus-Release](https://github.com/richard67/shariff-plus/releases/latest) herunterladen
2. Alle im Release enthaltenen Dateien hochladen
3. CSS im `<head>` einbinden:
* `shariff.complete.css` verlässt sich auf die im Release enthaltenen Abhängigkeiten
* `shariff.min.css` verwenden, wenn [Font Awesome](https://github.com/FortAwesome/Font-Awesome) bereits in Ihrer Seite geladen wird
4. JavaScript unmittelbar vor `</body>` einbinden:
* `shariff.complete.js` verlässt sich auf die im Release enthaltenen Abhängigkeiten
* `shariff.min.js` verwenden, wenn [jQuery](https://github.com/jquery/jquery) bereits in der Seite vorhanden ist
3. CSS im `<head>` einbinden:
* `shariff.complete.min.css` verlässt sich auf die im Release enthaltenen Abhängigkeiten
* `shariff.min.min.css` verwenden, wenn [Font Awesome](https://github.com/FortAwesome/Font-Awesome) bereits in Ihrer Seite geladen wird
* Zum Debuggen kann jeweils die unminifizierten Datei `shariff.complete.css` oder `shariff.min.css` verwendet werden.
4. JavaScript im `<head>` einbinden:
* `<script async src="shariff.complete.min.js" type="module"></script>`
* Zum Debuggen kann die unminifizierten Datei `shariff.complete.js` verwendet werden.
5. Beliebig viele `<div class="shariff">` Elemente einfügen
6. Mit den unten beschriebenen `data`-Attributen Aussehen und Funktion konfigurieren

Expand All @@ -34,6 +35,7 @@ Code-Beispiel:
<html>
<head>
<link href="/path/to/shariff.min.css" rel="stylesheet">
<script async src="shariff.complete.js" type="module"></script>
</head>
<body>
<h1>My article</h1>
Expand All @@ -44,9 +46,6 @@ Code-Beispiel:

<h2>Fortgeschrittene Optionen:</h2>
<div class="shariff" data-backend-url="/path/to/backend" data-url="https://www.example.com/my-article.html" data-theme="grey" data-orientation="vertical"></div>

<!-- vor dem schließenden </body>-Tag -->
<script src="/path/to/shariff.min.js"></script>
</body>
</html>
```
Expand Down Expand Up @@ -93,7 +92,7 @@ Unterschiede zu Shariff sind mit (1), (2) usw. markiert und werden unterhalb der
| `data-button-style` | Wie die Buttons angezeigt werden. Werte: `standard`, `icon`, `icon-count`. Bei `icon` wird nur das Icon angezeigt, bei `icon-count` werden Icon und Zähler und bei `standard` Icon, Text und Zähler abhängig von der Display-Größe angezeigt. | `standard` |
| `data-dialogs-media-url` (1) | Pfad zu css oder js für spezielle Dialoge wie z.B. den des Services `facebooklike` Dies muss eine absolute URL sein. Beispiel: `https://www.example.com/shariff`. Dies erlaubt es, eigene css z.B. für den Dialog `facebooklike` zu verwenden. | Pfad zum Verzeichnis, in dem Shariff-Plus installiert ist. |
| `data-facebook-count-btn` (1) | Die Buttons(s), die den Zähler vom Backend anzeigen sollen, wenn beide Services `facebook` und `facebooklike` verwendet werden. Werte: `like`, `share`, `both`. | `like` |
| `data-facebooklike-css` (1) | Name der CSS-Datei für den Dialog `facebooklike`. Die Datei muss im dem Ordner vorhanden sein, der mit der Option `data-dialogs-media-url` festgelegt wird. Beispiel : `data-facebooklike-css="my-styles.css"`. | `facebooklike_dlg.css` |
| `data-facebooklike-css` (1) | Name der CSS-Datei für den Dialog `facebooklike`. Die Datei muss im dem Ordner vorhanden sein, der mit der Option `data-dialogs-media-url` festgelegt wird. Beispiel : `data-facebooklike-css="my-styles.css"`. | `facebooklike_dlg.min.css` |
| `data-facebooklike-options` (1) | Objekt mit Optionen für den Button "Gefällt mir" von Facebook, wie sie der Facebook Konfigurator für den Button liefert. Für die Verwendung im `data`-Attribut muss die Angabe Entity-enkodiert werden. Beispiel mit den Standardwerten von Facebook: `data-facebooklike-options="{&quot;width&quot;:450,&quot;layout&quot;:&quot;standard&quot;,&quot;action&quot;:&quot;like&quot;,&quot;size&quot;:&quot;large&quot;,&quot;show_faces&quot;:true,&quot;share&quot;:true,&quot;appId&quot;:&quot;99999&quot;}"` mit 99999 = Facebook `app_id`. | Siehe Beispiel, mit appId = Wert des Meta-Tags `fb:app_id` oder `null`, wenn nicht definiert. |
| `data-info-url` (2) | URL der Infoseite. | `https://www.richard-fath.de/de/software/shariff-plus.html` |
| `data-info-display` | Wie die Infoseite angezeigt wird. Werte: `blank`, `popup`, `self`. | `blank` |
Expand Down
17 changes: 8 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,12 @@ Shariff consists of two parts: a simple JavaScript client library and an optiona
1. Download the [latest release](https://github.com/richard67/shariff-plus/releases/latest)
2. Upload all files included in the release
3. Include CSS in `<head>`:
* `shariff.complete.css` uses the dependencies included in the release files
* if [Font Awesome](https://github.com/FortAwesome/Font-Awesome) is already included in your site, use `build/shariff.min.css`
4. Include JavaScript right before `</body>`:
* `shariff.complete.js` uses the dependencies included in the release files
* if [jQuery](https://github.com/jquery/jquery) is already included in your site, use `build/shariff.min.js`
* `shariff.complete.min.css` uses the dependencies included in the release files
* if [Font Awesome](https://github.com/FortAwesome/Font-Awesome) is already included in your site, use `shariff.min.min.css`
* For debug you can use the unminified file `shariff.complete.css` or `shariff.min.css`.
4. Include JavaScript in `<head>`:
* `<script async src="shariff.complete.min.js" type="module"></script>`
* For debug you can use the unminified file `shariff.complete.js`.
5. Insert one or more `<div class="shariff">` elements.
6. Customize the look using data-* attributes.

Expand All @@ -34,6 +35,7 @@ Usage example:
<html>
<head>
<link href="/path/to/shariff.min.css" rel="stylesheet">
<script async src="shariff.complete.js" type="module"></script>
</head>
<body>
<h1>My article</h1>
Expand All @@ -44,9 +46,6 @@ Usage example:

<h2>More advanced buttons:</h2>
<div class="shariff" data-backend-url="/path/to/backend" data-url="https://www.example.com/my-article.html" data-theme="grey" data-orientation="vertical"></div>

<!-- immediately before </body> -->
<script src="/path/to/shariff.min.js"></script>
</body>
</html>
```
Expand Down Expand Up @@ -93,7 +92,7 @@ Differences to Shariff are marked with (1), (2) and so on and explained below th
| `data-button-style` | How to display the buttons. Values: `standard`, `icon`, `icon-count`. With `icon` only the icon is shown, with `icon-count` icon and counter and with `standard` icon, text and counter are shown, depending on the display size. | `standard` |
| `data-dialogs-media-url` (1) | The path to css or js for special dialogs like e.g. the one of the `facebooklike` service. This has to be an absolute URL. Example: `https://www.example.com/shariff`. This allows to use own css e.g. for the `facebooklike` dialog. | Path to directory where Shariff-Plus is installed. |
| `data-facebook-count-btn` (1) | The button(s) which shall show the counter from backend if both services `facebook` and `facebooklike` are used. Values: `like`, `share`, `both`. | `like` |
| `data-facebooklike-css` (1) | Name of the CSS file for the `facebooklike` dialog. The file has to be present in the folder specified by the `data-dialogs-media-url` option. Example : `data-facebooklike-css="my-styles.css"`. | `facebooklike_dlg.css` |
| `data-facebooklike-css` (1) | Name of the CSS file for the `facebooklike` dialog. The file has to be present in the folder specified by the `data-dialogs-media-url` option. Example : `data-facebooklike-css="my-styles.css"`. | `facebooklike_dlg.min.css` |
| `data-facebooklike-options` (1) | An entity-encoded JSON string containing an object with options for the Facebook "Like" button as provided by the Facebook configurator for that button. Example with default values of Facebook: `data-facebooklike-options="{&quot;width&quot;:450,&quot;layout&quot;:&quot;standard&quot;,&quot;action&quot;:&quot;like&quot;,&quot;size&quot;:&quot;large&quot;,&quot;show_faces&quot;:true,&quot;share&quot;:true,&quot;appId&quot;:&quot;99999&quot;}"` with 99999 = Facebook `app_id`. | See example, with appId = value of the `fb:app_id` meta tag or `null` if not defined. |
| `data-info-url` (2) | URL of the info page. | `https://www.richard-fath.de/de/software/shariff-plus.html` |
| `data-info-display` | How to display the info page. Values: `blank`, `popup`, `self`. | `blank` |
Expand Down
4 changes: 2 additions & 2 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
<head>
<meta charset="utf-8"/>
<title>Demonstration: Shariff-Plus</title>
<link rel="stylesheet" type="text/css" href="shariff.complete.css">
<link rel="stylesheet" type="text/css" href="shariff.complete.min.css">
<link rel="stylesheet" type="text/css" href="app.css">
<link href="http://www.heise.de/" rel="canonical">
<meta property="DC.title" content="Shariff-Plus demo page">
<meta name="DC.creator" content="Richard Fath">
<script async src="shariff.complete.js" type="module"></script>
<script async src="shariff.complete.min.js" type="module"></script>
</head>
<body>
<dl class="layout-hint">
Expand Down
Loading