Skip to content

Commit

Permalink
Updated content Markdown file examples
Browse files Browse the repository at this point in the history
  • Loading branch information
robtweed committed Jul 29, 2024
1 parent 4c5c385 commit 4b5dd50
Show file tree
Hide file tree
Showing 8 changed files with 46 additions and 0 deletions.
8 changes: 8 additions & 0 deletions examples/sites/tutorial/content/install-bun.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
*MetaStatic*'s Build Module is written in JavaScript and can be used with Bun.js.

Install it as follows:

```code
bun install metastatic
```

9 changes: 9 additions & 0 deletions examples/sites/tutorial/content/install-node.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
*MetatStatic*'s Build Module is written in JavaScript and can be used with Node.js.

Install it as follows:

```code
npm install metastatic
```


9 changes: 9 additions & 0 deletions examples/sites/tutorial/content/usecase-1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
Many people these days are using complex and cumbersome JavaScript frameworks such as React, Vue or Angular, to create what are actually just static Web Sites where the content is largely fixed and only occasionally updated.

This isn't perhaps so much of an issue if the maintainer of such a Web Site is technically well-versed in such a framework, but, more often than not, the maintainer is someone else in the organisation who has little or no detailed technical or programming expertise, but is more focused on ensuring that the content required for the site is accurate and kept up to date. Such a Web Site maintainer will find it difficult to learn and understand the complexities involved when changes need to be made, and, nine times out of ten will need to go back to the original developer (if they are still available!) in order to make the change.

In any case, the use of such frameworks to create such Web Sites is often an unnecessary "sledgehammer to crack a nut".

Furthermore, such a site will typically be slow to load and start for users, because it will require potentially huge files of JavaScript to be loaded into the browser before anything can begin to be rendered.

And just to add insult to injury, Web Sites developed using JavaScript frameworks that dynamically build the markup by manipulating the page DOM can be difficult for web crawlers to properly and fully process and index the content for search engines to use, resulting in sub-optimal Search Engine Optimisation (SEO).
3 changes: 3 additions & 0 deletions examples/sites/tutorial/content/usecase-2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
For Web Sites that require maintenance of a lot of content that can change over time, the usual solution is to use a Content Management System (CMS). This requires specific technical skills and a potentially steep learning curve, and often the cost of a license for the CMS and/or associated database. The latter database may also need technical maintenance (eg backup, restore etc), again requiring specific technical expertise.

As a result, many Web Site maintainers turn to commercial packaged solutions such as Wordpress, Wix, Squarespace etc, most of which incur licensing or subscription costs and/or remote/cloud hosting, and potentially constraining the look and feel of the Web Site. Migrating between such services can also be problematic, so vendor lock-in is a real risk of such a solution.
8 changes: 8 additions & 0 deletions examples/sites/tutorial/content/usecase-3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
Meanwhile, there are a great many pre-built templates that can be used to create complex, modern, responsive user interfaces for static web sites, with the entire content and functionality delivered as a single HTML page. See for example:

- the [W3 Schools W3.CSS Templates](https://www.w3schools.com/css/css_rwd_templates.asp)
- the [SB Admin Dashboard Template](https://startbootstrap.com/theme/sb-admin-2)

Templates such as these don't require anything other than their own pre-defined CSS stylesheets and some behaviour-specific JavaScript files. They don't require React, Vue, Angular or any other build and runtime framework. As a result they are incredibly fast to load and run, and, being static HTML files, can be crawled and indexed completely for use by all search engines.

Whilst impressive in terms of their look and feel and functionality, tailoring such templates for a specific use case is, however, time-consuming, error-prone and fiddly, and requires a good understanding of HTML and JavaScript. For a full web site, the page would be huge, and making content changes would require scanning or searching the HTML page and editing in situ. More complex modifications, such as adding or changing new menu options, tabbed panels or content sections would probably be beyond the skills of a basic Web Site maintainer and would be a cumbersome task.
5 changes: 5 additions & 0 deletions examples/sites/tutorial/content/usecase-4.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
The thinking behind *MetaStatic* is: what if it was possible for a technically skilled developer to break down such templates into a hierarchy of high-level building blocks - Meta Tags - that represent the individual elements or components (eg the backdrop, the menus, tab controls, carousels etc) from which that template is constructed? Armed with a library of such Meta Tags, a relatively unskilled Web Site maintainer could then define their own spefically-customised version that conforms to the template, but containing their own content and using a much simpler and intuitive shorthand description summarising the bulding blocks and content needed for their specific site.

The idea would be to process such a high-level Meta Tag description and generate a user-specific version of the template HTML that could be loaded into the browser. If any changes were made to the Meta Tag description, simply re-running the build process would create an updated version of the HTML file needed for the Web Server.

The technical expertise required to build a Meta Tag library for a particular template would be a one-off expert task. However, the resulting Tag Library could then be used repeatedly and easily by any number of Web Site maintainers who would not require particularly detailed technical skills.
3 changes: 3 additions & 0 deletions examples/sites/tutorial/content/usecase-5.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
Furthermore, if the text content of the Web Site could be held separately, maintained in simple text files in a directory, using the now widely used and easily understood Markdown syntax (using any convenient editor from *nano* upwards!), then this content could be pulled in at build time for inclusion in the final template file. All this would require is a simple file naming convention and the ability to reference the corresponding file name in a Meta Tag that made use of that content.

No database would be needed, and no license or subscription fees needed. All that would be needed would be a basic understanding of a server's directory structure and the ability to use a text editor and devise a simple file nomeclature convention.
1 change: 1 addition & 0 deletions examples/sites/tutorial/content/usecase-6.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
So these are the underlying ideas and concepts behind *MetaStatic*: a new and deceptively simple way to create and maintain static Web Sites of any size and complexity, without the need for any complex JavaScript frameworks, CMS, database or build chain.

0 comments on commit 4b5dd50

Please sign in to comment.