├── .prettierrc
├── .gitignore
├── README.md
├── .eslintrc
├── package.json
├── .github
    └── workflows
    │   └── readme.yml
├── LICENSE
└── index.html


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 | .vercel
7 | .envrc
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [![](https://raw.githubusercontent.com/jasonlong/jasonlong/main/chat.svg)](https://bsky.app/profile/jasonlong.me)
2 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |       "browser": true,
 4 |       "es2020": true
 5 |   },
 6 |   "extends": [
 7 |       "prettier"
 8 |   ],
 9 |   "parserOptions": {
10 |       "ecmaVersion": 11,
11 |       "sourceType": "module"
12 |   },
13 |   "rules": {
14 |     "semi": 0,
15 |     "comma-dangle": 0
16 |   }  
17 | }
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "type": "module",
 3 |   "name": "readme-messages",
 4 |   "version": "0.0.0",
 5 |   "devDependencies": {
 6 |     "eslint": "^7.27.0",
 7 |     "eslint-config-prettier": "^8.3.0",
 8 |     "prettier": "2.3.0"
 9 |   },
10 |   "dependencies": {
11 |     "date-fns": "^4.1.0",
12 |     "got": "^14.4.5",
13 |     "js-quantities": "^1.8.0"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/.github/workflows/readme.yml:
--------------------------------------------------------------------------------
 1 | name: Update readme
 2 | 
 3 | on:
 4 |   schedule:
 5 |     - cron: "0 4 * * *"
 6 |   workflow_dispatch:
 7 | 
 8 | jobs:
 9 |   readme:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - name: Use Node.js ${{ matrix.node-version }}
15 |         uses: actions/setup-node@v2
16 |         with:
17 |           node-version: 18
18 |       - run: npm install
19 | 
20 |       - name: Generate readme
21 |         env:
22 |           WEATHER_API_KEY: ${{ secrets.WEATHER_API_KEY }}
23 |         run: node build-svg.js
24 | 
25 |       - name: Commit changes
26 |         uses: EndBug/add-and-commit@v4
27 |         with:
28 |           author_name: Jason Long
29 |           author_email: jason@jasonlong.me
30 |           message: "Auto updating my readme"
31 |           add: "*.svg"
32 |         env:
33 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <https://unlicense.org>
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Vite App</title>
  8 |   </head>
  9 |   <body>
 10 |     <svg
 11 |       width="550"
 12 |       height="400"
 13 |       viewBox="0 0 550 400"
 14 |       fill="none"
 15 |       xmlns="http://www.w3.org/2000/svg"
 16 |     >
 17 |       <style>
 18 |         rect {
 19 |           fill: #e9e9eb;
 20 |         }
 21 |         a {
 22 |           fill: #0079ff;
 23 |         }
 24 |         text {
 25 |           fill: #242424;
 26 |           font-size: 18px;
 27 |           font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
 28 |             'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
 29 |             'Helvetica Neue', 'sans-serif';
 30 |         }
 31 | 
 32 |         .typing-1 {
 33 |           opacity: 0;
 34 |           animation: fade-in-out 1.5s;
 35 |         }
 36 | 
 37 |         .msg-1 {
 38 |           animation:
 39 |             wait 1.7s,
 40 |             msg-1 0.2s 1.7s;
 41 |         }
 42 | 
 43 |         .typing-2 {
 44 |           opacity: 0;
 45 |           animation:
 46 |             wait 2.5s,
 47 |             fade-in-out 1.5s 2.5s;
 48 |         }
 49 | 
 50 |         .msg-2 {
 51 |           animation:
 52 |             wait 4.2s,
 53 |             msg-2 0.2s 4.2s;
 54 |         }
 55 | 
 56 |         .typing-3 {
 57 |           opacity: 0;
 58 |           animation:
 59 |             wait 5s,
 60 |             fade-in-out 1.5s 5s;
 61 |         }
 62 | 
 63 |         .msg-3 {
 64 |           animation:
 65 |             wait 6.7s,
 66 |             msg-3 0.2s 6.7s;
 67 |         }
 68 | 
 69 |         .typing-4 {
 70 |           opacity: 0;
 71 |           animation:
 72 |             wait 7.5s,
 73 |             fade-in-out 1.5s 7.5s;
 74 |         }
 75 | 
 76 |         .msg-4 {
 77 |           animation:
 78 |             wait 9.2s,
 79 |             msg-4 0.2s 9.2s;
 80 |         }
 81 | 
 82 |         .typing-5 {
 83 |           opacity: 0;
 84 |           animation:
 85 |             wait 10s,
 86 |             fade-in-out 1.5s 10s;
 87 |         }
 88 | 
 89 |         .msg-5 {
 90 |           animation:
 91 |             wait 11.7s,
 92 |             msg-5 0.2s 11.7s;
 93 |         }
 94 | 
 95 |         .typing-6 {
 96 |           opacity: 0;
 97 |           animation:
 98 |             wait 12.5s,
 99 |             fade-in-out 1.5s 12.5s;
100 |         }
101 | 
102 |         .msg-6 {
103 |           animation:
104 |             wait 14.2s,
105 |             msg-6 0.2s 14.2s;
106 |         }
107 | 
108 |         @keyframes wait {
109 |           0%,
110 |           100% {
111 |             opacity: 0;
112 |           }
113 |         }
114 | 
115 |         @keyframes fade-in-out {
116 |           0%,
117 |           100% {
118 |             opacity: 0;
119 |           }
120 |           25%,
121 |           90% {
122 |             opacity: 1;
123 |           }
124 |         }
125 | 
126 |         @keyframes msg-1 {
127 |           0% {
128 |             opacity: 0;
129 |             transform: translate(10px, 5px);
130 |           }
131 |           100% {
132 |             opacity: 1;
133 |             transform: translate(10px, 0);
134 |           }
135 |         }
136 | 
137 |         @keyframes msg-2 {
138 |           0% {
139 |             opacity: 0;
140 |             transform: translate(10px, 53px);
141 |           }
142 |           100% {
143 |             opacity: 1;
144 |             transform: translate(10px, 48px);
145 |           }
146 |         }
147 | 
148 |         @keyframes msg-3 {
149 |           0% {
150 |             opacity: 0;
151 |             transform: translate(10px, 125px);
152 |           }
153 |           100% {
154 |             opacity: 1;
155 |             transform: translate(10px, 120px);
156 |           }
157 |         }
158 | 
159 |         @keyframes msg-4 {
160 |           0% {
161 |             opacity: 0;
162 |             transform: translate(10px, 197px);
163 |           }
164 |           100% {
165 |             opacity: 1;
166 |             transform: translate(10px, 192px);
167 |           }
168 |         }
169 | 
170 |         @keyframes msg-5 {
171 |           0% {
172 |             opacity: 0;
173 |             transform: translate(10px, 245px);
174 |           }
175 |           100% {
176 |             opacity: 1;
177 |             transform: translate(10px, 240px);
178 |           }
179 |         }
180 | 
181 |         @keyframes msg-6 {
182 |           0% {
183 |             opacity: 0;
184 |             transform: translate(10px, 293px);
185 |           }
186 |           100% {
187 |             opacity: 1;
188 |             transform: translate(10px, 288px);
189 |           }
190 |         }
191 | 
192 |         @media (prefers-color-scheme: dark) {
193 |           rect {
194 |             fill: #3b3b3d;
195 |           }
196 |           text {
197 |             fill: #dcdcdc;
198 |           }
199 |           a {
200 |             fill: #0c82f9;
201 |           }
202 |         }
203 |       </style>
204 | 
205 |       <!-- typing 1 -->
206 |       <g transform="translate(10, 0)" class="typing-1">
207 |         <rect x="8.27246" width="69.7276" height="42" rx="20.9774" />
208 |         <circle cx="13.591" cy="33.091" r="7.68185" />
209 |         <circle cx="3.54547" cy="41.9547" r="3.54547" />
210 | 
211 |         <circle cx="27.4778" cy="20.9773" r="5.02275" fill="#999999">
212 |           <animate
213 |             attributeName="opacity"
214 |             values="0.5;1;0.5"
215 |             dur="1s"
216 |             repeatCount="indefinite"
217 |           />
218 |         </circle>
219 |         <circle cx="42.8411" cy="20.9773" r="5.02275" fill="#999999">
220 |           <animate
221 |             attributeName="opacity"
222 |             values="0.5;1;0.5"
223 |             dur="1s"
224 |             begin="0.2s"
225 |             repeatCount="indefinite"
226 |           />
227 |         </circle>
228 |         <circle cx="58.2054" cy="20.9773" r="5.02275" fill="#999999">
229 |           <animate
230 |             attributeName="opacity"
231 |             values="0.5;1;0.5"
232 |             dur="1s"
233 |             begin="0.4s"
234 |             repeatCount="indefinite"
235 |           />
236 |         </circle>
237 |       </g>
238 | 
239 |       <!-- Hi, I'm Jason -->
240 |       <g transform="translate(10, 0)" class="msg-1">
241 |         <rect width="133" height="42" rx="18.0355" />
242 |         <text x="15" y="27">Hi, I'm Jason</text>
243 |       </g>
244 | 
245 |       <!-- typing 2 -->
246 |       <g transform="translate(10, 48)" class="typing-2">
247 |         <rect x="8.27246" width="69.7276" height="42" rx="20.9774" />
248 |         <circle cx="13.591" cy="33.091" r="7.68185" />
249 |         <circle cx="3.54547" cy="41.9547" r="3.54547" />
250 | 
251 |         <circle cx="27.4778" cy="20.9773" r="5.02275" fill="#999999">
252 |           <animate
253 |             attributeName="opacity"
254 |             values="0.5;1;0.5"
255 |             dur="1s"
256 |             repeatCount="indefinite"
257 |           />
258 |         </circle>
259 |         <circle cx="42.8411" cy="20.9773" r="5.02275" fill="#999999">
260 |           <animate
261 |             attributeName="opacity"
262 |             values="0.5;1;0.5"
263 |             dur="1s"
264 |             begin="0.2s"
265 |             repeatCount="indefinite"
266 |           />
267 |         </circle>
268 |         <circle cx="58.2054" cy="20.9773" r="5.02275" fill="#999999">
269 |           <animate
270 |             attributeName="opacity"
271 |             values="0.5;1;0.5"
272 |             dur="1s"
273 |             begin="0.4s"
274 |             repeatCount="indefinite"
275 |           />
276 |         </circle>
277 |       </g>
278 | 
279 |       <!-- From Columbus... -->
280 |       <g transform="translate(10, 48)" class="msg-2">
281 |         <rect width="418" height="66.1302" rx="18.0355" />
282 |         <text x="15" y="27">
283 |           I live in Columbus, Ohio – it’s supposed to be 79° F
284 |         </text>
285 |         <text x="15" y="50">(28° C) and ☀️ here today.</text>
286 |       </g>
287 | 
288 |       <!-- typing 3 -->
289 |       <g transform="translate(10, 120)" class="typing-3">
290 |         <rect x="8.27246" width="69.7276" height="42" rx="20.9774" />
291 |         <circle cx="13.591" cy="33.091" r="7.68185" />
292 |         <circle cx="3.54547" cy="41.9547" r="3.54547" />
293 | 
294 |         <circle cx="27.4778" cy="20.9773" r="5.02275" fill="#999999">
295 |           <animate
296 |             attributeName="opacity"
297 |             values="0.5;1;0.5"
298 |             dur="1s"
299 |             repeatCount="indefinite"
300 |           />
301 |         </circle>
302 |         <circle cx="42.8411" cy="20.9773" r="5.02275" fill="#999999">
303 |           <animate
304 |             attributeName="opacity"
305 |             values="0.5;1;0.5"
306 |             dur="1s"
307 |             begin="0.2s"
308 |             repeatCount="indefinite"
309 |           />
310 |         </circle>
311 |         <circle cx="58.2054" cy="20.9773" r="5.02275" fill="#999999">
312 |           <animate
313 |             attributeName="opacity"
314 |             values="0.5;1;0.5"
315 |             dur="1s"
316 |             begin="0.4s"
317 |             repeatCount="indefinite"
318 |           />
319 |         </circle>
320 |       </g>
321 |       oo
322 | 
323 |       <!-- From Columbus... -->
324 |       <g transform="translate(10, 120)" class="msg-3">
325 |         <rect width="430" height="66.1302" rx="18.0355" />
326 |         <text x="15" y="27">
327 |           I’m a product designer. I used to work at GitHub,
328 |         </text>
329 |         <text x="15" y="50">
330 |           but I’ve been at
331 |           <a xlink:href="https://planetscale.com">PlanetScale</a>
332 |           for about 5 months now.
333 |         </text>
334 |       </g>
335 | 
336 |       <!-- typing 4 -->
337 |       <g transform="translate(10, 192)" class="typing-4">
338 |         <rect x="8.27246" width="69.7276" height="42" rx="20.9774" />
339 |         <circle cx="13.591" cy="33.091" r="7.68185" />
340 |         <circle cx="3.54547" cy="41.9547" r="3.54547" />
341 | 
342 |         <circle cx="27.4778" cy="20.9773" r="5.02275" fill="#999999">
343 |           <animate
344 |             attributeName="opacity"
345 |             values="0.5;1;0.5"
346 |             dur="1s"
347 |             repeatCount="indefinite"
348 |           />
349 |         </circle>
350 |         <circle cx="42.8411" cy="20.9773" r="5.02275" fill="#999999">
351 |           <animate
352 |             attributeName="opacity"
353 |             values="0.5;1;0.5"
354 |             dur="1s"
355 |             begin="0.2s"
356 |             repeatCount="indefinite"
357 |           />
358 |         </circle>
359 |         <circle cx="58.2054" cy="20.9773" r="5.02275" fill="#999999">
360 |           <animate
361 |             attributeName="opacity"
362 |             values="0.5;1;0.5"
363 |             dur="1s"
364 |             begin="0.4s"
365 |             repeatCount="indefinite"
366 |           />
367 |         </circle>
368 |       </g>
369 | 
370 |       <!-- Twitter -->
371 |       <g transform="translate(10, 192)" class="msg-4">
372 |         <rect width="473" height="42" rx="18.0355" />
373 |         <text x="15" y="27">
374 |           You can find me on Twitter at
375 |           <a xlink:href="https://twitter.com/jasonlong">
376 |             https://twitter.com/jasonlong
377 |           </a>
378 |         </text>
379 |       </g>
380 | 
381 |       <!-- typing 5 -->
382 |       <g transform="translate(10, 240)" class="typing-5">
383 |         <rect x="8.27246" width="69.7276" height="42" rx="20.9774" />
384 |         <circle cx="13.591" cy="33.091" r="7.68185" />
385 |         <circle cx="3.54547" cy="41.9547" r="3.54547" />
386 | 
387 |         <circle cx="27.4778" cy="20.9773" r="5.02275" fill="#999999">
388 |           <animate
389 |             attributeName="opacity"
390 |             values="0.5;1;0.5"
391 |             dur="1s"
392 |             repeatCount="indefinite"
393 |           />
394 |         </circle>
395 |         <circle cx="42.8411" cy="20.9773" r="5.02275" fill="#999999">
396 |           <animate
397 |             attributeName="opacity"
398 |             values="0.5;1;0.5"
399 |             dur="1s"
400 |             begin="0.2s"
401 |             repeatCount="indefinite"
402 |           />
403 |         </circle>
404 |         <circle cx="58.2054" cy="20.9773" r="5.02275" fill="#999999">
405 |           <animate
406 |             attributeName="opacity"
407 |             values="0.5;1;0.5"
408 |             dur="1s"
409 |             begin="0.4s"
410 |             repeatCount="indefinite"
411 |           />
412 |         </circle>
413 |       </g>
414 | 
415 |       <!-- Thanks -->
416 |       <g transform="translate(10, 240)" class="msg-5">
417 |         <rect width="210" height="42" rx="18" />
418 |         <text x="15" y="27">Thanks for stopping by</text>
419 |       </g>
420 | 
421 |       <!-- typing 6 -->
422 |       <g transform="translate(10, 288)" class="typing-6">
423 |         <rect x="8.27246" width="69.7276" height="42" rx="20.9774" />
424 |         <circle cx="13.591" cy="33.091" r="7.68185" />
425 |         <circle cx="3.54547" cy="41.9547" r="3.54547" />
426 | 
427 |         <circle cx="27.4778" cy="20.9773" r="5.02275" fill="#999999">
428 |           <animate
429 |             attributeName="opacity"
430 |             values="0.5;1;0.5"
431 |             dur="1s"
432 |             repeatCount="indefinite"
433 |           />
434 |         </circle>
435 |         <circle cx="42.8411" cy="20.9773" r="5.02275" fill="#999999">
436 |           <animate
437 |             attributeName="opacity"
438 |             values="0.5;1;0.5"
439 |             dur="1s"
440 |             begin="0.2s"
441 |             repeatCount="indefinite"
442 |           />
443 |         </circle>
444 |         <circle cx="58.2054" cy="20.9773" r="5.02275" fill="#999999">
445 |           <animate
446 |             attributeName="opacity"
447 |             values="0.5;1;0.5"
448 |             dur="1s"
449 |             begin="0.4s"
450 |             repeatCount="indefinite"
451 |           />
452 |         </circle>
453 |       </g>
454 | 
455 |       <!-- Have a great... -->
456 |       <g transform="translate(10, 288)" class="msg-6">
457 |         <rect width="210" height="42" rx="18.0355" />
458 |         <text x="15" y="27">Have a great Friday! 👋🏻</text>
459 |       </g>
460 |     </svg>
461 | 
462 |     <script type="module" src="/main.js"></script>
463 |   </body>
464 | </html>
465 | 


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