Add rudimentary theming, checks for .directory-listing-ok file

This commit is contained in:
maddiebaka 2023-08-15 14:35:52 -04:00
parent 22cf104f6e
commit 99667caac8
4 changed files with 263 additions and 6 deletions

View File

@ -67,7 +67,6 @@ GEM
rubocop-performance (~> 1.18.0)
unicode-display_width (2.4.2)
webrick (1.8.1)
yaml (0.2.1)
PLATFORMS
arm64-darwin-22
@ -78,7 +77,6 @@ DEPENDENCIES
rspec (~> 3.0)
skeksis!
standard (~> 1.3)
yaml
BUNDLED WITH
2.4.15

View File

@ -9,9 +9,21 @@ require_relative "skeksis/htmlize"
module Skeksis
#class Error < StandardError; end
Header = <<~HTML
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gembridge</title>
<style>
h1,h2,h3,h4,h5,h6 {
color: #2e3440;
}
a {
color: #434c5e;
}
a:visited {
color: #4c566a;
}
</style>
</head>
<body>
<h1>Directory Listing</h1>
@ -56,13 +68,28 @@ module Skeksis
private
def load_style
"<script type=\"text/css\">" +
File.open("style/nord.css", 'r').readlines.join("\n") +
"</script>"
end
def create_dir_listing(path, env)
http = URI.parse(env['REQUEST_URI'])
unless Dir.each_child(path).include?('.directory-listing-ok')
return nil
end
listing = Dir.each_child(path).map do |i|
if i == ".directory-listing-ok"
next
end
path = Pathname.new(env['PATH_INFO']).join(i)
uri = URI::HTTP.build(host: http.host, port: http.port, path: path.to_s)
"<a href=\"#{uri.to_s}\">#{i}</a><br/>"
"<a href=\"#{uri.to_s}\">#{i}</a><br>"
end.join("\n")
[Header + listing + Footer]
end

View File

@ -1,7 +1,8 @@
module Skeksis
class IR
Header = <<~HTML
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gembridge</title>
</head>
@ -34,7 +35,7 @@ module Skeksis
case entry[:type]
when :blank
"<br/>"
"<br>"
when :header
level = entry[:level]
"<h#{level}>#{text}</h#{level}>"

231
style/nord.css Normal file
View File

@ -0,0 +1,231 @@
/*
* Copyright (c) 2016-present Sven Greb <development@svengreb.de>
* This source code is licensed under the MIT license found in the license file.
*/
/*
* References:
* 1. https://www.w3.org/TR/css-variables
* 2. https://www.w3.org/TR/selectors/#root-pseudo
* 3. https://drafts.csswg.org/css-variables
* 4. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
* 5. https://warpspire.com/kss
* 6. https://github.com/kss-node/kss-node
*/
/*
An arctic, north-bluish color palette.
Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
highlighting and UI.
It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
ambiance.
Styleguide Nord
*/
:root {
/*
Base component color of "Polar Night".
Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
Markup:
<div style="background-color:#2e3440; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--nord0: #2e3440;
/*
Lighter shade color of the base component color.
Used as a lighter background color for UI elements like status bars.
Markup:
<div style="background-color:#3b4252; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--nord1: #3b4252;
/*
Lighter shade color of the base component color.
Used as line highlighting in the editor.
In the UI scope it may be used as selection- and highlight color.
Markup:
<div style="background-color:#434c5e; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--nord2: #434c5e;
/*
Lighter shade color of the base component color.
Used for comments, invisibles, indent- and wrap guide marker.
In the UI scope used as pseudoclass color for disabled elements.
Markup:
<div style="background-color:#4c566a; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--nord3: #4c566a;
/*
Base component color of "Snow Storm".
Main color for text, variables, constants and attributes.
In the UI scope used as semi-light background depending on the theme shading design.
Markup:
<div style="background-color:#d8dee9; width=60; height=60"></div>
Styleguide Nord - Snow Storm
*/
--nord4: #d8dee9;
/*
Lighter shade color of the base component color.
Used as a lighter background color for UI elements like status bars.
Used as semi-light background depending on the theme shading design.
Markup:
<div style="background-color:#e5e9f0; width=60; height=60"></div>
Styleguide Nord - Snow Storm
*/
--nord5: #e5e9f0;
/*
Lighter shade color of the base component color.
Used for punctuations, carets and structuring characters like curly- and square brackets.
In the UI scope used as background, selection- and highlight color depending on the theme shading design.
Markup:
<div style="background-color:#eceff4; width=60; height=60"></div>
Styleguide Nord - Snow Storm
*/
--nord6: #eceff4;
/*
Bluish core color.
Used for classes, types and documentation tags.
Markup:
<div style="background-color:#8fbcbb; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--nord7: #8fbcbb;
/*
Bluish core accent color.
Represents the accent color of the color palette.
Main color for primary UI elements and methods/functions.
Can be used for
- Markup quotes
- Markup link URLs
Markup:
<div style="background-color:#88c0d0; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--nord8: #88c0d0;
/*
Bluish core color.
Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
punctuations like (semi)colons,commas and braces.
Markup:
<div style="background-color:#81a1c1; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--nord9: #81a1c1;
/*
Bluish core color.
Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
Markup:
<div style="background-color:#5e81ac; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--nord10: #5e81ac;
/*
Colorful component color.
Used for errors, git/diff deletion and linter marker.
Markup:
<div style="background-color:#bf616a; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--nord11: #bf616a;
/*
Colorful component color.
Used for annotations.
Markup:
<div style="background-color:#d08770; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--nord12: #d08770;
/*
Colorful component color.
Used for escape characters, regular expressions and markup entities.
In the UI scope used for warnings and git/diff renamings.
Markup:
<div style="background-color:#ebcb8b; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--nord13: #ebcb8b;
/*
Colorful component color.
Main color for strings and attribute values.
In the UI scope used for git/diff additions and success visualizations.
Markup:
<div style="background-color:#a3be8c; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--nord14: #a3be8c;
/*
Colorful component color.
Used for numbers.
Markup:
<div style="background-color:#b48ead; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--nord15: #b48ead;
}