Skip to content

Commit 8c796eb

Browse files
svvimmingsvvimming
committed
feat: roadmap section
1 parent c1df301 commit 8c796eb

File tree

4 files changed

+235
-6
lines changed

4 files changed

+235
-6
lines changed

‎components/blocks/block-builder.vue

+2
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ import CodeBlock from '@/components/blocks/code-block'
7171
import CardListBlock from '@/components/blocks/card-list-block'
7272
import SubfooterCard from '@/components/subfooter-card'
7373
import AccordionBlock from '@/components/blocks/accordion-block'
74+
import Roadmap from '@/components/roadmap'
7475
// import BlockBuilder from '@/components/blocks/block-builder'
7576
7677
export default {
@@ -83,6 +84,7 @@ export default {
8384
CardListBlock,
8485
SubfooterCard,
8586
AccordionBlock,
87+
Roadmap,
8688
// BlockBuilder,
8789
MarkdownBlock
8890
},

‎components/roadmap.vue

+158
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,168 @@
11
<template>
22
<div class="roadmap">
3+
4+
<div
5+
v-for="item in items"
6+
:key="item.heading"
7+
class="roadmap-item">
8+
<div class="grid-noGutter-noBottom">
9+
10+
<div class="col-4">
11+
<div class="heading">
12+
13+
<ZeroButton
14+
tag="a"
15+
to="https://github.com/data-preservation-programs/singularity/milestones"
16+
class="icon-button">
17+
<GithubIcon class="icon" />
18+
</ZeroButton>
19+
20+
<span class="h2">
21+
{{ item.heading }}
22+
</span>
23+
24+
</div>
25+
</div>
26+
27+
<div class="col-8">
28+
<div class="roadmap-card">
29+
<div class="inner-card">
30+
31+
<div
32+
v-for="milestone in item.milestones"
33+
:key="milestone.title"
34+
class="milestone">
35+
36+
<div class="title">
37+
{{ milestone.title }}
38+
</div>
39+
40+
<div
41+
class="content"
42+
v-html="milestone.content">
43+
</div>
44+
45+
</div>
46+
47+
</div>
48+
</div>
49+
</div>
50+
51+
</div>
52+
</div>
53+
54+
<div class="cta-wrapper">
55+
<ButtonCta
56+
:tag="cta.tag"
57+
:to="cta.to"
58+
:theme="cta.theme"
59+
class="roadmap-cta">
60+
{{ cta.text }}
61+
</ButtonCta>
62+
</div>
63+
364
</div>
465
</template>
566

667
<script setup>
68+
// ===================================================================== Imports
69+
const GithubIcon = resolveComponent('icon/github-icon')
70+
71+
// ======================================================================= Props
72+
const props = defineProps({
73+
block: {
74+
type: Object,
75+
required: true
76+
}
77+
})
78+
79+
// ==================================================================== Computed
80+
const items = computed(() => {
81+
return props.block.items
82+
})
83+
84+
const cta = computed(() => {
85+
return props.block.cta
86+
})
87+
788
</script>
889

990
<style lang="scss" scoped>
91+
.roadmap-item {
92+
margin-bottom: toRem(12);
93+
&:hover {
94+
.icon {
95+
transform: scale(1.15);
96+
:deep(path) {
97+
fill: $chardonnay;
98+
}
99+
}
100+
}
101+
}
102+
103+
.heading {
104+
display: flex;
105+
align-items: center;
106+
margin-top: toRem(25);
107+
.icon-button {
108+
display: block;
109+
width: toRem(41);
110+
height: toRem(41);
111+
margin-right: toRem(14);
112+
padding: 0.5rem;
113+
}
114+
.icon {
115+
width: 100%;
116+
height: 100%;
117+
transform: scale(1);
118+
transition: 300ms cubic-bezier(0.33, 0.2, 0.41, 0.99);
119+
:deep(path) {
120+
transition: inherit;
121+
}
122+
}
123+
}
124+
125+
.roadmap-card {
126+
position: relative;
127+
margin-left: -2rem;
128+
@include cardPanel(90deg);
129+
}
130+
131+
.inner-card {
132+
position: relative;
133+
z-index: 2;
134+
padding: toRem(31);
135+
}
136+
137+
.milestone {
138+
display: flex;
139+
justify-content: space-between;
140+
&:not(:last-child) {
141+
margin-bottom: toRem(31);
142+
}
143+
.title {
144+
width: 19%;
145+
min-width: 19%;
146+
@include h4;
147+
color: $sageGreen;
148+
}
149+
.content {
150+
flex-grow: 1;
151+
@include p2;
152+
:deep(ul) {
153+
margin-top: 0.5rem;
154+
padding-left: 1.25rem;
155+
}
156+
:deep(li) {
157+
margin: 0.25rem 0;
158+
}
159+
}
160+
}
161+
162+
.cta-wrapper {
163+
width: 100%;
164+
display: flex;
165+
justify-content: flex-end;
166+
margin-top: toRem(30);
167+
}
10168
</style>

‎content/core/index.json

+69-6
Original file line numberDiff line numberDiff line change
@@ -139,27 +139,27 @@
139139
"cards": [
140140
{
141141
"type": "logo",
142-
"img": "/images/aws-logo.svg"
142+
"image": "/images/aws-logo.svg"
143143
},
144144
{
145145
"type": "logo",
146-
"img": "/images/backblaze-logo.svg"
146+
"image": "/images/backblaze-logo.svg"
147147
},
148148
{
149149
"type": "logo",
150-
"img": "/images/dropbox-logo.svg"
150+
"image": "/images/dropbox-logo.svg"
151151
},
152152
{
153153
"type": "logo",
154-
"img": "/images/google-cloud-logo.svg"
154+
"image": "/images/google-cloud-logo.svg"
155155
},
156156
{
157157
"type": "logo",
158-
"img": "/images/one-drive-logo.svg"
158+
"image": "/images/one-drive-logo.svg"
159159
},
160160
{
161161
"type": "logo",
162-
"img": "/images/oracle-logo.svg"
162+
"image": "/images/oracle-logo.svg"
163163
}
164164
]
165165
}
@@ -397,6 +397,69 @@
397397
"h": 1,
398398
"img": "/images/summit-graphic.svg",
399399
"heading": "Roadmap"
400+
},
401+
"col_2": {
402+
"type": "custom",
403+
"cols": {
404+
"num": "col-12"
405+
},
406+
"customizations": [
407+
{
408+
"name": "Roadmap",
409+
"props": {
410+
"block": {
411+
"cta": {
412+
"text": "View roadmap in Github",
413+
"tag": "a",
414+
"theme": "secondary",
415+
"to": "https://github.com/data-preservation-programs/singularity/milestones"
416+
},
417+
"items": [
418+
{
419+
"heading": "September",
420+
"milestones": [
421+
{
422+
"title": "Milestone 1",
423+
"content": "Release S3 compatible API (Alpha)"
424+
},
425+
{
426+
"title": "Milestone 2",
427+
"content": "<span>Interface with one simple API that handles:</span><ul><li>Data Preparation</li><li>Deal-making</li><li>Tracking deal status</li></ul>"
428+
}
429+
]
430+
},
431+
{
432+
"heading": "October",
433+
"milestones": [
434+
{
435+
"title": "Milestone 3",
436+
"content": "Web UI for Singularity (Alpha): Does not require knowing Filecoin specifics but rather an easy drap and drop file upload experience"
437+
}
438+
]
439+
},
440+
{
441+
"heading": "November",
442+
"milestones": [
443+
{
444+
"title": "Milestone 4",
445+
"content": "S3 compatible API (Beta): A simple set of API’s (POST/GET/GET-STATUS) to be used by an independent software vendor (ISV) to store and retrieve data from Filecoin and track status of data stored"
446+
}
447+
]
448+
},
449+
{
450+
"heading": "December",
451+
"milestones": [
452+
{
453+
"title": "Milestone 5",
454+
"content": "Automate the process to find storage providers by integrating Singularity with Spade"
455+
}
456+
]
457+
}
458+
]
459+
}
460+
}
461+
}
462+
]
400463
}
401464
},
402465
{

‎pages/index.vue

+6
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,12 @@ const sections = computed(() => {
150150
}
151151
}
152152
153+
:deep(#section-roadmap) {
154+
div[data-block-id="col_1"] {
155+
margin-bottom: toRem(45);
156+
}
157+
}
158+
153159
:deep(#section-subfooter) {
154160
position: relative;
155161
padding-bottom: toRem(52);

0 commit comments

Comments
 (0)