Reading calendar API

.env

@@ -0,0 +1,8 @@
+NEXT_PUBLIC_API_URL=https://otherway.dev.fergl.ie:3000
+
+GOOGLE_CALENDAR_PROJECT_ID=47147490249
+GOOGLE_CALENDAR_ID=geh501qel59lf3505v2huebo18@group.calendar.google.com
+GOOGLE_CALENDAR_API_KEY=AIzaSyAMvrSrwqvz9o4Y8b-0zneU-REWDIzuKR0
+GOOGLE_CALENDAR_CREDENTIALS_PRIVATE_KEY_ID="d694fded9dca2e36e5974032d458c28edfd40852"
+GOOGLE_CALENDAR_CREDENTIALS_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCaMVP3P+Do/KcZ\np/EH2cbj6bDb0weBcJzAyL8McrmZta8sSizQ63ui6CEcqrFhLVIT49Auzyx7KQcW\n/cu0/gLWUz/uZkbuqhCuYr0EYZWSQgTCdqK/llbxfVaKVDj4/noykqi175UWnRDW\nBG7PU3TeXTVwfH5WSWQq+ZWm9Br0wlR/dYxuAfVKIFJd+PbvvyzQhDDdU4GQdo39\ntKh9h6LJnQs7JxofleYEHAxFiA4gDTkFyV6s6TqG2zcEwWieH3LdH44chHYZuuZC\nVAZ38/Aofva1gYjdkos2OTch9SDKbijaLSYPHDHW0MNWScSIDvcUKULaPFv8Y5nt\nnOiRow0rAgMBAAECggEAH0oRQuQojL7wXclxpOkxbgB3DjSlmkOy24AhHLKPLTzs\nHi2zKHYQsb8vMPUGZ7TdqgGZtlX+LcPml2jLFKBTDRD5sTP6AuZp2ilZN/Fhe7t/\n4cJXRk+Itxp7HDj5ErX5MBgIulqyw1L+Hp/pqJLD7Xe2p2vr6zCbbgkVsDpq2e3g\nuX82oqzSIrrfPpZQDYi0rxOTVVdLc/EUtTc3VDvzaylUBXhSvgV22tOQYds7H+Si\njMsMD6dIZGejiNn+rtLaK3/yEH6iik4XSKNXtDUCBzNbpTkxhk78OOdfAa2ySSM8\naNsNHa/kBoM0W8/+aSjFHYbru5YRJB4IWuUWCO49SQKBgQDJUEqIsm6UhAsgrCDN\nUDXbCnijs75cpt6YYHVlWNNHD2gG8FSz0Smk1TXlwqF85SrKir30cktRHi08AuJ3\nXf38/u9BWFYRs8qELPEgIJ6VrB+i7KLS1X8/Vd6Q+72exwGqyBZGAW9juCmkHiuF\nNTX7ClmaALfoSJ1jOPnX4LG2HwKBgQDEFCl9xvGDFcuLt1Hdg2rcx2gnN+RmDGfh\neTagw70zVvEjp1kQxhzaQArWCkB2kSV9EEZl//TwK+h7KVdvNDR1ufVxbaQVV2S3\nWFfwr9RH1DhPtjhhYawbxhsC/S62JPc7maLNBUg2YwrHiX+gal35ePAvs8+0Kl4V\nbKxw62EPdQKBgQCw3++srQFFUcKpITLs0VWQL2IRisJti1u2C8H5mpJ/M8UVm6EA\nIHzzSzVAusHCB2OSc1Y0aRtNmTLrMCmj8RxQZfj2s9NjWFFN0mLE9IQBQyrErh7d\nGSHlFuAnCFfxIi6Py57uQSKKPeuwO6XHMxpLiCtziMAMwYgu/oddqhjZxwKBgDi2\nzDmBLaIIz9MdtyQnOuWZF9sgI4QQ2osxEEf31eXfo+f4I57ibr4CACBg3rxsxzch\nWftuyV4elSPqlUupAfN7Ui7405kIqi0N9IG9md0c2RzVTAF+ytVNu8pliPlOP+SR\nT7GVcYmppBiLAMtZeM0L2g0yKUWna4cu48HVk0FxAoGBAKCSVvU2yAPKQlFZMjWZ\nf3lZVssPNf1/xSfvnsSqzURN7MzPlQRChZK7XgoAtKARep3vl8Uiti+OnPXCSf0P\nOvq6ckSGQxViVA3xlVTkYFA37CqCsCk5e3pAmv6nFcEnhbWMEIiK1+fEoVYpcMJB\ng8dJPLVOhoUcuGMYFE9KBp3K\n-----END PRIVATE KEY-----\n"
+GOOGLE_CALENDAR_CREDENTIALS_CLIENT_EMAIL="otherway-calendar-proxy@radio-otherway.iam.gserviceaccount.com"

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.private/

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${workspaceFolder}/server.js",
+      "outFiles": ["${workspaceFolder}/**/*.js"]
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

