GitBlixt
ieq/cxi-docs

Removed tags/categories and thumbnails from journal posts

Nichlas W. Andersen committed Aug 10, 2018
commit b7beeac1c2ced64aee23897ce3eadd60ca8bbc58
Showing 10 changed files with 116 additions and 49 deletions
.forestry/front_matter/templates/journal.yml +0 -6
@@ @@ -8,17 +8,11 @@ fields:
label: Title
hidden: false
type: text
- - type: file
- name: thumbnail
- label: Thumbnail
- type: textarea
name: excerpt
label: Excerpt
config:
required: true
- - type: tag_list
- name: categories
- label: Categories
- name: date
default: ''
label: Date
README.md +7 -5
@@ @@ -6,12 +6,14 @@
## Todo
+ - [ ] Add favicon
- [ ] Add Hero section to Forestry config
- - [ ] Unwrap images from p tag
- - [ ] Style typography
- - [ ] Style layout for journal list
- - [ ] Remove thumbnail from Journal
- - [ ] Remove tags/categories from Journal
+ - [x] Unwrap images from p tag
+ - [x] Style typography
+ - [x] Style code blocks
+ - [x] Style layout for journal list
+ - [x] Remove thumbnail from Journal
+ - [x] Remove tags/categories from Journal
## Development
portfolio/.vuepress/components/JournalList.vue +20 -5
@@ @@ -1,10 +1,8 @@
<template>
<div class="journal-list">
- <div v-for="post in journal" :key="post.title">
- <img v-if="post.frontmatter.thumbnail" :src="post.frontmatter.thumbnail" :alt="post.title" />
- <router-link tag="h2" :to="post.path" class="title">{{ post.frontmatter.title }}</router-link>
- <p>{{ post.frontmatter.excerpt }}</p>
- <hr>
+ <div v-for="post in journal" :key="post.title" class="post">
+ <router-link tag="h2" :to="post.path" class="title">{{ post.frontmatter.title }}</router-link>
+ <p>{{ post.frontmatter.excerpt }}</p>
</div>
</div>
</template>
@@ @@ -25,4 +23,21 @@
.title {
cursor: pointer;
}
+ .post {
+ padding: 2rem 0;
+ border-bottom: 1px solid #eee;
+ }
+ .post:last-of-type {
+ border: 0;
+ }
+ .post h2 {
+ margin: 0 0 1rem 0;
+ }
+ .post h2:hover {
+ opacity: 0.6;
+ }
+ .post p {
+ margin: 0;
+ color: #333;
+ }
</style>
portfolio/.vuepress/components/SingleProjectHeader.vue +5 -2
@@ @@ -43,7 +43,9 @@
.header {
display: flex;
padding: 2rem 0;
- margin-bottom: 4rem;
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto 3rem auto;
}
.column {
@@ @@ -52,10 +54,11 @@
.label {
margin-bottom: 0.5rem;
+ font-weight: 700;
}
.value {
- font-weight: 500;
+ font-weight: 400;
}
.categories:after {
portfolio/.vuepress/components/WorksList.vue +4 -2
@@ @@ -12,7 +12,7 @@
<div class="info">
<h2>{{ post.frontmatter.title }}</h2>
- <p v-if="post.frontmatter.description">{{ post.frontmatter.description }}</p>
+ <span v-if="post.frontmatter.description">{{ post.frontmatter.description }}</span>
</div>
</router-link>
@@ @@ -56,13 +56,15 @@
.info h2 {
display: inline-block;
+ width: auto;
font-size: 0.8rem;
font-weight: 700;
margin: 0;
}
- .info p {
+ .info span {
display: inline-block;
+ width: auto;
margin: 0;
margin-left: 0.5rem;
font-size: 0.8rem;
portfolio/.vuepress/config.js +3 -0
@@ @@ -12,6 +12,9 @@ module.exports = {
{ text: 'Journal', link: '/journal/', position: 'right', external: false },
]
},
+ head: [
+ ['link', { rel: 'shortcut icon', type: "image/x-icon", href: `./favicon.ico` }]
+ ],
markdown: {
anchor: {
permalink: false
portfolio/.vuepress/theme/Layout.vue +75 -19
@@ @@ -5,6 +5,16 @@
<div class="container">
+ <!-- Works list -->
+ <div
+ v-if="$route.path === '/'"
+ :style="{
+ marginTop: '14vw'
+ }"
+ >
+ <Content/>
+ </div>
+
<!-- Single project view -->
<div v-if="isSingleProject">
<SingleProjectHeader
@@ @@ -15,13 +25,13 @@
<Content/>
</div>
- <!-- Main -->
- <div
- v-else
- :style="$route.path === '/' && {
- marginTop: '14vw'
- }"
- >
+ <!-- Journal list -->
+ <div v-if="$route.path === '/journal/'" class="journal-list">
+ <Content />
+ </div>
+
+ <!-- Single journal -->
+ <div v-if="isSingleJournal" class="single-journal">
<Content/>
</div>
@@ @@ -42,14 +52,29 @@
return true
}
},
+ isSingleJournal() {
+ const journalRoute = '/journal/'
+ const path = this.$route.path
+ if (path.includes('journal') && path.length >= (journalRoute.length + 1)) {
+ return true
+ }
+ }
},
- created() {
+ mounted() {
// unwrap all images from paragraph tags so we can have
// different widths inside the content.
+
document.querySelectorAll('img').forEach(image => {
- var parent = image.parentNode
- while (image.firstChild) parent.insertBefore(image.firstChild, image)
- parent.removeChild(image)
+ var wrapper = image.parentNode
+ let children = wrapper.children
+ let fragment = document.createDocumentFragment()
+
+ Array.from(children).forEach(child => {
+ fragment.appendChild(child)
+ })
+
+ wrapper.parentNode.replaceChild(fragment, wrapper)
+
})
}
@@ @@ -58,6 +83,11 @@
<style>
+ :root {
+ --color-black: #1c1c1c;
+ --color-highlight: rgba(249, 233, 172, 0.99);
+ }
+
* {
box-sizing: border-box;
margin: 0;
@@ @@ -66,58 +96,84 @@
*::-moz-selection {
background: var(--color-highlight);
- color: #2b2b2b;
+ color: var(--color-black);
}
*::-webkit-selection {
background: var(--color-highlight);
- color: #2b2b2b;
+ color: var(--color-black);
}
*::selection {
background: var(--color-highlight);
- color: #2b2b2b;
+ color: var(--color-black);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 16px;
background: #fff;
- color: #000;
+ color: var(--color-black);
}
img {
+ width: 100%;
max-width: 100%;
line-height: 0;
+ margin: 2rem 0;
}
.container {
padding: 0 5vw;
}
+ .journal-list, .single-journal {
+ width: 800px;
+ max-width: 100%;
+ margin: 0 auto;
+ }
+
+ h1,h2,h3,h4,h5,h6,p {
+ width: 100%;
+ max-width: 800px;
+ }
+
h1 {
font-size: 3rem;
line-height: 1.15;
font-weight: 300;
- margin: 0 0 2rem 0;
+ margin: 0 auto 3rem auto;
}
h2 {
font-size: 2rem;
font-weight: 300;
- margin: 1rem 0 2rem 0;
+ margin: 1rem auto 2rem auto;
}
h3 {
font-size: 1rem;
font-weight: 700;
- margin: 1rem 0 1rem 0;
+ margin: 1rem auto 1rem auto;
}
p {
font-size: 1rem;
line-height: 1.5;
- margin: 1rem 0 2rem 0;
+ margin: 1rem auto 2rem auto;
+ }
+
+ pre {
+ background: var(--color-black);
+ padding: 1rem;
+ }
+
+ code {
+ color: white;
+ background: var(--color-black);
+ font-size: 0.8rem;
+ padding: 0.05rem 0.25rem;
+ font-weight: 400;
}
</style>
portfolio/journal/cms-and-auto-deployment-for-vuepress.md +1 -5
@@ @@ -1,12 +1,8 @@
---
title: CMS and auto deployment for vuepress
date: 2018-08-09 19:49:28 +0200
- thumbnail: "/upload/photo-1508186130517-a6d7405bf726.jpeg"
excerpt: This works like expected, this text is only visible on the front page where
all the journal posts are listed
- categories:
- - netlify
- - static
---
# CMS and auto deployment for vuepress
@@ @@ -37,4 +33,4 @@ Now, push it up to your remote git repository.
2. Set the build command to: `npm run site:build`
3. Set the publish directory to `.vuepress/dist`
- That's it! your site is now deploying automatically!
\ No newline at end of file
+ That's it! your site is now deploying automatically!
portfolio/journal/post-1.md +0 -3
@@ @@ -1,9 +1,6 @@
---
title: How to build a portfolio/blog with Vuepress
date: 2018-08-07 00:00:00 +0000
- thumbnail: ''
- categories:
- - Development
excerpt: This morning, I read this article by one of the co-founders of Snipcart.
He did this great rundown on how you could build a simple blog with Vuepress by
looping over a custom directory of documents.
portfolio/works/project-1.md +1 -2
@@ @@ -12,9 +12,8 @@ description: subtitle
# The new beginning for yatta yatta
### Let's look at this typography
- How we managed to do this? Well, this is a short description on that.
+ How we managed to do this? Well, this is a short description on that. And let's see how long this line will get and how ugly it will look. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- ## Exploration
![Test](/upload/photo-1511548774318-563182fe8d03.jpeg)
![Test](/upload/photo-1511548774318-563182fe8d03.jpeg)