Feature request: Docker image

[NorskNoobing]

I'd like to be able to deploy the streak-stats webserver using a docker container. This would make the selfhosting part so much easier, and needing less configuration. The optimal solution would be a image on dockerhub, but being able to build an image from the repo using a dockerfile would be a great start😃

This has been mentioned before in issue #318. Then someone tried to make some PRs, but there doesn't seem to be any progress after that #321 #322.

Is there anything we'll need to think about, other than not cluttering the repo root, like mentioned in the PRs?

[NorskNoobing]

I've started creating a dockerfile and testing the image. I've installed all the requirements and dependencies that are defined in CONTRIBUTING.md, and it seems like composer starts without any problems.

All the additions I made are documented in the following commit:
NorskNoobing@9c7a16d

Issue

When I go to the http://localhost:8000 website I get the error The connection was reset.

Then I tried stopping the container, and I got the error Unable to connect.

So it seems like the container actually does something, and creates some type of webserver, but I can't actually load the website.

Composer test

After discovering the issue, I tried to run composer test and got some failures. They may or may not be related to my problem, so I'm listing them here just in case.

CLICK HERE - To see composer test log

> ./vendor/bin/phpunit --testdox tests
PHPUnit 9.6.13 by Sebastian Bergmann and contributors.

Options
 ✔ Themes
 ✔ Fallback to default theme
 ✔ Themes have valid parameters
 ✔ Color override parameters
 ✔ Valid color inputs
 ✔ Invalid color inputs
 ✔ Hide border
 ✔ Date format same year
 ✔ Date format different year
 ✔ Date format no brackets diff year
 ✔ Date format no brackets same year
 ✔ Normalize theme name
 ✔ All theme names normalized

Render
 ✔ Card render
 ✔ Error card render
 ✔ Date format render
 ✔ Locale render date format
 ✔ Border radius
 ✔ Split lines
 ✔ Disable animations
 ✔ Alpha in hex colors
 ✔ Gradient background
 ✔ Gradient background with more than 2 colors
 ✔ Exclude days
 ✔ Card width
 ✘ First and third columns swapped when direction is rtl
   │
   │ Failed asserting that '<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'\r
   │ style='isolation: isolate' viewBox='0 0 495 195' width='495px' height='195px' direction='rtl'>\r
   │ <style>\r
   │ @keyframes currstreak {\r
   │ 0% { font-size: 3px; opacity: 0.2; }\r
   │ 80% { font-size: 34px; opacity: 1; }\r
   │ 100% { font-size: 28px; opacity: 1; }\r
   │ }\r
   │ @keyframes fadein {\r
   │ 0% { opacity: 0; }\r
   │ 100% { opacity: 1; }\r
   │ }\r
   │ </style>\r
   │ <defs>\r
   │ <clipPath id='outer_rectangle'>\r
   │ <rect width='495' height='195' rx='4.5'/>\r
   │ </clipPath>\r
   │ <mask id='mask_out_ring_behind_fire'>\r
   │ <rect width='495' height='195' fill='white'/>\r
   │ <ellipse id='mask-ellipse' cx='247.5' cy='32' rx='13' ry='18' fill='black'/>\r
   │ </mask>\r
   │ </defs>\r
   │ <g clip-path='url(#outer_rectangle)'>\r
   │ <g style='isolation: isolate'>\r
   │ <rect stroke='#111111' fill='#000000' rx='4.5' x='0.5' y='0.5' width='494' height='194'/>\r
   │ </g>\r
   │ <g style='isolation: isolate'>\r
   │ <line x1='165' y1='28' x2='165' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#222222' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>\r
   │ <line x1='330' y1='28' x2='330' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#222222' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>\r
   │ </g>\r
   │ <g style='isolation: isolate'>\r
   │ <!-- Total Contributions big number -->\r
   │ <g transform='translate(412.5,48)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#666666' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>\r
   │ 2,048\r
   │ </text>\r
   │ </g>\r
   │ <!-- Total Contributions label -->\r
   │ <g transform='translate(412.5,84)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#888888' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.7s'>\r
   │ סכום התרומות\r
   │ </text>\r
   │ </g>\r
   │ <!-- Total Contributions range -->\r
   │ <g transform='translate(412.5,114)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#999999' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.8s'>\r
   │ 10 באוג׳ 2016 - היום\r
   │ </text>\r
   │ </g>\r
   │ </g>\r
   │ <g style='isolation: isolate'>\r
   │ <!-- Current Streak big number -->\r
   │ <g transform='translate(247.5,48)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#555555' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='animation: currstreak 0.6s linear forwards'>\r
   │ 16\r
   │ </text>\r
   │ </g>\r
   │ <!-- Current Streak label -->\r
   │ <g transform='translate(247.5,108)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#777777' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>\r
   │ רצף נוכחי\r
   │ </text>\r
   │ </g>\r
   │ <!-- Current Streak range -->\r
   │ <g transform='translate(247.5,145)'>\r
   │ <text x='0' y='21' stroke-width='0' text-anchor='middle' fill='#999999' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>\r
   │ <tspan x='0' dy='0'>28 במרץ 2019</tspan><tspan x='0' dy='16'>- 12 באפר׳ 2019</tspan>\r
   │ </text>\r
   │ </g>\r
   │ <!-- Ring around number -->\r
   │ <g mask='url(#mask_out_ring_behind_fire)'>\r
   │ <circle cx='247.5' cy='71' r='40' fill='none' stroke='#333333' stroke-width='5' style='opacity: 0; animation: fadein 0.5s linear forwards 0.4s'></circle>\r
   │ </g>\r
   │ <!-- Fire icon -->\r
   │ <g transform='translate(247.5, 19.5)' stroke-opacity='0' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>\r
   │ <path d='M -12 -0.5 L 15 -0.5 L 15 23.5 L -12 23.5 L -12 -0.5 Z' fill='none'/>\r
   │ <path d='M 1.5 0.67 C 1.5 0.67 2.24 3.32 2.24 5.47 C 2.24 7.53 0.89 9.2 -1.17 9.2 C -3.23 9.2 -4.79 7.53 -4.79 5.47 L -4.76 5.11 C -6.78 7.51 -8 10.62 -8 13.99 C -8 18.41 -4.42 22 0 22 C 4.42 22 8 18.41 8 13.99 C 8 8.6 5.41 3.79 1.5 0.67 Z M -0.29 19 C -2.07 19 -3.51 17.6 -3.51 15.86 C -3.51 14.24 -2.46 13.1 -0.7 12.74 C 1.07 12.38 2.9 11.53 3.92 10.16 C 4.31 11.45 4.51 12.81 4.51 14.2 C 4.51 16.85 2.36 19 -0.29 19 Z' fill='#444444' stroke-opacity='0'/>\r
   │ </g>\r
   │ </g>\r
   │ <g style='isolation: isolate'>\r
   │ <!-- Longest Streak big number -->\r
   │ <g transform='translate(82.5,48)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#666666' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.2s'>\r
   │ 86\r
   │ </text>\r
   │ </g>\r
   │ <!-- Longest Streak label -->\r
   │ <g transform='translate(82.5,84)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#888888' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.3s'>\r
   │ רצף הכי ארוך\r
   │ </text>\r
   │ </g>\r
   │ <!-- Longest Streak range -->\r
   │ <g transform='translate(82.5,114)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#999999' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.4s'>\r
   │ <tspan x='0' dy='0'>19 בדצמ׳ 2016</tspan><tspan x='0' dy='16'>- 14 במרץ 2016</tspan>\r
   │ </text>\r
   │ </g>\r
   │ </g>\r
   │ </g>\r
   │ </svg>\r
   │ ' contains "<!-- Total Contributions big number -->
   │ <g transform='translate(412.5,48)'>".
   │
   │ /mnt/github-readme-streak-stats/tests/RenderTest.php:245
   │

 ✔ Exclude days parameter

