Hey Tom, sure.
package.json
(yes, it’s needs cleaning up)
{
"name": "my name",
"private": true,
"browserslist": [
"extends @roots/browserslist-config"
],
"engines": {
"node": ">=16.0.0"
},
"type": "module",
"scripts": {
"first": "yarn install && composer update && yarn bud clean && yarn dev",
"dev": "bud clean && bud dev",
"build": "bud clean && bud build",
"lint": "npm run lint:js && npm run lint:css",
"lint:js": "eslint resources/scripts --fix",
"lint:css": "stylelint \"resources/**/*.{css,scss,vue}\" --fix",
"translate": "npm run translate:pot && npm run translate:js",
"translate:pot": "wp i18n make-pot . ./resources/lang/ratata.pot --ignore-domain --include=\"app,resources\"",
"translate:js": "wp i18n make-json ./resources/lang --pretty-print",
"pot": "mkdir -p ./resources/lang && find ./resources ./app -iname '*.php' | xargs xgettext --add-comments=TRANSLATORS --force-po --from-code=UTF-8 --default-domain=de_DE -k__ -k_e -k_n:1,2 -k_x:1,2c -k_ex:1,2c -k_nx:4c,12 -kesc_attr__ -kesc_attr_e -kesc_attr_x:1,2c -kesc_html__ -kesc_html_e -kesc_html_x:1,2c -k_n_noop:1,2 -k_nx_noop:3c,1,2, -k__ngettext_noop:1,2 -o resources/lang/ratata.pot && find ./resources -iname '*.blade.php' | xargs xgettext --language=Python --add-comments=TRANSLATORS --force-po --from-code=UTF-8 --default-domain=de_DE -k__ -k_e -k_n:1,2 -k_x:1,2c -k_ex:1,2c -k_nx:4c,12 -kesc_attr__ -kesc_attr_e -kesc_attr_x:1,2c -kesc_html__ -kesc_html_e -kesc_html_x:1,2c -k_n_noop:1,2 -k_nx_noop:3c,1,2, -k__ngettext_noop:1,2 -j -o resources/lang/ratata.pot",
"translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
},
"devDependencies": {
"@alpinejs/intersect": "^3.12.1",
"@barba/core": "^2.9.7",
"@barba/css": "^2.1.15",
"@roots/bud": "6.12.2",
"@roots/bud-postcss": "6.12.2",
"@roots/bud-prettier": "6.12.2",
"@roots/bud-purgecss": "6.12.2",
"@roots/bud-sass": "6.12.2",
"@roots/bud-tailwindcss": "6.12.2",
"@roots/sage": "6.12.2",
"@tailwindcss/aspect-ratio": "^0.4.2",
"alpinejs": "^3.12.1",
"animate.js": "^2.0.2",
"animejs": "^3.2.1"
},
"dependencies": {
"@alpinejs/persist": "^3.12.1",
"caniuse-lite": "^1.0.30001489"
}
}
bud.config.js
/**
* Compiler configuration
*
* @see {@link https://roots.io/docs/sage sage documentation}
* @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
*
* @param {import('@roots/bud').Bud} app
*/
export default async (app) => {
/**
* Application assets & entrypoints
*
* @see {@link https://bud.js.org/docs/bud.entry}
* @see {@link https://bud.js.org/docs/bud.assets}
*/
app
.entry('app', ['@scripts/app', '@styles/app'])
.entry('editor', ['@scripts/editor', '@styles/editor'])
.assets(['images']);
/**
* Set public path
*
* @see {@link https://bud.js.org/docs/bud.setPublicPath}
*/
app.setPublicPath('/app/themes/sage/public/');
/**
* Development server settings
*
* @see {@link https://bud.js.org/docs/bud.setUrl}
* @see {@link https://bud.js.org/docs/bud.setProxyUrl}
* @see {@link https://bud.js.org/docs/bud.watch}
*/
app
.setUrl('http://localhost:3000')
.setProxyUrl('http://example.test')
.watch(['resources/views', 'app']);
/**
* Generate WordPress `theme.json`
*
* @note This overwrites `theme.json` on every build.
*
* @see {@link https://bud.js.org/extensions/sage/theme.json}
* @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
*/
app.wpjson
.set('settings.color.custom', false)
.set('settings.color.customDuotone', false)
.set('settings.color.customGradient', false)
.set('settings.color.defaultDuotone', false)
.set('settings.color.defaultGradients', false)
.set('settings.color.defaultPalette', false)
.set('settings.color.duotone', [])
.set('settings.custom.spacing', {})
.set('settings.custom.typography.font-size', {})
.set('settings.custom.typography.line-height', {})
.set('settings.spacing.padding', true)
.set('settings.spacing.units', ['px', '%', 'em', 'rem', 'vw', 'vh'])
.set('settings.typography.customFontSize', false)
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize()
.enable();
};
oxanium.scss
/* oxanium-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Oxanium';
font-style: normal;
font-weight: 400;
src: url('@fonts/oxanium-v14-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
url('@fonts/oxanium-v14-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* oxanium-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Oxanium';
font-style: normal;
font-weight: 700;
src: url('@fonts/oxanium-v14-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
url('@fonts/oxanium-v14-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
part of tailwind.config.js
const config = {
content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],
theme: {
extend: {
colors: {}, // Extend Tailwind's default colors
fontFamily: {
sans: 'Oxanium, sans-serif',
},
},