diff options
Diffstat (limited to 'skin')
| -rw-r--r-- | skin/base.skin.php | 120 |
1 files changed, 89 insertions, 31 deletions
diff --git a/skin/base.skin.php b/skin/base.skin.php index ab7d689..2be71dc 100644 --- a/skin/base.skin.php +++ b/skin/base.skin.php @@ -2,7 +2,17 @@ namespace skin\base; -function layout($ctx, $title, $unsafe_body, $static, $meta, $js, $opts, $exec_time, $unsafe_lang) { +use admin; +use RequestDispatcher; + +function layout($ctx, $title, $unsafe_body, $static, $meta, $js, $opts, $exec_time, $unsafe_lang, $theme) { +global $config; +$app_config = json_encode([ + 'domain' => $config['domain'], + 'devMode' => $config['is_dev'], + 'cookieHost' => $config['cookie_host'], +]); + return <<<HTML <!doctype html> <html lang="en"> @@ -12,16 +22,16 @@ return <<<HTML <link rel="shortcut icon" href="/favicon.ico?4" type="image/x-icon"> <link rel="alternate" type="application/rss+xml" href="/feed.rss"> <title>{$title}</title> + <script type="text/javascript">window.appConfig = {$app_config};</script> {$ctx->renderMeta($meta)} - {$ctx->renderStatic($static)} + {$ctx->renderStatic($static, $theme)} </head> <body{$ctx->if_true($opts['full_width'], ' class="full-width"')}> - {$ctx->renderHeader(renderLogo($ctx, $opts['logo_path_map'], $opts['logo_link_map']))} + {$ctx->renderHeader($theme, renderLogo($ctx, $opts['logo_path_map'], $opts['logo_link_map']))} <div class="page-content base-width"> <div class="page-content-inner">{$unsafe_body}</div> </div> - {$ctx->if_true($js != '' || !empty($lang) || $opts['dynlogo_enabled'], - $ctx->renderScript, $js, $unsafe_lang, $opts['dynlogo_enabled'])} + {$ctx->renderScript($js, $unsafe_lang, $opts['dynlogo_enabled'])} </body> </html> <!-- @@ -32,11 +42,18 @@ HTML; } function renderScript($ctx, $unsafe_js, $unsafe_lang, $enable_dynlogo) { +global $config; + +$styles = json_encode($ctx->styleNames); +$versions = !$config['is_dev'] ? json_encode($config['static']) : '{}'; + return <<<HTML <script type="text/javascript"> +StaticManager.setStyles({$styles}, {$versions}); {$ctx->if_true($unsafe_js, '(function(){'.$unsafe_js.'})();')} {$ctx->if_true($unsafe_lang, 'extend(__lang, '.$unsafe_lang.');')} {$ctx->if_true($enable_dynlogo, 'DynamicLogo.init();')} +ThemeSwitcher.init(); </script> HTML; } @@ -53,26 +70,76 @@ function renderMeta($ctx, $meta) { }, $meta)); } -function renderStatic($ctx, $static) { +function renderStatic($ctx, $static, $theme) { global $config; $html = []; + $dark = $theme == 'dark'; + $ctx->styleNames = []; foreach ($static as $name) { // list($name, $options) = $item; $version = $config['is_dev'] ? time() : $config['static'][substr($name, 1)] ?? 'notfound'; if (str_ends_with($name, '.js')) $html[] = jsLink($name, $version); - else if (str_ends_with($name, '.css')) - $html[] = cssLink($name, $version/*, $options*/); + else if (str_ends_with($name, '.css')) { + $html[] = cssLink($name, 'light', $version, $style_name); + $ctx->styleNames[] = $style_name; + + if ($dark) + $html[] = cssLink($name, 'dark', $version, $style_name); + else if (!$config['is_dev']) + $html[] = cssPrefetchLink(str_replace('.css', '_dark.css', $name), $version); + } } return implode("\n", $html); } -function renderHeader($ctx, $unsafe_logo_html) { +function jsLink(string $name, $version = null): string { + if ($version !== null) + $name .= '?'.$version; + return '<script src="'.$name.'" type="text/javascript"></script>'; +} + +function cssLink(string $name, string $theme, $version = null, &$bname = null): string { + global $config; + + $dname = dirname($name); + $bname = basename($name); + if (($pos = strrpos($bname, '.'))) + $bname = substr($bname, 0, $pos); + + if ($config['is_dev']) { + $href = '/sass.php?name='.urlencode($bname).'&theme='.$theme; + } else { + $href = $dname.'/'.$bname.($theme == 'dark' ? '_dark' : '').'.css'.($version !== null ? '?'.$version : ''); + } + $id = 'style_'.$bname; + if ($theme == 'dark') + $id .= '_dark'; + return '<link rel="stylesheet" id="'.$id.'" type="text/css" href="'.$href.'">'; +} + +function cssPrefetchLink(string $name, $verison = null): string { +$url = $name; +if ($verison) + $url .= '?'.$verison; +return <<<HTML +<link rel="prefetch" href="{$url}" /> +HTML; +} + +function renderHeader($ctx, $theme, $unsafe_logo_html) { return <<<HTML <div class="head base-width"> <div class="head-inner clearfix"> <div class="head-logo">{$unsafe_logo_html}</div> <div class="head-items clearfix"> + <a class="head-item is-theme-switcher" href="javascript:void(0)" onclick="return ThemeSwitcher.next(event)"> + <span> + <span> + <span class="moon-icon">{$ctx->renderMoonIcon()}</span><span id="theme-switcher-label">{$theme}</span> + </span> + </span> + </a> <a class="head-item" href="/"><span><span>blog</span></span></a> <a class="head-item" href="/projects/"><span><span>projects</span></span></a> <a class="head-item" href="https://git.ch1p.io/?s=idle"><span><span>git</span></span></a> @@ -87,9 +154,9 @@ HTML; // TODO rewrite this fcking crap function renderLogo($ctx, array $path_map = [], array $link_map = []): string { - $uri = \RequestDispatcher::path(); + $uri = RequestDispatcher::path(); - if (!\admin::isAdmin()) { + if (!admin::isAdmin()) { $prompt_sign = '<span class="head-logo-dolsign">$</span>'; } else { $prompt_sign = '<span class="head-logo-dolsign is_root">#</span>'; @@ -143,7 +210,7 @@ function renderLogo($ctx, array $path_map = [], array $link_map = []): string { $last_pos = $pos + 1; $close_tags++; } - $html .= str_repeat('</span>', $close_tags).' '.$prompt_sign.' <span class="head-logo-cd">cd <span id="head_cd_text">~</span> <span class="head-logo-enter"><span class="head-logo-enter-icon"></span>Enter</span></span></a>'; + $html .= str_repeat('</span>', $close_tags).' '.$prompt_sign.' <span class="head-logo-cd">cd <span id="head_cd_text">~</span> <span class="head-logo-enter"><span class="head-logo-enter-icon">'.enterIcon().'</span>Enter</span></span></a>'; for ($i = count($path_parts)-1, $j = 0; $i >= 0; $i--, $j++) { if (isset($path_map[$j])) { @@ -169,25 +236,16 @@ function renderLogo($ctx, array $path_map = [], array $link_map = []): string { return $html; } -function jsLink(string $name, $version = null): string { - if ($version !== null) - $name .= '?'.$version; - return '<script src="'.$name.'" type="text/javascript"></script>'; +function enterIcon() { +return <<<SVG +<svg width="12" height="7" viewBox="0 0 9.6 5.172" xmlns="http://www.w3.org/2000/svg"> + <path d="M.4 2.586l2.779 2.8.648-.654-1.667-1.68H9.2V.253h-.926V2.12H2.16L3.827.44 3.18-.214z"/> +</svg> +SVG; } -function cssLink(string $name, $version = null/*, $options = null*/): string { - global $config; - if ($config['is_dev']) { - $bname = basename($name); - if (($pos = strrpos($bname, '.'))) - $bname = substr($bname, 0, $pos); - $href = '/sass.php?name='.urlencode($bname); - } else { - $href = $name.($version !== null ? '?'.$version : ''); - } - $s = '<link rel="stylesheet" type="text/css" href="'.$href.'"'; - // if (!is_null($options)) - // $s .= ' media="'.$options.'"'; - $s .= '>'; - return $s; +function renderMoonIcon($ctx) { +return <<<SVG +<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M14.54 10.37a5.4 5.4 0 01-6.91-6.91.59.59 0 00-.74-.75 6.66 6.66 0 00-2.47 1.54 6.6 6.6 0 1010.87 6.86.59.59 0 00-.75-.74zm-1.61 2.39a5.44 5.44 0 01-7.69-7.69 5.58 5.58 0 011-.76 6.55 6.55 0 007.47 7.47 5.15 5.15 0 01-.78.98z" fill-rule="evenodd" /></svg> +SVG; }
\ No newline at end of file |