Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
astro-fonts
Advanced tools
astro-fonts - npm Package Compare versions
Comparing version 0.1.0 to 0.2.0
@@ -18,3 +18,4 @@ 'use strict' | ||
| * Astro Font Component | ||
| * @description - A Specialised Font component which utilised the 'google-webfont-helper' to obtain font-files and information and to apply them into the project | ||
| * @description - A Specialised Font component which utilise the 'google-font-API' to obtain font-files and other relevant information and applies them into the project | ||
| * @author - Lostra01 - https://github.com/lostra01 | ||
| * @author - aFuzzyBear - https://github.com/aFuzzyBear | ||
@@ -35,2 +36,2 @@ * @copyright 2022 | ||
| */ | ||
| export {default as Font} from './Fonts.astro' | ||
| export {default as Font}from './Fonts.astro' |
| { | ||
| "name": "astro-fonts", | ||
| "version": "0.1.0", | ||
| "description": "A Specialised Astro Font Component, letting you utilise any of the fonts availble to you using the 'google-webfonts-helper' API. This lets you to download font files to the local filesystem or use the fonts remotely. This one componet is your one-stop for Fonts. ", | ||
| "version": "0.2.0", | ||
| "description": "A Specialised Astro Font Component, letting you utilise any of the fonts availble to you using Google Fonts. This lets you to download font files to the local filesystem or use the fonts remotely. This Font component is your one-stop shop for all your Fonts. ", | ||
| "type": "module", | ||
@@ -20,3 +20,3 @@ "scripts": { | ||
| ], | ||
| "author": "aFuzzyBear", | ||
| "contributors": ["lostra01","aFuzzyBear"], | ||
| "license": "MIT", | ||
@@ -29,3 +29,7 @@ "bugs": { | ||
| }, | ||
| "files": ["index.js","Fonts.astro"] | ||
| "files": ["index.js","Fonts.astro"], | ||
| "dependencies": { | ||
| "https": "^1.0.0", | ||
| "node-fetch": "^3.2.0" | ||
| } | ||
| } |
@@ -1,6 +0,6 @@ | ||
|  | ||
|  | ||
| # Astro-UI: Fonts Component | ||
| A specialised Astro Component which allows you to control how external fonts from the [`google-webfont-helper'](https://google-webfonts-helper.herokuapp.com/) API, are utilized within your Astro project. | ||
| A specialized Astro Component which allows you to control how external fonts from [Google's Font](https://fonts.google.com/) API, are utilized within your Astro project. | ||
@@ -22,3 +22,3 @@ ### Project Status: WIP - Out for Testing | ||
| ```astro | ||
| import Font from 'astro-fonts' | ||
| import { Font } from 'astro-fonts' | ||
| ``` | ||
@@ -31,3 +31,3 @@ | ||
| ```astro | ||
| <Font name="Roboto" weights={[400,500,700,900]} styles={['normal','itallic']} local? remote? /> | ||
| <Font family="Roboto" weights={[400,500,700,900]} local? || remote? /> | ||
| ``` | ||
@@ -38,8 +38,7 @@ | ||
| ```ts | ||
| export interface Props { | ||
| name: string; | ||
| styles?:string[] | string; | ||
| weights?: number[] | string; | ||
| local?:boolean; | ||
| remote?:boolean; | ||
| export interface Props{ | ||
| family: string; | ||
| weights?:number[] | string; | ||
| local?:boolean; | ||
| remote?:boolean; | ||
| } | ||
@@ -50,42 +49,32 @@ ``` | ||
| ----- | ||
| --- | ||
| ## How it works | ||
| The component makes a fetch request to the `google-webfont-helper` API and retreives all the meta information and font files in the background for the `Font.name` that you specify. | ||
| The component makes a request to Google's API directly and retrieves all the meta information and font files in the background for the `Font.family` that you specify. | ||
| It then applies this in one of two ways to your project, the default manner is where, a companion stylesheet would be generated within your `public/fonts/` directory. If this doesnt exist, one will be made for you. | ||
| It then applies this in one of two ways to your project, the default manner is where, a companion stylesheet would be generated within your `public/assets/fonts/` directory. If this file does not exist, one will be made for you. | ||
| The stylesheet would contain `@font-face` style rules pertaining to the importing of the requested font. It would also link this to your projects page using `<link as="stylesheet">`. Allowing you to declare the use of the fonts elsewhere in your project. | ||
| The generated stylesheet would contain `@font-face` style rules pertaining to the importing of the requested font. It would also link this to your projects page using `<link as="stylesheet">`. Allowing you to declare the use of the fonts elsewhere in your project. | ||
| ### Downloading Fonts | ||
| You can opt to choose to save the font-files to the filesystem. by applying the `local` prop to the `<Font name="" local/>` would instruct the component to download the files alongside their companion stylesheet. Saving you the laborious hassle of downloading and setting up the `@font-face'` style rules for yourself. | ||
| You can opt to choose to save the font-files to the filesystem. by applying the `local` prop to the `<Font family="..." local/>` would instruct the component to **download the files** alongside their companion stylesheet. | ||
| ----- | ||
| Saving you the laborious hassle of downloading and setting up the `@font-face'` style rules for yourself. | ||
| ## `name` : string | ||
| --- | ||
| This prop is required. Here specify they name of any font that is present on [`google-webfont-helper'](https://google-webfonts-helper.herokuapp.com/), and the component would aquire it for you. | ||
| ## `family` : string | ||
| This prop is required. Here specify they name of any font that is present on [`google-fonts'](https://fonts.google.com/), and the component would acquire it for you. | ||
| #### NB: | ||
| Currently you do need to pass in the name in its Capital format | ||
| This step is case-sensitive,where we respect the names as they appear on Google Fonts | ||
| ----- | ||
| --- | ||
| ## `styles` : string[ ] | string | ||
| ## `weights` : number[ ] | string | ||
| Here you can specify the type of styles you wish to include for your font requirements. | ||
| By default the component would request only 'normal' styles, however any value passed in as a prop would override this default behavior. | ||
| ```jsx | ||
| styles="italics" | {['normal','italics']} | ||
| ``` | ||
| ----- | ||
| ## `weights` : number[ ] | string | ||
| Here you can specify the many different weights for your font as you wish to include. | ||
@@ -96,10 +85,10 @@ | ||
| ```jsx | ||
| styles="italics" | {['normal','italics']} | ||
| weights="400" |{[400,600,900]} | ||
| ``` | ||
| ----- | ||
| --- | ||
| ## `local`? : boolean | ||
| To instruct the componet to download the fonts as to serve them from the filesystem instead of calling the font files via a network request. | ||
| To instruct the component to download the fonts as to serve them from the filesystem instead of calling the font files via a network request. | ||
@@ -109,10 +98,10 @@ Simply apply the property: `local` to the component. | ||
| ```astro | ||
| <Font name="Roboto" weights={[400,500,700,900]} styles={['normal','itallic']} local /> | ||
| <Font family="Roboto" weights={[400,700,900]} local /> | ||
| ``` | ||
| In this example a total of 8 font files would be downloaded and saved on to the filesystem, one for each of the respective font weights and their corresponding styles. | ||
| In this example a total of 3 font files would be downloaded and saved on to the filesystem, one for each of the respective font weights and their corresponding styles. | ||
| The `@font-face` rule set would also be amended to reflect the location of the font files. | ||
| ----- | ||
| --- | ||
@@ -125,10 +114,22 @@ ## `remote`? : boolean | ||
| ----- | ||
| --- | ||
| ## Credits | ||
| This Component was largely inspired by by [FredKSchott](https://github.com/FredKSchott)'s live stream, whereby he wanted to create this component, given the introduction and the subsequent follow-up visit by Astro Core Maintainer: [jonathantneal](https://github.com/jonathantneal) during his demonstration. | ||
| This Component was originally inspired by by [FredKSchott](https://github.com/FredKSchott)'s live stream, whereby he wanted to create this particular type of component, given the introduction and the subsequent follow-up visit by another Astro Core Maintainer: [jonathantneal](https://github.com/jonathantneal) during his later demonstration. | ||
| It was only fitting to see how far one could take their idea. | ||
| I would also like to give special mentions to [Rafid Muhymin](https://github.com/RafidMuhymin) and to Chuy for their assistance with debugging and testing. | ||
| `v0.1.0` - build was designed upon the ideas from both Fred and Jon. This version utilized [google-webfont-helper](https://google-webfonts-helper.herokuapp.com/fonts) API to retrieve the font files from a respectable location. | ||
| Fellow community member: [Lostra](https://github.com/lostra01) had then proposed a completely novel method for which the font component should derive the data directly from Google. | ||
| This lead to [Lostra](https://github.com/lostra01) developing a custom CSS parser, and a extremely efficient, quick and reliable method of retrieving and allocating fonts from Google. | ||
| This newer version of the 'Astro-Font Component', is based on his new mechanism and design. It is highly scalable throughout your project. It is extremely performant, ie: | ||
| "It can now download 15 different fonts all in `local` mode, each with 4 weights, with times seen between 250-550ms dev mode! and similar in Builds. | ||
| I would also like to give special mentions to [Rafid Muhymin](https://github.com/RafidMuhymin) and to [Chuy](https://github.com/jgil-r) for their assistance with debugging and testing. | ||
| Further more, [Lostra](https://github.com/lostra01) has demonstrated exceptional skill with creating this latest form, my sincerest and deepest thanks goes out to him for his efforts and labour on this project. |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Lines of code
- increased by2.94%
35
Worsened metrics
- Total package byte prevSize
- decreased by-2.16%
11696
- Dependency count
- increased byInfinity%
2
Dependency changes
+ Addedhttps@^1.0.0
+ Addednode-fetch@^3.2.0
+ Addeddata-uri-to-buffer@4.0.1(transitive)
+ Addedfetch-blob@3.2.0(transitive)
+ Addedformdata-polyfill@4.0.10(transitive)
+ Addedhttps@1.0.0(transitive)
+ Addednode-domexception@1.0.0(transitive)
+ Addednode-fetch@3.3.2(transitive)
+ Addedweb-streams-polyfill@3.3.3(transitive)