diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..5171c54 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,2 @@ +node_modules +npm-debug.log \ No newline at end of file diff --git a/.gitingore b/.gitingore new file mode 100644 index 0000000..5171c54 --- /dev/null +++ b/.gitingore @@ -0,0 +1,2 @@ +node_modules +npm-debug.log \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..94759d7 --- /dev/null +++ b/Dockerfile @@ -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" ] \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..e69de29 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..0053103 --- /dev/null +++ b/public/index.html @@ -0,0 +1,39 @@ + + + + + + + Document + + +
+ + + +
+ + \ No newline at end of file diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..e408c05 --- /dev/null +++ b/public/script.js @@ -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', `
  • `); +} \ No newline at end of file diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..240ed6d --- /dev/null +++ b/public/style.css @@ -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; + } \ No newline at end of file diff --git a/server.js b/server.js new file mode 100644 index 0000000..12b0a93 --- /dev/null +++ b/server.js @@ -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}'); +}); \ No newline at end of file