This is a Total Onion Training Day project, crafted with care by Ethan and Robert.
This project was sparked by the teams experiences with Fusion Cask, where we frequently faced the challenge of accurately determining viewport sizes, rather than just the monitor dimensions. Realizing the gap in available tools, we were inspired to create something better.
Our goal is to develop a versatile suite of digital tools tailored for brand managers and developers. These tools are designed to simplify daily tasks and enhance productivity, but they're also user-friendly enough to be accessible to our non-developer colleagues.
If you have a suggestion please submit here - https://bag-of-onions.onrender.com/requests
All requests will be added to this documentation, bi-weekly, Once completed it will be added to the list of current tools.
- CSS Gradient Generator - Ethan
- Webm Video to Still Frames Convertor - Ethan
Clone the project
git clone https://link-to-project
Go to the project directory
cd my-project
Install dependencies
npm install
Run webpack:
npx webpack
Run the development server:
npm start
Follow these step-by-step instructions to add a new module to your project.
-
Create a new branch in terminal:
git checkout -b 'module-[name]'
-
Create module:
npm run create-module [name]
-
Delete module:
npm run delete-module [name
-
Create a new branch in terminal:
git checkout -b 'module-[name]'
-
Navigate to JS directory:
src/js/modules
-
Create a new JavaScript file:
[name].js
-
Add the following boilerplate content to the file:
console.log("hello world");
-
Navigate to SCSS directory:
src/scss/modules
-
Create a new SCSS file:
_[name].scss
-
Add the following boilerplate content to the file:
@use "../utils/utils" as *;
-
Navigate to Views directory:
src/scss/modules
-
Create a new twig file:
[name].twig
-
Add the following boilerplate content to the file:
{% extends '../layouts/base.twig' %} {% block title %} {% set pageTitle = '[Module Name]' %} {{ pageTitle }} {% endblock %} {% block content %} [Your Content] {% endblock %} {% block seoContent %} [Your SEO Content] {% endblock %}
-
Navigate to the src js directory and open the loader.js file
src/js/theme/loader.js
-
Add a new path operation for your module in the pathOperations object:
const pathOperations = { ... emitted code '/[name]': () => { import(/* webpackChunkName: "[name]" */ "../modules/[name].js") .then(() => { loadCss('/css/modules/[name].css'); }); }, ...
-
Navigate to express routes modules folder.
express/routes/modules
-
Create a new file.
[name]Routes.js
-
Add the following route configuration and additional exports:
const express = require("express"); const router = express.Router(); router.get("/[name]", (req, res) => { res.render("modules/[name]", { title: "My Page", heading: "Hello, World!", message: "This is a message rendered from Twig.js!", }); }); module.exports = { router: router, name: "Tool Name", category: "tool-category", path: "/[name]", hideNav: false, };
https://bag-of-onions.onrender.com/
-
Screensize Grabber - Dev: Ethan/Robert - Requested: Ethan
-
Ip Grabber - Dev: Ethan - Requested: Ethan
-
Box Shadow Generator - Dev: Ethan - Requested: Ethan
Client: Vanilla JS, Twig, Scss, Webpack
Server: Express