/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", a: "a", h2: "h2", ol: "ol", li: "li", code: "code", em: "em", pre: "pre", span: "span", h3: "h3", img: "img", div: "div", svg: "svg", path: "path", h5: "h5" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["I have here a Hanami application listing all my Hanami Mastery episodes and I want to allow managing them from the browser. If you wonder why I need this, check out ", _jsx(_components.a, { href: "/episodes/38-hanami-mastery-app", children: "episode 38" }), " when I've explained that in detail."] }), "\n", _jsx(_components.p, { children: "The thing is, these episodes' data is pulled out from my DB, but I host my content using the static site generator. The source of truth database is a GitHub repository and markdown file system!" }), "\n", _jsx(_components.p, { children: "All our content is open-sourced, and everyone can contribute to it, by writing new episodes, or updating the existing ones." }), "\n", _jsx(_components.p, { children: "This is part of our mission to bring value to Ruby community together, and I don't want to use private postgres database for this." }), "\n", _jsx(_components.p, { children: "This is why I will write the GitHub integration today, which will allow me to pull data from the repository and sync properly with my local database, from where I can preview drafts, pull cover images from google drive, and fill in missing data automatically." }), "\n", _jsxs(_components.p, { children: ["The integration with Google Drive is already in Place, as we shown in ", _jsx(_components.a, { href: "43-connect-with-google-drive.md", children: "episode 42" }), " so Github integration is really, the last piece to make this application actually useful."] }), "\n", _jsx(_components.h2, { id: "scope", children: "Scope" }), "\n", _jsx(_components.p, { children: "Our goal for today is to" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Connect to the Github API" }), "\n", _jsx(_components.li, { children: "Pull the list of all episodes we have published or drafted out." }), "\n", _jsx(_components.li, { children: "For each episode, pull the content of it's file." }), "\n", _jsx(_components.li, { children: "Fill database records with all the data we get." }), "\n"] }), "\n", _jsx(_components.p, { children: "Next time I'm going to extend that by making a commit after the change, but pulling data is already enough for an episode, so let's dive straight into it." }), "\n", _jsx(_components.h2, { id: "fetch-action", children: "Fetch Action" }), "\n", _jsxs(_components.p, { children: ["To have a clear way of triggering my fetching mechanism, I'm going to add a ", _jsx(_components.code, { children: "button" }), " to my ", _jsx(_components.a, { href: "https://htmx.org/", children: "HTMX template" }), ", which will send the ", _jsx(_components.em, { children: "ajax" }), " request to the server, and will prepend my list with the HTML returned by the server."] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "section" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"section\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"button is-primary\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "hx-post" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"episodes/fetch\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "hx-swap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"beforebegin\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "hx-target" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"#recent-episodes\"" }), ">"] }), "Fetch drafts\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Calling this will do nothing at the moment because I have no action defined yet. Let me add it using the built-in generator." }), "\n", _jsx(_components.h3, { id: "fetch-action-1", children: "Fetch Action" }), "\n", _jsx(_components.p, { children: "To the action shell command, I'll add a few parameters, setting its slice to main, and the HTTP method." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-shell", children: "hanami generate action episodes.fetch --slice=main --http=post\n" }) }), "\n", _jsx(_components.p, { children: "I can visit the routes file to verify if everything is set as expected. I can see the POST method here, as well as the correct container key, so I can move forward to the action file." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-ruby", children: [_jsx(_components.span, { className: "hljs-comment", children: "# config/routes.rb" }), "\npost ", _jsx(_components.span, { className: "hljs-string", children: "'/episodes/fetch'" }), ", ", _jsx(_components.span, { className: "hljs-symbol", children: "to:" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'episodes.fetch'" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "The action is generated in the way it returns a class name by default, which I'll now wrap with the HTML tag for a table row and cell." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-ruby", children: [_jsx(_components.span, { className: "hljs-comment", children: "# frozen_string_literal: true" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "module" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Main" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "module" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Actions" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "module" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Episodes" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Fetch" }), " < ", _jsx(_components.span, { className: "hljs-title class_ inherited__", children: "Main::Action" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "def" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "handle" }), "(", _jsx(_components.span, { className: "hljs-params", children: "request, response" }), ")\n response.body = ", _jsxs(_components.span, { className: "hljs-string", children: ["\"", _jsxs(_components.span, { className: "hljs-subst", children: ["#{", _jsx(_components.span, { className: "hljs-variable language_", children: "self" }), ".", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), ".name}"] }), "\""] }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "end" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "end" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "end" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "end" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "end" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "This now should prepend my episodes list with a new row each time I'm clicking the button." }), "\n", _jsx(_components.p, { children: "Works!" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/episodes/45/episodes-list-unstyled.png", alt: "Unstyled episodes from DB" }) }), "\n", _jsx(_components.h3, { id: "setting-the-view", children: "Setting the view" }), "\n", _jsx(_components.p, { children: "Having that, I can tweak the action further, to render the actual template using a dedicated view object." }), "\n", _jsx(_components.p, { children: "Just to show you I'll fetch the recent episodes from the database using the repository and pass the result to the view." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-ruby", children: [_jsx(_components.span, { className: "hljs-comment", children: "# slices/main/actions/episodes/fetch.rb" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "def" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "handle" }), "(", _jsx(_components.span, { className: "hljs-params", children: "request, response" }), ")\n episodes = repo.recent.limit(", _jsx(_components.span, { className: "hljs-number", children: "1" }), ")\n response.body = response.render view, ", _jsx(_components.span, { className: "hljs-symbol", children: "episodes:" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "end" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "The view for this will be pretty simple, but I'll expose episodes to the template, so I can use them for rendering. Also, I'm disabling here the layout, because this HTML will be injected into an existing one." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-ruby", children: [_jsx(_components.span, { className: "hljs-comment", children: "# slices/main/views/episodes/fetch.rb" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "module" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Main" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "module" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Views" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "module" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Episodes" }), "\n ", _jsx(_components.span, { className: "hljs-comment", children: "# Renders show view." }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Fetch" }), " < ", _jsx(_components.span, { className: "hljs-title class_ inherited__", children: "Main::View" }), "\n config.layout = ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), "\n expose ", _jsx(_components.span, { className: "hljs-symbol", children: ":episodes" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "end" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "end" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "end" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "end" }), "\n\n"] }) }), "\n", _jsx(_components.p, { children: "Then finally, I want to prepare the template, where I loop over the episodes and construct their rows in the HTML document." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: ["<%- episodes.each do |episode| %>\n", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "tr" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "th" }), ">"] }), "<%= episode.source_id %>", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "td" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "img" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"<%= episode.cover[:small]%>\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"is6b9\"" }), " />"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "td" }), ">"] }), "<%= episode.title %>", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "td" }), ">"] }), "Edit Button", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n<%- end %>\n"] }) }), "\n", _jsxs(_components.p, { children: ["For explaining how this part works, I recommend you to go back to visit ", _jsx(_components.a, { href: "/episodes/2-listing-articles-with-hanami-view", children: "episode 2" }), " of Hanami Mastery, where I've described more about the view rendering in Hanami apps."] }), "\n", _jsx(_components.p, { children: "For today, let's check how it behaves." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/episodes/45/episodes-list-styled.png", alt: "Styled episodes from DB" }) }), "\n", _jsx(_components.p, { children: "When I click, on top of the list, the last saved episode is prepended again, showing duplicates. That's an amazing first step, but what we want to do, is to fetch all new episodes from Github, and this is what we'll do now." }), "\n", _jsxs(_components.div, { className: "admonition-content admonition-tip", children: [_jsxs(_components.div, { className: "admonition-label", children: [_jsx(_components.span, { children: _jsx(_components.svg, { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "16", viewBox: "0 0 14 16", children: _jsx(_components.path, { fill: "currentColor", d: "M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" }) }) }), _jsx(_components.h5, { id: "subscribe-to-hanami-mastery-pro", children: "Subscribe to Hanami Mastery PRO" })] }), _jsxs(_components.p, { children: ["This is only a preview of the episode. ", _jsx(_components.a, { href: "https://pro.hanamimastery.com/hanami-mastery-pro", children: "Subscribe to Hanami Mastery PRO" }), " to see the full video, and access several other premium resources. Thanks for watching, and see you in the next one!"] })] }), "\n", _jsx(_components.h2, { id: "thanks", children: "Thanks" }), "\n", _jsx(_components.p, { children: "That's all for today, thank you for watching, and see you in the next episode!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

Application error: a client-side exception has occurred (see the browser console for more information).