225 lines
7.1 KiB
PHP
225 lines
7.1 KiB
PHP
<?php
|
|
|
|
namespace skin\base;
|
|
|
|
use admin;
|
|
use RequestDispatcher;
|
|
use SkinContext;
|
|
use Stringable;
|
|
|
|
function layout($ctx, $title, $unsafe_body, $static, $meta, $js, $opts, $unsafe_lang, $theme) {
|
|
global $config;
|
|
$app_config = json_encode([
|
|
'domain' => $config['domain'],
|
|
'devMode' => $config['is_dev'],
|
|
'cookieHost' => $config['cookie_host'],
|
|
]);
|
|
|
|
$body_class = [];
|
|
if ($opts['full_width'])
|
|
$body_class[] = 'full-width';
|
|
else if ($opts['wide'])
|
|
$body_class[] = 'wide';
|
|
|
|
return <<<HTML
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<link rel="shortcut icon" href="/favicon.ico" 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, $theme)}
|
|
</head>
|
|
<body{$ctx->if_true($body_class, ' class="'.implode(' ', $body_class).'"')}>
|
|
{$ctx->renderHeader($theme)}
|
|
<div class="page-content base-width">
|
|
<div class="page-content-inner">{$unsafe_body}</div>
|
|
</div>
|
|
{$ctx->renderScript($js, $unsafe_lang)}
|
|
</body>
|
|
</html>
|
|
HTML;
|
|
}
|
|
|
|
function renderScript($ctx, $unsafe_js, $unsafe_lang) {
|
|
global $config;
|
|
|
|
$styles = json_encode($ctx->styleNames);
|
|
if ($config['is_dev'])
|
|
$versions = '{}';
|
|
else {
|
|
$versions = [];
|
|
foreach ($config['static'] as $name => $v) {
|
|
list($type, $bname) = getStaticNameParts($name);
|
|
$versions[$type][$bname] = $v;
|
|
}
|
|
$versions = json_encode($versions);
|
|
}
|
|
|
|
return <<<HTML
|
|
<script type="text/javascript">
|
|
StaticManager.init({$styles}, {$versions});
|
|
{$ctx->if_true($unsafe_js, '(function(){'.$unsafe_js.'})();')}
|
|
{$ctx->if_true($unsafe_lang, 'extend(__lang, '.$unsafe_lang.');')}
|
|
ThemeSwitcher.init();
|
|
</script>
|
|
HTML;
|
|
}
|
|
|
|
function renderMeta($ctx, $meta) {
|
|
if (empty($meta))
|
|
return '';
|
|
return implode('', array_map(function(array $item): string {
|
|
$s = '<meta';
|
|
foreach ($item as $k => $v)
|
|
$s .= ' '.htmlescape($k).'="'.htmlescape($v).'"';
|
|
$s .= '>';
|
|
return $s;
|
|
}, $meta));
|
|
}
|
|
|
|
function renderStatic($ctx, $static, $theme) {
|
|
global $config;
|
|
$html = [];
|
|
$dark = $theme == 'dark';
|
|
$ctx->styleNames = [];
|
|
foreach ($static as $name) {
|
|
// javascript
|
|
if (str_starts_with($name, 'js/'))
|
|
$html[] = jsLink($name);
|
|
|
|
// css
|
|
else if (str_starts_with($name, 'css/')) {
|
|
$html[] = cssLink($name, 'light', $style_name);
|
|
$ctx->styleNames[] = $style_name;
|
|
|
|
if ($dark)
|
|
$html[] = cssLink($name, 'dark', $style_name);
|
|
else if (!$config['is_dev'])
|
|
$html[] = cssPrefetchLink($style_name.'_dark');
|
|
}
|
|
else
|
|
logError(__FUNCTION__.': unexpected static entry: '.$name);
|
|
}
|
|
return implode("\n", $html);
|
|
}
|
|
|
|
function jsLink(string $name): string {
|
|
global $config;
|
|
list (, $bname) = getStaticNameParts($name);
|
|
if ($config['is_dev']) {
|
|
$href = '/js.php?name='.urlencode($bname).'&v='.time();
|
|
} else {
|
|
$href = '/dist-js/'.$bname.'.js?'.getStaticVersion($name);
|
|
}
|
|
return '<script src="'.$href.'" type="text/javascript"></script>';
|
|
}
|
|
|
|
function cssLink(string $name, string $theme, &$bname = null): string {
|
|
global $config;
|
|
|
|
list(, $bname) = getStaticNameParts($name);
|
|
|
|
if ($config['is_dev']) {
|
|
$href = '/sass.php?name='.urlencode($bname).'&theme='.$theme.'&v='.time();
|
|
} else {
|
|
$version = getStaticVersion('css/'.$bname.($theme == 'dark' ? '_dark' : '').'.css');
|
|
$href = '/dist-css/'.$bname.($theme == 'dark' ? '_dark' : '').'.css?'.$version;
|
|
}
|
|
|
|
$id = 'style_'.$bname;
|
|
if ($theme == 'dark')
|
|
$id .= '_dark';
|
|
|
|
return '<link rel="stylesheet" id="'.$id.'" type="text/css" href="'.$href.'">';
|
|
}
|
|
|
|
function cssPrefetchLink(string $name): string {
|
|
$url = '/dist-css/'.$name.'.css?'.getStaticVersion('css/'.$name.'.css');
|
|
return <<<HTML
|
|
<link rel="prefetch" href="{$url}" />
|
|
HTML;
|
|
}
|
|
|
|
function getStaticNameParts(string $name): array {
|
|
$dname = dirname($name);
|
|
$bname = basename($name);
|
|
if (($pos = strrpos($bname, '.'))) {
|
|
$ext = substr($bname, $pos+1);
|
|
$bname = substr($bname, 0, $pos);
|
|
} else {
|
|
$ext = '';
|
|
}
|
|
return [$dname, $bname, $ext];
|
|
}
|
|
|
|
function getStaticVersion(string $name): string {
|
|
global $config;
|
|
if ($config['is_dev'])
|
|
return time();
|
|
if (str_starts_with($name, '/')) {
|
|
logWarning(__FUNCTION__.': '.$name.' starts with /');
|
|
$name = substr($name, 1);
|
|
}
|
|
return $config['static'][$name] ?? 'notfound';
|
|
}
|
|
|
|
|
|
function renderHeader(SkinContext $ctx, string $theme): string {
|
|
$items = [
|
|
//['url' => '/articles/', 'label' => 'articles'],
|
|
['url' => 'https://files.4in1.ws', 'label' => 'materials'],
|
|
['url' => '/about/', 'label' => 'about'],
|
|
['url' => 'javascript:void(0)', 'label' => $theme, 'label_id' => 'theme-switcher-label', 'theme_switcher' => true],
|
|
];
|
|
if (\admin::isAdmin())
|
|
$items[] = ['url' => '/admin/', 'label' => 'admin'];
|
|
|
|
// here, items are rendered using for_each, so that there are no gaps (whitespaces) between tags
|
|
|
|
return <<<HTML
|
|
<div class="head base-width">
|
|
<div class="head-inner">
|
|
<div class="head-logo-wrap">
|
|
<div class="head-logo">
|
|
<a href="/">
|
|
<div class="head-logo-title">4in1 <span class="head-logo-title-author">by idb</span></div>
|
|
<div class="head-logo-subtitle">Mask of Shakespeare, Mysteries of Bacon,<br/>Book by Cartier, Secrets of the NSA</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="head-items">
|
|
{$ctx->for_each($items, fn($item) => $ctx->renderHeaderItem($item['url'], $item['label'], $item['label_id'] ?? null, $item['theme_switcher'] ?? false))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
HTML;
|
|
}
|
|
|
|
|
|
function renderHeaderItem(SkinContext $ctx,
|
|
string $url,
|
|
string $label,
|
|
?Stringable $label_id,
|
|
bool $is_theme_switcher): string {
|
|
return <<<HTML
|
|
<a class="head-item{$ctx->if_true($is_theme_switcher, ' is-theme-switcher')}" href="{$url}"{$ctx->if_true($is_theme_switcher, ' onclick="return ThemeSwitcher.next(event)"')}>
|
|
<span>
|
|
{$ctx->if_true($is_theme_switcher, '<span class="moon-icon">'.$ctx->renderMoonIcon().'</span>')}
|
|
<span{$ctx->if_true($label_id, ' id="'.$label_id.'"')}>{$label}</span>
|
|
</span>
|
|
</a>
|
|
HTML;
|
|
}
|
|
|
|
|
|
function renderMoonIcon(SkinContext $ctx): string {
|
|
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;
|
|
}
|