5 |

6 |   </div>
7 | )
8 |

--------------------------------------------------------------------------------
/components/pre.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export const Pre = (props) => {
 4 |   const editors = {
 5 |     sublime: {
 6 |       snippet: `<snippet>
 7 | 	<content><![CDATA[${props.snippet}]]></content>
 8 | 	<description>${props.description}</description>
 9 | 	<tabTrigger>${props.tabtrigger}</tabTrigger>
10 | 	<scope>${props.scope}</scope>
11 | </snippet>`,
12 |       note: `Create a new *.sublime-snippet file and save the contents above into it.`,
13 |       docslink:
14 |         'http://docs.sublimetext.info/en/latest/extensibility/snippets.html',
15 |     },
16 | 
17 |     atom: {
18 |       snippet: `'.${props.scope}':
19 | 	'${props.description}':
20 | 		'prefix': '${props.tabtrigger}'
21 | 		'body': """
22 | 			${props.snippet.replace(/\\/gm, '\\\\\\\\')}
23 | 		"""`,
24 |       note: `Paste the above code into your snippets.cson.`,
25 |       docslink: 'http://flight-manual.atom.io/using-atom/sections/snippets/',
26 |     },
27 | 
28 |     vscode: {
29 |       snippet: `"snippet-${props.tabtrigger}": {
30 | 	"prefix": "${props.tabtrigger}",
31 | 	"body": "${props.snippet
32 |     .replace(/\n/gm, '\\n')
33 |     .replace(/\t/gm, '\\t')
34 |     .replace(/\r/gm, '\\r')}",
35 | 	"description": "${props.description}"
36 | }`,
37 |       note: `Go to 'Preferences' > 'User snippets' and select the correct type, then paste in the above code.`,
38 |       docslink: 'https://code.visualstudio.com/docs/editor/userdefinedsnippets',
39 |     },
40 |   }
41 | 
42 |   const editor = props.editor.toLowerCase().replace(' ', '')
43 | 
44 |   return (
45 |     <div>
46 |       <h3>{props.editor}</h3>
47 |       <pre>
48 |         <code>
49 |           {editors[editor].snippet.replace(/\$(?!{|[0-9])/gim, '\\$')}
50 |         </code>
51 |       </pre>
52 |       <div className="notes">
53 |         {editors[editor].note} <br />
54 |         Discover more from the{' '}
55 |         <a href={editors[editor].docslink}>{props.editor} snippets docs</a>.
56 |       </div>
57 |       <style jsx>
58 |         {`
59 |           pre {
60 |             overflow-x: scroll;
61 |             line-height: 1.3;
62 |             min-height: 150px;
63 |             margin-bottom: 0.5rem;
64 |           }
65 |           code {
66 |             font-size: 14px;
67 |           }
68 |           .notes {
69 |             margin-top: 0.5rem;
70 |             margin-bottom: 1rem;
71 |             font-size: 14px;
72 |           }
73 |         `}
74 |       </style>
75 |     </div>
76 |   )
77 | }
78 |

--------------------------------------------------------------------------------
/layouts/page.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | const colors = {
 3 |   accent: '#DA37CF',
 4 |   copy: '#444',
 5 |   bg: '#fff',
 6 | }
 7 | 
 8 | export default ({ children }) => (
 9 |   <main>
10 |     <Head>
11 |       <title>Sublime Text, Atom & VS Code snippet generator</title>
12 |       <meta name="description" content="A side-project by Zander Martineau" />
13 |       <meta name="viewport" content="initial-scale=1.0, width=device-width" />
14 |       <link
15 |         rel="stylesheet"
16 |         href="https://cdn.rawgit.com/TryKickoff/kickoff/72581bbd/assets/dist/css/kickoff.css"
17 |       />
18 |     </Head>
19 | 
20 |     {children}
21 | 
22 |     <footer className="text-centre">
23 |       <p>
24 |         <small>
25 |           <a href="https://github.com/mrmartineau/snippet-generator">Made</a> by{' '}
26 |           <a href="https://zander.wtf">Zander ⚡</a>
27 |           <br />
28 |           using{' '}
29 |           <a href="https://github.com/TryKickoff/kickoff-react">
30 |             kickoff-react
31 |           </a>
32 |           , <a href="https://github.com/zeit/next.js">next.js</a> and hosted on{' '}
33 |           <a href="https://vercel.com">Vercel</a>
34 |         </small>
35 |       </p>
36 |     </footer>
37 | 
38 |     <style jsx global>
39 |       {`
40 |         body {
41 |           margin: 0;
42 |           -webkit-font-smoothing: antialiased;
43 |           background-color: ${colors.bg};
44 |           font-weight: 300;
45 |         }
46 | 
47 |         h1,
48 |         h2,
49 |         h3 {
50 |           color: ${colors.accent};
51 |           font-weight: 300;
52 |           margin-bottom: 1rem;
53 |         }
54 | 
55 |         main {
56 |           padding: 30px;
57 |         }
58 | 
59 |         @media (min-width: 750px) {
60 |           main {
61 |             padding: 45px;
62 |           }
63 |         }
64 | 
65 |         .form-controlGroup {
66 |           margin: 1rem 0;
67 |         }
68 | 
69 |         @media (min-width: 750px) {
70 |           .form-input--textarea {
71 |             height: 190px;
72 |           }
73 |         }
74 | 
75 |         small code {
76 |           font-size: 14px;
77 |           color: ${colors.accent};
78 |           background-color: ${colors.bg};
79 |           padding: 0;
80 |         }
81 | 
82 |         .form-input--textarea {
83 |           tab-size: 3;
84 |         }
85 | 
86 |         .form-input--textarea {
87 |           font-family: Menlo, Monaco, 'Courier New', monospace;
88 |           font-size: 14px;
89 |         }
90 |       `}
91 |     </style>
92 |   </main>
93 | )
94 |

--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
1 | {
2 |   "version": 2,
3 |   "scope": "zander",
4 |   "alias": "snippets.zander.wtf"
5 | }
6 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "snippet-generator",
 3 |   "version": "1.0.0",
 4 |   "description": "Sublime Text, Atom & VS Code snippet generator",
 5 |   "main": "pages/index.js",
 6 |   "author": "Zander Martineau",
 7 |   "license": "MIT",
 8 |   "dependencies": {
 9 |     "next": "^9.4.4",
10 |     "react": "^16.13.1",
11 |     "react-dom": "^16.13.1"
12 |   },
13 |   "scripts": {
14 |     "start": "next start",
15 |     "build": "next build",
16 |     "dev": "next"
17 |   }
18 | }
19 |

