Fire Reddit Starter Components

1. ReadMe.Md

Instruction

All raw components markup of laranuxt ninja project

• Static Files
• Styles Files

components--Comment.vue

<template>
  <div class="flex w-full mb-2">
    <!-- voting start -->
    <div class="vote">
      <button
        class="arrow arrow--up-vote"
        :class="{ 'arrow--up-vote--voted': true }"
      ></button>
      <button
        class="arrow arrow--down-vote"
        :class="{ 'arrow--down-vote--voted': false }"
      ></button>
    </div>
    <!-- voting end -->

    <div class="mb-4 ml-5">
      <a class="font-bold" href="#"> u/rayhan </a>
      <span class="text-sm text-gray-600">
        145 point(s) ( 4 minutes ago )
      </span>
      <p class="text-xl">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolor
        pariatur reiciendis facilis placeat architecto temporibus iste et at
        dolorem velit impedit eum similique necessitatibus praesentium,
        reprehenderit quos repellat hic!
      </p>

      <div>
        <a href="#" class="mr-2 text-sm font-bold text-red-600">
          Delete
        </a>

        <a href="#" class="mr-2 text-sm font-bold text-gray-600">
          <span>Reply</span>
        </a>
      </div>
    </div>
  </div>
</template>

components--Form--Button.vue

<template>
  <button v-bind="$attrs" @click="$emit('click', $event)">
    <slot />
  </button>
</template>

<style scoped lang="scss">
button {
  @apply text-sm bg-primaryDark transition duration-300 text-white px-2 py-1 rounded uppercase;
  &:hover {
    @apply bg-opacity-75;
  }
  &[disabled] {
    background-color: gray;
    cursor: not-allowed;
  }
}
</style>

components--Form--Input.vue

<template>
  <div class="mb-2 input-component">
    <label>
      <span class="font-bold text-gray-600">
        Username
      </span>
      <input
        class="block w-full px-2 py-1 text-xl border border-red-500 focus:outline-none"
      />
      <p class="text-red-500 ">some error</p>
    </label>
  </div>
</template>

components--LayoutComponents--Footer.vue

<template>
  <footer class="text-gray-600 text-sm">
    <img
      src="~/static/images/reddit-flying-with-ballons.jpg"
      alt="reddit-cute"
    />

    <p>
      Use of this site constitutes acceptance of our
      <a href="https://old.reddit.com/help/useragreement">User Agreement</a> and
      <a href="https://old.reddit.com/help/privacypolicy">Privacy Policy</a>. ©
      2020 reddit inc. All rights reserved.
    </p>
    <p class="bottommenu">
      REDDIT and the ALIEN Logo are registered trademarks of reddit inc.
    </p>
  </footer>
</template>

<style lang="scss" scoped>
footer {
  text-align: center;
  padding: 25px 0;
  img {
    margin: auto;
    padding: 25px 0;
  }
}
</style>

components--LayoutComponents--Navbar.vue

<template>
  <nav class="navbar">
    <div class="container navbar__inner">
      <nuxt-link class="navbar__logo" to="/"></nuxt-link>

      <div class="navbar__user-menu" v-if="isloggedIn">
        Howdy
        <a class="font-bold" href="#"> /r/rayhan </a>
        <a class="text-xs text-gray-700" href="#">
          (settings)
        </a>
        <span class="font-thin">|</span>
        <a href="#" to="/notifications"> Notifications (14) </a>
        <span class="font-thin">|</span>
        <a href="#" class="cursor-pointer">Logout</a>
      </div>

      <div class="navbar__user-menu" v-else>
        Want to join?
        <button class="link">Login</button>
        or
        <button class="link">Signup</button>
        in a seconds.
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      isloggedIn: true
    };
  }
};
</script>

components--LayoutComponents--Rules.vue

<template>
  <div>
    <h3 class="text-2xl">Quick Rules:</h3>
    <ul>
      <li>
        Do not post shallow content. All posts must be directly book related,
        informative, and discussion focused.
      </li>
      <li>
        Please use a civil tone and assume good faith when entering a
        conversation.
      </li>
      <li>
        We love original content and self-posts! Thoughts, discussion questions,
        epiphanies and interesting links about authors and their work. We also
        encourage discussion about developments in the book world and we have a
        flair system.
      </li>
      <li>
        We don't allow personal recommendation posts. You can ask in our Weekly
        Recommendation Thread, consult our Suggested Reading or What to Read
        page, or post in /r/suggestmeabook.
      </li>
    </ul>
  </div>
</template>

<style scoped>
div {
  margin-top: 25px;
}
ul li {
  margin-bottom: 15px;
}
</style>

components--LayoutComponents--Sidebar.vue

<template>
  <div>
    <LoginWidget />

    <div>
      <nuxt-link class="mb-4 submitter-button" to="/new">
        <span>Submit now</span>
        <div class="nub"></div>
      </nuxt-link>
    </div>

    <img
      src="~/static/images/toto-logo-1599689481-30467661479.png"
      alt="reddit"
      class="my-4"
    />

    <Rules />
  </div>
