Skip to content

Commit 2d1bd48

Browse files
basicBrogrammerbasicBrogrammer
committed
WIP - about page
1 parent ceb0faa commit 2d1bd48

File tree

12 files changed

+182
-26
lines changed

12 files changed

+182
-26
lines changed

‎assets/global.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.nuxt-content h1 {
2+
color: #ff124f;
3+
@apply font-bold text-2xl;
4+
@apply my-1;
5+
}
6+
.nuxt-content h2 {
7+
color: #ff124f;
8+
@apply font-bold text-xl my-1;
9+
}
10+
.nuxt-content h3 {
11+
color: #ff124f;
12+
@apply font-bold text-lg my-1;
13+
}
14+
.nuxt-content ul {
15+
list-style-type: disc;
16+
padding: 0.25rem 1.25rem;
17+
}
18+
.nuxt-content {
19+
font-size: 1.1em;
20+
}
21+
.nuxt-content .nuxt-content-highlight {
22+
@apply border-2 rounded-lg my-1;
23+
}
24+
.nuxt-content img {
25+
margin: 0 auto;
26+
}
27+
.nuxt-content a {
28+
@apply font-semibold text-blue-500;
29+
}

‎components/ArticleCard.vue‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
<template>
2-
<div class="p-3 border-2 rounded-lg border-primary">
3-
<h3 class="font-bold tracking-wider text-center color-secondary">
4-
{{ article.title }}
5-
</h3>
6-
<p class="py-1 my-2 font-medium border-t-2">
7-
{{ article.description }}
8-
</p>
9-
<ArticleTag v-for="tag in tags" :key="tag" :tag="tag" />
2+
<div class="border-2 rounded-lg border-primary">
3+
<nuxt-link :to="{ name: 'blog-slug', params: { slug: article.slug } }">
4+
<div
5+
class="cover-img"
6+
:style="{ backgroundImage: `url(${article.cover_image})` }"
7+
></div>
8+
</nuxt-link>
9+
<div class="p-3">
10+
<nuxt-link :to="{ name: 'blog-slug', params: { slug: article.slug } }">
11+
<h3 class="font-bold tracking-wider text-center color-secondary">
12+
{{ article.title }}
13+
</h3>
14+
</nuxt-link>
15+
<p class="py-1 my-2 font-medium border-t-2">
16+
{{ article.description }}
17+
</p>
18+
<ArticleTag v-for="tag in tags" :key="tag" :tag="tag" />
19+
</div>
1020
</div>
1121
</template>
1222

@@ -29,4 +39,14 @@ export default {
2939
}
3040
</script>
3141

32-
<!-- <style scoped></style> -->
42+
<style scoped>
43+
.cover-img {
44+
display: block;
45+
width: 100%;
46+
height: auto;
47+
padding-bottom: 25%;
48+
background-size: cover;
49+
background-position: center center;
50+
@apply rounded-lg;
51+
}
52+
</style>

