From 203a53cb329fb3a3859af160b5402033b776182c Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Fri, 31 Jul 2026 03:07:33 +0000 Subject: [PATCH] Add MaterializeCSS styles (#1) ## Changes * Adds the [AssetPack](https://metacpan.org/pod/Mojolicious::Plugin::AssetPack) Mojolicious plugin * Adds the [MaterializeCSS](https://www.npmjs.com/package/materialize-css) Node package * Applies styles to app Reviewed-on: https://git.miti.sh/ccm/mojo-app/pulls/1 --- .gitignore | 2 + Dockerfile | 16 ++++++-- README.md | 6 ++- cpanfile | 3 +- cpanfile.snapshot | 45 ++++++++++++++++++++++ mojo_app/assets/materialize.css | 1 + mojo_app/lib/MojoApp.pm | 3 ++ mojo_app/package-lock.json | 18 +++++++++ mojo_app/package.json | 5 +++ mojo_app/templates/layouts/default.html.ep | 11 +++++- 10 files changed, 102 insertions(+), 8 deletions(-) create mode 120000 mojo_app/assets/materialize.css create mode 100644 mojo_app/package-lock.json create mode 100644 mojo_app/package.json diff --git a/.gitignore b/.gitignore index 4083037..64126e7 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ local +node_modules +assetpack.db diff --git a/Dockerfile b/Dockerfile index 421d147..e246cfe 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,3 +1,11 @@ +FROM node:latest + +WORKDIR /opt/mojo_app/ + +COPY mojo_app/package.json . +COPY mojo_app/package-lock.json . +RUN npm install + FROM perl:latest WORKDIR /opt/app/ @@ -6,11 +14,11 @@ COPY cpanfile . COPY cpanfile.snapshot . COPY mojo_app ./mojo_app/ -RUN cpanm Carton && carton install +RUN cpanm -nv Carton && carton install + +WORKDIR /opt/app/mojo_app/ +COPY --from=0 /opt/mojo_app/ . EXPOSE 3000 -WORKDIR /opt/app/mojo_app/ - ENTRYPOINT ["carton", "exec", "--", "morbo", "script/mojo_app"] - diff --git a/README.md b/README.md index 56295d5..8655c83 100644 --- a/README.md +++ b/README.md @@ -16,10 +16,14 @@ Visit `localhost:3000` with web browser. ## serve app with local changes -### install dependencies +### install Mojolicious dependencies $ docker run --rm -v $PWD:/opt/app --entrypoint carton mojo_app install +### install Node packages + + $ docker run --rm --init -w /opt/mojo_app -v $PWD/mojo_app:/opt/mojo_app node npm install + ### start the server $ docker run --rm -v $PWD:/opt/app -p 3000:3000 mojo_app diff --git a/cpanfile b/cpanfile index 8811399..4b2387e 100644 --- a/cpanfile +++ b/cpanfile @@ -1 +1,2 @@ -requires 'Mojolicious' => '9.48', +requires 'Mojolicious' => '9.48'; +requires 'Mojolicious::Plugin::AssetPack' => '2.15'; diff --git a/cpanfile.snapshot b/cpanfile.snapshot index 95f032b..3a88c17 100644 --- a/cpanfile.snapshot +++ b/cpanfile.snapshot @@ -1,5 +1,21 @@ # carton snapshot format: version 1.0 DISTRIBUTIONS + File-Which-1.27 + pathname: P/PL/PLICEASE/File-Which-1.27.tar.gz + provides: + File::Which 1.27 + requirements: + ExtUtils::MakeMaker 0 + base 0 + perl 5.006 + IPC-Run3-0.049 + pathname: R/RJ/RJBS/IPC-Run3-0.049.tar.gz + provides: + IPC::Run3 0.049 + requirements: + ExtUtils::MakeMaker 0 + Test::More 0.31 + Time::HiRes 0 Mojolicious-9.48 pathname: S/SR/SRI/Mojolicious-9.48.tar.gz provides: @@ -120,3 +136,32 @@ DISTRIBUTIONS IO::Socket::IP 0.37 Sub::Util 1.41 perl 5.016 + Mojolicious-Plugin-AssetPack-2.15 + pathname: S/SR/SRI/Mojolicious-Plugin-AssetPack-2.15.tar.gz + provides: + Mojolicious::Plugin::AssetPack 2.15 + Mojolicious::Plugin::AssetPack::Asset undef + Mojolicious::Plugin::AssetPack::Asset::Null undef + Mojolicious::Plugin::AssetPack::Pipe undef + Mojolicious::Plugin::AssetPack::Pipe::CoffeeScript undef + Mojolicious::Plugin::AssetPack::Pipe::Combine undef + Mojolicious::Plugin::AssetPack::Pipe::Css undef + Mojolicious::Plugin::AssetPack::Pipe::Favicon undef + Mojolicious::Plugin::AssetPack::Pipe::Fetch undef + Mojolicious::Plugin::AssetPack::Pipe::JavaScript undef + Mojolicious::Plugin::AssetPack::Pipe::Jpeg undef + Mojolicious::Plugin::AssetPack::Pipe::Less undef + Mojolicious::Plugin::AssetPack::Pipe::Png undef + Mojolicious::Plugin::AssetPack::Pipe::Riotjs undef + Mojolicious::Plugin::AssetPack::Pipe::RollupJs undef + Mojolicious::Plugin::AssetPack::Pipe::Sass undef + Mojolicious::Plugin::AssetPack::Pipe::TypeScript undef + Mojolicious::Plugin::AssetPack::Pipe::Vuejs undef + Mojolicious::Plugin::AssetPack::Store undef + Mojolicious::Plugin::AssetPack::Util undef + Mojolicious::Plugin::AssetPack::Util::_chdir undef + requirements: + ExtUtils::MakeMaker 0 + File::Which 1.21 + IPC::Run3 0.048 + Mojolicious 9.34 diff --git a/mojo_app/assets/materialize.css b/mojo_app/assets/materialize.css new file mode 120000 index 0000000..477a32e --- /dev/null +++ b/mojo_app/assets/materialize.css @@ -0,0 +1 @@ +../node_modules/materialize-css/dist/css/materialize.css \ No newline at end of file diff --git a/mojo_app/lib/MojoApp.pm b/mojo_app/lib/MojoApp.pm index 3f38a44..dda1190 100644 --- a/mojo_app/lib/MojoApp.pm +++ b/mojo_app/lib/MojoApp.pm @@ -10,6 +10,9 @@ sub startup ($self) { # Configure the application $self->secrets($config->{secrets}); + $self->plugin(AssetPack => {pipes => [qw(Css)]}); + $self->asset->process("app.css" => ("materialize.css")); + # Router my $r = $self->routes; diff --git a/mojo_app/package-lock.json b/mojo_app/package-lock.json new file mode 100644 index 0000000..dabcd3d --- /dev/null +++ b/mojo_app/package-lock.json @@ -0,0 +1,18 @@ +{ + "name": "mojo_app", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "materialize-css": "^1.0.0" + } + }, + "node_modules/materialize-css": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/materialize-css/-/materialize-css-1.0.0.tgz", + "integrity": "sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw==", + "license": "MIT" + } + } +} diff --git a/mojo_app/package.json b/mojo_app/package.json new file mode 100644 index 0000000..41974fe --- /dev/null +++ b/mojo_app/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "materialize-css": "^1.0.0" + } +} diff --git a/mojo_app/templates/layouts/default.html.ep b/mojo_app/templates/layouts/default.html.ep index 599c556..323bdd5 100644 --- a/mojo_app/templates/layouts/default.html.ep +++ b/mojo_app/templates/layouts/default.html.ep @@ -1,5 +1,12 @@ - <%= title %> - <%= content %> + + <%= title %> + %= asset "app.css" + + + + +<%= content %> +