open-index/open-npm huggingface dataset:
npm package: @rodneylab/picpack
Description: Web image tooling
Latest version: 0.1.1

<img src="./images/rodneylab-github-picpack.png" alt="Rodney Lab pic pack Github banner">

<p align="center" style="display:grid;place-items:center;margin-block:2rem">
  <a aria-label="Open Rodney Lab site" href="https://rodneylab.com" rel="nofollow noopener noreferrer">
    <img alt="Rodney Lab logo" src="https://rodneylab.com/assets/icon.png" width="60" />
  </a>
</p>
<h1 align="center">
  picpack
</h1>
Rust WASM image tooling.

> **Warning** 🚧 Work in progress 🚧

## ☎️ Reach Out

Feel free to jump into the
[Rodney Lab matrix chat room](https://matrix.to/#/%23rodney:matrix.org).
npm package: @rodneylab/searchlite
Description: Manipulate HTML returning document with search terms highlighted
Latest version: 0.0.5

<img src="./images/rodneylab-github-searchlite.png" alt="Rodney Lab search lite down Github banner">

<p align="center" style="display:grid;place-items:center;margin-block:2rem">
  <a aria-label="Open Rodney Lab site" href="https://rodneylab.com" rel="nofollow noopener noreferrer">
    <img alt="Rodney Lab logo" src="https://rodneylab.com/assets/icon.png" width="60" />
  </a>
</p>
<h1 align="center">
  searchlite
</h1>

Rust WASM tool to manipulate HTML searching for an input search term. Searchlite will wrap matching text elements in a pair of HTML `<mark>` tags. Browsers will highlight these matches by default.

Module can be used within a web app or in serverless middleware to highlight search terms in an HTML response.

Uses `html5ever` and `aho-corasick` Rust crates under the hood.

## Compile WASM

1. Clone the project and change into the project directory. Then run these
   commands:

```shell
cargo install wasm-pack # skip if you already have it installed
wasm-pack build --target web
```

2. Copy the generated `pkg` folder into your JavaScript or TypeScript project.
3. Import and use the code in one of your project source files (expected output
   is as shown in previous section):

- Generate highlighted HTML

`highlight_search_terms` takes two arguments: the input HTML and the search term. Separate multiple search terms with a space (e.g. `"apple pear"`).

```typescript
import init, { highlight_search_terms as highlight } from "pkg/searchlite.js";

await init();

// alternative if top level await is not available
(async () => {
  await init();
})();

const highlightedHtml = highlight(
  "<h2>Heading</h2><p>Nobody likes maple in their apple flavoured Snapple. APPLE</p>",
  "apple",
);
```

Output (`highlightedHTML`):

```html
<h2>Heading</h2>
<p>
  Nobody likes maple in their <mark id="search-match">apple</mark> flavoured
  Sn<mark>apple</mark>. <mark>APPLE</mark>
</p>
```

Note the `id` added to the first search match. You can use this to scroll the first match into view.

<img src="./images/searchlite-example.png" alt="Searchlite example screen capture shows all instances of the letters `apple` highlighted whether in the work apple (lower case) alone, within the word Snapple or APPLE (upper case)">

## 🗺️ Roadmap

No firm course laid in.

- Possibly add stemmer, though this might be better handled externally. A stemmer will match on related words; film and filming for an input of films as an example. The [Porter Algorithm](https://tartarus.org/martin/PorterStemmer/def.txt) is often used for this.
- Possibly add a utility function to generate a match snippet for use in result pages that show matches across various documents.

## ☎️ Reach Out

Feel free to jump into the
[Rodney Lab matrix chat room](https://matrix.to/#/%23rodney:matrix.org).
npm package: @rodneylab/sveltekit-map-component
Description: Handy components for building sites in SvelteKit
Author: Rodney Lab
Latest version: 2.0.5

<img src="https://github.com/rodneylab/sveltekit-components/raw/main/images/rodneylab-github-sveltekit-components.png" alt="Rodney Lab sveltekit-components Github banner">

<p align="center">
  <a aria-label="Open Rodney Lab site" href="https://rodneylab.com" rel="nofollow noopener noreferrer">
    <img alt="Rodney Lab logo" src="https://rodneylab.com/assets/icon.png" width="60" />
  </a>
</p>
<h1 align="center">
  Sveltekit Map Component
</h1>

# sveltekit-map-component

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/rodneylab/sveltekit-map-component)

Library of TypeScript friendly SvelteKit components for adding functionality to your SvelteKit apps.

## Setup

To install the package run

```shell
pnpm add -D @rodneylab/sveltekit-components @rodneylab/sveltekit-map-component
pnpm add --save-peer leaflet
```

## Components

### Map

Add a map to your SvelteKit site using <a aria-label="Learn more about Map box" href="https://www.mapbox.com/">Mapbox</a> with <a aria-label="Learn more about Open street map" href="https://www.openstreetmap.org/#map=6/54.910/-3.432">OpenStreetMap</a> and <a aria-label="Learn about leaflet j s" href="https://leafletjs.com/
">LeafletJS</a>. Requires a Mapbox access token, just add it your to the `.env` file in your project:

```plaintext
PUBLIC_MAPBOX_ACCESS_TOKEN=your.token
```

Add the component to a `.svelte` file in your project:

```svelte
<script>
	import { Map } from '@rodneylab/sveltekit-map-component';
	const latitude = 51.50162;
	const longitude = -0.14115;
	const zoom = 16;
	const location = { latitude, longitude };
</script>

<Map
	id="my-map"
	{location}
	{zoom}
	importance="high"
	markerMarkup="<p>We are <strong>here</strong>!</p>"
/>
```

## Further Info

To create your own SvelteKit component library see the video on <a aria-label="Learn how to create a Svelte Kit Component library" href="https://rodneylab.com/create-sveltekit-component-library/">creating a SvelteKit component library</a>. Drop a comment on that page if you have a question.

Feel free to jump into the [Rodney Lab matrix chat room](https://matrix.to/#/%23rodney:matrix.org).