https://github.com/techmely/head

Simple solution's head manager built for performance and delightful DX
https://github.com/techmely/head

Last synced: about 1 month ago
JSON representation

Simple solution's head manager built for performance and delightful DX

• Host: GitHub
• URL: https://github.com/techmely/head
• Owner: techmely
• Created: 2024-07-11T13:43:50.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-29T14:42:14.000Z (5 months ago)
• Last Synced: 2024-11-02T03:34:26.767Z (about 2 months ago)
• Language: TypeScript
• Size: 223 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Head Manager in SSR

An easy peasy lemon squeezy solution for management head in your server side.

- Small bundle size

- Super easy in DX, write head like you write object JS

- Support auto sort head with logic of CapoJs to improve the website performance

## How to use

```bun

bun install @techmely/head

```

```ts

const heads: Head[] = []

const headHtml = composeHeads(heads)

```

### Example

```ts

const colorSchemeHeads = genColorSchemeHeads({

  supportedColorSchemes: "dark light",

  colorScheme: "dark",

  themeColor: "#00000",

});

const commonHeads = genCommonHeads({

  viewport:

    "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",

  acceptCh: "Accept, DPR, Viewport-Width, ECT, Width, Save-Data",

});

const faviconHeas = genFaviconHeads({

  appleTouchIcon: "/favicons/apple-touch-icon.png",

  icon: "/favicons/favicon.ico",

  icon16: "/favicons/favicon-16x16.png",

  icon32: "/favicons/favicon-32x32.png",

  manifest: "/favicons/site.webmanifest",

  maskIcon: "/favicons/favicon-32x32.svg",

  msapplicationConfig: "/favicons/browserconfig.xml",

});

const ogHeads = genOgHeads({

  title: "Title",

  description: "Description",

  canonical: "https://techmely.com",

  siteName: "Techmely",

  thumbnail: "https://techmely.com/thumbnail.webp",

});

const twitterHeads = genTwitterHeads({

  title: "Title",

  description: "Description",

  siteContent: "@techmely",

  thumbnail: "https://techmely.com/thumbnail.webp",

});

const heads = Array.prototype.concat(

  colorSchemeHeads,

  commonHeads,

  faviconHeas,

  ogHeads,

  twitterHeads,

);

const headHtml = composeHead(heads);

expect(headHtml).toStrictEqual([

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

  '',

]);

```