Added qr contact

Author: rvente

content/posts/2018-03-09--diglossia/index.md

@@ -10,20 +10,20 @@ toc: true
 
 Diglossia is the segregation of the use of two language varieties on the basis
 of function by members of a speech community. That's a pile of jargon. If you
-use one language or dialect in formal siturations, and another in informal ones,
+use one language or dialect in formal situations, and another in informal ones,
 then you are likely a part of a diglossic speech community. 
 
 Previous Linguists have named these informal contexts Low (domestic, local) and
 call the formal context High (academic, national, global). I will call them
 Formal and Informal.
 
-New York has General American English GAE and African American Vernacular AAVE
-(also known as Black American English, or Ebonics) among our many languages
-spoken here. AAVE is unique because despite being easily identifyable as dialect
-of English, it has a distinctive grammar. Copula deletion and negative concord
-are two of its features.
+New York, like many states, has General American English (GAE) and African
+American Vernacular (AAVE) (also known as Black American English, or Ebonics)
+among its many dialects. AAVE is unique because despite being easily
+identifiable as dialect of English, it has a distinctive grammar. Copula
+deletion and negative concord are two of its features.
 
-In school, they don't teach AAVE. If anything opposite is true. My teachers said
+In school, they don't teach AAVE. If anything, the opposite is true. My teachers said
 "Repeat after me. Ain't is Not a word" and "people will respect you more if you
 speak *proper* English." When I went home, I spoke Creole. On the news, I heard
 GAE. In TV shows, GAE. On the internet, GAE...

content/posts/2022-02-14--QRContact/index.mdx

@@ -0,0 +1,15 @@
+---
+title: "QR Contact"
+date: 2022-01-08
+tags:
+  - Projects
+---
+
+import QRContact from "./qrcontact"
+
+Store your contact info to a QR code. All in-browser.
+
+<QRContact />
+
+
+Source code is at <https://github.com/rvente/hexameter>

content/posts/2022-02-14--QRContact/qrcontact.js

@@ -0,0 +1,86 @@
+import React from "react";
+import debounceRender from 'react-debounce-render';
+import { useForm } from "react-hook-form";
+import QRCode from "react-qr-code";
+import VCard from 'vcard-creator';
+
+
+/*
+ * @author Blake Vente
+ */
+
+// styles
+const inputField = {
+  width: "50%",
+  fontSize: "1rem",
+  borderRadius: "10px",
+  color: "var(--theme-ui-colors-text)",
+  borderColor: "var(--theme-ui-colors-text)",
+  borderStyle: "solid",
+  borderWidth: "1px",
+  backgroundColor: "var(--theme-ui-colors-transparent,transparent)",
+  display: "block",
+  margin: "10px",
+  padding: "10px",
+}
+
+const fillContainer = {
+  backgroundColor: "white",
+  width: "276px", // 256 + 2 * padding
+  padding: "10px"
+}
+
+
+function ContactQRCode({ firstName, lastName, phoneNumber, title, website, email, company}) {
+
+  // Define a new vCard
+  const myVCard = new VCard()
+
+  // Some variables
+
+  myVCard
+    // Add personal data
+    .addName(lastName, firstName)
+    // Add work data
+    .addCompany(company)
+    .addJobtitle(title)
+    .addEmail(email)
+    .addPhoneNumber(phoneNumber.replace(/\D/g,''), 'PREF')
+    .addURL(website);
+
+  console.log(myVCard.toString());
+
+  return (
+    <div style={fillContainer} >
+      <QRCode value={myVCard.toString()} />
+    </div>
+  )
+}
+const DbounceContactQRCode = debounceRender(ContactQRCode, 500);
+
+export default function QRContact() {
+
+  const formFields = {
+    firstName: "First Name",
+    lastName: "Last Name",
+    phoneNumber: "999-999-9999",
+    title: "Job Title",
+    company: "Your Company, Inc",
+    email: "[email protected]",
+    website: "https://example.com",
+  };
+
+  const { register, watch } = useForm(
+    { defaultValues: formFields }
+  );
+
+  return (
+    <div>
+      <form >
+        {/* register your input into the hook by invoking the "register" function */}
+        {Object.keys(formFields).map( (registerKey, i) => <input key={i} style={inputField} {...register(registerKey)} /> )}
+      </form>
+      <DbounceContactQRCode {...watch()} />
+    </div>
+  );
+}

package.json

@@ -36,10 +36,14 @@
     "p5": "^1.4.0",
     "react": "^16.14.0",
     "react-adsense": "^0.1.0",
+    "react-debounce-render": "^8.0.1",
     "react-dom": "^16.14.0",
+    "react-hook-form": "^7.27.0",
     "react-katex": "^2.0.2",
     "react-p5": "^1.3.25",
-    "react-p5-wrapper": "^2.4.1"
+    "react-p5-wrapper": "^2.4.1",
+    "react-qr-code": "^2.0.3",
+    "vcard-creator": "^0.4.2"
   },
   "devDependencies": {
     "cross-env": "^5.2.0"