‎components/ArticleTag.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ export default {
1717
span {
1818
@apply p-1 m-1 border-2 rounded-lg border-current font-mono;
1919
}
20+
span::before {
21+
content: '#';
22+
}
2023
.react {
2124
color: #61dafb;
2225
background-color: #282c34;

‎components/Banner.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div class="banner">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {}
9+
</script>
10+
<style scoped>
11+
.blah {
12+
@apply bg-white;
13+
}
14+
.banner {
15+
padding: 1em;
16+
@apply border-2 rounded-lg border-red-600;
17+
@apply p-1 mb-3 bg-red-100;
18+
}
19+
h2 {
20+
color: red;
21+
@apply text-red-600 font-semibold;
22+
}
23+
p {
24+
@apply font-light;
25+
}
26+
</style>

‎components/SideBar.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<aside
3-
class="flex flex-col justify-between flex-none w-3/4 h-screen px-4 py-5 border-r-2 fixed md:relative md:w-1/4 border-secondary"
3+
class="z-40 flex flex-col justify-between w-3/4 px-4 py-5 border-r-2 fixed md:w-1/4 border-secondary"
44
>
55
<ul class="flex flex-col items-start font-semibold tracking-wider">
66
<li class="self-center">
@@ -12,7 +12,7 @@
1212
</li>
1313
<li>
1414
<nuxt-link to="/about" @click="console.log('hey there')">
15-
ReadMe
15+
About
1616
</nuxt-link>
1717
</li>
1818
<li>
@@ -70,11 +70,18 @@ export default {
7070
</script>
7171

7272
<style scoped>
73-
li {
74-
margin: 0.5rem 0;
73+
/* small */
74+
@media only screen and (max-width: 767px) {
75+
aside {
76+
height: 95%;
77+
}
7578
}
7679
aside {
7780
background-color: #f4f0ec;
81+
@apply h-screen;
82+
}
83+
li {
84+
margin: 0.5rem;
7885
}
7986
8087
li > a::before {

‎content/about.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# This is a page all about me ROFLmao
2+
3+
- Family, friends, fun
4+
- physics
5+
- solar installation
6+
- bootcamp
7+
- lolmeet
8+
- mtbgrouprides => fun tech: dokku, stimulus, apollo[client,server], hasura, ionic, aws cognito
9+
- Mckesson for 6 years

‎content/articles/when-a-simple-react-context-gets-out-of-hand.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,6 @@ Currently, this is my favorite way to [with some extra magic I'll blog about lat
339339
- No added dependencies.
340340
- No side effects on global state that have to be memorized.
341341
- Each interation is mapped to a single encapsulated action.
342-
- Gabe and Zach can you think of any other benefits?
343342

344343
Putting it all together.
345344

‎layouts/default.vue‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<main>
33
<div
4-
class="top-0 flex items-center w-screen h-10 border-b-2 md:hidden border-secondary"
4+
class="navbar fixed bottom-0 flex items-center w-screen h-10 border-t-2 md:hidden border-secondary z-50"
55
>
66
<button
77
class="btn-sidebar color-primary focus:outline-none focus:shadow-outline"
@@ -22,29 +22,35 @@
2222
>BasicBrogrammer</nuxt-link
2323
>
2424
</div>
25-
<div class="flex">
25+
<div class="main-body">
2626
<transition name="sidebar-slide">
2727
<SideBar v-if="showSideBar" />
2828
</transition>
29-
<article class="flex-grow p-4 mx-auto">
29+
<article class="w-screen p-4 md:w-3/4">
30+
<Banner>
31+
<h2><b>WARNING:</b> Work in Progress.</h2>
32+
<p>Some Pages may be unfinished or broken. Enjoy.</p>
33+
</Banner>
3034
<Nuxt />
3135
</article>
3236
</div>
3337
</main>
3438
</template>
3539
<script>
3640
import SideBar from '@/components/SideBar'
41+
import Banner from '@/components/Banner'
3742
3843
export default {
39-
components: { SideBar },
44+
components: { SideBar, Banner },
4045
data() {
4146
return {
4247
sideNavOpen: false,
48+
windowWidth: window.innerWidth,
4349
}
4450
},
4551
computed: {
4652
showSideBar() {
47-
return window.innerWidth > 500 || this.sideNavOpen
53+
return this.windowWidth > 767 || this.sideNavOpen
4854
},
4955
sidebarToggleIcon() {
5056
return this.sideNavOpen
@@ -57,6 +63,11 @@ export default {
5763
this.sideNavOpen = false
5864
},
5965
},
66+
mounted() {
67+
window.addEventListener('resize', () => {
68+
this.windowWidth = window.innerWidth
69+
})
70+
},
6071
}
6172
</script>
6273

@@ -73,6 +84,9 @@ html {
7384
box-sizing: border-box;
7485
background-color: #f4f0ec;
7586
}
87+
.navbar {
88+
background-color: #f4f0ec;
89+
}
7690
7791
*,
7892
*::before,
@@ -125,4 +139,18 @@ html {
125139
transform: translateX(-75px);
126140
opacity: 0;
127141
}
142+
143+
/* above small */
144+
@media only screen and (min-width: 767px) {
145+
article {
146+
margin-left: 25%;
147+
}
148+
}
149+
150+
/* small */
151+
@media only screen and (max-width: 767px) {
152+
.main-body {
153+
height: 95vh;
154+
}
155+
}
128156
</style>

‎nuxt.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default {
1717
},
1818

1919
// Global CSS (https://go.nuxtjs.dev/config-css)
20-
css: [],
20+
css: ['~/assets/global.css'],
2121

2222
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
2323
plugins: [],

‎pages/about.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<template>
22
<div class="container">
3-
<div>
4-
<h1 class="title">About</h1>
5-
</div>
3+
<nuxt-content :document="article" class="my-2" />
64
</div>
75
</template>
86

97
<script>
10-
export default {}
8+
export default {
9+
async asyncData({ $content, params }) {
10+
const article = await $content('about').fetch()
11+
12+
return { article }
13+
},
14+
}
1115
</script>

0 commit comments

Comments
 (0)