push.rocks/websetup
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update tsconfig

Browse Source
This commit is contained in:
Philipp Kunz 2024-04-14 18:42:06 +02:00
parent fa9f2afbad
commit 3d2e5e48c1
4 changed files with 171 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
npmextra.json
View File

@ -9,12 +9,26 @@
"githost": "code.foss.global",
"gitscope": "push.rocks",
"gitrepo": "websetup",
"description": "setup basic page properties",
"description": "A library for setting up basic properties of a web page including meta tags, OpenGraph tags, JSON-LD structured data, with support for dynamic content.",
"npmPackagename": "@push.rocks/websetup",
"license": "MIT"
"license": "MIT",
"keywords": [
"web development",
"SEO",
"OpenGraph",
"JSON-LD",
"meta tags",
"structured data",
"TypeScript",
"dynamic content",
"website setup",
"smart delay",
"smart promise",
"tag management"
]
}
},
"tsdocs": {
"tsdoc": {
"legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
}
}

16
package.json
View File

@ -2,7 +2,7 @@
"name": "@push.rocks/websetup",
"version": "3.0.19",
"private": false,
"description": "setup basic page properties",
"description": "A library for setting up basic properties of a web page including meta tags, OpenGraph tags, JSON-LD structured data, with support for dynamic content.",
"main": "dist_ts/index.js",
"typings": "dist_ts/index.d.ts",
"author": "Lossless GmbH",
@ -13,8 +13,18 @@
"buildDocs": "tsdoc"
},
"keywords": [
"lossless",
"websafe"
"web development",
"SEO",
"OpenGraph",
"JSON-LD",
"meta tags",
"structured data",
"TypeScript",
"dynamic content",
"website setup",
"smart delay",
"smart promise",
"tag management"
],
"devDependencies": {
"@gitzone/tsbuild": "^2.1.65",

1
readme.hints.md Normal file
View File

@ -0,0 +1 @@

166
readme.md
View File

@ -1,37 +1,151 @@
# @pushrocks/websetup
# @push.rocks/websetup
setup basic page properties
## Availabililty and Links
* [npmjs.org (npm package)](https://www.npmjs.com/package/@pushrocks/websetup)
* [gitlab.com (source)](https://gitlab.com/pushrocks/websetup)
* [github.com (source mirror)](https://github.com/pushrocks/websetup)
* [docs (typedoc)](https://pushrocks.gitlab.io/websetup/)
## Install
To install @push.rocks/websetup, you can use npm (Node Package Manager). Simply run the following command in your terminal:
## Status for master
```bash
npm install @push.rocks/websetup --save
```
Status Category | Status Badge
-- | --
GitLab Pipelines | [![pipeline status](https://gitlab.com/pushrocks/websetup/badges/master/pipeline.svg)](https://lossless.cloud)
GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/pushrocks/websetup/badges/master/coverage.svg)](https://lossless.cloud)
npm | [![npm downloads per month](https://badgen.net/npm/dy/@pushrocks/websetup)](https://lossless.cloud)
Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/pushrocks/websetup)](https://lossless.cloud)
TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@pushrocks/websetup)](https://lossless.cloud)
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@pushrocks/websetup)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@pushrocks/websetup)](https://lossless.cloud)
This will download the package and add it to your project's `node_modules` directory, as well as save it as a dependency in your project's `package.json` file.
## Usage
Use TypeScript for best in class intellisense.
To use @push.rocks/websetup in your web applications to set up basic page properties efficiently, follow these steps and guidelines. The examples are provided using ECMAScript modules (ESM) syntax along with TypeScript for type safety and better tooling support.
## Contribution
First, ensure you import the necessary modules from @push.rocks/websetup in your TypeScript files:
We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
```typescript
// Import the main class `WebSetup` from the package
import { WebSetup } from '@push.rocks/websetup';
```
For further information read the linked docs at the top of this readme.
### Basic Setup
## Legal
> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
Begin by creating an instance of `WebSetup` with basic page properties. This example demonstrates setting up page title, description, and canonical URL.
```typescript
// Create a WebSetup instance with basic meta information
const webSetup = new WebSetup({
metaObject: {
title: 'Example Page Title',
description: 'This is a description of the example page.',
canonicalDomain: 'https://www.example.com',
},
});
// Wait for the setup to complete
webSetup.readyPromise.then(() => {
console.log('WebSetup is ready.');
});
```
### Advanced Usage
#### Setting up Structured Data with JSON-LD
Structured data is crucial for SEO and enhancing your page's appearance in search results. @push.rocks/websetup allows you to easily setup company, product, or news article information using JSON-LD.
```typescript
// Define company information
const companyInfo = {
name: 'Example Company Inc.',
contact: {
website: 'https://www.example.com',
logoUrl: 'https://www.example.com/logo.png',
phone: '+1234567890',
facebookUrl: 'https://facebook.com/example',
twitterUrl: 'https://twitter.com/example',
},
};
// Pass the company information to WebSetup
const webSetupWithCompanyInfo = new WebSetup({
metaObject: {
title: 'Example Page Title',
ldCompany: companyInfo,
},
});
// For products
const productInfo = {
name: 'Example Product',
description: 'A detailed description of the example product.',
os: 'Web',
category: 'SaaS',
logoLink: 'https://www.example.com/product-logo.png',
};
// Pass the product information along with company information for structured data setup
const webSetupWithProductInfo = new WebSetup({
metaObject: {
title: 'Product Page Title',
ldProduct: productInfo,
ldCompany: companyInfo,
},
});
// Wait for setup completion
webSetupWithProductInfo.readyPromise.then(() => {
console.log('WebSetup with product info is ready.');
});
```
#### Dynamic Subpage Levels
You might have a web application where different "subpages" or sections require different meta tags (e.g., title, description). You can dynamically set these properties without recreating the WebSetup instance.
```typescript
// Assume `webSetup` is an existing instance of WebSetup
// Define meta object for a new subpage
const subPageMeta = {
title: 'Subpage Title',
description: 'Description for the subpage.',
};
// Dynamically set the subpage level
webSetup.setSubLevel(subPageMeta).then(() => {
console.log('Subpage meta tags are set.');
});
// Revert to base level when leaving the subpage
webSetup.revertToBaseLevel();
```
This approach allows developers to manage site-wide and subpage-specific properties efficiently, enhancing user experience and SEO.
### Handling Ready for Server-Side Rendering (SSR)
For projects using server-side rendering (SSR), it is essential to signal when the page is ready to be captured. This is especially useful when using SSR solutions like smartSSR that wait for a signal from the client.
```typescript
// Inform that the page is ready for SSR capture
webSetup.informReadyForSmartssr();
```
Note: This feature should be used if you have `smartssrWaitForReadySignal` option enabled during the `WebSetup` initialization.
### Conclusion
The `@push.rocks/websetup` package provides a streamlined way to manage basic page properties, structured data using JSON-LD for SEO, and dynamic settings for different page sections or states. By following the examples above and integrating @push.rocks/websetup into your projects, you can improve your web application's SEO, maintainability, and developer experience.
## License and Legal Information
This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository.
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
### Trademarks
This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
### Company Information
Task Venture Capital GmbH
Registered at District court Bremen HRB 35230 HB, Germany
For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.