initial commit

This commit is contained in:
Ray Elliott 2021-03-26 12:33:37 +00:00
commit cb322cadc4
10 changed files with 180 additions and 0 deletions

43
README.md Normal file
View File

@ -0,0 +1,43 @@
October CMS Webpack Theme Boilerplate
==========
This is an example theme for October CMS that includes:
- Webpack (using Laravel Mix)
To use it:
- [Install October CMS](https://octobercms.com/docs/setup/installation)
- Create a new folder in October /themes folder (call it for example my-awesome-theme)
- Clone the repo in your theme folder
- Activate the theme from October backend settings
To modify it:
- Open a terminal, go to your theme folder and run `npm install` (node_modules folder will be created)
- Install more packages using `npm install --save`
- Require your installed packages in src/js/app.js
- Modify the js and scss files
- Run `npm run dev` (`npm run watch` to recompile when something changes)
- [Add new pages, partials, content files...](https://octobercms.com/docs/cms/themes)
When you are ready for production:
- Run `npm run prod`
## To add ajax framework
```sh
npm install jquery
```
Add framework tag to `layouts/default.htm`:
```
<script src="{{ this.layout.scripts }}"></script>
{% framework extras %}
{% scripts %}
```

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="170px" height="170px" viewBox="0 0 170 170" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>webpack-icon</title>
<desc>Created with Sketch.</desc>
<g id="webpack-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(43.000000, 37.000000)">
<polygon id="Path" fill="#FFFFFF" points="42.5 0.016 85 24 85 71.984 42.5 95.968 0 71.984 0 24"></polygon>
<path d="M77.4141509,70.32 L43.9113208,89.248 L43.9113208,74.528 L64.7924528,63.056 L77.4141509,70.32 Z M79.7075472,68.256 L79.7075472,28.704 L67.454717,35.76 L67.454717,61.2 L79.7075472,68.256 Z M7.45754717,70.32 L40.9603774,89.232 L40.9603774,74.512 L20.0792453,63.056 L7.45754717,70.32 Z M5.16415094,68.256 L5.16415094,28.704 L17.4169811,35.76 L17.4169811,61.2 L5.16415094,68.256 Z M6.59150943,26.144 L40.9603774,6.752 L40.9603774,20.992 L18.940566,33.072 L18.7641509,33.168 L6.59150943,26.144 Z M78.2641509,26.144 L43.9113208,6.752 L43.9113208,20.992 L65.9150943,33.088 L66.0915094,33.184 L78.2641509,26.144 Z" id="Shape" fill="#8ED6FB" fill-rule="nonzero"></path>
<path d="M40.9603774,71.168 L20.3679245,59.856 L20.3679245,37.472 L40.9603774,49.328 L40.9603774,71.168 Z M43.9113208,71.168 L64.5037736,59.872 L64.5037736,37.472 L43.9113208,49.328 L43.9113208,71.168 Z M21.7471698,34.88 L42.4358491,23.536 L63.1084906,34.88 L42.4358491,46.784 L21.7471698,34.88 Z" id="Shape" fill="#1C78C0" fill-rule="nonzero"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

53
layouts/default.htm Normal file
View File

@ -0,0 +1,53 @@
==
<?php
function onInit()
{
$themePath = 'themes/' . $this->theme->getDirName();
$this->layout['styles'] = url(mix('assets/css/style.css', $themePath));
$this->layout['scripts'] = url(mix('assets/js/scripts.js', $themePath));
}
?>
==
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Ray Elliott">
<title>{{ this.page.title }}</title>
<meta name="title" content="{{ this.page.meta_title }}">
<meta name="description" content="{{ this.page.meta_description }}">
<meta property="og:title" content="{{ this.page.meta_title }}" />
<meta property="og:description" content="{{ this.page.meta_description }}" />
<meta property="og:url" content="{{ url_current() }}" />
<meta property="og:image" content="" />
<link rel="shortcut icon" href="{{ 'assets/images/favicon.png'|theme }}" type="image/png">
<link rel="icon" href="{{ 'assets/images/favicon.png'|theme }}" type="image/png">
<link href="{{ this.layout.styles }}" rel="stylesheet">
{% styles %}
</head>
<body class="{{ this.page.bodyClass }}">
<div id="js--webapp">
{% partial 'nav' %}
{% page %}
{% partial 'footer' %}
</div>
<script src="{{ this.layout.scripts }}"></script>
{% scripts %}
</body>
</html>

20
package.json Normal file
View File

@ -0,0 +1,20 @@
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"cross-env": "^5.2.0",
"laravel-mix": "^4.0.13",
"postcss": "^7.0.35",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.22"
}
}

19
pages/home.htm Normal file
View File

@ -0,0 +1,19 @@
title = "Home"
url = "/"
layout = "default"
is_hidden = 0
[viewBag]
==
<?php
function onStart()
{
$this->page['bodyClass'] = 'home';
}
?>
==
<h1>October CMS Webpack Theme Boilerplate</h1>
<img src="{{ 'assets/images/webpack-icon.svg'|theme }}" alt="Webpack logo">

5
partials/footer.htm Normal file
View File

@ -0,0 +1,5 @@
[viewBag]
==
<footer class="footer">
<p>This is ze footer!</p>
</footer>

5
partials/nav.htm Normal file
View File

@ -0,0 +1,5 @@
[viewBag]
==
<nav class="navbar navbar-expand-lg navbar-dark">
<p>This is ze nav!</p>
</nav>

13
src/js/app.js Normal file
View File

@ -0,0 +1,13 @@
try {
// uncomment this if using ajax framework (requires jquery) and
// jquery has been installed using npm
// window.$ = window.jQuery = require('jquery');
// require npm packages globally here
//require('more-packages-installed-with-npm-install');
} catch (e) {
console.error(e);
}
require('./main');

4
src/js/main.js Normal file
View File

@ -0,0 +1,4 @@
document.addEventListener('DOMContentLoaded', () => {
console.log('JavaScript loaded!');
});

5
src/scss/style.scss Normal file
View File

@ -0,0 +1,5 @@
/* scss to go here */
body {
background-color: pink;
}