Skip to content

Commit

Permalink
Use Symfony Webpack Encore.
Browse files Browse the repository at this point in the history
  • Loading branch information
bellisk committed Mar 11, 2019
1 parent 62024f1 commit 2f26a9c
Show file tree
Hide file tree
Showing 16 changed files with 6,961 additions and 28 deletions.
5 changes: 3 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
/app/config/sculpin_site_*.yml
/app/logs/*
/output_*/
/source/components/
/node_modules/
/source/build/
s3.conf
/vendor/
/vendor/
41 changes: 40 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,57 @@ A very basic Sculpin based blog supporting the following features:
Install
-------

This application uses [Symfony's Webpack Encore](https://symfony.com/doc/current/frontend.html)
to manage CSS, JavaScript and image assets. First install the JS dependencies:

```bash
$ yarn install
```

Then install the PHP dependencies (Sculpin):

```bash
$ composer install
```

Build
-----

php vendor/bin/sculpin generate --watch --server
First run Encore, to compile the assets in `source/assets/` into `source/build/`:

```bash
$ yarn encore dev
```

Then generate the site with Sculpin:

```bash
$ php vendor/bin/sculpin generate --watch --server
```

Your newly generated clone of sculpin-blog-skeleton is now
accessible at `http://localhost:8000/`.

CSS, JavaScript and Images
--------------------------

All assets are kept in the directory `source/assets/`.

This application supports Sass. The app's main SCSS file is `source/assets/css/app.scss`.
You can add more CSS or SCSS files in the same directory if necessary and import
them into `app.scss`. You can also import CSS or SCSS files from modules in the
`node_modules/` directory.

The app's main JavaScript file is `source/assets/js/app.js`. You can add further
JavaScript there and `require` other libraries as necessary. When Encore builds
the assets, it will compile all the required code into the `build/app.js` and
`build/runtime.js` files.

If you need to create additional JavaScript files, remember to add them in
`webpack.config.js`, using `Encore.addEntry()`.

For more details, see the [Encore documentation](https://symfony.com/doc/current/frontend.html).

Previewing Development Builds
-----------------------------

Expand Down
11 changes: 11 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"dependencies": {
"@symfony/webpack-encore": "^0.24.0",
"bootstrap": "^4.3.1",
"highlightjs": "^9.12.0",
"jquery": "^3.3.1",
"node-sass": "^4.11.0",
"sass-loader": "^7.0.1",
"popper.js": "^1.14.7"
}
}
45 changes: 20 additions & 25 deletions source/_layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,28 @@
{% block head_meta %}
<meta name="robots" content="noindex, follow">
{% endblock %}
<link href="{{ site.url }}/components/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="{{ site.url }}/css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{ site.url }}/build/app.css">

