From cb322cadc4fb47931c7d8e9fb5e3c6f1abf12947 Mon Sep 17 00:00:00 2001 From: ray Date: Fri, 26 Mar 2021 12:33:37 +0000 Subject: [PATCH] initial commit --- README.md | 43 +++++++++++++++++++++++++++ assets/images/webpack-icon.svg | 13 +++++++++ layouts/default.htm | 53 ++++++++++++++++++++++++++++++++++ package.json | 20 +++++++++++++ pages/home.htm | 19 ++++++++++++ partials/footer.htm | 5 ++++ partials/nav.htm | 5 ++++ src/js/app.js | 13 +++++++++ src/js/main.js | 4 +++ src/scss/style.scss | 5 ++++ 10 files changed, 180 insertions(+) create mode 100644 README.md create mode 100644 assets/images/webpack-icon.svg create mode 100644 layouts/default.htm create mode 100644 package.json create mode 100644 pages/home.htm create mode 100644 partials/footer.htm create mode 100644 partials/nav.htm create mode 100644 src/js/app.js create mode 100644 src/js/main.js create mode 100644 src/scss/style.scss diff --git a/README.md b/README.md new file mode 100644 index 0000000..3de0e49 --- /dev/null +++ b/README.md @@ -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`: + +``` + + +{% framework extras %} + +{% scripts %} +``` diff --git a/assets/images/webpack-icon.svg b/assets/images/webpack-icon.svg new file mode 100644 index 0000000..0816e0a --- /dev/null +++ b/assets/images/webpack-icon.svg @@ -0,0 +1,13 @@ + + + + webpack-icon + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/layouts/default.htm b/layouts/default.htm new file mode 100644 index 0000000..2bef85b --- /dev/null +++ b/layouts/default.htm @@ -0,0 +1,53 @@ +== +theme->getDirName(); + $this->layout['styles'] = url(mix('assets/css/style.css', $themePath)); + $this->layout['scripts'] = url(mix('assets/js/scripts.js', $themePath)); +} +?> +== + + + + + + + + {{ this.page.title }} + + + + + + + + + + + + + + + + {% styles %} + + + +
+ + {% partial 'nav' %} + + {% page %} + + {% partial 'footer' %} + +
+ + + + {% scripts %} + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..f8fdd79 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/pages/home.htm b/pages/home.htm new file mode 100644 index 0000000..d66ccb1 --- /dev/null +++ b/pages/home.htm @@ -0,0 +1,19 @@ +title = "Home" +url = "/" +layout = "default" +is_hidden = 0 + +[viewBag] + +== +page['bodyClass'] = 'home'; +} +?> +== + +

October CMS Webpack Theme Boilerplate

+ +Webpack logo diff --git a/partials/footer.htm b/partials/footer.htm new file mode 100644 index 0000000..8cde220 --- /dev/null +++ b/partials/footer.htm @@ -0,0 +1,5 @@ +[viewBag] +== + diff --git a/partials/nav.htm b/partials/nav.htm new file mode 100644 index 0000000..fdc4bbb --- /dev/null +++ b/partials/nav.htm @@ -0,0 +1,5 @@ +[viewBag] +== + diff --git a/src/js/app.js b/src/js/app.js new file mode 100644 index 0000000..678e1ad --- /dev/null +++ b/src/js/app.js @@ -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'); diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 0000000..2ddf01d --- /dev/null +++ b/src/js/main.js @@ -0,0 +1,4 @@ +document.addEventListener('DOMContentLoaded', () => { + console.log('JavaScript loaded!'); +}); + diff --git a/src/scss/style.scss b/src/scss/style.scss new file mode 100644 index 0000000..056fce9 --- /dev/null +++ b/src/scss/style.scss @@ -0,0 +1,5 @@ +/* scss to go here */ + +body { + background-color: pink; +}