suk-ws.sync/ph-Bookshelf
1
0
Fork 0
mirror of https://github.com/suk-ws/ph-Bookshelf.git synced 2024-12-05 09:26:52 +08:00
Code Issues Releases Activity

脱离 gitbook 前端，预备新前端

Browse Source 
- 脱离了 gitbook
- 添加 demo.html 作为新前端的结构模板
- 建立基础的页面样式
  - 建立基础的 侧边栏-文章 布局
  - 侧边栏样式
  - 自定义的字体
  - <h1>, <a>, <small> 的样式实现
- 目录折叠功能实现
This commit is contained in:
A.C.Sukazyo Eyre 2021-09-30 19:34:16 +08:00
parent 66937e88ab
commit 68c2621d9f
Signed by: Eyre_S
GPG Key ID: EFB47D98FE082FAD
8 changed files with 459 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

325
assets/main.css Normal file
View File

@ -0,0 +1,325 @@
/******************************************************************************
##############################################################################
##### #####
##### main.css of ph-Bookshelf #####
##### #####
##############################################################################
******************************************************************************/
/*
/*
/******************************************************************
** Overall Variable **
******************************************************************/
:root {
--color-font-base: #223b5c;
--color-font-base-link: #409dff;
--color-sidebar-background: #f6f8fa;
--color-font-sidebar: var(--color-font-base);
--color-scrollbar-sidebar-background: none;
--color-scrollbar-sidebar-foreground: #78a8e021;
--color-warn-noscript: #ce263d;
--color-font-warn-noscript: #f5eaea;
--color-font-sidebar-sitetitle: #3a2b8c;
--color-sidebar-sitetitle-background: #e8f0fe;
--color-menu-list-separator: #ebeff2;
--color-menu-child-list-line: #78a8e021;
--color-menu-item-indicator-current: #6bacf1;
--color-menu-item-indicator-focus: #91c6ff;
--color-font-menu-item-current: #3697ff;
--color-font-menu-item-hover: #71b3f9;
}
:root {
--sidebar-width: 19rem;
--sidebar-margin-width: 2rem;
--sidebar-margin-height: 2rem;
--sidebar-menu-container-external-max-height: 30%;
--sidebar-menu-container-padding-width: 1.3rem;
--sidebar-menu-container-padding-height: 0.8rem;
--sidebar-menu-item-indent-width: 1.1rem;
--sidebar-menu-list-seperator-width: 3px;
--sidebar-menu-list-seperator-length: 66%;
--sidebar-menu-item-indicator-active-width: 4px;
--sidebar-menu-item-indicator-focus-width: 4px;
}
:root {
--sidebar-radius: 0.5rem;
--object-opacity-weakness: 0.4;
}
:root {
--font-sarasa-gothic: "Sarasa Gothic J", "Sarasa Gothic K", "Sarasa Gothic TC", "Sarasa Gothic SC";
--font-sarasa-mono: "Sarasa Mono J", "Sarasa Mono K", "Sarasa Mono TC", "Sarasa Mono SC";
--font-sans-serif: "Alibaba Puhuiti", var(--font-sarasa-gothic), sans-serif;
--font-serif: "Georgia", serif;
/*--font-sans-serif: sans-serif;*/
/*--font-serif: "Times New Roman", serif;*/
--font-monospace: "Fira Code", "Monaco", "Consolas", var(--font-sarasa-mono), monospace;
}
:root {
--animation-speed-multiplier: 1;
/* --color-background-graystyle: #3c3c3c;*/
/* --color-font-graystyle-base: #bfbfbf;*/
}
/*
/*
/******************************************************************
** Global Elements **
******************************************************************/
::selection {
}
#test-overflow {
display: none;
}
small {
opacity: var(--object-opacity-weakness);
}
a {
color: var(--color-font-base-link);
text-decoration: none;
}
a.no-style {
color: inherit;
text-decoration: inherit;
}
h1 {
font-size: 2.2rem;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: var(--font-sans-serif);
}
/*
/*
/******************************************************************
** root item **
******************************************************************/
body {
width: 100vw;
height: 100vh;
overflow: hidden;
color: var(--color-font-base);
display: grid;
grid-template-columns: min(calc(var(--sidebar-width) + var(--sidebar-margin-width) * 2), 100vw) auto;
grid-template-rows: 100vh;
}
/*
/*
/******************************************************************
** sidebar **
******************************************************************/
#sidebar {
font-size: 0.83rem;
font-weight: bold;
display: flex;
flex-direction: column;
margin: var(--sidebar-margin-height) var(--sidebar-margin-width);
color: var(--color-font-sidebar);
}
#sidebar .sidebar-card {
background: var(--color-sidebar-background);
border-radius: var(--sidebar-radius);
overflow: hidden;
}
#sidebar .sidebar-card:not(:last-child) {
margin-bottom: 1rem;
}
#sidebar > #noscript-warn {
flex-shrink: 0;
padding: 1rem;
border-radius: 0.5rem;
background: var(--color-warn-noscript);
color: var(--color-font-warn-noscript);
z-index:15;
}
#sidebar > #site-title {
width: 100%;
box-sizing: border-box;
padding: 1rem;
font-style: normal;
background: var(--color-sidebar-sitetitle-background);
color: var(--color-font-sidebar-sitetitle);
border-radius: 0.5rem;
z-index:10;
}
#sidebar > #site-title + *,
#sidebar > noscript#noscript-warn + * {
margin-top: -1rem;
border-width: 0;
border-top: 1rem;
border-style: solid;
border-color: #ffffff00;
}
#sidebar > .menu-container {
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
}
#sidebar > .menu-container:last-child {
flex-grow: 1;
}
#sidebar > .menu-container::-webkit-scrollbar {
width: 2px;
background: none;
}
#sidebar > .menu-container::-webkit-scrollbar-thumb {
background: var(--color-scrollbar-sidebar-background);
}
#sidebar > .menu-container:hover::-webkit-scrollbar-thumb {
background: var(--color-scrollbar-sidebar-foreground);
}
#sidebar > .menu-container::-webkit-scrollbar-track {
background: var(--color-scrollbar-sidebar-background);
}
#sidebar > .menu-container > .menu {
padding: var(--sidebar-menu-container-padding-height) var(--sidebar-menu-container-padding-width);
padding-right: 0;
position: relative;
}
#sidebar > .menu-container > .menu:not(:first-child):before {
content: "";
position: absolute;
top: 0;
right: calc((100% - var(--sidebar-menu-list-seperator-length))/2);
left: calc((100% - var(--sidebar-menu-list-seperator-length))/2);
transform: translate(0, -50%);
height: var(--sidebar-menu-list-seperator-width);
border-radius: calc(var(--sidebar-menu-list-seperator-width) / 2);
background: var(--color-menu-list-separator);
}
#sidebar > .menu-container > .menu:nth-last-child(2) {
flex-grow: 1;
}
#sidebar > .menu-container > .menu .menu-item {
display: block;
padding: 0.55rem 0;
position: relative;
}
#sidebar > .menu-container > .menu .menu-item:hover {
color: var(--color-font-menu-item-hover);
}
#sidebar > .menu-container > .menu .menu-item.current {
color: var(--color-font-menu-item-current);
}
#sidebar > .menu-container > .menu .menu-item.current:after {
content: "";
position: absolute;
top: calc(var(--sidebar-menu-item-indicator-active-width) / 2);
bottom: calc(var(--sidebar-menu-item-indicator-active-width) / 2);
right: calc(var(--sidebar-menu-item-indicator-active-width));
width: var(--sidebar-menu-item-indicator-active-width);
border-radius: calc(var(--sidebar-menu-item-indicator-active-width) / 2);
background: var(--color-menu-item-indicator-current);
}
#sidebar > .menu-container > .menu .menu-item:focus-visible{
color: var(--color-font-menu-item-hover);
outline: none;
}
#sidebar > .menu-container > .menu .menu-item:focus-visible:before {
content: "";
position: absolute;
top: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
bottom: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
left:calc(0px - var(--sidebar-menu-item-indicator-focus-width) * 2);
width: var(--sidebar-menu-item-indicator-focus-width);
border-radius: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
background: var(--color-menu-item-indicator-focus);
}
#sidebar > .menu-container > .menu .menu-item-parent > *:first-child:after {
content: "▸";
color: var(--color-font-base-link);
display: inline-block;
margin-left: 0.5rem;
transition: transform calc(0.2s * var(--animation-speed-multiplier));
}
#sidebar > .menu-container > .menu .menu-item-parent.active > *:first-child:after {
transform: rotate(90deg);
}
#sidebar > .menu-container > .menu .menu-item-parent > .children {
padding-left: var(--sidebar-menu-item-indent-width);
border-style: solid;
border-width: 0;
border-color: var(--color-menu-child-list-line);
border-left-width: 1px;
overflow: hidden;
display: none;
}
#sidebar > .menu-container > .menu .menu-item-parent.active > .children {
display: block;
}
/*
/*
/******************************************************************
** page content **
******************************************************************/
#main {
color: var(--color-font-base);
padding: 1rem;
overflow: auto;
}
#article {
padding: 5rem;
}

