Skip to content

rapidjs-org/plugin--pageframe

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML Pageframe   rJS Plugin

Consistent web pages through a wrapping HTML frame.

Install

npm i rapidjs-org/plugin--pageframe

__rjs.plugin.json

{
  "package": "@plugins.rapidjs.org/pageframe"
}

Use

Any file in the /pages directory is wrapped by the global _frame.html markup. The mapping to the public directory happens at root level (i.e., pages/page.html/page). For each source page HTML, the contents of the <head> tag is appended to the global head. Same holds for the <main> tag. If no according tags are in a source page, however, the contents are directly written to the global main.

└─ /src …
   └─ /html
      ├─ __rjs.plugin.json
      ├─ _frame.html
      └─ /pages
         ├─ index.html
         └─ /legal
            ├─ contact.html
            └─ terms.html

src/html/_frame.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- DYNAMIC -->
    </head>
    <body>
        <header>
            <h1>Example</h1>
        </header>
        
        <main>
            <span>This is static</span>
            <!-- DYNAMIC -->
        </main>
        
        <footer>
            <a href="/legal/contact">Contact</a>
            <a href="/legal/terms">Terms</a>
        </footer>
    </body>
</html>

src/html/pages/index.html

<head>
  <title>Home</title>
  <link rel="stylesheet" href="/css/index.css">
</head>

<main>
  <h2>Home</h2>
</main>

/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <link rel="stylesheet" href="/css/index.css">
    </head>
    <body>
        <header>
            <h1>Example</h1>
        </header>
        <main>
            <span>This is static</span>
            <h2>Home</h2>
        </main>
        <footer>
            <a href="/legal/contact">Contact</a>
            <a href="/legal/terms">Terms</a>
        </footer>
    </body>
</html>

src/html/pages/legal/conctact.html/legal/contact

<head>
  <title>Contact – Legal</title>
  <link rel="stylesheet" href="/css/legal.css">
</head>

<h2>Contact</h2>

© Thassilo Martin Schiepanski

About

rJS plugin for HTML pageframes.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published