From 921f5ee883f1226722f49dd051f28db6a42ea3b9 Mon Sep 17 00:00:00 2001 From: Avinal Kumar Date: Mon, 30 Jan 2023 22:25:21 +0530 Subject: [PATCH] add meet page and update image style Signed-off-by: Avinal Kumar --- package-lock.json | 38 +++++++++++++++++---- package.json | 1 + src/Pages/Meet.elm | 9 +++-- src/Utils/Constants.elm | 3 +- src/interop.js | 2 +- src/web-components/Calcom.js | 54 ++++++++++++++++++++++++++++++ src/web-components/MarkedRender.js | 4 +++ tailwind.config.js | 5 ++- 8 files changed, 105 insertions(+), 11 deletions(-) create mode 100644 src/web-components/Calcom.js diff --git a/package-lock.json b/package-lock.json index 672c2dc..65fc723 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "npm": "^9.3.1" }, "devDependencies": { + "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/typography": "^0.5.8", "elm-land": "^0.18.1", "tailwindcss": "^3.2.4" @@ -223,6 +224,15 @@ "node": ">= 8" } }, + "node_modules/@tailwindcss/aspect-ratio": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz", + "integrity": "sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==", + "dev": true, + "peerDependencies": { + "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" + } + }, "node_modules/@tailwindcss/typography": { "version": "0.5.8", "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz", @@ -305,7 +315,8 @@ "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true }, "node_modules/binary-extensions": { "version": "2.2.0", @@ -320,6 +331,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -406,7 +418,8 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true }, "node_modules/cross-spawn": { "version": "6.0.5", @@ -925,7 +938,8 @@ "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true }, "node_modules/fsevents": { "version": "2.3.2", @@ -951,6 +965,7 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -994,6 +1009,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -1002,7 +1018,8 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true }, "node_modules/is-binary-path": { "version": "2.1.0", @@ -1061,7 +1078,8 @@ "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true }, "node_modules/lilconfig": { "version": "2.0.6", @@ -1122,6 +1140,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -1133,6 +1152,7 @@ "version": "1.2.7", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", + "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -1141,6 +1161,7 @@ "version": "0.5.6", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "dev": true, "dependencies": { "minimist": "^1.2.6" }, @@ -3839,6 +3860,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, "dependencies": { "wrappy": "1" } @@ -3847,6 +3869,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -4154,6 +4177,7 @@ "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true, "bin": { "semver": "bin/semver" } @@ -4387,6 +4411,7 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "dev": true, "dependencies": { "isexe": "^2.0.0" }, @@ -4397,7 +4422,8 @@ "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true }, "node_modules/xtend": { "version": "4.0.2", diff --git a/package.json b/package.json index 3169523..caf8d5f 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "devDependencies": { + "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/typography": "^0.5.8", "elm-land": "^0.18.1", "tailwindcss": "^3.2.4" diff --git a/src/Pages/Meet.elm b/src/Pages/Meet.elm index 725be2b..a8354a0 100644 --- a/src/Pages/Meet.elm +++ b/src/Pages/Meet.elm @@ -1,12 +1,17 @@ module Pages.Meet exposing (page) import Components.Footer exposing (footerLinksToSide) -import Html +import Html +import Html.Attributes exposing (class, id) import View exposing (View) page : View msg page = { title = "Schedule a meet with me" - , body = [ footerLinksToSide, Html.node "calcom" [] [] ] + , body = + [ Html.div [ class "aspect-square flex items-center justify-center flex-col h-screen m-2" ] + [ Html.node "cal-com" [ id "calcom-widget", class "w-full p-2 " ] [] ] + , footerLinksToSide + ] } diff --git a/src/Utils/Constants.elm b/src/Utils/Constants.elm index 6e42f8d..99eec29 100644 --- a/src/Utils/Constants.elm +++ b/src/Utils/Constants.elm @@ -20,7 +20,7 @@ footerLinks = [ { text = "About", url = "/pages/about-me" } , { text = "Blog", url = "/posts" } , { text = "Projects", url = "/pages/projects" } - , { text = "GSoC", url = "https://gsoc.avinal.space" } + , { text = "GSoC", url = "/posts/gsoc" } ] @@ -31,6 +31,7 @@ iconLinks = , { url = "https://instagram.com/avinal.k", icon = "fa-brands fa-instagram" } , { url = "https://twitter.com/Avinal_", icon = "fa-brands fa-twitter" } , { url = "mailto:ripple@avinal.space", icon = "fa-solid fa-envelope" } + , { url = "/meet", icon = "fa-solid fa-video" } ] diff --git a/src/interop.js b/src/interop.js index fc76f15..9bb115a 100644 --- a/src/interop.js +++ b/src/interop.js @@ -1,4 +1,4 @@ import "./web-components/MarkedRender.js"; - +import "./web-components/Calcom.js"; export const onReady = ({ app, env }) => {}; diff --git a/src/web-components/Calcom.js b/src/web-components/Calcom.js new file mode 100644 index 0000000..75b7533 --- /dev/null +++ b/src/web-components/Calcom.js @@ -0,0 +1,54 @@ +customElements.define( + "cal-com", + class extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + (function (C, A, L) { + let p = function (a, ar) { + a.q.push(ar); + }; + let d = C.document; + C.Cal = + C.Cal || + function () { + let cal = C.Cal; + let ar = arguments; + if (!cal.loaded) { + cal.ns = {}; + cal.q = cal.q || []; + d.head.appendChild(d.createElement("script")).src = A; + cal.loaded = true; + } + if (ar[0] === L) { + const api = function () { + p(api, arguments); + }; + const namespace = ar[1]; + api.q = api.q || []; + typeof namespace === "string" + ? (cal.ns[namespace] = api) && p(api, ar) + : p(cal, ar); + return; + } + p(cal, ar); + }; + })(window, "https://app.cal.com/embed/embed.js", "init"); + Cal("init", { origin: "https://app.cal.com" }); + + Cal("inline", { + elementOrSelector: "#calcom-widget", + calLink: "avinal", + }); + Cal("ui", { + theme: "dark", + styles: { + branding: { brandColor: "#009fb1" }, + }, + hideEventTypeDetails: false, + }); + } + } +); diff --git a/src/web-components/MarkedRender.js b/src/web-components/MarkedRender.js index e0e6fe6..86808a4 100644 --- a/src/web-components/MarkedRender.js +++ b/src/web-components/MarkedRender.js @@ -41,6 +41,10 @@ customElements.define( return `

${text}

`; }; + renderer.image = (href, title, text) => { + return `${text}`; + }; + marked.setOptions({ renderer: renderer, highlight: function (code, lang) { diff --git a/tailwind.config.js b/tailwind.config.js index 4352425..62de895 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,5 +4,8 @@ module.exports = { theme: { extend: {}, }, - plugins: [require("@tailwindcss/typography")], + plugins: [ + require("@tailwindcss/typography"), + require("@tailwindcss/aspect-ratio"), + ], };