Blog: Tags

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.8.0", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Return Home Report An Issue

Blog Tags

You’re going to add Tags to your existing Blog project.

Each blog post has a many-to-many association with tags.

Tags should have :name field describing the type of tag such as "tutorial", "elixir", "testing", etc.

classDiagram
  class Tag {
    name: :string
  }

Blogs and tags should be associated through a join table blog_tags.

classDiagram
  class BlogTag {
    blog_id: :id
    tag_id: :id
  }

Tag Requirements

Ensure you:

• Can perform standard CRUD operations for tags.
• Can associate a blog with a tag using a multiple select when you create or update a blog.
• Include a list of a blog’s tags on the blog show page.

Bonus: Search By Tag

Add the ability to see posts for a particular tag.

For example, you might include a show blogs by tag page which displays all blogs that belong to a specified tag on the "/blogs/tags/:id route where :id is the id of a tag.

Alternatively, you might create a form on the book index page to search for blogs by tag.

Mark As Completed

file_name = Path.basename(Regex.replace(~r/#.+/, __ENV__.file, ""), ".livemd")

save_name =
  case Path.basename(__DIR__) do
    "reading" -> "blog_tags_reading"
    "exercises" -> "blog_tags_exercise"
  end

progress_path = __DIR__ <> "/../progress.json"
existing_progress = File.read!(progress_path) |> Jason.decode!()

default = Map.get(existing_progress, save_name, false)

form =
  Kino.Control.form(
    [
      completed: input = Kino.Input.checkbox("Mark As Completed", default: default)
    ],
    report_changes: true
  )

Task.async(fn ->
  for %{data: %{completed: completed}} <- Kino.Control.stream(form) do
    File.write!(
      progress_path,
      Jason.encode!(Map.put(existing_progress, save_name, completed), pretty: true)
    )
  end
end)

form

Commit Your Progress

Run the following in your command line from the curriculum folder to track and save your progress in a Git commit. Ensure that you do not already have undesired or unrelated changes by running git status or by checking the source control tab in Visual Studio Code.

$ git checkout -b blog-tags-exercise
$ git add .
$ git commit -m "finish blog tags exercise"
$ git push origin blog-tags-exercise

Create a pull request from your blog-tags-exercise branch to your solutions branch. Please do not create a pull request to the DockYard Academy repository as this will spam our PR tracker.

DockYard Academy Students Only:

Notify your teacher by including @BrooklinJazz in your PR description to get feedback. You (or your teacher) may merge your PR into your solutions branch after review.

If you are interested in joining the next academy cohort, sign up here to receive more news when it is available.

Up Next