10
assets/main.js Normal file
View File

@ -0,0 +1,10 @@
for (const node of document.getElementsByTagName("noscript")) {
node.parentNode.removeChild(node);
}
for (const node of document.getElementsByClassName("menu-item-parent")) {
node.firstElementChild.onclick = function () {
node.classList.toggle("active");
}
}

4
constant.php
View File

@ -2,8 +2,6 @@
const APP_NAME = "ph-Bookshelf";
const VERSION = "0.2-dev";
const VERSION = "0.3-dev1";
const CHANNEL = "workshop-origin";
const BRANCH = "master";
const GITBOOK_VERSION = "3.2.3";

97
index.php
View File

@ -17,10 +17,6 @@ try {
SiteMeta::load();
// 检查是否为 ajax 请求
$rawContent = $_GET['raw']=="true";
$rawWithNav = $_GET['nav']=="true";
// 格式化所给链接，并将链接转化为路径字符串数组
$req = $_GET['p'];
if (strlen($req) > 0 && $req[strlen($req) - 1] === '/')
@ -56,109 +52,18 @@ try {
// 页面寻找失败，寻找资源文件
if (!is_file($resLoc = "./data/%assets/$req")) { // 全局文件夹的资源文件
// if (!is_file($resLoc = sprintf("./data/%s/%s", PageParse::genPathFromUriArray($uri), $req))) { // 以当前页面为基准位置的资源文件
// if (!is_file($resLoc = sprintf("./data/%s/%s", PageParse::genPathFromUriArray(array_slice($uri, 0, -1)), $req))) { // 以当前页面为基准位置的资源文件(fallback版)
// if (!is_file($resLoc = sprintf("./data/%s/%s", PageMeta::$book->getId(), $req))) { // 以当前书籍为基准位置的资源文件
// if (!is_file($resLoc = "./data/$req")) { // 全局的资源文件
throw $e;
// }
// }
// }
// }
}
PageParse::outputBinaryFile($resLoc);
}
if ($rawContent && $rawWithNav) {
echo PageMeta::$book->getSummaryHtml() . "\n";
}
if (!$rawContent) :
require "./template/header.php";
?>
<div class="book-summary">
<div id="book-search-input">
<ul id="site-name" class="summary">
<li class="chapter active"><a href="."><?= SiteMeta::getBookshelf()->getSiteName() ?></a></li>
</ul>
</div>
<nav role="navigation">
<ul id='global-container' class='summary'>
<?= SiteMeta::getBookshelf()->getHtml(); ?>
<li class='divider'></li>
<li>
<a href='https://github.com/Eyre-S/ph-Bookshelf' target='blank' class='gitbook-link'>
Generated with ph-Bookshelf
<br/><span class="annotation"><?= sprintf("%s at %s/%s", VERSION, CHANNEL, BRANCH) ?></span>
</a>
</li>
<li>
<a href='https://www.gitbook.com' target='blank' class='gitbook-link'>
Front-End by GitBook
<br/><span class="annotation"><?= GITBOOK_VERSION ?></span>
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<a class="btn pull-left js-toolbar-action" aria-label="" href="#" onclick="summaryOnOrOff()"><i class="fa fa-align-justify"></i></a>
<div class="dropdown pull-left font-settings js-toolbar-action">
<a class="btn toggle-dropdown" aria-label="Font Settings" onclick="openOrCloseFontSettings()"><i class="fa fa-font"></i></a>
<div class="dropdown-menu dropdown-right">
<div class="dropdown-caret">
<span class="caret-outer"></span>
<span class="caret-inner"></span>
</div>
<div class="buttons">
<button class="button size-2 font-reduce" onclick="reduceFontSize()">A</button>
<button class="button size-2 font-enlarge" onclick="enlargeFontSize()">A</button>
</div>
<div class="buttons">
<button class="button size-2" onclick="setFontFamilySerif()">Serif</button>
<button class="button size-2" onclick="setFontFamilySans()">Sans</button>
</div><div class="buttons">
<button class="button size-3" onclick="setColorThemeWhite()">White</button>
<button class="button size-3" onclick="setColorThemeSepia()">Sepia</button>
<button class="button size-3" onclick="setColorThemeNight()">Night</button>
</div>
</div>
</div>
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a id="page-title"><?= PageMeta::$book->getName() ?></a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div id="page-container" class="page-inner">
<?php endif; ?>
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="<?= PageMeta::$page->getId() ?>"><?= PageMeta::$page->getName() ?></h1>
<?= $parser->text(PageMeta::$page->getMarkdownContent()) ?>
</section>
</div>
</div>
<?php if (!$rawContent) : ?>
</div>
</div>
</div>
</div>
<?php
require "./template/demo.html";
require "./template/footer.php";
endif;
} catch (Exception $e) {
echo "<h1>ERROR</h1><p>" . $e->getMessage() . "</p>";

22
src/Data/SiteMeta.php
View File

@ -6,9 +6,9 @@ require_once "./constant.php";
class SiteMeta {
private static Bookshelf $BOOKSHELF;
static function get_frontpage_generate_version (): string {
return APP_NAME." ".VERSION." with Gitbook ".GITBOOK_VERSION;
return APP_NAME." ".VERSION;
}
/**
@ -28,19 +28,21 @@ class SiteMeta {
public static function getGitbookStylesheetsList (): array {
return array(
"/assets/gitbook/style.css",
"/assets/gitbook/gitbook-plugin-fontsettings/website.css",
"/assets/gitbook-fix.css",
"/assets/ref.css",
// "/assets/gitbook/style.css",
// "/assets/gitbook/gitbook-plugin-fontsettings/website.css",
// "/assets/gitbook-fix.css",
// "/assets/ref.css",
"/assets/main.css",
);
}
public static function getGitbookJavascriptList (): array {
return array(
"/assets/gitbook/gitbook.js",
"/assets/gitbook-fix.js",
"https://cdn.jsdelivr.net/npm/marked/marked.min.js",
"/assets/ref.js",
// "/assets/gitbook/gitbook.js",
// "/assets/gitbook-fix.js",
// "https://cdn.jsdelivr.net/npm/marked/marked.min.js",
// "/assets/ref.js",
"/assets/main.js",
);
}

106
template/demo.html Normal file
View File

@ -0,0 +1,106 @@
<nav id="sidebar">
<noscript id="noscript-warn">For now, javascript must be enabled to view this site!!</noscript>
<address id="site-title">ph-Bookshelf BEDROCK Demo supports looooooooog title</address>
<div id="menu-container" class="menu-container sidebar-card">
<div id="menu-links" class="menu">
<a class="no-style menu-item" href="https://sukazyo.cc/">Workshop MetaBoard</a>
<a class="no-style menu-item" href="https://srv.sukazyo.cc/">Workshop Services</a>
</div>
<div id="menu-pages" class="menu">
<a class="no-style menu-item" href="#">Something?</a>
<div class="menu-item-parent active">
<a class="no-style menu-item" href="#">With Something</a>
<div class="children">
<div class="menu-item-parent">
<a class="no-style menu-item" href="#">With Something</a>
<div class="children">
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
</div>
</div>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item current" href="#">Something?</a>
</div>
</div>
<a class="no-style menu-item" href="#">Something?</a>
<a class="no-style menu-item" href="#">Something?</a>
</div>
<div id="menu-about" class="menu">
<a class="no-style menu-item" href="https://github.com/suk-ws/ph-Bookshelf">
<span>Published by ph-Bookshelf</span><br>
<small>0.3-dev</small>
</a>
</div>
</div>
</nav>
<main id="main">
<article id="article">
<h1>Hello World</h1>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<a href="https://book.sukazyo.cc/">https://book.sukazyo.cc/</a>
<p>Template or something here.</p>
<p>Template or something here.</p>
<div id="test-overflow">
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
<p>Template or something here.</p>
</div>
</article>
</main>

4
template/footer.php
View File

@ -1,8 +1,4 @@
<?php require_once "./src/Data/SiteMeta.php" ?>
</div>
<!-- Page data -->
<?php // TODO Get Page data ?>
<!-- Gitbook Assets(js) -->
<?php

12
template/header.php
View File

@ -3,20 +3,18 @@
<!DOCTYPE HTML>
<html lang="<?= "" // TODO Page language ?>">
<head>
<!-- Gitbook Meta -->
<!-- Static Meta -->
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="generator" content="<?= SiteMeta::get_frontpage_generate_version() ?>">
<!-- Page Meta -->
<link rel="shortcut icon" href="<?= SiteMeta::getGlobalIcon() ?>" type="image/x-icon">
<!-- Unused: <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png"> -->
<link rel="shortcut icon" href="<?= SiteMeta::getGlobalIcon() ?>">
<title><?= PageMeta::getPageTitle() ?></title>
<meta name="description" content="<?= PageMeta::getDescription() ?>">
<meta name="generator" content="<?= SiteMeta::get_frontpage_generate_version() ?>">
<!-- Gitbook Assets(css) -->
<?php
foreach (SiteMeta::getGitbookStylesheetsList() as $item) {
@ -27,5 +25,3 @@
<style><?= SiteMeta::getCustomCssContent("custom") ?></style>
</head>
<body>
<div class="book <?= SiteMeta::getUserThemes() ?>">