Create Empty Cards Page With Placeholder Text

by ADMIN 46 views

=====================================================

Introduction

In this article, we will guide you through the process of creating an empty Cards page with placeholder text. This feature is still in development, and we will use a placeholder text to indicate that it is not yet available. We will also cover the necessary steps to replace the "Cards - Coming soon!" placeholder text in the left side nav with a real link "Cards" that directs to the new Cards page.

Additional Cards Page Instructions

Before we begin, let's review the additional instructions for the Cards page:

Workflow

To create the empty Cards page with placeholder text, follow these steps:

  1. Create a new branch from develop (follow steps in the README)
  2. Make your changes, making small commits as you go to mark your progress
  3. Ask questions in the shared dev channel on Discord or DM @AbigailDawson
  4. When your work is complete, submit a PR based on the develop branch

Step 1: Create a New Branch

To start, create a new branch from the develop branch. This will allow you to work on the new feature without affecting the main codebase. Follow the steps in the README to create a new branch.

Create a New Branch Command

git checkout -b new-branch develop

Step 2: Make Changes

Next, make the necessary changes to create the empty Cards page with placeholder text. This includes creating the new page, adding the placeholder text, and ensuring that the left side nav and top right profile icon are still visible.

Create New Page

Create a new page for the Cards feature. This can be done by creating a new file in the pages directory.

touch pages/cards.vue

Add Placeholder Text

Add the placeholder text to the new page. For now, use something like "This feature is still in development. Check back later!".

<!-- pages/cards.vue -->

<template>
  <div>
    <h1>This feature is still in development. Check back later!</h1>
  </div>
</template>

Ensure Left Side Nav and Top Right Profile Icon are Visible

Ensure that the left side nav and top right profile icon are still visible on the Cards page. This can be done by adding the necessary HTML and CSS to the new page.

<!-- pages/cards.vue -->

<template>
  <div>
    <nav>
      <!-- Left side nav -->
    </nav>
    <div>
      <h1>This feature is still in development. Check back later!</h1>
    </div>
    <div>
      <!-- Top right profile icon -->
    </div>
  </div>
</template>

Step 3: Replace "Cards - Coming soon!" Placeholder Text

Replace the "Cards - Coming soon!" placeholder text in the left side nav with a real link "Cards" that directs to the new Cards page.

Replace Placeholder Text Command

sed -i 's/Cards - Coming soon!/Cards/' src/components/LeftSideNav.vue

Update Left Side Nav

Update the left side nav to include the new link to the Cards page.

<!-- src/components/LeftSideNav.vue -->

<template>
  <div>
    <ul>
      <li>
        <router-link to="/cards">Cards</router-link>
      </li>
    </ul>
  </div>
</template>

Step 4: Check Navigation

Finally, check that all navigation still works as expected.

Check Navigation Command

npm run test

Conclusion

In this article, we guided you through the process of creating an empty Cards page with placeholder text. We covered the necessary steps to replace the "Cards - Coming soon!" placeholder text in the left side nav with a real link "Cards" that directs to the new Cards page. We also reviewed the additional instructions for the Cards page and provided a workflow for creating the new feature.

=====================================================

Introduction

In our previous article, we guided you through the process of creating an empty Cards page with placeholder text. We covered the necessary steps to replace the "Cards - Coming soon!" placeholder text in the left side nav with a real link "Cards" that directs to the new Cards page. In this article, we will answer some frequently asked questions about creating an empty Cards page with placeholder text.

Q&A

Q: What is the purpose of creating an empty Cards page with placeholder text?

A: The purpose of creating an empty Cards page with placeholder text is to indicate that the feature is still in development. This allows users to know that the feature is not yet available and to check back later.

Q: What is the difference between a placeholder text and a real link?

A: A placeholder text is a temporary text that is used to indicate that a feature is not yet available. A real link, on the other hand, is a link that directs to a real page or feature.

Q: How do I replace the "Cards - Coming soon!" placeholder text in the left side nav with a real link "Cards"?

A: To replace the "Cards - Coming soon!" placeholder text in the left side nav with a real link "Cards", you need to update the LeftSideNav.vue component. You can do this by running the following command:

sed -i 's/Cards - Coming soon!/Cards/' src/components/LeftSideNav.vue

Q: What is the workflow for creating the new feature?

A: The workflow for creating the new feature is as follows:

  1. Create a new branch from develop (follow steps in the README)
  2. Make your changes, making small commits as you go to mark your progress
  3. Ask questions in the shared dev channel on Discord or DM @AbigailDawson
  4. When your work is complete, submit a PR based on the develop branch

Q: How do I check that all navigation still works as expected?

A: To check that all navigation still works as expected, you need to run the following command:

npm run test

Q: What is the importance of using a wireframe as an example?

A: Using a wireframe as an example is important because it provides a visual representation of the layout and design of the new feature. This helps to ensure that the new feature is consistent with the rest of the application.

Q: How do I ensure that the left side nav and top right profile icon are still visible on the Cards page?

A: To ensure that the left side nav and top right profile icon are still visible on the Cards page, you need to add the necessary HTML and CSS to the new page.

Q: What is the purpose of using a placeholder text like "This feature is still in development. Check back later!"?

A: The purpose of using a placeholder text like "This feature is still in development. Check back later!" is to provide a clear indication that the feature is not yet available and to encourage users to check back later.

Conclusion

In this article, we answered some frequently asked questions about creating an empty Cards page with placeholder text. We covered purpose of creating an empty Cards page with placeholder text, the difference between a placeholder text and a real link, and the workflow for creating the new feature. We also provided answers to questions about checking navigation, using a wireframe as an example, and ensuring that the left side nav and top right profile icon are still visible on the Cards page.