3-add-gruntjs (#9)

Adding Grunt.js to compile SASS and CoffeeScript assets

Co-authored-by: Gregory Ballantine <gregory.w.ballantine@nasa.gov>
Co-authored-by: Gregory Ballantine <gballantine555@gmail.com>
Reviewed-on: #9
This commit is contained in:
Gregory Ballantine 2024-05-31 09:00:18 -04:00
parent 533c407183
commit 8e20e5e354
8 changed files with 2091 additions and 156 deletions

7
.gitignore vendored
View File

@ -4,3 +4,10 @@ blt
# Local data files
data/
# Compiled assets
public/css/
public/js/
# Node modules
node_modules/

65
Gruntfile.js Normal file
View File

@ -0,0 +1,65 @@
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed'
},
files: [{
expand: true,
cwd: 'assets/styles',
src: ['**/*.sass'],
dest: 'public/css',
ext: '.css'
}]
}
},
coffee: {
options: {
sourceMap: true,
style: 'compressed'
},
files: {
expand: true,
flatten: true,
cwd: 'assets/scripts',
src: ['*.coffee'],
dest: 'public/js',
ext: '.js'
}
},
watch: {
css: {
files: ['assets/styles/**/*.sass'],
tasks: ['sass'],
options: {
atBegin: true,
spawn: false
}
},
js: {
files: ['assets/scripts/**/*.js'],
tasks: ['coffee'],
options: {
atBegin: true,
spawn: false
}
}
}
});
// Load plugins.
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-coffee');
// CLI tasks.
grunt.registerTask('default', ['sass', 'coffee']);
};

View File

@ -0,0 +1,2 @@
$ ->
console.log('DOM is ready.')

128
assets/styles/kourend.sass Normal file
View File

@ -0,0 +1,128 @@
html,
body
width: 100%
height: 100%
margin: 0
padding: 0
body
height: auto
min-height: 100%
box-sizing: border-box
padding-top: 80px
padding-bottom: 100px
background: #eee
a
color: teal
transition: color 180ms ease-in-out
&:hover
color: darkcyan
button.button-primary
background: teal
transition: background 180ms ease-in-out
&:hover
background: darkcyan
textarea
max-width: 100%
min-width: 100%
height: 100px
form select[multiple]
min-height: 100px
table
border: 1px solid #ddd
border-radius: 8px
border-spacing: 0
overflow: hidden
table th,
table td,
table th:first-child,
table td:first-child
border: none
padding: 7px 12px
table thead tr
border-radius: 8px 8px 0 0
&:last-child
border-radius: 0 0 8px 8px
table thead tr,
table tr:nth-child(even)
background: #eee
/* Material card styles */
.card-1
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
transition: all 0.3s cubic-bezier(.25,.8,.25,1)
&:hover
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
.card-2
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
.card-3
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
.card-4
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
.card-5
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)
.container
max-width: 1200px
#main-nav
position: fixed
top: 0
left: 0
width: 100%
height: 64px
background: teal
color: white
z-index: 20
ul
list-style: none
display: inline-block
li
display: inline-block
margin-left: 15px
h4
display: inline-block
margin-left: 25px
line-height: 64px
a
color: white
font-size: 2.25rem
line-height: 64px
transition: all 200ms ease-in-out
&:hover
color: #eee
font-size: 2.5rem
#main-content
padding: 15px 25px
background: white
border-radius: 8px
z-index: 10
#main-footer
position: fixed
bottom: 0
left: 0
width: 100%
height: 64px
p
margin-bottom: 5px
text-align: center

1853
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

35
package.json Normal file
View File

@ -0,0 +1,35 @@
{
"name": "blt",
"version": "0.1.0",
"description": "Self-hosted PC hardware benchmark logging tool",
"main": "index.js",
"scripts": {
"grunt": "grunt"
},
"repository": {
"type": "git",
"url": "gitea@git.metaunix.net:BitGoblin/blt.git"
},
"keywords": [
"hardware",
"benchmark",
"testing",
"PC"
],
"author": "Gregory Ballanine <gballantine@bitgoblin.tech>",
"uploaders": [
{
"name": "Gregory Ballantine",
"email": "gballantine@bitgoblin.tech"
}
],
"license": "BSD-2-Clause",
"devDependencies": {
"grunt": "^1.5.3",
"grunt-cli": "^1.4.3",
"grunt-contrib-sass": "^2.0.0",
"grunt-contrib-coffee": "^2.1.0",
"grunt-contrib-watch": "^1.1.0",
"sass": "^1.55.0"
}
}

View File

@ -1,156 +0,0 @@
html,
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
height: auto;
min-height: 100%;
box-sizing: border-box;
padding-top: 80px;
padding-bottom: 100px;
background: #eee;
}
a{
color: teal;
transition: color 180ms ease-in-out;
}
a:hover{
color: darkcyan;
}
button.button-primary{
background: teal;
transition: background 180ms ease-in-out;
}
button.button-primary:hover{
background: darkcyan;
}
textarea{
max-width: 100%;
min-width: 100%;
height: 100px;
}
form select[multiple]{
min-height: 100px;
}
table{
border: 1px solid #ddd;
border-radius: 8px;
border-spacing: 0;
overflow: hidden;
}
table th,
table td,
table th:first-child,
table td:first-child{
border: none;
padding: 7px 12px;
}
table thead tr{
border-radius: 8px 8px 0 0;
}
table tbody tr:last-child{
border-radius: 0 0 8px 8px;
}
table thead tr,
table tr:nth-child(even){
background: #eee;
}
/* Material card styles */
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card-2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.card-3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.card-4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card-5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.container{
max-width: 1200px;
}
#main-nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 64px;
background: teal;
color: white;
z-index: 20;
}
#main-nav ul{
list-style: none;
display: inline-block;
}
#main-nav h4{
display: inline-block;
margin-left: 25px;
line-height: 64px;
}
#main-nav ul li{
display: inline-block;
margin-left: 15px;
}
#main-nav a{
color: white;
font-size: 2.25rem;
line-height: 64px;
transition: all 200ms ease-in-out;
}
#main-nav a:hover{
color: #eee;
font-size: 2.5rem;
}
#main-content{
padding: 15px 25px;
background: white;
border-radius: 8px;
z-index: 10;
}
#main-footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 64px;
}
#main-footer p{
margin-bottom: 5px;
text-align: center;
}

View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="/css/kourend.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" charset="utf-8"></script>
<script src="/js/kebos.js" charset="utf-8"></script>
</head>
<body>