ramidus
Advanced tools
Ramidus is a SPA for the modern web. Built with and for custom elements, Ramidus provides familiar conventions and a *tiny* bit of tooling to provide the best UX and DX possible.
Readme
Ramidus is a Single Page Application (SPA) template built for custom elements, bringing many of the benefits of frameworks like Next or Nuxt to vanilla sites. Unlike those frameworks, you're not locked into one way of doing things: all of the code is included in your project, and you are free to modify it however you wish.
<app-root> and <app-link> elements.<app-layout> element.<mark-down> element.Setup is easy and no tooling is required. You can scaffold your project using npx or simply download this zip file.
npx ramidus@latest && npm run dev
Global content like components, assets, layouts and your site's head are contained in the "@" folder. This naming convention keeps the folder first alphabetically so it's always easy to find.
Each page must have its own folder containing an index.html file, i.e. /about/index.html. Shared page elements are contained in the <app-layout> custom element.
Every page must include the following markup.
<body>
<app-layout>
<!-- Page Content -->
</app-layout>
<script src="/@/main.js" type="module"></script>
</body>
You can include markdown on any page using the <mark-down> custom element.
<mark-down src="/README.md"></mark-down>
To enable SPA-style routing, just wrap links in an <app-link> element. You can set preload="true" if you want the linked page to be pre-fetched as soon as the current page loads.
<app-link><a href="/about">About Us</a></app-link>
A layout is a custom element containing the site's shared markup. Layouts should include the <app-root> element with a nested <slot> to load the page's content. Here is the default layout included with Ramidus.
<!-- /@/app-layout.js -->
<app-nav></app-nav>
<main>
<app-root>
<slot></slot>
</app-root>
</main>
<app-footer></app-footer>
The layout can be updated dynamically based on the page you are on. When each page loads, the path and current page nesting level are added as classes to the <app-layout> element, i.e. class="about level-2". You can use these classes to style elements inside the layout element. In the template above, if you wanted to hide the footer on pages under the "about" path, you could use the following css in your layout.
:host(.about) app-footer {
display: none;
}
Global components go in the /@/components folder and are registered in /@/main.js. Ramidus's core components are built with Ardi, but you can use any custom element framework you like (or none).
No build step is required to deploy this site: you can copy this project to a simple server and it will run just fine. You will probably still want to run npm run build before you deploy though.
head is included with each page instead of being generated when the first page loads.| Build Command | Publish Directory |
|---|---|
| npm run build | dist |
FAQs
Ramidus is a SPA for the modern web. Built with and for custom elements, Ramidus provides familiar conventions and a *tiny* bit of tooling to provide the best UX and DX possible.
We found that ramidus demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).
Security News
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.