<link rel="apple-touch-startup-image" href="{{ site.url }}/images/jackson/2048x2048.png">
<link rel="apple-touch-startup-image" href="{{ site.url }}/build/jackson/2048x2048.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="76x76" href="{{ site.url }}/images/jackson/76x76.png">
<link rel="shortcut icon" sizes="120x120" href="{{ site.url }}/images/jackson/120x120.png">
<link rel="shortcut icon" sizes="128x128" href="{{ site.url }}/images/jackson/128x128.png">
<link rel="shortcut icon" sizes="152x152" href="{{ site.url }}/images/jackson/152x152.png">
<link rel="shortcut icon" sizes="196x196" href="{{ site.url }}/images/jackson/196x196.png">
<link rel="shortcut icon" sizes="512x512" href="{{ site.url }}/images/jackson/512x512.png">
<link rel="shortcut icon" sizes="1024x1024" href="{{ site.url }}/images/jackson/1024x1024.png">
<link rel="shortcut icon" sizes="2048x2048" href="{{ site.url }}/images/jackson/2048x2048.png">
<link rel="apple-touch-icon" sizes="76x76" href="{{ site.url }}/images/jackson/76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="{{ site.url }}/images/jackson/120x120.png">
<link rel="apple-touch-icon" sizes="128x128" href="{{ site.url }}/images/jackson/128x128.png">
<link rel="apple-touch-icon" sizes="152x152" href="{{ site.url }}/images/jackson/152x152.png">
<link rel="apple-touch-icon" sizes="196x196" href="{{ site.url }}/images/jackson/196x196.png">
<link rel="apple-touch-icon" sizes="512x512" href="{{ site.url }}/images/jackson/512x512.png">
<link rel="apple-touch-icon" sizes="1024x1024" href="{{ site.url }}/images/jackson/1024x1024.png">
<link rel="apple-touch-icon" sizes="2048x2048" href="{{ site.url }}/images/jackson/2048x2048.png">
<link rel="shortcut icon" sizes="76x76" href="{{ site.url }}/build/jackson/76x76.png">
<link rel="shortcut icon" sizes="120x120" href="{{ site.url }}/build/jackson/120x120.png">
<link rel="shortcut icon" sizes="128x128" href="{{ site.url }}/build/jackson/128x128.png">
<link rel="shortcut icon" sizes="152x152" href="{{ site.url }}/build/jackson/152x152.png">
<link rel="shortcut icon" sizes="196x196" href="{{ site.url }}/build/jackson/196x196.png">
<link rel="shortcut icon" sizes="512x512" href="{{ site.url }}/build/jackson/512x512.png">
<link rel="shortcut icon" sizes="1024x1024" href="{{ site.url }}/build/jackson/1024x1024.png">
<link rel="shortcut icon" sizes="2048x2048" href="{{ site.url }}/build/jackson/2048x2048.png">
<link rel="apple-touch-icon" sizes="76x76" href="{{ site.url }}/build/jackson/76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="{{ site.url }}/build/jackson/120x120.png">
<link rel="apple-touch-icon" sizes="128x128" href="{{ site.url }}/build/jackson/128x128.png">
<link rel="apple-touch-icon" sizes="152x152" href="{{ site.url }}/build/jackson/152x152.png">
<link rel="apple-touch-icon" sizes="196x196" href="{{ site.url }}/build/jackson/196x196.png">
<link rel="apple-touch-icon" sizes="512x512" href="{{ site.url }}/build/jackson/512x512.png">
<link rel="apple-touch-icon" sizes="1024x1024" href="{{ site.url }}/build/jackson/1024x1024.png">
<link rel="apple-touch-icon" sizes="2048x2048" href="{{ site.url }}/build/jackson/2048x2048.png">

<link rel="stylesheet" href="{{ site.url }}/components/highlightjs/styles/github.css" />
<link rel="alternate" type="application/atom+xml" href="{{ site.url }}/atom.xml" title="{{ site.title }} activity feed" />
{% block head_styles %}
{% endblock %}
Expand Down Expand Up @@ -85,9 +83,8 @@
<span class="text-muted">&copy; {{ "now"|date("Y") }} {{ site.title }}</span>
</footer>

<script src="{{ site.url }}/components/jquery/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="{{ site.url }}/components/bootstrap/js/bootstrap.min.js"></script>
<script src="{{ site.url }}/build/runtime.js"></script>
<script src="{{ site.url }}/build/app.js"></script>
{% block scripts %}
{% endblock %}

Expand All @@ -103,8 +100,6 @@
ga('send', 'pageview');
</script>
{% endif %}
<script src="{{ site.url }}/components/highlightjs/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

{% block scripts_after %}
{% endblock %}
Expand Down
3 changes: 3 additions & 0 deletions source/css/style.css → source/assets/css/app.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@import "../../../node_modules/bootstrap/scss/bootstrap";
@import "../../../node_modules/highlightjs/styles/github.css";

small {
display: block;
color: #888;
Expand Down
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
7 changes: 7 additions & 0 deletions source/assets/js/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
require('../css/app.scss');

require('jquery')
require('bootstrap')
var hljs = require('highlightjs')

hljs.initHighlightingOnLoad();
23 changes: 23 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
var Encore = require('@symfony/webpack-encore');

Encore
// directory where compiled assets will be stored
.setOutputPath('source/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
.copyFiles({
from: './source/assets/images'
})
.addEntry('app', './source/assets/js/app.js')

.enableSingleRuntimeChunk()

.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())

.enableSassLoader()
;

module.exports = Encore.getWebpackConfig();
Loading

0 comments on commit 2f26a9c

Please sign in to comment.