Gathering detailed insights and metrics for @parameter1/base-cms-marko-web-native-x
Gathering detailed insights and metrics for @parameter1/base-cms-marko-web-native-x
Installations
npm install @parameter1/base-cms-marko-web-native-xDeveloper Guide
BETA
Typescript
No
Module System
N/A
Node Version
20.12.0
NPM Version
lerna/6.5.1/node@v20.12.0+arm64 (darwin)
Releases
489
Languages
7
JavaScript
Vue
Marko
SCSS
HTML
Dockerfile
Shell
JavaScript (45.61%)
Vue (21.08%)
Marko (18.22%)
SCSS (14.7%)
HTML (0.19%)
Dockerfile (0.1%)
Shell (0.1%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1 Stars
10,653 Commits
9 Forks
4 Watchers
16 Branches
13 Contributors
Updated on Dec 09, 2024
Maintainers
4
Package Meta Information
Latest Version
4.80.0
Package Id
@parameter1/base-cms-marko-web-native-x@4.80.0
Unpacked Size
58.79 kB
Size
14.15 kB
File Count
51
NPM Version
lerna/6.5.1/node@v20.12.0+arm64 (darwin)
Node Version
20.12.0
Published on
Nov 15, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
BaseCMS Marko Web NativeX Components
NativeX components for BaseCMS/Marko websites.
Configuration
All NativeX components rely upon an instance of the NativeXConfiguration class being provided. For ease of use, this configuration is typically set into the Express app locals via the start-server utility, but must be provided when querying for an advertisement or a story. This configuration defines (at minimum) the NativeX instance URI and the default template alias. If website section-based templates are in use, they must be defined after creation:
1const NativeXConfiguration = require('@parameter1/base-cms-marko-web-native-x/config');
2
3const config = new NativeXConfiguration('https://example.native-x.parameter1.com',
4 {
5 enabled: true,
6 defaultAlias: 'default',
7 }
8);
9
10// Configure a placement
11config.setPlacement({
12 alias: 'default',
13 name: 'default',
14 id: '5d4b04769f69b200013ab109',
15});
16
17// Configure multiple placements for an alias
18config.setAliasPlacements('my-custom-alias', [
19 { name: 'custom-placement-1', id: '95d4b04769f69b200013ab10' },
20 { name: 'custom-placement-2', id: '095d4b04769f69b200013ab1' },
21]);
22
23module.exports = config;Usage
Advertisements
Rendering NativeX advertisements is typically done by using the <marko-web-native-x-render> component. If NativeX is enabled, this component then uses the <marko-web-native-x-retrieve> component to query NativeX for an advertisement. When an advertisement is available, the content node will be replaced by the ad details.
The render component requires the following properties:
config: An instance of the NativeXConfiguration class.name: The name of the placement to use (as defined bysetPlacementandsetAliasPlacements)aliases: An array of active aliases to use. (See aliases below)node: The content node that may become a NativeX ad.when: A boolean. When truthy, the content node will be replaced by the ad (if available)sectionName: Used by the conversion utilities. Because ads do not have website context, indicate the name of the primary section of the "content" (the ad, once replaced)
Aliases
When registering an placement, you must specify an alias. If you are not using any alias-aware placements, you should use the value default for the alias field. This is the most common!
In an atypical website deployment, multiple NativeX placements may be used to further segment NativeX metrics. When a placement is requested, the supplied aliases are checked against registered placements. If a more specific placement exists, it is used preferentially over the default placement with a matching name.
For example, consider the following:
1const config = new NativeXConfiguration(...); 2 3// The default placement 4config.setPlacement({ alias: 'default', name: 'default', id: '5d4b04769f69b200013ab109' }); 5config.setPlacement({ alias: 'section-1', name: 'default', id: '95d4b04769f69b200013ab10' }); 6config.setPlacement({ alias: 'section-2', name: 'default', id: '095d4b04769f69b200013ab1' }); 7 8const aliases = ['section-1/child-section/grand-child', 'section-1/child-section', 'section-1']; 9 10const placement = config.getPlacement({ name: 'default', aliases }); 11console.log(placement.id); 12// 95d4b04769f69b200013ab10
Stories
To render a NativeX story in a consuming application, import the with-story middleware. This middleware requires a NativeX configuration and a Marko template to render a response. It also supports sending a custom queryFragment to return additional fields, if needed.
An Express route
1// my-site/routes/native-x-story.js
2const withNativeXStory = require('@parameter1/base-cms-marko-web-native-x/middleware/with-story.js');
3const config = require('../config/native-x');
4const template = require('../templates/native-x-story');
5
6module.exports = (app) => {
7 app.use('/some-path/:id', withNativeXStory({
8 config, // Required. An instance of the NativeXConfiguration class.
9 template, // Required. A Marko template used to render the story.
10 queryFragment, // Optional. A GraphQL query fragment specifying included fields.
11 }));
12};A minimal Marko template
1<!-- my-site/templates/native-x-story.marko --> 2$ const { document } = out.global; 3$ const { story } = input; 4 5<${document}> 6 <@container> 7 <@page> 8 <if(imgSrc)> 9 <marko-web-img class="img-fluid" src=story.primaryImage.src /> 10 </if> 11 <h1>${story.title}</h1> 12 <if(story.teaser)> 13 <p>${story.teaser}</p> 14 </if> 15 <hr> 16 $!{story.body} 17 </@page> 18 </@container> 19</>
A GraphQL fragment definition
1// my-site/graphql/fragments/story.js 2 3const gql = require('graphql-tag'); 4 5module.exports = gql` 6 fragment MyCustomStoryFragment on Story { 7 id 8 title 9 campaigns { 10 totalCount 11 edges { 12 id 13 name 14 } 15 } 16 } 17`; 18
Event Tracking and analytics
To utilize NativeX's story analytics, you must use the event tracking utility functions to send events to the NativeX GTM container.
The GTM container can be initialized by including the <marko-web-native-x-gtm-init> component within your document's <head>:
1<${document}> 2 <@head> 3 <marko-web-native-x-gtm-init /> 4 </@head> 5</>
Before sending any events, make sure to include the <marko-web-native-x-story-track-init> component. This component initializes the data layer with the story data that other events rely upon.
1<${document}> 2 <@head> 3 <marko-web-native-x-gtm-init /> 4 </@head> 5 <@page> 6 <marko-web-native-x-story-track-init story=story /> 7 </@page> 8</>
See examples of available events below. By default, including the <marko-web-native-x-story-track-page-view> component will populate the datalayer with the story details. To disable this behavior, send the push=false parameter when including the component. All other story components assume this has already happened -- to force population of the data layer, send the push=true parameter when including the relevant component.
Page View
To send a page view, include the <marko-web-native-x-story-track-page-view> and pass the story property through (from the Nx middleware):
1$ const { story } = input; 2 3<${document}> 4 <@head> 5 <marko-web-native-x-gtm-init /> 6 </@head> 7 <@page> 8 <marko-web-native-x-story-track-page-view /> 9 <h1>${story.title}</h1> 10 </@page> 11</>
Outbound Links
To automatically track outbound links, include the <marko-web-native-x-story-track-outbound-links> component. This component requires a DOM selector in order to limit the tracking to a subset of links:
1$ const { story } = input; 2 3<${document}> 4 <@head> 5 <marko-web-native-x-gtm-init /> 6 </@head> 7 <@page> 8 <h1>${story.title}</h1> 9 <div id="my-story-body"> 10 <a href="https://google.com">This will be tracked when clicked!</a> 11 </div> 12 <marko-web-native-x-story-track-outbound-links container="#my-story-body" /> 13 </@page> 14</>
Social Sharing
If using the marko-web-social-sharing package, you can automatically track any share attempts by including the <marko-web-native-x-story-track-social-share> component in your story template:
1$ const { story } = input; 2 3<${document}> 4 <@head> 5 <marko-web-native-x-gtm-init /> 6 </@head> 7 <@page> 8 <marko-web-native-x-story-track-social-share /> 9 <h1>${story.title}</h1> 10 <marko-web-social-sharing path=story.url providers=["facebook", "email"] /> 11 </@page> 12</>
End of content
To automatically track when the user reaches the bottom of the page, include the <marko-web-native-x-story-track-end-of-content> component below your story. This event will fire when the element comes into view:
1$ const { story } = input; 2 3<${document}> 4 <@head> 5 <marko-web-native-x-gtm-init /> 6 </@head> 7 <@page> 8 <h1>${story.title}</h1> 9 <p>...</p> 10 <p>...</p> 11 <p>...</p> 12 <marko-web-native-x-story-track-end-of-content /> 13 </@page> 14</>
Manual/advanced implementations
You can also send an event directly by using one of the available utility functions:
1<script> 2import { endOfContent } from "@parameter1/base-cms-marko-web-native-x/utils/gtm-events"; 3 4export default { 5 created() { 6 endOfContent(); 7 } 8}; 9</script>
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
security policy file detected
Details
- Info: security policy file detected: SECURITY.md:1
- Info: Found linked content: SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1
- Info: Found text in security policy: SECURITY.md:1
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no binaries found in the repo
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/deploy-production.yml:46
Reason
SAST tool is run on all commits
Details
- Info: SAST configuration detected: CodeQL
- Info: all commits (23) are checked with a SAST tool
Reason
Found 3/14 approved changesets -- score normalized to 2
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-production.yml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-staging.yml:1
- Warn: no topLevel permission defined: .github/workflows/node-ci.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/codeql-analysis.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-production.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-production.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-production.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-production.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-production.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-production.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-production.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-production.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-production.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-production.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-production.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-production.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-staging.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-staging.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-staging.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-staging.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-staging.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-staging.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-staging.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-staging.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-staging.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-staging.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-staging.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/deploy-staging.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/node-ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/node-ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/parameter1/base-cms/node-ci.yml/master?enable=pin
- Warn: containerImage not pinned by hash: Dockerfile:1
- Warn: containerImage not pinned by hash: Dockerfile:10: pin your Docker image by updating node:14.21 to node:14.21@sha256:a158d3b9b4e3fa813fa6c8c590b8f0a860e015ad4e59bbce5744d2f6fd8461aa
- Warn: containerImage not pinned by hash: node-alpine-git/Dockerfile:1: pin your Docker image by updating node:10.15-alpine to node:10.15-alpine@sha256:aa28f3b6b4087b3f289bebaca8d3fb82b93137ae739aa67df3a04892d521958e
- Warn: containerImage not pinned by hash: packages/newsletter-deployment-tool/templates/Dockerfile:1
- Warn: containerImage not pinned by hash: packages/newsletter-deployment-tool/templates/Dockerfile:14: pin your Docker image by updating node:10.15-alpine to node:10.15-alpine@sha256:aa28f3b6b4087b3f289bebaca8d3fb82b93137ae739aa67df3a04892d521958e
- Warn: containerImage not pinned by hash: packages/website-deployment-tool/templates/Dockerfile:1
- Warn: containerImage not pinned by hash: packages/website-deployment-tool/templates/Dockerfile:14: pin your Docker image by updating node:10.15-alpine to node:10.15-alpine@sha256:aa28f3b6b4087b3f289bebaca8d3fb82b93137ae739aa67df3a04892d521958e
- Warn: containerImage not pinned by hash: packages/website-deployment-tool/templates/Dockerfile.service:1
- Warn: containerImage not pinned by hash: packages/website-deployment-tool/templates/Dockerfile.service:13: pin your Docker image by updating node:10.15-alpine to node:10.15-alpine@sha256:aa28f3b6b4087b3f289bebaca8d3fb82b93137ae739aa67df3a04892d521958e
- Warn: containerImage not pinned by hash: services/google-data-api/Dockerfile:1: pin your Docker image by updating node:14.21 to node:14.21@sha256:a158d3b9b4e3fa813fa6c8c590b8f0a860e015ad4e59bbce5744d2f6fd8461aa
- Warn: containerImage not pinned by hash: services/graphql-server/Dockerfile:1: pin your Docker image by updating node:14.21 to node:14.21@sha256:a158d3b9b4e3fa813fa6c8c590b8f0a860e015ad4e59bbce5744d2f6fd8461aa
- Warn: containerImage not pinned by hash: services/hooks/Dockerfile:1: pin your Docker image by updating node:14.21 to node:14.21@sha256:a158d3b9b4e3fa813fa6c8c590b8f0a860e015ad4e59bbce5744d2f6fd8461aa
- Warn: containerImage not pinned by hash: services/oembed/Dockerfile:1: pin your Docker image by updating node:14.21 to node:14.21@sha256:a158d3b9b4e3fa813fa6c8c590b8f0a860e015ad4e59bbce5744d2f6fd8461aa
- Warn: containerImage not pinned by hash: services/omail-link-processor/Dockerfile:1: pin your Docker image by updating node:14.21 to node:14.21@sha256:a158d3b9b4e3fa813fa6c8c590b8f0a860e015ad4e59bbce5744d2f6fd8461aa
- Warn: containerImage not pinned by hash: services/rss/Dockerfile:1: pin your Docker image by updating node:14.21 to node:14.21@sha256:a158d3b9b4e3fa813fa6c8c590b8f0a860e015ad4e59bbce5744d2f6fd8461aa
- Warn: containerImage not pinned by hash: services/sitemaps/Dockerfile:1: pin your Docker image by updating node:14.21 to node:14.21@sha256:a158d3b9b4e3fa813fa6c8c590b8f0a860e015ad4e59bbce5744d2f6fd8461aa
- Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 10 third-party GitHubAction dependencies pinned
- Info: 0 out of 16 containerImage dependencies pinned
Reason
61 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-7v5v-9h63-cj86
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-vc8w-jr9v-vj7f
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-wm7h-9275-46v2
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-8cf7-32gw-wr33
- Warn: Project is vulnerable to: GHSA-hjrf-2m68-5959
- Warn: Project is vulnerable to: GHSA-qwph-4952-7xr6
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h755-8qp9-cq85
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-qgmg-gppg-76g5
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
- Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
- Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
- Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
4.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More