Stats
 ✔ Valid username
 ✔ Override starting year
 ✔ Invalid username
 ✔ Organization name
 ✔ Contributed today
 ✔ Missing today
 ✔ Missing two days
 ✔ Multiple year streak
 ✔ Future commits
 ✔ Weekly stats
 ✔ Weekly stats missing week
 ✔ Weekly stats missing this week
 ✔ Exclude days
 ✔ Exclude days no contribution before weekend

Translations
 ✔ All phrases valid
 ✔ Locales sorted alphabetically
 ✔ Keys normalized
 ✔ Get translations
 ✔ Normalize locale code

Time: 00:03.647, Memory: 8.00 MB

Summary of non-successful tests:

Render
 ✘ First and third columns swapped when direction is rtl
   │
   │ Failed asserting that '<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'\r
   │ style='isolation: isolate' viewBox='0 0 495 195' width='495px' height='195px' direction='rtl'>\r
   │ <style>\r
   │ @keyframes currstreak {\r
   │ 0% { font-size: 3px; opacity: 0.2; }\r
   │ 80% { font-size: 34px; opacity: 1; }\r
   │ 100% { font-size: 28px; opacity: 1; }\r
   │ }\r
   │ @keyframes fadein {\r
   │ 0% { opacity: 0; }\r
   │ 100% { opacity: 1; }\r
   │ }\r
   │ </style>\r
   │ <defs>\r
   │ <clipPath id='outer_rectangle'>\r
   │ <rect width='495' height='195' rx='4.5'/>\r
   │ </clipPath>\r
   │ <mask id='mask_out_ring_behind_fire'>\r
   │ <rect width='495' height='195' fill='white'/>\r
   │ <ellipse id='mask-ellipse' cx='247.5' cy='32' rx='13' ry='18' fill='black'/>\r
   │ </mask>\r
   │ </defs>\r
   │ <g clip-path='url(#outer_rectangle)'>\r
   │ <g style='isolation: isolate'>\r
   │ <rect stroke='#111111' fill='#000000' rx='4.5' x='0.5' y='0.5' width='494' height='194'/>\r
   │ </g>\r
   │ <g style='isolation: isolate'>\r
   │ <line x1='165' y1='28' x2='165' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#222222' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>\r
   │ <line x1='330' y1='28' x2='330' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#222222' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>\r
   │ </g>\r
   │ <g style='isolation: isolate'>\r
   │ <!-- Total Contributions big number -->\r
   │ <g transform='translate(412.5,48)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#666666' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>\r
   │ 2,048\r
   │ </text>\r
   │ </g>\r
   │ <!-- Total Contributions label -->\r
   │ <g transform='translate(412.5,84)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#888888' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.7s'>\r
   │ סכום התרומות\r
   │ </text>\r
   │ </g>\r
   │ <!-- Total Contributions range -->\r
   │ <g transform='translate(412.5,114)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#999999' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.8s'>\r
   │ 10 באוג׳ 2016 - היום\r
   │ </text>\r
   │ </g>\r
   │ </g>\r
   │ <g style='isolation: isolate'>\r
   │ <!-- Current Streak big number -->\r
   │ <g transform='translate(247.5,48)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#555555' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='animation: currstreak 0.6s linear forwards'>\r
   │ 16\r
   │ </text>\r
   │ </g>\r
   │ <!-- Current Streak label -->\r
   │ <g transform='translate(247.5,108)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#777777' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>\r
   │ רצף נוכחי\r
   │ </text>\r
   │ </g>\r
   │ <!-- Current Streak range -->\r
   │ <g transform='translate(247.5,145)'>\r
   │ <text x='0' y='21' stroke-width='0' text-anchor='middle' fill='#999999' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>\r
   │ <tspan x='0' dy='0'>28 במרץ 2019</tspan><tspan x='0' dy='16'>- 12 באפר׳ 2019</tspan>\r
   │ </text>\r
   │ </g>\r
   │ <!-- Ring around number -->\r
   │ <g mask='url(#mask_out_ring_behind_fire)'>\r
   │ <circle cx='247.5' cy='71' r='40' fill='none' stroke='#333333' stroke-width='5' style='opacity: 0; animation: fadein 0.5s linear forwards 0.4s'></circle>\r
   │ </g>\r
   │ <!-- Fire icon -->\r
   │ <g transform='translate(247.5, 19.5)' stroke-opacity='0' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>\r
   │ <path d='M -12 -0.5 L 15 -0.5 L 15 23.5 L -12 23.5 L -12 -0.5 Z' fill='none'/>\r
   │ <path d='M 1.5 0.67 C 1.5 0.67 2.24 3.32 2.24 5.47 C 2.24 7.53 0.89 9.2 -1.17 9.2 C -3.23 9.2 -4.79 7.53 -4.79 5.47 L -4.76 5.11 C -6.78 7.51 -8 10.62 -8 13.99 C -8 18.41 -4.42 22 0 22 C 4.42 22 8 18.41 8 13.99 C 8 8.6 5.41 3.79 1.5 0.67 Z M -0.29 19 C -2.07 19 -3.51 17.6 -3.51 15.86 C -3.51 14.24 -2.46 13.1 -0.7 12.74 C 1.07 12.38 2.9 11.53 3.92 10.16 C 4.31 11.45 4.51 12.81 4.51 14.2 C 4.51 16.85 2.36 19 -0.29 19 Z' fill='#444444' stroke-opacity='0'/>\r
   │ </g>\r
   │ </g>\r
   │ <g style='isolation: isolate'>\r
   │ <!-- Longest Streak big number -->\r
   │ <g transform='translate(82.5,48)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#666666' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.2s'>\r
   │ 86\r
   │ </text>\r
   │ </g>\r
   │ <!-- Longest Streak label -->\r
   │ <g transform='translate(82.5,84)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#888888' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.3s'>\r
   │ רצף הכי ארוך\r
   │ </text>\r
   │ </g>\r
   │ <!-- Longest Streak range -->\r
   │ <g transform='translate(82.5,114)'>\r
   │ <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#999999' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.4s'>\r
   │ <tspan x='0' dy='0'>19 בדצמ׳ 2016</tspan><tspan x='0' dy='16'>- 14 במרץ 2016</tspan>\r
   │ </text>\r
   │ </g>\r
   │ </g>\r
   │ </g>\r
   │ </svg>\r
   │ ' contains "<!-- Total Contributions big number -->
   │ <g transform='translate(412.5,48)'>".
   │
   │ /mnt/github-readme-streak-stats/tests/RenderTest.php:245
   │

FAILURES!
Tests: 46, Assertions: 5262, Failures: 1.
Script ./vendor/bin/phpunit --testdox tests handling the test event returned with error code 1