https://github.com/boenfu/hexo-renderer-react-styled

Hexo renderer by react & styled-components
https://github.com/boenfu/hexo-renderer-react-styled

hexo hexo-renderer react styled-components

Last synced: 24 days ago
JSON representation

Hexo renderer by react & styled-components

• Host: GitHub
• URL: https://github.com/boenfu/hexo-renderer-react-styled
• Owner: boenfu
• License: mit
• Created: 2022-04-08T13:12:35.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-04-16T14:54:08.000Z (over 2 years ago)
• Last Synced: 2024-10-20T15:41:04.846Z (30 days ago)
• Topics: hexo, hexo-renderer, react, styled-components
• Language: TypeScript
• Homepage:
• Size: 196 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# hexo-renderer-react-styled

😎 wow ～ use react + style-components write your hexo theme

## Features

- zero configure

- import sub components directly

- file extensions support `.tsx` `.ts` `.jsx` `.svg` `.css`

- auto transform svg source file to react component by [svgr](https://github.com/gregberge/svgr)

## Example

- theme directory example

```bash

└── your-theme

    ├── layout

    │   ├── components

    │   │   ├── header.tsx

    │   │   └── index.ts

    │   ├── index.tsx

    │   └── layout.tsx

    └── tsconfig.json

```

- page view example

```tsx

// index.tsx

import React, {FC} from 'react';

import styled from 'styled-components';

// import directly

import {Posts} from './components';

// see usage/svg

import Github from './icons/github.svg';

// see usage/css

import MarkdownCSS from './css/markdown.css';

const Index = styled.div`

  // ... css

`;

const Main = styled.div`

  // ... css

  ${MarkdownCSS}

`;

const Sidebar = styled.div`

  // ... css

`;

// Perfect type hint

const Component: FC = props => {

  const {page} = props;

  return (

    

      

        

      

      

        

      

    

  );

};

export default Component;

```

**Try it ?🙊**

## Usage

### Installation:

```bash

yarn add hexo-renderer-react-styled # Or npm install --save hexo-renderer-react-styled

```

**That's all, hexo will auto load**

### SVG

If need import ".svg" file, add module declare file for your project.

```ts

declare module '*.svg' {

  const fc: (props: any) => any;

  export default fc;

}

```

svgComplier will replace `#000`/`#000000` to `currentColor` by default

### CSS

If need import ".css" file, add module declare file for your project.

```ts

declare module '*.css' {

  const text: string;

  export default text;

}

```

usage example

```ts

import markdownCSS from './markdown.css';

const MarkdownContent = styled.div`

  ${markdownCSS}

`;

```

## Who Use

- [hexo-theme-wanghu](https://github.com/boenfu/hexo-theme-wanghu) - “忘乎”（ 仿知乎主题 ）

## License

MIT License.