Skip to content

Commit 539a703

Browse files
LGLabGregLGLabGreg
authored
Merge pull request #405 from LGLabGreg/feat/llm
Feat/llm
2 parents eb02e5b + 2f0e6cc commit 539a703

File tree

10 files changed

+420
-97
lines changed

10 files changed

+420
-97
lines changed

‎apps/docs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@
3232
"clsx": "^2.1.1",
3333
"date-fns": "^4.1.0",
3434
"eslint-config-next": "16.1.0",
35-
"lucide-react": "^0.561.0",
35+
"lucide-react": "^0.562.0",
3636
"next": "16.1.0",
3737
"next-themes": "^0.4.6",
3838
"prism-react-renderer": "^2.4.1",
3939
"react": "^19.2.3",
4040
"react-dom": "^19.2.3",
41-
"react-hook-form": "^7.68.0",
41+
"react-hook-form": "^7.69.0",
4242
"react-icons": "^5.5.0",
4343
"tailwind-merge": "^3.4.0",
4444
"tailwindcss-animate": "^1.0.7"

‎apps/docs/public/llms-full.txt‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
# @lglab/react-qr-code Technical Reference
2+
3+
> Comprehensive technical documentation for @lglab/react-qr-code, a highly customizable React QR code generator.
4+
5+
This file provides all technical details including component props, types, and API references to enable LLMs to work with the library without fetching additional context.
6+
7+
## ReactQRCode Component
8+
9+
The main component exported by the library.
10+
11+
### Props (ReactQRCodeProps)
12+
13+
| Prop | Type | Default | Description |
14+
| --- | --- | --- | --- |
15+
| `value` | `string \| string[]` | - | **Required.** The value to encode. Use an array for multi-segment optimization. |
16+
| `size` | `number` | `128` | The size in pixels of the rendered QR code. |
17+
| `level` | `'L' \| 'M' \| 'Q' \| 'H'` | `'L'` | Error Correction Level. |
18+
| `marginSize` | `number` | `0` | Number of modules to use for the margin. |
19+
| `minVersion` | `number` | `1` | Minimum version (1-40) for the QR code. |
20+
| `boostLevel` | `boolean` | `true` | Boosts ECL if version remains the same. |
21+
| `background` | `BackgroundSettings` | `'#FFFFFF'` | Background color (hex) or `GradientSettings`. |
22+
| `gradient` | `GradientSettings` | - | Gradient applied to data modules and finder patterns. |
23+
| `dataModulesSettings` | `DataModulesSettings` | - | Configuration for data modules styling. |
24+
| `finderPatternOuterSettings` | `FinderPatternOuterSettings` | - | Configuration for outer finder patterns. |
25+
| `finderPatternInnerSettings` | `FinderPatternInnerSettings` | - | Configuration for inner finder patterns. |
26+
| `imageSettings` | `ImageSettings` | - | Settings for an embedded logo or image. |
27+
| `svgProps` | `React.SVGProps<SVGSVGElement>` | - | Additional props passed to the root SVG element. |
28+
29+
---
30+
31+
## Sub-Settings Interfaces
32+
33+
### DataModulesSettings
34+
35+
| Property | Type | Default | Description |
36+
| --- | --- | --- | --- |
37+
| `color` | `string` | - | Color of the data modules (overridden by `gradient`). |
38+
| `style` | `DataModulesStyle` | `'square'` | Shape of the data modules. |
39+
| `randomSize` | `boolean` | `false` | If true, modules will have slightly varied sizes. |
40+
41+
**Available Styles (`DataModulesStyle`):**
42+
`'square'`, `'square-sm'`, `'pinched-square'`, `'rounded'`, `'leaf'`, `'vertical-line'`, `'horizontal-line'`, `'circle'`, `'diamond'`, `'star'`, `'heart'`, `'hashtag'`
43+
44+
### FinderPatternOuterSettings
45+
46+
| Property | Type | Default | Description |
47+
| --- | --- | --- | --- |
48+
| `color` | `string` | - | Color of the outer pattern (overridden by `gradient`). |
49+
| `style` | `FinderPatternOuterStyle` | `'square'` | Shape of the outer finder pattern. |
50+
51+
**Available Styles (`FinderPatternOuterStyle`):**
52+
`'square'`, `'pinched-square'`, `'rounded-sm'`, `'rounded'`, `'rounded-lg'`, `'circle'`, `'inpoint-sm'`, `'inpoint'`, `'inpoint-lg'`, `'outpoint-sm'`, `'outpoint'`, `'outpoint-lg'`, `'leaf-sm'`, `'leaf'`, `'leaf-lg'`
53+
54+
### FinderPatternInnerSettings
55+
56+
| Property | Type | Default | Description |
57+
| --- | --- | --- | --- |
58+
| `color` | `string` | - | Color of the inner pattern (overridden by `gradient`). |
59+
| `style` | `FinderPatternInnerStyle` | `'square'` | Shape of the inner finder pattern. |
60+
61+
**Available Styles (`FinderPatternInnerStyle`):**
62+
Includes all `FinderPatternOuterStyle` plus: `'diamond'`, `'star'`, `'heart'`, `'hashtag'`
63+
64+
### ImageSettings
65+
66+
| Property | Type | Default | Description |
67+
| --- | --- | --- | --- |
68+
| `src` | `string` | - | **Required.** URL/Source of the image. |
69+
| `height` | `number` | - | **Required.** Height in pixels. |
70+
| `width` | `number` | - | **Required.** Width in pixels. |
71+
| `excavate` | `boolean` | `false` | Remove modules behind the image. |
72+
| `x` | `number` | - | Horizontal offset (centered by default). |
73+
| `y` | `number` | - | Vertical offset (centered by default). |
74+
| `opacity` | `number` | `1` | Image opacity (0-1). |
75+
| `crossOrigin` | `CrossOrigin` | - | CORS setting for the image. |
76+
77+
### GradientSettings
78+
79+
| Property | Type | Default | Description |
80+
| --- | --- | --- | --- |
81+
| `type` | `'linear' \| 'radial'` | - | **Required.** Type of gradient. |
82+
| `stops` | `GradientSettingsStop[]` | - | **Required.** Array of `{ offset: string, color: string }`. |
83+
| `rotation` | `number` | `0` | Rotation in degrees (for linear gradients). |
84+
85+
---
86+
87+
## Imperative API (Ref)
88+
89+
The component exposes the following via `forwardRef`:
90+
91+
### ReactQRCodeRef
92+
93+
| Method / Property | Type | Description |
94+
| --- | --- | --- |
95+
| `svg` | `SVGSVGElement \| null` | Reference to the underlying SVG element. |
96+
| `download` | `(options: DownloadOptions) => void` | Triggers a download of the QR code. |
97+
98+
### DownloadOptions
99+
100+
| Property | Type | Default | Description |
101+
| --- | --- | --- | --- |
102+
| `name` | `string` | `'qr-code'` | Filename without extension. |
103+
| `format` | `'svg' \| 'png' \| 'jpeg'` | `'svg'` | Target file format. |
104+
| `size` | `number` | `500` | Target size in pixels for the export. |
105+
106+
---
107+
108+
## Examples
109+
110+
### Basic Usage
111+
```tsx
112+
import { ReactQRCode } from '@lglab/react-qr-code';
113+
114+
<ReactQRCode value="https://reactqrcode.com" />
115+
```
116+
117+
### Advanced Customization
118+
```tsx
119+
<ReactQRCode
120+
value="https://reactqrcode.com"
121+
size={256}
122+
level="H"
123+
dataModulesSettings={{
124+
style: 'rounded',
125+
color: '#2563eb'
126+
}}
127+
finderPatternOuterSettings={{
128+
style: 'rounded-lg'
129+
}}
130+
imageSettings={{
131+
src: '/logo.png',
132+
width: 40,
133+
height: 40,
134+
excavate: true
135+
}}
136+
/>
137+
```
138+

