Foil

# 🛠️ Build your foil project, both the frontend and the portfolio, whatever's changed recently. foil-cli build # 🏃‍♂️ start the foil server. foil-cli server start

✨ Foil is an content management system designed for engineers, artists, technical artists, musicians, and bloggers looking to showcase a portfolio of front-end experiments, games, art, articles, and more.

It does this by treating pages or groups of pages on your site as ES modules and handling 🛠️ compiling and 🚥 routing those modules and their various assets and dependencies for you.

🌟 Installation

Install the following prior to running foil:

Node.js - Version 16 LTS or higher. Node is used for server-side rendering as well as the for Webpack compiling.
PostgreSQL - Version 13 or higher. Must be running when using foil.

☄️ Example

A typical foil project consists of a frontend, and foil posts that frontend references:

├─ 📂 node_modules/ # 👶 Dependencies │ └─ 📁 ... # ⚛️ React, React Router, etc... ├─ 📂 frontend/ # 🚥 Frontend (exports React Router routes, GraphQL client) │ ├─ 📂 assets/ # 📚 Public assets, compiled JS/CSS bundles. │ ├─ 📂 src/ # 🌟 Source Files │ └─ 📄 package.json # 📦 Node Package File (with "foil" additions) ├─ 📂 portfolio/ # 🚥 Frontend (exports React Router routes, GraphQL client) │ ├─ 📂 blog/ # 🦜 Blog foil posts │ ├─ 📂 libraries/ # 🏫 Library foil posts │ └─ 📂 ... # 🤔 Any other projects you may have ├─ 📄 license.md # ⚖️ Your license └─ 📃 readme.md # 📖 Read Me!

Where each foil post (including the frontend) features a package.json file at its directory root, with a foil object:

Example Foil package.json

{ "author": { "name": "Alain Galvan", "email": "hi@alain.xyz", "url": "https://alain.xyz" }, "description": "A WebGPU real time ray tracing example with denoising of a Cornell Box.", "keywords": ["demo", "webgpu", "ray", "tracing"], "main": "main.tsx", "devDependencies": { "@webgpu/types": "^0.1.6" }, "dependencies": { "@loaders.gl/core": "^3.0.x", "@loaders.gl/gltf": "^3.0.x", "gl-matrix": "^3.3.x" }, "foil": { "title": "WebGPU Real Time Ray Tracing + Denoising", "permalink": "/demos/webgpu-rt", "datePublished": "01/02/2024 09:50 PM EST" } }

🔎 Similar Projects

There's a plethera of similar projects to Foil available to use if foil isn't to your liking. Here's a few:

☄️ Example

A typical foil project consists of a frontend, and foil posts that frontend references:

Where each foil post (including the frontend) features a package.json file at its directory root, with a foil object:

Example Foil package.json

	{
	"author": {
	"name": "Alain Galvan",
	"email": "hi@alain.xyz",
	"url": "https://alain.xyz"
	},
	"description": "A WebGPU real time ray tracing example with denoising of a Cornell Box.",
	"keywords": ["demo", "webgpu", "ray", "tracing"],
	"main": "main.tsx",
	"devDependencies": {
	"@webgpu/types": "^0.1.6"
	},
	"dependencies": {
	"@loaders.gl/core": "^3.0.x",
	"@loaders.gl/gltf": "^3.0.x",
	"gl-matrix": "^3.3.x"
	},
	"foil": {
	"title": "WebGPU Real Time Ray Tracing + Denoising",
	"permalink": "/demos/webgpu-rt",
	"datePublished": "01/02/2024 09:50 PM EST"
	}
	}