ubiweb/ubiweb-core

Core framework for Ubiweb network.

2.0.0 2018-07-13 18:26 UTC

This package is not auto-updated.

Last update: 2019-09-22 14:38:43 UTC


README

This package provides the core functionality of Ubiweb domains. It's meant to be included in any ubiweb-domain sites.

Installation

  • git clone https://github.com/ubiweb-media/ubiweb-core.git
  • cd ubiweb-core && composer install

Routing

  • $site->route(): Registers a route and corresponding controller.

Template Helpers

  • $site->trans( $key, $lang ): Translate by key. Translations are registered in ./content/translations.yml
  • $site->asset( $path ): Returns the path to a public asset.
  • $site->global( $key ): Returns the config value in the global namespace.
  • $site->config( $type ): Get the array of config values.
  • $site->languages( $type ): Get language information. Useful for creating a language switcher with $site->languages('routes')
  • $site->getRoute()->getName(): Get's the current route name.

HTML (Display) Helpers

  • $site->display()->menu( $location, $parentAttributes = [], $childAttributes = [] ): Output an HTML menu.
  • $site->display()->image( $filename, $attributes = [], $size = [] ): Generates a responsive image set.
  • $site->gallery('gallery')->thumbnails([]) as $thumb
  • $site->display()->favicons(): Generates all necessary favicon files and <link>s. Simply save a 250x250 source png to assets/images/favicon.png and it'll do the rest.

Social Feeds

Currently, Facebook and Instagram feeds are supported. You can call them in your template with: $site->display()->socialFeed('instagram', $args) or $site->display()->socialFeed('facebook', $args)

Before you can do that though, define the social property's username in your config:

social:
  instagram: instagramusername
  facebook: facebookusername

Instagram currently supports 1 argument which is num to control the amount of posts provided. Eg)$site->display()->socialFeed('instagram', ['num' => 8]). The default is 5.

Facebook arguments are the same as the Facebook graphQL documentation here.

Eg)

$site->display()->socialFeed('facebook', [
    'fields' => 'permalink_url, created_time, full_picture, message, shares',
    'limit' => 6,
])

URL Helpers

  • $site->url()->fromRoute( $routeName ) (or shorthand $site->url($routeName)): get's the URL from a route name.
  • $site->url()->fromPath( $path ): get's the URL from a URI path.
  • $site->url()->current(): get's the current URL

Blog

  • $site->blog()->index( $category ): Get's a collection of blog posts by category.
  • $site->blog()->postUrl( $slug ): Generates the local URL for a post from its slug.
  • $site->blog()->post(): Get's the current blog post.
  • A post object has the following properties.

Contact Forms

A POST endpoint is provided under /contact for mailing data. You can send through a simple form by providing the following required parameters:

  • to
  • subject
  • message

The message is a combination of all parameters under its name group. So message[Name] and message[Email] and any other arbitrary field would be combined to form the message body of the email.

The simplest of forms: Eg)

<form action="{{ $site->url('/contact') }}" method="post">
  <input type="hidden" name="to" value="greg@codecomment.io" />
  <input type="hidden" name="subject" value="Contact from Ubiweb" />
  <input type="hidden" name="_redirect" value="{{ $site->url()->current() }}" />
  <input type="hidden" name="_success" value="Success Message" />
  <input type="text" name="message[Name]"/>
  <input type="text" name="message[Email]"/>
  <button>Send</button>
</form>

However it is strongly recommended you use the recaptcha version of this in order to fight spam. For that, these two scripts must be included on the page:

<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="{{ $site->vendor('ubiweb/ubiweb-core/src/scripts/send.js') }}"></script>

And this HTML form markup is required:

<form id="recaptcha" action="{{ $site->url('/contact') }}" method="post">
	<input type="hidden" name="to" value="{{ $site->global('admin_email') }}" />
	<input type="hidden" name="subject" value="{{ $site->trans('Ubiweb Contact from') }} {{ $site->global('site_title') }}" />
	<button
        type="submit"
        class="g-recaptcha btn btn-primary btn-block"
        data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"
        data-callback="ubiRecaptchaFormSubmission">
        {{ $site->trans($submitText ?? 'Submit') }}</button>

  <div data-form-response="success" class="alert alert-success" style="display:none">{{ $site->trans('Your message was sent successfully.') }}</div>
  <div data-form-response="error" class="alert alert-danger" style="display:none">{{ $site->trans('There was an error trying to send the form. Please contact: ') }} <a href="mailto:{{ $site->global('admin_email') }}">{{ $site->global('admin_email') }}</a></div>
	<button type="submit" class="btn btn-primary btn-block">{!! $site->trans($submitText ?? 'Submit') !!}</button>
</form>

Gallery

For a more dynamic gallery add the following to your config:

gallery_base: /gallery
gallery_path: /images/example

Where example is an arbitrary directory to store your gallery.

Check out the helpers used for generating the gallery in gallery.blade.php and gallery-category.blade.php of the Bedrock template

Reviews

You can pull in Google Place reviews with the $site->reviews()->get() method. The only requirements is that

business:
    name: Ubiweb
    latitude: 45.4743734
    longitude: -73.5947416

... is filled out. You can then grab and filter the reviews in your template like so:

@if( $reviews = $site->reviews()->get(['rating' => 5]) )
	@foreach( $reviews as $review )
	<img src="{{ $review->profile_photo_url }}" height="40" alt="{{ $review->author_name }}">
	<h5>{{ $review->rating }} {{ $review->relative_time_description }} by {{ $review->author_name }}</h5>
	<p>{{ $review->text }}</p>
	<a href="{{ $review->author_url }}" target="_blank">Author Profile</a>
	@endforeach
@endif

The options for filtering are the same as the properties on the review. By default, it will be scoped to the language you're page is on.

Directory Structure

Your directory must have images in it. To add meta information and to reorder your gallery, simply add a info.yml file to the directory and use the filename as the key, and a dictionary of arbitrary values to associate to it. Like this:

mahir-uysal-304884-unsplash.jpg:
  name: Mahir Uysal
  description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
chuttersnap-463353-unsplash.jpg:
  name: Chetternsap
  description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
erol-ahmed-489175-unsplash.jpg:
  name: Erol Ahmed
  description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The order of the keys will order the gallery.

For sub categories, add a categories.yml in the root of your directory, and then create subdirectories that match your yml file, like this:

root:
  name: Main
cats:
  name: Cats
sunshine:
  name: Sunshine
water:
  name: Water

Root is a special key to represent the root directory. The rest should correspond to the subdirectories.