</template>

components--Thread.vue

<template>
  <div v-bind="$attrs">
    <div class="thread">
      <div class="thread__votes">
        <button
          class="arrow arrow--up-vote"
          :class="{ 'arrow--up-vote--voted': true }"
        ></button>

        <div class="text-sm font-bold text-gray-600">14</div>

        <button
          class="arrow arrow--down-vote"
          :class="{
            'arrow--down-vote--voted': false
          }"
        ></button>
      </div>

      <div class="thread__inner">
        <div class="thread__icon">
          <a
            href="#"
            class="block logos"
            :class="{
              'logos--logo-link': true,
              'logos--logo-post': false
            }"
          ></a>
        </div>

        <div>
          <a href="#" class="mt-0 text-xl">
            Lorem ipsum dolor sit amet.
          </a>
          <a href="#" target="_blank" class="text-sm text-gray-500">
            (google.com)
          </a>

          <div class="flex">
            <button
              class="mr-2 icons icons--icon-post"
              @click="expanded = !expanded"
            ></button>

            <div>
              <p class="text-sm text-gray-600">
                submitted 5 minutes ago by
                <a href="#" class="font-bold text-gray-600">
                  u/rayhan
                </a>
              </p>

              <div>
                <span class="mr-3 text-sm font-bold text-gray-600">
                  74 comments
                </span>
                <button
                  class="mr-3 text-sm font-bold text-gray-600 hover:underline"
                >
                  Share
                </button>
                <a class="text-sm font-bold text-red-600 cursor-pointer">
                  Delete
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isLiked: false,
      isUnliked: true,
      expanded: false
    };
  }
};
</script>

components--WelcomeBanner.vue

<template>
  <section>
    <h2 class="text-2xl">Welcome to Reddit.</h2>
    <h4 class="mb-2 text-xl">
      Where a community about your favorite things is waiting for you.
    </h4>
    <Button>Button Become a Redditor </Button>
  </section>
</template>

<style scoped>
section {
  background-image: url("~static/images/welcome-banner.png");
  background-position: right;
  background-color: #fefbca;
  padding: 8px;
}
</style>

components-LoginWidget.vue

<template>
  <form
    class="flex flex-col items-end p-2 mb-3 border border-gray-600 justify-items-end"
  >
    <div class="flex">
      <input
        type="text"
        placeholder="Email"
        class="w-1/2 px-3 py-1 mr-3 border border-gray-600 focus:outline-none focus:border-primaryDark"
      />
      <input
        type="text"
        placeholder="Email"
        class="w-1/2 px-3 py-1 border border-gray-600 focus:outline-none focus:border-primaryDark"
      />
    </div>
    <div>
      <a href="#">Forgot password?</a>
      <button class="px-3 mt-2 bg-gray-200 border border-gray-600 ">
        Login
      </button>
    </div>
  </form>
</template>

components-widgets-email-status.vue

<template>
  <div class="p-3 mb-10 border-2 border-dashed rounded-sm border-primary">
    <img
      class="w-56 mx-auto"
      src="~/static/images/snoo-verify-email.png"
      alt="reddit email not varified"
    />

    <p class="my-3 text-xl">
      Your email address is not verified yet. Before submitting your first
      thread verify your email address
    </p>
    <button
      class="flex items-center justify-center w-full py-2 mt-2 space-x-3 text-white rounded bg-primaryDark"
    >
      <svg
        v-if="loading"
        class="w-5 animate-spin"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
      >
        <circle
          class="opacity-25"
          cx="12"
          cy="12"
          r="10"
          stroke="currentColor"
          stroke-width="4"
        ></circle>
        <path
          class="opacity-75"
          fill="currentColor"
          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
        ></path>
      </svg>
      <span>Resent email</span>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    };
  },
};
</script>

forgot-password.vue

<template>
  <div class="grid grid-cols-12">
    <div
      class="col-span-6 col-start-4 p-5 border-2 border-dashed border-primaryDark"
    >
      <div class="mb-3">
        <h3
          class="flex space-x-2 text-2xl font-bold uppercase text-primaryDark"
        >
          <svg
            class="w-6"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01"
            />
          </svg>
          <span>Recover your account</span>
        </h3>
        <p class="mt-3 text-xl text-gray-600">
          Forgot your account’s password or having trouble logging into your
          Team? Enter your email address and we’ll send you a recovery link.
        </p>
      </div>

      <form action="#" class="mt-5">
        <form-input placeholder="Your email address" label="Email address" />
        <form-button>Send recovery email</form-button>
      </form>
    </div>
  </div>
</template>

layouts-default.vue

<template>
  <div>
    <Navbar />
    <div class="container reddit-layout">
      <main class="reddit-layout__content">
        <Nuxt />
      </main>
      <aside class="reddit-layout__sidebar">
        <Sidebar />
      </aside>
    </div>
    <Footer />
  </div>
</template>

layouts-error.vue

<template>
  <div class="text-center my-12">
    <div>
      <img class="mx-auto" src="~/static/images/404.png" alt="" />
    </div>
    <div>
      <h2 class="text-3xl">404</h2>
      <p class="text-lg">The page you requested does not exist</p>
    </div>
  </div>
