Skip to content

Commit a6839aa

Browse files
indefinitiesindefinities
committed
Initial Vue Implementation.
Added new components, is functional, will edit later. Edited button component Finalized button, refactor style files, add transition Remove vuex add router I reset everything because I am a fool. Initial website Add window listener and ither features.
1 parent fc8a8d3 commit a6839aa

27 files changed

+9248
-6
lines changed

‎.eslintrc.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
'extends': 'plugin:vue/essential'
3+
}

‎.gitignore

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.DS_STORE
2+
scripts/flow/*/.flowconfig
3+
*~
4+
*.pyc
5+
.grunt
6+
_SpecRunner.html
7+
__benchmarks__
8+
build/
9+
remote-repo/
10+
coverage/
11+
.module-cache
12+
fixtures/dom/public/react-dom.js
13+
fixtures/dom/public/react.js
14+
test/the-files-to-test.generated.js
15+
*.log*
16+
chrome-user-data
17+
*.sublime-project
18+
*.sublime-workspace
19+
.idea
20+
*.iml
21+
.vscode
22+
*.swp
23+
*.swo
24+
25+
packages/react-devtools-core/dist
26+
packages/react-devtools-extensions/chrome/build
27+
packages/react-devtools-extensions/chrome/*.crx
28+
packages/react-devtools-extensions/chrome/*.pem
29+
packages/react-devtools-extensions/firefox/build
30+
packages/react-devtools-extensions/firefox/*.xpi
31+
packages/react-devtools-extensions/firefox/*.pem
32+
packages/react-devtools-extensions/shared/build
33+
packages/react-devtools-inline/dist
34+
packages/react-devtools-shell/dist
35+
node_modules

‎README.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# hacks.github.io
1+
# hacks
22

33
## Project setup
44
```
@@ -15,11 +15,6 @@ yarn serve
1515
yarn build
1616
```
1717

18-
### Run your unit tests
19-
```
20-
yarn test:unit
21-
```
22-
2318
### Lints and fixes files
2419
```
2520
yarn lint

‎babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset',
4+
],
5+
};

‎package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "hacks",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^3.6.4",
12+
"vue": "^2.6.11",
13+
"vue-router": "^3.1.6"
14+
},
15+
"devDependencies": {
16+
"@vue/cli-plugin-babel": "~4.3.0",
17+
"@vue/cli-plugin-eslint": "~4.3.0",
18+
"@vue/cli-plugin-router": "~4.3.0",
19+
"@vue/cli-service": "~4.3.0",
20+
"@vue/eslint-config-airbnb": "^5.0.2",
21+
"babel-eslint": "^10.1.0",
22+
"eslint": "^6.7.2",
23+
"eslint-plugin-import": "^2.20.2",
24+
"eslint-plugin-vue": "^6.2.2",
25+
"sass": "^1.26.3",
26+
"sass-loader": "^8.0.2",
27+
"vue-template-compiler": "^2.6.11"
28+
}
29+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎public/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎src/App.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div id="app">
3+
<Page />
4+
</div>
5+
</template>
6+
7+
<script>
8+
import Page from "./views/Page.vue";
9+
10+
export default {
11+
name: "App",
12+
components: {
13+
Page,
14+
},
15+
};
16+
</script>
17+
18+
<style lang="scss">
19+
:root {
20+
background-color: black;
21+
}
22+
#app {
23+
font-family: Avenir, sans-serif;
24+
color: white;
25+
}
26+
</style>

‎src/assets/Slack_Monochrome_Black.svg

Lines changed: 12 additions & 0 deletions
Loading

‎src/assets/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/speech-bubble.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/github-corner.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<section class="github-corner">
3+
<a
4+
href="https://github.com/hacks/hacks.github.io"
5+
aria-label="View source on GitHub"
6+
><svg
7+
width="80"
8+
height="80"
9+
viewBox="0 0 250 250"
10+
style="
11+
fill: #fff;
12+
color: #151513;
13+
position: absolute;
14+
top: 0;
15+
border: 0;
16+
right: 0;
17+
"
18+
aria-hidden="true"
19+
>
20+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
21+
<path
22+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
23+
fill="currentColor"
24+
style="transform-origin: 130px 106px;"
25+
class="octo-arm"
26+
></path>
27+
<path
28+
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
29+
fill="currentColor"
30+
class="octo-body"
31+
></path></svg
32+
></a>
33+
</section>
34+
</template>
35+
36+
<script>
37+
export default {
38+
name: "github-corner",
39+
};
40+
</script>
41+
42+
<style>
43+
.github-corner:hover .octo-arm {
44+
animation: octocat-wave 560ms ease-in-out;
45+
}
46+
@keyframes octocat-wave {
47+
0%,
48+
100% {
49+
transform: rotate(0);
50+
}
51+
20%,
52+
60% {
53+
transform: rotate(-25deg);
54+
}
55+
40%,
56+
80% {
57+
transform: rotate(10deg);
58+
}
59+
}
60+
@media (max-width: 500px) {
61+
.github-corner:hover .octo-arm {
62+
animation: none;
63+
}
64+
.github-corner .octo-arm {
65+
animation: octocat-wave 560ms ease-in-out;
66+
}
67+
}
68+
</style>

‎src/components/hacks-button.vue

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div class="hacks-button">
3+
<a :href="link" target="_blank">
4+
<div :class="buttonTypeClass">
5+
<slot></slot>
6+
</div>
7+
</a>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name: "hacks-button",
14+
props: {
15+
/**
16+
* The link that the button will redirect to
17+
*
18+
* @type {String}
19+
*/
20+
link: {
21+
type: String,
22+
default: null,
23+
},
24+
/**
25+
* The type of button can be:
26+
*
27+
* - "call" (white rounded)
28+
* - "action" (rectangle)
29+
* - "menu"
30+
*
31+
* @type {String}
32+
*/
33+
label: {
34+
type: String,
35+
default: "action",
36+
},
37+
},
38+
computed: {
39+
/**
40+
* Changes the styling of the button based on type of action
41+
*/
42+
buttonTypeClass() {
43+
let className = "hacks-button";
44+
switch (this.label) {
45+
case "ACTION":
46+
className += "__action";
47+
break;
48+
default:
49+
className;
50+
}
51+
return className;
52+
},
53+
},
54+
};
55+
</script>
56+
57+
<style lang="scss">
58+
.hacks-button {
59+
a {
60+
text-decoration: none;
61+
}
62+
63+
h3 {
64+
font-weight: 500;
65+
margin: unset;
66+
padding: 10px;
67+
font-size: 1.5em;
68+
}
69+
img {
70+
padding-top: 5px;
71+
}
72+
73+
&__action {
74+
background: white;
75+
color: black;
76+
border-radius: 2em;
77+
width: fit-content;
78+
height: fit-content;
79+
padding-right: 1em;
80+
padding-left: 1em;
81+
}
82+
}
83+
</style>

0 commit comments

Comments
 (0)