# Custom Components
# Tables
Name | Age | Created On | Percent |
---|---|---|---|
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
non utilisé pour le moment, à suivre sur https://friendlyuser.github.io/vuepress-theme-cool-starter/custom-components.html#quiz
# 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?.
- cool firebase Vue Dapp, typescript
- Soldiity contracts repo for games, explaining how to use then and more. Also, use solcdoc to make markdoown files and a script for latex/vuepress to include the source?
- Update the Blockchain notes repo.
- When making the solidity contracts use boostnote minus the admonitions, but write the code in either js or solidity and use Pandoc Markdown Code Blocks in LaTeX with a custom pandoc template. Idk, don't really care about documenting smart contracts.
- update python script to probably with jinja based format and maybe latex output.
- Building a chat bot with Nest.js and Dialogflow, extend this app. and look at How to Build a Vue.js Chat App with ChatEngine | PubNub
- Dash application to track ethereum stats and hashgraph
- Update the Bchain application, Vue-Dapp and finish a basic IPFS app using a box.
- Ability to upload sites to ipfs and look into cloudiary
- Build a basic scrappy bot for reddit, host on scrappy hub and maybe even send data to apis. Used Rss feeds instead.
- Consider using GitHub - thomasreinecke/git-playbook: GIT Playbook is a documentation framework that allows you to create Documentation for your project using Markdown and GH-Pages rapidly as a good final repo for all of my documentation, particularly when it comes to searching for things.
# Badges
error warning tip default theme# 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/