Compare commits

...

66 Commits

Author SHA1 Message Date
jeffreytse
8ca6d144a4 release: v0.9.3 2020-10-07 18:46:06 +08:00
jeffreytse
7847cac8c4 fix: inline code corrupted in table (#27) 2020-10-07 18:41:45 +08:00
jeffreytse
6973d6ab7e docs: update README.md 2020-10-03 09:22:31 +08:00
jeffreytse
ac287926a9 release: v0.9.2 2020-09-18 12:35:17 +08:00
jeffreytse
4195a431be docs: update README.md 2020-09-16 18:40:38 +08:00
jeffreytse
e1a5bf7356 feat: support svg object for diagrams (#23,#24,#25) 2020-09-16 18:38:26 +08:00
jeffreytse
b29469b7b2 feat: add images related functions 2020-09-16 18:33:47 +08:00
jeffreytse
7d86dcbe03 docs: update README.md 2020-08-29 20:11:00 +08:00
jeffreytse
793e6591a3 chore: revise .travis.yml format 2020-08-29 20:08:23 +08:00
Dirk van Oosterbosch
9b283f62e5
docs: revise the link to the PlantUML website (#22) 2020-08-28 18:12:27 +08:00
jeffreytse
ccd9c971c1 chore: init rspec 2020-08-16 17:30:23 +08:00
jeffreytse
c15932fd45 chore: update gemspec summary 2020-08-10 16:29:48 +08:00
jeffreytse
d0e4f6d9aa release: v0.9.1 2020-08-10 16:27:34 +08:00
jeffreytse
643072fdf3 docs: update README.md 2020-08-10 16:24:28 +08:00
jeffreytse
92ee45f8b2 feat: support spotify and soundcloud 2020-08-10 11:52:51 +08:00
jeffreytse
c596868051 refactor: rename video-processor to media-processor 2020-08-09 19:06:09 +08:00
jeffreytse
de62d61a6a feat: support rendering audio link 2020-08-09 19:04:29 +08:00
jeffreytse
3852a48aba docs: update README.md 2020-08-01 11:31:24 +08:00
jeffreytse
9b7ed3a951 release: v0.9.0 2020-08-01 11:30:59 +08:00
jeffreytse
2fa6177694 feat: support mathjax v3 2020-08-01 11:22:42 +08:00
jeffreytse
c98006df64 fix: liquid filter of percent form broken (#21) 2020-07-31 21:18:16 +08:00
jeffreytse
c59b4e67f5 release: v0.8.7 2020-07-30 12:29:30 +08:00
jeffreytse
58b9d5e784 fix: wrong ext matched if path including dots 2020-07-30 12:25:48 +08:00
jeffreytse
d094789ad4 fix: link and image in same row not working (#20) 2020-07-28 11:59:32 +08:00
jeffreytse
f8f6ffe26e docs: update README.md 2020-07-26 01:05:18 +08:00
jeffreytse
44ec868188 release: v0.8.6 2020-07-26 00:47:40 +08:00
jeffreytse
2e99bcfb84 docs: update README.md 2020-07-26 00:43:56 +08:00
jeffreytse
04ff451208 feat: support table cell attribute list (#19) 2020-07-25 20:54:31 +08:00
jeffreytse
a85ec310cd fix: html inside table cell not working 2020-07-25 14:09:27 +08:00
jeffreytse
c916d10c6b release: v0.8.5 2020-07-21 10:30:25 +08:00
jeffreytse
430b992521 fix: error with permalink file extension (#18) 2020-07-21 10:23:25 +08:00
jeffreytse
e1f1aa9006 release: v0.8.4 2020-07-16 13:54:47 +08:00
jeffreytse
6d3bd946f2 fix: liquid filter tag broken issue 2020-07-16 13:05:04 +08:00
jeffreytse
8e932a4d32 fix: correct style of table cell 2020-07-16 13:00:35 +08:00
jeffreytse
006983a62e fix: emoji img css class and block display issue 2020-07-09 23:07:13 +08:00
jeffreytse
59d47ecbc8 release: v0.8.3 2020-07-04 11:39:18 +08:00
jeffreytse
4c07bdcd8d docs: update README.md 2020-07-04 11:36:18 +08:00
jeffreytse
a3a1cc2b88 fix: math expression within pipline broken (#14) 2020-07-03 13:00:32 +08:00
jeffreytse
68cc44e2bd release: v0.8.2 2020-07-02 15:48:46 +08:00
jeffreytse
53a203ff66 fix: math expression with pipeline not working 2020-07-02 15:45:09 +08:00
jeffreytse
40103470cd perf: match markdown table more exactly 2020-07-02 15:42:54 +08:00
jeffreytse
bf641a67f6 fix: table in code or pre html tag not skipped 2020-07-01 23:46:56 +08:00
jeffreytse
7b31d51d88 refactor: better maintainability 2020-06-28 12:28:40 +08:00
jeffreytse
686e24b634 release: v0.8.1 2020-06-25 12:29:05 +08:00
jeffreytse
a1810890e5 docs: update README.md 2020-06-24 14:46:29 +08:00
jeffreytse
137a0bafbf fix: css id and class with video id not working 2020-06-24 14:29:38 +08:00
jeffreytse
21e4435a74 docs: update README.md 2020-06-23 09:56:43 +08:00
jeffreytse
724e20e1a9 release: v0.8.0 2020-06-22 23:10:16 +08:00
jeffreytse
afce6b2191 chore: update gemspec summary 2020-06-22 23:07:44 +08:00
jeffreytse
ed231ba8c2 chore: change default syntax of code block 2020-06-22 23:03:49 +08:00
jeffreytse
a6842ffa27 docs: update README.md 2020-06-22 22:54:43 +08:00
jeffreytse
e1dbca31a0 refactor: revise pre-fetch mode of plantuml 2020-06-22 18:44:45 +08:00
jeffreytse
7e495e9468 refactor: revise pre-fetch mode of mermaid 2020-06-22 18:43:40 +08:00
jeffreytse
a3cc560007 feat: add mermaid-processor to default config 2020-06-22 18:07:11 +08:00
jeffreytse
425f90cdaf feat: add mermaid processor 2020-06-22 18:06:50 +08:00
jeffreytse
5f3f23dcb9 feat: add flexible config for emoji processor 2020-06-22 18:05:30 +08:00
jeffreytse
d553212c84 feat: add flexible config for video processor 2020-06-22 18:05:03 +08:00
jeffreytse
7b6cf5d5db feat: add flexible config for plantuml processor 2020-06-22 18:04:06 +08:00
jeffreytse
71563cceb6 release: v0.7.3 2020-06-22 12:31:53 +08:00
jeffreytse
a30d7e46f0 fix: load site config broke in group plugins (#12) 2020-06-22 12:16:02 +08:00
jeffreytse
b3b7d1fb15 release: v0.7.2 2020-06-21 22:34:51 +08:00
jeffreytse
5b1b41889c fix: processor default config not working 2020-06-21 22:31:59 +08:00
jeffreytse
36a58e6ab8 chore: remove unused yaml requirement 2020-06-21 18:00:19 +08:00
jeffreytse
bfcd31a493 release: v0.7.1 2020-06-19 02:04:20 +08:00
jeffreytse
ed78592816 fix: specify config files not working (#11) 2020-06-19 01:58:55 +08:00
jeffreytse
6f5a0b6912 docs: update README.md 2020-06-15 13:42:14 +08:00
18 changed files with 1014 additions and 309 deletions

3
.rspec Normal file
View File

@ -0,0 +1,3 @@
--color
--format progress
--require spec_helper

View File

@ -1,13 +1,13 @@
language: ruby
cache: bundler
rvm:
- 2.7
- 2.3
- 2.7
- 2.3
env:
global:
- NOKOGIRI_USE_SYSTEM_LIBRARIES=true
- NOKOGIRI_USE_SYSTEM_LIBRARIES=true
matrix:
- JEKYLL_VERSION="~> 3.8"
- JEKYLL_VERSION="~> 3.8"
matrix:
include:
- rvm: 2.7
@ -15,8 +15,8 @@ matrix:
- rvm: 2.7
env: JEKYLL_VERSION=">= 4.0.0"
before_install:
- gem update --system
- gem install bundler
- gem update --system
- gem install bundler
before_script: bundle update
script: script/cibuild
notifications:

329
README.md
View File

@ -101,21 +101,26 @@ Spaceship is a minimalistic, powerful and extremely customizable [Jekyll](https:
- [1.3 Headerless](#headerless)
- [1.4 Cell Alignment](#cell-alignment)
- [1.5 Cell Markdown](#cell-markdown)
- [1.6 Cell Inline Attributes](#cell-inline-attributes)
- [2. MathJax Usage](#2-mathjax-usage)
- [2.1 Performance Optimization](#21-performance-optimization)
- [2.2 How to use?](#22-how-to-use)
- [3. PlantUML Usage](#3-plantuml-usage)
- [4. Video Usage](#4-video-usage)
- [4.1 Youtube Usage](#youtube-usage)
- [4.2 Vimeo Usage](#vimeo-usage)
- [4.3 DailyMotion Usage](#dailymotion-usage)
- [4.4 General Video Usage](#general-video-usage)
- [5. Hybrid HTML with Markdown](#5-hybrid-html-with-markdown)
- [6. Markdown Polyfill](#6-markdown-polyfill)
- [6.1 Escape Ordered List](#escape-ordered-list)
- [7. Emoji Usage](#7-emoji-usage)
- [7.1 Emoji Customizing](#71-emoji-customizing)
- [8. Modifying Element Usage](#8-modifying-element-usage)
- [4. Mermaid Usage](#4-mermaid-usage)
- [5. Media Usage](#5-media-usage)
- [5.1 Youtube Usage](#youtube-usage)
- [5.2 Vimeo Usage](#vimeo-usage)
- [5.3 DailyMotion Usage](#dailymotion-usage)
- [5.4 Spotify Usage](#spotify-usage)
- [5.5 SoundCloud Usage](#soundcloud-usage)
- [5.6 General Video Usage](#general-video-usage)
- [5.7 General Audio Usage](#general-audio-usage)
- [6. Hybrid HTML with Markdown](#6-hybrid-html-with-markdown)
- [7. Markdown Polyfill](#7-markdown-polyfill)
- [7.1 Escape Ordered List](#71-escape-ordered-list)
- [8. Emoji Usage](#8-emoji-usage)
- [8.1 Emoji Customizing](#81-emoji-customizing)
- [9. Modifying Element Usage](#9-modifying-element-usage)
- [Credits](#credits)
- [Contributing](#contributing)
- [License](#license)
@ -139,7 +144,12 @@ plugins:
- jekyll-spaceship
```
**💡 Tip:** Note that GitHub Pages runs in `safe` mode and only allows [a set of whitelisted plugins](https://pages.github.com/versions/). To use the gem in GitHub Pages, you need to build locally or use CI (e.g. [travis](https://travis-ci.org/), [github workflow](https://help.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow)) and deploy to your `gh-pages` branch. [Click here for more information.](https://jekyllrb.com/docs/continuous-integration/github-actions/) (e.g. [https://github.com/jeffreytse/jekyll-jeffreytse-blog](https://github.com/jeffreytse/jekyll-jeffreytse-blog))
**💡 Tip:** Note that GitHub Pages runs in `safe` mode and only allows [a set of whitelisted plugins](https://pages.github.com/versions/). To use the gem in GitHub Pages, you need to build locally or use CI (e.g. [travis](https://travis-ci.org/), [github workflow](https://help.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow)) and deploy to your `gh-pages` branch.
### Additions for Unlimited GitHub Pages
* Here is a GitHub Action named [jekyll-deploy-action](https://github.com/jeffreytse/jekyll-deploy-action) for Jekyll site deployment conveniently. 👍
* Here is a [Jekyll site](https://github.com/jeffreytse/jekyll-jeffreytse-blog) using Travis to build and deploy to GitHub Pages for your references.
## Configuration
@ -148,24 +158,57 @@ This plugin runs with the following configuration options by default. Alternativ
```yml
# Where things are
jekyll-spaceship:
# default enabled processors
processors:
- table-processor
- mathjax-processor
- plantuml-processor
- mermaid-processor
- polyfill-processor
- video-processor
- media-processor
- emoji-processor
- element-processor
mathjax-processor:
src: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
src:
- https://polyfill.io/v3/polyfill.min.js?features=es6
- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
config:
tex2jax:
tex:
inlineMath:
- ['$','$']
- ['\(','\)']
svg:
fontCache: 'global'
plantuml-processor:
src: http://www.plantuml.com/plantuml/png/
mode: default # mode value 'pre-fetch' for fetching image at building stage
css:
class: plantuml
syntax:
code: 'plantuml!'
custom: ['@startuml', '@enduml']
src: http://www.plantuml.com/plantuml/svg/
mermaid-processor:
mode: default # mode value 'pre-fetch' for fetching image at building stage
css:
class: mermaid
syntax:
code: 'mermaid!'
custom: ['@startmermaid', '@endmermaid']
config:
theme: default
src: https://mermaid.ink/svg/
media-processor:
default:
id: 'media-{id}'
class: 'media'
width: '100%'
height: 350
frameborder: 0
style: 'max-width: 600px; outline: none;'
allow: 'encrypted-media; picture-in-picture'
emoji-processor:
css:
class: emoji
src: https://github.githubassets.com/images/icons/emoji/
```
@ -191,13 +234,13 @@ This feature is contributed by [pmccloghrylaing](https://github.com/pmccloghryla
```markdown
| Stage | Direct Products | ATP Yields |
| -----------------: | --------------: | ---------: |
| Glycolysis | 2 ATP | |
| ^^ | 2 NADH | 3--5 ATP |
| Glycolysis | 2 ATP ||
| ^^ | 2 NADH | 3--5 ATP |
| Pyruvaye oxidation | 2 NADH | 5 ATP |
| Citric acid cycle | 2 ATP ||
| ^^ | 6 NADH | 15 ATP |
| ^^ | 2 FADH | 3 ATP |
| 30--32 ATP |||
| ^^ | 6 NADH | 15 ATP |
| ^^ | 2 FADH | 3 ATP |
| 30--32 ATP |||
```
Code above would be parsed as:
@ -398,7 +441,7 @@ Table cell can be set alignment separately.
```markdown
| : Fruits \|\| Food : |||
| :--------- | :-------- | :-------- |
| Apple | : Apple :| Apple \
| Apple | : Apple : | Apple \
| Banana | Banana | Banana \
| Orange | Orange | Orange |
| : Rowspan is 4 : || How's it? |
@ -499,6 +542,61 @@ Rowspan is 4
</tbody>
</table>
#### Cell Inline Attributes
This feature is very useful for custom cell such as using inline style. (e.g., background, color, font)
The idea and syntax comes from the [Maruku](http://maruku.rubyforge.org/) package.
[](https://kramdown.gettalong.org/syntax.html#block-ials)
Following are some examples of attributes definitions (ALDs) and afterwards comes the syntax explanation:
```markdown
{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}
```
An ALD line has the following structure:
- a left brace, optionally preceded by up to three spaces,
- followed by a colon, the id and another colon,
- followed by attribute definitions (allowed characters are backslash-escaped closing braces or any character except a not escaped closing brace),
- followed by a closing brace and optional spaces until the end of the line.
If there is more than one ALD with the same reference name, the attribute definitions of all the ALDs are processed like they are defined in one ALD.
An inline attribute list (IAL) is used to attach attributes to another element.
Here are some examples for span IALs:
```markdown
{: #id .cls1 .cls2} <!-- #id <=> id="id", .cls1 .cls2 <=> class="cls1 cls2" -->
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}
```
Here is an example for custom table cell with IAL:
```markdown
{:color-style: style="background: black;"}
{:color-style: style="color: white;"}
{:text-style: style="font-weight: 800; text-decoration: underline;"}
|: Here's an Inline Attribute Lists example :||||
| ------- | ------------------ | -------------------- | ------------------ |
|: :|: <div style="color: red;"> &lt; Normal HTML Block > </div> :|||
| ^^ | Red {: .cls style="background: orange" } |||
| ^^ IALs | Green {: #id style="background: green; color: white" } |||
| ^^ | Blue {: style="background: blue; color: white" } |||
| ^^ | Black {: color-style text-style } |||
```
Code above would be parsed as:
<img width="580px" src="https://user-images.githubusercontent.com/9413601/88461592-738afb00-ced7-11ea-9aac-3179023742b0.png" alt="IALs">
Additionally, [here](https://kramdown.gettalong.org/syntax.html#block-ials) you can learn more details about IALs.
### 2. MathJax Usage
[MathJax](http://www.mathjax.org/) is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers.
@ -539,20 +637,20 @@ Code above would be parsed as:
### 3. PlantUML Usage
[PlantUML](http://plantuml.sourceforge.net/) is a component that allows to quickly write:
[PlantUML](https://plantuml.com) is a component that allows to quickly write:
- sequence diagram,
- use case diagram,
- class diagram,
- activity diagram,
- component diagram,
- state diagram
- state diagram,
- object diagram
There are two ways to create a diagram in your Jekyll blog page:
````markdown
```plantuml
````
```plantuml!
Bob -> Alice : hello world
```
````
@ -569,25 +667,72 @@ Code above would be parsed as:
![PlantUML Diagram](https://user-images.githubusercontent.com/9413601/82813883-9180b300-9ec8-11ea-8778-f450e0056938.png)
### 4. Video Usage
### 4. Mermaid Usage
How often did you find yourself googling "**How to embed a video in markdown?**"
[Mermaid](https://mermaid-js.github.io/) is a Javascript based diagramming and charting tool. It generates diagrams flowcharts and more, using markdown-inspired text for ease and speed.
While its not possible to embed a video in markdown, the best and easiest way is to extract a frame from the video. To add videos to your markdown files easier I developped this tool for you, and it will parse the video link inside the image block automatically.
It allows to quickly write:
**For now, these video links parsing are provided:**
- flow chart,
- pie chart,
- sequence diagram,
- class diagram,
- state diagram,
- entity relationship diagram,
- user journey,
- gantt
There are two ways to create a diagram in your Jekyll blog page:
````
```mermaid!
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
```
````
or
```markdown
@startmermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
@endmermaid
```
Code above would be parsed as:
![Mermaid Diagram](https://user-images.githubusercontent.com/9413601/85282355-2e317300-b4be-11ea-9c30-8f9d61540d14.png)
### 5. Media Usage
How often did you find yourself googling "**How to embed a video/audio in markdown?**"
While its not possible to embed a video/audio in markdown, the best and easiest
way is to extract a frame from the video/audio. To add videos/audios to your
markdown files easier I developped this tool for you, and it will parse the
video/audio link inside the image block automatically.
**For now, these media links parsing are provided:**
- Youtube
- Vimeo
- DailyMotion
- General Video ( mp4 | avi | webm | ogg | ogv | 3gp | flv | mov ... )
- Spotify
- SoundCloud
- General Video ( mp4 | avi | ogg | ogv | webm | 3gp | flv | mov ... )
- General Audio ( mp3 | wav | ogg | mid | midi | aac | wma ... )
There are two ways to embed a video in your Jekyll blog page:
There are two ways to embed a video/audio in your Jekyll blog page:
Inline-style:
```markdown
![]({video-link})
![]({media-link})
```
Reference-style:
@ -595,17 +740,15 @@ Reference-style:
```markdown
![][{reference}]
[{reference}]: {video-link}
[{reference}]: {media-link}
```
For configuring video attributes (e.g, width, height), just adding query string to
For configuring media attributes (e.g, width, height), just adding query string to
the link as below:
```markdown
![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800&height=500)
```
```markdown
![](https://www.dailymotion.com/video/x7tfyq3?width=100%&height=400&autoplay=1)
```
@ -613,9 +756,7 @@ the link as below:
```markdown
![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)
```
```markdown
![](//www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800&height=500)
```
@ -623,9 +764,7 @@ the link as below:
```markdown
![](https://vimeo.com/263856289)
```
```markdown
![](https://vimeo.com/263856289?width=500&height=320)
```
@ -633,28 +772,47 @@ the link as below:
```markdown
![](https://www.dailymotion.com/video/x7tfyq3)
```
```markdown
![](https://dai.ly/x7tgcev?width=100%&height=400)
```
#### Spotify Usage
```markdown
![](http://open.spotify.com/track/4Dg5moVCTqxAb7Wr8Dq2T5)
```
<image width="600" src="https://user-images.githubusercontent.com/9413601/89762618-5d11b000-db23-11ea-81db-35cc3682b234.png">
#### SoundCloud Usage
```markdown
![](https://soundcloud.com/aviciiofficial/preview-avicii-vs-lenny)
```
<image width="600" src="https://user-images.githubusercontent.com/9413601/89762969-1c666680-db24-11ea-97e3-4340f7fac7ac.png">
#### General Video Usage
```markdown
![](//www.html5rocks.com/en/tutorials/video/basics/devstories.webm)
```
```markdown
![](//techslides.com/demos/sample-videos/small.ogv?allow=autoplay)
```
```markdown
![](//techslides.com/demos/sample-videos/small.mp4?width=400)
```
#### General Audio Usage
### 5. Hybrid HTML with Markdown
```markdown
![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3)
![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3?autoplay=1&loop=1)
```
<image width="300" src="https://user-images.githubusercontent.com/9413601/89762143-68181080-db22-11ea-8467-e8b2a8a96ae5.png">
### 6. Hybrid HTML with Markdown
As markdown is not only a lightweight markup language with plain-text-formatting syntax, but also an easy-to-read and easy-to-write plain text format, so writing a hybrid HTML with markdown is an awesome choice.
@ -668,7 +826,7 @@ It's easy to write markdown inside HTML:
| : Fruits \|\| Food : |||
| :--------- | :-------- | :-------- |
| Apple | : Apple :| Apple \
| Apple | : Apple : | Apple \
| Banana | Banana | Banana \
| Orange | Orange | Orange |
| : Rowspan is 4 : || How's it? |
@ -688,7 +846,7 @@ Bob -> Alice : hello
</script>
```
### 6. Markdown Polyfill
### 7. Markdown Polyfill
It allows us to polyfill features for extending markdown syntax.
@ -696,7 +854,7 @@ It allows us to polyfill features for extending markdown syntax.
- Escape ordered list
#### Escape Ordered List
#### 7.1 Escape Ordered List
A backslash at begin to escape the ordered list.
@ -730,7 +888,7 @@ Escaped:
10. List item Cafe.
```
### 7. Emoji Usage
### 8. Emoji Usage
GitHub-flavored emoji images and names would allow emojifying content such as: it's raining :cat:s and :dog:s!
Noted that emoji images are served from the GitHub.com CDN, with a base URL of [https://github.githubassets.com](https://github.githubassets.com), which results in emoji image URLs like [https://github.githubassets.com/images/icons/emoji/unicode/1f604.png](https://github.githubassets.com/images/icons/emoji/unicode/1f604.png).
@ -745,7 +903,7 @@ I give this plugin two :+1:!
I give this plugin two :+1:!
#### 7.1 Emoji Customizing
#### 8.1 Emoji Customizing
If you'd like to serve emoji images locally, or use a custom emoji source, you can specify so in your `_config.yml` file:
@ -757,11 +915,11 @@ jekyll-spaceship:
See the [Gemoji](https://github.com/github/gemoji) documentation for generating image files.
### 8. Modifying Element Usage
### 9. Modifying Element Usage
It allows us to modify elements via `CSS3 selectors`. Through it you can easily
modify the attributes of a element tag, replace the child nodes and so on, it's
very flexible, but here is example usage for modifying a document:
modify the attributes of an element tag, replace the children nodes and so on,
it's very flexible, but here is example usage for modifying a document:
```yml
# Here is a comprehensive example
@ -774,7 +932,7 @@ jekyll-spaceship:
props: # Replace element properties
title: Good image # Add a title attribute
src: ['(^.*$)', '\0?a=123'] # Add query string to src attribute by regex pattern
style: # Add style attribute (String Style)
style: # Add style attribute (Hash Style)
color: red
font-size: '1.2em'
children: # Add children to the element
@ -789,18 +947,66 @@ jekyll-spaceship:
children: # Add nested chidren nodes
- "<span>Jekyll</span>" # First child node (String Style)
- name: span # Second child node (Hash Style)
props: # Modify child node (Hash Style)
props: # Add attributes to child node (Hash Style)
prop1: "a"
prop2: "b"
prop3: "c"
children: "<b>Yap!</b>" # Add children nodes (String Style)
- # Last empty for adding before the first child node
- a.link: '<a href="//t.com">Link</a>' # Replace all `a.link` tags (String Style)
- h1#title: # Replace `h1#title` tags (Hash Style)
- 'h1#title': # Replace `h1#title` tags (Hash Style)
children: I'm a title! # Replace inner html to new text
```
#### Example 1
Automatically adds a `target="_blank" rel="noopener noreferrer"` attribute to all external links in Jekyll's content.
```yml
jekyll-spaceship:
element-processor:
css:
- a: # Replace all `a` tags
props:
class: ['(^.*$)', '\0 ext-link'] # Add `ext-link` to class by regex pattern
target: _blank # Replace `target` value to `_blank`
rel: noopener noreferrer # Replace `rel` value to `noopener noreferrer`
```
#### Example 2
Automatically adds `loading="lazy"` to `img` and `iframe` tags to natively load lazily.
[Browser support](https://caniuse.com/#feat=loading-lazy-attr) is growing. If a browser does not support the `loading` attribute, it will load the resource just like it would normally.
```yml
jekyll-spaceship:
element-processor:
css:
- a: # Replace all `a` tags
props: #
loading: lazy # Replace `loading` value to `lazy`
```
In case you want to prevent loading some images/iframes lazily, add
`loading="eager"` to their tags. This might be useful to prevent flickering of
images during navigation (e.g. the site's logo).
See the following examples to prevent lazy loading.
```yml
jekyll-spaceship:
element-processor:
css:
- a: # Replace all `a` tags
props: #
loading: eager # Replace `loading` value to `eager`
```
There are three options when using this method to lazy load images. Here are the supported values for the loading attribute:
- auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
- lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
- eager: Load the resource immediately, regardless of where its located on the page.
## Credits
@ -809,6 +1015,9 @@ jekyll-spaceship:
- [MultiMarkdown](https://fletcher.github.io/MultiMarkdown-6) - Lightweight markup processor to produce HTML, LaTeX, and more.
- [markdown-it-multimd-table](https://github.com/RedBug312/markdown-it-multimd-table) - Multimarkdown table syntax plugin for markdown-it markdown parser.
- [jmoji](https://github.com/jekyll/jemoji) - GitHub-flavored emoji plugin for Jekyll.
- [jekyll-target-blank](https://github.com/keithmifsud/jekyll-target-blank) - Automatically opens external links in a new browser for Jekyll Pages, Posts and Docs.
- [jekyll-loading-lazy](https://github.com/gildesmarais/jekyll-loading-lazy) - Automatically adds loading="lazy" to img and iframe tags to natively load lazily.
- [mermaid](https://github.com/mermaid-js/mermaid) - Generation of diagram and flowchart from text in a similar manner as markdown.
## Contributing

View File

@ -9,7 +9,7 @@ Gem::Specification.new do |spec|
spec.version = Jekyll::Spaceship::VERSION
spec.authors = ["jeffreytse"]
spec.email = ["jeffreytse.mail@gmail.com"]
spec.summary = "A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, emoji, video, youtube, vimeo, dailymotion, etc."
spec.summary = "A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, emoji, video, audio, youtube, vimeo, dailymotion, spotify, soundcloud, etc."
spec.homepage = "https://github.com/jeffreytse/jekyll-spaceship"
spec.license = "MIT"

View File

@ -8,5 +8,5 @@ require 'jekyll-spaceship/cores/register'
module Jekyll::Spaceship
Logger.display_info
Config.load
Config.load_config
end

View File

@ -1,7 +1,5 @@
# frozen_string_literal: true
require 'yaml'
module Jekyll::Spaceship
class Config
CONFIG_NAME = 'jekyll-spaceship'
@ -10,8 +8,9 @@ module Jekyll::Spaceship
'table-processor',
'mathjax-processor',
'plantuml-processor',
'mermaid-processor',
'polyfill-processor',
'video-processor',
'media-processor',
'emoji-processor',
'element-processor'
]
@ -33,15 +32,14 @@ module Jekyll::Spaceship
end
def self.store(section, default)
return if @@store[section].nil?
return @@store[section] if default.nil?
@@store[section] = deep_merge(default, @@store[section])
end
def self.load(filename = '_config.yml')
def self.load(config = {})
config = deep_merge(
{ CONFIG_NAME => DEFAULT_CONFIG },
YAML.load_file(File.expand_path(filename))
config
)[CONFIG_NAME]
@@store = config
self.use_processors(config)
@ -52,5 +50,12 @@ module Jekyll::Spaceship
Register.use processor
end
end
def self.load_config
# post load site config for `group :jekyll_plugin`
Jekyll::Hooks.register :site, :after_init do |site|
self.load(site.config)
end
end
end
end

View File

@ -69,7 +69,7 @@ module Jekyll::Spaceship
end
def self.ext(page)
ext = page.path.match(/\.\S+$/)
ext = page.path.match(/\.[^.]+$/)
ext.to_s.rstrip
end

View File

@ -65,7 +65,7 @@ module Jekyll::Spaceship
def initialize_exclusions
if @@_exclusions.size.zero?
self.class.exclude :code, :block_quotes
self.class.exclude :code, :math, :liquid_filter
end
@exclusions = @@_exclusions.uniq
@@_exclusions.clear
@ -116,12 +116,12 @@ module Jekyll::Spaceship
if self.respond_to? method
@page.content = self.pre_exclude @page.content
@page.content = self.send method, @page.content
@page.content = self.after_exclude @page.content
@page.content = self.post_exclude @page.content
end
else
if Type.html? output_ext
method = 'on_handle_html'
elsif css? output_ext
elsif Type.css? output_ext
method = 'on_handle_css'
end
if self.respond_to? method
@ -151,29 +151,40 @@ module Jekyll::Spaceship
logger.log file
end
def pre_exclude(content)
@exclusion_store = []
def exclusion_regexs()
regexs = []
@exclusions.each do |type|
regex = nil
if type == :code
regex = /((`+)\s*(\w*)((?:.|\n)*?)\2)/
regex = /(((?<!\\)`+)\s*(\w*)((?:.|\n)*?)\2)/
elsif type == :math
regex = /(((?<!\\)\${1,2})[^\n]*?\1)/
elsif type == :liquid_filter
regex = /((?<!\\)((\{\{[^\n]*?\}\})|(\{%[^\n]*?%\})))/
end
next if regex.nil?
regexs.push regex unless regex.nil?
end
regexs
end
def pre_exclude(content, regexs = self.exclusion_regexs())
@exclusion_store = []
regexs.each do |regex|
content.scan(regex) do |match_data|
match = match_data[0]
id = @exclusion_store.size
content = content.sub(match, "[JEKYLL@#{object_id}@#{id}]")
content = content.sub(match, "<!JEKYLL@#{object_id}@#{id}>")
@exclusion_store.push match
end
end
content
end
def after_exclude(content)
def post_exclude(content)
while @exclusion_store.size > 0
match = @exclusion_store.pop
id = @exclusion_store.size
content = content.sub("[JEKYLL@#{object_id}@#{id}]", match)
content = content.sub("<!JEKYLL@#{object_id}@#{id}>", match)
end
@exclusion_store = []
content
@ -188,5 +199,38 @@ module Jekyll::Spaceship
end
content
end
def self.fetch_img_data(url)
begin
res = Net::HTTP.get_response URI(url)
raise res.body unless res.is_a?(Net::HTTPSuccess)
content_type = res.header['Content-Type']
raise 'Unknown content type!' if content_type.nil?
content_body = res.body.force_encoding('UTF-8')
return {
'type' => content_type,
'body' => content_body
}
rescue StandardError => msg
logger.log msg
end
end
def self.make_img_tag(data)
css_class = data['class']
type = data['type']
body = data['body']
if type == 'url'
"<img class=\"#{css_class}\" src=\"#{body}\">"
elsif type.include?('svg')
body.gsub(/\<\?xml.*?\?>/, '')
.gsub(/<!--[^\0]*?-->/, '')
.sub(/<svg /, "<svg class=\"#{css_class}\" ")
else
body = Base64.encode64(body)
body = "data:#{type};base64, #{body}"
"<img class=\"#{css_class}\" src=\"#{body}\">"
end
end
end
end

View File

@ -45,61 +45,11 @@ module Jekyll::Spaceship
if data.kind_of? String
element.replace Nokogiri::HTML.fragment(data)
elsif data.kind_of? Hash
# set name
element.name = data['name'] unless data['name'].nil?
# set props
data['props']&.each do |prop, val|
next element.remove_attribute if val.nil?
if val.kind_of? Array
next if val.size != 2
v = element[prop]
v = '' if v.nil?
val = v.sub(/#{val[0]}/, val[1])
elsif val.kind_of? Hash
result = []
val.each { |k, v| result.push "#{k}: #{v}" }
val = result.join(";")
end
element.set_attribute(prop, val)
end
# processing children
return unless data.has_key?('children')
return element.inner_html = "" if data['children'].nil?
children = self.create_children({
handle_hash_element({
:doc => doc,
:data => data['children']
:element => element,
:data => data,
})
# replace whole inner html
unless data['children'].kind_of? Array
return element.inner_html = children
end
if element.children.size.zero?
return element.inner_html = children
end
index = data['children'].index(nil)
if index.nil?
return element.inner_html = children
end
# insert to the end of children
if index == 0
return element.children.last.after(children)
end
# insert to the begin of children
rindex = data['children'].rindex { |item| !item.nil? }
if index == rindex + 1
return element.children.first.before children
end
# wrap the children
element.children.first.before children[0..index]
element.children.last.after children[index..children.size]
end
end
@ -126,6 +76,45 @@ module Jekyll::Spaceship
root.children
end
def handle_hash_element(data)
doc = data[:doc]
element = data[:element]
data = data[:data]
# set name
element.name = data['name'] unless data['name'].nil?
# set props
data['props']&.each do |prop, val|
next element.remove_attribute if val.nil?
if val.kind_of? Array
next if val.size != 2
v = element[prop]
v = '' if v.nil?
val = v.sub(/#{val[0]}/, val[1])
elsif val.kind_of? Hash
result = []
val.each { |k, v| result.push "#{k}: #{v}" }
val = result.join(";")
end
element.set_attribute(prop, val)
end
# processing children
return unless data.has_key?('children')
return element.inner_html = "" if data['children'].nil?
children = self.create_children({
:doc => doc,
:data => data['children']
})
handle_element_placement({
:data => data,
:element => element,
:children => children,
})
end
def create_element(data)
doc = data[:doc]
data = data[:data]
@ -148,5 +137,34 @@ module Jekyll::Spaceship
end
node
end
def handle_element_placement(data)
element = data[:element]
children = data[:children]
data = data[:data]
# replace whole inner html
unless data['children'].kind_of? Array
return element.inner_html = children
end
if element.children.size.zero?
return element.inner_html = children
end
index = data['children'].index(nil)
rindex = data['children'].rindex { |item| !item.nil? }
if index.nil?
element.inner_html = children
elsif index == 0 # insert to the end of children
element.children.last.after(children)
elsif index == rindex + 1 # insert to the begin of children
element.children.first.before children
else # wrap the children
element.children.first.before children[0..index]
element.children.last.after children[index..children.size]
end
end
end
end

View File

@ -7,7 +7,12 @@ require 'gemoji'
module Jekyll::Spaceship
class EmojiProcessor < Processor
def self.config
{ 'src' => 'https://github.githubassets.com/images/icons/emoji/' }
{
'css' => {
'class' => 'emoji'
},
'src' => 'https://github.githubassets.com/images/icons/emoji/'
}
end
def on_handle_html(content)
@ -19,15 +24,16 @@ module Jekyll::Spaceship
# escape plus sign
emoji_name = emoji.name.gsub('+', '\\\+')
css_class = self.config['css']['class']
content = content.gsub(
/(?<!\=")\s*:#{emoji_name}:\s*(?!"\s)/,
"<img class=\"emoji\""\
"<img class=\"#{css_class}\""\
" title=\":#{emoji.name}:\""\
" alt=\":#{emoji.name}:\""\
" raw=\"#{emoji.raw}\""\
" src=\"#{config['src']}#{emoji.image_filename}\""\
" style=\"vertical-align: middle;"\
" style=\"vertical-align: middle; display: inline;"\
" max-width: 1em; visibility: hidden;\""\
" onload=\"this.style.visibility='visible'\""\
" onerror=\"this.replaceWith(this.getAttribute('raw'))\">"\

View File

@ -6,9 +6,13 @@ module Jekyll::Spaceship
class MathjaxProcessor < Processor
def self.config
{
'src' => '//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML',
'src' => [
'https://polyfill.io/v3/polyfill.min.js?features=es6',
'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
],
'config' => {
'tex2jax' => { 'inlineMath' => [['$','$'], ['\\(','\\)']] }
'tex' => { 'inlineMath' => [['$','$'], ['\\(','\\)']] },
'svg': { 'fontCache': 'global' }
}
}
end
@ -27,8 +31,15 @@ module Jekyll::Spaceship
self.handled = true
cfg = "MathJax.Hub.Config(#{config['config'].to_json});"
head.add_child("<script src=\"#{config['src']}\">#{cfg}</script>")
# add mathjax config
cfg = config['config'].to_json
head.add_child("<script>MathJax=#{cfg}</script>")
# add mathjax dependencies
config['src'] = [config['src']] if config['src'].is_a? String
config['src'].each do |src|
head.add_child("<script src=\"#{src}\"></script>")
end
doc.to_html
end

View File

@ -0,0 +1,234 @@
# frozen_string_literal: true
require 'uri'
module Jekyll::Spaceship
class MediaProcessor < Processor
def self.config
{
'default' => {
'id' => 'media-{id}',
'class' => 'media',
'width' => '100%',
'height' => 350,
'frameborder' => 0,
'style' => 'max-width: 600px;outline: none',
'allow' => 'encrypted-media; picture-in-picture'
}
}
end
def on_handle_markdown(content)
content = handle_normal_audio(content)
content = handle_normal_video(content)
content = handle_youtube(content)
content = handle_vimeo(content)
content = handle_dailymotion(content)
content = handle_spotify(content)
content = handle_soundcloud(content)
end
# Examples:
# ![audio](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3)
# ![audio](//www.expample.com/examples/t-rex-roar.mp3?autoplay=true&loop=true)
def handle_normal_audio(content)
handle_media(content, {
media_type: 'audio',
host: '(https?:)?\\/\\/.*\\/',
id: '(.+?\\.(mp3|wav|ogg|mid|midi|aac|wma))',
})
end
# Examples:
# ![video](//www.html5rocks.com/en/tutorials/video/basics/devstories.webm)
# ![video](//techslides.com/demos/sample-videos/small.ogv?allow=autoplay)
# ![video](//techslides.com/demos/sample-videos/small.mp4?width=400)
def handle_normal_video(content)
handle_media(content, {
media_type: 'iframe',
host: '(https?:)?\\/\\/.*\\/',
id: '(.+?\\.(avi|mp4|webm|ogg|ogv|flv|mkv|mov|wmv|3gp|rmvb|asf))'
})
end
# Examples:
# ![youtube](https://www.youtube.com/watch?v=XA2WjJbmmoM "title")
# ![youtube](http://www.youtube.com/embed/w-m_yZCLF5Q)
# ![youtube](//youtu.be/mEP3YXaSww8?height=100%&width=400)
def handle_youtube(content)
handle_media(content, {
media_type: 'iframe',
host: '(https?:)?\\/\\/.*youtu.*',
id: '(?<=\\?v\\=|embed\\/|\\.be\\/)([a-zA-Z0-9\\_\\-]+)',
base_url: "https://www.youtube.com/embed/"
})
end
# Examples:
# ![vimeo](https://vimeo.com/263856289)
# ![vimeo](https://vimeo.com/263856289?height=100%&width=400)
def handle_vimeo(content)
handle_media(content, {
media_type: 'iframe',
host: '(https?:)?\\/\\/vimeo\\.com\\/',
id: '([0-9]+)',
base_url: "https://player.vimeo.com/video/"
})
end
# Examples:
# ![dailymotion](https://www.dailymotion.com/video/x7tgcev)
# ![dailymotion](https://dai.ly/x7tgcev?height=100%&width=400)
def handle_dailymotion(content)
handle_media(content, {
media_type: 'iframe',
host: '(https?:)?\\/\\/.*dai.?ly.*',
id: '(?<=video\\/|\\/)([a-zA-Z0-9\\_\\-]+)',
base_url: "https://www.dailymotion.com/embed/video/"
})
end
# Examples:
# ![spotify](//open.spotify.com/track/4Dg5moVCTqxAb7Wr8Dq2T5)
# ![spotify](//open.spotify.com/track/37mEkAaqCE7FXMvnlVA8pp?width=400)
def handle_spotify(content)
handle_media(content, {
media_type: 'iframe',
host: '(https?:)?\\/\\/open\\.spotify\\.com\\/track\\/',
id: '(?<=track\\/)([a-zA-Z0-9\\_\\-]+)',
base_url: "https://open.spotify.com/embed/track/",
height: 80
})
end
# Examples:
# ![soundcloud](//soundcloud.com/aviciiofficial/preview-avicii-vs-lenny)
def handle_soundcloud(content)
handle_media(content, {
media_type: 'iframe',
id_from: 'html',
host: '(https?:)?\\/\\/soundcloud\\.com\\/.+\\/[^\\?]+',
id: '(?<=soundcloud:\\/\\/sounds:)([0-9]+)',
base_url: "https://w.soundcloud.com/player/?url="\
"https%3A//api.soundcloud.com/tracks/",
height: 125,
})
end
def handle_media(content, data)
host = data[:host]
return content if content.sub(/#{host}/, '').nil?
media_type = data[:media_type]
base_url = data[:base_url]
id = data[:id_from] === 'html' ? '()' : data[:id]
url = "(#{host}#{id}\\S*)"
title = '("(.*)".*){0,1}'
# pre-handle reference-style links
regex = /(\[(.*)\]:\s*(#{url}\s*#{title}))/
content.scan regex do |match_data|
match = match_data[0]
ref_name = match_data[1]
ref_value = match_data[2]
content = content.gsub(match, '')
.gsub(/\!\[(.*)\]\s*\[#{ref_name}\]/,
"![\1](#{ref_value})")
end
# handle inline-style links
regex = /(\!\[(.*)\]\(.*#{url}\s*#{title}\))/
content.scan regex do |match_data|
url = match_data[2]
id = data[:id_from] === 'html' \
? get_id_from_html(url, data[:id]) \
: match_data[4]
title = match_data[6]
qs = url.match(/(?<=\?)(\S*?)$/)
qs = Hash[URI.decode_www_form(qs.to_s)].reject do |k, v|
next true if v == id or v == ''
end
cfg = self.config['default'].clone
cfg['id'] = qs['id'] || cfg['id']
cfg['class'] = qs['class'] || cfg['class']
cfg['style'] = qs['style'] || cfg['style']
cfg['id'] = cfg['id'].gsub('{id}', id)
cfg['class'] = cfg['class'].gsub('{id}', id)
cfg['src'] = URI(base_url ? "#{base_url}#{id}" : url).tap do |v|
v.query = URI.encode_www_form(qs) if qs.size > 0
end
case media_type
when 'audio'
cfg['autoplay'] = qs['autoplay'] || data[:autoplay] || cfg['autoplay']
cfg['loop'] = qs['loop'] || data[:loop] || cfg['loop']
cfg['style'] += ';display: none;' if qs['hidden']
content = handle_audio(content, { target: match_data[0], cfg: cfg })
when 'iframe'
cfg['title'] = title
cfg['width'] = qs['width'] || data[:width] || cfg['width']
cfg['height'] = qs['height'] || data[:height] || cfg['height']
cfg['frameborder'] = qs['frameborder'] || cfg['frameborder']
cfg['allow'] ||= cfg['allow']
content = handle_iframe(content, { target: match_data[0], cfg: cfg })
end
self.handled = true
end
content
end
def handle_audio(content, data)
cfg = data[:cfg]
html = "<audio"\
" id=\"#{cfg['id']}\""\
" class=\"#{cfg['class']}\""\
" #{cfg['autoplay'] ? 'autoplay' : ''}"\
" #{cfg['loop'] ? 'loop' : ''}"\
" src=\"#{cfg['src']}\""\
" style=\"#{cfg['style']}\""\
" controls>" \
"<p> Your browser doesn't support HTML5 audio."\
" Here is a <a href=\"#{cfg['src']}\">link to download the audio</a>"\
"instead. </p>"\
"</audio>"
content.gsub(data[:target], html)
end
def handle_iframe(content, data)
cfg = data[:cfg]
html = "<iframe"\
" id=\"#{cfg['id']}\""\
" class=\"#{cfg['class']}\""\
" src=\"#{cfg['src']}\""\
" title=\"#{cfg['title']}\""\
" width=\"#{cfg['width']}\""\
" height=\"#{cfg['height']}\""\
" style=\"#{cfg['style']}\""\
" allow=\"#{cfg['allow']}\""\
" frameborder=\"#{cfg['frameborder']}\""\
" allowfullscreen>"\
"</iframe>"
content.gsub(data[:target], html)
end
def get_id_from_html(url, pattern)
id = ''
begin
url = 'https:' + url if url.start_with? '//'
res = Net::HTTP.get_response URI(url)
raise res.body unless res.is_a?(Net::HTTPSuccess)
res.body.match pattern do |match_data|
id = match_data[0]
break
end
rescue StandardError => msg
data = url
logger.log msg
end
id
end
end
end

View File

@ -0,0 +1,102 @@
# frozen_string_literal: true
require "net/http"
require "base64"
module Jekyll::Spaceship
class MermaidProcessor < Processor
exclude :none
def self.config
{
'mode' => 'default',
'syntax' => {
'code' => 'mermaid!',
'custom' => ['@startmermaid', '@endmermaid']
},
'css' => {
'class' => 'mermaid'
},
'config': {
'theme' => 'default'
},
'src' => 'https://mermaid.ink/svg/'
}
end
def on_handle_markdown(content)
# match custom mermaid block and code block
syntax = self.config['syntax']
code_name = syntax['code']
custom = syntax['custom'][-2, 2]
patterns = [
/((`{3,})\s*#{code_name}((?:.|\n)*?)\2)/,
/((?<!\\)(#{custom[0]})((?:.|\n)*?)(?<!\\)(#{custom[1]}))/
]
patterns.each do |pattern|
content = handle_mermaid_block(pattern, content)
end
# handle escape custom mermaid block
content.gsub(/\\(#{custom[0]}|#{custom[1]})/, '\1')
end
def handle_mermaid_block(pattern, content)
content.scan pattern do |match|
match = match.select { |m| not m.nil? }
block = match[0]
code = match[2]
self.handled = true
content = content.gsub(
block,
handle_mermaid(code)
)
end
content
end
def handle_mermaid(code)
# encode to UTF-8
code = code.encode('UTF-8')
url = get_url(code)
# render mode
case self.config['mode']
when 'pre-fetch'
data = self.class.fetch_img_data(url)
end
if data.nil?
data = { 'type' => 'url', 'body' => url }
end
# return img tag
data['class'] = self.config['css']['class']
self.class.make_img_tag(data)
end
def get_url(code)
src = self.config['src']
# wrap code
code = {
'code' => code.gsub(/^\s*|\s*$/, ''),
'mermaid' => config['config']
}.to_json
# set default method
src += '{code}' if src.match(/\{.*\}/).nil?
# encode to base64 string
if src.include?('{code}')
code = Base64.urlsafe_encode64(code, padding: false)
return src.gsub('{code}', code)
else
raise "No supported src ! #{src}"
end
end
end
end

View File

@ -7,23 +7,37 @@ module Jekyll::Spaceship
class PlantumlProcessor < Processor
exclude :none
PLANTUML_PATTERNS = [
/(\\?(@startuml)((?:.|\n)*?)@enduml)/,
/((`{3,})\s*plantuml((?:.|\n)*?)\2)/
]
def self.config
{ 'src' => 'http://www.plantuml.com/plantuml/png/' }
{
'mode' => 'default',
'syntax' => {
'code' => 'plantuml!',
'custom' => ['@startuml', '@enduml']
},
'css' => {
'class' => 'plantuml'
},
'src' => 'http://www.plantuml.com/plantuml/svg/'
}
end
def on_handle_markdown(content)
# match default plantuml block and code block
PLANTUML_PATTERNS.each do |pattern|
# match custom plantuml block and code block
syntax = self.config['syntax']
code_name = syntax['code']
custom = syntax['custom'][-2, 2]
patterns = [
/((`{3,})\s*#{code_name}((?:.|\n)*?)\2)/,
/((?<!\\)(#{custom[0]})((?:.|\n)*?)(?<!\\)(#{custom[1]}))/
]
patterns.each do |pattern|
content = handle_plantuml_block(pattern, content)
end
# handle escape default plantuml block
content.gsub(/\\(@startuml|@enduml)/, '\1')
# handle escape custom plantuml block
content.gsub(/\\(#{custom[0]}|#{custom[1]})/, '\1')
end
def handle_plantuml_block(pattern, content)
@ -32,11 +46,6 @@ module Jekyll::Spaceship
block = match[0]
code = match[2]
# skip escape default plantuml block
if block.match(/(^\\@startuml|\\@enduml$)/)
next
end
self.handled = true
content = content.gsub(
@ -50,27 +59,35 @@ module Jekyll::Spaceship
def handle_plantuml(code)
# wrap plantuml code
code = "@startuml#{code}@enduml".encode('UTF-8')
url = self.get_url(code)
# encode to hex string
code = '~h' + code.unpack("H*").first
data = self.get_plantuml_img_data(code)
# render mode
case self.config['mode']
when 'pre-fetch'
data = self.class.fetch_img_data(url)
end
if data.nil?
data = { 'type' => 'url', 'body' => url }
end
# return img tag
"<img class=\"plantuml\" src=\"#{data}\">"
data['class'] = self.config['css']['class']
self.class.make_img_tag(data)
end
def get_plantuml_img_data(code)
data = ''
url = "#{config['src']}#{code}"
begin
data = Net::HTTP.get URI(url)
data = Base64.encode64(data)
data = "data:image/png;base64, #{data}"
rescue StandardError => msg
data = url
logger.log msg
def get_url(code)
src = self.config['src']
# set default method
src += '{hexcode}' if src.match(/\{.*\}/).nil?
# encode to hex string
if src.include?('{hexcode}')
code = '~h' + code.unpack("H*").first
return src.gsub('{hexcode}', code)
else
raise "No supported src ! #{src}"
end
data
end
end
end

View File

@ -5,18 +5,23 @@ require "nokogiri"
module Jekyll::Spaceship
class TableProcessor < Processor
ATTR_LIST_PATTERN = /((?<!\\)\{:(?:([A-Za-z]\S*):)?(.*?)(?<!\\)\})/
ATTR_LIST_REFS = {}
def on_handle_markdown(content)
# pre-handle reference-style links
references = {}
content.scan(/(\[(.*)\]:\s*(.*))/) do |match_data|
content.scan(/\n\s*(\[(.*)\]:\s*(\S+(\s+".*?")?))/) do |match_data|
ref_name = match_data[1]
ref_value = match_data[2]
references[ref_name] = ref_value
end
if references.size > 0
content.scan(/.*(?<!\\)\|.*/) do |result|
content.scan(/[^\n]*(?<!\\)\|[^\n]*/) do |result|
references.each do |key, val|
replace = result.gsub(/\[(.*)\]\s*\[#{key}\]/, "[\1](#{val})")
replace = result.gsub(
/\[([^\n\]]*?)\]\s*\[#{key}\]/,
"[\1](#{val})")
next if result == replace
content = content.gsub(result, replace)
end
@ -24,21 +29,37 @@ module Jekyll::Spaceship
end
# pre-handle row-span
content = content.gsub(/(?<!\\)(\|.*\\\s*)\|\s*\n/, "\\1\n")
content = content.gsub(/(?<!\\)(\|[^\n]*\\\s*)\|\s*\n/, "\\1\n")
# escape | and :
content = content.gsub(/\|(?=\|)/, '\\|')
.gsub(/\\:(?=.*?(?<!\\)\|)/, '\\\\\\\\:')
.gsub(/((?<!\\)\|.*?)(\\:)/, '\1\\\\\\\\:')
.gsub(/\\:(?=[^\n]*?(?<!\\)\|)/, '\\\\\\\\:')
.gsub(/((?<!\\)\|[^\n]*?)(\\:)/, '\1\\\\\\\\:')
# escape * and _ and $ etc.
content.scan(/.*(?<!\\)\|.*/) do |result|
content.scan(/[^\n]*(?<!\\)\|[^\n]*/) do |result|
# skip for math expression within pipeline
next unless result
.gsub(/((?<!\\)\${1,2})[^\n]*?\1/, '')
.match(/(?<!\\)\|/)
replace = result.gsub(
/(?<!(?<!\\)\\)(\*|\$|\[|\(|\"|_)/,
'\\\\\\\\\1')
/(?<!(?<!\\)\\)(\*|\$|\[|\(|\"|_)/, '\\\\\\\\\1')
next if result == replace
content = content.gsub(result, replace)
end
# pre-handle attribute list (AL)
ATTR_LIST_REFS.clear()
content.scan(ATTR_LIST_PATTERN) do |result|
ref = result[1]
list = result[2]
next if ref.nil?
if ATTR_LIST_REFS.has_key? ref
ATTR_LIST_REFS[ref] += list
else
ATTR_LIST_REFS[ref] = list
end
end
content
end
@ -50,6 +71,7 @@ module Jekyll::Spaceship
# handle each table
doc.css('table').each do |table|
next if table.ancestors('code, pre').size > 0
rows = table.css('tr')
data.table = table
data.rows = rows
@ -65,6 +87,7 @@ module Jekyll::Spaceship
handle_multi_rows(data)
handle_text_align(data)
handle_rowspan(data)
handle_attr_list(data)
end
end
rows.each do |row|
@ -157,7 +180,7 @@ module Jekyll::Spaceship
if scope.table.multi_row_cells != cells and scope.table.multi_row_start
for i in 0...scope.table.multi_row_cells.count do
multi_row_cell = scope.table.multi_row_cells[i]
multi_row_cell.inner_html += "<br>#{cells[i].inner_html}"
multi_row_cell.inner_html += "\n<br>\n#{cells[i].inner_html}"
end
row.remove
end
@ -182,7 +205,7 @@ module Jekyll::Spaceship
span_cell = scope.table.span_row_cells[scope.row.col_index]
if span_cell and cell.content.match(/^\s*\^{2}/)
cell.content = cell.content.gsub(/^\s*\^{2}/, '')
span_cell.inner_html += "<br>#{cell.inner_html}"
span_cell.inner_html += "\n<br>\n#{cell.inner_html}"
rowspan = span_cell.get_attribute('rowspan') || 1
rowspan = rowspan.to_i + 1
span_cell.set_attribute('rowspan', "#{rowspan}")
@ -231,15 +254,69 @@ module Jekyll::Spaceship
cell.set_attribute('style', style)
end
# Examples:
# {:ref-name: .cls1 title="hello" }
# {: #id ref-name data="world" }
# {: #id title="hello" }
# {: .cls style="color: #333" }
def handle_attr_list(data)
cell = data.cell
content = cell.inner_html
# inline attribute list(IAL) handler
ial_handler = ->(list) do
list.scan(/(\S+)=("|')(.*?)\2|(\S+)/) do |attr|
key = attr[0]
val = attr[2]
single = attr[3]
if !key.nil?
val = (cell.get_attribute(key) || '') + val
cell.set_attribute(key, val)
elsif !single.nil?
if single.start_with? '#'
key = 'id'
val = single[1..-1]
elsif single.start_with? '.'
key = 'class'
val = cell.get_attribute(key) || ''
val += (val.size.zero? ? '' : ' ') + single[1..-1]
elsif ATTR_LIST_REFS.has_key? single
ial_handler.call ATTR_LIST_REFS[single]
end
unless key.nil?
cell.set_attribute(key, val)
end
end
end
end
# handle attribute list
content.scan(ATTR_LIST_PATTERN) do |result|
ref = result[1]
list = result[2]
# handle inline attribute list
ial_handler.call list if ref.nil?
# remove attr_list
content = content.sub(result[0], '')
end
cell.inner_html = content
end
def handle_format(data)
cell = data.cell
cvter = self.converter('markdown')
return if cvter.nil?
content = cell.inner_html
content = self.pre_exclude(content, [/(\<code.*\>.*\<\/code\>)/])
.gsub(/(?<!\\)\|/, '\\|')
.gsub(/^\s+|\s+$/, '')
.gsub(/&lt;/, '<')
.gsub(/&gt;/, '>')
content = self.post_exclude(content)
content = cvter.convert(content)
cell.inner_html = Nokogiri::HTML.fragment(content)
content = Nokogiri::HTML.fragment(content)
if content.children.first&.name == 'p'
content = content.children
end
cell.inner_html = content.inner_html
end
end
end

View File

@ -1,121 +0,0 @@
# frozen_string_literal: true
require 'uri'
module Jekyll::Spaceship
class VideoProcessor < Processor
def on_handle_markdown(content)
content = handle_normal_video(content)
content = handle_youtube(content)
content = handle_vimeo(content)
content = handle_dailymotion(content)
end
# Examples:
# ![video](//www.html5rocks.com/en/tutorials/video/basics/devstories.webm)
# ![video](//techslides.com/demos/sample-videos/small.ogv?allow=autoplay)
# ![video](//techslides.com/demos/sample-videos/small.mp4?width=400)
def handle_normal_video(content)
handle_video(content, {
host: '(https?:)?\\/\\/.*\\/',
id: '(.+?\\.(avi|mp4|webm|ogg|ogv|flv|mkv|mov|wmv|3gp|rmvb|asf))',
})
end
# Examples:
# ![youtube](https://www.youtube.com/watch?v=XA2WjJbmmoM "title")
# ![youtube](http://www.youtube.com/embed/w-m_yZCLF5Q)
# ![youtube](//youtu.be/mEP3YXaSww8?height=100%&width=400)
def handle_youtube(content)
handle_video(content, {
host: '(https?:)?\\/\\/.*youtu.*',
id: '(?<=\\?v\\=|embed\\/|\\.be\\/)([a-zA-Z0-9\\_\\-]+)',
iframe_url: "https://www.youtube.com/embed/"
})
end
# Examples:
# ![vimeo](https://vimeo.com/263856289)
# ![vimeo](https://vimeo.com/263856289?height=100%&width=400)
def handle_vimeo(content)
handle_video(content, {
host: '(https?:)?\\/\\/vimeo\\.com\\/',
id: '([0-9]+)',
iframe_url: "https://player.vimeo.com/video/"
})
end
# Examples:
# ![dailymotion](https://www.dailymotion.com/video/x7tgcev)
# ![dailymotion](https://dai.ly/x7tgcev?height=100%&width=400)
def handle_dailymotion(content)
handle_video(content, {
host: '(https?:)?\\/\\/.*dai.?ly.*',
id: '(?<=video\\/|\\/)([a-zA-Z0-9\\_\\-]+)',
iframe_url: "https://www.dailymotion.com/embed/video/"
})
end
def handle_video(content, data)
host = data[:host]
return content if content.sub(/#{host}/, '').nil?
iframe_url = data[:iframe_url]
id = data[:id]
url = "(#{host}#{id}\\S*)"
title = '("(.*)".*){0,1}'
# pre-handle reference-style links
regex = /(\[(.*)\]:\s*(#{url}\s*#{title}))/
content.scan regex do |match_data|
match = match_data[0]
ref_name = match_data[1]
ref_value = match_data[2]
content = content.gsub(match, '')
.gsub(/\!\[(.*)\]\s*\[#{ref_name}\]/,
"![\1](#{ref_value})")
end
# handle inline-style links
regex = /(\!\[(.*)\]\(.*#{url}\s*#{title}\))/
content.scan regex do |match_data|
url = match_data[2]
id = match_data[4]
title = match_data[6]
qs = url.match(/(?<=\?)(\S*?)$/)
qs = Hash[URI.decode_www_form(qs.to_s)].reject do |k, v|
next true if v == id or v == ''
end
css_id = qs['id'] || "video-#{id}"
css_class = qs['class'] || 'video'
width = qs['width'] || data[:width] || "100%"
height = qs['height'] || data[:height] || 350
frameborder = qs['frameborder'] || 0
style = qs['style'] || 'max-width: 600px'
allow = qs['allow'] || "encrypted-media; picture-in-picture"
url = URI(iframe_url ? "#{iframe_url}#{id}" : url).tap do |v|
v.query = URI.encode_www_form(qs) if qs.size > 0
end
html = "<iframe"\
" id=\"#{css_id}\""\
" class=\"#{css_class}\""\
" src=\"#{url}\""\
" title=\"#{title}\""\
" width=\"#{width}\""\
" height=\"#{height}\""\
" style=\"#{style}\""\
" allow=\"#{allow}\""\
" frameborder=\"#{frameborder}\""\
" allowfullscreen>" \
"</iframe>"
content = content.gsub(match_data[0], html)
self.handled = true
end
content
end
end
end

View File

@ -2,6 +2,6 @@
module Jekyll
module Spaceship
VERSION = "0.7.0"
VERSION = "0.9.3"
end
end

100
spec/spec_helper.rb Normal file
View File

@ -0,0 +1,100 @@
# This file was generated by the `rspec --init` command. Conventionally, all
# specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`.
# The generated `.rspec` file contains `--require spec_helper` which will cause
# this file to always be loaded, without a need to explicitly require it in any
# files.
#
# Given that it is always loaded, you are encouraged to keep this file as
# light-weight as possible. Requiring heavyweight dependencies from this file
# will add to the boot time of your test suite on EVERY test run, even for an
# individual file that may not need all of that loaded. Instead, consider making
# a separate helper file that requires the additional dependencies and performs
# the additional setup, and require it from the spec files that actually need
# it.
#
# See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration
RSpec.configure do |config|
# rspec-expectations config goes here. You can use an alternate
# assertion/expectation library such as wrong or the stdlib/minitest
# assertions if you prefer.
config.expect_with :rspec do |expectations|
# This option will default to `true` in RSpec 4. It makes the `description`
# and `failure_message` of custom matchers include text for helper methods
# defined using `chain`, e.g.:
# be_bigger_than(2).and_smaller_than(4).description
# # => "be bigger than 2 and smaller than 4"
# ...rather than:
# # => "be bigger than 2"
expectations.include_chain_clauses_in_custom_matcher_descriptions = true
end
# rspec-mocks config goes here. You can use an alternate test double
# library (such as bogus or mocha) by changing the `mock_with` option here.
config.mock_with :rspec do |mocks|
# Prevents you from mocking or stubbing a method that does not exist on
# a real object. This is generally recommended, and will default to
# `true` in RSpec 4.
mocks.verify_partial_doubles = true
end
# This option will default to `:apply_to_host_groups` in RSpec 4 (and will
# have no way to turn it off -- the option exists only for backwards
# compatibility in RSpec 3). It causes shared context metadata to be
# inherited by the metadata hash of host groups and examples, rather than
# triggering implicit auto-inclusion in groups with matching metadata.
config.shared_context_metadata_behavior = :apply_to_host_groups
# The settings below are suggested to provide a good initial experience
# with RSpec, but feel free to customize to your heart's content.
=begin
# This allows you to limit a spec run to individual examples or groups
# you care about by tagging them with `:focus` metadata. When nothing
# is tagged with `:focus`, all examples get run. RSpec also provides
# aliases for `it`, `describe`, and `context` that include `:focus`
# metadata: `fit`, `fdescribe` and `fcontext`, respectively.
config.filter_run_when_matching :focus
# Allows RSpec to persist some state between runs in order to support
# the `--only-failures` and `--next-failure` CLI options. We recommend
# you configure your source control system to ignore this file.
config.example_status_persistence_file_path = "spec/examples.txt"
# Limits the available syntax to the non-monkey patched syntax that is
# recommended. For more details, see:
# - http://rspec.info/blog/2012/06/rspecs-new-expectation-syntax/
# - http://www.teaisaweso.me/blog/2013/05/27/rspecs-new-message-expectation-syntax/
# - http://rspec.info/blog/2014/05/notable-changes-in-rspec-3/#zero-monkey-patching-mode
config.disable_monkey_patching!
# This setting enables warnings. It's recommended, but in some cases may
# be too noisy due to issues in dependencies.
config.warnings = true
# Many RSpec users commonly either run the entire suite or an individual
# file, and it's useful to allow more verbose output when running an
# individual spec file.
if config.files_to_run.one?
# Use the documentation formatter for detailed output,
# unless a formatter has already been configured
# (e.g. via a command-line flag).
config.default_formatter = "doc"
end
# Print the 10 slowest examples and example groups at the
# end of the spec run, to help surface which specs are running
# particularly slow.
config.profile_examples = 10
# Run specs in random order to surface order dependencies. If you find an
# order dependency and want to debug it, you can fix the order by providing
# the seed, which is printed after each run.
# --seed 1234
config.order = :random
# Seed global randomization in this process using the `--seed` CLI option.
# Setting this allows you to use `--seed` to deterministically reproduce
# test failures related to randomization by passing the same `--seed` value
# as the one that triggered the failure.
Kernel.srand config.seed
=end
end