Use docs-theme from blueprint (#24)

This commit is contained in:
Cecile Tonglet 2020-09-27 14:49:05 +02:00 committed by GitHub
parent 8a7c0ee6ff
commit bd1bb35d6e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 359 additions and 361 deletions

9
Cargo.lock generated
View file

@ -852,8 +852,17 @@ dependencies = [
"heck",
"id_tree",
"regex",
"web-sys",
"yew",
]
[[package]]
name = "yewprint-doc"
version = "0.1.0"
dependencies = [
"syntect",
"wasm-bindgen",
"web-sys",
"yew",
"yewprint",
]

View file

@ -1,30 +1,5 @@
[package]
name = "yewprint"
version = "0.1.0"
authors = ["Cecile Tonglet <cecile.tonglet@cecton.com>"]
edition = "2018"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[lib]
crate-type = ["cdylib"]
[badges]
travis-ci = { repository = "cecton/yewprint", branch = "main" }
is-it-maintained-issue-resolution = { repository = "cecton/yewprint" }
is-it-maintained-open-issues = { repository = "cecton/yewprint" }
[features]
default = []
doc = ["syntect"]
[dependencies]
wasm-bindgen = "^0.2"
yew = { git = "https://github.com/yewstack/yew.git", rev = "1507c21b" }
web-sys = "0.3"
id_tree = "1.7"
[build-dependencies]
regex = { version = "1", default-features = false, features = ["std"] }
heck = "0.3"
syntect = { version = "4.4.0", optional = true }
[workspace]
members = [
"yewprint",
"yewprint-doc",
]

View file

@ -1,7 +1,7 @@
#!/bin/bash
if [ ${#@} == 0 ]; then
options=(--release -- --features doc)
options=(--release)
else
options=()
fi
@ -10,6 +10,10 @@ if ! [ -f core.tgz ]; then
curl -o core.tgz https://registry.npmjs.org/@blueprintjs/core/-/core-3.30.0.tgz
fi
if ! [ -f docs-theme.tgz ]; then
curl -o docs-theme.tgz https://registry.npmjs.org/@blueprintjs/docs-theme/-/docs-theme-3.7.1.tgz
fi
# cleanup
mkdir -p public
rm -fR public/.gitignore public/*
@ -18,13 +22,18 @@ rm -fR public/.gitignore public/*
cp static/* public/
# copy favicon
cp src/logo.svg public/favicon.svg
cp yewprint-doc/src/logo.svg public/favicon.svg
# download blueprint css
tar xzOf core.tgz package/lib/css/blueprint.css > public/blueprint.css
# download blueprint doc css
tar xzOf docs-theme.tgz package/lib/css/docs-theme.css > public/docs-theme.css
# build
wasm-pack build --no-typescript --target web --out-name wasm --out-dir ./public "${options[@]}" "$@"
(cd yewprint-doc && \
wasm-pack build --no-typescript --target web --out-name wasm \
--out-dir ../public "${options[@]}" "$@")
rc=$?
rm -fR public/{.gitignore,package.json,README.md}

2
dev.sh
View file

@ -1,3 +1,3 @@
#!/bin/sh
exec cargo watch -s './build.sh --dev -- --features doc && simple-http-server -i --nocache --cors public/' -i /public
exec cargo watch -s './build.sh --dev && simple-http-server -i --nocache --cors public/' -i /public

View file

@ -1,134 +0,0 @@
use crate::buttons::doc::*;
use crate::collapse::doc::*;
use crate::icon::doc::*;
use crate::switch::doc::*;
use crate::tree::doc::*;
use crate::{ConditionalClass, Menu, MenuItem};
use yew::prelude::*;
pub struct App {
link: ComponentLink<Self>,
doc_menu: DocMenu,
dark_theme: ConditionalClass,
}
pub enum Msg {
ToggleLight,
GoToMenu(DocMenu),
}
impl Component for App {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
App {
dark_theme: true.into(),
doc_menu: DocMenu::Button,
link,
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::ToggleLight => *self.dark_theme ^= true,
Msg::GoToMenu(doc_menu) => {
self.doc_menu = doc_menu;
}
}
true
}
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
true
}
fn view(&self) -> Html {
html! {
<div class=("docs-app", self.dark_theme.map_some("bp3-dark"))>
<div class="docs-nav-wrapper">
<div class="docs-nav">
<div class="docs-nav-title">
<a class="docs-logo" href="/">
{crate::include_raw_html!("logo.svg")}
</a>
<div>
<div class="docs-heading">
{"Yewprint"}
</div>
<a
class="bp3-text-muted"
href="https://github.com/cecton/yewprint"
target="_blank"
>
<small>{"View on GitHub"}</small>
</a>
</div>
</div>
<Menu>
<MenuItem
text={html!("Button")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Button))
/>
<MenuItem
text={html!("Collapse")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Collapse))
/>
<MenuItem
text={html!("Icon")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Icon))
/>
<MenuItem
text={html!("Menu")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Menu))
/>
<MenuItem
text={html!("Switch")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Switch))
/>
<MenuItem
text={html!("Tree")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Tree))
/>
</Menu>
<div class="docs-nav-sponsors">
<a href="https://www.netlify.com">
<img
src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
alt="Deploys by Netlify"
/>
</a>
</div>
</div>
</div>
<main class="docs-content-wrapper" role="main">
<div class="docs-page">
{
match self.doc_menu {
DocMenu::Button => html! (<ButtonDoc />),
DocMenu::Switch => html! (<SwitchDoc
dark_theme=self.dark_theme
onclick=self.link.callback(|_| Msg::ToggleLight)
/>),
DocMenu::Collapse => html!(<CollapseDoc />),
DocMenu::Tree => html!(<TreeDoc />),
DocMenu::Icon => html!(<IconDoc />),
DocMenu::Menu => html!(),
}
}
</div>
</main>
</div>
}
}
}
#[derive(Debug, Copy, Clone)]
pub enum DocMenu {
Button,
Collapse,
Icon,
Menu,
Switch,
Tree,
}

View file

@ -9,59 +9,26 @@
</script>
<link rel="icon" href="/favicon.svg">
<link rel="stylesheet" href="/blueprint.css">
<link rel="stylesheet" href="/docs-theme.css">
<style>
body {
margin: 0;
padding: 0;
}
.docs-logo {
margin-right: 15px;
}
.docs-heading {
font-size: 20px;
font-weight: 600;
}
.bp3-tree {
width: 350px;
}
.docs-app {
display: flex;
flex-direction: row;
margin: auto;
width: 100vw;
min-height: 100vh;
background-color: #f5f8fa;
}
.docs-nav {
width: 270px;
height: 100vh;
position: fixed;
left: 0;
top: 0;
overflow-y: scroll;
overflow-x: hidden;
z-index: 10;
background-color: #fff;
}
.bp3-dark .docs-nav {
background-color: #394b59;
}
.docs-nav-wrapper {
flex-basis: 270px;
width: 270px;
flex-grow: 0;
flex-shrink: 0;
}
.docs-nav .bp3-menu {
background: inherit;
}
.docs-nav .docs-nav-title {
display: flex;
flex-direction: row;
align-items: center;
padding: 15px;
}
.docs-nav .docs-nav-sponsors {
display: flex;
flex-direction: column;
@ -69,38 +36,16 @@
padding: 15px;
}
.docs-nav .docs-nav-title .docs-logo {
margin-right: 15px;
.docs-nav .bp3-menu {
background-color: transparent;
}
.docs-nav .docs-nav-title .docs-heading {
font-size: 20px;
.docs-nav .bp3-menu-item:hover {
background-color: transparent;
font-weight: 600;
margin-right: 10px;
}
.docs-content-wrapper {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 830px;
}
.docs-page {
padding: 0 5px 40px 40px;
max-width: 830px;
}
.docs-app.bp3-dark {
background-color: #30404d;
}
.docs-page h1 {
line-height: 40px;
font-size: 36px;
}
.docs-example-wrapper .bp3-code-block {
background-color: #002b36;
white-space: pre-wrap;
}
@ -109,13 +54,13 @@
white-space: pre-wrap;
}
.docs-example-wrapper .docs-example {
.docs-example {
border-radius: 6px;
background-color: #fff;
padding: 20px;
}
.bp3-dark .docs-example-wrapper .docs-example {
.bp3-dark .docs-example {
background-color: #293742;
}
@ -131,6 +76,15 @@
margin-bottom: 40px;
margin-top: 10px;
}
.docs-example-wrapper > .docs-source .bp3-code-block {
filter: invert(1) hue-rotate(180deg) contrast(2);
background-color: #002b36;
}
.bp3-dark .docs-example-wrapper > .docs-source .bp3-code-block {
filter: inherit;
}
</style>
</head>
<body></body>

19
yewprint-doc/Cargo.toml Normal file
View file

@ -0,0 +1,19 @@
[package]
name = "yewprint-doc"
version = "0.1.0"
authors = ["Cecile Tonglet <cecile.tonglet@cecton.com>"]
edition = "2018"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "^0.2"
yew = { git = "https://github.com/yewstack/yew.git", rev = "1507c21b" }
web-sys = { version = "0.3", features = ["Window", "MediaQueryList"] }
yewprint = { path = "../yewprint" }
[build-dependencies]
syntect = "4.4.0"

50
yewprint-doc/build.rs Normal file
View file

@ -0,0 +1,50 @@
use std::env;
use std::ffi::OsString;
use std::fs;
use std::path::Path;
use syntect::highlighting::{Theme, ThemeSet};
use syntect::parsing::SyntaxSet;
fn main() {
let syntax_set = SyntaxSet::load_defaults_newlines();
let theme_set = ThemeSet::load_defaults();
let out_dir = env::var_os("OUT_DIR").unwrap();
fn recursive<P: AsRef<Path>>(
base_path: P,
syntax_set: &SyntaxSet,
theme: &Theme,
out_dir: &OsString,
) {
for entry in fs::read_dir(base_path).unwrap() {
let entry = entry.unwrap();
let path = entry.path();
if path.is_dir() {
recursive(&path, syntax_set, theme, out_dir);
}
let file_name = path.file_name().unwrap().to_str().unwrap();
if path.starts_with("./src") && file_name == "example.rs" && path.is_file() {
let dest_path = Path::new(&out_dir)
.join(env!("CARGO_PKG_NAME"))
.join(&path)
.with_file_name("mod.rs.html");
let src =
syntect::html::highlighted_html_for_file(&path, syntax_set, theme).unwrap();
let _ = std::fs::create_dir_all(dest_path.parent().unwrap());
fs::write(&dest_path, src.trim_end()).unwrap();
println!("cargo:rerun-if-changed={}", path.display());
}
}
}
recursive(
".",
&syntax_set,
&theme_set.themes["Solarized (dark)"],
&out_dir,
)
}

162
yewprint-doc/src/app.rs Normal file
View file

@ -0,0 +1,162 @@
use crate::buttons::*;
use crate::collapse::*;
use crate::icon::*;
use crate::switch::*;
use crate::tree::*;
use yew::prelude::*;
use yewprint::{ConditionalClass, IconName, Menu, MenuItem};
pub struct App {
link: ComponentLink<Self>,
doc_menu: DocMenu,
dark_theme: ConditionalClass,
}
pub enum Msg {
ToggleLight,
GoToMenu(DocMenu),
}
impl Component for App {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
App {
dark_theme: web_sys::window()
.and_then(|x| x.match_media("(prefers-color-scheme: dark)").ok().flatten())
.map(|x| x.matches())
.unwrap_or(true)
.into(),
doc_menu: DocMenu::Button,
link,
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::ToggleLight => *self.dark_theme ^= true,
Msg::GoToMenu(doc_menu) => {
self.doc_menu = doc_menu;
}
}
true
}
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
true
}
fn view(&self) -> Html {
let netlify_badge = if *self.dark_theme {
"https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
} else {
"https://www.netlify.com/img/global/badges/netlify-color-bg.svg"
};
let go_to_theme_label = if *self.dark_theme {
"Light theme"
} else {
"Dark theme"
};
let go_to_theme_icon = if *self.dark_theme {
IconName::Flash
} else {
IconName::Moon
};
html! {
<div class=("docs-root", self.dark_theme.map_some("bp3-dark"))>
<div class="docs-app">
<div class="docs-nav-wrapper">
<div class="docs-nav">
<div class="docs-nav-title">
<a class="docs-logo" href="/">
{crate::include_raw_html!("logo.svg")}
</a>
<div>
<div class="bp3-navbar-heading docs-heading">
{"Yewprint"}
</div>
<a
class="bp3-text-muted"
href="https://github.com/cecton/yewprint"
target="_blank"
>
<small>{"View on GitHub"}</small>
</a>
</div>
</div>
<Menu>
<MenuItem
text={html!(go_to_theme_label)}
onclick=self.link.callback(|_| Msg::ToggleLight)
icon=go_to_theme_icon
/>
<MenuItem
text={html!("Button")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Button))
/>
<MenuItem
text={html!("Collapse")}
onclick=self.link
.callback(|_| Msg::GoToMenu(DocMenu::Collapse))
/>
<MenuItem
text={html!("Icon")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Icon))
/>
<MenuItem
text={html!("Menu")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Menu))
/>
<MenuItem
text={html!("Switch")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Switch))
/>
<MenuItem
text={html!("Tree")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Tree))
/>
</Menu>
<div class="docs-nav-sponsors">
<a href="https://www.netlify.com">
<img
src=netlify_badge
alt="Deploys by Netlify"
/>
</a>
</div>
</div>
</div>
<main class="docs-content-wrapper" role="main">
<div class="docs-page">
{
match self.doc_menu {
DocMenu::Button => html! (<ButtonDoc />),
DocMenu::Switch => html! (<SwitchDoc
dark_theme=self.dark_theme
onclick=self.link.callback(|_| Msg::ToggleLight)
/>),
DocMenu::Collapse => html!(<CollapseDoc />),
DocMenu::Tree => html!(<TreeDoc />),
DocMenu::Icon => html!(<IconDoc />),
DocMenu::Menu => html!(),
}
}
</div>
</main>
</div>
</div>
}
}
}
#[derive(Debug, Copy, Clone)]
pub enum DocMenu {
Button,
Collapse,
Icon,
Menu,
Switch,
Tree,
}

View file

@ -1,5 +1,5 @@
use crate::{Button, Collapse, IconName, Intent};
use yew::prelude::*;
use yewprint::{Button, Collapse, IconName, Intent};
pub struct ExampleContainer {
collapsed: bool,

52
yewprint-doc/src/lib.rs Normal file
View file

@ -0,0 +1,52 @@
#![recursion_limit = "512"]
mod app;
mod buttons;
mod collapse;
mod example;
mod icon;
mod switch;
mod tree;
pub use app::*;
pub use example::*;
#[macro_export]
macro_rules! log {
($s:expr $(,$args:expr)*) => {{
yew::services::ConsoleService::log(format!($s $(,$args)*).as_str());
}};
}
#[macro_export]
macro_rules! include_raw_html {
($file:expr, $class:expr) => {{
yew::virtual_dom::VNode::VRef(yew::web_sys::Node::from({
let div = crate::include_raw_html!(element $file);
div.set_class_name($class);
div
}))
}};
($file:expr) => {{
yew::virtual_dom::VNode::VRef(yew::web_sys::Node::from({
crate::include_raw_html!(element $file)
}))
}};
(element $file:expr) => {{
let div = web_sys::window()
.unwrap()
.document()
.unwrap()
.create_element("div")
.unwrap();
div.set_inner_html(include_str!($file));
div
}};
}
#[wasm_bindgen::prelude::wasm_bindgen(start)]
pub fn run_app() -> Result<(), wasm_bindgen::JsValue> {
yew::start_app::<app::App>();
Ok(())
}

View file

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -1,4 +1,5 @@
use super::*;
use yew::prelude::*;
use yewprint::*;
pub struct SwitchDoc {
props: Props,

21
yewprint/Cargo.toml Normal file
View file

@ -0,0 +1,21 @@
[package]
name = "yewprint"
version = "0.1.0"
authors = ["Cecile Tonglet <cecile.tonglet@cecton.com>"]
edition = "2018"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[badges]
travis-ci = { repository = "cecton/yewprint", branch = "main" }
is-it-maintained-issue-resolution = { repository = "cecton/yewprint" }
is-it-maintained-open-issues = { repository = "cecton/yewprint" }
[dependencies]
yew = { git = "https://github.com/yewstack/yew.git", rev = "1507c21b" }
web-sys = "0.3"
id_tree = "1.7"
[build-dependencies]
regex = { version = "1", default-features = false, features = ["std"] }
heck = "0.3"

View file

@ -58,55 +58,4 @@ fn main() {
fs::write(&dest_path, src).unwrap();
println!("cargo:rerun-if-changed=build.rs");
#[cfg(feature = "doc")]
load_examples_with_colors();
}
#[cfg(feature = "doc")]
fn load_examples_with_colors() {
use std::ffi::OsString;
use syntect::highlighting::{Theme, ThemeSet};
use syntect::parsing::SyntaxSet;
let syntax_set = SyntaxSet::load_defaults_newlines();
let theme_set = ThemeSet::load_defaults();
let out_dir = env::var_os("OUT_DIR").unwrap();
fn recursive<P: AsRef<Path>>(
base_path: P,
syntax_set: &SyntaxSet,
theme: &Theme,
out_dir: &OsString,
) {
for entry in fs::read_dir(base_path).unwrap() {
let entry = entry.unwrap();
let path = entry.path();
if path.is_dir() {
recursive(&path, syntax_set, theme, out_dir);
}
let file_name = path.file_name().unwrap().to_str().unwrap();
if path.starts_with("./src") && file_name == "example.rs" && path.is_file() {
let dest_path = Path::new(&out_dir)
.join(&path)
.with_file_name("doc.rs.html");
let src =
syntect::html::highlighted_html_for_file(&path, syntax_set, theme).unwrap();
let _ = std::fs::create_dir_all(dest_path.parent().unwrap());
fs::write(&dest_path, src.trim_end()).unwrap();
println!("cargo:rerun-if-changed={}", path.display());
}
}
}
recursive(
".",
&syntax_set,
&theme_set.themes["Solarized (dark)"],
&out_dir,
)
}

View file

@ -1,6 +1,3 @@
#[cfg(feature = "doc")]
pub mod doc;
use crate::{ConditionalClass, Icon, IconName, Intent};
use yew::prelude::*;

View file

@ -1,6 +1,3 @@
#[cfg(feature = "doc")]
pub mod doc;
use std::time::Duration;
use web_sys::Element;
use yew::prelude::*;

View file

@ -1,6 +1,3 @@
#[cfg(feature = "doc")]
pub mod doc;
use crate::Intent;
use yew::prelude::*;

View file

@ -1,25 +1,14 @@
#![recursion_limit = "512"]
#[cfg(feature = "doc")]
extern crate self as yewprint;
#[cfg(feature = "doc")]
mod app;
mod buttons;
mod collapse;
#[cfg(feature = "doc")]
mod example;
mod icon;
mod menu;
mod switch;
mod tree;
#[cfg(feature = "doc")]
pub use app::*;
pub use buttons::*;
pub use collapse::*;
#[cfg(feature = "doc")]
pub use example::*;
pub use icon::*;
pub use id_tree;
pub use menu::*;
@ -29,41 +18,6 @@ pub use tree::*;
use std::ops::{Deref, DerefMut};
use yew::virtual_dom::{Classes, Transformer, VComp};
#[cfg(feature = "doc")]
#[macro_export]
macro_rules! log {
($s:expr $(,$args:expr)*) => {{
yew::services::ConsoleService::log(format!($s $(,$args)*).as_str());
}};
}
#[cfg(feature = "doc")]
#[macro_export]
macro_rules! include_raw_html {
($file:expr, $class:expr) => {{
yew::virtual_dom::VNode::VRef(yew::web_sys::Node::from({
let div = crate::include_raw_html!(element $file);
div.set_class_name($class);
div
}))
}};
($file:expr) => {{
yew::virtual_dom::VNode::VRef(yew::web_sys::Node::from({
crate::include_raw_html!(element $file)
}))
}};
(element $file:expr) => {{
let div = web_sys::window()
.unwrap()
.document()
.unwrap()
.create_element("div")
.unwrap();
div.set_inner_html(include_str!($file));
div
}};
}
// NOTE: this class needs to become deprecated when the feature bool_to_option lands in stable
//
// https://github.com/rust-lang/rust/issues/64260
@ -112,14 +66,6 @@ impl DerefMut for ConditionalClass {
}
}
#[cfg(feature = "doc")]
#[wasm_bindgen::prelude::wasm_bindgen(start)]
pub fn run_app() -> Result<(), wasm_bindgen::JsValue> {
yew::start_app::<app::App>();
Ok(())
}
#[derive(Debug, Copy, Clone, PartialEq)]
pub enum Intent {
Primary,

View file

@ -1,6 +1,3 @@
#[cfg(feature = "doc")]
pub mod doc;
use yew::prelude::*;
pub struct Switch {

View file

@ -9,9 +9,6 @@ use std::hash::{Hash, Hasher};
use std::rc::Rc;
use yew::prelude::*;
#[cfg(feature = "doc")]
pub mod doc;
#[derive(Clone)]
pub struct TreeData<T> {
tree: Rc<RefCell<id_tree::Tree<NodeData<T>>>>,