parent
74477f24a6
commit
2211236007
8 changed files with 168 additions and 0 deletions
@ -0,0 +1,2 @@ |
|||||||
|
node_modules |
||||||
|
npm-debug.log |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
node_modules |
||||||
|
npm-debug.log |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
FROM node:16 |
||||||
|
|
||||||
|
# Create app directory |
||||||
|
WORKDIR /usr/src/app |
||||||
|
|
||||||
|
# Install app dependencies |
||||||
|
# A wildcard is used to ensure both package.json AND package-lock.json are copied |
||||||
|
# where available (npm@5+) |
||||||
|
COPY package*.json ./ |
||||||
|
|
||||||
|
# RUN npm install |
||||||
|
# If you are building your code for production |
||||||
|
RUN npm ci --only=production |
||||||
|
|
||||||
|
# Bundle app source |
||||||
|
COPY . . |
||||||
|
|
||||||
|
EXPOSE 8133 |
||||||
|
CMD [ "node", "server.js" ] |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>Document</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="graph"> |
||||||
|
<ul class="months"> |
||||||
|
<li>Jan</li> |
||||||
|
<li>Feb</li> |
||||||
|
<li>Mar</li> |
||||||
|
<li>Apr</li> |
||||||
|
<li>May</li> |
||||||
|
<li>Jun</li> |
||||||
|
<li>Jul</li> |
||||||
|
<li>Aug</li> |
||||||
|
<li>Sep</li> |
||||||
|
<li>Oct</li> |
||||||
|
<li>Nov</li> |
||||||
|
<li>Dec</li> |
||||||
|
</ul> |
||||||
|
<ul class="days"> |
||||||
|
<li>Sun</li> |
||||||
|
<li>Mon</li> |
||||||
|
<li>Tue</li> |
||||||
|
<li>Wed</li> |
||||||
|
<li>Thu</li> |
||||||
|
<li>Fri</li> |
||||||
|
<li>Sat</li> |
||||||
|
</ul> |
||||||
|
<ul class="squares"> |
||||||
|
<!-- added via javascript --> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
// Add squares
|
||||||
|
|
||||||
|
const squares = document.querySelector('.squares'); |
||||||
|
for (var i = 1; i < 365; i++) { |
||||||
|
const level = Math.floor(Math.random() * 3);
|
||||||
|
squares.insertAdjacentHTML('beforeend', `<li data-level="${level}"></li>`); |
||||||
|
} |
||||||
@ -0,0 +1,83 @@ |
|||||||
|
/* Article - https://bitsofco.de/github-contribution-graph-css-grid/ */ |
||||||
|
|
||||||
|
/* Grid-related CSS */ |
||||||
|
|
||||||
|
:root { |
||||||
|
--square-size: 15px; |
||||||
|
--square-gap: 5px; |
||||||
|
--week-width: calc(var(--square-size) + var(--square-gap)); |
||||||
|
} |
||||||
|
|
||||||
|
.months { grid-area: months; } |
||||||
|
.days { grid-area: days; } |
||||||
|
.squares { grid-area: squares; } |
||||||
|
|
||||||
|
.graph { |
||||||
|
display: inline-grid; |
||||||
|
grid-template-areas: "empty months" |
||||||
|
"days squares"; |
||||||
|
grid-template-columns: auto 1fr; |
||||||
|
grid-gap: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.months { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: calc(var(--week-width) * 4) /* Jan */ |
||||||
|
calc(var(--week-width) * 4) /* Feb */ |
||||||
|
calc(var(--week-width) * 4) /* Mar */ |
||||||
|
calc(var(--week-width) * 5) /* Apr */ |
||||||
|
calc(var(--week-width) * 4) /* May */ |
||||||
|
calc(var(--week-width) * 4) /* Jun */ |
||||||
|
calc(var(--week-width) * 5) /* Jul */ |
||||||
|
calc(var(--week-width) * 4) /* Aug */ |
||||||
|
calc(var(--week-width) * 4) /* Sep */ |
||||||
|
calc(var(--week-width) * 5) /* Oct */ |
||||||
|
calc(var(--week-width) * 4) /* Nov */ |
||||||
|
calc(var(--week-width) * 5) /* Dec */; |
||||||
|
} |
||||||
|
|
||||||
|
.days, |
||||||
|
.squares { |
||||||
|
display: grid; |
||||||
|
grid-gap: var(--square-gap); |
||||||
|
grid-template-rows: repeat(7, var(--square-size)); |
||||||
|
} |
||||||
|
|
||||||
|
.squares { |
||||||
|
grid-auto-flow: column; |
||||||
|
grid-auto-columns: var(--square-size); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* Other styling */ |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.graph { |
||||||
|
padding: 20px; |
||||||
|
border: 1px #e1e4e8 solid; |
||||||
|
margin: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.days li:nth-child(odd) { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.squares li { |
||||||
|
background-color: #ebedf0; |
||||||
|
} |
||||||
|
|
||||||
|
.squares li[data-level="1"] { |
||||||
|
background-color: #c6e48b; |
||||||
|
} |
||||||
|
|
||||||
|
.squares li[data-level="2"] { |
||||||
|
background-color: #7bc96f; |
||||||
|
} |
||||||
|
|
||||||
|
.squares li[data-level="3"] { |
||||||
|
background-color: #196127; |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
const express = require('express'); |
||||||
|
|
||||||
|
const PORT = 8133; |
||||||
|
const HOST = '0.0.0.0'; |
||||||
|
|
||||||
|
const app = express(); |
||||||
|
|
||||||
|
app.get('/', (req, res) => { |
||||||
|
res.send('Hello World'); |
||||||
|
}); |
||||||
|
|
||||||
|
app.listen(PORT, HOST, () => { |
||||||
|
console.log('Server running - ${HOST}:${PORT}'); |
||||||
|
}); |
||||||
Loading…
Reference in new issue