Skip to content

Instantly share code, notes, and snippets.

@lepinekong

lepinekong/github.pages.doc.red

Last active April 22, 2018 22:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lepinekong/5bd769f5efe85499471eae26f7d6e720 to your computer and use it in GitHub Desktop.
Save lepinekong/5bd769f5efe85499471eae26f7d6e720 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
github.pages.doc.red
Comment {
Redlang: https://red-lang.org
Tutorials: [
https://dev.to/lepinekong/red-for-hopeless-programmers---part-i-3g0
https://dev.to/lepinekong/red-for-hopeless-programmers---part-ii-258
]
Demo-Instruction: {
Just paste the content of .ReAdABLE.HumanFormat.deploy.ps1 in Powershell at:
https://gist.github.com/lepinekong/b59fa3e8d386dea1ebaa1a096488c542
It will install Red and the source of the Article, the markdown and a batch file to re-execute it.
}
Source-Url: https://gist.github.com/lepinekong/b59fa3e8d386dea1ebaa1a096488c542
Demos-Urls: [
https://lepinekong.github.io/
https://github.com/lepinekong/lepinekong.github.io/blob/master/README.md
]
}
Red [
File: "github.pages.doc.red"
Title: {How I built my Github Homepage using the ReAdABLE Human Format}
Published: https://lepinekong.github.io/
ReAdABLE: [
{
Article: [
Title: "Title of the article"
Sub-Title: {Sub-title of the article}
Paragraphs: [
Paragraph: [
.title: [
"Title for Paragraph P1"
.mandatory: yes
]
.content: {Content for Paragraph P1}
.image: http://optional.image-1.jpg
]
]
]
}
.check: false ; for the future: set to true if you want to check content against ReAdABLE structure defined above
]
]
;===========================================================================================
; PREAMBLE
;===========================================================================================
; loading library
REMOTE-LIB: false
unless ((REMOTE-LIB = false) and (exists? lib: %.system.user.apps.authoring.library.red)) [
print "Loading remote lib"
do read https://gist.githubusercontent.com/lepinekong/7574892bfefe7e53e7bd4dd4759f30f8/raw/2dec6c1f92fe1834632d998ffb831539caa23d63/.github.lib.red
github-url-entry: https://gist.github.com/lepinekong/7574892bfefe7e53e7bd4dd4759f30f8
lib: get-github-url github-url-entry %.system.user.apps.authoring.library.red
]
do read lib
;self script path
script-path: system/options/script
short-filename: .get-short-filename/wo-extension script-path
;===========================================================================================
; DATA
;===========================================================================================
; don't forget to toggle word-wrap in VSCode: View | Toggle Word Wrap
Article: [
Title: "How I built my Github Homepage"
Sub-Title: {using the ReAdABLE Human Format
}
Paragraphs: [
P0: [
.title: {Goal of this article}
.content: {
The purpose of this article is to show how to easily build a Github page
with the [**ReAdABLE Human Format**](https://medium.com/@lepinekong/readable-human-format-md-8fda1869ef75).
}
.image: https://i.imgur.com/eROgcDy.png
]
P1: [
.title: {Pre-requisites}
.content: {
- You should have a Github activated account
- You should have [VSCode](https://code.visualstudio.com/)
and [Red extension](https://marketplace.visualstudio.com/items?itemName=red-auto.red) installed
so that you can run red script easily
- Or use any other text editor and run a batch file provided.
> Tips: for spell checking I also use [Spell Checker extension](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
> Tips: for quick image upload, I'm using [https://imgur.com/upload](https://imgur.com/upload)
which supports pasting image directly in the browser.
}
.image: https://i.imgur.com/OYDpayD.png
]
P2: [
.title: {Know the homepage url}
.content: {
The homepage url of my homepage is [http://lepinekong.github.io/](http://lepinekong.github.io/).
The first time you visit it, you'll get a 404 error page:
}
.image: https://i.imgur.com/5llGB2W.png
]
P3: [
.title: {Create a Repository}
.content: {
You must first create a repository
by clicking on the "+" icon near your user icon on the top right.
}
.image: https://i.imgur.com/gyUeGxK.png
]
P4: [
.title: {Check your homepage}
.content: {
You can check that your homepage in my case at [http://lepinekong.github.io/](http://lepinekong.github.io/)
doesn't show 404 error any more.
}
.image: https://i.imgur.com/4vQbAvj.png
]
P5: [
.title: {Settings}
.content: {Click on settings}
.image: https://i.imgur.com/crS1mCk.png
]
P6: [
.title: {Choose a theme}
.content: {You can set a theme for your site by clicking on button "Choose a theme"}
.image: https://i.imgur.com/y9DTpfR.png
]
P7: [
.title: {Pick one of them}
.content: {
by choosing one theme among those available:
}
.image: https://i.imgur.com/ym4xqWG.png
]
P8: [
.title: {Revisit homepage}
.content: { You can check your homepage once more in my case at [http://lepinekong.github.io/](http://lepinekong.github.io/)
you should see your new homepage updated:}
.image: https://i.imgur.com/bIV0Dbn.png
]
P9: [
.title: {Setting up a ReAdABLE Human Format Folder}
.content: {
Next let's write the content in [**ReAdABLE Human Format**](https://medium.com/@lepinekong/readable-human-format-md-8fda1869ef75).
Go to [https://gist.github.com/lepinekong/b59fa3e8d386dea1ebaa1a096488c542](https://gist.github.com/lepinekong/b59fa3e8d386dea1ebaa1a096488c542)
Click on **.ReAdABLE.HumanFormat.deploy.ps1** **"Raw" button** on the right side
}
.image: https://i.imgur.com/XEjSXOy.png
]
P10: [
.title: {Copy the whole content to clipboard}
.content: {
Select with **Ctrl+A** then copy with **Ctrl+C**.
}
.image: https://i.imgur.com/5hZl4Yj.png
]
P11: [
.title: {Paste the whole content in Powershell console}
.content: {
- Run Powershell Console (in windows search type "Powershell")
- Then right-click with the mouse on it to paste the content
- Validate to execute
}
.image: https://i.imgur.com/zpzlp71.png
]
P12: [
.title: {Choose a target folder}
.content: {
- By default it is C:\red\demos\ReAdABLE.Human.Format but you can type any folder
for example C:\rebol\.system.user\.code\.domains\.apps\Authoring\app\github.pages\github.pages.doc
- Validate.
}
.image: https://i.imgur.com/4aAxUPc.png
]
P13: [
.title: {Confirm source download}
.content: {
You should see:
- A Red console running the markdown generator on the sample article
- A popup window asking to confirm **source download**:
you must **confirm** this latter if you want to modify the article in ReAdABLE format.
}
.image: https://i.imgur.com/oo1xFW6.png
]
P14: [
.title: {Optionally rename the folder and open it with Visual Studio Code}
.content: {
You can rename the folder to **doc** if preferred, it is shorter and gets a **nice icon**
under Visual Studio Code.
}
.image: https://i.imgur.com/cvs7aof.png
]
P15: [
.title: {Write your article}
.content: {
You can write your own article by modifying the content of the template
(if needed by deleting or adding new paragraphs).
>Beware: Paragraphs labels can be almost any Red variable name (no space allowed)
but they should be different (for example P1, P2,... or Goal-of-this-article, Pre-requisites,...)
so P, P,... will not work well when converting to Markdown.
>Within paragraph you can use markdown formatting including block code
and inline image (see example with paragraph 16 below "Convert to markdown")
>If your title is empty string you'll see ### (in next version, we'll put an alert)
}
.image: https://i.imgur.com/oAi1Vwi.png
]
P16: [
.title: {Convert to markdown}
.content: {
- Right-click on the page for popup menu
- Select **"Run Red Script"** or **F6**:
![https://i.imgur.com/OYDpayD.png](https://i.imgur.com/OYDpayD.png)
Program should run in Terminal window below
the article window:
}
.image: https://i.imgur.com/SSIuO66.png
]
P17: [
.title: {Preview Markdown}
.Content: {
- Select markdown file generated (.md extension)
- Preview it in VSCode if wanted
- Copy the markdown to clipboard
}
.image: https://i.imgur.com/vffAcYf.png
]
P18: [
.title: {Edit markdown on Github}
.content: {On Github homepage click on the pen icon to edit}
.image: https://i.imgur.com/woXuUlQ.png
]
P19: [
.title: {Paste and commit}
.content: {
You can then paste the new markdown and click commit
}
.image: https://i.imgur.com/JX1e0IX.png
]
Conclusion: [
.title: {Conclusion}
.content: {
In this tutorial, you have learned how to:
- Create a Github repository and publish a homepage
- Create the content of the homepage in [**ReAdABLE Human Format**](https://medium.com/@lepinekong/readable-human-format-md-8fda1869ef75)
- Convert the [**ReAdABLE Human Format**](https://medium.com/@lepinekong/readable-human-format-md-8fda1869ef75) into Markdown
- Update the Markdown on Github Homepage
You can find the source of this tutorial here:
[https://gist.github.com/lepinekong/5bd769f5efe85499471eae26f7d6e720](https://gist.github.com/lepinekong/5bd769f5efe85499471eae26f7d6e720)
}
]
]
]
;===========================================================================================
; PROGRAM
;===========================================================================================
;to play with the format set .spike to true
.spike: false
if .spike [
; - 1. Extract the children of article by name:
title: select Article to-set-word 'Title ; extract title from Article - if using library: .select Article 'Title
print title
Sub-title: select Article to-set-word 'Sub-Title ; extract sub-title from Article
print Sub-Title
Paragraphs: select Article to-set-word 'Paragraphs ; extract all paragraphs from Articles
;-> [P1: [.title: ...] P2: [.title: ...]
;probe Paragraphs
print length? Paragraphs
; - 2. Transform Paragraphs block to Object
oParagraphs: Object Paragraphs ; convert paragraphs to object for easing extraction with values-of
Paragraphs-blocks: values-of oParagraphs ; extract all paragraphs details with their labels
; -> [[.title: ...] [.title: ...]]
probe Paragraphs-blocks
print length? Paragraphs-blocks
; - 3. Iterate through Paragraphs-blocks
foreach paragraph-block Paragraphs-blocks [
title: .select paragraph-block '.title ; select title from paragraph block (using library .select method)
content: .select paragraph-block '.content ; select content from paragraph block (using library .select method)
image: .select paragraph-block '.image ; select image from paragraph block (using library .select method)
]
]
.markdown-gen: function [=>output-file [file! url! string! unset!]]
[
.default-input-file: %ReAdABLE.Human.Format.data.red
.default-output-file: %ReAdABLE.Human.Format.md
use ["global .emit you don't need to touch"][
; start cloning global .emit function
spec: spec-of :.emit
body: body-of :.emit
; attach body words meaning to same meaning as in local context of '=>output-file
bind body '=>output-file
emit: function spec body
; end cloning global .emit function
]
use ["alert messages you can customize"][
message-processing: function[][
.do-events/no-wait ; this is just to make console run smoother
print "processing..."
.do-events/no-wait
]
refresh-screen: function[][
.do-events/no-wait
]
]
use ["generic formatting functions you can customize"][
emit-title-level: function [.title .title-level][
title: .title
n: .title-level
title: .replace/all title " " ""
marker: copy ""
repeat i n [append marker {#}]
emit [marker { } title newline]
]
emit-title: function[.title][
emit-title-level .title 1
]
.title: :emit-title
emit-sub-title: function[.title][
emit-title-level .title 2
]
.sub-title: :emit-sub-title
emit-paragraph-title: function[.title][
emit-title-level .title 3
]
.paragraph-title: :emit-paragraph-title
emit-image: function[image][
unless none? image [
emit [
{![} image {]}
{(} image {)
}
]
]
]
.image: :emit-image
emit-content: function [content][
content-block: copy []
either find content {```} [
use [lines flag flag_line][
lines: .read/lines content
flag: false
forall lines [
line: lines/1
i: index? lines
if find line {```} [
.replace/all line " " ""
flag: not flag; flag: false -> true
either flag [
line: rejoin [newline newline line]
][
append line newline
append line newline
]
]
either flag = true [
.replace/all line " " ""
append line newline
][
.replace/all line " " ""
]
append content-block line
]
]
content: copy ""
forall content-block [
i: index? content-block
n: length? content-block
append content content-block/1
unless i = n [
unless find content newline [
append content newline
]
]
]
][
content: .replace/all content " " ""
]
emit content
]
.content: :emit-content
]
=>output-file: .to-file =>output-file
if exists? =>output-file [
delete =>output-file
print ["deleting..." =>output-file]
]
;-------------------------------------------------------------------------
{
Article: [
Title: "Title of the article"
Sub-Title: {Sub-title of the article}
Paragraphs: [
P1: [
.title: "Title for Paragraph P1"
.content: {Content for Paragraph P1}
.image: http://optional.image-1.jpg
]
]
]
}
title: .select Article 'Title ; extract title from Article
Sub-title: .select Article 'Sub-Title ; extract sub-title from Article
Paragraphs: .select Article 'Paragraphs ; extract all paragraphs from Articles
;-> [P1: [.title: ...] P2: [.title: ...]
oParagraphs: Object Paragraphs ; convert paragraphs to object for easing extraction with values-of
Paragraphs-blocks: values-of oParagraphs ; extract all paragraphs details without labels
; -> [[.title: ...] [.title: ...]]
;--------------------------------------------------------------------------
message-processing ; this is for notifying user
;--------------------------------------------------------------------------
.title title ; emit markdown for article's title
.sub-title sub-title ; emit markdown for article's sub-title
foreach paragraph-block Paragraphs-blocks [
refresh-screen
title: .select paragraph-block '.title ; select title from paragraph block
.paragraph-title title ; emit markdown for paragraph title
content: .select paragraph-block '.content ; select content from paragraph block
.content content ; emit markdown content with code block when any
image: .select paragraph-block '.image ; select image from paragraph block
.image image ; emit markdown for embedding image
]
print (.to-full-path =>output-file) ; print file output path for info
]
markdown-gen: :.markdown-gen
Unless .spike [
print "To generate again, type: markdown-gen %output-file-name for example:"
print "markdown-gen %ReAdABLE.Human.Format.md"
print "executing..."
; script-path: system/options/script
; short-filename: .get-short-filename/wo-extension script-path
markdown-file: .to-file reduce [short-filename ".md"] ; example: %ReAdABLE.Human.Format.md
.markdown-gen markdown-file ; calling markdown generation specifying output-file
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment