Merge pull request #63 from bellisk/hackday-remove-assetic

Use Symfony Webpack Encore instead of Assetic or Component Manager

.gitignore

@@ -4,6 +4,7 @@
 /app/config/sculpin_site_*.yml
 /app/logs/*
 /output_*/
-/source/components/
+/node_modules/
+/source/build/
 s3.conf
-/vendor/
+/vendor/

README.md

@@ -28,37 +28,37 @@ 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
-
-Your newly generated clone of sculpin-blog-skeleton is now
-accessible at `http://localhost:8000/`.
+First run Encore, to compile the assets in `source/assets/` into `source/build/`:
 
-Component Management
---------------------
-If you wish to install components via composer and have them automatically installed into your source directory you will need the following configuration options to your composer.json file.
+```bash
+$ yarn encore dev --watch
+```
 
-- component-dir: The directory you wish the components to be installed
-- components: An array of component names to be installed
+Then generate the site with Sculpin:
 
+```bash
+$ php vendor/bin/sculpin generate --watch --server
 ```
-"config": {
-    "component-dir": "source/components",
-    "components": [
-        "components/bootstrap",
-        "components/jquery",
-        "components/highlightjs"
-    ]
-}
-``` 
-
-The component manager will introspect these values to determine what it needs to copy into your source directory on `composer install`.
+
+Your newly generated clone of sculpin-blog-skeleton is now
+accessible at `http://localhost:8000/`.
+
 
 Previewing Development Builds
 -----------------------------

composer.json

@@ -16,28 +16,6 @@
         }
     ],
     "require": {
-        "sculpin/sculpin": "^3.0@dev",
-        "components/bootstrap": "^4.1",
-        "components/jquery": "^3.1",
-        "components/highlightjs": "^9.7"
-    },
-    "config": {
-        "component-dir": "source/components",
-        "components": [
-            "components/bootstrap",
-            "components/jquery",
-            "components/highlightjs"
-        ]
-    },
-    "scripts": {
-        "post-install-cmd": [
-            "ComponentManager\\ComponentManager::postComposerInstall"
-        ],
-        "post-update-cmd": [
-            "ComponentManager\\ComponentManager::postComposerInstall"
-        ]
-    },
-    "autoload": {
-        "classmap": ["component-manager.php"]
+        "sculpin/sculpin": "^3.0@dev"
     }
 }

package.json

@@ -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"
+  }
+}

source/_layouts/default.html

@@ -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/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 %}
@@ -85,9 +83,7 @@
             <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/app.js"></script>
         {% block scripts %}
         {% endblock %}
 
@@ -103,8 +99,6 @@
             ga('send', 'pageview');
         </script>
         {% endif %}
-        <script src="{{ site.url }}/components/highlightjs/highlight.pack.js"></script>
-        <script>hljs.initHighlightingOnLoad();</script>
 
         {% block scripts_after %}
         {% endblock %}

source/css/style.css → source/assets/css/app.scss

@@ -1,3 +1,6 @@
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+@import "../../../node_modules/highlightjs/styles/github.css";
+
 small {
     display: block;
     color: #888;

source/assets/js/app.js

@@ -0,0 +1,7 @@
+require('../css/app.scss');
+
+require('jquery')
+require('bootstrap')
+var hljs = require('highlightjs')
+
+hljs.initHighlightingOnLoad();