Merge pull request #4 from jinjie/develop

Version 2

Makefile

@@ -1,16 +1,16 @@
 export PATH := bin:$(PATH)
 
 staging:
-ifeq (, $(wildcard composer-stable.phar))
-	curl -O https://getcomposer.org/composer-stable.phar
-	chmod a+x composer-stable.phar
+ifeq (, $(wildcard composer.phar))
+	curl -O https://getcomposer.org/download/1.10.20/composer.phar
+	chmod a+x composer.phar
 endif
 
 	git fetch
 	git checkout develop
 	git pull
 	yarn install
-	./composer-stable.phar install
+	./composer.phar install
 	./node_modules/gulp/bin/gulp.js
 	rm -rf silverstripe-cache/
 	mkdir silverstripe-cache/

README.md

@@ -13,6 +13,13 @@ yarn
 vendor/bin/sake dev/build
 ```
 
+## Silverstripe Elemental
+
+When building for the first time, run `DNADesign-Elemental-Tasks-MigrateContentToElement` task to migrate content to
+Elemental
+
+
+
 ## Start developing
 
 1. Edit [gulpfile.js](gulpfile.js) and change the address of the website

app/_config/mysite.yml

@@ -8,6 +8,10 @@ SilverStripe\SiteConfig\SiteConfig:
   extensions:
     - SwiftDevLabs\Extensions\SiteConfigExtension
 
+Page:
+  extensions:
+    - DNADesign\Elemental\Extensions\ElementalPageExtension
+
 ---
 Name: my-project-assetsflysystem
 After: '#assetsflysystem'

composer.json

@@ -10,7 +10,9 @@
         "fractas/googleanalytics": "^3.0",
         "symbiote/silverstripe-gridfieldextensions": "^3.2",
         "silverstripe/login-forms": "^4.2",
-        "jinjie/silverstripe-admin-material-icons": "^0.0.1"
+        "jinjie/silverstripe-admin-material-icons": "^0.0.1",
+        "dnadesign/silverstripe-elemental": "^4",
+        "jinjie/slickhero-elemental": "^1.0"
     },
     "require-dev": {
         "phpunit/phpunit": "^5.7"

gulpfile.js

@@ -15,21 +15,29 @@ var
 
     browserify  = require('gulp-browserify'),
 
-    browserSync = require('browser-sync').create();
+    browserSync = require('browser-sync').create(),
+
+    notifier    = require('node-notifier')
 ;
 
 gulp.task('sass', function(cb) {
     gulp.src(THEME_DIR + '/client/src/sass/*.scss')
         .pipe(sourcemaps.init())
-        .pipe(sass({
-            outputStyle: 'compressed',
-            includePaths: [
-                // to import other sass something like
-                // @import "bootstrap/scss/bootstrap.scss";
-                './node_modules'
-            ]
-        })
-        .on('error', sass.logError))
+        .pipe(
+            sass({
+                outputStyle: 'compressed',
+                includePaths: [
+                    // to import other sass something like
+                    // @import "bootstrap/scss/bootstrap.scss";
+                    './node_modules'
+                ]
+            }).on('error', function(err) {
+                notifier.notify({
+                    'title': 'SASS Compile Error',
+                    'message': err.message
+                })
+            })
+         )
         .pipe(gulp.dest(THEME_DIR + '/client/dist/css'))
         .pipe(browserSync.stream());
 
@@ -38,14 +46,21 @@ gulp.task('sass', function(cb) {
 
 gulp.task('browserify', function(cb) {
     gulp.src(THEME_DIR + '/client/src/js/*.js')
-        .pipe(browserify())
+        .pipe(
+            browserify().on('error', function(err) {
+                notifier.notify({
+                    'title': 'JS Compile Error',
+                    'message': err.message
+                })
+            })
+        )
         .pipe(gulp.dest(THEME_DIR + '/client/dist/js'))
         .pipe(browserSync.stream());
 
     cb();
 });
 
-gulp.task('watch', function(cb) {
+gulp.task('browser-sync', function(cb) {
     browserSync.init({
         proxy: PROXY_URL,
         files: [
@@ -60,4 +75,12 @@ gulp.task('watch', function(cb) {
     cb();
 });
 
-gulp.task('default', gulp.series('sass', 'browserify'));
+gulp.task('fontawesome', function(cb) {
+    gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/**/*')
+        .pipe(gulp.dest(THEME_DIR + '/client/dist/fontawesome-free/webfonts'));
+
+      cb();
+});
+
+gulp.task('default', gulp.series('sass', 'fontawesome', 'browserify'));
+gulp.task('watch', gulp.series('default', 'browser-sync'));

package.json

@@ -3,13 +3,15 @@
   "version": "1.0.0",
   "description": "SilverStripe 4 Gulp Workflow",
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.3",
     "bootstrap": "^4",
     "browser-sync": "^2.26.7",
     "gulp": "^4",
     "gulp-browserify": "^0.5.1",
     "gulp-sass": "^4",
     "gulp-sourcemaps": "^2.6",
     "jquery": "3.4.1",
+    "node-notifier": "^9.0.1",
     "popper.js": "^1.16"
   }
 }

themes/app/client/src/sass/includes/variables.scss

@@ -1,3 +1,5 @@
 /**
  * Variables
  */
+
+$fa-font-path: "../fontawesome-free/webfonts";

themes/app/client/src/sass/style.scss

@@ -9,4 +9,10 @@
 @import "includes/tablet";
 @import "includes/mobile";
 
+// Fontawesome
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/regular";
+@import "@fortawesome/fontawesome-free/scss/brands";
+
 @import "includes/login-form-fix";

themes/app/templates/Includes/SocialMediaLinks.ss

@@ -8,5 +8,4 @@
             </li>
         <% end_loop %>
     </ul>
-    <% require css(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css) %>
 <% end_if %>

themes/app/templates/Layout/Page.ss

@@ -1,9 +1,7 @@
 <div class="container my-3">
     <div class="row">
         <div class="col">
-            {$Content}
-
-            {$Form}
+            {$ElementalArea}
         </div>
     </div>
 </div>