Web help, web documents. Even easier
I present to you a bundle of libraries for creating web documents using Markdown markup.
I want to say right away that there are many libraries of this kind in the network, but this one has fundamental differences and has more functionality in comparison with them. What is called powered by.
This is a story about the prototype and full documentation yet. There may be (and are needed) changes in the code and architecture of the library, but the markup language and the page template are already practically stable.
To create we need any text editor.
To begin, create a page template or download the page template.html link. If the template itself opens in this browser via this link, and its file does not load, just tell Save As (HTML only) to get started, all you need is HTML code. If everything is correct, the file contains approximately such a simple page template:
Explanation for cautious: in the absence of a script, css is loaded from the native bootstrap CDN, and the script is from the repository on the githaba, there are no malicious programs there.
Next we use this code as a template.
')
If you open this page in the browser, we see formatted text. This is Markdown markup text for its formatting. A very common way to markup text on the Internet, most readers have probably already met with it.
The above micro template is already running in limited mode, even without additional files. You can edit the text, and publish in this form on your website. True, it will not be very responsive, and sometimes crashes, since the bundle in this mode is loaded from my repository. Slightly easier said - if you do not add the document.min.js script and css - it can slow down a bit and does not work offline. However, for some needs, and so fit, and of the advantages - ease of creation.
Go to aplib.imtqy.com/markdown-site-template , download the template, extract from the archive document.min.js and bootstrap.css and put them in the folder next to our pages. This is actually the bundle itself and css, that is, the library. To view the site (or document) in normal mode and offline is enough. Although this is not all.
In place of bootstrap.css can be any bootstrap-compatible theme or native bootstrap, but with a custom setting, that is, customized. Check out a selection of free themes on bootswatch.com . Not without some flaws, but certainly an excellent selection. On the project site you can see how these themes change the appearance of the site.
Down with copy-paste! Navigation menu, header and basement is better to put in a separate shared file. You can see in the same archive as an example user.js containing common page elements.
But there are still plug-in components and mods. They are connected by copying to a specific folder on the site.
This is what distinguishes this band from all the others. Markdown markup and so it expands with a simple html code, and then also with arbitrary software components, and in the final version it will also be with arbitrary nesting. Look at the site examples from the components section, it will be clearer. A component can be both a design element and a control program, a formula or a site markup. And in the component, in its text, if it is visual, we can also build our small universe. These are like nested templates, but only better. And components can be loaded in the background, templates do not know how.
If you get to this point, you may want to place the site made on this principle in the network and want to index it in Google. That's exactly what I did. Since this is a JS site, for normal indexing in Google you will need to feed the search engine sitemap.xml, otherwise Google does not see the internal links. This file can be created using sitemap.html. The alternative to sitemap.xml is to generate static html after creating the pages, the option is more reliable and there is such an opportunity, but the documentation for this mode still needs to be written.
It seems to be clearly mentioned the most important features. Now about how and from what it is made. These are mostly glued very popular jquery, bootstrap, marked, doT libraries slightly polished on top with uglifyjs. controls.js is the core of the component system that allows you to extend the markup language. Building libraries with a simple script, without a primer.
Despite the fact that this project is educational for me, unfortunately I haven’t met any serious difficulties in implementation and cannot talk about the overcoming. I can only point out sometimes nontrivial Markdown markup rules in complex cases. It is of course simple, but for a long time I could not understand and remember some formatting features.
The license is the most pleasant. This is not for you the GPL, this is MIT, the triumph of freedom and equality.
Site aplib.imtqy.com/markdown-site-template
Repository github.com/aplib/markdown-site-template
This is the first overview post and there are no results of beta testing and discussion yet, so I don’t write about the internals, although everything inside is quite interesting, the bundle is such a small web OS and there is something to tell.
I want to say right away that there are many libraries of this kind in the network, but this one has fundamental differences and has more functionality in comparison with them. What is called powered by.
This is a story about the prototype and full documentation yet. There may be (and are needed) changes in the code and architecture of the library, but the markup language and the page template are already practically stable.
The easiest way to create an online help or website. Tutorial.
To create we need any text editor.
Option 1. Starting.
To begin, create a page template or download the page template.html link. If the template itself opens in this browser via this link, and its file does not load, just tell Save As (HTML only) to get started, all you need is HTML code. If everything is correct, the file contains approximately such a simple page template:
<!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="utf-8"> <title>Example</title> <script src="document.min.js" id='DOC' onerror="var l=document.createElement('link'),s=document.createElement('script');l.rel='stylesheet';l.href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css';l.id='bootstrap.css';l.auto='1';document.head.insertBefore(l,document.getElementById('DOC'));s.src='http://aplib.imtqy.com/document.min.js';document.head.appendChild(s);"></script> </head> <body> <!--fixed-top-bar %navbar( * [Home](index.html) * [Page1](page1.html) )%navbar --> <!--header-panel # Insert header here site description --> <!--content-panel # content text ## content text ### content text content text --> <!--footer-panel footer here --> <noscript><div class="alert alert-warning">This Website requires your browser to be JavaScript enabled.</div></noscript> </body></html> Explanation for cautious: in the absence of a script, css is loaded from the native bootstrap CDN, and the script is from the repository on the githaba, there are no malicious programs there.
Next we use this code as a template.
')
If you open this page in the browser, we see formatted text. This is Markdown markup text for its formatting. A very common way to markup text on the Internet, most readers have probably already met with it.
The above micro template is already running in limited mode, even without additional files. You can edit the text, and publish in this form on your website. True, it will not be very responsive, and sometimes crashes, since the bundle in this mode is loaded from my repository. Slightly easier said - if you do not add the document.min.js script and css - it can slow down a bit and does not work offline. However, for some needs, and so fit, and of the advantages - ease of creation.
Option 2. One-page site or a site of two or three pages.
Go to aplib.imtqy.com/markdown-site-template , download the template, extract from the archive document.min.js and bootstrap.css and put them in the folder next to our pages. This is actually the bundle itself and css, that is, the library. To view the site (or document) in normal mode and offline is enough. Although this is not all.
Option 3. Almost complete.
Topics
In place of bootstrap.css can be any bootstrap-compatible theme or native bootstrap, but with a custom setting, that is, customized. Check out a selection of free themes on bootswatch.com . Not without some flaws, but certainly an excellent selection. On the project site you can see how these themes change the appearance of the site.
user.js
Down with copy-paste! Navigation menu, header and basement is better to put in a separate shared file. You can see in the same archive as an example user.js containing common page elements.
Components
But there are still plug-in components and mods. They are connected by copying to a specific folder on the site.
This is what distinguishes this band from all the others. Markdown markup and so it expands with a simple html code, and then also with arbitrary software components, and in the final version it will also be with arbitrary nesting. Look at the site examples from the components section, it will be clearer. A component can be both a design element and a control program, a formula or a site markup. And in the component, in its text, if it is visual, we can also build our small universe. These are like nested templates, but only better. And components can be loaded in the background, templates do not know how.
sitemap.xml
If you get to this point, you may want to place the site made on this principle in the network and want to index it in Google. That's exactly what I did. Since this is a JS site, for normal indexing in Google you will need to feed the search engine sitemap.xml, otherwise Google does not see the internal links. This file can be created using sitemap.html. The alternative to sitemap.xml is to generate static html after creating the pages, the option is more reliable and there is such an opportunity, but the documentation for this mode still needs to be written.
Project.
It seems to be clearly mentioned the most important features. Now about how and from what it is made. These are mostly glued very popular jquery, bootstrap, marked, doT libraries slightly polished on top with uglifyjs. controls.js is the core of the component system that allows you to extend the markup language. Building libraries with a simple script, without a primer.
Despite the fact that this project is educational for me, unfortunately I haven’t met any serious difficulties in implementation and cannot talk about the overcoming. I can only point out sometimes nontrivial Markdown markup rules in complex cases. It is of course simple, but for a long time I could not understand and remember some formatting features.
The license is the most pleasant. This is not for you the GPL, this is MIT, the triumph of freedom and equality.
Site aplib.imtqy.com/markdown-site-template
Repository github.com/aplib/markdown-site-template
This is the first overview post and there are no results of beta testing and discussion yet, so I don’t write about the internals, although everything inside is quite interesting, the bundle is such a small web OS and there is something to tell.
Source: https://habr.com/ru/post/196248/
All Articles