‎apps/docs/public/llms.txt‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# reactqrcode.com
2+
3+
> Official documentation and demo for @lglab/react-qr-code, a highly customizable React QR code generator.
4+
5+
This site serves as the central hub for the `@lglab/react-qr-code` library, providing installation guides, API references, and an interactive demo for generating custom QR codes.
6+
7+
## Documentation Pages
8+
9+
- [Introduction](https://reactqrcode.com/)
10+
- [Installation](https://reactqrcode.com/installation)
11+
- [Quick Start](https://reactqrcode.com/quick-start)
12+
- [Interactive Demo](https://reactqrcode.com/demo)
13+
- [ReactQRCode Props](https://reactqrcode.com/react-qr-code-props)
14+
- [Ref API](https://reactqrcode.com/ref-api)
15+
- [Data Modules Settings](https://reactqrcode.com/data-modules-settings)
16+
- [Finder Pattern Inner Settings](https://reactqrcode.com/finder-pattern-inner-settings)
17+
- [Finder Pattern Outer Settings](https://reactqrcode.com/finder-pattern-outer-settings)
18+
- [Gradient Settings](https://reactqrcode.com/gradient-settings)
19+
- [Image Settings](https://reactqrcode.com/image-settings)
20+
- [Examples](https://reactqrcode.com/examples)
21+
22+
## External Links
23+
24+
- [GitHub Repository](https://github.com/LGLabGreg/react-qr-code)
25+
- [npm Package](https://www.npmjs.com/package/@lglab/react-qr-code)
26+

‎apps/docs/src/app/llms-txt/page.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { PageHeading } from '@/components/page-heading'
2+
import {
3+
TypographyBold,
4+
TypographyH2,
5+
TypographyInlineCode,
6+
TypographyList,
7+
TypographyP,
8+
} from '@/components/ui/typography'
9+
10+
export default function Page() {
11+
return (
12+
<>
13+
<PageHeading heading='llms.txt' />
14+
<TypographyP>
15+
We support the <TypographyBold>llms.txt</TypographyBold> standard to help AI
16+
coding assistants better understand the{' '}
17+
<TypographyInlineCode>@lglab/react-qr-code</TypographyInlineCode> library, its
18+
API, and various customization options.
19+
</TypographyP>
20+
21+
<TypographyH2>What is llms.txt?</TypographyH2>
22+
<TypographyP>
23+
The <TypographyBold>llms.txt</TypographyBold> file is a proposal to standardize
24+
the provision of information to Large Language Models (LLMs) at inference time. It
25+
provides a curated, LLM-friendly overview of a project, making it easier for AI
26+
tools to provide accurate code suggestions and documentation.
27+
</TypographyP>
28+
29+
<TypographyH2>Available Routes</TypographyH2>
30+
<TypographyP>
31+
We provide two distinct files to cater to different levels of detail:
32+
</TypographyP>
33+
<TypographyList
34+
items={[
35+
{
36+
key: 'llms',
37+
content: (
38+
<>
39+
<TypographyBold>
40+
<a href='/llms.txt' target='_blank' rel='noreferrer'>
41+
/llms.txt
42+
</a>
43+
</TypographyBold>{' '}
44+
- A structured overview of the project with links to all documentation
45+
pages.
46+
</>
47+
),
48+
},
49+
{
50+
key: 'llms-full',
51+
content: (
52+
<>
53+
<TypographyBold>
54+
<a href='/llms-full.txt' target='_blank' rel='noreferrer'>
55+
/llms-full.txt
56+
</a>
57+
</TypographyBold>{' '}
58+
- A comprehensive technical reference including all component props,
59+
settings interfaces, and usage examples.
60+
</>
61+
),
62+
},
63+
]}
64+
/>
65+
66+
<TypographyH2>Usage with Cursor</TypographyH2>
67+
<TypographyP>
68+
You can use these files in <TypographyBold>Cursor</TypographyBold> to enhance its
69+
understanding of the library. For more details, see the{' '}
70+
<a
71+
href='https://cursor.com/docs/context/mentions#docs'
72+
target='_blank'
73+
rel='noreferrer'
74+
className='text-primary underline underline-offset-4'
75+
>
76+
Cursor Documentation
77+
</a>
78+
.
79+
</TypographyP>
80+
<TypographyList
81+
items={[
82+
{
83+
key: 'cursor-docs',
84+
content: (
85+
<>
86+
Type <TypographyInlineCode>@Docs</TypographyInlineCode> in the chat or
87+
composer and select <TypographyBold>Add new doc</TypographyBold>. Paste{' '}
88+
<TypographyInlineCode>
89+
https://reactqrcode.com/llms-full.txt
90+
</TypographyInlineCode>{' '}
91+
to give Cursor full access to the library specification.
92+
</>
93+
),
94+
},
95+
{
96+
key: 'cursor-chat',
97+
content: (
98+
<>
99+
Alternatively, you can reference the file directly in any prompt by typing{' '}
100+
<TypographyInlineCode>
101+
@https://reactqrcode.com/llms-full.txt
102+
</TypographyInlineCode>{' '}
103+
for immediate context.
104+
</>
105+
),
106+
},
107+
]}
108+
/>
109+
</>
110+
)
111+
}

0 commit comments

Comments
 (0)