Dynamic Demo Routes for Components

Next, we’re going to get our routes set up for all the different components we’re going to build throughout this series.

Defining the Dynamic Route

First, let’s navigate into our start/routes.ts file, and define a route for our component pages. These are the pages we’ll use to demo the various components we’ll be building and their styles and variants.

Route.get('/components/:name', async ({ params, view }) => {
  return view.render(`pages/components/${params.name}`)
}).as('components')

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  
start
routes.ts

In this route, :name is a route parameter that will allow us to specify the component name dynamically. It’ll then map to a page in our project, which we’ll define in a moment.

Managing Supported Components

To keep track of the various components we’ll be adding, and to simplify listing them out, let’s create an array directly under our imports within our start/routes.ts file listing them out. Since button will be the first component we tackle, let’s go ahead and add it to this list.

const components = [
  'button'
]

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  
start
routes.ts

As we create components throughout this series, we’ll add them here.

Listing Components on our Welcome Page

Next, let’s go ahead and list out our components on the welcome page so that we can easily navigate to the component’s demo page.

First, we’ll want to pass the components array we created in the last step into the state of our welcome page, so we’ll have access to it.

const components = [
  'button'
]

Route.get('/', async ({ view }) => {
   return view.render('pages/welcome')
   return view.render('pages/welcome', { components })
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  
start
routes.ts

Then, we’ll dive into our welcome page, and list them out.

@layouts.app({ title: 'Home' })

  <strong>Components</strong>
  <nav class="flex flex-col gap-1.5">
    @each (name in components)
      <a href="{{ route('components', { name }) }}">
        {{ titleCase(name) }}
      </a>
    @endeach
  </nav>

@end

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  
resources
views
welcome.edge

Inside our app layout, for the page content, we have a nav element listing each of our components. Then, we have a link pointing to the components route we created at the beginning of this lesson. For this link, we’re passing the component’s name as the :name param for this route.

When we display the name, we’re using the titleCase global helper method from EdgeJS to transform this text to title case, converting “button” to “Button”.

Currently, our link won’t work, because we haven’t yet created our button page. Let’s do that next.

Creating Component Pages

To make our dynamic routing work, we’ll need to ensure we have a page per component listed inside our components array within our start/routes.ts file.

To start, let’s create a new directory inside of pages called components with a new file inside of it called buttons.

mkdir resources/views/pages/components
touch resources/views/pages/components/button.edge

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

We now have a page located where our view.render call on our dynamic components route is expecting it. Next, let’s put some boilerplate markup in there to get it ready for our first button component.

@layouts.app({ title: request.params().name })

  <h3 class="font-bold">Base Button</h3>
  <div class="mb-8 space-x-3 space-y-3">
    Button goes here
  </div>

@end

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  
resources
views
pages
components
button.edge

As we build out our button component, we’ll place various demos on this page to showcase what the base button looks like, as well as its different variants, sizes, and styles.

With this, if we visit our welcome page we should now see a list containing a link with our, currently singular, button component. If we click that link, we should be taken to the page we just created above showing our “Base Button” placeholder.