Skip to content

Commit 74b9290

Browse files
samipesamipe
committed
dynamic news section to front page
1 parent e4070e3 commit 74b9290

15 files changed

+440
-66
lines changed

Diff for: ‎docs/css/app.2ad17524.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎docs/css/app.96152ac7.css

-1
This file was deleted.

Diff for: ‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@
1717
l.pathname.slice(0, -1) + decoded + l.hash
1818
);
1919
}
20-
}(window.location))</script><script defer="defer" src="/js/chunk-vendors.ac4c543a.js"></script><script defer="defer" src="/js/app.a54d7199.js"></script><link href="/css/app.96152ac7.css" rel="stylesheet"><link rel="icon" type="image/svg+xml" href="/img/icons/favicon.svg"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="robot-framework"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but robot-framework doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
20+
}(window.location))</script><script defer="defer" src="/js/chunk-vendors.79d7f7df.js"></script><script defer="defer" src="/js/app.94a8611f.js"></script><link href="/css/app.2ad17524.css" rel="stylesheet"><link rel="icon" type="image/svg+xml" href="/img/icons/favicon.svg"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="robot-framework"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but robot-framework doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

Diff for: ‎docs/js/591.038e6705.js renamed to ‎docs/js/591.b165421f.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎docs/js/app.94a8611f.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎docs/js/app.a54d7199.js

-1
This file was deleted.

Diff for: ‎docs/js/chunk-vendors.79d7f7df.js

+46
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎docs/js/chunk-vendors.ac4c543a.js

-39
This file was deleted.

Diff for: ‎docs/service-worker.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package-lock.json

