Vuepress Theme Cool Starter V1

# Custom Components

# Tables

NameAgeCreated OnPercent
John 20 Jan 31st 11 3.34%
Jane 24 Jan 31st 19 3.34%
Susan 16 Jan 30th 11 3.34%
Chris 55 Jan 11th 11 3.34%
Dan 40 Jan 21st 11 3.34%
John 20 Jan 31st 11 3.34%

# Table Component Code

The code for table component is listed below

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
     />
  </div>
</template>

<script>
import Styles from './Styles'
export default {
  name: 'my-component',
  // add to component
  data(){
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'YYYY-MM-DD',
          dateOutputFormat: 'MMM Do YY',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
      ],
      rows: [
        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
      ],
    };
  },
};
</script>

Since package css cannot be important inside an component, another component is needed

<script>
import "vue-good-table/dist/vue-good-table.css";

export default {
  name: "Styles",
};
</script>

<style>
</style>

# TimeLine

An example timeline of the courses I took

  • Prehistoric hunters cross over into Canada from Asia
  • Leif Ericsson leads a Viking expedition to the New World
  • First Year 1B
  • Accepted Computer Engineering
  • The Iroquois Confederacy is formed
  • John Cabot reaches Newfoundland (or perhaps Cape Breton)
  • Jacques Cartier first explores the St. Lawrence region
  • Second Year 2B
  • Samuel de Champlain establishes a French colony at Québec City
  • Hudson’s Bay Company is formed
  • Expulsion of the Acadians
  • Battle of the Plains of Abraham: Québec City is captured
  • New France is formally ceded to Britain; Pontiac Rebellion erupts
  • Loyalist refugees begin arriving after the American Revolution
  • War of 1812: U.S. invades Canada
  • Rebellions against British rule in Upper and Lower Canada
  • Responsible government is won, first in Nova Scotia, then in Canada

Nice timeline 🚀

# Quiz

The way this is implemented requires the definition of json files containing a certain format.

Such as and requires the component to manually import the json file of interest (may be revised later)

{
  "questions": [
     {
        "text": "Who is the Batman",
        "responses": [
           {
              "text": "Laughing Bat"
           },
           {
              "text": "Bruce Wayne",
              "correct": true
           },
           {
              "text": "Dick Grayson"
           },
           {
              "text": "None of the above"
           }
        ]
     },
     {
        "text": "\"Yahoo\", \"Infoseek\" and \"Lycos\" are _________?",
        "responses": [
           {
              "text": "Browsers "
           },
           {
              "text": "Search Engines",
              "correct": true
           },
           {
              "text": "News Group"
           },
           {
              "text": "None of the above"
           }
        ]
     }
  ]
}
0%

Who is the Batman

a. Laughing Bat
b. Bruce Wayne
c. Dick Grayson
d. None of the above

# Details

Styled details and summary html elements.

This is a titleThis is the details html element 
<Details title="This is a title" content="This is the details html element" />

# Comparsion

What is going on?

<pros-cons
  intro="There are a couple of things we need to cover:"
  :good="[
    'Documentation Theme Based on Vue.',
    'Use of markdown-it plugins.',
    'Static Site Generator.'
  ]"
  :bad="[
    'Vuepress is not very stable yet',
    'Can be complex to configure',
  ]"
/>

There are a couple of things we need to cover:

check Pros
close Cons

# Admonition Task List

Tasks can be made using

- [ ] incomplete
- [x] complete

Major Backlog

The tasks listed below are expected to be done by the end of the term ENGR 004, haha?.

# Badges

Warning

warning

New

ERROR

# Build-in admonitions Middle badge

TIP

This is a tip

WARNING

This is a warning

WARNING

This is a dangerous warning

TIP

This is a tip

WARNING

This is a warning

STOP

This is a dangerous warning

Some other good examples can be found at https://vuepress-examples.netlify.com/

←