Initial commit POC with templartes

qld-gov-au · Dec 18, 2023 · 95858f2 · 95858f2
1 parent 24c5a08
commit 95858f2
Show file tree

Hide file tree

Showing 7,794 changed files with 1,727,188 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1 @@
-# QGDS - Queensland Online MVP
-MVP development space for Queensland Online Design System
+# qgds-bootstrap-poc
diff --git a/build-template.js b/build-template.js
@@ -0,0 +1,73 @@
+/// DEV NOTE
+/// This build file is used for the demo/POC template rendering only
+/// Full templating system to be planned and implemented in the future
+
+import fs from "fs";
+import mustache from "mustache";
+
+import QGDSTemplate from "./src/js/qgds-template.js";
+import QGDSComponent from "./src/js/qgds-component.js";
+
+const breadcrumbs =  QGDSComponent.make("breadcrumbs");
+const banner = QGDSComponent.make("banner", {
+	data: {
+		breadcrumbs: breadcrumbs,
+		title: "Register your vehicle or motorcycles",
+		content: "Motor vehicles and motorcycles (including mopeds and tricycles) used on Queensland roads must be registered.",
+		classes: "banner-default",
+	}
+});
+
+//Build a static content page with some components
+QGDSTemplate.make({
+	layout: "contentpage",	// HTML template - similar to design file
+	content: "main",		// Primary content - similar to paint layout
+	outfile: "index.html",	// ...compiles into /dist/index.html 
+	theme: "",				// adds a "data-bs-theme" attribute to the <html> tag 
+	banner: banner,			// Banner component is compiled above using QDSComponent.make("banner", {...}) 
+
+	//Components that will be used on either the layout or content
+	components: {
+		inpagenav: QGDSComponent.make("inpagenav"),
+		accordion: QGDSComponent.make("accordion"),
+
+		// Different ways to load an alert:
+		// 1. No datafile, no data
+		// 2. Pass custom data object
+		// 3. Pass datafile
+		alerts: {
+			closure: QGDSComponent.make("alert"),
+			receipt: QGDSComponent.make("alert", {
+				data: {
+					classes: "alert-success",
+					title: "Your transaction is complete",
+					content:
+						"<p>You're reference number is ATMR-1234-456. <a href='#'>Download a receipt</a></p>",
+				},
+			}),
+			reminder: QGDSComponent.make("alert", {
+				datafile: "./src/components/alert/service-unavailable.json",
+			}),
+		},
+
+		button: QGDSComponent.make("button"),
+		card: QGDSComponent.make("card"),
+		table: QGDSComponent.make("table"),
+		blockquote: QGDSComponent.make("blockquote"),
+		callout: QGDSComponent.make("callout", {
+			data: {
+				title: "This is a callout title",
+				content: "This is a callout description",
+				classes: "mb-5",
+			},
+		}),
+		cardblock: QGDSComponent.make("cardblock", {
+			path: "./src/components/card/cardblock.bs5.html",
+			datafile: "./src/components/card/cardblock.data.json",
+		}),
+	},
+});
+
+console.log(
+	`HTML template builds completed\n===============================\n`
+);
diff --git a/build.js b/build.js
@@ -0,0 +1,90 @@
+// PROJECT ESBUILD CONFIGURATION and BUILD FILE
+import * as esbuild from 'esbuild';
+import * as path from 'path';
+
+//Required libraries
+import {sassPlugin} from 'esbuild-sass-plugin';
+import handlebarsPlugin from "esbuild-plugin-handlebars";
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+import { copy } from 'esbuild-plugin-copy';
+
+// Configuration
+// https://esbuild.github.io/getting-started/#build-scripts
+
+const buildConfig = {
+	outdir: './dist/',
+	external: ['fs', 'path', "../img/*"],
+	entryPoints: [
+		{ out: './assets/js/bootstrap.min', in: './node_modules/bootstrap/dist/js/bootstrap.js' },
+		{ out: './assets/js/main', in: './src/main.js' },
+		{ out: './assets/css/qld.bootstrap', in: './src/main.scss' },
+  	],
+  	bundle: true,
+  	minify: false,
+	loader: {
+		'.html' : 'text',
+		'.js': 'jsx',
+		'.jpg': 'file',
+	},
+	target: ['es6'],
+  	plugins: [
+		//Pass the following plugins to ESBuild to help with compiling
+		// SASS processing, includes POSTCSS
+		sassPlugin({
+			type: 'css',
+			async transform(source) {
+				const { css } = await postcss([autoprefixer]).process(source, { 
+					from: 'src/main.scss', 
+					to: 'dist/assets/css/qld.bootstrap.css', 
+					map: true
+				});
+				return css;
+			},
+		}),
+		// Handlebars processing
+		handlebarsPlugin(),
+
+		// 1. Copy various files from /src to /dist as part of workflow.
+		// 2. Copy files from /dist to /docs as part of workflow. 
+		copy({
+			// this is equal to process.cwd(), which means we use cwd path as base path to resolve `to` path
+			// if not specified, this plugin uses ESBuild.build outdir/outfile options as base path.
+			resolveFrom: 'cwd',
+			assets: [
+				{
+			  		from: ['./src/templates/*.html'],
+			  		to: ['./dist/'],
+				},
+				{
+					from: ['./src/components/**/*.dxp.html'],
+					to: ['./dist/components/dxp/'],
+			  	},
+				{
+					from: ['./src/components/**/*.bs5.html'],
+					to: ['./dist/components/bs5/'],
+			  	},
+				{
+					from: ['./src/components/**/*.hbs.html'],
+					to: ['./dist/components/dxp/'],
+			  	},
+				{
+					from: ['./src/img/*'],
+					to: ['./dist/assets/img'],
+				},
+				{
+					from: ['./dist/**/*'],
+					to: ['./docs/'],
+				}
+			],
+			watch: true,
+		}),
+  	]
+};
+
+// Call esbuild's build() function with our configuration
+// This is the default project build function, it runs when we call "node build.js", or "npm run build" 
+(async () => {
+	await esbuild.build(buildConfig);
+	console.log('⚡ Build successful ⚡');
+})();
diff --git a/index.js b/index.js
@@ -0,0 +1,8 @@
+const server = Bun.serve({
+    port: Bun.env.port || 8000,
+    fetch(req) {
+        return new Response('Hello world 123')
+    }
+})
+
+console.log(`Listening on port ${server.port}`);
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "lib": ["ES6"],
+    "target": "ES6",
+    "module": "ES2015",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "composite": true,
+    "strict": true,
+    "downlevelIteration": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true
+  }
+}
diff --git a/makefile b/makefile
@@ -0,0 +1,4 @@
+git:
+	git add .
+	git commit -m "$m"
+	git push -u origin main
diff --git a/node_modules/.bin/acorn b/node_modules/.bin/acorn
diff --git a/node_modules/.bin/atob b/node_modules/.bin/atob
diff --git a/node_modules/.bin/autoprefixer b/node_modules/.bin/autoprefixer
diff --git a/node_modules/.bin/browserslist b/node_modules/.bin/browserslist
diff --git a/node_modules/.bin/envinfo b/node_modules/.bin/envinfo
diff --git a/node_modules/.bin/esbuild b/node_modules/.bin/esbuild
diff --git a/node_modules/.bin/flat b/node_modules/.bin/flat
diff --git a/node_modules/.bin/glob b/node_modules/.bin/glob
diff --git a/node_modules/.bin/handlebars b/node_modules/.bin/handlebars
diff --git a/node_modules/.bin/import-local-fixture b/node_modules/.bin/import-local-fixture
diff --git a/node_modules/.bin/live-server b/node_modules/.bin/live-server
diff --git a/node_modules/.bin/mime b/node_modules/.bin/mime
diff --git a/node_modules/.bin/mustache b/node_modules/.bin/mustache
diff --git a/node_modules/.bin/nanoid b/node_modules/.bin/nanoid
diff --git a/node_modules/.bin/node-which b/node_modules/.bin/node-which
diff --git a/node_modules/.bin/onchange b/node_modules/.bin/onchange
diff --git a/node_modules/.bin/resolve b/node_modules/.bin/resolve
diff --git a/node_modules/.bin/rimraf b/node_modules/.bin/rimraf
diff --git a/node_modules/.bin/sass b/node_modules/.bin/sass
diff --git a/node_modules/.bin/terser b/node_modules/.bin/terser
diff --git a/node_modules/.bin/tree-kill b/node_modules/.bin/tree-kill
diff --git a/node_modules/.bin/tsc b/node_modules/.bin/tsc
diff --git a/node_modules/.bin/tsserver b/node_modules/.bin/tsserver
diff --git a/node_modules/.bin/uglifyjs b/node_modules/.bin/uglifyjs
diff --git a/node_modules/.bin/update-browserslist-db b/node_modules/.bin/update-browserslist-db
diff --git a/node_modules/.bin/uuid b/node_modules/.bin/uuid
diff --git a/node_modules/.bin/watch b/node_modules/.bin/watch
diff --git a/node_modules/.bin/webpack b/node_modules/.bin/webpack
diff --git a/node_modules/.bin/webpack-cli b/node_modules/.bin/webpack-cli