@shaai/scroll-ink
Advanced tools
Scrolls (aka templates) are a pre-defined way of displaying data from Shaai. They are named as scroll-*, * being the name. Ink's npm package, hence, is @shaai/scroll-ink.
Shaai is a pluggable blogging framework, allowing you to use elements as per your need. All the scrolls use the @shaai/core package internally to source the blog data. According to your environment, you may use a scroll in following ways:
Using Shaai with React is super easy, thanks to our React wrapper @shaai/react. Install the two dependencies required.
// You can replace scroll-ink with any other scroll of your choice
npm install --save @shaai/scroll-ink @shaai/react
And use them as follows:
import withShaai from '@shaai/react'
import ScrollInk from '@shaai/scroll-ink'
const Shaai = withShaai(ScrollInk)
const App = function(props) {
return <div>
<Shaai config={config} />
</div>
}
const config = {
// Described below
}
To include styles, add this line to your CSS file:
@import "~@shaai/scroll-ink/dist/main.css"
Using in a Node dev environment
To use in a Node project, install scroll-ink first.
npm install --save @shaai/scroll-ink
Then import and initialise it with the config object.
import ScrollInk from '@shaai/scroll-ink'
const s = new ScrollInk(config)
// define your own templates
const templates = [/* template array discussed below */]
// Load whenever ready. If no templates are sent, Ink uses its default templates.
s.load(templates)
// Subscribe to updates
s.subscribe((dom) => {
let b = document.getElementById('blog')
b.innerHTML = ''
b.append(dom)
})
To include styles, add this line to your CSS file:
@import "~@shaai/scroll-ink/dist/main.css"
Using in the browser
To use Shaai in the browser directly, we recommend using unpkg to source the build files. Just include these lines inside your <head> tag of your HTML document.
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@shaai/scroll-ink/dist/main.css">
<script src="https://unpkg.com/@shaai/scroll-ink/dist/main.js"></script>
This will include the latest js and css build files from the scroll-ink npm package, which make the ScrollInk property available globally. The rest of the process is quite similar to the above one.
let s = new ScrollInk(config)
window.onload = function() {
s.load()
s.subscribe(function(dom) {
document.getElementById('blog').innerHTML = ''
document.getElementById('blog').append(dom)
})
}
Here's a short video to setup your first blog using Shaai and React.
config objectEach Shaai instance needs to be initialised with a config object to make Shaai work as the way you want. You can pass in following properties currently:
| Property | Type | Description | Default |
|---|---|---|---|
source | object | Has information about where to source the blog data from | required |
basePath | string | Relative path where your blog will rest e.g. /blog | '' |
blogHeader | object / HTMLElement | Data to be rendered in the blog header { title: 'My blog' } | Default header |
blogFooter | object / HTMLElement | Data to be rendered in the blog footer { title: 'Some text' } | Default header |
globalHeader | boolean | If true, the header will be shown on all routes. Can be overriden at route level in the templates. | false |
globalFooter | boolean | If true, the footer will be shown on all routes. Can be overriden at route level in the templates. | false |
globalNav | boolean | If true, the nav bar will be shown on all routes. Can be overriden at route level in the templates. | false |
source object| Property | Type | Description | Default |
|---|---|---|---|
name | string | Name of the data source CMS / FS / MEDIUM | 'CMS' |
config | object | Contains config data for the source e.g. { blogCode: 12345asdf } for source = 'CMS' | required |
Templates are the route-based views in scroll-ink. It is an array of template objects which have following properties:
pathThis is the path/route for the template. Whenever the window path matches this value, the corresponding template will be rendered.
fetchThis is the method which is called before rendering the respective view. It receives the shaai instance, the store and the url params. While most views would requiring fetching data, you can skip this property if only static data has to be rendered.
templateThis is the function that returns the actual DOM snippet for the matched path. It receives the data received from the fetch function, if any, and should return a HTMLElement object.
nameThis property is used at places like the navigation bar, to mention the matched path's name.
A template object can look as below
const templates = [
{
path: '/',
name: 'Posts',
template: (data) => s.list(data, { minimiseContent: true, viewFilter: ['title', 'content', 'publishData'] }),
fetch: (shaai, store, params) => {
return new Promise(res => {
if(store.getData('posts')) {
res(store.getData('posts'))
}
shaai.getBlogs().then(data => {
store.setData({ posts: data.items })
res(data.items)
})
})
}
},
{
path: '/about',
name: 'About',
template: ({ config }) => {
let html = `
<div>
<h4 class="about-heading">About me</h4>
<p class="about-content">Hello there! I am <a href="https://github.com/mohtik05">@mohitk05</a></p>
</div>
`
let about = document.createElement('div')
about.className = 'about'
about.innerHTML = html
return about
}
}
]
Run npm run start:dev for starting the Webpack dev server.
FAQs
Ink template for Shaai
We found that @shaai/scroll-ink demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.