https://mithril-by-examples.tebe.ch/tags/examples/

Looks like bad filtering or so.

For SEO, redirect http:// requests to https:// using .htaccess directives.

This should work:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^mithril-by-examples.tebe.ch [NC]
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://mithril-by-examples.tebe.ch/$1 [R,L]

Add syntax highlighting with highlight.js and configure it like here: https://github.com/tbreuss/mithril-by-examples/blob/ssr-php/views/example.php#L45-L47

Syntax highlight is used for:

• JavaScript
• Typescript
• CSS
• HTML

Hey, I think there is a typo here:

I believe the proper term should be "Live Example". Love the new design by the way.

For tags and contributors add number of examples.
This affects the following views:

• tags overview
• tags api
• contributors overview
• contributors api

I better layout would be nice.

• Can be really simple
• Must be responsive
• Must include the Mithril logo
• Must include syntax highlighting
• Must include a footer with several links

检测到 tbreuss/mithril-by-examples 一共引入了300个开源组件，存在1个漏洞

漏洞标题：Socketio Engineio 资源管理错误漏洞
漏洞编号：CVE-2020-36048
漏洞描述：Socketio Engineio是Socketio社区的一个基于Javascript用于浏览器与设备进行双向通信的实时引擎。
Socketio Engine.IO before 4.0.0 存在安全漏洞，攻击者可利用该漏洞通过对长轮询传输的POST请求导致拒绝服务(资源消耗)。
影响范围：(∞, 4.0.0)
最小修复版本：4.0.0
缺陷组件引入路径：[email protected]>@11ty/[email protected]>[email protected]>[email protected]>[email protected]

另外还有几个漏洞，详细报告：https://mofeisec.com/jr?p=n50cc9

I.e. the one from the official Mithril.js website.

Add a GitHub action to build and deploy the website.

Building:

• See Eleventy website

Deploy:

• Must support transfering artefacts to a normal (shared) hosting (i.e. via SCP command)

A step by step tutorial could be found here:
https://dev.to/koddr/automate-that-a-practical-guide-to-github-actions-build-deploy-a-static-11ty-website-to-remote-virtual-server-after-push-d19

Add the mithril logo to the base layout.

The logo should be a svg as used by the mithril.js website itself.

Add a "How to Contribute" page with all of the information a user needs to know in order to contribute to this repository.

Hey there 👋 great site, I think this is a great (and updated) alternative to the live examples on the official Mithril site.

One small suggestion I have is moving the Live Example buttons closer to the tops of their respective pages (see screenshot of an example). Not saying it should be under the description, but I definitely think it should be closer to the top of the page. My reasoning is three-fold:

1. Many users (including me) may want to see what exactly the demo is before I see the code
2. Flems examples already include the code!
3. I love the site, but I often find myself scrolling alot just to get to the live example button on each demo

Thoughts welcome.

On the generated website, add a link to the example on GitHub, so that a visitor can edit the source if needed.

See https://www.11ty.dev/docs/quicktips/edit-on-github-links/

Add a detailed example for demonstration purposes, especially for the handling of the autogenerated flems links.

Create and build this website using Elevenly SSG (https://www.11ty.dev)

The simple application requires version 1.1.6.

https://github.com/tbreuss/mithril-by-examples/blob/main/examples/simple-application.md

Make it work running version 2.0.4.

Screenshots:

Create API endpoint GET /api/examples.json adding a corresponding JSON file that includes certain front matter data from the files within the examples directory.

Instructions to do so can be found here: https://dev.to/mattwaler/creating-json-files-with-eleventy-13lk.

The API endpoint musst be:

• GET /api/examples.json

The data from front matter must include:

• title
• date
• tags
• level
• version
• authors
• credits
• links
• content without markup (if possible)

The goal is to have an API with several endpoints (in the end) starting with this one.

Since we have some sort of automatically generated text blocks and the example level from front matter data is part if this, all levels of all examples must be edited accordingly.

Take over osban's snippets from here:

• https://github.com/osban/mithril-codex/blob/master/how2code.md
• TodoMVC Traditional
• TodoMVC Mitosis
• Tic Tac Toe Mitosis

The implementation must be integrated in this Markdown file:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/7gui-timer.md

And the content should be formatted like here for example:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/routing.md

If you have any question, leave a message in the comments.

According to the Eleventy docs (https://www.11ty.dev/docs/dates/), replace all created and modified dates in the front matter of the examples with a date only.

Before:
--
title: Examples
created: 2021-10-18
modified: 2021-10-18
--

After:
--
title: Examples
date: 2021-10-18
--

The implementation must be integrated in this Markdown file:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/7gui-cells.md

And the content should be formatted like here for example:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/routing.md

If you have any question, leave a message in the comments.

Link author displayed on the example page to the contributors page.

For example here:

• https://mithril-by-examples.tebe.ch/examples/component-closure-add-item/

So, the name of the author "osban" should be linked to "/contributors/osban/".

Search is OR based at the moment, when using multiple terms.
We should switch to an AND based search.

Todo

• Switch from OR to AND
• Show number of search results
• Store last search in local storage
• Split input words with regex filtering multiple spaces

We should introduce BEM or another naming convention for CSS:

http://getbem.com/introduction/

And at the same time the whole CSS should be cleaned up, of course.

Support seo friendly page titles.

The implementation must be integrated in this Markdown file:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/7gui-flight-booker.md

And the content should be formatted like here for example:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/routing.md

If you have any question, leave a message in the comments.

Search is OR based at the moment, when using multiple terms.
We should switch to an AND based search.

The implementation must be integrated in this Markdown file:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/7gui-crud.md

And the content should be formatted like here for example:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/routing.md

If you have any question, leave a message in the comments.

... with links in the navigation.

Everything should look like the tags pages.

The implementation must be integrated in this Markdown file:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/7gui-temperature-converter.md

And the content should be formatted like here for example:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/routing.md

If you have any question, leave a message in the comments.

Add a search page and implement a search functionality using Mithril.js, of course.

• add a new page by name "search"
• add this page to the above navigation before about
• use the api endpoints like:
  • /api/examples.json
  • /api/tags.json
• add a new layout template (if necessary)

The implementation must be integrated in this Markdown file:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/7gui-counter.md

And the content should be formatted like here for example:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/routing.md

If you have any question, leave a message in the comments.

See #24

For examples that have more than 2 or 3 code sections we should add a TOC like here.

The implementation must be integrated in this Markdown file:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/7gui-circle-drawer.md

And the content should be formatted like here for example:

• https://github.com/tbreuss/mithril-by-examples/blob/main/examples/routing.md

If you have any question, leave a message in the comments.