https://github.com/takeshape/takeshape-routing

https://github.com/takeshape/takeshape-routing

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/takeshape/takeshape-routing
• Owner: takeshape
• Created: 2019-08-22T19:41:27.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T07:54:04.000Z (almost 2 years ago)
• Last Synced: 2023-07-31T14:43:09.611Z (over 1 year ago)
• Language: TypeScript
• Size: 1.22 MB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# takeshape-routing

`takeshape-routing` is a module designed to be used on the frontend of a site generated with [TakeShape](https://www.takeshape.io). It is library agnostic so it can be used with React, Vue, etc.

### Installation

```

npm install --save takeshape-routing

```

### Routing

The `route` function is used to generate links on the client side. It allows you to create links to your static site with content fetched from the [TakeShape GraphQL API](https://www.takeshape.io/docs/using-the-api-endpoint/). It's especially useful when building out dynamic [search](https://www.takeshape.io/docs/search-queries/) or [taxonomy](https://www.takeshape.io/docs/search-queries/) pages. 

`route` is a curried function which consumes the following params

- `config` - Object - The `tsg.yml` config object use `yaml-loader` to import it

- `routeName` - String - The name of the desired route

- `content` - Object - An object containing the properties referenced in the route string

tsg.yml

```yaml

templatePath: src/templates

staticPath: static

buildPath: build

routes:

  post:

    path: /blog/:title/

    template: pages/posts/individual.html

```   

search-result-link.jsx

```js

import {route as createRoute} from 'takeshape-routing';

import config from '../tsg.yml';

const route = createRoute(config);

export default function SearchResultLink({content}) {

  return (

    {content.title}

  );

}

```

where the `content` prop would be:

```json

{

  "_contentTypeName": "post",

  "title": "How TakeShape Routing Works"

}

```

Rendered HTML:

```html

How TakeShape Routing Works

```

### Image URLs

`getImageUrl` converts asset paths into URLs suitable for use in an `` tag.

```js

import {getImageUrl} from 'takeshape-routing';



 // image resized to 300x250

```

TakeShape uses [Imgix](https://www.imgix.com/) as its image CDN. 

Imgix provides rich suite of image manipulation capatbilities that are accessible using the second argument of `getImageUrl`.

See [their docs](https://docs.imgix.com/apis/url) for all the possibilites!

### Asset URLs

Not all assets in TakeShape are images and sometimes you just want a simple download link. Use `getAssetUrl` in this case.

```js

import {getAssetUrl} from 'takeshape-routing';

Download Me

```