</template>

layouts-fullwidth.vue

<template>
  <main>
    <Navbar />
    <div class="container mx-auto">
      <Nuxt />
    </div>
  </main>
</template>

middlewares--guest.js

export default function({ $auth, redirect }) {
  if ($auth.loggedIn) {
    return redirect("/");
  }
}

pages--auth--register.vue

<template>
  <div>
    <h3 class="mb-4 font-bold uppercase text-primaryDark">
      create a new account
    </h3>

    <Input label="User Name" placeholder="Your username" />

    <Input
      type="email"
      label="Email address"
      placeholder="Your email address"
    />

    <Input type="password" label="Password" placeholder="Password" />

    <Input
      type="password"
      label="Confirm password"
      placeholder="Confirm password"
    />

    <Button>Register</Button>
  </div>
</template>

pages--auth--settings.vue

<template>
  <div>
    <h1 class="font-semibold uppercase text-primaryDark">Settings</h1>
    <form class="p-5 my-5 bg-gray-50">
      <form-input placeholder="Username" label="Username" />
      <form-input placeholder="Email" label="Email" />
      <form-button>Update Profile</form-button>
    </form>

    <form class="p-5 my-5 bg-gray-50">
      <form-input
        name="current_password"
        placeholder="Current password"
        label="Current password"
        type="password"
      />
      <form-input
        name="password"
        placeholder="Password"
        label="New password"
        type="password"
      />
      <form-input
        name="password_confirmation"
        placeholder="Confirm new password"
        label="Confirm password"
        type="password"
      />
      <form-button>Update password</form-button>
    </form>
  </div>
</template>

pages-new.vue

<template>
  <div>
    <h2 class="mb-4 text-2xl">Submit post/link</h2>

    <tabs :options="{ useUrlFragment: true }">
      <tab name="Link">
        <!-- Link Editor -->
      </tab>
      <tab name="Post">
        <!-- Post Editor -->
      </tab>
    </tabs>

    <div class="mt-4">
      <div>
        please be mindful of reddit's
        <a href="https://old.reddit.com/help/contentpolicy" target="_blank"
          >content policy</a
        >
        and practice
        <a href="https://old.reddit.com/wiki/reddiquette" target="_blank">
          good reddiquette </a
        >.
      </div>
      <div class="link-notice" style="display: none">
        posting this link saves the image or gif to reddit.
      </div>
    </div>
  </div>
</template>

pages-u-_username.vue

<template>
  <div>
    <div class="px-2 border-2 border-dashed">
      <h1 class="text-3xl uppercase">u/rayhan</h1>
    </div>
    <div class="mt-3">
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
      <Thread class="mb-4" />
    </div>
  </div>
</template>

reset-password.vue

<template>
  <div class="grid grid-cols-12">
    <div
      class="col-span-6 col-start-4 p-5 border-2 border-dashed border-primaryDark"
    >
      <div class="mb-3">
        <h3
          class="flex space-x-2 text-2xl font-bold uppercase text-primaryDark"
        >
          <svg
            class="w-6"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01"
            />
          </svg>
          <span>Change your password</span>
        </h3>
      </div>

      <form action="#" class="mt-5">
        <form-input placeholder="Email address" label="Email address" />
        <form-input placeholder="Password" label="Password" />
        <form-input placeholder="Confirm password" label="Confirm password" />
        <form-button>Send recovery email</form-button>
      </form>
    </div>
  </div>
</template>

stores-todos.js

export const state = {
  visibility: "all",
  todos: [
    { id: 1, task: "task 1", done: false },
    { id: 2, task: "task 2", done: true },
    { id: 3, task: "task 3", done: false },
    { id: 4, task: "task 4", done: true },
    { id: 5, task: "task 5", done: false }
  ]
};

export const mutations = {
  ADD_TODO({ todos }, task) {
    todos.unshift({
      id: Date.now(),
      task,
      done: false
    });
  },
  TOGGLE_DONE({ todos }, id) {
    const index = todos.findIndex(todo => todo.id === id);
    todos[index].done = !todos[index].done;
  },
  SWITCH_VISIBILITY(state, visibility) {
    state.visibility = visibility;
  }
};

export const getters = {
  doneTodos(state) {
    return state.todos.filter(todo => todo.done);
  },
  undoneTodos(state) {
    return state.todos.filter(todo => !todo.done);
  },
  counter(state, getters) {
    return {
      all: state.todos.length,
      done: getters.doneTodos.length,
      undone: getters.undoneTodos.length
    };
  },
  filteredTodos(state, getters) {
    if (state.visibility === "all") return state.todos;
    if (state.visibility === "done") return getters.doneTodos;
    if (state.visibility === "undone") return getters.undoneTodos;
  }
};

tailwind.config.js

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#CEE3F8",
        primaryLight: "#EFF7FF",
        primaryDark: "#4f86b5",
        primaryDark2: "#4270a2",
      },
    },
  },
  plugins: [],
};