--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Pre } from '../components/pre'
  3 | import { Grid } from '../components/kickoff-react/Grid'
  4 | import { Column } from '../components/kickoff-react/Column'
  5 | import { Control } from '../components/kickoff-react/Control'
  6 | import { Input } from '../components/kickoff-react/Input'
  7 | import { Textarea } from '../components/kickoff-react/Textarea'
  8 | 
  9 | // Layouts
 10 | import Page from '../layouts/page'
 11 | 
 12 | export default class Index extends Component {
 13 |   constructor(props) {
 14 |     super(props)
 15 |     this.state = {
 16 |       snippet: '',
 17 |       description: '',
 18 |       tabtrigger: '',
 19 |       scope: '',
 20 |       editorSublime: true,
 21 |       editorVSCode: false,
 22 |       editorAtom: false,
 23 |     }
 24 | 
 25 |     this.handleSnippetChange = this.handleSnippetChange.bind(this)
 26 |     this.handleDescriptionChange = this.handleDescriptionChange.bind(this)
 27 |     this.handleTabTriggerChange = this.handleTabTriggerChange.bind(this)
 28 |     this.handleScopeChange = this.handleScopeChange.bind(this)
 29 |     this.handleExample = this.handleExample.bind(this)
 30 |     this.handleScopeExample = this.handleScopeExample.bind(this)
 31 |     this.handleClear = this.handleClear.bind(this)
 32 |     this.handleKeyDown = this.handleKeyDown.bind(this)
 33 |   }
 34 | 
 35 |   handleSnippetChange(event) {
 36 |     this.setState({
 37 |       snippet: event.target.value,
 38 |     })
 39 |   }
 40 | 
 41 |   handleDescriptionChange(event) {
 42 |     this.setState({
 43 |       description: event.target.value,
 44 |     })
 45 |   }
 46 | 
 47 |   handleTabTriggerChange(event) {
 48 |     this.setState({
 49 |       tabtrigger: event.target.value,
 50 |     })
 51 |   }
 52 | 
 53 |   handleScopeChange(event) {
 54 |     this.setState({
 55 |       scope: event.target.value,
 56 |     })
 57 |   }
 58 | 
 59 |   handleScopeExample(event) {
 60 |     this.setState({
 61 |       scope: event.target.textContent,
 62 |     })
 63 |   }
 64 | 
 65 |   handleKeyDown(event) {
 66 |     if (event.keyCode === 9) {
 67 |       event.preventDefault()
 68 |       const snippet = this.state.snippet
 69 |       const selectionStart = event.target.selectionStart
 70 |       const snippetStart = snippet.slice(0, selectionStart)
 71 |       const snippetEnd = snippet.slice(selectionStart)
 72 |       console.log(event.target.selectionEnd)
 73 |       this.setState({
 74 |         snippet: `${snippetStart}\t${snippetEnd}`,
 75 |       })
 76 |       // event.target.selectionStart = event.target.selectionEnd = selectionStart + 1;
 77 |     }
 78 |   }
 79 | 
 80 |   handleClear(event) {
 81 |     event.preventDefault()
 82 |     this.setState({
 83 |       snippet: '',
 84 |       description: '',
 85 |       tabtrigger: '',
 86 |       scope: '',
 87 |     })
 88 |   }
 89 | 
 90 |   handleExample(event) {
 91 |     event.preventDefault()
 92 |     this.setState({
 93 |       snippet: `const \${1:fn} = ($2) => {
 94 | 	$3
 95 | }`,
 96 |       description: 'Creates an anonymous function in ES6 syntax',
 97 |       tabtrigger: 'anfn',
 98 |       scope: 'source.js',
 99 |     })
100 |   }
101 | 
102 |   render() {
103 |     const preProps = {
104 |       snippet: this.state.snippet,
105 |       description: this.state.description,
106 |       tabtrigger: this.state.tabtrigger,
107 |       scope: this.state.scope,
108 |     }
109 | 
110 |     return (
111 |       <Page>
112 |         <div className="l-container">
113 |           <h1 className="text-centre">Snippet Generator</h1>
114 |           <p className="text-centre l-mb0">
115 |             Sublime Text, Atom & VS Code snippet generator
116 |           </p>
117 |           <p className="text-centre l-mb0">
118 |             <small>Convert snippets across your text editors</small>
119 |           </p>
120 | 
121 |           <Grid gutter stack="mid">
122 |             <Column>
123 |               <Control>
124 |                 <Textarea
125 |                   value={this.state.snippet}
126 |                   onChange={this.handleSnippetChange}
127 |                   placeholder="Snippet"
128 |                   onKeyDown={this.handleKeyDown}
129 |                 />
130 | 
131 |                 <div className="examples">
132 |                   <small>
133 |                     <a href="#" onClick={this.handleClear}>
134 |                       Clear inputs
135 |                     </a>
136 |                   </small>
137 |                   <small>
138 |                     Try an{' '}
139 |                     <a href="#" onClick={this.handleExample}>
140 |                       example
141 |                     </a>
142 |                   </small>
143 |                 </div>
144 |               </Control>
145 |             </Column>
146 | 
147 |             <Column>
148 |               <Control>
149 |                 <Input
150 |                   value={this.state.description}
151 |                   onChange={this.handleDescriptionChange}
152 |                   placeholder="Description"
153 |                 />
154 |               </Control>
155 |               <Control>
156 |                 <input
157 |                   value={this.state.tabtrigger}
158 |                   onChange={this.handleTabTriggerChange}
159 |                   placeholder="Tab trigger"
160 |                   type="text"
161 |                   name="tabtrigger"
162 |                   className="form-input"
163 |                 />
164 |               </Control>
165 |               <Control>
166 |                 <input
167 |                   value={this.state.scope}
168 |                   onChange={this.handleScopeChange}
169 |                   placeholder="Scope"
170 |                   type="text"
171 |                   name="scope"
172 |                   className="form-input"
173 |                 />
174 |                 <small>
175 |                   e.g. <code onClick={this.handleScopeExample}>source.js</code>,{' '}
176 |                   <code onClick={this.handleScopeExample}>source.css</code> or{' '}
177 |                   <code onClick={this.handleScopeExample}>text.html</code>
178 |                 </small>
179 |               </Control>
180 |             </Column>
181 |           </Grid>
182 | 
183 |           <hr />
184 | 
185 |           <Grid gutter stack="mid">
186 |             <Column>
187 |               <Pre editor="Sublime" {...preProps} />
188 |             </Column>
189 |             <Column>
190 |               <Pre editor="Atom" {...preProps} />
191 |             </Column>
192 |             <Column>
193 |               <Pre editor="VS Code" {...preProps} />
194 |             </Column>
195 |           </Grid>
196 |         </div>
197 |         <style jsx>
198 |           {`
199 |             small code {
200 |               cursor: pointer;
201 |             }
202 | 
203 |             .examples {
204 |               display: flex;
205 |               justify-content: space-between;
206 |               margin-top: 5px;
207 |             }
208 |           `}
209 |         </style>
210 |       </Page>
211 |     )
212 |   }
213 | }
214 |

--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Snippets
 2 | 
 3 | > Sublime Text, Atom & VS Code snippet generator
 4 | 
 5 | Go to https://snippets.zander.wtf
 6 | 
 7 | ---
 8 | 
 9 | ## License
10 | 
11 | [MIT](https://choosealicense.com/licenses/mit/) © [Zander Martineau](https://zander.wtf)
12 | 
13 | > Made by [Zander ⚡](https://github.com/mrmartineau/)
14 |

--------------------------------------------------------------------------------