mirror of
https://github.com/animate-css/animate.css.git
synced 2024-11-14 00:01:09 +01:00
Fix broken links and update docs topics structure (#1069)
* Fixes #1067 docs compiler regex * Fix bronken links #1068 * Update docs topics structure
This commit is contained in:
Elton Mesquita
GitHub
parent
9254c0d535
commit
7d551f0fbf
6 changed files with 42 additions and 28 deletions
|
|
@ -798,7 +798,7 @@
|
|||
<footer class="intro-footer">
|
||||
<p>
|
||||
Another thing from
|
||||
<a href="Daniel Eden" target="_blank" title="Daniel Eden">Daniel Eden</a> and
|
||||
<a href="https://daneden.me" target="_blank" title="Daniel Eden">Daniel Eden</a> and
|
||||
<a href="#contributors" title="Contributors">friends</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
|
@ -1030,7 +1030,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
|
|||
</section>
|
||||
|
||||
|
||||
<section class="docSection-best" id="best">
|
||||
<section class="docSection-best-practices" id="best-practices">
|
||||
<h2>Best practices</h2>
|
||||
<p>Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.</p>
|
||||
<h3>Meaningful animations</h3>
|
||||
|
|
@ -1158,7 +1158,7 @@ animateCSS('.my-element', 'animate__bounce').then((message) => {
|
|||
</section>
|
||||
|
||||
|
||||
<section class="docSection-custom" id="custom">
|
||||
<section class="docSection-custom-builds" id="custom-builds">
|
||||
<h2>Custom Builds</h2>
|
||||
<p>Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.</p>
|
||||
<p>First of all, you’ll need Node and all other dependencies:</p>
|
||||
|
|
@ -1201,17 +1201,11 @@ $ npm install
|
|||
</section>
|
||||
|
||||
|
||||
<section class="docSection-contributing" id="contributing">
|
||||
<section class="docSection-accessibility" id="accessibility">
|
||||
<h2>Accessibility</h2>
|
||||
<p>Animate.css supports the <a href="https://webkit.org/blog/7551/responsive-design-for-motion/"><code>prefers-reduced-motion</code> media query</a> so that users with motion sensitivity can opt-out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.</p>
|
||||
<h2>License</h2>
|
||||
<p>Animate.css is licensed under the MIT license. (<a href="https://opensource.org/licenses/MIT">https://opensource.org/licenses/MIT</a>)</p>
|
||||
<h2>Code of Conduct</h2>
|
||||
<p>This project and everyone participating in it are governed by the <a href="CODE_OF_CONDUCT.md">Contributor Covenant Code of Conduct</a>. By participating, you are expected to uphold this code. Please report unacceptable behavior to <a href="mailto:callmeelton@gmail.com">callmeelton@gmail.com</a>.</p>
|
||||
<h2>Contributing</h2>
|
||||
<p>Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a <a href="https://codepen.io">pen</a>. That <strong>last one is important</strong>.</p>
|
||||
|
||||
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/08-contributing.md" title="Edit this on Github">Edit this on Github</a></p>
|
||||
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/08-accessibility.md" title="Edit this on Github">Edit this on Github</a></p>
|
||||
</section>
|
||||
|
||||
|
||||
|
|
@ -1242,6 +1236,18 @@ $ npm install
|
|||
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/09-contributors.md" title="Edit this on Github">Edit this on Github</a></p>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="docSection-license-contributing" id="license-contributing">
|
||||
<h2>License and Contributing</h2>
|
||||
<p>Animate.css is licensed under the MIT license. (<a href="https://opensource.org/licenses/MIT">https://opensource.org/licenses/MIT</a>)</p>
|
||||
<h3>Contributing</h3>
|
||||
<p>Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a <a href="https://codepen.io">pen</a>. That <strong>last one is important</strong>.</p>
|
||||
<h3>Code of Conduct</h3>
|
||||
<p>This project and everyone participating in it are governed by the <a href="https://github.com/animate-css/animate.css/blob/master/CODE_OF_CONDUCT.md">Contributor Covenant Code of Conduct</a>. By participating, you are expected to uphold this code. Please report unacceptable behavior to <a href="mailto:callmeelton@gmail.com">callmeelton@gmail.com</a>.</p>
|
||||
|
||||
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/09-license-contributing.md" title="Edit this on Github">Edit this on Github</a></p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="meta">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,15 @@ const md = require('markdown-it')({
|
|||
linkify: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* Converts string to slug. This is as simple as can be and doesn't handle much usecases on purpose.
|
||||
* @param {string} text - string to be converted to slug
|
||||
*/
|
||||
|
||||
function convertFileNameToId(text) {
|
||||
return text.toLowerCase().match(/([a-z]+[-]*[a-z])\w+/)[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all the markdown files on a folder, compile them to html and returns
|
||||
* @param {string} dir - folder containing all the .md files
|
||||
|
|
@ -16,7 +25,7 @@ function compileMD(dir = 'sections') {
|
|||
|
||||
const sectionTemplate = (file, content) => {
|
||||
const message = 'Edit this on Github';
|
||||
const fileName = file.replace('.md', '').match(/([a-z])\w+/)[0];
|
||||
const fileName = convertFileNameToId(file);
|
||||
const editURL = `https://github.com/daneden/animate.css/blob/master/docsSource/sections/${file}`;
|
||||
const parsedContent = md.render(content);
|
||||
|
||||
|
|
|
|||
3
docsSource/sections/08-accessibility.md
Normal file
3
docsSource/sections/08-accessibility.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
## Accessibility
|
||||
|
||||
Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt-out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
## Accessibility
|
||||
|
||||
Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt-out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
|
||||
|
||||
## License
|
||||
|
||||
Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)
|
||||
|
||||
## Code of Conduct
|
||||
|
||||
This project and everyone participating in it are governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com).
|
||||
|
||||
## Contributing
|
||||
|
||||
Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](https://codepen.io). That **last one is important**.
|
||||
11
docsSource/sections/09-license-contributing.md
Normal file
11
docsSource/sections/09-license-contributing.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
## License and Contributing
|
||||
|
||||
Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)
|
||||
|
||||
### Contributing
|
||||
|
||||
Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](https://codepen.io). That **last one is important**.
|
||||
|
||||
### Code of Conduct
|
||||
|
||||
This project and everyone participating in it are governed by the [Contributor Covenant Code of Conduct](https://github.com/animate-css/animate.css/blob/master/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com).
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<footer class="intro-footer">
|
||||
<p>
|
||||
Another thing from
|
||||
<a href="Daniel Eden" target="_blank" title="Daniel Eden">Daniel Eden</a> and
|
||||
<a href="https://daneden.me" target="_blank" title="Daniel Eden">Daniel Eden</a> and
|
||||
<a href="#contributors" title="Contributors">friends</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
|
|
|||
Loading…
Reference in a new issue