├── .gitignore ├── LICENSE ├── README.md ├── aux ├── NewExperiment.pdf └── f1.png ├── docs ├── .gitignore ├── .tweet-cache │ ├── 02b591d77a446cb7531ab71b75d3d2bc.cache │ └── f18f38b6b6bb712c5873a899905f747c.cache ├── 404.html ├── Dockerfile.dev ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── _config.yml ├── _data │ ├── authors.yml │ ├── licenses.yml │ ├── locale.yml │ ├── navigation.yml │ └── variables.yml ├── _includes │ ├── analytics-providers │ │ ├── custom.html │ │ └── google.html │ ├── analytics.html │ ├── article-footer.html │ ├── article-header.html │ ├── article-info.html │ ├── article-list.html │ ├── article-section-navigator.html │ ├── article │ │ ├── footer │ │ │ ├── author-profile.html │ │ │ ├── custom.html │ │ │ ├── license.html │ │ │ └── subscribe.html │ │ └── top │ │ │ └── custom.html │ ├── aside │ │ └── toc.html │ ├── author-links.html │ ├── comments-providers │ │ ├── custom.html │ │ ├── disqus.html │ │ ├── gitalk.html │ │ └── valine.html │ ├── comments.html │ ├── extensions │ │ ├── bilibili.html │ │ ├── codepen.html │ │ ├── netease-cloud-music.html │ │ ├── slideshare.html │ │ ├── soundcloud.html │ │ ├── ted.html │ │ └── youtube.html │ ├── footer.html │ ├── head.html │ ├── head │ │ ├── custom.html │ │ └── favicon.html │ ├── header.html │ ├── main │ │ ├── bottom │ │ │ └── custom.html │ │ └── top │ │ │ └── custom.html │ ├── markdown-enhancements.html │ ├── markdown-enhancements │ │ ├── chart.html │ │ ├── mathjax.html │ │ └── mermaid.html │ ├── pageview-providers │ │ ├── custom │ │ │ ├── home.html │ │ │ └── post.html │ │ └── leancloud │ │ │ ├── home.html │ │ │ ├── leancloud.js │ │ │ └── post.html │ ├── pageview.html │ ├── paginator.html │ ├── scripts │ │ ├── archieve.js │ │ ├── article.js │ │ ├── aside │ │ │ ├── affix.js │ │ │ └── toc.js │ │ ├── common.js │ │ ├── components │ │ │ ├── lightbox.js │ │ │ ├── search.js │ │ │ └── sidebar.js │ │ ├── home.js │ │ ├── lib │ │ │ ├── affix.js │ │ │ ├── gallery.js │ │ │ ├── lazyload.js │ │ │ ├── modal.js │ │ │ ├── scroll-to.js │ │ │ ├── swiper.js │ │ │ ├── throttle.js │ │ │ └── toc.js │ │ ├── page.js │ │ ├── utils │ │ │ ├── imagesLoad.js │ │ │ └── utils.js │ │ └── variables.html │ ├── search-providers │ │ ├── custom │ │ │ └── search.html │ │ ├── default │ │ │ ├── search-data.js │ │ │ ├── search.html │ │ │ └── search.js │ │ └── google-custom-search-engine │ │ │ ├── search.html │ │ │ └── search.js │ ├── search.html │ ├── sharing-providers │ │ ├── addthis.html │ │ ├── addtoany.html │ │ └── custom.html │ ├── sharing.html │ ├── sidebar │ │ └── toc.html │ ├── snippets │ │ ├── assign.html │ │ ├── get-article-title.html │ │ ├── get-lang.html │ │ ├── get-locale-string.html │ │ ├── get-nav-url.html │ │ ├── get-sources.html │ │ ├── get-string-from-locale-config.html │ │ ├── is_collection.html │ │ ├── page-url.html │ │ ├── prepend-baseurl.html │ │ └── prepend-path.html │ ├── svg │ │ ├── icon │ │ │ └── social │ │ │ │ ├── behance.svg │ │ │ │ ├── douban.svg │ │ │ │ ├── facebook.svg │ │ │ │ ├── flicker.svg │ │ │ │ ├── github.svg │ │ │ │ ├── googleplus.svg │ │ │ │ ├── linkedin.svg │ │ │ │ ├── mail.svg │ │ │ │ ├── medium.svg │ │ │ │ ├── npm.svg │ │ │ │ ├── pinterest.svg │ │ │ │ ├── qq.svg │ │ │ │ ├── telegram.svg │ │ │ │ ├── twitter.svg │ │ │ │ ├── weibo.svg │ │ │ │ ├── weixin.svg │ │ │ │ └── zhihu.svg │ │ └── logo.svg │ └── tags.html ├── _layouts │ ├── 404.html │ ├── archive.html │ ├── article.html │ ├── articles.html │ ├── base.html │ ├── home.html │ ├── landing.html │ ├── none.html │ └── page.html ├── _sass │ ├── additional │ │ ├── _alert.scss │ │ ├── _photo-frame.scss │ │ └── _tag.scss │ ├── animate │ │ ├── _fade-in-down.scss │ │ ├── _fade-in-up.scss │ │ └── _fade-in.scss │ ├── common │ │ ├── _classes.scss │ │ ├── _function.scss │ │ ├── _print.scss │ │ ├── _reset.scss │ │ ├── _variables.scss │ │ ├── classes │ │ │ ├── _animation.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _clickable.scss │ │ │ ├── _display.scss │ │ │ ├── _flex.scss │ │ │ ├── _grid.scss │ │ │ ├── _horizontal-rules.scss │ │ │ ├── _link.scss │ │ │ ├── _media.scss │ │ │ ├── _overflow.scss │ │ │ ├── _pseudo.scss │ │ │ ├── _shadow.scss │ │ │ ├── _spacing.scss │ │ │ ├── _split-line.scss │ │ │ ├── _text.scss │ │ │ ├── _transform.scss │ │ │ ├── _transition.scss │ │ │ └── _user-select.scss │ │ └── components │ │ │ ├── _button.scss │ │ │ ├── _card.scss │ │ │ ├── _gallery.scss │ │ │ ├── _hero.scss │ │ │ ├── _image.scss │ │ │ ├── _item.scss │ │ │ ├── _menu.scss │ │ │ ├── _modal.scss │ │ │ ├── _swiper.scss │ │ │ └── _toc.scss │ ├── components │ │ ├── _article-content.scss │ │ ├── _article-footer.scss │ │ ├── _article-header.scss │ │ ├── _article-info.scss │ │ ├── _article-list.scss │ │ ├── _author-links.scss │ │ ├── _author-profile.scss │ │ ├── _extensions.scss │ │ ├── _footer.scss │ │ ├── _header.scss │ │ ├── _lightbox.scss │ │ ├── _main.scss │ │ ├── _search.scss │ │ └── _tags.scss │ ├── custom.scss │ ├── layout │ │ ├── _404.scss │ │ ├── _archive.scss │ │ ├── _article.scss │ │ ├── _articles.scss │ │ ├── _base.scss │ │ ├── _home.scss │ │ ├── _landing.scss │ │ └── _page.scss │ └── skins │ │ ├── _chocolate.scss │ │ ├── _dark.scss │ │ ├── _default.scss │ │ ├── _forest.scss │ │ ├── _ocean.scss │ │ ├── _orange.scss │ │ └── highlight │ │ ├── _default.scss │ │ ├── _tomorrow-night-blue.scss │ │ ├── _tomorrow-night-bright.scss │ │ ├── _tomorrow-night-eighties.scss │ │ ├── _tomorrow-night.scss │ │ ├── _tomorrow.scss │ │ └── tomorrow │ │ ├── _default.scss │ │ ├── _highlight.scss │ │ ├── _night-blue.scss │ │ ├── _night-bright.scss │ │ ├── _night-eighties.scss │ │ └── _night.scss ├── archive.html ├── assets │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── css │ │ └── main.scss │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── images │ │ └── logo │ │ │ └── logo.svg │ ├── mstile-150x150.png │ ├── search.js │ └── site.webmanifest ├── docker │ ├── docker-compose.build-image.yml │ ├── docker-compose.default.yml │ ├── docker-compose.demo.yml │ ├── docker-compose.dev.yml │ ├── docker-compose.prod.yml │ └── nginx.conf ├── docs │ ├── 00_about.md │ ├── 01-make-meta.md │ ├── 02-check_image.md │ ├── 03-crop-image.md │ ├── 04-gene-exp-hvg.md │ ├── 05_clip_human_brain_DLPFC.md │ ├── 06_plip_human_brain_DLPFC.md │ ├── 07-linear_probing.md │ ├── 08-embedding_score.md │ ├── 09_for_new_to_ST.md │ ├── 10_ST_analysis_quick_start.md │ ├── 11-gene-exp-prediction.md │ ├── 12-segmentation.md │ ├── 13-code-for_figs.md │ ├── doc_data │ │ ├── Michael_Hooker_Research_Center_Zoom_Background_2.jpg │ │ ├── UNC_logo_RGB.png │ │ ├── f1.png │ │ └── model_st.py │ └── landing.html ├── favicon.ico ├── index.html └── jekyll-text-theme.gemspec ├── example ├── Human_Breast_Andersson_10142021_ST_A1.png ├── Human_Breast_Andersson_10142021_ST_A1_coord.csv └── Human_Breast_Andersson_10142021_ST_A1_count.csv ├── meta ├── meta_all_gene.csv └── meta_all_gene02122025.csv └── metadata.json /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Jiawen Chen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # STimage-1K4M Dataset 2 | 3 | Welcome to the STimage-1K4M Dataset repository. This dataset is designed to foster research in the field of spatial transcriptomics, combining high-resolution histopathology images with detailed gene expression data. 4 | 5 | ![teaser](aux/f1.png "teaser") 6 | 7 | ## Update 8 | 9 | ***Feb 12, 2025*** 10 | We corrected a typo in meta file (changed "Human_Brain+Kidney_10X_02212023_Visium" to "Mouse_Brain+Kidney_10X_02212023_Visium"). Please refer to **meta_all_gene02122025.csv** for the newest meta data. 11 | 12 | 13 | ## Dataset Description 14 | 15 | STimage-1K4M consists of 1,149 spatial transcriptomics slides, totaling over 4 million spots with paired gene expression data. This dataset includes: 16 | 17 | - Images. 18 | - Gene expression profiles matched with high-resolution histopathology images. 19 | - Spatial coordinates for each spot. 20 | 21 | See example folder for an example slide from Andersson et al. (pmid: 34650042). 22 | 23 | ## Getting Started 24 | 25 | To use the STimage-1K4M dataset in your research, please access the dataset via [Hugging Face](https://huggingface.co/datasets/jiawennnn/STimage-1K4M). 26 | 27 | ## Data structure 28 | The data structure is organized as follows: 29 | 30 | ```bash 31 | ├── annotation # Pathologist annotation 32 | ├── meta # Test files (alternatively `spec` or `tests`) 33 | │ ├── bib.txt # the bibtex for all studies with pmid included in the dataset 34 | │ ├── meta_all_gene.csv # The meta information 35 | ├── ST # Include all data for tech: Spatial Transcriptomics 36 | │ ├── coord # Include the spot coordinates & spot radius of each slide 37 | │ ├── gene_exp # Include the gene expression of each slide 38 | │ └── image # Include the image each slide 39 | ├── Visium # Include all data for tech: Visium, same structure as ST 40 | ├── VisiumHD # Include all data for tech: VisiumHD, same structure as ST 41 | ``` 42 | ## Repository structure 43 | 44 | The code for data processing and reproducing evaluation result in the paper are in [Document](https://jiawenchenn.github.io/STimage-1K4M/docs/01-make-meta). 45 | 46 | ## Acknowledgement 47 | The fine-tuning and evaluation codes borrows heavily from [CLIP](https://github.com/openai/CLIP/issues/83) and [PLIP](https://github.com/PathologyFoundation/plip/). 48 | 49 | ## Citation 50 | 51 | ``` 52 | 53 | @inproceedings{NEURIPS2024_3ef2b740, 54 | author = {Chen, Jiawen and Zhou, Muqing and Wu, Wenrong and Zhang, Jinwei and Li, Yun and Li, Didong}, 55 | booktitle = {Advances in Neural Information Processing Systems}, 56 | editor = {A. Globerson and L. Mackey and D. Belgrave and A. Fan and U. Paquet and J. Tomczak and C. Zhang}, 57 | pages = {35796--35823}, 58 | publisher = {Curran Associates, Inc.}, 59 | title = {STimage-1K4M: A histopathology image-gene expression dataset for spatial transcriptomics}, 60 | url = {https://proceedings.neurips.cc/paper_files/paper/2024/file/3ef2b740cb22dcce67c20989cb3d3fce-Paper-Datasets_and_Benchmarks_Track.pdf}, 61 | volume = {37}, 62 | year = {2024} 63 | } 64 | 65 | ``` 66 | 67 | ## License 68 | 69 | All code is licensed under the MIT License - see the LICENSE.md file for details. 70 | -------------------------------------------------------------------------------- /aux/NewExperiment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/aux/NewExperiment.pdf -------------------------------------------------------------------------------- /aux/f1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/aux/f1.png -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-cache 4 | .jekyll-metadata 5 | vendor 6 | -------------------------------------------------------------------------------- /docs/.tweet-cache/02b591d77a446cb7531ab71b75d3d2bc.cache: -------------------------------------------------------------------------------- 1 | {"url":"https://twitter.com/rubygems/status/518821243320287232","author_name":"RubyGems","author_url":"https://twitter.com/rubygems","html":"

jekyll-twitter-plugin (1.0.0): A Liquid tag plugin for Jekyll that renders Tweets from Twitter API http://t.co/m4EIQPM9h4

— RubyGems (@rubygems) October 5, 2014
\n\n\n","width":550,"height":null,"type":"rich","cache_age":"3153600000","provider_name":"Twitter","provider_url":"https://twitter.com","version":"1.0"} -------------------------------------------------------------------------------- /docs/.tweet-cache/f18f38b6b6bb712c5873a899905f747c.cache: -------------------------------------------------------------------------------- 1 | {"url":"https://twitter.com/jekyllrb","title":"","html":"Tweets by jekyllrb\n\n","width":500,"height":null,"type":"rich","cache_age":"3153600000","provider_name":"Twitter","provider_url":"https://twitter.com","version":"1.0"} -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 404 3 | --- 4 | -------------------------------------------------------------------------------- /docs/Dockerfile.dev: -------------------------------------------------------------------------------- 1 | FROM ruby:2.7 2 | 3 | # Set default locale for the environment 4 | ENV LC_ALL C.UTF-8 5 | ENV LANG en_US.UTF-8 6 | ENV LANGUAGE en_US.UTF-8 7 | 8 | # throw errors if Gemfile has been modified since Gemfile.lock 9 | RUN bundle config --global frozen 1 10 | 11 | WORKDIR /usr/src/app 12 | 13 | COPY Gemfile Gemfile.lock jekyll-text-theme.gemspec ./ 14 | RUN bundle install 15 | 16 | EXPOSE 4000 17 | 18 | CMD ["bundle", "exec", "jekyll", "help"] 19 | -------------------------------------------------------------------------------- /docs/Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | # gem "github-pages", group: :jekyll_plugins 4 | gemspec 5 | -------------------------------------------------------------------------------- /docs/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Tian Qi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/_data/authors.yml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/_data/authors.yml -------------------------------------------------------------------------------- /docs/_data/licenses.yml: -------------------------------------------------------------------------------- 1 | CC-BY-4.0: 2 | name: Attribution 4.0 International 3 | url: https://creativecommons.org/licenses/by/4.0/ 4 | image: https://i.creativecommons.org/l/by/4.0/88x31.png 5 | CC-BY-SA-4.0: 6 | name: Attribution-ShareAlike 4.0 International 7 | url: https://creativecommons.org/licenses/by-sa/4.0/ 8 | image: https://i.creativecommons.org/l/by-sa/4.0/88x31.png 9 | CC-BY-NC-4.0: 10 | name: Attribution-NonCommercial 4.0 International 11 | url: https://creativecommons.org/licenses/by-nc/4.0/ 12 | image: https://i.creativecommons.org/l/by-nc/4.0/88x31.png 13 | CC-BY-ND-4.0: 14 | name: Attribution-NoDerivatives 4.0 International 15 | url: https://creativecommons.org/licenses/by-nd/4.0/ 16 | image: https://i.creativecommons.org/l/by-nd/4.0/88x31.png 17 | -------------------------------------------------------------------------------- /docs/_data/navigation.yml: -------------------------------------------------------------------------------- 1 | header: 2 | 3 | - titles: 4 | # @start locale config 5 | en : &EN About 6 | # @end locale config 7 | url: docs/00_about 8 | 9 | - titles: 10 | # @start locale config 11 | en : &EN Document 12 | # @end locale config 13 | url: docs/01-make-meta 14 | 15 | document_nav: 16 | - title: Data processing 17 | children: 18 | - title: Meta data cleaning 19 | url: docs/01-make-meta 20 | - title: Check spot location 21 | url: docs/02-check_image 22 | - title: Crop spot-level image 23 | url: docs/03-crop-image 24 | - title: Gene expression processing 25 | url: docs/04-gene-exp-hvg 26 | - title: Fine-tuning 27 | children: 28 | - title: Fine-tune CLIP 29 | url: docs/05_clip_human_brain_DLPFC 30 | - title: Fine-tune PLIP 31 | url: docs/06_plip_human_brain_DLPFC 32 | - title: Evaluation 33 | children: 34 | - title: Linear probing 35 | url: docs/07-linear_probing 36 | - title: Image representation learning 37 | url: docs/08-embedding_score 38 | - title: Gene expression prediction 39 | url: docs/11-gene-exp-prediction 40 | - title: Nuclear segmentation 41 | url: docs/12-segmentation 42 | - title: Code for reproducing figures 43 | url: docs/13-code-for_figs 44 | - title: Resources 45 | children: 46 | - title: Intro to ST technology 47 | url: docs/09_for_new_to_ST 48 | - title: ST data analysis quick start 49 | url: docs/10_ST_analysis_quick_start 50 | -------------------------------------------------------------------------------- /docs/_data/variables.yml: -------------------------------------------------------------------------------- 1 | default: 2 | text_skin: default 3 | highlight_theme: default 4 | lang: en 5 | paths: 6 | root: / 7 | home: / 8 | archive: /archive.html 9 | rss: /feed.xml 10 | mathjax: false 11 | mathjax_autoNumber: false 12 | mermaid: false 13 | chart: false 14 | toc: 15 | selectors: 'h1,h2,h3' 16 | sources: bootcdn 17 | 18 | page: 19 | mode: normal 20 | type: webpage 21 | article_header: 22 | align: left 23 | theme: light 24 | articles: 25 | show_cover: true 26 | show_excerpt: false 27 | show_readmore: false 28 | show_info: false 29 | show_title: true 30 | show_edit_on_github: false 31 | show_date: true 32 | show_tags: true 33 | show_author_profile: false 34 | show_subscribe: false 35 | full_width: false 36 | sharing: false 37 | comment: true 38 | license: false 39 | pageview: false 40 | search: default 41 | 42 | sources: 43 | bootcdn: 44 | font_awesome: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.css' 45 | jquery: 'https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js' 46 | leancloud_js_sdk: '//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js' 47 | chart: 'https://cdn.bootcss.com/Chart.js/2.7.2/Chart.bundle.min.js' 48 | gitalk: 49 | js: 'https://cdn.bootcss.com/gitalk/1.2.2/gitalk.min.js' 50 | css: 'https://cdn.bootcss.com/gitalk/1.2.2/gitalk.min.css' 51 | valine: 'https://unpkg.com/valine/dist/Valine.min.js' # bootcdn not available 52 | mathjax: 'https://cdn.bootcss.com/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML' 53 | mermaid: 'https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js' 54 | unpkg: 55 | font_awesome: 'https://use.fontawesome.com/releases/v5.15.1/css/all.css' 56 | jquery: 'https://unpkg.com/jquery@3.3.1/dist/jquery.min.js' 57 | leancloud_js_sdk: '//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js' 58 | chart: 'https://unpkg.com/chart.js@2.7.2/dist/Chart.min.js' 59 | gitalk: 60 | js: 'https://unpkg.com/gitalk@1.2.2/dist/gitalk.min.js' 61 | css: 'https://unpkg.com/gitalk@1.2.2/dist/gitalk.css' 62 | valine: 'https//unpkg.com/valine/dist/Valine.min.js' 63 | mathjax: 'https://unpkg.com/mathjax@2.7.4/unpacked/MathJax.js?config=TeX-MML-AM_CHTML' 64 | mermaid: 'https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js' 65 | -------------------------------------------------------------------------------- /docs/_includes/analytics-providers/custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/analytics-providers/google.html: -------------------------------------------------------------------------------- 1 | {%- if site.analytics.google.tracking_id -%} 2 | 3 | 4 | 14 | {%- endif -%} 15 | -------------------------------------------------------------------------------- /docs/_includes/analytics.html: -------------------------------------------------------------------------------- 1 | {%- if jekyll.environment != 'development' -%} 2 | {%- if site.analytics.provider == 'google' -%} 3 | {%- include analytics-providers/google.html -%} 4 | {%- elsif site.analytics.provider == 'custom' -%} 5 | {%- include analytics-providers/custom.html -%} 6 | {%- endif -%} 7 | {%- endif -%} 8 | -------------------------------------------------------------------------------- /docs/_includes/article-footer.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/assign.html 2 | target=site.data.variables.default.page.show_author_profile 3 | source0=layout.show_author_profile source1=page.show_author_profile -%} 4 | {%- assign _show_author_profile = __return -%} 5 | 6 | {%- include snippets/assign.html 7 | target=site.data.variables.default.page.show_subscribe 8 | source0=layout.show_subscribe source1=page.show_subscribe -%} 9 | {%- assign _show_subscribe = __return -%} 10 | 11 | {%- include snippets/assign.html 12 | target=site.data.variables.default.page.license 13 | source0=layout.license source1=page.license -%} 14 | {%- assign _license = __return -%} 15 | 16 | 56 | -------------------------------------------------------------------------------- /docs/_includes/article-header.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-article-title.html article=include.article-%} 2 | {%- assign _article_title = __return -%} 3 | 4 | {%- if include.html != false -%} 5 | 6 | {%- include snippets/assign.html 7 | target=site.data.variables.default.page.show_title 8 | source0=layout.show_title source1=include.article.show_title -%} 9 | {%- assign _show_title = __return -%} 10 | 11 | {%- include snippets/assign.html 12 | target=site.data.variables.default.page.show_edit_on_github 13 | source0=layout.show_edit_on_github source1=include.article.show_edit_on_github -%} 14 | {%- assign _show_edit_on_github = __return -%} 15 | 16 | {%- if _show_title or _show_edit_on_github -%} 17 |
18 | {%- if _show_title -%} 19 |

{{ _article_title }}

20 | {%- endif -%} 21 | {%- if _show_edit_on_github -%} 22 | {%- if site.repository and site.repository_tree -%} 23 | {%- include snippets/is_collection.html page=include.article -%} 24 | {%- assign _is_article_collection = __return -%} 25 | {%- include snippets/get-locale-string.html key='POST_ON_GITHUB' -%} 26 | {%- assign _locale_post_on_github = __return -%} 27 | {%- if _is_article_collection -%} 28 | {%- include snippets/prepend-path.html path=include.article.path prepend_path=site.collections_dir -%} 29 | {%- assign _article_path = __return -%} 30 | {%- else -%} 31 | {%- assign _article_path = include.article.path -%} 32 | {%- endif -%} 33 | {%- assign _github_path = site.repository | append: '/tree/' | append: site.repository_tree | append: '/' | append: _article_path | replace:'//','/' -%} 34 |   35 | 38 | 39 | {%- endif -%} 40 | {%- endif -%} 41 |
42 | {%- else -%} 43 |

{{ _article_title }}

44 | {%- endif -%} 45 | {%- endif -%} 46 | 47 | {%- if include.semantic != false -%} 48 | 49 | {%- endif -%} 50 | -------------------------------------------------------------------------------- /docs/_includes/article-section-navigator.html: -------------------------------------------------------------------------------- 1 | {%- if page.sidebar.nav -%} 2 | {%- assign _sidebar_nav = site.data.navigation[page.sidebar.nav] -%} 3 | {%- if _sidebar_nav -%} 4 | {%- assign _find_cur = false -%} 5 | {%- assign _find_next = false -%} 6 | 7 | {%- for _item in _sidebar_nav -%} 8 | {%- if _find_next -%} {%- break -%} {%- endif -%} 9 | {%- if _item.children -%} 10 | 11 | {%- for _child in _item.children -%} 12 | {%- include snippets/get-nav-url.html path=_child.url -%} 13 | {%- assign _nav_url = __return -%} 14 | {%- include snippets/get-nav-url.html path=page.url -%} 15 | {%- assign _page_url = __return -%} 16 | 17 | {%- if _nav_url == _page_url -%} 18 | {%- assign _find_cur = true -%} 19 | {%- elsif _find_cur and _find_next != true -%} 20 | {%- assign _find_next = true -%} 21 | {%- assign _next = _child -%} 22 | {%- break -%} 23 | {%- else -%} 24 | {%- assign _previous = _child -%} 25 | {%- endif -%} 26 | {%- endfor -%} 27 | 28 | {%- endif -%} 29 | {%- endfor -%} 30 | {%- endif -%} 31 | 32 | {%- else -%} 33 | {%- assign _previous = page.previous -%} 34 | {%- assign _next = page.next -%} 35 | {%- endif -%} 36 | 37 | {%- if _next or _previous -%} 38 |
39 | {%- if _previous -%} 40 | {%- include snippets/prepend-baseurl.html path=_previous.url -%} 41 | {%- assign _href = __return -%} 42 | {%- include snippets/get-locale-string.html key='PREVIOUS' -%} 43 | {%- assign _locale_previous = __return -%} 44 | 45 | {%- endif -%} 46 | {%- if _next -%} 47 | {%- include snippets/prepend-baseurl.html path=_next.url -%} 48 | {%- assign _href = __return -%} 49 | {%- include snippets/get-locale-string.html key='NEXT' -%} 50 | {%- assign _locale_next = __return -%} 51 | 52 | {%- endif -%} 53 |
54 | {%- endif -%} 55 | -------------------------------------------------------------------------------- /docs/_includes/article/footer/author-profile.html: -------------------------------------------------------------------------------- 1 | {%- assign _author = include.author -%} 2 | 3 | {%- if _author.type == 'organization' -%} 4 | {%- assign _author_itemtype = 'http://schema.org/Organization' -%} 5 | {%- else -%} 6 | {%- assign _author_itemtype = 'http://schema.org/Person' -%} 7 | {%- endif -%} 8 | 9 |
10 | {%- if _author.avatar -%} 11 | {%- if _author.url -%} 12 | 13 | {%- endif -%} 14 | {%- include snippets/get-nav-url.html path=_author.avatar -%} 15 | {%- assign _author_avatar = __return -%} 16 | 17 | {%- if _author.url -%} 18 | 19 | {%- endif -%} 20 | {%- endif -%} 21 | 22 | 23 |
24 | 25 | {%- if _author.name -%} 26 | 27 |

28 | {%- if _author.url -%} 29 | 30 | 31 | {%- endif -%} 32 | {{ _author.name }} 33 | {%- if _author.url -%} 34 | 35 | {%- endif -%} 36 |

37 | {%- endif -%} 38 | 39 | {%- if _author.bio -%} 40 |

{{ _author.bio }}

41 | {%- endif -%} 42 |
43 | {%- include author-links.html author=_author -%} 44 |
45 | 46 |
47 |
48 | -------------------------------------------------------------------------------- /docs/_includes/article/footer/custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/article/footer/license.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-locale-string.html key='LICENSE_ANNOUNCE' -%} 2 | {%- assign _license_announce = __return -%} 3 | 4 | {%- if include.license -%} 5 | 6 | {%-assign _license_name = '[NAME]' | replace: "[URL]", include.license.url | replace: "[NAME]", include.license.name -%} 7 |
8 |

{{ _license_announce | replace: "[LICENSE]", _license_name }} 9 | 10 | {{ include.license.name }} 11 | 12 |

