Skip to content

Instantly share code, notes, and snippets.

@bartholomej
Last active February 21, 2021 22:02
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save bartholomej/8356550 to your computer and use it in GitHub Desktop.
Save bartholomej/8356550 to your computer and use it in GitHub Desktop.
SkeletonX: Basic Skeleton for MODX Revo

SkeletonX for MODX

SkeletonX is basic HTML boilerplate for MODx Revolution

Requirements

* Foundation 5 (SASS + JS)

Features

* Basic chunks and templates
* Foundation 5 everywehere!
* Prepare for Babel integration [[setContextBabel]]
* Never forget update year in copyright ;) [[CopyrightYear]]
* Social meta tags chunk
* Prepare for Offcanvas
* Prepare for Analytics

Author

* BART! https://github.com/bartholomej    
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', 'domain.com');
ga('send', 'pageview');
</script>
<!doctype html>
<html lang="[[++cultureKey:default=`[[*context_key]]`]]">
<head>
[[$htmlHead]]
</head>
<body>
[[$bodyHead]]
<!-- Content -->
<div class="row">
<div class="large-12 columns">
<h1>[[*pagetitle]]</h1>
<p>[[*content]]</p>
</div>
</div>
<!-- Footer -->
[[$footer]]
</body>
</html>
[[- [[$nav-mobile]] <!-- offcanvas navigation for mobile -->]]
<header class="row">
<div class="large-12 columns">
[[$nav]]
</div>
</header>
<?
/**
* CopyrightYear: get years to copyright footer
*
* Parameters:
* start [optional]: First year of website.
* Special param: modx (Get modx installation date)
* DEFAULT: nothing.
* separator [optional]: the space string between start and current year
*
*
* EXAMPLES: e.g. current year: 2014, MODx installed: 2013
* [[CopyrightYear]] // return: 2014
* [[CopyrightYear? &start=`2010`]] // return: 2010 - 2014
* [[CopyrightYear? &start=`modx`]] // return: 2013 - 2014
*
* Author: BART!
*/
$start = $modx->getOption('start', $scriptProperties, date("Y"));
$separator = $modx->getOption('separator', $scriptProperties, ' - ');
$now = date("Y");
$start = isset($start)? $start : $now;
if($start == 'modx'){ // Dirty, dirty way ho to get installation date :))
$setting = $modx->getObject('modSystemSetting', 'emailsender');
if($setting){
$settings = $setting->toArray();
$start = date('Y', strtotime($settings['editedon']));
}else{
$modx->log(modX::LOG_LEVEL_ERROR, '[CopyrightYear] Cant get date from system settings property!');
}
}
$years = ($now > $start && $start > '1970') ? $start . $separator . $now : $now;
return $years;
[[*content]]
[[- [[!setContextBabel]] ]]
<meta charset="utf-8" />
<base href="[[!++site_url]]" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>[[*id:isnot=`[[++site_start]]`:then=`[[*longtitle:default=`[[*pagetitle]]`]] | `]][[++site_name]]</title>
<meta name="description" content="[[*description:default=`[[*introtext]]`]]">
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
<link type="text/plain" rel="author" href="/humans.txt" />
[[$social-meta]]
<meta name="robots" content="all,follow,index" />
<meta name="googlebot" content="index,follow,snippet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'> -->
<!-- <script src="assets/libs/foundation/js/modernizr.js"></script> -->
[[$jsDefault]]
<!-- nonSASS stylesheet -->
<!--
<link rel="stylesheet" href="assets/libs/foundation/css/foundation.css" />
<link rel="stylesheet" href="assets/template/style.css" />
-->
<!-- SASS stylesheet -->
<link rel="stylesheet" href="assets/css/screen.css" />
<script type="text/javascript">
$(document).ready(function() {
// console.log("document loaded");
});
</script>
<script src="assets/libs/foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
[[$analytics]]
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar show-for-small-only">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h3 class="title"><a href="./">[[*pagetitle]]</a></h3>
</section>
</nav>
<aside class="left-off-canvas-menu show-for-small-only">
<li><label><span class="text-center"><a href="./">[[++site_name]]</a></span></label></li>
[[- <!--Here you can call some getResources/wayfinder to place menu items --> ]]
</aside>
<section class="main-section">
<!-- navigation -->
<nav>
</nav>
<?
/**
* setContextBabel (experimental)
*
* DESCRIPTION
* Auto set context settings in every context for Babel
*
* AUTHOR
* BART! http://github.com/bartholomej
*
* USAGE
* Just call once somewhere like this [[!setContextBabel]]. Then remove ;)
*
*/
// Get all front contexts
$contexts = array();
$ctx = $modx->getCollection('modContext', array('key:NOT IN' => array('mgr')));
foreach ($ctx as $context) {
$contexts[] = $context->get('key');
}
$site_url = $modx->getOption('site_url');
$settings = array();
foreach ($contexts as $context) {
// required settings
$settings[] = array ('key' => 'base_url', 'value' => '/', 'context_key' => $context,);
$settings[] = array ('key' => 'cultureKey', 'value' => $context, 'context_key' => $context,);
$settings[] = array ('key' => 'site_start', 'value' => '1', 'context_key' => $context,);
$settings[] = array ('key' => 'site_url', 'value' => $site_url, 'context_key' => $context,);
}
/* JSON style
$settings[] = '
{"key": "base_url", "value": "/", "context_key": "'.$context.'"},
{"key": "cultureKey", "value": "'.$context.'", "context_key": "'.$context.'"},
{"key": "site_start", "value": "1", "context_key": "'.$context.'"},
{"key": "site_url", "value": "'. $site_url . '", "context_key": "'.$context.'"}
';
*/
foreach($settings as $val){
$setContext = $modx->newObject('modContextSetting');
$setContext->fromArray($val, '', true);
$setContext->set('xtype', 'textfield');
$setContext->set('namespace', 'core');
$setContext->set('area', 'language');
$setContext->save();
}
// Clear context cache //TODO
$cacheRefreshOptions = array( 'context_settings' => array('contexts' => array($contexts) ));
$modx->cacheManager-> refresh($cacheRefreshOptions);
return "[setContextBabel]: Babel settings created for all contexts. Now you should remove snippet call." . var_dump($contexts);
[[- Social Meta Tags
Validators:
http://www.google.com/webmasters/tools/richsnippets
https://developers.facebook.com/tools/debug
https://dev.twitter.com/docs/cards/validation/validator
REQIUREMENTS in document:
[[*img]], [[*introtext]]
]]
<!-- Schema -->
<link rel="publisher" href="[[++gplus]]" />
<meta itemprop="url" content="[[~[[*id]]?&scheme=`full`]]">
<meta itemprop="name headline" content="[[*longtitle:default=`[[*pagetitle]]`]]">
<meta itemprop="description" content="[[*description:default=`[[*introtext]]`]]">
<meta itemprop="image" content="[[!++base_href]][[*img]]">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="[[*longtitle:default=`[[*pagetitle]]`]]">
<meta name="twitter:description" content="[[*description:default=`[[*introtext]]`]]">
<meta name="twitter:image:src" content="[[!++base_href]][[*img]]">
<!-- Facebook -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="[[++site_name]]"/>
<meta property="og:url" content="[[~[[*id]]?&scheme=`full`]]" />
<meta property="og:image" content="[[!++base_href]][[*img]]" />
<meta property="og:title" content="[[*longtitle:default=`[[*pagetitle]]`]]" />
<meta property="og:description" content="[[*description:default=`[[*introtext]]`]]" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment