├── .gitignore
├── test_output.md
├── .forgejo
└── workflows
│ └── checks.yml
├── test.md
├── riss.awk
├── get-it-on-codeberg.svg
├── LICENSE
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | awkprof.out
2 |
--------------------------------------------------------------------------------
/test_output.md:
--------------------------------------------------------------------------------
1 |
2 | ---
3 | title: "My Page Title"
4 | date: "2222-11-11"
5 | ---
6 |
7 |
8 | **kept**
9 | Present in both the .md and the output
10 |
11 | **inserted**
12 | only in the output
13 |
14 | some complicated html
15 |
16 |
17 | This gets escaped:
18 | ```html
19 |
20 | ```
21 |
22 |
--------------------------------------------------------------------------------
/.forgejo/workflows/checks.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | - push
5 | - workflow_dispatch
6 |
7 | jobs:
8 | build:
9 | runs-on: ubuntu-latest
10 |
11 | steps:
12 | - uses: actions/checkout@v2
13 |
14 | - name: Install gawk
15 | run: |
16 | apt update -y
17 | apt install -y gawk
18 |
19 | - name: Run tests
20 | run: |
21 | awk -f riss.awk test.md >tmp.md
22 | diff tmp.md test_output.md
23 |
24 | - name: Check formatting
25 | run: |
26 | gawk --pretty-print -f riss.awk
27 | diff awkprof.out riss.awk
28 |
--------------------------------------------------------------------------------
/test.md:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 | Present in the .md, removed in the output
11 |
12 |
13 | **kept**
14 | Present in both the .md and the output
15 |
16 |
20 |
21 |
25 |
26 | This gets escaped:
27 | ```html
28 |
29 | ```
30 |
31 |
--------------------------------------------------------------------------------
/riss.awk:
--------------------------------------------------------------------------------
1 | #!/usr/bin/awk -f
2 | #
3 | # Copyright 2021 Clément Joly
4 | # https://cj.rs/riss
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # http://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 |
18 | # Divide the input file into these types of sections:
19 | # * inserting: the current line is copied to the output, verbatim
20 | # * removing: the line is not copied to the output
21 | # To distinguish between these sections, the script interprets special
22 | # comments. These comments are removed from the output.
23 | BEGIN {
24 | # Section identifier
25 | removing = 0
26 | }
27 |
28 | /^
19 |
20 |
21 |
22 | # 💎 README In Static Site (RISS)
23 |
24 |
25 | [](https://codeberg.org/cljoly/readme-in-static-site)
26 |
27 | [](https://github.com/cljoly/readme-in-static-site/blob/main/riss.awk)  [](https://github.com/cljoly/readme-in-static-site/actions/workflows/checks.yml) [](https://cj.rs/riss)
28 |
29 |
30 | 
31 |
32 |
35 |
36 |
41 |
42 | This [fast][] [script][] allows you to insert your GitHub README in your static site and apply transformations. For instance, you can read this [README on GitHub](https://github.com/cljoly/readme-in-static-site/blob/main/README.md) and [on my website](https://cj.rs/readme-in-static-site).
43 |
44 | ### Why?
45 |
46 | The GitHub README of your repo needs to efficiently describe your project to GitHub’s visitor. But featuring your project on your website allows you to (among other things):
47 | * have more control on the theme and layout,
48 | * insert scripts that GitHub would prohibit (like [asciinema](#replace-asciinema-image)),
49 | * have your project’s homepage independent of your hosting platform, if you wish to change at some point.
50 |
51 | Chances are that for small projects, the page about your project is very similar to the GitHub README. Don’t duplicate efforts, describe the differences! This [has](https://github.com/vhodges/stitcherd) [been](https://dev.to/lornasw93/github-readme-on-portfolio-project-page-51i8) a [long-awaited](https://richjenks.com/github-pages-from-readme/) [feature](https://medium.com/@bolajiayodeji/how-to-convert-github-markdown-files-to-a-simple-website-b08602d05e1c), in [one](https://news.ycombinator.com/item?id=29305990) [form](https://stackoverflow.com/q/48919200/4253785) or [another](https://stackoverflow.com/a/69296054/4253785).
52 |
53 | See this [blog post](https://cj.rs/blog/putting-readmes-on-your-static-site/) for more details.
54 |
55 | ## Testimonials
56 |
57 | [](https://news.ycombinator.com/item?id=29304376) [](https://lobste.rs/s/a4jzvv/readme_static_site_riss#c_hiil4z.json)
58 |
59 | RISS made it to the first page of [HackerNews](https://news.ycombinator.com/item?id=29304376) and [Lobsters](https://lobste.rs/s/a4jzvv/readme_static_site_riss) and got comments like:
60 |
61 | > I never really understood the idea to have a separate README and index page. Glad to see i'm not the only one :)
62 |
63 | [southerntofu](https://news.ycombinator.com/item?id=29305519)
64 |
65 | > Kudos for making it reusable and not specific to a single static site generator. […]
66 |
67 | [hannu](https://lobste.rs/s/a4jzvv/readme_static_site_riss#c_hiil4z)
68 |
69 | > […] A small but good idea, I like how simple riss.awk is.
70 |
71 | [lifthrasiir](https://news.ycombinator.com/item?id=29305070)
72 |
73 | ### Run It (Nothing to Install)
74 |
75 | To try it with [Hugo][hugo] or [Zola][zola], run the following in your static-site sources:
76 | ```sh
77 | wget https://cj.rs/riss.awk
78 | awk -f riss.awk /path/to/my-project/README.md > content/my-project.md
79 | ```
80 |
81 | If you don’t use Hugo or Zola, no problem! It should also work with any markdown-based static-site generator. Just put the markdown file where it makes sense for that generator.
82 |
83 | To automatically update these files in your static-site sources, see [Automate with GitHub Actions](#automate-with-github-actions) below. Since RISS is based on Awk, there is nothing to install, besides copying the script itself!
84 |
85 | ## Example
86 |
87 | ### Add a Front Matter
88 |
89 | Most static site generators require a “[front matter](https://gohugo.io/getting-started/configuration/#configure-front-matter)” at the beginning of a markdown file to attach some metadata. But you don’t want to add this to your GitHub README! Let’s hide this on GitHub and have it in the script’s output.
90 |
91 | In you .md file on GitHub, put:
92 |
93 |
99 |
100 |
101 |
102 | # README In Static Site (RISS)
103 |
104 |
105 | The output of the script will be:
106 |
107 | ---
108 | title: "README In Static Site (RISS)"
109 | date: 2021-08-21T10:15:54
110 | ---
111 |
112 |
113 | and this piece of yaml will be hidden on GitHub!
114 |
115 | ### Replace Asciinema Image
116 |
117 | You can’t embed the asciinema player on GitHub for security reasons. So the [asciinema documentation](https://asciinema.org/docs/embedding) suggests using an image there and to link it to a webpage with the player. But on your own website, you can embed this player.
118 |
119 | In your .md file, put:
120 |
121 |
122 | [](https://asciinema.org/a/427156)
123 |
124 |
127 |
128 | The output will contain only the asciinema player:
129 |
130 |
131 |
132 | *Note*: you also need to add the JS/CSS files of the asciinema player somewhere in your theme. This [Hugo module][hugo_ascii] makes it easy.
133 |
134 | ### More
135 |
136 | See the [input file (typically on GitHub)](https://github.com/cljoly/readme-in-static-site/blob/main/test.md) and the [output of the script](https://github.com/cljoly/readme-in-static-site/blob/main/test_output.md). You can find another real word [README](https://github.com/cljoly/telescope-repo.nvim/blob/master/README.md) converted to a [webpage](https://cj.rs/telescope-repo-nvim/) (this gives another example of asciinema conversion using a Hugo shortcode).
137 |
138 | With some shell scripting, you could also transform all the markdown files in your repo and put them in a subdirectory of your site, so that your project’s documentation, policy, etc… lives on your site or even on a site of its own.
139 |
140 | ### Your Example!
141 |
142 | Have you used this script to transform some markdown (or other) and insert it on your website? [Open an issue][issue] if you would like a link to your use case from this README!
143 |
144 | * **telescope-repo.nvim**: [readme](https://github.com/cljoly/telescope-repo.nvim/blob/master/README.md), [website](https://cj.rs/telescope-repo-nvim/); features an Asciinema clip.
145 | * **neovide**: [readme](https://github.com/neovide/neovide/blob/main/README.md), [first iteration of their website](https://neovide.dev/), [PR setting this up](https://github.com/neovide/neovide/pull/1114). They have now moved to mdbook and that’s great! RISS makes the first iteration of your website easy and you are free to move to more complete solutions when your project grows.
146 | * **Hugo APT Repository**: [readme](https://github.com/8hobbies/hugo-apt/blob/master/README.md), [website](https://hugo-apt.8hob.io/), [PR setting it up](https://github.com/8hobbies/hugo-apt/pull/12).
147 |
148 | ## Transformations Reference
149 |
150 | The transformations are driven by HTML comments, so that you can have different results when comments are ignored (e.g. in your GitHub README) and after executing the script on your markdown file.
151 |
152 | ### Escaping
153 |
154 | **It is important that your comment starts at the beginning of the line:** spaces are used for escaping, meaning that if the comment has spaces at the beginning of the line, it is ignored.
155 |
156 | So this is escaped
157 | ```
158 |
170 |
171 | ### Remove
172 |
173 | Use these two comments for text you want to have in your raw .md file, but not in the output
174 |
175 |
176 |
177 |
178 | ## Spread the Word
179 |
180 | If you find this script useful, please consider inserting the following in your readme:
181 | ```html
182 |
183 | ```
184 | This will help other people find the script. *Thanks for spreading the word!*
185 |
186 | If you feel especially charitable, you could put this badge somewhere:
187 |
188 | [](https://cj.rs/riss)
189 |
190 | with for instance this code:
191 | ```markdown
192 | [](https://cj.rs/riss)
193 | ```
194 |
195 | ## Breaking API Changes
196 |
197 | We follow [semver][] and any change that change would cause real world READMEs to be converted differently requires a new major version. In particular, the following is a breaking change:
198 | * adding new keywords (like `remove` or `insert`), as they may be used in the README prior to their introduction in RISS,
199 | * changing a keywords syntax.
200 |
201 | ## Benchmark
202 |
203 | **Processes 17600 lines in 10 ms**
204 |
205 | ```bash
206 | $ for i in {1..100}; do shuf README.md >>bench.md; done # Create a big md file
207 | $ wc -l README.md
208 | 176 README.md
209 | $ wc -l bench.md
210 | 17600 bench.md
211 | $ hyperfine 'awk -f riss.awk README.md' 'awk -f riss.awk bench.md'
212 | ```
213 |
214 | | Command | Mean [ms] | Min [ms] | Max [ms] | Relative |
215 | |:---|---:|---:|---:|---:|
216 | | `awk -f riss.awk README.md` | 2.8 ± 0.2 | 2.4 | 3.7 | 1.00 |
217 | | `awk -f riss.awk bench.md` | 9.7 ± 0.4 | 8.9 | 10.7 | 3.46 ± 0.30 |
218 |
219 | ## Automate with GitHub Actions
220 |
221 | You can automatically update the markdown file in the sources of your site with GitHub Actions. Add this workflow to, for instance, `.github/workflows/readme.yml`:
222 |
223 | ```yaml
224 | name: Update README files
225 |
226 | on:
227 | schedule:
228 | - cron: '30 */2 * * *'
229 | push:
230 | branches:
231 | - master
232 | # To run this workflow manually from GitHub GUI
233 | workflow_dispatch:
234 |
235 | jobs:
236 | build:
237 | runs-on: ubuntu-latest
238 | steps:
239 | - name: Check out the repo
240 | uses: actions/checkout@v2
241 | - name: Get the latest READMEs
242 | run: make readme-update
243 | - name: Commit and push if there are changes
244 | run: |-
245 | git diff
246 | git config --global user.email "bot@example.com"
247 | git config --global user.name "bot"
248 | git diff --quiet || (git add -u && git commit -m "Update READMEs")
249 | git push
250 | ```
251 |
252 | and then your `Makefile` may contain something like:
253 |
254 | ```make
255 | readme-update:
256 | curl https://raw.githubusercontent.com/cljoly/readme-in-static-site/main/README.md | awk -f riss.awk >content/readme-in-static-site.md
257 | ```
258 |
259 | Alternatively, you might configure your repositories to trigger a website rebuild when committing on your README, for instance using [GitHub actions webhooks][gh_webhook].
260 |
261 | ## Contributions are Welcome!
262 |
263 | Feel free to [open an issue][issue] to discuss something or to send a PR.
264 |
265 | See also the [Spread the Word][stw] section if you would like to make more folks aware of this script.
266 |
267 | 
268 |
269 | [hugo]: https://gohugo.io/
270 | [zola]: https://www.getzola.org/
271 | [hugo_ascii]: https://cj.rs/gohugo-asciinema/
272 | [issue]: https://github.com/cljoly/readme-in-static-site/issues/new
273 | [fast]: #benchmark
274 | [stw]: #spread-the-word
275 | [script]: https://cj.rs/riss.awk
276 | [gh_webhook]: https://mainawycliffe.dev/blog/github-actions-trigger-via-webhooks/
277 | [semver]: https://semver.org/
278 |
--------------------------------------------------------------------------------