docs/index.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4       <meta name="viewport" content="width=device-width">
   5       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.css" />
   6       <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   7       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
   8       <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
   9       <style>
  10         @media (max-width: 767px) {
  11           .markdown-body {
  12             padding: 15px;
  13           }
  14
  15           #search {
  16             max-width: 85%;
  17           }
  18         }
  19         body {
  20           overflow: scroll;
  21         }
  22         .markdown-body {
  23           box-sizing: border-box;
  24           min-width: 200px;
  25           max-width: 980px;
  26           margin: 0 auto;
  27           padding: 45px;
  28         }
  29         #search {
  30           border: 1px solid #d1d5da;
  31           padding-left: 30px;
  32           overflow: hidden;
  33         }
  34         .searchCondition {
  35           display: flex;
  36           flex-wrap: wrap;
  37         }
  38         .searchCondition > div {
  39           margin-right: 30px;
  40         }
  41       </style>
  42     </head>
  43     <body>
  44         <div id="app">
  45           <article class="markdown-body">
  46             <div class="searchCondition">
  47               <div>
  48                 <form style="display:flex;">
  49                   <label for="search" style="margin-right: 3px;" >search:</label>
  50                   <div style="position: relative;">
  51                     <input id="search" placeholder="Search all options" v-model="searchCondition">
  52                     <svg style="position: absolute; left: 8px; top: 7px;" class="octicon octicon-search subnav-search-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  53                       <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"></path>
  54                     </svg>
  55                   </div>
  56                 </form>
  57               </div>
  58               <div>
  59                   <label for="stable">stable: </label>
  60                   <input type="checkbox" id="stable" v-model="shouldStable">
  61               </div>
  62             </div>
  63             <div v-html="aboutHtml"></div>
  64             <div v-html="configurationAboutHtml"></div>
  65             <div v-html="outputHtml"></div>
  66           </article>
  67         </div>
  68         <script>
  69             const ConfigurationMdUrl = 'https://raw.githubusercontent.com/rust-lang/rustfmt/master/Configurations.md';
  70             const UrlHash = window.location.hash.replace(/^#/, '');
  71             new Vue({
  72               el: '#app',
  73               data() {
  74                 const configurationDescriptions = [];
  75                 configurationDescriptions.links = {};
  76                 return {
  77                   aboutHtml: '',
  78                   configurationAboutHtml: '',
  79                   searchCondition: UrlHash,
  80                   configurationDescriptions,
  81                   shouldStable: false
  82                 }
  83               },
  84               computed: {
  85                 outputHtml() {
  86                   const ast = this.configurationDescriptions
  87                                   .filter(({ head, text, stable }) => {
  88
  89                                     if (
  90                                       text.includes(this.searchCondition) === false &&
  91                                       head.includes(this.searchCondition) === false
  92                                     ) {
  93                                       return false;
  94                                     }
  95                                     return (this.shouldStable)
  96                                       ? stable === true
  97                                       : true;
  98                                   })
  99                                   .reduce((stack, { value }) => {
 100                                     return stack.concat(value);
 101                                   }, []);
 102                   ast.links = {};
 103                   return marked.parser(ast);
 104                 }
 105               },
 106               created: async function() {
 107                 const res = await axios.get(ConfigurationMdUrl);
 108                 const {
 109                   about,
 110                   configurationAbout,
 111                   configurationDescriptions
 112                 } = parseMarkdownAst(res.data);
 113                 this.aboutHtml = marked.parser(about);
 114                 this.configurationAboutHtml = marked.parser(configurationAbout);
 115                 this.configurationDescriptions = configurationDescriptions;
 116               },
 117               mounted() {
 118                 if (UrlHash === '') return;
 119                 const interval = setInterval(() => {
 120                   const target = document.querySelector(`#${UrlHash}`);
 121                   if (target != null) {
 122                     target.scrollIntoView(true);
 123                     clearInterval(interval);
 124                   }
 125                 }, 100);
 126               }
 127             });
 128             const extractDepthOnes = (ast) => {
 129               return ast.reduce((stack, next) => {
 130                 if (next.depth === 1) {
 131                   stack.push([]);
 132                 }
 133                 const lastIndex = stack.length - 1;
 134                 stack[lastIndex].push(next);
 135                 return stack;
 136               }, []);
 137             }
 138             const extractDepthTwos = (ast) => {
 139               return ast.map((elem) => {
 140                 return elem.reduce((stack, next) => {
 141                   if (next.depth === 2) {
 142                     stack.push([]);
 143                   }
 144                   const lastIndex = stack.length - 1;
 145                   stack[lastIndex].push(next);
 146                   return stack;
 147                 },
 148                 [[]]);
 149               });
 150             }
 151             const createHeadAndValue = (ast) => {
 152               return ast.map((elem) => {
 153                 return elem.map((val) => {
 154                   return {
 155                     head: val[0].text,
 156                     value: val,
 157                     stable: val.some((elem) => {
 158                       return !!elem.text && elem.text.includes("**Stable**: Yes")
 159                     }),
 160                     text: val.reduce((result, next) => {
 161                       return next.text != null
 162                         ? `${result} ${next.text}`
 163                         : result;
 164                     }, '')
 165                   }
 166                 });
 167               })
 168             }
 169             const parseMarkdownAst = (rawMarkdown) => {
 170               const ast = marked.lexer(rawMarkdown);
 171               const depthOnes = extractDepthOnes(ast);
 172               const depthTwos = extractDepthTwos(depthOnes);
 173               const [
 174                 abouts, configurations
 175               ] = createHeadAndValue(depthTwos);
 176               const about = abouts[0].value;
 177               about.links = {};
 178               const [
 179                 configurationAbout, ...configurationDescriptions
 180               ] = configurations;
 181               configurationAbout.value.links = {};
 182
 183               return {
 184                 about,
 185                 configurationAbout: configurationAbout.value,
 186                 configurationDescriptions
 187               };
 188             }
 189         </script>
 190     </body>
 191 </html>