Reading and Supporting Markdown Content
In this lesson, we'll learn how we can support Markdown content by switching our movies from HTML to Markdown. To do this, we'll make use of the DimerApp Markdown package.
- Author
- Tom Gobich
- Published
- Jan 27
- Duration
- 4m 32s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Reading and Supporting Markdown Content
-
[music]
-
Now, HTML is one perfectly valid way to store long-form versions of text,
-
which we're using to save information about our movie's details.
-
Alternatively, though, we could be using something called Markdown.
-
Within Markdown, HTML is perfectly valid, and there's also a bunch of different
-
extensibility options that you can add into the Markdown file, parsing,
-
to parse it out in various different ways.
-
So let's go ahead and learn how we can swap our movie details from HTML
-
over to Markdown, ingest it into our route, and display it within our
-
Edge files instead of the raw HTML that we have currently.
-
So to start with, let's go ahead and switch our movies over to Markdown files.
-
So we'll just replace HTML with MD, which stands for Markdown,
-
within each one of these. So MD here, and lastly, MD there.
-
We could leave the HTML inside of here as is, but let's go ahead and actually
-
switch it over to using Markdown annotations.
-
So for an h1, that's just a single hash followed by a space.
-
We can get rid of the ending tag there, and everything by default will be a paragraph.
-
So we can get rid of the p tags here.
-
Lastly, let's just remove the indent. Cool.
-
I'm just going to go ahead and copy all of the text, since it's all the same
-
throughout our various movies. The only thing that changes is the heading,
-
so we'll give this a save. Let's jump into our next movie.
-
I'm just going to paste in all of the text and replace our h1 tag with Markdown,
-
and let's do the same thing in our last movie.
-
So get rid of the h1 tag, add our hash, and replace the paragraph.
-
Cool. So our movies are actually transferred over now, so let's jump back into
-
our routes, because we need to change the actual extension here as well.
-
So this will change from HTML to Markdown, or MD.
-
At this point in time, we can go ahead and give the file a save,
-
and try to render it inside of the browser. So let's jump back into our browser,
-
and let's jump into one of our movies. So you can see we still have the hash in here,
-
designating that this is a heading. So currently, the Markdown is not being
-
parsed in any way, and it's just displaying the raw text that we have within our files.
-
So what we need to do is add in a Markdown parser.
-
So let's go ahead and hide our browser back away, and let's go ahead and hide
-
our text editor too, and get back to our terminal. Let's stop our server
-
by holding Ctrl+C. Let's clear out our terminal, and let's install
-
a dependency called dimer-app/markdown.
-
So let's do npm i dimer-app/markdown.
-
This package provides us a Markdown parser, so it's going to take the Markdown
-
as we have it, allow us to define any parsing mechanisms
-
that we may want to interject within the system, and then it will
-
parse it out to raw HTML for us, so that we can display it within
-
our underlying page. In addition to that, this package is also written
-
by Harman Deverk, who is the creator for AdonisJS, so the APIs
-
will play nicely together and be relatively the same.
-
So let's go ahead and give this an install, and let's boot back up our server.
-
So npm run dev there. Let's go ahead and bring our text editor back up, and it's after
-
we actually read the file from our system that we want to use
-
the parser. So instead of calling the result here our movie,
-
let's now call this our file. Next let's go ahead and import the packages
-
that we're going to need to properly parse our Markdown from that package that we installed.
-
So let's do import, and we're going to need to extract out a class called
-
MarkdownFile, and that will come from @dimerapp/markdown.
-
We're also going to need a utility function, so let's
-
import to HTML, and that's going to come from
-
@dimerapp/markdown/utils.
-
Cool, so let's go ahead and scroll back down, and let's make use of these.
-
So we want to pass our file to the Markdown file, and that will return back a
-
Markdown instance that we can then process. So let's go ahead and create a new
-
instance of MarkdownFile, providing it in our file contents.
-
Then we'll want to go ahead and await md.process
-
so that it can process our Markdown contents. Lastly,
-
we can do const movie now equals to
-
HTML, passing it in our Markdown file instance
-
of md. So now if we give this a save, we can jump back into our browser,
-
and we see object object. Okay, so we missed
-
one step. Let's see if we can figure out what that step is.
-
Let's jump into our page, and since we're getting back object object,
-
it's trying to stringify the underlying object, which is why we see that
-
object object annotation. We can have EdgeJS actually plop the
-
contents of the object onto the page by doing
-
double curly braces, and we can now use a utility called inspect
-
to inspect the underlying object. So it's just going to flatten it out
-
and print it out as is on the page. So let's provide it our
-
movie there, give this a save, jump back into our browser, and
-
here's the result of our inspect call. So you can see the underlying
-
HTML that we're parsing out from our Markdown file is actually
-
added onto an additional property called contents.
-
So if we hide away our browser, jump back into our routes, all that we
-
need to do is chain off of our two HTML an additional
-
call to contents. Give this a save now, jump back into our
-
browser, give it a refresh, and voila! Now we're seeing the
-
parsed HTML from our underlying Markdown file. So let's hide
-
away our browser again. Let's jump back into that show page, get rid
-
of our inspect call, open our browser back up, inspect's gone away,
-
and now we can jump between our movies. So we're currently in
-
my awesome movie, let's jump over to another awesome movie, and now
-
that looks a-okay too. So we're good to go.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!