update documentation
This commit is contained in:
parent
70aafeef39
commit
f68a0ca802
@ -2,17 +2,30 @@
|
||||
"gitzone": {
|
||||
"projectType": "npm",
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
"githost": "code.foss.global",
|
||||
"gitscope": "designestate",
|
||||
"gitrepo": "fontloader",
|
||||
"description": "a fontloader for managing font loading from A to Z",
|
||||
"npmPackagename": "@designestate/fontloader",
|
||||
"license": "MIT",
|
||||
"projectDomain": "design.estate"
|
||||
"projectDomain": "design.estate",
|
||||
"keywords": [
|
||||
"font loading",
|
||||
"font management",
|
||||
"typescript",
|
||||
"web development",
|
||||
"UI design",
|
||||
"custom fonts",
|
||||
"performance optimization",
|
||||
"module"
|
||||
]
|
||||
}
|
||||
},
|
||||
"npmci": {
|
||||
"npmGlobalTools": [],
|
||||
"npmAccessLevel": "public"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
10
package.json
10
package.json
@ -36,5 +36,15 @@
|
||||
"cli.js",
|
||||
"npmextra.json",
|
||||
"readme.md"
|
||||
],
|
||||
"keywords": [
|
||||
"font loading",
|
||||
"font management",
|
||||
"typescript",
|
||||
"web development",
|
||||
"UI design",
|
||||
"custom fonts",
|
||||
"performance optimization",
|
||||
"module"
|
||||
]
|
||||
}
|
||||
1
readme.hints.md
Normal file
1
readme.hints.md
Normal file
@ -0,0 +1 @@
|
||||
|
||||
117
readme.md
117
readme.md
@ -1,37 +1,100 @@
|
||||
# @designestate/fontloader
|
||||
a fontloader for managing font loading from A to Z
|
||||
|
||||
## Availabililty and Links
|
||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/fontloader)
|
||||
* [gitlab.com (source)](https://gitlab.com/designestate/fontloader)
|
||||
* [github.com (source mirror)](https://github.com/designestate/fontloader)
|
||||
* [docs (typedoc)](https://designestate.gitlab.io/fontloader/)
|
||||
|
||||
## Status for master
|
||||
|
||||
Status Category | Status Badge
|
||||
-- | --
|
||||
GitLab Pipelines | [](https://lossless.cloud)
|
||||
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||
npm | [](https://lossless.cloud)
|
||||
Snyk | [](https://lossless.cloud)
|
||||
TypeScript Support | [](https://lossless.cloud)
|
||||
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
Code Style | [](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||
## Install
|
||||
To install `@designestate/fontloader`, ensure that you have Node.js and npm installed, then run the following command in your project directory:
|
||||
```sh
|
||||
npm install @designestate/fontloader --save
|
||||
```
|
||||
This will add `@designestate/fontloader` as a dependency to your project's `package.json` file and download it to your `node_modules` folder.
|
||||
|
||||
## Usage
|
||||
|
||||
Use TypeScript for best in class intellisense
|
||||
The `@designestate/fontloader` package serves as a utility to manage and load fonts, specifically designed to cater to web development needs. It supports a range of fonts including 'Inter', 'MaterialIcons', and 'Courier Prime'. Below, you'll find comprehensive usage examples outlined in TypeScript to integrate and utilize the full potential offered by this font loader.
|
||||
|
||||
## Contribution
|
||||
### Getting Started
|
||||
|
||||
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). :)
|
||||
First, ensure you're importing the `FontLoader` class and the type `TFonts` from the package at the top of your TypeScript file:
|
||||
|
||||
For further information read the linked docs at the top of this readme.
|
||||
```typescript
|
||||
import { FontLoader, TFonts } from '@designestate/fontloader';
|
||||
```
|
||||
|
||||
## 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)
|
||||
### Loading Fonts
|
||||
|
||||
To load fonts into your project effectively, `FontLoader` provides a singleton pattern ensuring that fonts are loaded once and are accessible throughout the runtime of your application or site. Here's a basic example to get you started:
|
||||
|
||||
```typescript
|
||||
// Define the fonts you want to load
|
||||
const myFonts: TFonts[] = ['Inter', 'MaterialIcons'];
|
||||
|
||||
// Ensure fonts are loaded
|
||||
FontLoader.ensureFonts(myFonts);
|
||||
|
||||
// Later in your application, you might want to explicitly load a specific font
|
||||
const fontLoaderInstance = new FontLoader();
|
||||
fontLoaderInstance.loadInter();
|
||||
```
|
||||
|
||||
Note that `ensureFonts` method in this context is provided as a stub to showcase the expected functionality. It implies ensuring or checking that the desired fonts are loaded or making decisions to load them.
|
||||
|
||||
### Advanced Usage
|
||||
|
||||
Depending on your application's complexity and requirements, you might want to extend or customize the behavior of the `FontLoader`. Since the provided code snippets are primarily stubs to guide the implementation, here's an extended example illustrating potential custom functionalities:
|
||||
|
||||
```typescript
|
||||
class AdvancedFontLoader extends FontLoader {
|
||||
constructor() {
|
||||
super();
|
||||
// Custom initialization if required
|
||||
}
|
||||
|
||||
public async loadCustomFont(fontName: TFonts) {
|
||||
// Implement logic to load a custom font not available by default
|
||||
// This could involve fetching the font from an API, loading it from local storage, etc.
|
||||
console.log(`Loading custom font: ${fontName}`);
|
||||
// Placeholder logic
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
const advancedFontLoader = new AdvancedFontLoader();
|
||||
advancedFontLoader.loadCustomFont('Courier Prime').then(() => {
|
||||
console.log('Custom font loaded successfully');
|
||||
});
|
||||
```
|
||||
|
||||
### Best Practices
|
||||
|
||||
- **Caching:** Implement caching mechanisms to store loaded fonts, preventing redundant fetches and enhancing performance.
|
||||
- **Error Handling:** Always include error handling logic, especially when loading fonts from external sources.
|
||||
- **Cross-Browser Support:** Test font loading across different browsers to ensure consistency in user experience.
|
||||
- **Font Fallbacks:** Specify font fallbacks in your CSS to maintain usability and design integrity even if a font fails to load.
|
||||
|
||||
### Conclusion
|
||||
|
||||
`@designestate/fontloader` offers a pragmatic foundation for managing fonts in web projects, catering to essential needs such as supporting popular fonts like 'Inter' and 'MaterialIcons'. By following the outlined examples in TypeScript, integrating and leveraging this package should streamline the font management process, allowing developers to focus on building engaging, visually consistent web experiences.
|
||||
|
||||
For further customization and advanced scenarios, extending the `FontLoader` class as shown in the advanced usage example provides a flexible pathway to accommodate project-specific requirements.
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
@ -3,8 +3,12 @@
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"moduleResolution": "nodenext",
|
||||
"esModuleInterop": true
|
||||
}
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext",
|
||||
"esModuleInterop": true,
|
||||
"verbatimModuleSyntax": true
|
||||
},
|
||||
"exclude": [
|
||||
"dist_*/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user