Skip to content

Commit e974723

Browse files
aerniaerni
authored
Version 3.0 (#28)
1 parent e982c1c commit e974723

23 files changed

+466
-275
lines changed

‎.github/workflows/pint.yaml‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
name: Fix Styling
2+
3+
on: [push]
4+
5+
jobs:
6+
php-cs-fixer:
7+
runs-on: ubuntu-latest
8+
9+
steps:
10+
- name: Checkout code
11+
uses: actions/checkout@v3
12+
with:
13+
ref: ${{ github.head_ref }}
14+
15+
- name: Fix styling issues
16+
uses: aglipanci/laravel-pint-action@0.1.0
17+
18+
- name: Commit changes
19+
uses: stefanzweifel/git-auto-commit-action@v4
20+
with:
21+
commit_message: Fix styling

‎README.md‎

Lines changed: 32 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
11
![Statamic](https://flat.badgen.net/badge/Statamic/5.0+/FF269E) ![Packagist version](https://flat.badgen.net/packagist/v/aerni/font-awesome/latest) ![Packagist Total Downloads](https://flat.badgen.net/packagist/dt/aerni/font-awesome)
22

33
# Font Awesome
4-
This Statamic addon adds a Fieldtype to easily search and select Font Awesome icons. It also comes with a Tag to output selected icons in your template. It supports Font Awesome version `5.x` and `6.x`.
5-
6-
## Prerequisites
7-
To use this addon, you need a Font Awesome account. [Register here](https://fontawesome.com/start) if you don't already have one.
8-
9-
### API Token
10-
You need to get your API Token. You can [generate one here](https://fontawesome.com/account).
11-
12-
### Kit Token
13-
You also need to get the Token of the Kit you want to use. You can [create a Kit here](https://fontawesome.com/kits). The Kit Token is the number of the Kit, e.g. `f481b75381`.
4+
This Statamic addon features an icon fieldtype to browse and select Font Awesome 6.x icons. It also comes with a Tag to output selected icons in your template.
145

156
## Installation
167
Install the addon using Composer:
@@ -25,64 +16,59 @@ You may publish the config of the package:
2516
php please vendor:publish --tag=font-awesome-config
2617
```
2718

28-
The following config will be published to `config/font-awesome.php`:
19+
## Configuration
20+
You may choose between using a Kit or hosting Font Awesome yourself.
21+
22+
### Kit Driver
23+
If you want to use a Kit, make sure you set the `driver` option in the config to `kit`:
2924

3025
```php
31-
return [
32-
33-
/*
34-
|--------------------------------------------------------------------------
35-
| API Token
36-
|--------------------------------------------------------------------------
37-
|
38-
| You can get your API Token in your Font Awesome Account Details.
39-
|
40-
*/
41-
42-
'api_token' => env('FA_API_TOKEN'),
43-
44-
/*
45-
|--------------------------------------------------------------------------
46-
| Kit Token
47-
|--------------------------------------------------------------------------
48-
|
49-
| The Token of the Kit you want to use, e.g. b121fed549.
50-
|
51-
*/
52-
53-
'kit_token' => env('FA_KIT_TOKEN'),
54-
55-
];
26+
'driver' => 'kit'
5627
```
5728

58-
## Configuration
59-
Add your `API Token` and `Kit Token` to your `.env` file:
29+
Next, add your `API Token` and `Kit Token` to your `.env` file:
6030

6131
```env
6232
FA_API_TOKEN=************************************
6333
FA_KIT_TOKEN=************************************
6434
```
6535

36+
### Local Driver
37+
If you would rather host Font Awesome yourself, you may use the `local` driver:
38+
39+
```php
40+
'driver' => 'local'
41+
```
42+
43+
Next, download [Font Awesome (For The Web)](https://fontawesome.com/download) and place the `metadata` and `css` directories in the locations defined in the config:
44+
45+
```php
46+
'local' => [
47+
'metadata' => resource_path('fonts/fontawesome/metadata'),
48+
'css' => '/fonts/fontawesome/css/all.min.css',
49+
],
50+
```
51+
52+
#### Metadata
53+
The files in the `metadata` directory are required to get the information about the icons. I recommend placing the metadata in the `resources` directory, as these files don't need to be publicly accessible.
54+
55+
#### CSS
56+
The `css` config option defines the public path to the stylesheet that will be loaded in the Control Panel. The stylesheet must be placed in the `public` directory. The CSS will only be loaded in the Control Panel. You still need to add the stylesheet to your frontend layout yourself.
57+
6658
## Usage
6759

6860
### Fieldtype
6961

70-
Add the `Font Awesome` Fieldtype to a Blueprint or Fieldset. The Fieldtype provides the option to only make certain icon styles available for selection.
62+
Add the `Font Awesome` Fieldtype to a Blueprint or Fieldset. The Fieldtype provides a config option that allows you to make only certain icon styles available for selection.
7163

7264
### Tag
7365

74-
Add the following Tag to the `<head>` of your layout view to render the Font Awesome script.
66+
If you're using the `kit` driver, add the following Tag to your layout's `<head>` to render the Font Awesome script.
7567

7668
```antlers
7769
{{ font_awesome:kit }}
7870
```
7971

80-
You may use a different Kit for rendering the icons in your template using the `token` parameter.
81-
82-
```antlers
83-
{{ font_awesome:kit token="f481b75381" }}
84-
```
85-
8672
Render an icon by using the handle of a Font Awesome field as the wildcard method.
8773

8874
```antlers
@@ -97,7 +83,5 @@ You may also use the shorter tag alias instead.
9783
{{ fa:icon_field }}
9884
```
9985

100-
101-
10286
## Credits
10387
Developed by [Michael Aerni](https://www.michaelaerni.ch)

‎config/font-awesome.php‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,43 @@
44

55
/*
66
|--------------------------------------------------------------------------
7-
| API Token
7+
| Default Font Awesome Driver
88
|--------------------------------------------------------------------------
99
|
10-
| You can get your API Token in your Font Awesome Account Details.
10+
| Here you may specify the default Font Awesome driver that should be used.
11+
|
12+
| Supported Drivers: "kit", "local"
13+
|
14+
*/
15+
16+
'driver' => 'kit',
17+
18+
/*
19+
|--------------------------------------------------------------------------
20+
| Kit Driver Options
21+
|--------------------------------------------------------------------------
22+
|
23+
| Here you may specify the configuration that should be used for the Kit driver.
1124
|
1225
*/
1326

14-
'api_token' => env('FA_API_TOKEN'),
27+
'kit' => [
28+
'api_token' => env('FA_API_TOKEN'),
29+
'kit_token' => env('FA_KIT_TOKEN'),
30+
],
1531

1632
/*
1733
|--------------------------------------------------------------------------
18-
| Kit Token
34+
| Local Driver Options
1935
|--------------------------------------------------------------------------
2036
|
21-
| The Token of the Kit you want to use, e.g. b121fed549.
37+
| Here you may specify the configuration that should be used for the Local driver.
2238
|
2339
*/
2440

25-
'kit_token' => env('FA_KIT_TOKEN'),
41+
'local' => [
42+
'metadata' => resource_path('fonts/fontawesome/metadata'),
43+
'css' => '/fonts/fontawesome/css/all.min.css',
44+
],
2645

2746
];

‎resources/dist/js/cp.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/dist/mix-manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"/js/cp.js": "/js/cp.js?id=80c5379c3b444477b59d740bf1e86eec"
2+
"/js/cp.js": "/js/cp.js?id=6646c075bf4d36f99a31fadb47bc833c"
33
}

‎resources/js/FontAwesome.vue‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default {
5757
},
5858
5959
mounted() {
60-
this.loadFontAwesomeScript();
60+
this.meta.script ? this.loadFontAwesomeScript() : this.loadFontAwesomeCss()
6161
},
6262
6363
computed: {
@@ -83,13 +83,15 @@ export default {
8383
return this.icons.find(icon => icon.class === this.value);
8484
},
8585
86-
fontAwesomeScriptIsLoaded() {
87-
let scripts = Array.from(document.getElementsByTagName("script"))
88-
.filter(script => script.src === this.meta.script)
89-
.length
86+
fontAwesomeIsLoaded() {
87+
const elements = this.meta.script
88+
? Array.from(document.getElementsByTagName("script"))
89+
.filter(script => script.src === this.meta.script)
90+
: Array.from(document.getElementsByTagName("link"))
91+
.filter(link => link.href === this.meta.css)
9092
91-
return scripts ? true : false;
92-
}
93+
return elements.length
94+
},
9395
},
9496
9597
methods: {
@@ -144,12 +146,21 @@ export default {
144146
},
145147
146148
loadFontAwesomeScript() {
147-
if (! this.fontAwesomeScriptIsLoaded) {
148-
let externalScript = document.createElement('script')
149-
externalScript.setAttribute('src', this.meta.script)
150-
document.head.appendChild(externalScript)
151-
}
152-
}
149+
if (this.fontAwesomeIsLoaded) return
150+
151+
let externalScript = document.createElement('script')
152+
externalScript.setAttribute('src', this.meta.script)
153+
document.head.appendChild(externalScript)
154+
},
155+
156+
loadFontAwesomeCss() {
157+
if (this.fontAwesomeIsLoaded) return
158+
159+
let link = document.createElement('link')
160+
link.setAttribute('rel', 'stylesheet')
161+
link.setAttribute('href', this.meta.css)
162+
document.head.appendChild(link)
163+
},
153164
},
154165
}
155166
</script>

‎resources/js/store.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Statamic.$store.registerModule(['publish', 'fontAwesome'], {
1212

1313
actions: {
1414
fetchIcons({ commit }) {
15-
return Statamic.$request.post(`/!/font-awesome/icons`)
15+
return Statamic.$request.get(`/!/font-awesome/icons`)
1616
.then(response => commit('setIcons', response.data))
1717
.catch(function (error) {
1818
console.log(error);

‎routes/actions.php‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<?php
22

3-
use Aerni\FontAwesome\FontAwesomeController;
3+
use Aerni\FontAwesome\Http\Controllers\FontAwesomeController;
44
use Illuminate\Support\Facades\Route;
55

6-
Route::name('font-awesome.')->group(function () {
7-
Route::post('/icons', [FontAwesomeController::class, 'index'])->name('font-awesome.icons');
8-
});
6+
Route::get('/icons', FontAwesomeController::class)->name('font-awesome.icons');

‎src/Contracts/FontAwesome.php‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?php
2+
3+
namespace Aerni\FontAwesome\Contracts;
4+
5+
use Aerni\FontAwesome\Data\Icon;
6+
use Aerni\FontAwesome\Data\Icons;
7+
use Illuminate\Support\Collection;
8+
9+
interface FontAwesome
10+
{
11+
public function icons(): Icons;
12+
13+
public function icon(string $id): ?Icon;
14+
15+
public function styles(): Collection;
16+
}

‎src/Data/Icon.php‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?php
2+
3+
namespace Aerni\FontAwesome\Data;
4+
5+
class Icon
6+
{
7+
public function __construct(
8+
public string $id,
9+
public string $label,
10+
public string $style,
11+
public string $class,
12+
) {}
13+
}

0 commit comments

Comments
 (0)