v3.0.0 - The introduction of dynamically generated images (#12)

* add API endpoint for a generated image

* small adjustment to prep for the code cleanup

* main index page display upgrades

* make linter happy

* remove debugging stuff

* fix broken import

* error logging

* darkmode capabilities

* fix parameter passed by front end

* remove console.log

* update meta

* readme tweaks

* readme fix

README.md

@@ -1,11 +1,11 @@
 <p align="center">
   <a href="https://social-preview.pqt.dev">
-    <img alt="Social Preview" src="https://github.com/pqt/social-preview/blob/master/.github/images/248729857.png" width="100%" />
+    <img alt="Social Preview" src="https://github.com/pqt/social-preview/blob/main/.github/images/default.png" width="100%" />
   </a>
 </p>
 
 <h1 align="center">
-  social-preview
+  GitHub Social Preview
 </h1>
 
 <h3 align="center">
@@ -16,8 +16,11 @@ Generate a stylish meta social preview for your GitHub repository
   <a href="https://github.com/pqt/social-preview/blob/master/LICENSE">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Released under the MIT license." />
   </a>
-  <a href="https://twitter.com/intent/follow?screen_name=pqtdev">
-    <img src="https://img.shields.io/twitter/follow/pqtdev.svg?label=Follow%20@pqtdev" alt="Follow @pqtdev" />
+  <a href="https://github.com/pqt/social-preview">
+    <img
+      src="https://img.shields.io/badge/%E2%9C%93-Social%20Preview-blue"
+      alt="This Repository uses a generated Social Preview from @pqt/social-preview"
+    />
   </a>
 </p>
 
@@ -27,6 +30,31 @@ On [April 16th, 2019](https://github.blog/changelog/2019-04-16-repository-social
 
 This web app makes it dead simple to put in your username (or organization name) and the repository, then download an image that blends in with the branding of GitHub already. Zero effort and stylish.
 
+## Support this project
+
+Like all good software engineers I accept payments in dollars and _exposure_!
+
+[![This Repository uses a generated Social Preview from @pqt/social-preview](https://img.shields.io/badge/%E2%9C%93-Social%20Preview-blue)](https://github.com/pqt/social-preview)
+
+You can pop this bad boy on your repository free of charge. It's a small nod to the work put into this project, and will make me feel all warm and fuzzy inside when I search around and see who might be using a generated social preview on their projects.
+
+```
+[![This Repository uses a generated Social Preview from @pqt/social-preview](https://img.shields.io/badge/%E2%9C%93-Social%20Preview-blue)](https://github.com/pqt/social-preview)
+```
+
+or **HTML:**
+
+```html
+<a href="https://github.com/pqt/social-preview">
+  <img
+    src="https://img.shields.io/badge/%E2%9C%93-Social%20Preview-blue"
+    alt="This Repository uses a generated Social Preview from @pqt/social-preview"
+  />
+</a>
+```
+
+If you prefer the money route my [GitHub Sponsors](https://github.com/sponsors/pqt) page is always an appreciated alternative method of support.
+
 ## License
 
 MIT

components/Footer.tsx

@@ -2,28 +2,24 @@ import React, { ReactElement } from 'react';
 
 export const Footer = (): ReactElement => {
   return (
-    <div className="site-footer border-t border-gray-100">
-      <div className="bg-white border-t border-gray-100">
-        <div className="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
-          <div className="flex justify-center md:order-2">
-            <a href="https://github.com/pqt/social-preview" className="ml-6 text-gray-400 hover:text-gray-500">
-              <span className="sr-only">GitHub</span>
-              <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
-                <path
-                  fillRule="evenodd"
-                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </a>
-          </div>
-          <div className="mt-8 md:mt-0 md:order-1">
-            <p className="text-center text-base leading-6 text-gray-400">
-              &copy; Austin Paquette. All rights reserved.
-            </p>
-          </div>
+    <footer className="bg-white border-t border-gray-200 relative">
+      <div className="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
+        <div className="flex justify-center md:order-2">
+          <a href="https://github.com/pqt/social-preview" className="ml-6 text-gray-400 hover:text-gray-500">
+            <span className="sr-only">GitHub</span>
+            <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+              <path
+                fillRule="evenodd"
+                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </a>
+        </div>
+        <div className="mt-8 md:mt-0 md:order-1">
+          <p className="text-center text-base leading-6 text-gray-400">&copy; Austin Paquette. All rights reserved.</p>
         </div>
       </div>
-    </div>
+    </footer>
   );
 };

data/defaultColors.ts

@@ -0,0 +1,39 @@
+export const defaultColors = [
+  // gray
+  // [/*'#f9fafb', '#f4f5f7', '#e5e7eb', */'#d2d6dc', '#9fa6b2', '#6b7280', '#4b5563', '#374151', '#252f3f', '#161e2e'],
+  // cool-gray
+  // [/*'#f8fafc', '#f1f5f9', '#e2e8f0', */'#cfd8e3', '#97a6ba', '#64748b', '#475569', '#364152', '#27303f', '#1a202e'],
+  // red
+  // [/*'#fdf2f2', '#fde8e8', '#fbd5d5', */'#f8b4b4', '#f98080', '#f05252', '#e02424', '#c81e1e', '#9b1c1c', '#771d1d'],
+  // orange
+  // [/*'#fff8f1', '#feecdc', '#fcd9bd', */'#fdba8c', '#ff8a4c', '#ff5a1f', '#d03801'/*, '#b43403', '#8a2c0d', '#73230d'*/],
+  // yellow
+  // [/*'#fdfdea', '#fdf6b2', '#fce96a', */'#faca15', '#e3a008', '#c27803', '#9f580a'/*, '#8e4b10', '#723b13', '#633112'*/],
+  // green
+  [
+    /*'#f3faf7', '#def7ec', '#bcf0da', */ '#84e1bc',
+    '#31c48d',
+    '#0e9f6e',
+    '#057a55' /*, '#046c4e', '#03543f', '#014737'*/,
+  ],
+  // teal
+  [
+    /*'#edfafa', '#d5f5f6', '#afecef', */ '#7edce2',
+    '#16bdca',
+    '#0694a2',
+    '#047481' /*, '#036672', '#05505c', '#014451'*/,
+  ],
+  // blue
+  [
+    /*'#ebf5ff', '#e1effe', '#c3ddfd', */ '#a4cafe',
+    '#76a9fa',
+    '#3f83f8',
+    '#1c64f2' /*, '#1a56db', '#1e429f', '#233876'*/,
+  ],
+  // indigo
+  // [/*'#f0f5ff', '#e5edff', '#cddbfe', */'#b4c6fc', '#8da2fb', '#6875f5', '#5850ec'/*, '#5145cd', '#42389d', '#362f78'*/],
+  // purple
+  // [/*'#f6f5ff', '#edebfe', '#dcd7fe', */'#cabffd', '#ac94fa', '#9061f9', '#7e3af2'/*, '#6c2bd9', '#5521b5', '#4a1d96'*/],
+  // pink
+  // [/*'#fdf2f8', '#fce8f3', '#fad1e8', */'#f8b4d9', '#f17eb8', '#e74694', '#d61f69'/*, '#bf125d', '#99154b', '#751a3d'*/],
+];

data/errorMessages.ts

@@ -3,5 +3,26 @@ type ErrorMessageType = {
 };
 
 export const errorMessages: ErrorMessageType = {
-  404: 'Make sure you entered the correct details. The repository must also be public.',
+  404: 'Make sure you entered the correct details. The repository must either be public, or (if one is provided) accessible with the personal access token.',
+};
+
+/**
+ *
+ * @param name the name of the parameter that is causing the error
+ * @param acceptableParameters An array of strings that can be used to help guide the read to understanding what valid values will be accepted
+ * @param defaultParameter An optional default parameter that will be used if nothing is provided to this parameter
+ */
+export const generateQueryParameterErrorMessage = (
+  name: string,
+  acceptableParameters?: string[],
+  defaultParameter?: string
+) => {
+  const [baseMessage, acceptableParameterMessage, defaultParameterMessage] = [
+    `Query Parameter [${name}] is invalid.`,
+    typeof acceptableParameters !== 'undefined' &&
+      `If defined it must be one of: ${[...acceptableParameters].join(', ')}.`,
+    typeof defaultParameter !== 'undefined' && `(default: ${defaultParameter})`,
+  ];
+
+  return [baseMessage, acceptableParameterMessage, defaultParameterMessage].filter(Boolean).join(' ');
 };

next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+
+type Nullable<T> = T | null
+
+type RGB = { red: number; green: number; blue: number; };

package.json

@@ -14,15 +14,19 @@
   },
   "dependencies": {
     "@octokit/rest": "^17.9.0",
+    "@pqt/weighted-random": "^1.0.0",
     "@tailwindcss/ui": "^0.3.0",
     "classnames": "^2.2.6",
     "jimp": "^0.10.3",
-    "next": "^9.4.0",
+    "next": "^10.0.1",
     "postcss-import": "^12.0.1",
+    "querystring": "^0.2.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-hook-form": "^5.7.2",
+    "seedrandom": "^3.0.5",
     "tailwindcss": "^1.4.0",
+    "yaml": "^1.10.0",
     "yup": "^0.28.5"
   },
   "devDependencies": {
@@ -33,6 +37,7 @@
     "@types/node": "^13.13.4",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
+    "@types/seedrandom": "^2.4.28",
     "@types/yup": "^0.28.3",
     "autoprefixer": "^9.7.6",
     "eslint": "^6.8.0",