searleb

Setting up React with Laravel

This guide will help you get a starting point for implementing React into a default install of Laravel v5.3.

Install React

cd application
npm install --save react react-dom

Gulp file

searleb

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');


// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
    browserSync.init({

searleb

// Init slider with options
scope.$on('LastRepeaterElement', function(){
  // Do something
  $slider.slick(slickOptions);
});

searleb

// prevent page scrolling when mobile menu is visible
$('.navbar-toggle').on('click', function() {
  $('body').toggleClass('no-scroll');
});

searleb

/**
* Closes all navigation layers, staggered from bottom
* if the user clicks anywhere outside of the nav
*/
$('html').on('click', function(event) {
    // if the closest parent is not the nav
    if (!$(event.target).closest('nav').length) {
        // get all elements with the nav--open class and reverse the array
        $($('.nav--open').get().reverse()).each(function(i, el) {
            // remove the element nav--open class with 300ms * i delay to get the stagger effect

searleb

// blade template - just html really
@section('journal-carousel')
    <div class="container article-carousel">
        <div class="row">
            <div class="col-sm-12">
                <div class="article-carousel__slider">
                    @for ($i = 0; $i < 3; $i++)
                        <figure><img src="{{Theme::url('images/blonde'.$i.'.jpg')}}" alt="" class="img-responsive" /></figure>
                    @endfor
                    @for ($i = 0; $i < 3; $i++)

searleb

/**
 * Add this to a bootstrap .row to add flex.
 * This will cause child .col-* elements to expand to equal hights
 */
.row-flex {
    @media #{$media-sm}{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;

searleb

/**
 * background-image mixin
 * @param  {string} $url   only image name required
 * @param  {string} $pos:  center        background-position: [default]center
 * @param  {string} $size: cover         background-size: [default]cover
 * @param  {string} $rep:  no-repeat     background-repeat: [default]no-repeat
 */
@mixin background-image($url, $pos: center, $size: cover, $rep: no-repeat ) {
    background-image: url('../images/#{$url}');
    background-position: $pos;

searleb

meteor remove insecure autopublish

meteor add fourseven:scss iron:router msavin:mongol accounts-ui

npm install -g meteor-jsdoc

searleb

    // requires Moment.js
    
    // format time
    UI.registerHelper('formatTime', function(time, formatting) {
        if(time) {
            return moment(time).format(formatting);
        }
    });