${words.join(\\\" \\\")}
\"), \";` in order to easily be able to transform the function\\u2019s response into an HTML paragraph later.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"export function generateWords(wordCount) {\\n let words = []\\n console.log(wordCount)\\n\\n for (var i = 0; i < wordCount; i++) {\\n words.push(WORDS[getRandomInt()])\\n }\\n const formattedWords = `${words.join(\\\" \\\")}
`\\n\\n return formattedWords\\n}\\n\")), mdx(\"p\", null, \"The random int in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"generateWords()\"), \" function is calculated with the following function:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"export function getRandomInt() {\\n return Math.floor(Math.random() * Math.floor(WORDS.length))\\n}\\n\")), mdx(\"p\", null, \"In the case where we are generating paragraphs we need the function \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"generateParagraphs()\"), \". This function will generate X paragraphs with 50 words until it reaches the paragraphCount. It does this by calling the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"generateWords()\"), \" function X times where X equals the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"paragraphCount\"), \" that was passed in.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"export function generateParagraphs(paragraphCount) {\\n let paragraphs = []\\n for (var I = 0; I < paragraphCount; I++) {\\n paragraphs.push(generateWords(50))\\n }\\n return paragraphs\\n}\\n\")), mdx(\"p\", null, \"In order for any of the above to work we need a word bank to draw from. At the top of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"generate-lorem-ipsum.js\"), \" we should \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"import { WORDS } from \\\"./words\\\";\"), \" and then in the same directory create a file called \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"words.js\"), \". In \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"words.js\"), \" we are going to create an array called \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"WORDS\"), \" and export it so that other functions can read it.\"), mdx(\"p\", null, \"I created an array with just filler words( \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"fillerWords\"), \") and another with Grey\\u2019s Anatomy and medical terms (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"greysAnatomyWords\"), \").\\nUsed ES6 spread operator to combine the arrays into one. \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"export const WORDS = [\\u2026greysAntomyWords, \\u2026fillerWords];\")), mdx(\"p\", null, \"The full file should look something like:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"const greysAnatomyWords = [\\\"Meredith Grey\\\", \\\"Shonda Rhimes\\\", \\\"Epi\\\", \\\"Cardio\\\"]\\n\\nconst fillerWords = [\\n \\\"actual\\\",\\n \\\"actually\\\",\\n \\\"amazing\\\",\\n]`export const WORDS = [\\u2026greysAntomyWords, \\u2026fillerWords];`\\n\")), mdx(\"h2\", {\n \"id\": \"methodology\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#methodology\",\n \"aria-label\": \"methodology permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Methodology\"), mdx(\"p\", null, \"In a full blown project we would need a lot of words or else it will be too repetitive. If you want to create another type of themed Lorem Ipsum then you would replace the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"greysAnatomyWords\"), \" with words from a theme of your choice.\"), mdx(\"p\", null, \"For the grey\\u2019s anatomy words I brainstormed and also found some lists like this \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.sheknows.com/parenting/articles/1008783/greys-anatomy-baby-names/\"\n }, \"Grey\\u2019s Anatomy Baby Names article\"), \" that I was able to re-purpose. The process of cleaning up the data and formatting into valid JSON can be a bit tedious, I did find and replace for formatting where I could and some manually updating as needed. This allowed me to get as much data as possible with minimal effort (I.e., automating the scraping of terms). I ended up with about 140 terms for my generator but if I needed a larger data set then it may have made sense to consider exploring a tool like BeautifulSoup or Selenium to automate scraping a data source and saving that data into a valid JS file.\"), mdx(\"p\", null, \"Note: Depending on how repetitive data is can create Map or filter to make sure that the array of words only has unique values.\"), mdx(\"p\", null, \"I decided to add in filler words so that the generated Lorem Ipsum text would have a healthy mix of verbs and adverbs in addition to the themed. I Google\\u2019d filler text and found the following repository, I copied the filler words from there: fillers_data.txt at master \\xB7 words_fillers \\xB7 GitHub\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/words/fillers/blob/master/data.txt\"\n })), mdx(\"p\", null, \"Now if you run \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"yarn start:lambda\"), \" and visit \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"http://localhost:9000/generate-lorem-ipsum/\"), \"you should see 4 generated paragraphs of lorem ipsum returned. It should look something like:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"\\u201Cmsg\\u201D:\\u201Despecially surgicial mostly try hospital anyway Seattle Dr. Lucy Fields Alex a trauma surgical fellow Dr. Mark Sloan my person heavily wherever Theodora Duquette Dr. Virginia Dixon cried a nurse a neurosurgeon really Margaret Dr. Mark Sloan Dr. April Kepner Meredith\\xE2\\u20AC\\u2122s father literally Dr. Alex Karev Dr. Izzie Stevens an anesthesiologist Denny much necessarily Surgery a trauma surgical fellow surely hardly Owen rather Shepherd totally cried chief of pediatric surgery Theodora Dr. Robert Stark Olivia an anesthesiologist get her up to CT actually Cristina Dr. Finn Dandridge
Tucker Virginia Callie Torres mostly hardly Maggie Maggie get her up to CT hardly get him up to CT quite stuff Dr. Mark Sloan whenever Dr. Richard Webber try George amazing Dr. Sydney Heron Dr. Jackson Avery actual quite nicely Richard stuff might Dr. Owen Hunt get her up to CT orthopedics Yang obviously mostly intubate her wherever orthopedic surgeon typically Margaret Karev effectively Alex Dr. Mark Sloan Seattle Dr. Alex Karev push one of epi try practically Dr. Alex Karev intubate him so
start significantly start fairly get him up to CT slightly Dr. Alex Karev chief of plastic surgery slightly Dr. Robert Stark Meredith\\xE2\\u20AC\\u2122s mother Norman actually completely Izzie Dr. Mark Sloan particularly Alex basically Adele clearly like usually Seattle Dr. Alex Karev typically chief of plastic surgery get him up to CT essentially ultimately my person exactly Norman specifically Virginia effectively O\\u2019Malley intubate her Virginia Tucker my person a surgery resident largely most a veterinarian basically she\\u2019s in V-Fib try simply Seattle
heavily Dr. Callie Torres essentially Dr. Jackson Avery whoever a nurse Dr. Mark Sloan definitely my person Olivia Harper Dr. Alex Karev essentially approximately generally my person exactly Dr. Miranda Bailey Dr. Preston Burke right a plastic surgeon Norman Theodora basically a cardiac surgeon chief of plastic surgery chief of plastic surgery essentially Dr. Jackson Avery Tyler Christian much seriously Meredith\\xE2\\u20AC\\u2122s mother slightly easily Mark my person maybe Mercy West Alex Erica Derek certainly badly rather hospital Denny Dr. Norman Shales Dr. Lexie Grey significantly Dr. Jackson Avery
\\u201D\\n\")), mdx(\"h2\", {\n \"id\": \"formatting-response\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#formatting-response\",\n \"aria-label\": \"formatting response permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Formatting Response\"), mdx(\"p\", null, \"This blob of text is not formatted yet but we will worry about that in the React app. So let\\u2019s switch back to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"app.js\"), \" . We are already printing the messages if you run \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"yarn start\"), \" and go to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"localhost:3000\"), \" you will see the same body text we just saw. Let\\u2019s use a library to format the response as actual HTML.\"), mdx(\"p\", null, \"We will use the \\u201Chtml-react-parser\\u201D package. It can be installed by running \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"yarn add html-react-parser\"), \" and then add this \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"import parse from \\u201Chtml-react-parser\\u201D;\"), \" to the top of your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"app.js\"), \" file in order to import it. Instead of just returning the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"msg\"), \" in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"LambdaCall\"), \" let\\u2019s replace \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"msg\"), \" with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{msg && parse(msg)}\"), \". This says to parse the HTML of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"msg\"), \" and return it whenever there is a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"msg\"), \".\"), mdx(\"p\", null, \"This part of the tutorial is choose-your-own-adventure. After setting up the Lorem Ipsum text generation logic. I went on to prettify the site to make it look more customized than the standard \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"create-react-app\"), \" boilerplate. One of the tools I used was this \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://buttonoptimizer.com/\"\n }, \"fancy button generator\"), \". I recommend playing around with the CSS until it matches the aesthetic that you want.\"), mdx(\"h3\", {\n \"id\": \"deploy\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#deploy\",\n \"aria-label\": \"deploy permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Deploy\"), mdx(\"p\", null, \"Thanks to Netlify\\u2019s continuous deployment, if you clicked the \\u201CDeploy to Netlify\\u201D button on the first step then your website will be deployed to once you merge your changes into the master branch of your project\\u2019s repository. Also, if you open a pull request Netlify will generate a preview. This should mirror what you see when running the site locally.\"), mdx(\"p\", null, \"The final code can be viewed on the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"loremIpsumTutorial\"), \" branch of the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/M0nica/greys-anatomy-lorem-ipsum-generator/tree/loremIpsumTutorial\"\n }, \"greys-anatomy-lorem-ipsum-generator\"), \" repository.\"), mdx(\"p\", null, \"Please share with me on Twitter, \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.twitter.com/indigitalcolor\"\n }, \"@indigitalcolor\"), \" if you end up creating a Lorem Ipsum generator or another app with the Netlify functions after reading through this tutorial.\"));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#requirements","title":"Requirements"},{"url":"#set-up","title":"Set Up"},{"url":"#verify-set-up","title":"Verify Set Up"},{"url":"#calling-the-netlify-function-from-react","title":"Calling the Netlify function from React"},{"url":"#adding-lorem-ipsum-logic","title":"Adding Lorem Ipsum Logic"},{"url":"#methodology","title":"Methodology"},{"url":"#formatting-response","title":"Formatting Response","items":[{"url":"#deploy","title":"Deploy"}]}]},"frontmatter":{"title":"Grey's Anatomy Lorem Ipsum Generator Tutorial","date":"June 02, 2019","description":"This tutorial is going to walk through how to create a Grey’s Anatomy or other-themed Lorem Ipsum generator with React and Netlify Functions","tags":["Tutorial","JavaScript","React","Netlify","Linguistics"]}},"allWebMentionEntry":{"edges":[{"node":{"wmTarget":"https://www.aboutmonica.com/blog/greys-anatomy-lorem-ipsum-generator/","wmSource":"https://brid.gy/post/twitter/waterproofheart/1362150496346193923","wmProperty":"mention-of","wmId":1035650,"type":"entry","url":"https://twitter.com/Gerard_K_Hynes/status/1362150496346193923","likeOf":null,"author":{"url":"https://twitter.com/Gerard_K_Hynes","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/92a79c4a1b6fa1cc79f8807c234435805672ef77da4370bad47fcd775d36e009.png","name":"Gerard Hynes"},"published":"February 17, 2021","content":{"text":"Ok, didn't finish this one in time for #100DaysOfCode but built a little #Serverless #LegendOfZelda lorem ipsum generator following @indigitalcolor's tutorial.\n\n@Netlify functions are ✨\n\nSite sharp-fermi-5dc2a8.netlify.app\nTutorial aboutmonica.com/blog/greys-ana…"}}}]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/greys-anatomy-lorem-ipsum-generator/","slug":"/blog/greys-anatomy-lorem-ipsum-generator/","prev":{"id":"51df8cc1-ce76-56d3-8806-f2df179ab4ae","frontmatter":{"title":"Less JavaScript Makes Font Awesome More Awesome","category":["resources"],"date":"2019-11-09T02:43:13.595Z","slug":"less-javascript-is-more","tags":["React","JavaScript","Font Awesome","Performance"],"redirects":["/blog/2019/11/09/less-javascript-is-more"]},"fields":{"slug":"/blog/less-javascript-is-more/"}},"next":{"id":"11e37adb-b7f4-542c-935b-f0fca3c2df96","frontmatter":{"title":"git is hard, but time travel in git is easy.","category":["git"],"date":"2019-03-24T02:43:13.595Z","slug":"git-time-travel","tags":["Git","GitHub"],"redirects":["/blog/2019/03/24/greys-anatomy-lorem-ipsum-generator"]},"fields":{"slug":"/blog/git-time-travel/"}}}}, "staticQueryHashes": ["1977783444","764694655"]}