open-index/open-npm huggingface dataset:
npm package: @penleychan/ngx-transloco-router
Description: Routing Localization extension for transloco
Latest version: 15.0.1

# @penleychan/ngx-transloco-router

This is a fork/port of [@gilsdav/ngx-translate-router](https://github.com/gilsdav/ngx-translate-router) 
modified to work with [@ngneat/transloco](https://github.com/ngneat/transloco).

## Install
```
npm i @penleychan/ngx-transloco-router
```

## Setup
Bare minimum setup
```
@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    LocalizeRouterModule.forRoot(routes)
  ],
  exports: [RouterModule, LocalizeRouterModule],
  providers: [
    {
      provide: LOCALIZE_ROUTER_CONFIG,
      useValue: localizeRouterConfig()
    }
  ]
})
export class AppRoutingModule {
}
```

## Translate Route
Enable translate route:
```
providers: [
  {
    provide: LOCALIZE_ROUTER_CONFIG,
    useValue: localizeRouterConfig({
      ...
      translateRoute: true
    })
  }
]
```

Translate route only works at the root level of your translation files, does not support scoping.

By default the prefix for translating routes is `ROUTES`. In order for translating route to work you need to have `ROUTES`
on your translation files.

```
// en.json
{
  ...
  "ROUTES": {
    "home": "home",
    "reports": "reports"
  }
}

// fr.json
{
  ...
  "ROUTES": {
    "home": "accueil",
    "reports": "rapports"
  }
}
```
You can override the prefix by configuration
```
providers: [
  {
    provide: LOCALIZE_ROUTER_CONFIG,
    useValue: localizeRouterConfig({
      ...
      prefix: 'ROUTE_TRANSLATION.'
    })
  }
]
```

## LOCALIZE_ROUTER_CONFIG
These are the configuration settings available and it's defaults
```
export const defaultConfig: LocalizeRouterConfig = {
  translateRoute: false,
  useCachedLang: true,
  alwaysSetPrefix: true,
  cacheMechanism: CacheMechanism.LocalStorage,
  cacheName: LOCALIZE_CACHE_NAME,
  defaultLangFunction: void 0,
  cookieFormat: DEFAULT_COOKIE_FORMAT,
  initialNavigation: DEFAULT_INITIAL_NAVIGATION,
  prefix: 'ROUTES.',
  escapePrefix: '!'
};
```
npm package: @penn-libraries/web
Description: Reusable web designs for University of Pennsylvania Libraries websites. This package contains our code for shared Web Components and Cascading Style Sheets (CSS).
Latest version: 1.2.1

# @penn-libraries/web

Reusable web designs for University of Pennsylvania Libraries websites. This repo contains our code for shared Web Components and Cascading Style Sheets (CSS).

[Visit the documentation website](https://penn-libraries-design-system.netlify.app/)

## Get started

You can start using the components immediately by adding these tags to the `<head>`:

```html
<link href="https://cdn.jsdelivr.net/npm/@penn-libraries/web/dist/web/web.css" rel="stylesheet"/>
<script type="module" src="https://cdn.jsdelivr.net/npm/@penn-libraries/web/dist/web/web.esm.js"></script>
```

Once included, components can be used in your markup like any other regular HTML elements:

**HTML**
```html
<pennlibs-header service-name="<service name>" service-lede="<service lede>">
  <a href="/#">About</a>
  <a href="/help">Help</a>
</pennlibs-header>
```

## What's a web component?

[Web components are evolving web platform technologies](https://developer.mozilla.org/en-US/docs/Web/API/Web_components). They allow us to create custom reusable HTML elements that use standard web technologies (HTML, CSS, and JavaScript). We use the term “web component” for both the platform and the custom element we’ve created. The end result is a custom element that you can drop into your websites and applications with no additional coding or styling required.

## Development

To start building a new web component using Stencil, clone this repo to a new directory and run:

```bash
npm install
```

To start the local development server

```bash
npm start
```

### What's Stencil?

[Stencil is a compiler for building fast web apps using Web Components](https://stenciljs.com/docs/). Stencil components are just Web Components, so they work in any major framework or with no framework at all.
npm package: @pennah/iffy
Description: ✨ Javascript "if / else" expressions ✨
Author: anthonypenna
Latest version: 1.0.2

<div>
    <div style="width: 100%; padding: 6rem 0 2rem; display: flex; justify-content: center;">
        <img src="assets/logo.png" />
    </div>
    <div>
        <h2 style="padding: 2rem 0 1rem; text-align: center">✨ Javascript "if / else" expressions ✨</h2>
        <p style="font-size: 16px; text-align: center">Extremely small and type safe.</p>
    </div>
</div>

## Installation

**NPM**

```sh
$ npm add @pennah/iffy
```

**Yarn**

```sh
$ yarn add @pennah/iffy
```

## Usage

**Simple expressions**

```ts
import { If } from "@pennah/iffy";

let powerLevel = 9001;

let message = If(powerLevel > 9000, {
  then: `It's over 9000!!!111`,
  else: `You are no match for me`,
});

console.log(message); // It's over 9000!!!111
```

**Nested expressions**

```ts
import { If } from "@pennah/iffy";

...

const action = If(userInput === "0", {
  then: () => console.log("Hello"!),
  else: If(userInput === "1" {
    then: () => console.log('Howdy!'),
    else: () => console.log(`It's fine 🐶 🔥`)
  })
});

```

## Contributing

Feel free to open issues or pull requests.

## License

Iffy uses an MIT license.