.yarnrc.yml

@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-1.22.19.cjs

package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "node ./server.js",
+    "dev-nossl": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -13,11 +14,23 @@
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
+    "daisyui": "^2.49.0",
     "eslint": "8.32.0",
     "eslint-config-next": "13.1.5",
     "next": "13.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.7.1",
     "typescript": "4.9.4"
+  },
+  "packageManager": "yarn@1.22.19",
+  "devDependencies": {
+    "@google-cloud/local-auth": "2.1.0",
+    "autoprefixer": "^10.4.13",
+    "googleapis": "105",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.3",
+    "prettier-plugin-tailwindcss": "^0.2.2",
+    "tailwindcss": "^3.2.4"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/safari-pinned-tab.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="320.000000pt" height="320.000000pt" viewBox="0 0 320.000000 320.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,320.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 1600 l0 -1600 1600 0 1600 0 0 1600 0 1600 -1600 0 -1600 0 0
+-1600z m2794 952 c4 -7 -103 -197 -363 -641 l-60 -104 19 -27 c29 -41 41 -106
+29 -161 -18 -84 -101 -143 -200 -142 -37 0 -40 -2 -80 -74 -17 -30 -18 -37 -6
+-47 7 -6 29 -57 47 -113 19 -56 36 -100 38 -98 3 2 16 50 31 107 l27 103 38 3
+c62 5 67 0 52 -50 -8 -24 -21 -65 -29 -93 -8 -27 -27 -89 -42 -137 l-27 -88
+-48 0 -47 0 -33 100 c-19 55 -36 97 -39 94 -3 -3 -19 -46 -36 -97 l-30 -92
+-45 -3 c-33 -3 -47 1 -57 14 -7 10 -14 16 -16 13 -4 -4 -67 -112 -106 -182
+-119 -210 -193 -337 -200 -341 -4 -3 -32 39 -63 92 -30 53 -95 166 -143 250
+-74 130 -90 152 -111 152 l-24 0 0 185 0 185 100 0 100 0 0 -45 0 -45 -50 0
+c-47 0 -50 -2 -50 -25 0 -23 3 -25 50 -25 l50 0 0 -45 0 -45 -50 0 c-47 0 -50
+-2 -50 -25 0 -23 3 -25 50 -25 l50 0 0 -45 0 -45 -60 0 c-33 0 -60 -3 -60 -6
+0 -15 255 -442 261 -438 4 2 71 114 149 249 79 135 147 245 152 245 9 0 4 28
+-17 95 -12 37 -51 168 -62 208 -4 16 1 18 48 15 l53 -3 13 -55 c8 -30 20 -80
+26 -110 7 -30 16 -50 20 -44 3 6 20 53 36 104 17 51 40 102 51 114 12 11 36
+44 55 73 l33 52 -28 6 c-32 7 -84 59 -99 98 -17 45 -13 117 10 164 43 90 169
+129 261 82 23 -12 44 -18 45 -13 2 5 62 110 134 234 72 124 147 254 167 290
+20 36 51 90 69 120 l33 55 -1147 3 c-630 1 -1148 1 -1150 -1 -2 -3 230 -413
+351 -619 15 -27 24 -49 19 -50 -4 0 27 -4 69 -8 91 -7 128 -29 142 -82 14 -56
+-11 -115 -55 -130 -10 -3 1 -24 36 -71 28 -37 54 -65 59 -64 7 2 92 214 116
+290 15 47 29 57 80 57 l48 0 28 -77 c15 -43 31 -82 36 -88 4 -5 8 -15 8 -23 0
+-8 6 -28 14 -45 24 -53 46 -109 46 -118 0 -5 -22 -9 -49 -9 -45 0 -50 2 -61
+30 -13 30 -14 31 -74 28 -55 -3 -62 -6 -74 -30 -12 -26 -17 -28 -78 -28 -35 0
+-64 -3 -64 -6 0 -4 16 -33 35 -65 30 -49 41 -58 68 -61 l32 -3 0 -180 0 -180
+-47 -3 -48 -3 0 75 0 76 -65 0 -65 0 0 -75 0 -75 -50 0 -50 0 2 183 3 182 48
+3 47 3 0 -70 0 -71 65 0 65 0 0 74 c0 68 -3 81 -35 135 -33 56 -39 61 -70 61
+-30 0 -37 6 -67 55 -18 30 -36 55 -40 55 -5 0 -8 -25 -8 -55 l0 -55 -47 0 -48
+0 2 177 c1 150 4 178 17 183 12 4 -20 66 -145 280 -234 401 -243 418 -222 423
+31 8 2352 7 2357 -1z m-1836 -282 c4 0 34 27 67 60 32 33 60 58 62 56 5 -5 9
+-256 5 -256 -2 0 -35 30 -73 67 l-69 66 0 -69 0 -69 -67 67 -68 68 65 65 65
+66 3 -61 c2 -33 6 -60 10 -60z m387 60 c33 -33 62 -60 66 -60 3 0 4 24 1 54
+-2 29 0 56 5 59 5 3 38 -23 73 -58 l64 -65 -64 -65 c-35 -36 -68 -65 -73 -65
+-5 0 -8 26 -7 58 1 31 1 61 1 65 -1 4 -31 -22 -67 -58 -36 -36 -67 -65 -70
+-65 -2 0 -4 59 -4 130 0 72 4 130 8 130 4 0 34 -27 67 -60z m455 -70 c0 -71
+-2 -130 -4 -130 -9 0 -121 122 -121 132 0 10 106 125 118 127 4 0 7 -57 7
+-129z m140 -2 l0 -133 -67 67 -68 68 65 65 c35 36 66 65 67 65 2 0 3 -60 3
+-132z m310 4 c0 -17 -115 -134 -124 -125 -8 8 -8 238 0 246 9 9 124 -103 124
+-121z m87 -69 l-67 -68 0 135 0 135 67 -68 68 -67 -68 -67z m-605 -372 c111
+-76 114 -223 7 -300 -40 -30 -46 -31 -141 -31 l-98 0 0 181 0 181 99 -4 c83
+-3 104 -7 133 -27z m238 -151 l0 -180 -50 0 -50 0 0 173 c0 96 3 177 7 180 3
+4 26 7 50 7 l43 0 0 -180z m-1498 -333 c21 -11 50 -38 65 -60 36 -52 38 -145
+4 -200 -35 -57 -101 -91 -175 -91 -34 0 -72 6 -86 13 -47 25 -89 74 -106 123
+-14 43 -14 53 0 101 14 48 35 75 89 117 43 32 147 31 209 -3z m358 -22 c0 -45
+0 -45 -35 -45 l-35 0 0 -140 0 -140 -50 0 -50 0 0 140 0 140 -35 0 c-35 0 -35
+0 -35 45 l0 45 120 0 120 0 0 -45z m941 8 c24 -24 32 -40 33 -71 1 -48 -18
+-86 -50 -101 l-24 -11 55 -71 c30 -39 55 -73 55 -75 0 -2 -27 -4 -59 -4 l-60
+0 -38 62 -38 62 -5 -60 -5 -59 -47 -3 -48 -3 0 187 0 186 100 -4 c97 -4 102
+-5 131 -35z m895 -141 c35 -96 64 -178 64 -183 0 -13 -84 -11 -98 3 -7 7 -12
+20 -12 29 0 22 -20 29 -84 29 -51 0 -53 -1 -62 -32 -9 -31 -12 -33 -62 -36
+-29 -2 -52 -1 -52 2 0 8 60 169 75 203 8 17 15 35 15 41 0 5 11 35 25 66 l25
+57 51 -3 51 -3 64 -173z m171 133 c15 -25 33 -45 38 -45 6 0 22 20 37 45 27
+45 28 45 83 45 30 0 55 -3 55 -6 0 -3 -29 -47 -65 -99 l-65 -93 0 -86 0 -87
+-47 3 -48 3 -5 95 -5 95 -58 82 c-31 44 -57 84 -57 87 0 3 24 6 54 6 53 0 55
+-1 83 -45z"/>
+<path d="M880 1730 c0 -39 2 -41 26 -38 57 7 57 69 0 76 -24 3 -26 1 -26 -38z"/>
+<path d="M2155 1728 c-23 -27 -26 -39 -22 -72 17 -121 187 -108 187 14 0 56
+-36 90 -96 90 -35 0 -47 -5 -69 -32z"/>
+<path d="M1257 1679 c-20 -50 -16 -59 25 -59 27 0 30 3 24 25 -8 33 -25 75
+-29 75 -2 0 -11 -19 -20 -41z"/>
+<path d="M1600 1668 l0 -98 29 0 c34 0 81 40 82 72 4 76 -21 113 -77 120 l-34
+4 0 -98z"/>
+<path d="M324 1260 c-59 -24 -72 -104 -25 -151 39 -38 87 -39 130 -3 26 21 31
+33 31 69 0 36 -5 48 -31 69 -31 26 -66 32 -105 16z"/>
+<path d="M1640 1239 c0 -38 1 -40 28 -37 47 5 39 78 -9 78 -16 0 -19 -8 -19
+-41z"/>
+<path d="M2531 1193 c-8 -21 -16 -44 -18 -50 -4 -9 6 -13 32 -13 34 0 37 2 31
+25 -8 31 -25 75 -29 75 -2 0 -9 -17 -16 -37z"/>
+</g>
+</svg>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

public/thirteen.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

server.js

@@ -0,0 +1,23 @@
+const https = require("https");
+const fs = require("fs");
+
+const next = require("next");
+const port = 3000;
+const dev = process.env.NODE_ENV !== "production";
+const hostname = "otherway.dev.fergl.ie";
+const app = next({ dev, hostname, port, dir: __dirname });
+const handle = app.getRequestHandler();
+
+const options = {
+  key: fs.readFileSync("/etc/letsencrypt/live/dev.fergl.ie/privkey.pem"),
+  cert: fs.readFileSync("/etc/letsencrypt/live/dev.fergl.ie/fullchain.pem"),
+};
+
+app.prepare().then(() => {
+  https
+    .createServer(options, (req, res) => handle(req, res))
+    .listen(port, (err) => {
+      if (err) throw err;
+      console.log(`> Ready on localhost:${port}`);
+    });
+});

src/app/globals.css

@@ -1,107 +1,3 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/app/head.tsx

@@ -1,10 +1,34 @@
 export default function Head() {
   return (
     <>
-      <title>Create Next App</title>
+      <title>Radio::Otherway</title>
       <meta content="width=device-width, initial-scale=1" name="viewport" />
-      <meta name="description" content="Generated by create next app" />
-      <link rel="icon" href="/favicon.ico" />
+      <meta
+        name="description"
+        content="Irish based radio station , broadcasting a varied selection of shows with some of the best Irish DJ talent"
+      />
+
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/site.webmanifest" />
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+      <meta name="msapplication-TileColor" content="#da532c" />
+      <meta name="theme-color" content="#ffffff" />
     </>
-  )
+  );
 }