13 |
14 | {%- endif -%} 15 | -------------------------------------------------------------------------------- /docs/_includes/article/footer/subscribe.html: -------------------------------------------------------------------------------- 1 | {%- assign _paths_rss = site.paths.rss | default: site.data.variables.default.paths.rss -%} 2 | {%- include snippets/get-nav-url.html path=_paths_rss -%} 3 | {%- assign _paths_rss = __return -%} 4 | {%- include snippets/get-locale-string.html key='SUBSCRIBE' -%} 5 | {%- assign _locale_nav_subscribe = __return -%} 6 |
{{ _locale_nav_subscribe }}
7 | -------------------------------------------------------------------------------- /docs/_includes/article/top/custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/aside/toc.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /docs/_includes/comments-providers/custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/comments-providers/disqus.html: -------------------------------------------------------------------------------- 1 | {%- if page.key and 2 | site.comments.disqus.shortname -%} 3 | 4 |
5 | 20 | 21 | 22 | {%- endif -%} 23 | -------------------------------------------------------------------------------- /docs/_includes/comments-providers/gitalk.html: -------------------------------------------------------------------------------- 1 | {%- if page.key and 2 | site.comments.gitalk.clientID and 3 | site.comments.gitalk.clientSecret and 4 | site.comments.gitalk.repository and 5 | site.comments.gitalk.owner and 6 | site.comments.gitalk.admin -%} 7 | 8 | 9 | 14 | 15 | {%- include snippets/get-sources.html -%} 16 | {%- assign _sources = __return -%} 17 |
18 | {%- assign _admin = '' -%} 19 | {%- for _admin_id in site.comments.gitalk.admin -%} 20 | {%- assign _admin = _admin | append: ", '" | append: _admin_id | append: "'" -%} 21 | {%- endfor -%} 22 | {%- assign _last = _admin | size | minus: 1 -%} 23 | {%- assign _admin = _admin | slice: 2, _last -%} 24 | 38 | 39 | {%- endif -%} 40 | -------------------------------------------------------------------------------- /docs/_includes/comments-providers/valine.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-sources.html -%} 2 | {%- assign _sources = __return -%} 3 | 4 | {%- assign _VALINE_APP_ID = site.comments.valine.app_id -%} 5 | {%- assign _VALINE_APP_KEY = site.comments.valine.app_key -%} 6 | {%- assign _VALINE_PLACEHOLDER = site.comments.valine.placeholder -%} 7 | {%- assign _VALINE_VISITOR = site.comments.valine.visitor -%} 8 | {%- assign _VALINE_META = site.comments.valine.meta -%} 9 | 10 | 11 | {%- if _VALINE_APP_ID and 12 | _VALINE_APP_KEY -%} 13 | 14 |
15 | 16 | {%- if _VALINE_VISITOR -%} 17 | 18 | 19 | {%- endif -%} 20 | 21 | 45 | 46 | {%- endif -%} -------------------------------------------------------------------------------- /docs/_includes/comments.html: -------------------------------------------------------------------------------- 1 | {%- if jekyll.environment != 'development' -%} 2 | {%- if site.comments.provider == 'disqus' -%} 3 | {%- include comments-providers/disqus.html -%} 4 | {%- elsif site.comments.provider == 'gitalk' -%} 5 | {%- include comments-providers/gitalk.html -%} 6 | {%- elsif site.comments.provider == 'valine' -%} 7 | {%- include comments-providers/valine.html -%} 8 | {%- elsif site.comments.provider == 'custom' -%} 9 | {%- include comments-providers/custom.html -%} 10 | {%- endif -%} 11 | {%- endif -%} 12 | -------------------------------------------------------------------------------- /docs/_includes/extensions/bilibili.html: -------------------------------------------------------------------------------- 1 |
2 | 5 |
6 | -------------------------------------------------------------------------------- /docs/_includes/extensions/codepen.html: -------------------------------------------------------------------------------- 1 |
2 | 4 |
5 | -------------------------------------------------------------------------------- /docs/_includes/extensions/netease-cloud-music.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /docs/_includes/extensions/slideshare.html: -------------------------------------------------------------------------------- 1 |
2 | 6 |
7 | -------------------------------------------------------------------------------- /docs/_includes/extensions/soundcloud.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/_includes/extensions/ted.html: -------------------------------------------------------------------------------- 1 |
2 | 5 |
6 | -------------------------------------------------------------------------------- /docs/_includes/extensions/youtube.html: -------------------------------------------------------------------------------- 1 |
2 | 4 |
5 | -------------------------------------------------------------------------------- /docs/_includes/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 38 | -------------------------------------------------------------------------------- /docs/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {%- include snippets/get-article-title.html article=page -%} 6 | {%- if __return -%}{{ __return }} - {{ site.title }}{%- else -%}{{ site.title }}{%- endif -%} 7 | 8 | 9 | 10 | 11 | {%- assign _paths_rss = site.paths.rss | default: site.data.variables.default.paths.rss -%} 12 | {%- include snippets/get-nav-url.html path=_paths_rss -%} 13 | 14 | 15 | {%- include head/favicon.html -%} 16 | 17 | {%- include snippets/prepend-baseurl.html path='/assets/css/main.css' -%} 18 | 19 | 20 | {%- include snippets/get-sources.html -%} 21 | {%- assign _sources = __return -%} 22 | 23 | 24 | {%- include head/custom.html -%} 25 | -------------------------------------------------------------------------------- /docs/_includes/head/custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/head/favicon.html: -------------------------------------------------------------------------------- 1 | 2 | {%- include snippets/prepend-baseurl.html path='/assets/apple-touch-icon.png' -%} 3 | 4 | 5 | {%- include snippets/prepend-baseurl.html path='/assets/favicon-32x32.png' -%} 6 | 7 | 8 | {%- include snippets/prepend-baseurl.html path='/assets/favicon-16x16.png' -%} 9 | 10 | 11 | {%- include snippets/prepend-baseurl.html path='/assets/site.webmanifest' -%} 12 | 13 | 14 | {%- include snippets/prepend-baseurl.html path='/assets/safari-pinned-tab.svg' -%} 15 | 16 | 17 | {%- include snippets/prepend-baseurl.html path='/assets/favicon.ico' -%} 18 | 19 | 20 | 21 | 22 | {%- include snippets/prepend-baseurl.html path='/assets/browserconfig.xml' -%} 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/_includes/header.html: -------------------------------------------------------------------------------- 1 | {%- if include.theme == 'dark' -%} 2 |
3 | {%- elsif include.theme == 'light' -%} 4 |
5 | {%- else -%} 6 |
7 | {%- endif -%} 8 |
9 |
10 |
11 | {%- assign _paths_root = site.paths.root | default: site.data.variables.default.paths.root -%} 12 | {%- include snippets/get-nav-url.html path=_paths_root -%} 13 | {%- if site.title -%} 14 | {{ site.title }} 15 | {%- endif -%} 16 |
17 | {%- if site.search.provider -%} 18 | 19 | {%- endif -%} 20 |
21 | {%- if site.data.navigation.header -%} 22 | 38 | {%- endif -%} 39 |
40 |
41 | -------------------------------------------------------------------------------- /docs/_includes/main/bottom/custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/main/top/custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/markdown-enhancements.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/assign.html target=site.data.variables.default.chart 2 | source0=site.chart source1=page.chart -%} 3 | {%- if __return == true -%} 4 | {%- include markdown-enhancements/chart.html -%} 5 | {%- endif -%} 6 | 7 | {%- include snippets/assign.html target=site.data.variables.default.mathjax 8 | source0=site.mathjax source1=page.mathjax -%} 9 | {%- if __return == true -%} 10 | {%- include markdown-enhancements/mathjax.html -%} 11 | {%- endif -%} 12 | 13 | {%- include snippets/assign.html target=site.data.variables.default.mermaid 14 | source0=site.mermaid source1=page.mermaid -%} 15 | {%- if __return == true -%} 16 | {%- include markdown-enhancements/mermaid.html -%} 17 | {%- endif -%} 18 | -------------------------------------------------------------------------------- /docs/_includes/markdown-enhancements/chart.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-sources.html -%} 2 | {%- assign _sources = __return -%} 3 | 16 | -------------------------------------------------------------------------------- /docs/_includes/markdown-enhancements/mathjax.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-sources.html -%} 2 | {%- assign _sources = __return -%} 3 | 4 | {%- include snippets/assign.html target=site.data.variables.default.mathjax_autoNumber 5 | source0=site.mathjax_autoNumber source1=page.mathjax_autoNumber -%} 6 | {%- assign _mathjax_autoNumber = __return -%} 7 | 8 | 17 | 18 | -------------------------------------------------------------------------------- /docs/_includes/markdown-enhancements/mermaid.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-sources.html -%} 2 | {%- assign _sources = __return -%} 3 | 11 | -------------------------------------------------------------------------------- /docs/_includes/pageview-providers/custom/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/pageview-providers/custom/post.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/_includes/pageview-providers/leancloud/home.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-sources.html -%} 2 | {%- assign _sources = __return -%} 3 | 4 | {%- assign _LEANCLOUD_APP_ID = site.pageview.leancloud.app_id -%} 5 | {%- assign _LEANCLOUD_APP_KEY = site.pageview.leancloud.app_key -%} 6 | {%- assign _LEANCLOUD_APP_CLASS = site.pageview.leancloud.app_class -%} 7 | 8 | {%- if _LEANCLOUD_APP_ID and 9 | _LEANCLOUD_APP_KEY and 10 | _LEANCLOUD_APP_CLASS -%} 11 | 12 | 15 | 31 | 32 | {%- endif -%} 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /docs/_includes/pageview-providers/leancloud/leancloud.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | function errorHandler(error, callback) { 3 | if (error) { 4 | callback && callback(error); 5 | throw error; 6 | } 7 | } 8 | 9 | function pageview(_AV, options) { 10 | var AV = _AV; 11 | var appId, appKey, appClass; 12 | appId = options.appId; 13 | appKey = options.appKey; 14 | appClass = options.appClass; 15 | AV.init({ 16 | serverURLs: 'https://avoscloud.com', 17 | appId: appId, 18 | appKey: appKey 19 | }); 20 | return { 21 | get: get, 22 | increase: increase 23 | }; 24 | 25 | function searchKey(key) { 26 | var query = new AV.Query(appClass); 27 | query.equalTo('key', key); 28 | return query.first(); 29 | } 30 | 31 | function insert(key, title) { 32 | var Blog = AV.Object.extend(appClass); 33 | var blog = new Blog(); 34 | blog.set('title', title); 35 | blog.set('key', key); 36 | blog.set('views', 0); 37 | return blog.save(); 38 | } 39 | 40 | function increment(result) { 41 | result.increment('views', 1); 42 | return result.save(null, { 43 | fetchWhenSave: true 44 | }); 45 | } 46 | 47 | function get(key, callback) { 48 | searchKey(key).then(function(result) { 49 | if (result) { 50 | callback && callback(result.attributes.views); 51 | } 52 | }, errorHandler); 53 | } 54 | 55 | function increase(key, title, callback) { 56 | searchKey(key).then(function(result) { 57 | if (result) { 58 | increment(result).then(function(result) { 59 | callback && callback(result.attributes.views); 60 | }); 61 | } else { 62 | insert(key, title).then(function(result) { 63 | increment(result).then(function(result) { 64 | callback && callback(result.attributes.views); 65 | }); 66 | }, errorHandler); 67 | } 68 | }, errorHandler); 69 | } 70 | } 71 | window.pageview = pageview; 72 | })(); 73 | -------------------------------------------------------------------------------- /docs/_includes/pageview-providers/leancloud/post.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-sources.html -%} 2 | {%- assign _sources = __return -%} 3 | 4 | {%- assign _LEANCLOUD_APP_ID = site.pageview.leancloud.app_id -%} 5 | {%- assign _LEANCLOUD_APP_KEY = site.pageview.leancloud.app_key -%} 6 | {%- assign _LEANCLOUD_APP_CLASS = site.pageview.leancloud.app_class -%} 7 | 8 | {%- if page.key and 9 | _LEANCLOUD_APP_ID and 10 | _LEANCLOUD_APP_KEY and 11 | _LEANCLOUD_APP_CLASS -%} 12 | 13 | 16 | 30 | 31 | {%- endif -%} -------------------------------------------------------------------------------- /docs/_includes/pageview.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/assign.html target=site.data.variables.default.pageview source0=page.pageview -%} 2 | {%- assign _pageview = __return -%} 3 | 4 | 5 | {%- if page.layout == "home" -%} 6 | 7 | {%- if jekyll.environment != "development" -%} 8 | {%- if site.pageview.provider == 'leancloud' -%} 9 | {%- include pageview-providers/leancloud/home.html -%} 10 | {%- elsif site.pageview.provider == 'custom' -%} 11 | {%- include pageview-providers/custom/home.html -%} 12 | {%- endif -%} 13 | {%- endif -%} 14 | 15 | 16 | {%- elsif page.layout == "article" -%} 17 | {%- if _pageview -%} 18 | 19 | {%- if jekyll.environment != "development" and 20 | jekyll.environment != "beta" -%} 21 | {%- if site.pageview.provider == 'leancloud' -%} 22 | {%- include pageview-providers/leancloud/post.html -%} 23 | {%- elsif site.pageview.provider == 'custom' -%} 24 | {%- include pageview-providers/custom/post.html -%} 25 | {%- endif -%} 26 | {%- endif -%} 27 | 28 | {%- endif -%} 29 | {%- endif -%} 30 | -------------------------------------------------------------------------------- /docs/_includes/scripts/article.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var SOURCES = window.TEXT_VARIABLES.sources; 3 | window.Lazyload.js(SOURCES.jquery, function() { 4 | $(function() { 5 | var $this ,$scroll; 6 | var $articleContent = $('.js-article-content'); 7 | var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar'); 8 | var scroll = hasSidebar ? '.js-page-main' : 'html, body'; 9 | $scroll = $(scroll); 10 | 11 | $articleContent.find('.highlight').each(function() { 12 | $this = $(this); 13 | $this.attr('data-lang', $this.find('code').attr('data-lang')); 14 | }); 15 | $articleContent.find('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]').each(function() { 16 | $this = $(this); 17 | $this.append($('').html('')); 18 | }); 19 | $articleContent.on('click', '.anchor', function() { 20 | $scroll.scrollToAnchor('#' + $(this).parent().attr('id'), 400); 21 | }); 22 | }); 23 | }); 24 | })(); 25 | -------------------------------------------------------------------------------- /docs/_includes/scripts/aside/affix.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var SOURCES = window.TEXT_VARIABLES.sources; 3 | window.Lazyload.js(SOURCES.jquery, function() { 4 | var $window = $(window), $pageFooter = $('.js-page-footer'); 5 | var $pageAside = $('.js-page-aside'); 6 | var affix; 7 | var tocDisabled = false; 8 | var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar'); 9 | 10 | affix = $pageAside.affix({ 11 | offsetBottom: $pageFooter.outerHeight(), 12 | scrollTarget: hasSidebar ? '.js-page-main' : null, 13 | scroller: hasSidebar ? '.js-page-main' : null, 14 | scroll: hasSidebar ? $('.js-page-main').children() : null, 15 | disabled: tocDisabled 16 | }); 17 | 18 | $window.on('resize', window.throttle(function() { 19 | affix && affix.setOptions({ 20 | disabled: tocDisabled 21 | }); 22 | }, 100)); 23 | 24 | window.pageAsideAffix = affix; 25 | }); 26 | })(); 27 | -------------------------------------------------------------------------------- /docs/_includes/scripts/aside/toc.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var SOURCES = window.TEXT_VARIABLES.sources; 3 | var TOC_SELECTOR = window.TEXT_VARIABLES.site.toc.selectors; 4 | window.Lazyload.js(SOURCES.jquery, function() { 5 | var $window = $(window); 6 | var $articleContent = $('.js-article-content'); 7 | var $tocRoot = $('.js-toc-root'), $col2 = $('.js-col-aside'); 8 | var toc; 9 | var tocDisabled = false; 10 | var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar'); 11 | var hasToc = $articleContent.find(TOC_SELECTOR).length > 0; 12 | 13 | function disabled() { 14 | return $col2.css('display') === 'none' || !hasToc; 15 | } 16 | 17 | tocDisabled = disabled(); 18 | 19 | toc = $tocRoot.toc({ 20 | selectors: TOC_SELECTOR, 21 | container: $articleContent, 22 | scrollTarget: hasSidebar ? '.js-page-main' : null, 23 | scroller: hasSidebar ? '.js-page-main' : null, 24 | disabled: tocDisabled 25 | }); 26 | 27 | $window.on('resize', window.throttle(function() { 28 | tocDisabled = disabled(); 29 | toc && toc.setOptions({ 30 | disabled: tocDisabled 31 | }); 32 | }, 100)); 33 | 34 | }); 35 | })(); 36 | -------------------------------------------------------------------------------- /docs/_includes/scripts/common.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var $root = document.getElementsByClassName('root')[0]; 3 | if (window.hasEvent('touchstart')) { 4 | $root.dataset.isTouch = true; 5 | document.addEventListener('touchstart', function(){}, false); 6 | } 7 | })(); 8 | -------------------------------------------------------------------------------- /docs/_includes/scripts/components/lightbox.js: -------------------------------------------------------------------------------- 1 | {%- include scripts/utils/imagesLoad.js -%} 2 | (function () { 3 | var SOURCES = window.TEXT_VARIABLES.sources; 4 | window.Lazyload.js(SOURCES.jquery, function() { 5 | var $pageGalleryModal = $('.js-page-gallery-modal'); 6 | var $images = $('.page__content').find('img:not(.lightbox-ignore)'); 7 | window.imagesLoad($images).then(function() { 8 | /* global Gallery */ 9 | var pageGalleryModal = $pageGalleryModal.modal({ onChange: handleModalChange }); 10 | var gallery = null; 11 | var modalVisible = false; 12 | var i, items = [], image, item; 13 | if($images && $images.length > 0) { 14 | for (i = 0; i < $images.length; i++) { 15 | image = $images.eq(i); 16 | if (image.get(0).naturalWidth > 800) { 17 | items.push({ src: image.attr('src'), w: image.get(0).naturalWidth, h: image.get(0).naturalHeight, $el: image}); 18 | } 19 | } 20 | } 21 | 22 | if(items.length > 0) { 23 | gallery = new Gallery('.gallery', items); 24 | gallery.setOptions({ disabled: !modalVisible }); 25 | gallery.init(); 26 | for (i = 0; i < items.length; i++) { 27 | item = items[i]; 28 | item.$el && (item.$el.addClass('popup-image'), item.$el.on('click', (function() { 29 | var index = i; 30 | return function() { 31 | pageGalleryModal.show(); 32 | gallery.setOptions({ initialSlide: index }); 33 | gallery.refresh(true, { animation: false }); 34 | }; 35 | })())); 36 | } 37 | } 38 | 39 | function handleModalChange(visible) { 40 | modalVisible = visible; 41 | gallery && gallery.setOptions({ disabled: !modalVisible }); 42 | } 43 | 44 | $pageGalleryModal.on('click', function() { 45 | pageGalleryModal.hide(); 46 | }); 47 | }); 48 | }); 49 | })(); 50 | -------------------------------------------------------------------------------- /docs/_includes/scripts/components/search.js: -------------------------------------------------------------------------------- 1 | 2 | (function () { 3 | var SOURCES = window.TEXT_VARIABLES.sources; 4 | window.Lazyload.js(SOURCES.jquery, function() { 5 | // search panel 6 | var search = (window.search || (window.search = {})); 7 | var useDefaultSearchBox = window.useDefaultSearchBox === undefined ? 8 | true : window.useDefaultSearchBox ; 9 | 10 | var $searchModal = $('.js-page-search-modal'); 11 | var $searchToggle = $('.js-search-toggle'); 12 | var searchModal = $searchModal.modal({ onChange: handleModalChange, hideWhenWindowScroll: true }); 13 | var modalVisible = false; 14 | search.searchModal = searchModal; 15 | 16 | var $searchBox = null; 17 | var $searchInput = null; 18 | var $searchClear = null; 19 | 20 | function getModalVisible() { 21 | return modalVisible; 22 | } 23 | search.getModalVisible = getModalVisible; 24 | 25 | function handleModalChange(visible) { 26 | modalVisible = visible; 27 | if (visible) { 28 | search.onShow && search.onShow(); 29 | useDefaultSearchBox && $searchInput[0] && $searchInput[0].focus(); 30 | } else { 31 | search.onShow && search.onHide(); 32 | useDefaultSearchBox && $searchInput[0] && $searchInput[0].blur(); 33 | setTimeout(function() { 34 | useDefaultSearchBox && ($searchInput.val(''), $searchBox.removeClass('not-empty')); 35 | search.clear && search.clear(); 36 | window.pageAsideAffix && window.pageAsideAffix.refresh(); 37 | }, 400); 38 | } 39 | } 40 | 41 | $searchToggle.on('click', function() { 42 | modalVisible ? searchModal.hide() : searchModal.show(); 43 | }); 44 | // Char Code: 83 S, 191 / 45 | $(window).on('keyup', function(e) { 46 | if (!modalVisible && !window.isFormElement(e.target || e.srcElement) && (e.which === 83 || e.which === 191)) { 47 | modalVisible || searchModal.show(); 48 | } 49 | }); 50 | 51 | if (useDefaultSearchBox) { 52 | $searchBox = $('.js-search-box'); 53 | $searchInput = $searchBox.children('input'); 54 | $searchClear = $searchBox.children('.js-icon-clear'); 55 | search.getSearchInput = function() { 56 | return $searchInput.get(0); 57 | }; 58 | search.getVal = function() { 59 | return $searchInput.val(); 60 | }; 61 | search.setVal = function(val) { 62 | $searchInput.val(val); 63 | }; 64 | 65 | $searchInput.on('focus', function() { 66 | $(this).addClass('focus'); 67 | }); 68 | $searchInput.on('blur', function() { 69 | $(this).removeClass('focus'); 70 | }); 71 | $searchInput.on('input', window.throttle(function() { 72 | var val = $(this).val(); 73 | if (val === '' || typeof val !== 'string') { 74 | search.clear && search.clear(); 75 | } else { 76 | $searchBox.addClass('not-empty'); 77 | search.onInputNotEmpty && search.onInputNotEmpty(val); 78 | } 79 | }, 400)); 80 | $searchClear.on('click', function() { 81 | $searchInput.val(''); $searchBox.removeClass('not-empty'); 82 | search.clear && search.clear(); 83 | }); 84 | } 85 | }); 86 | })(); 87 | -------------------------------------------------------------------------------- /docs/_includes/scripts/components/sidebar.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var SOURCES = window.TEXT_VARIABLES.sources; 3 | 4 | window.Lazyload.js(SOURCES.jquery, function() { 5 | var $pageMask = $('.js-page-mask'); 6 | var $pageRoot = $('.js-page-root'); 7 | var $sidebarShow = $('.js-sidebar-show'); 8 | var $sidebarHide = $('.js-sidebar-hide'); 9 | 10 | function freeze(e) { 11 | if (e.target === $pageMask[0]) { 12 | e.preventDefault(); 13 | } 14 | } 15 | function stopBodyScrolling(bool) { 16 | if (bool === true) { 17 | window.addEventListener('touchmove', freeze, { passive: false }); 18 | } else { 19 | window.removeEventListener('touchmove', freeze, { passive: false }); 20 | } 21 | } 22 | 23 | $sidebarShow.on('click', function() { 24 | stopBodyScrolling(true); $pageRoot.addClass('show-sidebar'); 25 | }); 26 | $sidebarHide.on('click', function() { 27 | stopBodyScrolling(false); $pageRoot.removeClass('show-sidebar'); 28 | }); 29 | }); 30 | })(); 31 | -------------------------------------------------------------------------------- /docs/_includes/scripts/home.js: -------------------------------------------------------------------------------- 1 | /*(function () { 2 | 3 | })();*/ 4 | -------------------------------------------------------------------------------- /docs/_includes/scripts/lib/modal.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var SOURCES = window.TEXT_VARIABLES.sources; 3 | window.Lazyload.js(SOURCES.jquery, function() { 4 | var $body = $('body'), $window = $(window); 5 | var $pageRoot = $('.js-page-root'), $pageMain = $('.js-page-main'); 6 | var activeCount = 0; 7 | function modal(options) { 8 | var $root = this, visible, onChange, hideWhenWindowScroll = false; 9 | var scrollTop; 10 | function setOptions(options) { 11 | var _options = options || {}; 12 | visible = _options.initialVisible === undefined ? false : show; 13 | onChange = _options.onChange; 14 | hideWhenWindowScroll = _options.hideWhenWindowScroll; 15 | } 16 | function init() { 17 | setState(visible); 18 | } 19 | function setState(isShow) { 20 | if (isShow === visible) { 21 | return; 22 | } 23 | visible = isShow; 24 | if (visible) { 25 | activeCount++; 26 | scrollTop = $(window).scrollTop() || $pageMain.scrollTop(); 27 | $root.addClass('modal--show'); 28 | $pageMain.scrollTop(scrollTop); 29 | activeCount === 1 && ($pageRoot.addClass('show-modal'), $body.addClass('of-hidden')); 30 | hideWhenWindowScroll && window.hasEvent('touchstart') && $window.on('scroll', hide); 31 | $window.on('keyup', handleKeyup); 32 | } else { 33 | activeCount > 0 && activeCount--; 34 | $root.removeClass('modal--show'); 35 | $window.scrollTop(scrollTop); 36 | activeCount === 0 && ($pageRoot.removeClass('show-modal'), $body.removeClass('of-hidden')); 37 | hideWhenWindowScroll && window.hasEvent('touchstart') && $window.off('scroll', hide); 38 | $window.off('keyup', handleKeyup); 39 | } 40 | onChange && onChange(visible); 41 | } 42 | function show() { 43 | setState(true); 44 | } 45 | function hide() { 46 | setState(false); 47 | } 48 | function handleKeyup(e) { 49 | // Char Code: 27 ESC 50 | if (e.which === 27) { 51 | hide(); 52 | } 53 | } 54 | setOptions(options); 55 | init(); 56 | return { 57 | show: show, 58 | hide: hide, 59 | $el: $root 60 | }; 61 | } 62 | $.fn.modal = modal; 63 | }); 64 | })(); 65 | -------------------------------------------------------------------------------- /docs/_includes/scripts/lib/scroll-to.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var SOURCES = window.TEXT_VARIABLES.sources; 3 | window.Lazyload.js(SOURCES.jquery, function() { 4 | function scrollToAnchor(anchor, duration, callback) { 5 | var $root = this; 6 | $root.animate({ scrollTop: $(anchor).position().top }, duration, function() { 7 | window.history.replaceState(null, '', window.location.href.split('#')[0] + anchor); 8 | callback && callback(); 9 | }); 10 | } 11 | $.fn.scrollToAnchor = scrollToAnchor; 12 | }); 13 | })(); 14 | -------------------------------------------------------------------------------- /docs/_includes/scripts/lib/throttle.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | window.throttle = function(func, wait) { 3 | var args, result, thisArg, timeoutId, lastCalled = 0; 4 | 5 | function trailingCall() { 6 | lastCalled = new Date; 7 | timeoutId = null; 8 | result = func.apply(thisArg, args); 9 | } 10 | return function() { 11 | var now = new Date, 12 | remaining = wait - (now - lastCalled); 13 | 14 | args = arguments; 15 | thisArg = this; 16 | 17 | if (remaining <= 0) { 18 | clearTimeout(timeoutId); 19 | timeoutId = null; 20 | lastCalled = now; 21 | result = func.apply(thisArg, args); 22 | } else if (!timeoutId) { 23 | timeoutId = setTimeout(trailingCall, remaining); 24 | } 25 | return result; 26 | }; 27 | }; 28 | })(); 29 | -------------------------------------------------------------------------------- /docs/_includes/scripts/page.js: -------------------------------------------------------------------------------- 1 | /*(function () { 2 | 3 | })();*/ 4 | -------------------------------------------------------------------------------- /docs/_includes/scripts/utils/imagesLoad.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | window.imagesLoad = function(images) { 3 | images = images || document.getElementsByTagName('img'); 4 | var imagesCount = images.length, loadedCount = 0, image; 5 | var i, j, loaded = false, cbs = []; 6 | imagesCount < 1 && (loaded = true); 7 | for (i = 0; i < imagesCount; i++) { 8 | image = images[i]; 9 | image.complete ? handleImageLoad() : image.addEventListener('load', handleImageLoad); 10 | } 11 | function handleImageLoad() { 12 | loadedCount++; 13 | if (loadedCount === imagesCount) { 14 | loaded = true; 15 | if (cbs.length > 0) { 16 | for (j = 0; j < cbs.length; j++) { 17 | cbs[j](); 18 | } 19 | } 20 | } 21 | } 22 | return { 23 | then: function(cb) { 24 | cb && (loaded ? cb() : (cbs.push(cb))); 25 | } 26 | }; 27 | }; 28 | })(); 29 | -------------------------------------------------------------------------------- /docs/_includes/scripts/utils/utils.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | window.isArray = function(val) { 3 | return Object.prototype.toString.call(val) === '[object Array]'; 4 | }; 5 | window.isString = function(val) { 6 | return typeof val === 'string'; 7 | }; 8 | 9 | window.hasEvent = function(event) { 10 | return 'on'.concat(event) in window.document; 11 | }; 12 | 13 | window.isOverallScroller = function(node) { 14 | return node === document.documentElement || node === document.body || node === window; 15 | }; 16 | 17 | window.isFormElement = function(node) { 18 | var tagName = node.tagName; 19 | return tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA'; 20 | }; 21 | 22 | window.pageLoad = (function () { 23 | var loaded = false, cbs = []; 24 | window.addEventListener('load', function () { 25 | var i; 26 | loaded = true; 27 | if (cbs.length > 0) { 28 | for (i = 0; i < cbs.length; i++) { 29 | cbs[i](); 30 | } 31 | } 32 | }); 33 | return { 34 | then: function(cb) { 35 | cb && (loaded ? cb() : (cbs.push(cb))); 36 | } 37 | }; 38 | })(); 39 | })(); 40 | -------------------------------------------------------------------------------- /docs/_includes/scripts/variables.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-sources.html -%} 2 | {%- assign _sources = __return -%} 3 | 4 | {%- include snippets/get-nav-url.html path="/assets/search.js" -%} 5 | {%- assign _paths_search_js = __return -%} 6 | 7 | 36 | -------------------------------------------------------------------------------- /docs/_includes/search-providers/custom/search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/search-providers/default/search-data.js: -------------------------------------------------------------------------------- 1 | window.TEXT_SEARCH_DATA={ 2 | {%- for _collection in site.collections -%} 3 | {%- unless forloop.first -%},{%- endunless -%} 4 | '{{ _collection.label }}':[ 5 | {%- for _article in _collection.docs -%} 6 | {%- unless forloop.first -%},{%- endunless -%} 7 | {'title':{{ _article.title | jsonify }}, 8 | {%- include snippets/prepend-baseurl.html path=_article.url -%} 9 | {%- assign _url = __return -%} 10 | 'url':{{ _url | jsonify }}} 11 | {%- endfor -%} 12 | ] 13 | {%- endfor -%} 14 | }; 15 | -------------------------------------------------------------------------------- /docs/_includes/search-providers/default/search.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
{{ _locale_search }}
4 |
5 |
6 |
7 | 8 |
9 | 10 |
11 |
12 | 14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /docs/_includes/search-providers/google-custom-search-engine/search.html: -------------------------------------------------------------------------------- 1 | {%- if site.search.google.custom_search_engine_id -%} 2 |
3 |
4 |
5 | 7 |
8 |
9 |
10 | 20 | 21 | {%- endif -%} 22 | -------------------------------------------------------------------------------- /docs/_includes/search-providers/google-custom-search-engine/search.js: -------------------------------------------------------------------------------- 1 | var SOURCES = window.TEXT_VARIABLES.sources; 2 | window.Lazyload.js(SOURCES.jquery, function() { 3 | /* global google */ 4 | var search = (window.search || (window.search = {})); 5 | var searchBox, searchInput, clearIcon, searchModal; 6 | 7 | search.clear = function() { 8 | searchBox && searchBox.clearAllResults(); 9 | }; 10 | search.onShow = function() { 11 | searchInput && searchInput.focus(); 12 | }; 13 | search.onHide = function() { 14 | searchInput && searchInput.blur(); 15 | }; 16 | 17 | window.__gcse = { 18 | callback: function() { 19 | searchBox = google.search.cse.element.getElement('search-box'); 20 | searchInput = document.getElementById('gsc-i-id1'); 21 | clearIcon = document.getElementById('gs_cb50'); 22 | searchModal = search.searchModal; 23 | searchModal && searchModal.$el && searchModal.$el.on('click', function(e) { 24 | (e.target === this || e.target === clearIcon || e.target.className === 'gs-title') && searchModal.hide(); 25 | }); 26 | } 27 | }; 28 | var cx = '{{ site.search.google.custom_search_engine_id }}'; // Insert your own Custom Search Engine ID here 29 | var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; 30 | gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 31 | '//cse.google.com/cse.js?cx=' + cx; 32 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); 33 | }); 34 | -------------------------------------------------------------------------------- /docs/_includes/search.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-locale-string.html key='CANCEL' -%} 2 | {%- assign _locale_cancel = __return -%} 3 | {%- include snippets/get-locale-string.html key='SEARCH' -%} 4 | {%- assign _locale_search = __return -%} 5 | 6 | {%- if site.search.provider == 'google' -%} 7 | 8 | {%- endif -%} 9 | 10 | {%- if site.search.provider -%} 11 | 12 | {%- endif -%} 13 | 14 | {%- if site.search.provider == 'default' -%} 15 | {%- include search-providers/default/search.html -%} 16 | {%- elsif site.search.provider == 'google' -%} 17 | {%- include search-providers/google-custom-search-engine/search.html -%} 18 | {%- elsif site.search.provider == 'custom' -%} 19 | {%- include search-providers/custom/search.html -%} 20 | {%- endif -%} 21 | -------------------------------------------------------------------------------- /docs/_includes/sharing-providers/addthis.html: -------------------------------------------------------------------------------- 1 | 2 | {%- assign _SHARING_ADDTHIS_ID = site.sharing.addthis.id -%} 3 | 4 | {%- if _SHARING_ADDTHIS_ID -%} 5 | 7 |
8 | {%- endif -%} 9 | 10 | -------------------------------------------------------------------------------- /docs/_includes/sharing-providers/addtoany.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/_includes/sharing-providers/custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/sharing.html: -------------------------------------------------------------------------------- 1 | {%- if site.sharing.provider == 'addtoany' -%} 2 | {%- include sharing-providers/addtoany.html -%} 3 | {%- elsif site.sharing.provider == 'addthis' -%} 4 | {%- include sharing-providers/addthis.html -%} 5 | {%- elsif site.sharing.provider == 'custom' -%} 6 | {%- include sharing-providers/custom.html -%} 7 | {%- endif -%} 8 | -------------------------------------------------------------------------------- /docs/_includes/sidebar/toc.html: -------------------------------------------------------------------------------- 1 | {%- if page.sidebar.nav -%} 2 |
3 | {%- assign _sidebar_nav = site.data.navigation[page.sidebar.nav] -%} 4 | {%- if _sidebar_nav -%} 5 |
    6 | {%- for _item in _sidebar_nav -%} 7 |
  • {{ _item.title }}
    • 8 | {%- if _item.children -%} 9 | {%- for _child in _item.children -%} 10 | {%- include snippets/get-nav-url.html path=_child.url -%} 11 | {%- assign _nav_url = __return -%} 12 | {%- include snippets/get-nav-url.html path=page.url -%} 13 | {%- assign _page_url = __return -%} 14 | {%- if _nav_url == _page_url -%} 15 |
  • {{ _child.title }}
    • 16 | {%- else -%} 17 |
  • {{ _child.title }}
    • 18 | {%- endif -%} 19 | {%- endfor -%} 20 | {%- endif -%} 21 | {%- endfor -%} 22 |
23 | {%- endif -%} 24 |
25 | {%- endif -%} -------------------------------------------------------------------------------- /docs/_includes/snippets/assign.html: -------------------------------------------------------------------------------- 1 | {%- if include.source1 == nil -%} 2 | {%- if include.source0 == nil -%} 3 | {%- assign __return = include.target -%} 4 | {%- else -%} 5 | {%- assign __return = include.source0 -%} 6 | {%- endif -%} 7 | {%- else -%} 8 | {%- assign __return = include.source1 -%} 9 | {%- endif -%} 10 | -------------------------------------------------------------------------------- /docs/_includes/snippets/get-article-title.html: -------------------------------------------------------------------------------- 1 | {%- assign _title = include.article.title | default: layout.title -%} 2 | {%- assign _titles = include.article.titles | default: layout.titles -%} 3 | 4 | {%- if _title -%} 5 | {%- assign __return = _title -%} 6 | {%- elsif _titles -%} 7 | {%- include snippets/get-string-from-locale-config.html locale=_titles -%} 8 | {%- assign __return = __return -%} 9 | {%- else -%} 10 | {%- assign __return = nil -%} 11 | {%- endif -%} 12 | -------------------------------------------------------------------------------- /docs/_includes/snippets/get-lang.html: -------------------------------------------------------------------------------- 1 | {%- assign __return = site.data.variables.default.lang -%} 2 | {%- if page.lang -%} 3 | {%- assign __return = page.lang -%} 4 | {%- elsif site.lang -%} 5 | {%- assign __return = site.lang -%} 6 | {%- endif -%} 7 | -------------------------------------------------------------------------------- /docs/_includes/snippets/get-locale-string.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-lang.html -%} 2 | {%- assign _lang = __return -%} 3 | {%- assign _local_lang = site.data.locale[_lang] -%} 4 | {%- assign _local_lang_en = site.data.locale.en -%} 5 | {%- if _local_lang == nil -%} 6 | {%- assign _local_lang = _local_lang_en -%} 7 | {%- endif -%} 8 | {%- if _local_lang[include.key] -%} 9 | {%- assign __return = _local_lang[include.key] -%} 10 | {%- else -%} 11 | {%- assign __return = _local_lang_en[include.key] -%} 12 | {%- endif -%} 13 | -------------------------------------------------------------------------------- /docs/_includes/snippets/get-nav-url.html: -------------------------------------------------------------------------------- 1 | {%- assign _pre7 = include.path | slice: 0, 7 -%} 2 | {%- assign _pre8 = include.path | slice: 0, 8 -%} 3 | {%- if _pre7 == 'http://' or _pre8 == 'https://' -%} 4 | {%- assign __return = include.path -%} 5 | {%- else -%} 6 | {%- include snippets/prepend-baseurl.html path=include.path -%} 7 | {%- assign __return = __return -%} 8 | {%- endif -%} 9 | -------------------------------------------------------------------------------- /docs/_includes/snippets/get-sources.html: -------------------------------------------------------------------------------- 1 | {%- assign _sources = site.sources | default: site.data.variables.default.sources -%} 2 | {%- assign __return = site.data.variables.sources[_sources] -%} 3 | -------------------------------------------------------------------------------- /docs/_includes/snippets/get-string-from-locale-config.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/get-lang.html -%} 2 | {%- assign _lang = __return -%} 3 | {%- if include.locale[_lang] -%} 4 | {%- assign __return = include.locale[_lang] -%} 5 | {%- else -%} 6 | {%- assign __return = include.locale.en -%} 7 | {%- endif -%} 8 | -------------------------------------------------------------------------------- /docs/_includes/snippets/is_collection.html: -------------------------------------------------------------------------------- 1 | {%- assign _page_path_first_char = include.page.path | slice: 0, 1 -%} 2 | {%- if _page_path_first_char == '_' -%} 3 | {%- assign __return = true -%} 4 | {%- else -%} 5 | {%- assign __return = false -%} 6 | {%- endif -%} 7 | -------------------------------------------------------------------------------- /docs/_includes/snippets/page-url.html: -------------------------------------------------------------------------------- 1 | {%- include snippets/prepend-baseurl.html path=page.url -%} 2 | {{ __return | prepend: site.url }} -------------------------------------------------------------------------------- /docs/_includes/snippets/prepend-baseurl.html: -------------------------------------------------------------------------------- 1 | {%- assign _include_path_replace_index = include.path | replace: 'index.html', '' -%} 2 | {%- include snippets/prepend-path.html 3 | path=_include_path_replace_index 4 | prepend_path=site.baseurl -%} -------------------------------------------------------------------------------- /docs/_includes/snippets/prepend-path.html: -------------------------------------------------------------------------------- 1 | {%- assign __return = include.path | prepend: '/' | prepend: include.prepend_path | replace:'///','/' | replace:'//','/' -%} 2 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/behance.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/douban.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/flicker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/googleplus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/medium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/npm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/qq.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/telegram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/weibo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/weixin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/svg/icon/social/zhihu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/_includes/tags.html: -------------------------------------------------------------------------------- 1 | {%- assign _tag_max_size = 1 -%} 2 | {%- assign _tag_min_size = 1 -%} 3 | {%- assign _tag_cur_size = 1 -%} 4 | {%- assign _tags = site.tags | sort -%} 5 | {%- for _tag in _tags -%} 6 | {%- assign _tag_cur_size = _tag[1].size -%} 7 | {%- if _tag_cur_size > _tag_max_size -%} 8 | {%- assign _tag_max_size = _tag_cur_size -%} 9 | {%- endif -%} 10 | {%- if _tag_cur_size < _tag_min_size -%} 11 | {%- assign _tag_min_size = _tag_cur_size -%} 12 | {%- endif -%} 13 | {%- endfor -%} 14 | {%- assign _tag_gap_size = _tag_max_size | minus: _tag_min_size | plus: 1 | divided_by: 4 -%} 15 | {%- if _tag_gap_size < 1 -%} 16 | {%- assign _tag_gap_size = 1 -%} 17 | {%- endif -%} 18 |
19 |
    20 |
  • 21 | 24 |
    • 25 | {%- for _tag in _tags -%} 26 | {%- assign _tag_cur_size = _tag[1].size -%} 27 | {%- assign _tag_min_1 = _tag_min_size -%} 28 | {%- assign _tag_max_1 = _tag_min_1 | plus: _tag_gap_size -%} 29 | {%- assign _tag_min_2 = _tag_max_1 -%} 30 | {%- assign _tag_max_2 = _tag_min_2 | plus: _tag_gap_size -%} 31 | {%- assign _tag_min_3 = _tag_max_2 -%} 32 | {%- assign _tag_max_3 = _tag_min_3 | plus: _tag_gap_size -%} 33 | {%- assign _tag_min_4 = _tag_max_3 -%} 34 | {%- assign _tag_max_4 = _tag_min_4 | plus: _tag_gap_size -%} 35 | {%- if _tag_cur_size >= _tag_min_1 and _tag_cur_size < _tag_max_1 -%} 36 | {%- assign _c_index = 1 -%} 37 | {%- elsif _tag_cur_size >= _tag_min_2 and _tag_cur_size < _tag_max_2 -%} 38 | {%- assign _c_index = 2 -%} 39 | {%- elsif _tag_cur_size >= _tag_min_3 and _tag_cur_size < _tag_max_3 -%} 40 | {%- assign _c_index = 3 -%} 41 | {%- elsif _tag_cur_size >= _tag_min_4 and _tag_cur_size < _tag_max_4 -%} 42 | {%- assign _c_index = 4 -%} 43 | {%- else -%} 44 | {%- assign _c_index = 4 -%} 45 | {%- endif -%} 46 |
  • 49 |
    • 50 | {%- endfor -%} 51 |
52 |
53 | -------------------------------------------------------------------------------- /docs/_layouts/404.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: 404 4 | show_title: false 5 | --- 6 |
7 |
8 |

404

9 |

Page not found :(

10 |
11 |
12 | 13 | {{ content }} 14 | -------------------------------------------------------------------------------- /docs/_layouts/archive.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | titles: 4 | # @start locale config 5 | en : &EN Archive 6 | en-GB : *EN 7 | en-US : *EN 8 | en-CA : *EN 9 | en-AU : *EN 10 | zh-Hans : &ZH_HANS 归档 11 | zh : *ZH_HANS 12 | zh-CN : *ZH_HANS 13 | zh-SG : *ZH_HANS 14 | zh-Hant : &ZH_HANT 歸檔 15 | zh-TW : *ZH_HANT 16 | zh-HK : *ZH_HANT 17 | ko : &KO 아카이브 18 | ko-KR : *KO 19 | fr : &FR Archives 20 | fr-BE : *FR 21 | fr-CA : *FR 22 | fr-CH : *FR 23 | fr-FR : *FR 24 | fr-LU : *FR 25 | tr : &TR Arşivdekiler 26 | # @end locale config 27 | --- 28 | 29 |
30 | {%- include tags.html -%} 31 |
32 | {%- include article-list.html articles=site.posts type='brief' show_info=true reverse=true group_by='year' -%} 33 |
34 |
35 | 36 | 39 | 40 | {{ content }} 41 | -------------------------------------------------------------------------------- /docs/_layouts/article.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | type: article 4 | --- 5 | 6 | {%- include snippets/assign.html 7 | target = site.data.variables.default.page.sharing 8 | source0=layout.sharing source1=page.sharing -%} 9 | {%- assign _sharing = __return -%} 10 | 11 |
12 | {%- include article/top/custom.html -%} 13 | 14 |
{{ content }}
15 | 16 | {%- if _sharing -%} 17 | 18 | {%- endif -%} 19 | 20 |
21 | {%- include article-footer.html -%} 22 | {%- include article-section-navigator.html -%} 23 |
24 | 25 |
26 | 27 | 30 | -------------------------------------------------------------------------------- /docs/_layouts/articles.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | --- 4 | 5 | {%- assign _page_articles_data_source = page.articles.data_source | default: layout.articles.data_source -%} 6 | 7 | {%- if _page_articles_data_source -%} 8 | {%- assign _keys = _page_articles_data_source | split: '.' -%} 9 | {%- endif -%} 10 | 11 | {%- assign _articles = nil -%} 12 | {%- for _key in _keys -%} 13 | {%- if forloop.first -%} 14 | {%- case _key -%} 15 | {%- when 'site' -%} 16 | {%- assign _articles = site -%} 17 | {%- when 'page' -%} 18 | {%- assign _articles = page -%} 19 | {%- when 'layout' -%} 20 | {%- assign _articles = layout -%} 21 | {%- when 'paginator' -%} 22 | {%- assign _articles = paginator -%} 23 | {%- else -%} 24 | {%- assign _articles = site[_key] -%} 25 | {%- else -%} 26 | {%- endcase -%} 27 | {%- else -%} 28 | {%- assign _articles = _articles[_key] -%} 29 | {%- endif -%} 30 | {%- endfor -%} 31 | 32 | {%- assign _type = page.articles.type | default: layout.articles.type -%} 33 | 34 | {%- if _articles -%} 35 | 36 |
37 | 38 | {%- if _type == 'grid' -%} 39 | {%- if page.articles.size == 'sm' -%} 40 | {%- include article-list.html articles=_articles type='grid' size='sm' -%} 41 | {%- else -%} 42 | {%- include article-list.html articles=_articles type='grid' -%} 43 | {%- endif -%} 44 | 45 | {%- elsif _type == 'brief' -%} 46 | {%- include snippets/assign.html 47 | target=site.data.variables.default.page.articles.show_info 48 | source0=layout.articles.show_info source1=page.articles.show_info -%} 49 | {%- assign _show_info = __return -%} 50 | 51 | {%- include article-list.html articles=_articles type='brief' show_info=_show_info -%} 52 | 53 | {%- else -%} 54 | {%- include snippets/assign.html 55 | target=site.data.variables.default.page.articles.show_cover 56 | source0=layout.articles.show_cover source1=page.articles.show_cover -%} 57 | {%- assign _show_cover = __return -%} 58 | 59 | {%- include snippets/assign.html 60 | target=site.data.variables.default.page.articles.show_excerpt 61 | source0=layout.articles.show_excerpt source1=page.articles.show_excerpt -%} 62 | {%- assign _show_excerpt = __return -%} 63 | 64 | {%- include snippets/assign.html 65 | target=site.data.variables.default.page.articles.show_readmore 66 | source0=layout.articles.show_readmore source1=page.articles.show_readmore -%} 67 | {%- assign _show_readmore = __return -%} 68 | 69 | {%- include snippets/assign.html 70 | target=site.data.variables.default.page.articles.show_info 71 | source0=layout.articles.show_info source1=page.articles.show_info -%} 72 | {%- assign _show_info = __return -%} 73 | 74 | {%- assign _article_type = page.articles.article_type | default: layout.articles.article_type -%} 75 | {%- assign _cover_size = page.articles.cover_size | default: layout.articles.cover_size -%} 76 | {%- assign _excerpt_type = page.articles.excerpt_type | default: layout.articles.excerpt_type -%} 77 | 78 | {%- include article-list.html articles=_articles type='item' 79 | article_type=_article_type 80 | show_cover=_show_cover cover_size=_cover_size 81 | show_excerpt=_show_excerpt excerpt_type=_excerpt_type 82 | show_readmore=_show_readmore show_info=_show_info -%} 83 | 84 | {%- endif -%} 85 | 86 |
87 | {%- endif -%} 88 | 89 | {{ content }} 90 | -------------------------------------------------------------------------------- /docs/_layouts/base.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: none 3 | --- 4 | 5 | {%- include snippets/get-lang.html -%} 6 | 7 | 8 | {%- include analytics.html -%} 9 | {%- include head.html -%} 10 | 15 | {%- include scripts/variables.html -%} 16 | 17 | 18 |
19 | {{ content }} 20 |
21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/_layouts/home.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: articles 3 | titles: 4 | # @start locale config 5 | en : &EN Home 6 | en-GB : *EN 7 | en-US : *EN 8 | en-CA : *EN 9 | en-AU : *EN 10 | zh-Hans : &ZH_HANS 主页 11 | zh : *ZH_HANS 12 | zh-CN : *ZH_HANS 13 | zh-SG : *ZH_HANS 14 | zh-Hant : &ZH_HANT 主頁 15 | zh-TW : *ZH_HANT 16 | zh-HK : *ZH_HANT 17 | ko : &KO 홈 18 | ko-KR : *KO 19 | fr : &FR Accueil 20 | fr-BE : *FR 21 | fr-CA : *FR 22 | fr-CH : *FR 23 | fr-FR : *FR 24 | fr-LU : *FR 25 | tr : &TR Ana Sayfa 26 | # @end locale config 27 | show_title: false 28 | articles: 29 | data_source: paginator.posts 30 | article_type: BlogPosting 31 | show_cover: false 32 | show_excerpt: true 33 | show_readmore: true 34 | show_info: true 35 | --- 36 |
37 | {%- include paginator.html -%} 38 |
39 | 42 | 43 | {{ content }} 44 | -------------------------------------------------------------------------------- /docs/_layouts/none.html: -------------------------------------------------------------------------------- 1 | {{ content }} 2 | -------------------------------------------------------------------------------- /docs/_sass/additional/_alert.scss: -------------------------------------------------------------------------------- 1 | .article__content { 2 | p.success { 3 | padding: map-get($spacers, 2) map-get($spacers, 3); 4 | background-color: rgba($green, .1); 5 | border: 1px solid $green; 6 | border-radius: map-get($base, border-radius); 7 | } 8 | 9 | p.info { 10 | padding: map-get($spacers, 2) map-get($spacers, 3); 11 | background-color: rgba($blue, .1); 12 | border: 1px solid $blue; 13 | border-radius: map-get($base, border-radius); 14 | } 15 | 16 | p.warning { 17 | padding: map-get($spacers, 2) map-get($spacers, 3); 18 | background-color: rgba($yellow, .1); 19 | border: 1px solid $yellow; 20 | border-radius: map-get($base, border-radius); 21 | } 22 | 23 | p.error { 24 | padding: map-get($spacers, 2) map-get($spacers, 3); 25 | background-color: rgba($red, .1); 26 | border: 1px solid $red; 27 | border-radius: map-get($base, border-radius); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /docs/_sass/additional/_photo-frame.scss: -------------------------------------------------------------------------------- 1 | .article__content { 2 | img.shadow, .shadow > img { 3 | @include box-shadow(); 4 | } 5 | 6 | img.border, .border > img { 7 | border: 1px solid $border-color-l; 8 | } 9 | 10 | img.rounded, .rounded > img { 11 | border-radius: map-get($base, border-radius); 12 | } 13 | 14 | img.circle, .circle > img { 15 | border-radius: 50%; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/_sass/additional/_tag.scss: -------------------------------------------------------------------------------- 1 | .article__content { 2 | code.success { 3 | color: $text-color-function; 4 | background-color: $green; 5 | } 6 | 7 | code.info { 8 | color: $text-color-function; 9 | background-color: $blue; 10 | } 11 | 12 | code.warning { 13 | color: $text-color-function; 14 | background-color: $yellow; 15 | } 16 | 17 | code.error { 18 | color: $text-color-function; 19 | background-color: $red; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /docs/_sass/animate/_fade-in-down.scss: -------------------------------------------------------------------------------- 1 | @include keyframes(fade-in-down) { 2 | from { 3 | opacity: 0; 4 | @include transform(translateY(-2rem)); 5 | } 6 | to { 7 | opacity: 1; 8 | @include transform(translateY(0)); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /docs/_sass/animate/_fade-in-up.scss: -------------------------------------------------------------------------------- 1 | @include keyframes(fade-in-up) { 2 | from { 3 | opacity: 0; 4 | @include transform(translateY(2rem)); 5 | } 6 | to { 7 | opacity: 1; 8 | @include transform(translateY(0)); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /docs/_sass/animate/_fade-in.scss: -------------------------------------------------------------------------------- 1 | @include keyframes(fade-in) { 2 | from { 3 | opacity: 0; 4 | } 5 | to { 6 | opacity: 1; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/_sass/common/_classes.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable at-rule-name-space-after, at-rule-semicolon-space-before */ 2 | @charset "utf-8"; 3 | @import 4 | "common/classes/animation", 5 | "common/classes/transform", 6 | "common/classes/transition", 7 | "common/classes/user-select", 8 | 9 | "common/classes/clearfix", 10 | "common/classes/media", 11 | "common/classes/clickable", 12 | "common/classes/display", 13 | "common/classes/flex", 14 | "common/classes/horizontal-rules", 15 | "common/classes/pseudo", 16 | "common/classes/link", 17 | "common/classes/text", 18 | "common/classes/overflow", 19 | "common/classes/shadow", 20 | "common/classes/spacing", 21 | "common/classes/split-line", 22 | "common/classes/grid" 23 | ; 24 | /* stylelint-enable */ 25 | -------------------------------------------------------------------------------- /docs/_sass/common/_function.scss: -------------------------------------------------------------------------------- 1 | @function get-color-theme($color) { 2 | @if lightness($color) < 15% { 3 | @return "dark"; 4 | } @else { 5 | @return "light"; 6 | } 7 | } 8 | 9 | @function breakpoint-infix($name, $breakpoints: default) { 10 | @if $breakpoints == default { 11 | $breakpoints: $responsive; 12 | } 13 | $min: map-get($breakpoints, $name); 14 | @return if($min != 0, "#{$name}-", ""); 15 | } 16 | -------------------------------------------------------------------------------- /docs/_sass/common/_print.scss: -------------------------------------------------------------------------------- 1 | @media print { 2 | a { 3 | @include plain() { 4 | text-decoration: underline; 5 | } 6 | @include hover() { 7 | text-decoration: underline; 8 | } 9 | @include active() { 10 | text-decoration: underline; 11 | } 12 | } 13 | 14 | img, 15 | tr, 16 | pre, 17 | blockquote { 18 | page-break-inside: avoid; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /docs/_sass/common/_reset.scss: -------------------------------------------------------------------------------- 1 | @mixin block-elements { 2 | h1, 3 | h2, 4 | h3, 5 | h4, 6 | h5, 7 | h6, 8 | p, 9 | hr, 10 | blockquote, 11 | figure, 12 | pre, 13 | .highlighter-rouge, 14 | ul, 15 | ol, 16 | dl, 17 | table, 18 | .footnotes { 19 | @content; 20 | } 21 | } 22 | @mixin heading-elements { 23 | h1, h2, h3, h4, h5, h6 { 24 | @content; 25 | } 26 | } 27 | 28 | *, 29 | ::before, 30 | ::after { 31 | box-sizing: border-box; 32 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 33 | } 34 | 35 | /** 36 | * 1. Prevent adjustments of font size after orientation changes in iOS. 37 | **/ 38 | 39 | html { 40 | font-size: map-get($base, font-size-root); 41 | -webkit-text-size-adjust: 100%; /* 1 */ 42 | @media print { 43 | font-size: map-get($base, font-size-root-sm); 44 | } 45 | } 46 | 47 | body { 48 | padding: 0; 49 | margin: 0; 50 | font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family); 51 | ::-moz-selection { 52 | background: $select-color; 53 | } 54 | ::-webkit-selection { 55 | background: $select-color; 56 | } 57 | ::selection { 58 | background: $select-color; 59 | } 60 | } 61 | 62 | @include block-elements() { 63 | padding: 0; 64 | margin: map-get($spacers, 2) 0; 65 | } 66 | 67 | input, textarea, select, button { 68 | font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family); 69 | color: $text-color; 70 | } 71 | 72 | h1, 73 | h2, 74 | h3, 75 | h4, 76 | h5, 77 | h6, 78 | strong { 79 | font-weight: map-get($base, font-weight-bold); 80 | } 81 | 82 | h1 { 83 | font-size: map-get($base, font-size-h1); 84 | color: $text-color-d; 85 | @include media-breakpoint-down(md) { 86 | font-size: map-get($base, font-size-h1-sm); 87 | } 88 | } 89 | 90 | h2 { 91 | font-size: map-get($base, font-size-h2); 92 | color: $text-color-d; 93 | @include media-breakpoint-down(md) { 94 | font-size: map-get($base, font-size-h2-sm); 95 | } 96 | } 97 | 98 | h3 { 99 | font-size: map-get($base, font-size-h3); 100 | color: $text-color-d; 101 | @include media-breakpoint-down(md) { 102 | font-size: map-get($base, font-size-h3-sm); 103 | } 104 | } 105 | 106 | h4 { 107 | font-size: map-get($base, font-size-h4); 108 | color: $text-color; 109 | @include media-breakpoint-down(md) { 110 | font-size: map-get($base, font-size-h4-sm); 111 | } 112 | } 113 | 114 | h5 { 115 | font-size: map-get($base, font-size-h5); 116 | color: $text-color; 117 | @include media-breakpoint-down(md) { 118 | font-size: map-get($base, font-size-h5-sm); 119 | } 120 | } 121 | 122 | h6 { 123 | font-size: map-get($base, font-size-h6); 124 | color: $text-color-l; 125 | @include media-breakpoint-down(md) { 126 | font-size: map-get($base, font-size-h6-sm); 127 | } 128 | } 129 | 130 | a { 131 | font-weight: map-get($base, font-weight-bold); 132 | @include link-colors($main-color-1); 133 | } 134 | 135 | pre, code { 136 | font-family: map-get($base, font-family-code); 137 | } 138 | 139 | code { 140 | font-size: map-get($base, font-size-xs); 141 | line-height: map-get($base, line-height-sm); 142 | } 143 | 144 | figure > img { 145 | display: block; 146 | } 147 | 148 | figcaption { 149 | font-size: map-get($base, font-size-sm); 150 | } 151 | 152 | button { 153 | padding: 0; 154 | margin: 0; 155 | font-size: map-get($spacers, 3); 156 | cursor: pointer; 157 | background-color: transparent; 158 | border-width: 0; 159 | outline: none; 160 | } 161 | 162 | input { 163 | &::-ms-clear { 164 | display: none; 165 | } 166 | &:focus { 167 | outline: none; 168 | } 169 | } 170 | 171 | // mermaid 172 | .mermaidTooltip { 173 | display: none; 174 | } 175 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_animation.scss: -------------------------------------------------------------------------------- 1 | @mixin animation($value) { 2 | -webkit-animation: $value; 3 | animation: $value; 4 | } 5 | 6 | @mixin keyframes($name) { 7 | @-webkit-keyframes #{$name} { 8 | @content; 9 | } 10 | @keyframes #{$name} { 11 | @content; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::after { 3 | display: table; 4 | clear: both; 5 | content: ""; 6 | } 7 | } 8 | 9 | .clearfix { 10 | @include clearfix(); 11 | } 12 | 13 | .left { 14 | float: left; 15 | } 16 | 17 | .right { 18 | float: right; 19 | } 20 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_display.scss: -------------------------------------------------------------------------------- 1 | @each $breakpoint in map-keys($responsive) { 2 | @include media-breakpoint-up($breakpoint) { 3 | .d-#{breakpoint-infix($breakpoint)}none { 4 | display: none !important; 5 | } 6 | } 7 | } 8 | 9 | .d-print-none { 10 | @media print { 11 | display: none !important; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_grid.scss: -------------------------------------------------------------------------------- 1 | $grid-columns: 12; 2 | 3 | .grid-container { 4 | @include overflow(hidden); 5 | } 6 | .cell { 7 | min-width: 0; 8 | } 9 | 10 | @mixin make-cell($columns) { 11 | @if $columns == "auto" { 12 | @include flex(1 1 0); 13 | width: auto; 14 | } @else if $columns == "shrink" { 15 | @include flex(0 0 auto); 16 | width: auto; 17 | } @else if $columns == "stretch" { 18 | @include flex(1); 19 | } @else { 20 | @include flex(none); 21 | width: percentage($columns / $grid-columns); 22 | } 23 | } 24 | 25 | @mixin make-grid-cell($columns, $breakpoint) { 26 | @include media-breakpoint-up($breakpoint) { 27 | .cell--#{breakpoint-infix($breakpoint)}#{$columns} { 28 | @include make-cell($columns); 29 | } 30 | } 31 | } 32 | 33 | .grid { 34 | @include flexbox(); 35 | @include flex-wrap(wrap); 36 | & > { 37 | @each $breakpoint in map-keys($responsive) { 38 | @for $i from 1 through $grid-columns { 39 | @include make-grid-cell($i, $breakpoint); 40 | } 41 | @include make-grid-cell("auto", $breakpoint); 42 | @include make-grid-cell("shrink", $breakpoint); 43 | @include make-grid-cell("stretch", $breakpoint); 44 | } 45 | } 46 | } 47 | 48 | .grid--reverse { 49 | flex-direction: row-reverse; 50 | } 51 | 52 | @mixin make-grid() { 53 | $types: ("p"); 54 | $directions: ("x", "y", ""); 55 | $spacers: (0, 1, 2, 3, 4, 5); 56 | 57 | @each $type in $types { 58 | @each $direction in $directions { 59 | @each $spacer in $spacers { 60 | @if $direction == "" { 61 | .grid--#{$type}-#{$spacer} { 62 | @include make-spacing("m", "", $spacer, true); 63 | .cell { 64 | @include make-spacing($type, "", $spacer); 65 | } 66 | } 67 | } @else { 68 | .grid--#{$type}#{$direction}-#{$spacer} { 69 | @include make-spacing("m", $direction, $spacer, true); 70 | .cell { 71 | @include make-spacing($type, $direction, $spacer); 72 | } 73 | } 74 | } 75 | } 76 | } 77 | } 78 | } 79 | 80 | @include make-grid(); 81 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_horizontal-rules.scss: -------------------------------------------------------------------------------- 1 | @mixin horizontal-rules() { 2 | &::before { 3 | display: block; 4 | font-size: map-get($base, font-size-h2); 5 | color: $text-color-l; 6 | text-align: center; 7 | letter-spacing: map-get($spacers, 4); 8 | content: "..."; 9 | } 10 | } 11 | 12 | .horizontal-rules { 13 | @include horizontal-rules(); 14 | } 15 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_link.scss: -------------------------------------------------------------------------------- 1 | @mixin link-colors($clr, $hover-clr: default, $active-clr: default, $focus-clr: null, $theme: default, $ignore-path: false) { 2 | @include plain() { 3 | text-decoration: none; 4 | } 5 | @include hover() { 6 | text-decoration: underline; 7 | } 8 | @include active() { 9 | text-decoration: none; 10 | } 11 | @include clickable($clr, null, $hover-clr, null, $active-clr, null, $focus-clr, null, $theme, $ignore-path); 12 | } 13 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_media.scss: -------------------------------------------------------------------------------- 1 | @mixin media-breakpoint-down($name, $breakpoints: default) { 2 | @if $breakpoints == default { 3 | $breakpoints: $responsive; 4 | } 5 | @media (max-width: map-get($breakpoints, $name) - 1) { 6 | @content; 7 | } 8 | } 9 | 10 | @mixin media-breakpoint-up($name, $breakpoints: default) { 11 | @if $breakpoints == default { 12 | $breakpoints: $responsive; 13 | } 14 | @media (min-width: map-get($breakpoints, $name)) { 15 | @content; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_overflow.scss: -------------------------------------------------------------------------------- 1 | @mixin overflow($overflow: auto, $direction: default) { 2 | @if $direction == default { 3 | overflow: $overflow; 4 | } @else if $direction == "x" { 5 | @if $overflow == auto { 6 | overflow: hidden; 7 | } 8 | overflow-x: $overflow; 9 | } @else if $direction == "y" { 10 | @if $overflow == auto { 11 | overflow: hidden; 12 | } 13 | overflow-y: $overflow; 14 | } 15 | @if $overflow == auto { 16 | -webkit-overflow-scrolling: touch; 17 | } 18 | } 19 | 20 | .of-auto { 21 | @include overflow(auto); 22 | } 23 | 24 | .of-hidden { 25 | @include overflow(hidden); 26 | } 27 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_pseudo.scss: -------------------------------------------------------------------------------- 1 | @mixin plain() { 2 | &, 3 | &:link, 4 | &:visited { 5 | @content; 6 | } 7 | } 8 | 9 | @mixin hover() { 10 | .root[data-is-touch="false"] &:hover { 11 | @content; 12 | } 13 | } 14 | 15 | @mixin active() { 16 | .root[data-is-touch] &.active, 17 | .root[data-is-touch] &:active { 18 | @content; 19 | } 20 | } 21 | 22 | @mixin focus() { 23 | .root[data-is-touch] &.focus { 24 | @content; 25 | } 26 | } 27 | 28 | @mixin disabled() { 29 | &.disabled, 30 | &:disabled { 31 | @content; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($level: default, $color: default) { 2 | @if $color == default { 3 | $color: #000; 4 | } 5 | @if $level == 0 { 6 | box-shadow: none; 7 | } 8 | @if $level == 1 or $level == default { 9 | box-shadow: 0 4px 8px rgba($color, .23), 0 1px 3px rgba($color, .08), 0 6px 12px rgba($color, .02); 10 | } 11 | @if $level == 2 { 12 | box-shadow: 0 8px 16px rgba($color, .23), 0 2px 6px rgba($color, .08), 0 12px 24px rgba($color, .02); 13 | } 14 | } 15 | 16 | .box-shadow-1 { 17 | @include box-shadow(); 18 | } 19 | 20 | .box-shadow-2 { 21 | @include box-shadow(2); 22 | } 23 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_spacing.scss: -------------------------------------------------------------------------------- 1 | @mixin make-spacing($property, $side, $spacer, $negative: false) { 2 | 3 | $css_property: null; 4 | $css_sides: null; 5 | 6 | @if ($property == "m") { 7 | $css_property: "margin"; 8 | } @else if ($property == "p") { 9 | $css_property: "padding"; 10 | } 11 | 12 | @if ($side == "t") { 13 | $css_sides: ("top"); 14 | } 15 | @else if ($side == "b") { 16 | $css_sides: ("bottom"); 17 | } 18 | @else if ($side == "l") { 19 | $css_sides: ("left"); 20 | } 21 | @else if ($side == "r") { 22 | $css_sides: ("right"); 23 | } 24 | @else if ($side == "x") { 25 | $css_sides: ("left", "right"); 26 | } 27 | @else if ($side == "y") { 28 | $css_sides: ("top", "bottom"); 29 | } 30 | @else if ($side == "") { 31 | $css_sides: (""); 32 | } 33 | 34 | @each $side in $css_sides { 35 | @if ($spacer == "auto") { 36 | @if ($side == "") { 37 | #{$css_property}: auto; 38 | } @else { 39 | #{$css_property}-#{$side}: auto; 40 | } 41 | } @else { 42 | @if ($side == "") { 43 | @if ($negative == true) { 44 | #{$css_property}: - map-get($spacers, $spacer); 45 | } @else { 46 | #{$css_property}: map-get($spacers, $spacer); 47 | } 48 | } @else { 49 | @if ($negative == true) { 50 | #{$css_property}-#{$side}: - map-get($spacers, $spacer); 51 | } @else { 52 | #{$css_property}-#{$side}: map-get($spacers, $spacer); 53 | } 54 | } 55 | } 56 | } 57 | } 58 | 59 | @mixin make-spacings() { 60 | $propertys: ("m", "p"); 61 | $sides: ("t", "b", "l", "r", "x", "y", ""); 62 | $spacers: (0, 1, 2, 3, 4, 5); 63 | 64 | @each $property in $propertys { 65 | @each $side in $sides { 66 | @each $spacer in $spacers { 67 | .#{$property}#{$side}-#{$spacer} { 68 | @include make-spacing($property, $side, $spacer); 69 | } 70 | } 71 | } 72 | } 73 | 74 | @each $side in $sides { 75 | .m#{$side}-auto { 76 | @include make-spacing("m", $side, "auto"); 77 | } 78 | } 79 | } 80 | 81 | @include make-spacings(); 82 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_split-line.scss: -------------------------------------------------------------------------------- 1 | @mixin split-line($direction: default, $width: default, $color: default) { 2 | @if $direction == default { 3 | $direction: top; 4 | } 5 | @if $color == default { 6 | $color: $border-color-l; 7 | } 8 | @if $width == default { 9 | $width: 1px; 10 | } 11 | border: 0 solid $color; 12 | @if $direction == top { 13 | border-top-width: $width; 14 | } 15 | @if $direction == right { 16 | border-right-width: $width; 17 | } 18 | @if $direction == bottom { 19 | border-bottom-width: $width; 20 | } 21 | @if $direction == left { 22 | border-left-width: $width; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_text.scss: -------------------------------------------------------------------------------- 1 | @mixin text-light { 2 | color: $text-color-theme-light; 3 | h1, h2, h3 { 4 | color: $text-color-theme-light-d; 5 | } 6 | h4, h5 { 7 | color: $text-color-theme-light; 8 | } 9 | h6 { 10 | color: $text-color-theme-light-l; 11 | } 12 | a:not(.button) { 13 | @include link-colors($text-color-theme-light, $main-color-1); 14 | } 15 | } 16 | @mixin text-dark { 17 | color: $text-color-theme-dark; 18 | h1, h2, h3 { 19 | color: $text-color-theme-dark-d; 20 | } 21 | h4, h5 { 22 | color: $text-color-theme-dark; 23 | } 24 | h6 { 25 | color: $text-color-theme-dark-l; 26 | } 27 | a:not(.button) { 28 | @include link-colors($text-color-theme-dark, $main-color-1); 29 | } 30 | } 31 | 32 | .text--light { 33 | @include text-light(); 34 | } 35 | .text--dark { 36 | @include text-dark(); 37 | } 38 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($value) { 2 | -webkit-transform: $value; 3 | transform: $value; 4 | } 5 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_transition.scss: -------------------------------------------------------------------------------- 1 | @mixin transition($value) { 2 | -webkit-transition: $value; 3 | transition: $value; 4 | } 5 | -------------------------------------------------------------------------------- /docs/_sass/common/classes/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($value) { 2 | -webkit-user-select: $value; 3 | -moz-user-select: $value; 4 | -ms-user-select: $value; 5 | user-select: $value; 6 | } 7 | -------------------------------------------------------------------------------- /docs/_sass/common/components/_card.scss: -------------------------------------------------------------------------------- 1 | 2 | .card { 3 | max-width: 18rem; 4 | border-radius: map-get($base, border-radius); 5 | @include box-shadow(); 6 | @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function)); 7 | & > :first-child { 8 | border-top-left-radius: map-get($base, border-radius); 9 | border-top-right-radius: map-get($base, border-radius); 10 | } 11 | & > :last-child { 12 | border-bottom-right-radius: map-get($base, border-radius); 13 | border-bottom-left-radius: map-get($base, border-radius); 14 | } 15 | } 16 | 17 | .cell { 18 | & > .card { 19 | max-width: unset; 20 | } 21 | } 22 | 23 | .card__content { 24 | padding: map-get($spacers, 2) map-get($spacers, 3); 25 | } 26 | 27 | .card__header, .card__header > a { 28 | @include link-colors($text-color-d, $main-color-1); 29 | } 30 | 31 | .card__image { 32 | position: relative; 33 | width: 100%; 34 | & > img { 35 | display: block; 36 | width: 100%; 37 | height: auto; 38 | border-radius: inherit; 39 | } 40 | & > .overlay { 41 | position: absolute; 42 | width: 100%; 43 | max-height: 100%; 44 | padding: map-get($spacers, 2); 45 | a { 46 | text-decoration: none !important; 47 | } 48 | } 49 | & > .overlay, & > .overlay--top { 50 | top: 0; 51 | bottom: auto; 52 | border-top-left-radius: inherit; 53 | border-top-right-radius: inherit; 54 | border-bottom-right-radius: 0; 55 | border-bottom-left-radius: 0; 56 | } 57 | & > .overlay--bottom { 58 | top: auto; 59 | bottom: 0; 60 | border-top-left-radius: 0; 61 | border-top-right-radius: 0; 62 | border-bottom-right-radius: inherit; 63 | border-bottom-left-radius: inherit; 64 | } 65 | & > .overlay--full { 66 | top: 0; 67 | bottom: 0; 68 | } 69 | & > .overlay, & > .overlay--dark { 70 | @extend .text--dark; 71 | background-color: rgba(#000, .4); 72 | } 73 | & > .overlay--light { 74 | @extend .text--light; 75 | background: rgba(#fff, .4); 76 | } 77 | } 78 | 79 | .card--clickable { 80 | cursor: pointer; 81 | @include hover() { 82 | @include box-shadow(2); 83 | .card__image { 84 | & > img { 85 | height: inherit; 86 | } 87 | } 88 | } 89 | @include transition(map-get($clickable, transition)); 90 | } 91 | 92 | .card--flat { 93 | @include box-shadow(0); 94 | .card__image { 95 | & > img { 96 | border-radius: map-get($base, border-radius); 97 | } 98 | } 99 | .card__content { 100 | padding-top: 0; 101 | padding-left: 0; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /docs/_sass/common/components/_gallery.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | height: 100%; 3 | @include flexbox(); 4 | @include flex-direction(column); 5 | } 6 | 7 | .gallery__swiper { 8 | @include flex(1); 9 | } 10 | 11 | .gallery-item { 12 | @include flexbox(); 13 | @include align-items(center); 14 | @include justify-content(center); 15 | height: 100%; 16 | overflow: hidden; 17 | } 18 | 19 | .gallery-item__main { 20 | display: block; 21 | } 22 | -------------------------------------------------------------------------------- /docs/_sass/common/components/_hero.scss: -------------------------------------------------------------------------------- 1 | .hero { 2 | background-position: 50% 50%; 3 | @include flexbox(); 4 | @include flex-direction(column); 5 | @include justify-content(center); 6 | h1 { font-size: map-get($base, font-size-h1-xl); } 7 | h2 { font-size: map-get($base, font-size-h2-xl); } 8 | h3 { font-size: map-get($base, font-size-h3-xl); } 9 | h4 { font-size: map-get($base, font-size-h4-xl); } 10 | h5 { font-size: map-get($base, font-size-h5-xl); } 11 | h6 { font-size: map-get($base, font-size-h6-xl); } 12 | p { font-size: map-get($base, font-size-xl); } 13 | @include media-breakpoint-down(lg) { 14 | h1 { font-size: map-get($base, font-size-h1-lg); } 15 | h2 { font-size: map-get($base, font-size-h2-lg); } 16 | h3 { font-size: map-get($base, font-size-h3-lg); } 17 | h4 { font-size: map-get($base, font-size-h4-lg); } 18 | h5 { font-size: map-get($base, font-size-h5-lg); } 19 | h6 { font-size: map-get($base, font-size-h6-lg); } 20 | p { font-size: map-get($base, font-size-lg); } 21 | } 22 | @include media-breakpoint-down(md) { 23 | h1 { font-size: map-get($base, font-size-h1-sm); } 24 | h2 { font-size: map-get($base, font-size-h2-sm); } 25 | h3 { font-size: map-get($base, font-size-h3-sm); } 26 | h4 { font-size: map-get($base, font-size-h4-sm); } 27 | h5 { font-size: map-get($base, font-size-h5-sm); } 28 | h6 { font-size: map-get($base, font-size-h6-sm); } 29 | p { font-size: map-get($base, font-size); } 30 | } 31 | background-size: cover; 32 | 33 | } 34 | 35 | .hero--center { 36 | text-align: center; 37 | .menu { 38 | @extend .menu--center; 39 | } 40 | } 41 | 42 | .hero--light { 43 | @extend .text--light; 44 | } 45 | 46 | .hero--dark { 47 | @extend .text--dark; 48 | } 49 | 50 | .hero__content { 51 | margin: map-get($spacers, 5); 52 | @include media-breakpoint-down(lg) { 53 | margin: map-get($spacers, 5) map-get($spacers, 4); 54 | } 55 | @include media-breakpoint-down(md) { 56 | margin: map-get($spacers, 4) map-get($spacers, 3); 57 | } 58 | } 59 | 60 | .heros { 61 | & > .hero { 62 | margin: map-get($spacers, 5); 63 | @include media-breakpoint-down(lg) { 64 | margin: map-get($spacers, 3); 65 | } 66 | @include media-breakpoint-down(md) { 67 | margin: map-get($spacers, 2) 0; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /docs/_sass/common/components/_image.scss: -------------------------------------------------------------------------------- 1 | .image { 2 | max-width: 100%; 3 | @extend .image--md; 4 | } 5 | .image--md { 6 | width: map-get($image, width); 7 | } 8 | .image--xl { 9 | width: map-get($image, width-xl); 10 | } 11 | .image--lg { 12 | width: map-get($image, width-lg); 13 | } 14 | .image--sm { 15 | width: map-get($image, width-sm); 16 | } 17 | .image--xs { 18 | width: map-get($image, width-xs); 19 | } 20 | -------------------------------------------------------------------------------- /docs/_sass/common/components/_item.scss: -------------------------------------------------------------------------------- 1 | .item { 2 | @include flexbox(); 3 | @include media-breakpoint-down(md) { 4 | @include flex-direction(column); 5 | } 6 | } 7 | 8 | .item__image { 9 | margin-right: map-get($spacers, 3); 10 | & + .item__content { 11 | & > :first-child { 12 | margin-top: 0; 13 | & > :first-child { 14 | margin-top: 0; 15 | } 16 | } 17 | } 18 | @include media-breakpoint-down(md) { 19 | margin-right: 0; 20 | } 21 | } 22 | 23 | .item__content { 24 | @include flex(1); 25 | min-width: 0; 26 | } 27 | 28 | a > .item__header, a.item__header, .item__header > a { 29 | @include link-colors($text-color-d, $main-color-1); 30 | } 31 | 32 | .item__meta { 33 | color: $text-color-l; 34 | } 35 | 36 | .item__description { 37 | &, .article__content { 38 | font-size: map-get($base, font-size-sm); 39 | line-height: map-get($base, line-height); 40 | @include block-elements() { 41 | margin-top: map-get($spacers, 2); 42 | margin-bottom: map-get($spacers, 2); 43 | } 44 | @include heading-elements() { 45 | margin-top: map-get($spacers, 3); 46 | } 47 | h1, h2, h3 { 48 | color: $text-color; 49 | } 50 | h1, h2 { 51 | padding: 0; 52 | border: none; 53 | } 54 | h1 { 55 | font-size: map-get($base, font-size-h1-xs); 56 | } 57 | h2 { 58 | font-size: map-get($base, font-size-h2-xs); 59 | } 60 | h3 { 61 | font-size: map-get($base, font-size-h3-xs); 62 | } 63 | h4 { 64 | font-size: map-get($base, font-size-h4-xs); 65 | } 66 | h5 { 67 | font-size: map-get($base, font-size-h5-xs); 68 | } 69 | h6 { 70 | font-size: map-get($base, font-size-h6-xs); 71 | } 72 | img { 73 | max-height: 32rem; 74 | @include media-breakpoint-down(md) { 75 | max-height: 14rem; 76 | } 77 | } 78 | } 79 | } 80 | 81 | .items { 82 | & > .item { 83 | &:not(:last-child) { 84 | margin-bottom: map-get($spacers, 2); 85 | } 86 | } 87 | } 88 | 89 | .items--divided { 90 | & > .item { 91 | &:not(:first-child) { 92 | padding-top: map-get($spacers, 4); 93 | } 94 | &:not(:last-child) { 95 | padding-bottom: map-get($spacers, 4); 96 | @include split-line(bottom); 97 | } 98 | list-style-type: none; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /docs/_sass/common/components/_menu.scss: -------------------------------------------------------------------------------- 1 | @mixin menu-direction($direction: default) { 2 | @if $direction == default { 3 | $direction: "horizontal"; 4 | } 5 | @if $direction == "vertical" { 6 | @include flex-direction(column); 7 | } @else { 8 | @include flex-direction(row); 9 | } 10 | } 11 | 12 | @mixin menu($horizontal-spacer: default, $horizontal-item-vertical-spacer: default, $wrap: default) { 13 | @if $horizontal-spacer == default { 14 | $horizontal-spacer: map-get($menu, horizontal-spacer); 15 | } 16 | @if $horizontal-item-vertical-spacer == default { 17 | $horizontal-item-vertical-spacer: map-get($menu, horizontal-item-vertical-spacer); 18 | } 19 | @if $wrap == default { 20 | $wrap: wrap; 21 | } 22 | @include flexbox(); 23 | @include flex-wrap($wrap); 24 | margin-top: 0; 25 | margin-bottom: 0; 26 | & > li { 27 | @if $horizontal-item-vertical-spacer { 28 | margin-top: map-get($spacers, $horizontal-item-vertical-spacer); 29 | margin-bottom: map-get($spacers, $horizontal-item-vertical-spacer); 30 | } 31 | margin-right: map-get($spacers, $horizontal-spacer); 32 | list-style-type: none; 33 | &:last-child { 34 | margin-right: 0; 35 | } 36 | } 37 | } 38 | 39 | .menu { 40 | @include menu(); 41 | @include menu-direction(); 42 | @include align-items(center); 43 | } 44 | 45 | .menu--vertical { 46 | @include menu-direction("vertical"); 47 | @include align-items(normal); 48 | & > li { 49 | margin-right: 0; 50 | } 51 | } 52 | 53 | .menu--inline { 54 | @include inline-flex(); 55 | } 56 | 57 | .menu--center { 58 | @include justify-content(center); 59 | } 60 | 61 | .menu--nowrap { 62 | @include flex-wrap(nowrap); 63 | } 64 | 65 | .menu--grow { 66 | @include flex-grow(1); 67 | } 68 | -------------------------------------------------------------------------------- /docs/_sass/common/components/_modal.scss: -------------------------------------------------------------------------------- 1 | @mixin modal($z-index: default, $color: default, $background-color: default) { 2 | @if $z-index == default { 3 | $z-index: map-get($z-indexes, modal); 4 | } 5 | @if $color == default { 6 | $color: $text-color-theme-dark; 7 | } 8 | @if $background-color == default { 9 | $background-color: $mask-color; 10 | } 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: $z-index; 15 | width: 100%; 16 | height: 100%; 17 | color: $color; 18 | touch-action: none; 19 | background-color: $background-color; 20 | opacity: 0; 21 | @include transform(translate(100%, 0)); 22 | @include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function), 23 | transform 0s map-get($animation, duration) map-get($animation, timing-function)}); 24 | } 25 | @mixin modal--show() { 26 | opacity: 1; 27 | @include transform(translate(0, 0)); 28 | @include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function)}); 29 | } 30 | 31 | .modal { 32 | @include modal(); 33 | } 34 | .modal--show { 35 | @include modal--show(); 36 | } 37 | .modal--overflow { 38 | @include overflow(auto); 39 | } 40 | -------------------------------------------------------------------------------- /docs/_sass/common/components/_swiper.scss: -------------------------------------------------------------------------------- 1 | .swiper { 2 | position: relative; 3 | @include overflow(hidden); 4 | } 5 | 6 | .swiper__wrapper, .swiper__slide { 7 | width: 100%; 8 | height: 100%; 9 | } 10 | 11 | .swiper__wrapper { 12 | @include flexbox(); 13 | } 14 | 15 | .swiper__wrapper--animation { 16 | @include transition(transform map-get($animation, duration) map-get($animation, timing-function)); 17 | } 18 | 19 | .swiper__slide { 20 | @include flex-shrink(0); 21 | & > img { 22 | max-width: 100%; 23 | } 24 | } 25 | 26 | .swiper__button { 27 | position: absolute; 28 | top: 50%; 29 | @extend .button, .button--circle; 30 | @include transform(translate(0, -50%)); 31 | @include clickable($text-color-d, rgba($main-color-3, .4)); 32 | } 33 | 34 | .swiper--light .swiper__button { 35 | @include clickable($text-color-theme-light, rgba($main-color-theme-dark, .4)); 36 | } 37 | 38 | .swiper--dark .swiper__button { 39 | @include clickable($text-color-theme-dark, rgba($main-color-theme-light, .4)); 40 | } 41 | 42 | .swiper__button--prev { 43 | left: 10px; 44 | } 45 | 46 | .swiper__button--next { 47 | right: 10px; 48 | } 49 | -------------------------------------------------------------------------------- /docs/_sass/common/components/_toc.scss: -------------------------------------------------------------------------------- 1 | ul.toc { 2 | display: block; 3 | margin: 0; 4 | color: $text-color; 5 | list-style-type: none; 6 | & > li { 7 | margin: map-get($spacers, 1) / 2 0; 8 | a { 9 | display: inline-block; 10 | margin: map-get($spacers, 1) / 4 0; 11 | text-decoration: none !important; 12 | } 13 | } 14 | .toc-h1, 15 | .toc-h2, 16 | .toc-h3, 17 | .toc-h4, 18 | .toc-h5, 19 | .toc-h6 { 20 | a { 21 | @include link-colors($text-color, $main-color-1); 22 | } 23 | &.active { 24 | a { 25 | @include link-colors($main-color-1); 26 | } 27 | } 28 | } 29 | 30 | .toc-h2, 31 | .toc-h3, 32 | .toc-h4, 33 | .toc-h5, 34 | .toc-h6 { 35 | &, a { 36 | font-size: map-get($base, font-size-xs); 37 | font-weight: map-get($base, font-weight); 38 | line-height: map-get($base, line-height-xs); 39 | } 40 | } 41 | .toc-h1 { 42 | @include split-line(bottom); 43 | padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0; 44 | margin-bottom: map-get($spacers, 2); 45 | color: $text-color-d; 46 | &, a { 47 | font-size: map-get($base, font-size-sm); 48 | font-weight: map-get($base, font-weight-bold); 49 | line-height: map-get($base, line-height-sm); 50 | } 51 | a { 52 | @include link-colors($text-color-d, $main-color-1); 53 | } 54 | } 55 | .toc-h2 { 56 | &, a { 57 | font-weight: map-get($base, font-weight-bold); 58 | } 59 | } 60 | .toc-h3 { 61 | margin-left: map-get($spacers, 3); 62 | } 63 | .toc-h4 { 64 | margin-left: map-get($spacers, 3) * 2; 65 | } 66 | .toc-h5, 67 | .toc-h6 { 68 | margin-left: map-get($spacers, 3) * 3; 69 | } 70 | .toc-h6 { 71 | color: $text-color-l; 72 | a { 73 | @include link-colors($text-color-l, $main-color-1); 74 | } 75 | } 76 | } 77 | 78 | ul.toc--ellipsis { 79 | & > li { 80 | @include overflow(hidden); 81 | text-overflow: ellipsis; 82 | white-space: nowrap; 83 | } 84 | } 85 | 86 | ul.toc--navigator { 87 | & > li { 88 | a { 89 | padding-left: map-get($spacers, 2); 90 | margin: map-get($spacers, 1) 0; 91 | } 92 | &.active { 93 | a { 94 | margin-left: -4px; 95 | @include split-line(left, 4px, $main-color-1); 96 | } 97 | } 98 | } 99 | .toc-h2, 100 | .toc-h3, 101 | .toc-h4 { 102 | color: $text-color-l; 103 | a { 104 | @include link-colors($text-color-l); 105 | } 106 | } 107 | .toc-h1 { 108 | &, a { 109 | font-size: map-get($base, font-size); 110 | line-height: map-get($base, line-height); 111 | } 112 | color: $text-color; 113 | a { 114 | @include link-colors($text-color-d); 115 | } 116 | } 117 | .toc-h2 { 118 | &, a { 119 | font-size: map-get($base, font-size-sm); 120 | font-weight: map-get($base, font-weight-bold); 121 | line-height: map-get($base, line-height-sm); 122 | } 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /docs/_sass/components/_article-footer.scss: -------------------------------------------------------------------------------- 1 | .article__footer { 2 | margin: map-get($spacers, 4) 0; 3 | font-size: map-get($base, font-size-sm); 4 | } 5 | 6 | .article__license, .article__subscribe { 7 | a { 8 | @include link-colors($text-color, $main-color-1); 9 | } 10 | } 11 | 12 | .article__license { 13 | color: $text-color-l; 14 | img { 15 | height: map-get($base, font-size) * 1.6; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/_sass/components/_article-header.scss: -------------------------------------------------------------------------------- 1 | .article__header { 2 | margin-top: map-get($spacers, 5); 3 | margin-bottom: map-get($spacers, 4); 4 | @include media-breakpoint-down(md) { 5 | margin-top: map-get($spacers, 4); 6 | } 7 | header, h1 { 8 | display: inline; 9 | } 10 | h1 { 11 | word-wrap: break-word; 12 | } 13 | .split-space { 14 | @include user-select(none); 15 | } 16 | .edit-on-github { 17 | text-decoration: none !important; 18 | } 19 | } 20 | 21 | .article__header--overlay { 22 | .overlay { 23 | min-height: 36rem; 24 | padding-top: map-get($spacers, 5) * 2; 25 | padding-bottom: map-get($spacers, 5) * 2; 26 | @include media-breakpoint-down(md) { 27 | min-height: 29rem; 28 | padding-top: map-get($spacers, 5); 29 | padding-bottom: map-get($spacers, 5); 30 | } 31 | } 32 | .overlay__excerpt { 33 | font-size: map-get($base, font-size-h3-xl); 34 | @include media-breakpoint-down(lg) { 35 | font-size: map-get($base, font-size-h3-lg); 36 | } 37 | @include media-breakpoint-down(md) { 38 | font-size: map-get($base, font-size-h3-sm); 39 | } 40 | font-weight: map-get($base, font-weight-bold); 41 | } 42 | 43 | .article__header { 44 | margin-top: 0; 45 | } 46 | } 47 | 48 | .article__header--cover { 49 | width: 100%; 50 | } 51 | -------------------------------------------------------------------------------- /docs/_sass/components/_article-info.scss: -------------------------------------------------------------------------------- 1 | .article__info { 2 | font-size: map-get($base, font-size-sm); 3 | color: $text-color-l; 4 | .left-col { 5 | float: left; 6 | @include media-breakpoint-down(md) { 7 | float: none; 8 | } 9 | } 10 | .right-col { 11 | float: right; 12 | margin-left: map-get($button, padding-x-sm); 13 | @include media-breakpoint-down(md) { 14 | float: none; 15 | } 16 | & > li { 17 | &:not(:last-child) { 18 | @include split-line(right, default, $text-color-l); 19 | padding-right: map-get($spacers, 2); 20 | margin-right: map-get($spacers, 2); 21 | line-height: map-get($base, line-height-xs); 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /docs/_sass/components/_article-list.scss: -------------------------------------------------------------------------------- 1 | .article-list { 2 | .item__meta { 3 | padding: 0 map-get($spacers, 3) 0 0; 4 | font-family: map-get($base, font-family-code); 5 | font-size: map-get($base, font-size-sm); 6 | white-space: nowrap; 7 | } 8 | &.grid--sm { 9 | .card__header { 10 | overflow: hidden; 11 | text-overflow: ellipsis; 12 | white-space: nowrap; 13 | } 14 | } 15 | } 16 | .article-list__group-header { 17 | margin-top: map-get($spacers, 3); 18 | } 19 | -------------------------------------------------------------------------------- /docs/_sass/components/_author-links.scss: -------------------------------------------------------------------------------- 1 | .author-links { 2 | & > ul { 3 | margin: 0; 4 | & > li > { 5 | .mail-button { 6 | @include clickable($text-color-1, $mail-color); 7 | } 8 | .facebook-button { 9 | @include clickable($text-color-1, $facebook-color); 10 | } 11 | .twitter-button { 12 | @include clickable($text-color-1, $twitter-color); 13 | } 14 | .weibo-button { 15 | @include clickable($text-color-1, $weibo-color); 16 | } 17 | .googlepluse-button { 18 | @include clickable($text-color-1, $google-plus-color); 19 | } 20 | .telegram-button { 21 | @include clickable($text-color-1, $telegram-color); 22 | } 23 | .medium-button { 24 | @include clickable($text-color-1, $medium-color); 25 | } 26 | .zhihu-button { 27 | @include clickable($text-color-1, $zhihu-color); 28 | } 29 | .douban-button { 30 | @include clickable($text-color-1, $douban-color); 31 | } 32 | .linkedin-button { 33 | @include clickable($text-color-1, $linkedin-color); 34 | } 35 | .github-button { 36 | @include clickable($text-color-1, $github-color); 37 | } 38 | .npm-button { 39 | @include clickable($text-color-1, $npm-color); 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /docs/_sass/components/_author-profile.scss: -------------------------------------------------------------------------------- 1 | .author-profile { 2 | max-width: 25rem; 3 | padding: map-get($spacers, 2) map-get($spacers, 3); 4 | margin: map-get($spacers, 4) 0; 5 | font-size: map-get($base, font-size-sm); 6 | background-color: $text-background-color; 7 | @include media-breakpoint-down(md) { 8 | text-align: center; 9 | } 10 | } 11 | .author-profile__avatar { 12 | width: 5rem; 13 | height: 5rem; 14 | margin-top: map-get($spacers, 2); 15 | border-radius: 50%; 16 | } 17 | .author-profile__name { 18 | font-size: map-get($base, font-size-lg); 19 | font-weight: map-get($base, font-weight-bold); 20 | a { 21 | @include link-colors($text-color, $main-color-1); 22 | } 23 | } 24 | .author-profile__links { 25 | @include overflow(auto); 26 | } 27 | -------------------------------------------------------------------------------- /docs/_sass/components/_extensions.scss: -------------------------------------------------------------------------------- 1 | .extensions { 2 | margin: map-get($spacers, 3) 0; 3 | @extend .d-print-none; 4 | } 5 | 6 | .extensions--video, .extensions--slide, .extensions--demo { 7 | position: relative; 8 | width: 100%; 9 | padding: 0; 10 | & > iframe { 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | width: 100%; 15 | height: 100%; 16 | } 17 | } 18 | 19 | .extensions--video { 20 | padding-top: percentage(315 / 560); 21 | } 22 | 23 | .extensions--slide { 24 | padding-top: percentage(487 / 599); 25 | } 26 | 27 | .extensions--demo { 28 | min-height: 340px; 29 | padding-top: percentage(315 / 560); 30 | } 31 | 32 | .extensions--audio { 33 | display: block; 34 | max-width: 100% !important; 35 | } 36 | -------------------------------------------------------------------------------- /docs/_sass/components/_footer.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Site Info 3 | */ 4 | 5 | .footer { 6 | @include flexbox(); 7 | @include align-items(center); 8 | color: $footer-text-color; 9 | background: $footer-background; 10 | a { 11 | @include link-colors ($footer-text-color, $main-color-1); 12 | } 13 | .site-info { 14 | font-size: map-get($base, font-size-xs); 15 | text-align: center; 16 | .menu { 17 | line-height: map-get($base, line-height-xs); 18 | & > * { 19 | &:not(:last-child) { 20 | @include split-line(right, default, $footer-text-color); 21 | padding-right: map-get($spacers, 1); 22 | margin-right: map-get($spacers, 1); 23 | } 24 | } 25 | } 26 | } 27 | } 28 | .footer__author-links { 29 | @include overflow(auto); 30 | .author-links { 31 | text-align: center; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /docs/_sass/components/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | background: $header-background; 3 | a { 4 | font-weight: map-get($base, font-weight); 5 | text-decoration: none !important; 6 | @include link-colors($header-text-color, $main-color-1); 7 | } 8 | .main { 9 | @include flexbox(); 10 | @include media-breakpoint-down(md) { 11 | @include flex-direction(column); 12 | } 13 | } 14 | } 15 | 16 | .header--dark { 17 | @extend .text--dark; 18 | background: rgba(#000, .15); 19 | .navigation__item--active { 20 | &::after { 21 | @include split-line(bottom, 4px, $text-color-theme-dark); 22 | } 23 | } 24 | } 25 | 26 | .header--light { 27 | @extend .text--light; 28 | background: rgba(#fff, .15); 29 | .navigation__item--active { 30 | &::after { 31 | @include split-line(bottom, 4px, $text-color-theme-light); 32 | } 33 | } 34 | } 35 | 36 | .header__title { 37 | @include menu(3, 0); 38 | @include align-items(center); 39 | @include flex-wrap(nowrap); 40 | @include flex(1); 41 | height: map-get($layout, header-height); 42 | margin-right: map-get($spacers, 3); 43 | white-space: nowrap; 44 | @include media-breakpoint-down(md) { 45 | height: auto; 46 | margin-right: 0; 47 | } 48 | & > .header__brand { 49 | @include flex(1); 50 | @include media-breakpoint-down(md) { 51 | height: map-get($layout, header-height-sm); 52 | } 53 | } 54 | & > .search-button { 55 | display: none; 56 | margin-left: map-get($spacers, 2); 57 | @include media-breakpoint-down(md) { 58 | @include flexbox(); 59 | } 60 | } 61 | } 62 | 63 | .header__brand { 64 | @include flexbox(); 65 | @include align-items(center); 66 | & > svg { 67 | width: map-get($base, font-size-h4) * 1.6; 68 | height: map-get($base, font-size-h4) * 1.6; 69 | margin-right: map-get($spacers, 3); 70 | vertical-align: middle; 71 | @include media-breakpoint-down(md) { 72 | width: map-get($base, font-size-h4) * 1.2; 73 | height: map-get($base, font-size-h4) * 1.2; 74 | } 75 | } 76 | & > a { 77 | display: inline-block; 78 | font-size: map-get($base, font-size-h4); 79 | @include media-breakpoint-down(md) { 80 | font-size: map-get($base, font-size-h4-small); 81 | } 82 | } 83 | } 84 | 85 | .navigation { 86 | @include overflow(auto, "x"); 87 | & > ul { 88 | height: map-get($layout, header-height); 89 | padding-bottom: 0; 90 | margin: 0; 91 | @include media-breakpoint-down(md) { 92 | padding-bottom: 4px; 93 | margin: -4px 0 0 0; 94 | } 95 | @include menu(3, 2, nowrap); 96 | @include align-items(center); 97 | @include media-breakpoint-down(md) { 98 | height: auto; 99 | } 100 | .search-button { 101 | @include media-breakpoint-down(md) { 102 | display: none; 103 | } 104 | } 105 | } 106 | } 107 | 108 | .navigation__item { 109 | &::after { 110 | display: block; 111 | margin-bottom: -4px; 112 | content: ""; 113 | @include split-line(bottom, 4px, transparent); 114 | } 115 | } 116 | .navigation__item--active { 117 | a { 118 | @include link-colors($main-color-1, $main-color-1); 119 | } 120 | &::after { 121 | @include split-line(bottom, 4px, $main-color-1); 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /docs/_sass/components/_lightbox.scss: -------------------------------------------------------------------------------- 1 | .popup-image { 2 | cursor: pointer; 3 | @include hover() { 4 | @include box-shadow(2); 5 | } 6 | @include transition(map-get($clickable, transition)); 7 | } 8 | -------------------------------------------------------------------------------- /docs/_sass/components/_main.scss: -------------------------------------------------------------------------------- 1 | .main { 2 | width: 100%; 3 | max-width: map-get($layout, content-max-width); 4 | padding: 0 map-get($spacers, 5); 5 | margin: 0 auto; 6 | @include media-breakpoint-down(lg) { 7 | padding: 0 map-get($spacers, 4); 8 | } 9 | @include media-breakpoint-down(md) { 10 | padding: 0 map-get($spacers, 3); 11 | } 12 | } 13 | 14 | .has-aside { 15 | .main { 16 | max-width: map-get($layout, content-max-width) + map-get($layout, aside-width); 17 | @include media-breakpoint-down(lg) { 18 | max-width: map-get($layout, content-max-width); 19 | } 20 | } 21 | } 22 | 23 | .full-width { 24 | .main { 25 | width: 100%; 26 | max-width: 100%; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /docs/_sass/components/_tags.scss: -------------------------------------------------------------------------------- 1 | .site-tags { 2 | .tag-button { 3 | @include clickable($text-color-3, $main-color-3, default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2); 4 | & > .tag-button__count { 5 | display: inline-block; 6 | margin-left: map-get($spacers, 1); 7 | font-size: map-get($base, font-size-xs); 8 | line-height: 1; 9 | vertical-align: top; 10 | } 11 | } 12 | .tag-button-1 { 13 | @include clickable($text-color-1, rgba($main-color-1, .4), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2); 14 | } 15 | .tag-button-2 { 16 | @include clickable($text-color-1, rgba($main-color-1, .55), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2); 17 | } 18 | .tag-button-3 { 19 | @include clickable($text-color-1, rgba($main-color-1, .7), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2); 20 | } 21 | .tag-button-4 { 22 | @include clickable($text-color-1, rgba($main-color-1, .9), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /docs/_sass/custom.scss: -------------------------------------------------------------------------------- 1 | /* start custom scss snippet */ 2 | 3 | /* end custom scss snippet */ 4 | -------------------------------------------------------------------------------- /docs/_sass/layout/_404.scss: -------------------------------------------------------------------------------- 1 | .layout--404 { 2 | .sign { 3 | display: table; 4 | margin: map-get($spacers, 4) auto; 5 | margin-top: map-get($spacers, 5); 6 | h1 { 7 | font-size: map-get($base, font-size-xl) * 4; 8 | line-height: 1; 9 | } 10 | p { 11 | font-size: map-get($base, font-size-xl) * 1.2; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /docs/_sass/layout/_archive.scss: -------------------------------------------------------------------------------- 1 | .layout--archive { 2 | & > .layout--archive__result { 3 | margin: map-get($spacers, 4) 0; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /docs/_sass/layout/_article.scss: -------------------------------------------------------------------------------- 1 | .article__sharing { 2 | margin: map-get($spacers, 4) 0; 3 | } 4 | .article__section-navigator { 5 | padding-top: map-get($spacers, 3); 6 | margin: map-get($spacers, 4) 0 map-get($spacers, 3) 0; 7 | word-wrap: break-word; 8 | @include split-line(top, 4px); 9 | & > .previous, & > .next { 10 | width: 50%; 11 | & > span { 12 | font-weight: map-get($base, font-weight-bold); 13 | color: $text-color-l; 14 | } 15 | & > a { 16 | display: block; 17 | @include link-colors($text-color, $main-color-1); 18 | } 19 | } 20 | & > .previous { 21 | float: left; 22 | padding-right: map-get($spacers, 2); 23 | } 24 | & > .next { 25 | float: right; 26 | padding-left: map-get($spacers, 2); 27 | text-align: right; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /docs/_sass/layout/_articles.scss: -------------------------------------------------------------------------------- 1 | .layout--articles { 2 | margin: map-get($spacers, 4) 0; 3 | margin-top: map-get($spacers, 5); 4 | @include media-breakpoint-down(md) { 5 | margin-top: map-get($spacers, 4); 6 | } 7 | .card__header { 8 | font-size: map-get($base, font-size); 9 | } 10 | .card__image { 11 | & > .overlay { 12 | &, .card__header { 13 | font-size: map-get($base, font-size-sm); 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/_sass/layout/_base.scss: -------------------------------------------------------------------------------- 1 | .icon { 2 | display: block; 3 | > svg { 4 | display: block; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /docs/_sass/layout/_home.scss: -------------------------------------------------------------------------------- 1 | .layout--home { 2 | .pagination { 3 | margin: map-get($spacers, 4) 0; 4 | } 5 | .pagination__menu { 6 | max-width: 100%; 7 | @include overflow(auto); 8 | } 9 | .pagination__omit { 10 | color: $text-color-l; 11 | } 12 | .items { 13 | margin-top: map-get($spacers, 4) * 1.5; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /docs/_sass/layout/_landing.scss: -------------------------------------------------------------------------------- 1 | .layout--landing { 2 | .heros { 3 | max-width: map-get($layout, content-max-width) * 2; 4 | margin-right: auto; 5 | margin-left: auto; 6 | } 7 | .hero { 8 | img { 9 | display: block; 10 | width: 100%; 11 | margin: 0 auto; 12 | } 13 | } 14 | .hero__content { 15 | margin-bottom: 0; 16 | } 17 | .hero__cover { 18 | max-width: map-get($layout, content-max-width); 19 | } 20 | .hero__cover--full-width { 21 | max-width: none; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/_sass/layout/_page.scss: -------------------------------------------------------------------------------- 1 | body, 2 | html, 3 | .root, 4 | .layout--page { 5 | height: 100%; 6 | } 7 | 8 | .layout--page { 9 | &.layout--page--sidebar { 10 | .page__viewport, 11 | .page__grid { 12 | height: 100%; 13 | } 14 | @include media-breakpoint-down(lg) { 15 | .page__main { 16 | @include overflow(unset); 17 | } 18 | } 19 | } 20 | } 21 | 22 | .page__main { 23 | height: 100%; 24 | color: $text-color; 25 | .col-aside { 26 | display: none; 27 | & > aside { 28 | position: absolute; 29 | width: map-get($layout, aside-width); 30 | @include overflow(hidden); 31 | } 32 | } 33 | } 34 | 35 | .page__main-inner { 36 | position: relative; 37 | @include flexbox(); 38 | @include flex-direction(column); 39 | min-height: 100%; 40 | background-color: $background-color; 41 | } 42 | 43 | .page__content { 44 | @include flex(1); 45 | width: 100%; 46 | margin: 0 auto; 47 | @media print { 48 | padding-bottom: 0; 49 | } 50 | } 51 | .hide-footer { 52 | .page__content { 53 | padding-bottom: 0; 54 | } 55 | } 56 | 57 | .page__comments { 58 | margin: map-get($spacers, 4) 0; 59 | } 60 | 61 | .page__aside { 62 | .toc-aside { 63 | padding: map-get($spacers, 5) 0 map-get($spacers, 3) map-get($spacers, 5); 64 | } 65 | } 66 | 67 | .page__actions { 68 | position: fixed; 69 | bottom: map-get($spacers, 5); 70 | left: map-get($spacers, 3); 71 | z-index: map-get($z-indexes, actions); 72 | display: none; 73 | } 74 | 75 | .page__sidebar { 76 | z-index: map-get($z-indexes, sidebar); 77 | display: block; 78 | width: 80%; 79 | max-width: map-get($layout, sidebar-width); 80 | height: 100%; 81 | background-color: $background-color; 82 | @include split-line(right); 83 | @include transition(transform map-get($animation, duration)); 84 | @include overflow(auto); 85 | .sidebar-toc { 86 | padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 4); 87 | } 88 | } 89 | .sidebar-button { 90 | @include clickable($text-color-d, rgba($main-color-3, .75)); 91 | } 92 | 93 | .page__mask { 94 | @include modal(map-get($z-indexes, mask)); 95 | cursor: pointer; 96 | } 97 | .layout--page--sidebar { 98 | .page__main { 99 | @include overflow(auto); 100 | @media print { 101 | @include overflow(unset); 102 | } 103 | } 104 | } 105 | 106 | .has-aside { 107 | .col-aside { 108 | position: relative; 109 | display: block; 110 | width: map-get($layout, aside-width); 111 | & > aside { 112 | &.fixed { 113 | position: fixed; 114 | -webkit-font-smoothing: subpixel-antialiased; 115 | } 116 | } 117 | @include media-breakpoint-down(lg) { 118 | display: none; 119 | } 120 | } 121 | } 122 | 123 | @include media-breakpoint-down(lg) { 124 | .page__sidebar { 125 | position: fixed; 126 | @include transform(translate(- map-get($layout, sidebar-width), 0)); 127 | } 128 | 129 | .page__actions { 130 | display: block; 131 | } 132 | 133 | .show-sidebar { 134 | .page__actions { 135 | visibility: hidden; 136 | } 137 | .page__sidebar { 138 | @include transform(translate(0)); 139 | } 140 | .page__mask { 141 | @include modal--show(); 142 | } 143 | } 144 | } 145 | 146 | .hero--light { 147 | .article__info { 148 | color: $text-color-theme-light; 149 | } 150 | } 151 | .hero--dark { 152 | .article__info { 153 | color: $text-color-theme-dark; 154 | } 155 | } 156 | 157 | .page__main--immersive { 158 | .page__header { 159 | position: absolute; 160 | width: 100%; 161 | } 162 | .hero__content { 163 | padding-top: map-get($layout, header-height); 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /docs/_sass/skins/_chocolate.scss: -------------------------------------------------------------------------------- 1 | /// 2 | // Skin: Chocolate 3 | // Author: Tian Qi 4 | // Email: kitian616@outlook.com 5 | /// 6 | 7 | // main colors 8 | $main-color-1: #563a20; 9 | $text-color-1: rgba(#fff, .85); 10 | 11 | $main-color-2: #8a2827; 12 | $text-color-2: rgba(#fff, .85); 13 | 14 | $main-color-3: #b49b92; 15 | $text-color-3: rgba(#fff, .85); 16 | 17 | $main-color-theme-light: rgba(#000, .9); 18 | $main-color-theme-dark: rgba(#fff, .9); 19 | 20 | // page background 21 | $background-color: #d2c2bc; 22 | 23 | // text colors 24 | $text-color-theme-light-d: rgba(#000, .95); 25 | $text-color-theme-light: rgba(#000, .85); 26 | $text-color-theme-light-l: rgba(#000, .5); 27 | 28 | $text-color-theme-dark-d: #fff; 29 | $text-color-theme-dark: rgba(#fff, .95); 30 | $text-color-theme-dark-l: rgba(#fff, .85); 31 | 32 | $text-color-d: $text-color-theme-light-d; 33 | $text-color: $text-color-theme-light; 34 | $text-color-l: $text-color-theme-light-l; 35 | 36 | $text-background-color: rgba(#000, .05); 37 | 38 | // header and footer colors 39 | $header-text-color: $text-color-3; 40 | $header-background: $main-color-3; 41 | 42 | $footer-text-color: $text-color-3; 43 | $footer-background: $main-color-3; 44 | 45 | // border and shadow colors 46 | $border-color: $main-color-3; 47 | $border-color-l: mix(#000, $background-color, 10%); 48 | $decorate-color: rgba(#000, .1); 49 | $mask-color: rgba(#000, .9); 50 | $select-color: rgba($main-color-3, .5); 51 | 52 | // function colors 53 | $green: #5baa34; 54 | $blue: #1c7cd4; 55 | $yellow: #c9771f; 56 | $red: #da3d45; 57 | $text-color-function: rgba(#fff, .85); 58 | 59 | // logo colors 60 | $mail-color: #0072c5; 61 | $facebook-color: #4267b2; 62 | $twitter-color: #1da1f2; 63 | $weibo-color: #e6162d; 64 | $google-plus-color:#ea4335; 65 | $telegram-color: #32afed; 66 | $medium-color: #000; 67 | $zhihu-color: #0084ff; 68 | $douban-color: #42bd56; 69 | $linkedin-color: #1074af; 70 | $github-color: #000; 71 | $npm-color: #fff; 72 | 73 | // highlight colors 74 | @import "skins/highlight/tomorrow-night-eighties"; 75 | -------------------------------------------------------------------------------- /docs/_sass/skins/_dark.scss: -------------------------------------------------------------------------------- 1 | /// 2 | // Skin: Dark 3 | // Author: Tian Qi 4 | // Email: kitian616@outlook.com 5 | /// 6 | 7 | // main colors 8 | $main-color-1: #ff9500; 9 | $text-color-1: rgba(#fff, .8); 10 | 11 | $main-color-2: #ff006a; 12 | $text-color-2: rgba(#fff, .8); 13 | 14 | $main-color-3: #202020; 15 | $text-color-3: rgba(#fff, .8); 16 | 17 | $main-color-theme-light: rgba(#000, .8); 18 | $main-color-theme-dark: rgba(#fff, .8); 19 | 20 | // page background 21 | $background-color: #121212; 22 | 23 | // text colors 24 | $text-color-theme-light-d: #000; 25 | $text-color-theme-light: #222; 26 | $text-color-theme-light-l: #888; 27 | 28 | $text-color-theme-dark-d: rgba(#fff, .8); 29 | $text-color-theme-dark: rgba(#fff, .7); 30 | $text-color-theme-dark-l: rgba(#fff, .5); 31 | 32 | $text-color-d: $text-color-theme-dark-d; 33 | $text-color: $text-color-theme-dark; 34 | $text-color-l: $text-color-theme-dark-l; 35 | 36 | $text-background-color: rgba(#fff, .05); 37 | 38 | // header and footer colors 39 | $header-text-color: $text-color-3; 40 | $header-background: $main-color-3; 41 | 42 | $footer-text-color: $text-color-3; 43 | $footer-background: $main-color-3; 44 | 45 | // border and shadow colors 46 | $border-color: mix(#fff, $background-color, 20%); 47 | $border-color-l: mix(#fff, $background-color, 10%); 48 | $decorate-color: rgba(#fff, .1); 49 | $mask-color: rgba(#000, .9); 50 | $select-color: rgba($main-color-1, .5); 51 | 52 | // function colors 53 | $green: #5baa34; 54 | $blue: #1c7cd4; 55 | $yellow: #c9771f; 56 | $red: #da3d45; 57 | $text-color-function: rgba(#fff, .8); 58 | 59 | // logo colors 60 | $mail-color: #0072c5; 61 | $facebook-color: #4267b2; 62 | $twitter-color: #1da1f2; 63 | $weibo-color: #e6162d; 64 | $google-plus-color:#ea4335; 65 | $telegram-color: #32afed; 66 | $medium-color: #000; 67 | $zhihu-color: #0084ff; 68 | $douban-color: #42bd56; 69 | $linkedin-color: #1074af; 70 | $github-color: #000; 71 | $npm-color: #fff; 72 | 73 | // highlight colors 74 | @import "skins/highlight/tomorrow-night"; 75 | -------------------------------------------------------------------------------- /docs/_sass/skins/_default.scss: -------------------------------------------------------------------------------- 1 | /// 2 | // Skin: Default 3 | // Author: Tian Qi 4 | // Email: kitian616@outlook.com 5 | /// 6 | 7 | // main colors 8 | $main-color-1: #fc4d50; 9 | $text-color-1: #fff; 10 | 11 | $main-color-2: #fca24d; 12 | $text-color-2: #fff; 13 | 14 | $main-color-3: #f2f2f2; 15 | $text-color-3: #333; 16 | 17 | $main-color-theme-light: rgba(#000, .9); 18 | $main-color-theme-dark: rgba(#fff, .9); 19 | 20 | // page background 21 | $background-color: #fff; 22 | 23 | // text colors 24 | $text-color-theme-light-d: #000; 25 | $text-color-theme-light: #222; 26 | $text-color-theme-light-l: #888; 27 | 28 | $text-color-theme-dark-d: #fff; 29 | $text-color-theme-dark: rgba(#fff, .95); 30 | $text-color-theme-dark-l: rgba(#fff, .85); 31 | 32 | $text-color-d: $text-color-theme-light-d; 33 | $text-color: $text-color-theme-light; 34 | $text-color-l: $text-color-theme-light-l; 35 | 36 | $text-background-color: rgba(#000, .05); 37 | 38 | // header and footer colors 39 | $header-text-color: $text-color-3; 40 | $header-background: $main-color-3; 41 | 42 | $footer-text-color: $text-color-3; 43 | $footer-background: $main-color-3; 44 | 45 | // border and shadow colors 46 | $border-color: mix(#000, $background-color, 20%); 47 | $border-color-l: mix(#000, $background-color, 10%); 48 | $decorate-color: rgba(#000, .1); 49 | $mask-color: rgba(#000, .9); 50 | $select-color: rgba($main-color-1, .5); 51 | 52 | // function colors 53 | $green: #52c41a; 54 | $blue: #1890ff; 55 | $yellow: #fa8c16; 56 | $red: #f5222d; 57 | $text-color-function: #fff; 58 | 59 | // logo colors 60 | $mail-color: #0072c5; 61 | $facebook-color: #4267b2; 62 | $twitter-color: #1da1f2; 63 | $weibo-color: #e6162d; 64 | $google-plus-color:#ea4335; 65 | $telegram-color: #32afed; 66 | $medium-color: #000; 67 | $zhihu-color: #0084ff; 68 | $douban-color: #42bd56; 69 | $linkedin-color: #1074af; 70 | $github-color: #000; 71 | $npm-color: #fff; 72 | 73 | 74 | // highlight colors 75 | @import "skins/highlight/tomorrow"; 76 | -------------------------------------------------------------------------------- /docs/_sass/skins/_forest.scss: -------------------------------------------------------------------------------- 1 | /// 2 | // Skin: Forest 3 | // Author: Tian Qi 4 | // Email: kitian616@outlook.com 5 | /// 6 | 7 | // main colors 8 | $main-color-1: #bb6170; 9 | $text-color-1: #fff; 10 | 11 | $main-color-2: #f3c584; 12 | $text-color-2: #fff; 13 | 14 | $main-color-3: #7cc7bb; 15 | $text-color-3: #fff; 16 | 17 | $main-color-theme-light: rgba(#000, .9); 18 | $main-color-theme-dark: rgba(#fff, .9); 19 | 20 | // page background 21 | $background-color: #f8fcfb; 22 | 23 | // text colors 24 | $text-color-theme-light-d: #325f74; 25 | $text-color-theme-light: #3e758f; 26 | $text-color-theme-light-l: #619dbb; 27 | 28 | $text-color-theme-dark-d: #fff; 29 | $text-color-theme-dark: rgba(#fff, .95); 30 | $text-color-theme-dark-l: rgba(#fff, .85); 31 | 32 | $text-color-d: $text-color-theme-light-d; 33 | $text-color: $text-color-theme-light; 34 | $text-color-l: $text-color-theme-light-l; 35 | 36 | $text-background-color: rgba(#000, .05); 37 | 38 | // header and footer colors 39 | $header-text-color: $text-color-3; 40 | $header-background: $main-color-3; 41 | 42 | $footer-text-color: $text-color-3; 43 | $footer-background: $main-color-3; 44 | 45 | // border and shadow colors 46 | $border-color: #3e758f; 47 | $border-color-l: mix(#000, $background-color, 10%); 48 | $decorate-color: rgba(#bb6170, .15); 49 | $mask-color: rgba(#000, .9); 50 | $select-color: rgba($main-color-1, .5); 51 | 52 | // function colors 53 | $green: #52c41a; 54 | $blue: #1890ff; 55 | $yellow: #fa8c16; 56 | $red: #f5222d; 57 | $text-color-function: #fff; 58 | 59 | // logo colors 60 | $mail-color: #0072c5; 61 | $facebook-color: #4267b2; 62 | $twitter-color: #1da1f2; 63 | $weibo-color: #e6162d; 64 | $google-plus-color:#ea4335; 65 | $telegram-color: #32afed; 66 | $medium-color: #000; 67 | $zhihu-color: #0084ff; 68 | $douban-color: #42bd56; 69 | $linkedin-color: #1074af; 70 | $github-color: #000; 71 | $npm-color: #fff; 72 | 73 | // highlight colors 74 | @import "skins/highlight/tomorrow"; 75 | -------------------------------------------------------------------------------- /docs/_sass/skins/_ocean.scss: -------------------------------------------------------------------------------- 1 | /// 2 | // Skin: Ocean 3 | // Author: Tian Qi 4 | // Email: kitian616@outlook.com 5 | /// 6 | 7 | // main colors 8 | $main-color-1: #0366d6; 9 | $text-color-1: #fff; 10 | 11 | $main-color-2: #a5917f; 12 | $text-color-2: #fff; 13 | 14 | $main-color-3: #f1f8ff; 15 | $text-color-3: #0366d6; 16 | 17 | $main-color-theme-light: rgba(#000, .9); 18 | $main-color-theme-dark: rgba(#fff, .9); 19 | 20 | // page background 21 | $background-color: #fff; 22 | 23 | // text colors 24 | $text-color-theme-light-d: rgba(#000, .95); 25 | $text-color-theme-light: rgba(#000, .85); 26 | $text-color-theme-light-l: rgba(#000, .5); 27 | 28 | $text-color-theme-dark-d: #fff; 29 | $text-color-theme-dark: rgba(#fff, .95); 30 | $text-color-theme-dark-l: rgba(#fff, .85); 31 | 32 | $text-color-d: $text-color-theme-light-d; 33 | $text-color: $text-color-theme-light; 34 | $text-color-l: $text-color-theme-light-l; 35 | 36 | $text-background-color: rgba(#000, .05); 37 | 38 | // header and footer colors 39 | $header-text-color: $text-color-3; 40 | $header-background: $main-color-3; 41 | 42 | $footer-text-color: $text-color-3; 43 | $footer-background: $main-color-3; 44 | 45 | // border and shadow colors 46 | $border-color: mix(#000, $background-color, 20%); 47 | $border-color-l: mix(#000, $background-color, 10%); 48 | $decorate-color: rgba(#000, .1); 49 | $mask-color: rgba(#000, .9); 50 | $select-color: rgba($main-color-1, .5); 51 | 52 | // function colors 53 | $green: #52c41a; 54 | $blue: #1890ff; 55 | $yellow: #fa8c16; 56 | $red: #f5222d; 57 | $text-color-function: #fff; 58 | 59 | // logo colors 60 | $mail-color: #0072c5; 61 | $facebook-color: #4267b2; 62 | $twitter-color: #1da1f2; 63 | $weibo-color: #e6162d; 64 | $google-plus-color:#ea4335; 65 | $telegram-color: #32afed; 66 | $medium-color: #000; 67 | $zhihu-color: #0084ff; 68 | $douban-color: #42bd56; 69 | $linkedin-color: #1074af; 70 | $github-color: #000; 71 | $npm-color: #fff; 72 | 73 | // highlight colors 74 | @import "skins/highlight/tomorrow-night-blue"; 75 | -------------------------------------------------------------------------------- /docs/_sass/skins/_orange.scss: -------------------------------------------------------------------------------- 1 | /// 2 | // Skin: Orange 3 | // Author: Tian Qi 4 | // Email: kitian616@outlook.com 5 | /// 6 | 7 | // main colors 8 | $main-color-1: #f92651; 9 | $text-color-1: #fff; 10 | 11 | $main-color-2: #fdb824; 12 | $text-color-2: #fff; 13 | 14 | $main-color-3: #ff8a64; 15 | $text-color-3: #fff; 16 | 17 | $main-color-theme-light: rgba(#000, .9); 18 | $main-color-theme-dark: rgba(#fff, .9); 19 | 20 | // page background 21 | $background-color: #fffdfa; 22 | 23 | // text colors 24 | $text-color-theme-light-d: rgba(#000, .95); 25 | $text-color-theme-light: rgba(#000, .85); 26 | $text-color-theme-light-l: rgba(#000, .5); 27 | 28 | $text-color-theme-dark-d: rgba(#fff, .95); 29 | $text-color-theme-dark: rgba(#fff, .85); 30 | $text-color-theme-dark-l: rgba(#fff, .65); 31 | 32 | $text-color-d: $text-color-theme-light-d; 33 | $text-color: $text-color-theme-light; 34 | $text-color-l: $text-color-theme-light-l; 35 | 36 | $text-background-color: rgba(#000, .05); 37 | 38 | // header and footer colors 39 | $header-text-color: $text-color-3; 40 | $header-background: linear-gradient(60deg, #ffa650 0%, #ff7b50 100%); 41 | 42 | $footer-text-color: $text-color-3; 43 | $footer-background: linear-gradient(60deg, #ffa650 0%, #ff7b50 100%); 44 | 45 | // border and shadow colors 46 | $border-color: mix($main-color-1, $background-color, 50%); 47 | $border-color-l: mix(#000, $background-color, 10%); 48 | $decorate-color: rgba(#000, .1); 49 | $mask-color: rgba(#000, .9); 50 | $select-color: rgba($main-color-3, .5); 51 | 52 | // function colors 53 | $green: #52c41a; 54 | $blue: #1890ff; 55 | $yellow: #fa8c16; 56 | $red: #f5222d; 57 | $text-color-function: #fff; 58 | 59 | // logo colors 60 | $mail-color: #0072c5; 61 | $facebook-color: #4267b2; 62 | $twitter-color: #1da1f2; 63 | $weibo-color: #e6162d; 64 | $google-plus-color:#ea4335; 65 | $telegram-color: #32afed; 66 | $medium-color: #000; 67 | $zhihu-color: #0084ff; 68 | $douban-color: #42bd56; 69 | $linkedin-color: #1074af; 70 | $github-color: #000; 71 | $npm-color: #fff; 72 | 73 | // highlight colors 74 | @import "skins/highlight/tomorrow-night-eighties"; 75 | -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/_default.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/_sass/skins/highlight/_default.scss -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/_tomorrow-night-blue.scss: -------------------------------------------------------------------------------- 1 | @import "./tomorrow/night-blue"; 2 | @import "./tomorrow/highlight"; 3 | -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/_tomorrow-night-bright.scss: -------------------------------------------------------------------------------- 1 | @import "./tomorrow/night-bright"; 2 | @import "./tomorrow/highlight"; 3 | -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/_tomorrow-night-eighties.scss: -------------------------------------------------------------------------------- 1 | @import "./tomorrow/night-eighties"; 2 | @import "./tomorrow/highlight"; 3 | -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/_tomorrow-night.scss: -------------------------------------------------------------------------------- 1 | @import "./tomorrow/night"; 2 | @import "./tomorrow/highlight"; 3 | -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/_tomorrow.scss: -------------------------------------------------------------------------------- 1 | @import "./tomorrow/default"; 2 | @import "./tomorrow/highlight"; 3 | -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/tomorrow/_default.scss: -------------------------------------------------------------------------------- 1 | $highlight-background : #f7f7f7; 2 | $highlight-foreground : #4d4d4c; 3 | $highlight-comment : #8e908c; 4 | $highlight-red : #c82829; 5 | $highlight-orange : #f5871f; 6 | $highlight-yellow : #eab700; 7 | $highlight-green : #718c00; 8 | $highlight-aqua : #3e999f; 9 | $highlight-blue : #4271ae; 10 | $highlight-purple : #8959a8; -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/tomorrow/_night-blue.scss: -------------------------------------------------------------------------------- 1 | $highlight-background :#002451; 2 | $highlight-foreground :#fff; 3 | $highlight-comment :#7285b7; 4 | $highlight-red :#ff9da4; 5 | $highlight-orange :#ffc58f; 6 | $highlight-yellow :#ffeead; 7 | $highlight-green :#d1f1a9; 8 | $highlight-aqua :#9ff; 9 | $highlight-blue :#bbdaff; 10 | $highlight-purple :#ebbbff; 11 | -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/tomorrow/_night-bright.scss: -------------------------------------------------------------------------------- 1 | $highlight-background :#000; 2 | $highlight-foreground :#eaeaea; 3 | $highlight-comment :#969896; 4 | $highlight-red :#d54e53; 5 | $highlight-orange :#e78c45; 6 | $highlight-yellow :#e7c547; 7 | $highlight-green :#b9ca4a; 8 | $highlight-aqua :#70c0b1; 9 | $highlight-blue :#7aa6da; 10 | $highlight-purple :#c397d8; 11 | -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/tomorrow/_night-eighties.scss: -------------------------------------------------------------------------------- 1 | $highlight-background :#2d2d2d; 2 | $highlight-foreground :#ccc; 3 | $highlight-comment :#999; 4 | $highlight-red :#f2777a; 5 | $highlight-orange :#f99157; 6 | $highlight-yellow :#fc6; 7 | $highlight-green :#9c9; 8 | $highlight-aqua :#6cc; 9 | $highlight-blue :#69c; 10 | $highlight-purple :#c9c; 11 | -------------------------------------------------------------------------------- /docs/_sass/skins/highlight/tomorrow/_night.scss: -------------------------------------------------------------------------------- 1 | $highlight-background : #1d1f21; 2 | $highlight-foreground : #c5c8c6; 3 | $highlight-comment : #969896; 4 | $highlight-red : #c66; 5 | $highlight-orange : #de935f; 6 | $highlight-yellow : #f0c674; 7 | $highlight-green : #b5bd68; 8 | $highlight-aqua : #8abeb7; 9 | $highlight-blue : #81a2be; 10 | $highlight-purple : #b294bb; 11 | -------------------------------------------------------------------------------- /docs/archive.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: archive 3 | --- 4 | -------------------------------------------------------------------------------- /docs/assets/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/assets/android-chrome-192x192.png -------------------------------------------------------------------------------- /docs/assets/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/assets/android-chrome-256x256.png -------------------------------------------------------------------------------- /docs/assets/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/assets/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/assets/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/assets/css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | 5 | @import 6 | 7 | "skins/{{ site.text_skin | default: site.data.variables.default.text_skin }}", 8 | // "skins/chocolate", 9 | // "skins/dark", 10 | // "skins/default", 11 | // "skins/forest", 12 | // "skins/ocean", 13 | // "skins/orange", 14 | 15 | "skins/highlight/{{ site.highlight_theme | default: site.data.variables.default.highlight_theme }}", 16 | // "skins/highlight/tomorrow", 17 | // "skins/highlight/tomorrow-night", 18 | // "skins/highlight/tomorrow-night-eighties", 19 | // "skins/highlight/tomorrow-night-blue", 20 | // "skins/highlight/tomorrow-night-bright", 21 | 22 | 23 | "common/variables", 24 | "common/function", 25 | "common/classes", 26 | "common/reset", 27 | "common/print", 28 | "common/components/button", 29 | "common/components/image", 30 | "common/components/card", 31 | "common/components/gallery", 32 | "common/components/hero", 33 | "common/components/menu", 34 | "common/components/modal", 35 | "common/components/toc", 36 | "common/components/item", 37 | "common/components/swiper", 38 | 39 | "animate/fade-in", 40 | "animate/fade-in-down", 41 | "animate/fade-in-up", 42 | 43 | "components/main", 44 | "components/header", 45 | "components/footer", 46 | "components/article-list", 47 | "components/article-info", 48 | "components/article-header", 49 | "components/article-content", 50 | "components/article-footer", 51 | "components/author-links", 52 | "components/author-profile", 53 | "components/tags", 54 | "components/search", 55 | "components/lightbox", 56 | "components/extensions", 57 | 58 | 59 | "additional/alert", 60 | "additional/tag", 61 | "additional/photo-frame", 62 | 63 | "layout/base", 64 | "layout/page", 65 | 66 | "layout/article", 67 | "layout/articles", 68 | "layout/archive", 69 | "layout/home", 70 | "layout/landing", 71 | "layout/404", 72 | 73 | "custom" 74 | ; 75 | -------------------------------------------------------------------------------- /docs/assets/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/assets/favicon-16x16.png -------------------------------------------------------------------------------- /docs/assets/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/assets/favicon-32x32.png -------------------------------------------------------------------------------- /docs/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/assets/favicon.ico -------------------------------------------------------------------------------- /docs/assets/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/assets/mstile-150x150.png -------------------------------------------------------------------------------- /docs/assets/search.js: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | {%- include search-providers/default/search-data.js -%} 4 | -------------------------------------------------------------------------------- /docs/assets/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /docs/docker/docker-compose.build-image.yml: -------------------------------------------------------------------------------- 1 | version: "3.5" 2 | 3 | services: 4 | jekyll-text-theme_dev: 5 | build: 6 | context: ../ 7 | dockerfile: Dockerfile.dev 8 | -------------------------------------------------------------------------------- /docs/docker/docker-compose.default.yml: -------------------------------------------------------------------------------- 1 | version: "3.5" 2 | 3 | services: 4 | jekyll-text-theme_dev: 5 | image: docker_jekyll-text-theme_dev 6 | environment: 7 | - JEKYLL_ENV 8 | ports: 9 | - 4000:4000 10 | container_name: jekyll-TeXt-theme_default 11 | volumes: 12 | - ..:/usr/src/app 13 | stdin_open: true 14 | tty: true 15 | command: bundle exec jekyll serve -H 0.0.0.0 -t 16 | -------------------------------------------------------------------------------- /docs/docker/docker-compose.demo.yml: -------------------------------------------------------------------------------- 1 | version: "3.5" 2 | 3 | services: 4 | jekyll-text-theme_dev: 5 | image: docker_jekyll-text-theme_dev 6 | environment: 7 | - JEKYLL_ENV 8 | ports: 9 | - 4000:4000 10 | container_name: jekyll-TeXt-theme_demo 11 | volumes: 12 | - ..:/usr/src/app 13 | stdin_open: true 14 | tty: true 15 | command: bundle exec jekyll serve -H 0.0.0.0 -t --config ./docs/_config.yml 16 | -------------------------------------------------------------------------------- /docs/docker/docker-compose.dev.yml: -------------------------------------------------------------------------------- 1 | version: "3.5" 2 | 3 | services: 4 | jekyll-text-theme_dev: 5 | image: docker_jekyll-text-theme_dev 6 | environment: 7 | - JEKYLL_ENV 8 | ports: 9 | - 4000:4000 10 | container_name: jekyll-TeXt-theme_dev 11 | volumes: 12 | - ..:/usr/src/app 13 | stdin_open: true 14 | tty: true 15 | command: bundle exec jekyll serve -H 0.0.0.0 -t --config ./docs/_config.dev.yml 16 | -------------------------------------------------------------------------------- /docs/docker/docker-compose.prod.yml: -------------------------------------------------------------------------------- 1 | version: "3.5" 2 | 3 | services: 4 | jekyll-text-theme_build: 5 | image: docker_jekyll-text-theme_dev 6 | environment: 7 | - JEKYLL_ENV 8 | ports: 9 | - 4000:4000 10 | container_name: jekyll-text-theme_build 11 | volumes: 12 | - ..:/usr/src/app 13 | command: bundle exec jekyll build 14 | jekyll-text-theme_web: 15 | image: nginx 16 | ports: 17 | - 80:80 18 | - 443:443 19 | container_name: jekyll-text-theme_web 20 | restart: unless-stopped 21 | volumes: 22 | - ../_site:/usr/share/nginx/html:ro 23 | - ./nginx.conf:/etc/nginx/conf.d/default.conf 24 | depends_on: 25 | - jekyll-text-theme_build 26 | -------------------------------------------------------------------------------- /docs/docker/nginx.conf: -------------------------------------------------------------------------------- 1 | server { 2 | # gzip config 3 | gzip on; 4 | gzip_min_length 1k; 5 | gzip_comp_level 9; 6 | gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; 7 | gzip_vary on; 8 | 9 | root /usr/share/nginx/html; 10 | 11 | index index.html; 12 | 13 | location / { 14 | try_files $uri $uri/ =404; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /docs/docs/00_about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: article 3 | titles: 4 | # @start locale config 5 | en : &EN STimage-1K4M Dataset 6 | # @end locale config 7 | key: page-about 8 | --- 9 | 10 | Welcome to the STimage-1K4M Dataset repository. This dataset is designed to foster research in the field of spatial transcriptomics, combining high-resolution histopathology images with detailed gene expression data. 11 | 12 | ![teaser](doc_data/f1.png "teaser") 13 | 14 | 15 | ## Dataset Description 16 | 17 | STimage-1K4M consists of 1,149 spatial transcriptomics slides, totaling over 4 million spots with paired gene expression data. This dataset includes: 18 | 19 | - Images. 20 | - Gene expression profiles matched with high-resolution histopathology images. 21 | - Spatial coordinates for each spot. 22 | 23 | See example folder for an example slide from Andersson et al. (pmid: 34650042). 24 | 25 | ## Getting Started 26 | 27 | To use the STimage-1K4M dataset in your research, please access the dataset via [Hugging Face](https://huggingface.co/datasets/jiawennnn/STimage-1K4M). 28 | 29 | 30 | ## Data structure 31 | The data structure is organized as follows: 32 | 33 | ```bash 34 | ├── annotation # Pathologist annotation 35 | ├── meta # Test files (alternatively `spec` or `tests`) 36 | │ ├── bib.txt # the bibtex for all studies with pmid included in the dataset 37 | │ ├── meta_all_gene.csv # The meta information 38 | ├── ST # Include all data for tech: Spatial Transcriptomics 39 | │ ├── coord # Include the spot coordinates & spot radius of each slide 40 | │ ├── gene_exp # Include the gene expression of each slide 41 | │ └── image # Include the image each slide 42 | ├── Visium # Include all data for tech: Visium, same structure as ST 43 | ├── VisiumHD # Include all data for tech: VisiumHD, same structure as ST 44 | ``` 45 | ## Document 46 | The code for data processing and reproducing evaluation result in the paper are in [Document](01-make-meta). 47 | 48 | 49 | ## Acknowledgement 50 | The fine-tuning and evaluation codes borrows heavily from [CLIP](https://github.com/openai/CLIP/issues/83) and [PLIP](https://github.com/PathologyFoundation/plip/). 51 | 52 | ## Citation 53 | 54 | ``` 55 | @misc{chen2024stimage1k4m, 56 | title={STimage-1K4M: A histopathology image-gene expression dataset for spatial transcriptomics}, 57 | author={Jiawen Chen and Muqing Zhou and Wenrong Wu and Jinwei Zhang and Yun Li and Didong Li}, 58 | year={2024}, 59 | eprint={2406.06393}, 60 | archivePrefix={arXiv}, 61 | primaryClass={cs.CV} 62 | } 63 | ``` 64 | 65 | ## License 66 | 67 | All code is licensed under the MIT License - see the LICENSE.md file for details. 68 | 69 | 70 | 71 |

72 |
73 |
74 | 75 |
76 |
77 |

78 | -------------------------------------------------------------------------------- /docs/docs/02-check_image.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: article 3 | title: Check spot location 4 | sidebar: 5 | nav: document_nav 6 | permalink: docs/02-check_image 7 | --- 8 | 9 | We manually check the spot location on each slide. The processed coodinate file include yaxis, xaxis and the radius for each spot. 10 | 11 | ```python 12 | import sys 13 | from typing import List,Dict 14 | import pandas as pd 15 | from PIL import Image 16 | import pandas as pd 17 | import matplotlib.pyplot as plt 18 | 19 | Image.MAX_IMAGE_PIXELS = 3080000000000000000000000000000000000 20 | 21 | 22 | # check the coordinate of the spot on the slide 23 | 24 | def check_image_all(path,slide): 25 | temp_image = Image.open(f'{path}/image/{slide}.png') 26 | temp_image = temp_image.convert('RGB') 27 | coord = pd.read_csv(f'{path}/coord/{slide}_coord.csv') 28 | r = coord.r[0] # radius 29 | plt.clf() 30 | plt.imshow(temp_image) 31 | for i in range(len(coord.index)): 32 | yaxis = coord.yaxis[i] 33 | xaxis = coord.xaxis[i] 34 | plt.plot([xaxis-r,xaxis+r],[yaxis-r,yaxis-r],c='lime',alpha=0.5) 35 | plt.plot([xaxis-r,xaxis+r],[yaxis+r,yaxis+r],c='lime',alpha=0.5) 36 | plt.plot([xaxis-r,xaxis-r],[yaxis-r,yaxis+r],c='lime',alpha=0.5) 37 | plt.plot([xaxis+r,xaxis+r],[yaxis-r,yaxis+r],c='lime',alpha=0.5) 38 | # crop plt 39 | plt.axis('off') 40 | plt.axis([coord.xaxis.min()-r*2,coord.xaxis.max()+r*2,coord.yaxis.max()+r*2,coord.yaxis.min()-r*2]) 41 | plt.savefig(f'./check_image_all/{slide}.png',dpi=100,bbox_inches='tight',pad_inches = 0) 42 | 43 | 44 | meta = pd.read_csv('meta_all_gene.csv',sep='\t') 45 | 46 | for index in range(len(meta)): 47 | slide = meta.slide[index] 48 | tech = meta.tech[index] 49 | # set your directory to downloaded STimage-1K4M 50 | path=f'./{tech}/' 51 | check_image_all(path,slide) 52 | ``` -------------------------------------------------------------------------------- /docs/docs/03-crop-image.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: article 3 | title: Crop spot-level image 4 | sidebar: 5 | nav: document_nav 6 | permalink: docs/03-crop-image 7 | --- 8 | 9 | To perform spot-level analysis, you need to crop the slide images into spot-level. We used the following code to crop the spot-level images. We note here although all the images are named as png, they are actully a mixture of jpg, tiff and png. We suggest you using `PIL.Image.open` since it can automatically detect image type. 10 | 11 | ```python 12 | import sys 13 | import pandas as pd 14 | from PIL import Image 15 | import matplotlib.pyplot as plt 16 | 17 | 18 | Image.MAX_IMAGE_PIXELS = 3080000000000000000000000000000000000 19 | 20 | def crop_image_all(path,slide): 21 | # We note here that although 22 | temp_image = Image.open(f'{path}/image/{slide}.png') 23 | temp_image = temp_image.convert('RGB') 24 | coord = pd.read_csv(f'{path}/coord/{slide}_coord.csv') 25 | r = coord.r[0] 26 | for i in range(len(coord.index)): 27 | yaxis = coord.yaxis[i] 28 | xaxis = coord.xaxis[i] 29 | spot_name = coord.iloc[i,0] 30 | temp_image_crop = temp_image.crop((xaxis-r, yaxis-r, xaxis+r, yaxis+r)) 31 | temp_image_crop.save(f"./crop/{spot_name}.png") 32 | #plt.scatter(xaxis,yaxis,c='r') 33 | 34 | 35 | 36 | index = int(sys.argv[1]) 37 | meta = pd.read_csv('meta_all_gene.csv',sep='\t') 38 | 39 | slide = meta.slide[index] 40 | tech = meta.tech[index] 41 | 42 | path=f'./{tech}/' 43 | crop_image_all(path,slide) 44 | ``` 45 | -------------------------------------------------------------------------------- /docs/docs/08-embedding_score.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: article 3 | title: Image representation learning 4 | sidebar: 5 | nav: document_nav 6 | permalink: docs/08-embedding_score 7 | --- 8 | To evaluate the enhancement in image representations achieved by the fine-tuned models, we utilized pathologist-annotated brain layers as benchmarks to calculate several cluster quality metrics, including the Silhouette score, the Calinski-Harabasz index, and the Davies-Bouldin index. 9 | 10 | ```python 11 | import os 12 | import glob 13 | import pandas as pd 14 | import numpy as np 15 | from sklearn.metrics import silhouette_score,calinski_harabasz_score,davies_bouldin_score 16 | 17 | 18 | model_path = glob.glob('./embedding/withanno/finetune*Human_Brain_Maynard_02082021_Visium*') 19 | anno_temp = pd.read_csv('./anno_forlp/Human_Brain_Maynard_02082021_Visium_anno.csv',sep='\t',index_col=0) 20 | anno_temp = anno_temp[anno_temp.V2 != ''] 21 | anno_temp = anno_temp[anno_temp.V2.notnull()] 22 | anno_temp = anno_temp[anno_temp.V2 != 'undetermined'] 23 | anno_temp = anno_temp[anno_temp.V2 != 'Exclude'] 24 | 25 | sil_score = [] 26 | ch_score = [] 27 | db_score = [] 28 | 29 | model = [] 30 | slide_all = [] 31 | for j in range(len(model_path)): 32 | embedding_all = pd.read_csv(model_path[j],index_col=0) 33 | model_name = model_path[j].replace('./embedding/withanno/','') 34 | model_name = model_name.replace('_withanno.csv','') 35 | print(model_name) 36 | for slide in anno_temp.sample_name.unique(): 37 | anno_temp_slide = anno_temp[anno_temp.sample_name == slide] 38 | index_keep = anno_temp_slide.index.intersection(embedding_all.index) 39 | embedding = embedding_all.loc[index_keep] 40 | anno = anno_temp_slide.loc[index_keep] 41 | sil_score.append(silhouette_score(embedding,anno.V2)) 42 | ch_score.append(calinski_harabasz_score(embedding,anno.V2)) 43 | db_score.append(davies_bouldin_score(embedding,anno.V2)) 44 | model.append(model_name) 45 | slide_all.append(slide) 46 | 47 | model_name_zero = ['CLIP','PLIP','uni'] 48 | for model_name in model_name_zero: 49 | embedding1 = pd.read_csv(f'./zero_shot_embedding/{model_name}_human_image_feature.csv',index_col=0) 50 | embedding2 = pd.read_csv(f'./zero_shot_embedding/{model_name}_mouse_image_feature.csv',index_col=0) 51 | embedding_all = pd.concat([embedding1,embedding2]) 52 | print(model_name) 53 | for slide in anno_temp.sample_name.unique(): 54 | anno_temp_slide = anno_temp[anno_temp.sample_name == slide] 55 | index_keep = anno_temp_slide.index.intersection(embedding_all.index) 56 | embedding = embedding_all.loc[index_keep] 57 | anno = anno_temp_slide.loc[index_keep] 58 | sil_score.append(silhouette_score(embedding,anno.V2)) 59 | ch_score.append(calinski_harabasz_score(embedding,anno.V2)) 60 | db_score.append(davies_bouldin_score(embedding,anno.V2)) 61 | model.append(model_name) 62 | slide_all.append(slide) 63 | 64 | result = pd.DataFrame({'model':model,'silhouette_score':sil_score, 65 | 'Calinski-Harabasz_score':ch_score,'Davies-Bouldin_score':db_score,'slide':slide_all}) 66 | 67 | result.to_csv('silhouette_score_32.csv',index=False,sep='\t') 68 | ``` -------------------------------------------------------------------------------- /docs/docs/09_for_new_to_ST.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: article 3 | title: Resource for researchers new to ST 4 | sidebar: 5 | nav: document_nav 6 | permalink: docs/09_for_new_to_ST 7 | --- 8 | 9 | This document aims to provide several resources for researchers new to ST field better understanding the technology and field. 10 | 11 | Let's start from a nice introduction of the ST technologies. 12 |
{%- include extensions/youtube.html id='q74euInZqm4' -%}
13 | 14 | Overall, ST data includes gene expression, spatial location and sometimes histology images. The integration of all these information facilitate the development of methods tailored for spatial transcriptomics data. 15 | 16 | Here are several nice review papers: 17 | - Moses, Lambda, and Lior Pachter. "Museum of spatial transcriptomics." Nature methods 19.5 (2022): 534-546. 18 | - Coleman, K., Schroeder, A., & Li, M. (2024). Unlocking the power of spatial omics with AI. Nature Methods, 21(8), 1378-1381. 19 | - Szałata, Artur, et al. "Transformers in single-cell omics: a review and new perspectives." Nature Methods 21.8 (2024): 1430-1443. 20 | - Tian, Luyi, Fei Chen, and Evan Z. Macosko. "The expanding vistas of spatial transcriptomics." Nature Biotechnology 41.6 (2023): 773-782. 21 | -------------------------------------------------------------------------------- /docs/docs/10_ST_analysis_quick_start.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: article 3 | title: ST analysis quick start 4 | sidebar: 5 | nav: document_nav 6 | permalink: docs/10_ST_analysis_quick_start 7 | --- 8 | 9 | For a quick and easy start of ST data analysis, here we recommend the use of three popular analysis packages. It is also very useful to check the tutorials of these packages for a better understanding of the common tasks and data structure. 10 | - [Seruat](https://satijalab.org/seurat/): R toolkit for single cell genomics. 11 | - [Scanpy](https://scanpy.readthedocs.io/en/stable/index.html): Single-Cell analysis in Python. 12 | - [Squidpy](https://squidpy.readthedocs.io/en/stable/index.html): Spatial Single Cell Analysis in Python. 13 | 14 | Here we include code for how to load STimage-1K4M data as annData for easy use of Scanpy and Squidpy. 15 | 16 | ```python 17 | #python 18 | import pandas as pd 19 | import scanpy as sc 20 | import sys 21 | 22 | 23 | meta = pd.read_csv('meta_all_gene.csv',sep='\t') 24 | path = '.' 25 | 26 | # load data 27 | i = 1 28 | slide = meta['slide'][i] 29 | gene_exp_slide = pd.read_csv(f'{path}/{meta.tech[i]}/gene_exp/{meta.slide[i]}_count.csv',sep=',',index_col=0) 30 | adata = sc.AnnData(gene_exp_slide) 31 | adata.var_names_make_unique() 32 | ``` 33 | 34 | Then, with adata, we can perform standard data preprocessing like normalization and log1p transformation. 35 | 36 | ```python 37 | sc.pp.normalize_total(adata) 38 | sc.pp.log1p(adata) 39 | ``` 40 | 41 | Then you can follow the pipeline in Squidy for spatial data analysis. For example, you can analyze spatial variable genes follow this [pipeline](https://squidpy.readthedocs.io/en/stable/notebooks/tutorials/tutorial_visium_hne.html#image-features). -------------------------------------------------------------------------------- /docs/docs/doc_data/Michael_Hooker_Research_Center_Zoom_Background_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/docs/doc_data/Michael_Hooker_Research_Center_Zoom_Background_2.jpg -------------------------------------------------------------------------------- /docs/docs/doc_data/UNC_logo_RGB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/docs/doc_data/UNC_logo_RGB.png -------------------------------------------------------------------------------- /docs/docs/doc_data/f1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/docs/doc_data/f1.png -------------------------------------------------------------------------------- /docs/docs/landing.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: landing 3 | title: STimage-1K4M 4 | excerpt: > 5 | A histopathology image-gene expression dataset for spatial transcriptomics. 6 | permalink: /index.html 7 | 8 | article_header: 9 | actions: 10 | - text: Getting Started 11 | type: outline-theme-dark 12 | url: docs/00_about 13 | - text: GitHub 14 | type: outline-theme-dark 15 | url: https://github.com/JiawenChenn/STimage-1K4M 16 | height: 100vh 17 | theme: dark 18 | background_color: "#367a9a" 19 | background_image: 20 | gradient: "linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .6))" 21 | src: docs/doc_data/Michael_Hooker_Research_Center_Zoom_Background_2.jpg 22 | 23 | --- 24 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/docs/favicon.ico -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | # articles: 4 | # excerpt_type: html 5 | --- 6 | -------------------------------------------------------------------------------- /docs/jekyll-text-theme.gemspec: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | 3 | Gem::Specification.new do |spec| 4 | spec.name = "jekyll-text-theme" 5 | spec.version = "2.2.6" 6 | spec.authors = ["Tian Qi"] 7 | spec.email = ["kitian616@outlook.com"] 8 | 9 | spec.summary = %q{A super customizable Jekyll theme for personal site, team site, blog, project, documentation, etc.} 10 | spec.homepage = "https://github.com/kitian616/jekyll-TeXt-theme" 11 | spec.license = "MIT" 12 | 13 | spec.metadata["plugin_type"] = "theme" 14 | 15 | spec.files = `git ls-files -z`.split("\x0").select do |f| 16 | f.match(%r{^((_data|_includes|_layouts|_sass|assets)/|(LICENSE|README|CHANGELOG)((\.(txt|md|markdown)|$)))}i) 17 | end 18 | 19 | spec.add_runtime_dependency "jekyll", ">= 3.6", "< 5.0" 20 | spec.add_runtime_dependency "jekyll-paginate", "~> 1.1" 21 | spec.add_runtime_dependency "jekyll-sitemap", "~> 1.0" 22 | spec.add_runtime_dependency "jekyll-feed", "~> 0.1" 23 | spec.add_runtime_dependency "jemoji", "~> 0.8" 24 | 25 | spec.add_development_dependency "bundler" 26 | spec.add_development_dependency "rake", "~> 10.0" 27 | end 28 | -------------------------------------------------------------------------------- /example/Human_Breast_Andersson_10142021_ST_A1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiawenChenn/STimage-1K4M/856ea1357d1951c343536d091dac081cb13c3d4f/example/Human_Breast_Andersson_10142021_ST_A1.png -------------------------------------------------------------------------------- /metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "@type": "sc:Dataset", 3 | "name": "Example data", 4 | "description": "Example coordinates data.", 5 | "license": "MIT License", 6 | "url": "https://github.com/JiawenChenn/STimage-1K4M", 7 | "distribution": [ 8 | { 9 | "@type": "cr:FileObject", 10 | "@id": "Human_Breast_Andersson_10142021_ST_A1_coord.csv", 11 | "name": "Human_Breast_Andersson_10142021_ST_A1_coord.csv", 12 | "contentUrl": "example/Human_Breast_Andersson_10142021_ST_A1_coord.csv", 13 | "encodingFormat": "text/csv", 14 | } 15 | ], 16 | "recordSet": [ 17 | { 18 | "@type": "cr:RecordSet", 19 | "name": "coord", 20 | "description": "Spatial coordinate data.", 21 | "field": [ 22 | { 23 | "@type": "cr:Field", 24 | "name": "yaxis", 25 | "description": "The yaxis for spot.", 26 | "dataType": "sc:Float", 27 | "references": { 28 | "fileObject": { "@id": "Human_Breast_Andersson_10142021_ST_A1_coord.csv" }, 29 | "extract": { 30 | "column": "yaxis" 31 | } 32 | } 33 | }, 34 | { 35 | "@type": "cr:Field", 36 | "name": "xaxis", 37 | "description": "The xaxis for spot.", 38 | "dataType": "sc:Float", 39 | "references": { 40 | "fileObject": { "@id": "Human_Breast_Andersson_10142021_ST_A1_coord.csv" }, 41 | "extract": { 42 | "column": "xaxis" 43 | } 44 | } 45 | } 46 | ] 47 | } 48 | ] 49 | } 50 | --------------------------------------------------------------------------------