diff --git a/README.md b/README.md index cf99f9e..7106231 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,7 @@ LogPaste offers some options to customize the text for your site. Here's an exam SITE_TITLE="My Cool Log Pasting Service" SITE_SUBTITLE="Upload all your logs for FooBar here" SITE_FOOTER="

Notice

Only cool users can share logs here.

" +SITE_DARK_MODE="true" SITE_SHOW_DOCUMENTATION="false" # Hide usage information from homepage PER_MINUTE_LIMIT="5" # Allow only 5 pastes per minute per IP @@ -87,6 +88,7 @@ docker run \ -e "SITE_TITLE=${SITE_TITLE}" \ -e "SITE_SUBTITLE=${SITE_SUBTITLE}" \ -e "SITE_FOOTER=${SITE_FOOTER}" \ + -e "SITE_DARK_MODE=${SITE_DARK_MODE}" \ -e "SITE_SHOW_DOCUMENTATION=${SITE_SHOW_DOCUMENTATION}" \ -e "PER_MINUTE_LIMIT=${PER_MINUTE_LIMIT}" \ -p 3001:3001/tcp \ @@ -103,6 +105,7 @@ docker run \ | `-title` | Title to display on homepage | `"LogPaste"` | | `-subtitle` | Subtitle to display on homepage | `"A minimalist, open-source debug log upload service"` | | `-footer` | Footer to display on homepage (may include HTML) | | +| `-darkmode` | Whether to use dark mode theme on homepage | `false` | | `-showdocs` | Whether to display usage documentation on homepage | `true` | | `-perminutelimit` | Number of pastes to allow per IP per minute | `0` (no limit) | @@ -114,8 +117,9 @@ You can adjust behavior of the Docker container by passing these parameters with |----------------------|---------| | `PORT` | TCP port on which to listen for HTTP connections (defaults to 3001) | | `SITE_TITLE` | Value to set the `-title` command-line flag | -| `SITE_SUBTITLE` | Value to set the `-subtitle` command-line flag | -| `SITE_FOOTER` | Value to set the `-footer` command-line flag | +| `SITE_SUBTITLE` | Value to set the `-subtitle` command-line flag | +| `SITE_FOOTER` | Value to set the `-footer` command-line flag | +| `SITE_DARK_MODE` | Value to set the `-darkmode` command-line flag | | `SITE_SHOW_DOCUMENTATION` | Value to set the `-showdocs` command-line flag | | `PER_MINUTE_LIMIT` | Value to set the `-perminutelimit` command-line flag | | `DB_REPLICA_URL` | S3 URL where you want to replicate the LogPaste datastore (e.g., `s3://mybucket.mydomain.com/db`) | diff --git a/docker_entrypoint b/docker_entrypoint index 875113d..b6490be 100755 --- a/docker_entrypoint +++ b/docker_entrypoint @@ -23,6 +23,10 @@ env_vars_to_flags() { flags+=" -footer \"${SITE_FOOTER}\"" fi + if [[ "${SITE_DARK_MODE}" == "true" ]]; then + flags+=" -darkmode" + fi + if [[ "${SITE_SHOW_DOCUMENTATION}" == "false" ]]; then flags+=" -showdocs=false" fi diff --git a/handlers/server.go b/handlers/server.go index 9aae25c..7d2138f 100644 --- a/handlers/server.go +++ b/handlers/server.go @@ -31,6 +31,7 @@ type SiteProperties struct { Title string Subtitle string FooterHTML string + DarkMode bool ShowDocs bool } diff --git a/main.go b/main.go index fb45ca5..2ead803 100644 --- a/main.go +++ b/main.go @@ -20,6 +20,7 @@ func main() { "A minimalist, open-source debug log upload service", "subtitle for the site") footer := flag.String("footer", "", "custom page footer (can contain HTML)") + darkMode := flag.Bool("darkmode", false, "display homepage in dark mode") showDocs := flag.Bool("showdocs", true, "whether to display usage information on homepage") perMinuteLimit := flag.Int("perminutelimit", @@ -31,6 +32,7 @@ func main() { Title: *title, Subtitle: *subtitle, FooterHTML: *footer, + DarkMode: *darkMode, ShowDocs: *showDocs, }, *perMinuteLimit) http.Handle("/", muxHandlers.LoggingHandler(os.Stdout, s.Router())) diff --git a/static/css/dark.css b/static/css/dark.css new file mode 100644 index 0000000..3e6054c --- /dev/null +++ b/static/css/dark.css @@ -0,0 +1,41 @@ +body { + background: #121212; + color: #f0f0f0; +} + +a { + color: #009e1a; +} + +textarea { + background: #808080; +} + +button { + background-color: #2455a3; + color: #f0f0f0; + border-color: #648ed1; +} + +button:hover { + background-color: #2e66bf; +} + +pre { + background: #424242; + border-color: #c7c7c7; +} + +#upload-textarea { + border-color: #cccccc; +} + +#result { + background-color: #454270; + border-color: #6d68b0; +} + +#form-upload-error { + background-color: #9c2222; + border-color: #cc3f3f; +} diff --git a/static/css/light.css b/static/css/light.css new file mode 100644 index 0000000..482596d --- /dev/null +++ b/static/css/light.css @@ -0,0 +1,23 @@ +button { + color: white; + background-color: #0078e7; + border-color: #082375; +} + +button:hover { + background-color: #009ee7; +} + +#upload-textarea { + border-color: #cccccc; +} + +#result { + background-color: #d6ffd9; + border-color: green; +} + +#form-upload-error { + background-color: #ffa6a6; + border-color: red; +} diff --git a/static/css/style.css b/static/css/style.css index d9ecd9b..4949b9d 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -55,16 +55,11 @@ button { padding: 0.35em 1.2em; border-radius: 0.2em; box-sizing: border-box; - color: white; - background-color: #0078e7; - border: 0.1em solid #082375; text-align: center; transition: all 0.2s; font-size: 1.05em; -} - -button:hover { - background-color: #009ee7; + border-width: 0.1em; + border-style: solid; } .upload-form { @@ -85,9 +80,9 @@ button:hover { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - border: 1px solid #cccccc; margin: 1rem 0; padding: 0.5rem; + border-width: 1px; } .button-row { @@ -96,9 +91,9 @@ button:hover { #result { visibility: hidden; - background-color: #d6ffd9; padding: 1.5rem 1.75rem; - border: 1px solid green; + border-width: 1px; + border-style: solid; margin: 1rem auto 0 auto; } @@ -115,9 +110,9 @@ button:hover { #form-upload-error { visibility: hidden; - background-color: #ffa6a6; padding: 1rem 0.75rem; - border: 1px solid red; + border-width: 1px; + border-style: solid; } #more-info { diff --git a/static/third-party/prism/dark.css b/static/third-party/prism/dark.css new file mode 100644 index 0000000..a68b1f3 --- /dev/null +++ b/static/third-party/prism/dark.css @@ -0,0 +1,3 @@ +/* PrismJS 1.25.0 +https://prismjs.com/download.html#themes=prism-dark&languages=markup+css+clike+javascript */ +code[class*=language-],pre[class*=language-]{color:#fff;background:0 0;text-shadow:0 -.1em .2em #000;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}:not(pre)>code[class*=language-],pre[class*=language-]{background:#4c3f33}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border:.3em solid #7a6651;border-radius:.5em;box-shadow:1px 1px .5em #000 inset}:not(pre)>code[class*=language-]{padding:.15em .2em .05em;border-radius:.3em;border:.13em solid #7a6651;box-shadow:1px 1px .3em -.1em #000 inset;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#997f66}.token.punctuation{opacity:.7}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.number,.token.property,.token.symbol,.token.tag{color:#d1939e}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#bce051}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f4b73d}.token.atrule,.token.attr-value,.token.keyword{color:#d1939e}.token.important,.token.regex{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:red} diff --git a/static/third-party/prism/prism.css b/static/third-party/prism/default.css similarity index 100% rename from static/third-party/prism/prism.css rename to static/third-party/prism/default.css diff --git a/views/index.html b/views/index.html index 948ad7e..1809291 100644 --- a/views/index.html +++ b/views/index.html @@ -4,14 +4,27 @@ {{.Title}} + {{ if .ShowDocs }} + + {{ if .DarkMode }} + + + {{ else }} + + {{ end }} {{ end }} + {{ if .DarkMode }} + + {{ else }} + + {{ end }}