src/app/layout.tsx

@@ -1,18 +1,23 @@
-import './globals.css'
+import "./globals.css";
+import { Inter } from "@next/font/google";
+import { NavBar } from "@/components/layout";
+
+const inter = Inter({ subsets: ["latin"] });
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      {/*
-        <head /> will contain the components returned by the nearest parent
-        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
-      */}
+    <html lang="en" data-theme="synthwave">
       <head />
-      <body>{children}</body>
+      <body className={`${inter.className} h-screen`}>
+        <NavBar />
+        <div className="-mt-[4rem] grid h-full place-items-center bg-gradient-to-br from-primary to-secondary pt-20 text-primary-content">
+          {children}
+        </div>
+      </body>
     </html>
-  )
+  );
 }

src/app/loading.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const Loading = () => {
+  return (
+    <div className="flex items-center justify-center">
+      <div
+        className="inline-block w-8 h-8 border-4 rounded-full spinner-border animate-spin"
+        role="status"
+      >
+        <span className="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  );
+};
+
+export default Loading;

src/app/page.module.css

@@ -1,271 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(33%, auto));
-  width: var(--max-width);
-  max-width: 100%;
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 34ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo,
-.thirteen {
-  position: relative;
-}
-
-.thirteen {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 75px;
-  height: 75px;
-  padding: 25px 10px;
-  margin-left: 16px;
-  transform: translateZ(0);
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  box-shadow: 0px 2px 8px -1px #0000001a;
-}
-
-.thirteen::before,
-.thirteen::after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-}
-
-/* Conic Gradient Animation */
-.thirteen::before {
-  animation: 6s rotate linear infinite;
-  width: 200%;
-  height: 200%;
-  background: var(--tile-border);
-}
-
-/* Inner Square */
-.thirteen::after {
-  inset: 0;
-  padding: 1px;
-  border-radius: var(--border-radius);
-  background: linear-gradient(
-    to bottom right,
-    rgba(var(--tile-start-rgb), 1),
-    rgba(var(--tile-end-rgb), 1)
-  );
-  background-clip: content-box;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .thirteen::before {
-    animation: none;
-  }
-
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile and Tablet */
-@media (max-width: 1023px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo,
-  .thirteen img {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}

src/app/page.tsx

@@ -1,91 +1,24 @@
-import Image from 'next/image'
-import { Inter } from '@next/font/google'
-import styles from './page.module.css'
+const getData = async () => {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/api/shows/upcoming`
+  );
+  return res.json();
+};
 
-const inter = Inter({ subsets: ['latin'] })
-
-export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-        <div className={styles.thirteen}>
-          <Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
-        </div>
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>Explore the Next.js 13 playground.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
+export default async function Home() {
+  const results = await getData();
+  return results.events.length === 0 ? (
+    <h1>No upcoming events</h1>
+  ) : (
+    <div>
+      <h1>Upcoming Radio Otherway Shows</h1>
+      {results.events.map((r: any) => (
+        <>
+          <div className="">
+            <span>{r.summary}</span>
+          </div>
+        </>
+      ))}
+    </div>
+  );
 }

src/components/layout/NavBar.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { BiLogInCircle } from "react-icons/bi";
+const Navbar = () => {
+  return (
+    <div className="sticky top-0 z-30 flex h-16 w-full justify-center bg-base-100 bg-opacity-90 text-base-content shadow-sm backdrop-blur transition-all duration-100">
+      <nav className="navbar w-full">
+        <div className="navbar-start">
+          <div className="dropdown">
+            <label tabIndex={0} className="btn-ghost btn lg:hidden">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h8m-8 6h16"
+                />
+              </svg>
+            </label>
+            <ul
+              tabIndex={0}
+              className="dropdown-content menu rounded-box menu-compact mt-3 w-52 bg-base-100 p-2 shadow"
+            >
+              <li>
+                <a className="btn-ghost drawer-button btn normal-case">
+                  Item 1
+                </a>
+              </li>
+              <li>
+                <a className="btn-ghost drawer-button btn normal-case">
+                  Item 3
+                </a>
+              </li>
+            </ul>
+          </div>
+          <a className="btn-ghost btn text-xl normal-case">Radio::Otherway</a>
+        </div>
+        <div className="navbar-center hidden lg:flex">
+          <ul className="menu menu-horizontal px-1">
+            <li>
+              <a>Coming Up</a>
+            </li>
+            <li>
+              <a>Subscribe</a>
+            </li>
+          </ul>
+        </div>
+        <div className="navbar-end">
+          <a className="btn gap-4">
+            <BiLogInCircle className="inline-block h-5 w-5 stroke-current md:h-6 md:w-6" />
+            <span>Login</span>
+          </a>
+        </div>
+      </nav>
+    </div>
+  );
+};
+
+export default Navbar;

src/components/layout/index.ts

@@ -0,0 +1,3 @@
+import NavBar from "./NavBar";
+
+export { NavBar };

src/pages/api/shows/upcoming.ts

@@ -0,0 +1,46 @@
+// https://www.googleapis.com/calendar/v3/calendars/calendarId/events
+
+import { NextApiRequest, NextApiResponse } from "next";
+
+const { google } = require("googleapis");
+const GOOGLE_PRIVATE_KEY = process.env.GOOGLE_CALENDAR_CREDENTIALS_PRIVATE_KEY;
+const GOOGLE_CLIENT_EMAIL =
+  process.env.GOOGLE_CALENDAR_CREDENTIALS_CLIENT_EMAIL;
+const GOOGLE_PROJECT_NUMBER = process.env.GOOGLE_CALENDAR_PROJECT_ID;
+const GOOGLE_CALENDAR_ID = process.env.GOOGLE_CALENDAR_ID;
+const SCOPES = ["https://www.googleapis.com/auth/calendar"];
+
+const jwtClient = new google.auth.JWT(
+  GOOGLE_CLIENT_EMAIL,
+  null,
+  GOOGLE_PRIVATE_KEY,
+  SCOPES
+);
+const calendar = google.calendar({
+  version: "v3",
+  project: GOOGLE_PROJECT_NUMBER,
+  auth: jwtClient,
+});
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  calendar.events.list(
+    {
+      calendarId: GOOGLE_CALENDAR_ID,
+      timeMin: new Date().toISOString(),
+      maxResults: 10,
+      singleEvents: true,
+      orderBy: "startTime",
+    },
+    (error: any, result: any) => {
+      if (error) {
+        res.send(JSON.stringify({ error: error }));
+      } else {
+        if (result.data.items.length) {
+          res.send(JSON.stringify({ events: result.data.items }));
+        } else {
+          res.send(JSON.stringify({ message: "No upcoming events found." }));
+        }
+      }
+    }
+  );
+}

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+};