+281-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
},
1010
"dependencies": {
1111
"@babel/eslint-parser": "^7.21.3",
12+
"@contentful/rich-text-html-renderer": "^16.2.0",
1213
"@highlightjs/vue-plugin": "2.1.0",
14+
"contentful": "^10.6.1",
1315
"core-js": "^3.6.5",
1416
"date-fns": "2.27.0",
1517
"highlight.js": "11.2.0",

Diff for: ‎src/components/News.vue

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<transition appear name="opacity">
3+
<div v-if="height" class="news-container card" :style="{height: `${height}px`}">
4+
<h2 style="letter-spacing: 0.125rem; position: sticky; top: 0;" class="type-center type-large mb-none color-black bg-theme">
5+
NEWS
6+
</h2>
7+
<div class="bg-grey-dark pt-small">
8+
<div v-if="news.length === 0">
9+
loading...
10+
</div>
11+
<template v-else>
12+
<article
13+
v-for="entry in news"
14+
:key="entry.id"
15+
class="pb-small px-small">
16+
<template v-if="entry.link">
17+
<a :href="entry.link" target="blank" class="mb-none line-height-1">
18+
<h3 class="mb-none line-height-1 font-body">{{ entry.title }}</h3>
19+
</a>
20+
</template>
21+
<h3 v-else class="mb-none line-height-1 font-body">{{ entry.title }}</h3>
22+
<div class="type-small">{{ entry.date }}</div>
23+
<template v-if="entry.image">
24+
<img :src="`${entry.image.file.url}${imgUrlParams}`" class="main" />
25+
</template>
26+
<div v-if="entry.body" class="mb-none" style="line-height: 1.25;" v-html="parseBody(entry.body)" />
27+
</article>
28+
</template>
29+
</div>
30+
</div>
31+
</transition>
32+
</template>
33+
34+
<script>
35+
import { getNews } from '../js/contentfulClient'
36+
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
37+
export default {
38+
data: () => ({
39+
news: [],
40+
imgUrlParams: '?w=500&h=500',
41+
height: 0
42+
}),
43+
async mounted() {
44+
const introEl = document.getElementById('intro-text')
45+
setTimeout(() => {
46+
this.height = introEl.offsetHeight - 16
47+
}, 500)
48+
this.news = (await getNews()).sort((a, b) => {
49+
if (new Date(a.date) > new Date(b.date)) return -1
50+
return 1
51+
})
52+
},
53+
methods: {
54+
parseBody(body) {
55+
return documentToHtmlString(body, {
56+
renderNode: {
57+
paragraph: (node, next) => `<p class="mb-2xsmall ">${next(node.content)}</p>`,
58+
blockquote: (node, next) => `<blockquote class="mb-2xsmall border-left-white border-thin pl-2xsmall">${next(node.content)}</blockquote>`
59+
}
60+
})
61+
}
62+
}
63+
}
64+
</script>
65+
66+
<style scoped>
67+
img.main {
68+
width: 100%;
69+
border-radius: 0.25rem;
70+
}
71+
.news-container {
72+
overflow: auto;
73+
border-radius: 0.25rem;
74+
background-color: var(--color-bg-alt);
75+
color: var(--color-white);
76+
}
77+
</style>

Diff for: ‎src/components/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import NewsBanner from './NewsBanner.vue'
1+
import News from './News.vue'
22
import Banner from './Banner.vue'
33
import RoboconBanner from './RoboconBanner.vue'
44
import PageFooter from './PageFooter.vue'
@@ -24,7 +24,7 @@ import RobotIcon from './icons/RobotIcon.vue'
2424
import DocumentIcon from './icons/DocumentIcon.vue'
2525

2626
export {
27-
NewsBanner,
27+
News,
2828
Banner,
2929
RoboconBanner,
3030
PageFooter,

Diff for: ‎src/js/contentfulClient.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as contentful from 'contentful'
2+
3+
const client = contentful.createClient({
4+
space: 'bpm5i5mj2o02',
5+
accessToken: 'kDjw4Ergl45z3NFMv6Bhd5Z5w_HTIdcioiY4Hq9mC0I' // read-only for free plan, dont worry :)
6+
})
7+
8+
export const getNews = async() => {
9+
const items = await client
10+
.getEntries({
11+
content_type: 'latestNews'
12+
})
13+
.then(({ items }) => items.map(({ fields }) => ({
14+
...fields,
15+
image: fields.image?.fields
16+
})))
17+
return items
18+
}

Diff for: ‎src/views/Home.vue

+9-13
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<template>
22
<nav-mobile />
33
<banner />
4-
<news-banner v-if="$te('newsBanner') && $t('newsBanner') !== ''" />
54
<navbar class="nav-desktop" />
65
<div class="container mb-xlarge">
76
<!-- introduction -->
87
<page-section
98
title-id="introduction"
109
:title="$t('introduction.title')">
1110
<div class="col-sm-12 col-lg-9 row">
12-
<div class="col-sm-12 col-lg-8 pr-small" v-html="$t('introduction.body')" />
13-
<div class="col-lg-4 pt-xsmall">
14-
<company-carousel />
11+
<div class="col-sm-12 col-lg-8 pr-small">
12+
<div v-html="$t('introduction.body')" id="intro-text" class="mb-small" />
13+
<!-- <company-carousel /> -->
14+
</div>
15+
<div class="col-lg-4 pt-2xsmall">
16+
<news />
1517
</div>
1618
</div>
1719
</page-section>
@@ -74,41 +76,35 @@
7476
<script>
7577
import { defineAsyncComponent } from 'vue'
7678
import {
77-
NewsBanner,
7879
Banner,
7980
PageFooter,
8081
Navbar,
8182
NavMobile,
8283
PageSection,
83-
PageSectionTwitter,
84-
CompanyCarousel,
84+
News,
8585
CommunityItems,
8686
ResourceBox,
8787
TabBox,
8888
Sponsors,
89-
Milestones,
90-
RoboconBanner
89+
Milestones
9190
} from 'Components'
9291
import VideoComponent from 'Components/VideoComponent'
9392
9493
export default {
9594
name: 'App',
9695
components: {
9796
VideoComponent,
98-
NewsBanner,
9997
Banner,
10098
PageFooter,
10199
Navbar,
102100
NavMobile,
103101
PageSection,
104-
PageSectionTwitter,
105-
CompanyCarousel,
102+
News,
106103
CommunityItems,
107104
ResourceBox,
108105
TabBox,
109106
Sponsors,
110107
Milestones,
111-
RoboconBanner,
112108
MonacoEditor: defineAsyncComponent(() => import('Components/Editor.vue'))
113109
}
114110
}

0 commit comments

Comments
 (0)