Skip to content

Commit 1db0a3e

Browse files
mikechu-optimizelymikechu-optimizely
committed
Finish home page
1 parent 55abbcd commit 1db0a3e

File tree

10 files changed

+81
-92
lines changed

10 files changed

+81
-92
lines changed

‎src/App.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ import HelloWorld from './components/HelloWorld.vue'
99

1010
<div class="wrapper">
1111
<HelloWorld msg="Welcome" />
12+
13+
<nav>
14+
<RouterLink to="/">Home</RouterLink>
15+
<RouterLink to="/run">Run</RouterLink>
16+
</nav>
1217
</div>
1318
</header>
1419

‎src/components/TheWelcome.vue

Lines changed: 32 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
import WelcomeItem from './WelcomeItem.vue'
33
import DocumentationIcon from './icons/IconDocumentation.vue'
44
import ToolingIcon from './icons/IconTooling.vue'
5-
import EcosystemIcon from './icons/IconEcosystem.vue'
6-
import CommunityIcon from './icons/IconCommunity.vue'
5+
import GetStartedIcon from './icons/IconGetStarted.vue'
76
import SupportIcon from './icons/IconSupport.vue'
87
</script>
98

@@ -12,11 +11,12 @@ import SupportIcon from './icons/IconSupport.vue'
1211
<template #icon>
1312
<DocumentationIcon />
1413
</template>
15-
<template #heading>Documentation</template>
14+
<template #heading>Quick Start Documentation</template>
1615

17-
Vue’s
18-
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
19-
provides you with all information you need to get started.
16+
We'll be following much of the
17+
<a href="https://docs.developers.optimizely.com/feature-experimentation/docs/react-quickstart" target="_blank"
18+
rel="noopener">Optimizely React quick start documentation</a>
19+
as a basis for this example app.
2020
</WelcomeItem>
2121

2222
<WelcomeItem>
@@ -25,62 +25,43 @@ import SupportIcon from './icons/IconSupport.vue'
2525
</template>
2626
<template #heading>Tooling</template>
2727

28-
This project is served and bundled with
29-
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
30-
recommended IDE setup is
31-
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
32-
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
33-
you need to test your components and web pages, check out
34-
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
35-
<a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
28+
<p>
29+
We've created this project using the standard Vue tooling and wrapped it in a
30+
<a href="https://containers.dev/" target="_blank" rel="noopener">Dev Container</a>
31+
for use with VS Code.
32+
</p>
3633

37-
<br />
38-
39-
More instructions are available in <code>README.md</code>.
40-
</WelcomeItem>
41-
42-
<WelcomeItem>
43-
<template #icon>
44-
<EcosystemIcon />
45-
</template>
46-
<template #heading>Ecosystem</template>
47-
48-
Get official tools and libraries for your project:
49-
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
50-
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
51-
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
52-
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
53-
you need more resources, we suggest paying
54-
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
55-
a visit.
34+
<p>
35+
More instructions are available in
36+
<code>README</code>
37+
document.
38+
</p>
5639
</WelcomeItem>
5740

5841
<WelcomeItem>
5942
<template #icon>
60-
<CommunityIcon />
43+
<GetStartedIcon />
6144
</template>
62-
<template #heading>Community</template>
45+
<template #heading>Get Started</template>
6346

64-
Got stuck? Ask your question on
65-
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
66-
Discord server, or
67-
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
68-
>StackOverflow</a
69-
>. You should also subscribe to
70-
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
71-
the official
72-
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
73-
twitter account for latest news in the Vue world.
47+
<p>
48+
Once you have your Optimizely SDK key, you can add it to the
49+
<code>src/App.vue</code>.
50+
Then, click the Run nav link 👈 to see the example in action.
51+
</p>
7452
</WelcomeItem>
7553

7654
<WelcomeItem>
7755
<template #icon>
7856
<SupportIcon />
7957
</template>
80-
<template #heading>Support Vue</template>
58+
<template #heading>Optimizely Support</template>
8159

82-
As an independent project, Vue relies on community backing for its sustainability. You can help
83-
us by
84-
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
85-
</WelcomeItem>
86-
</template>
60+
If you have any qusetions about implementing Feature Experimentation, reach out to your Optimizely representative. You
61+
can also check out the
62+
the
63+
<a href="https://docs.developers.optimizely.com/feature-experimentation/docs" target="_blank" rel="noopener">SDK
64+
documentation</a>
65+
or GOTO our
66+
<a href="https://support.optimizely.com/hc/en-us" target="_blank" rel="noopener">support site</a>.
67+
</WelcomeItem></template>

‎src/components/icons/IconCommunity.vue

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/components/icons/IconDocumentation.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
2-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
2+
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
33
<path
4-
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
5-
/>
4+
d="M12 6.90909C10.8999 5.50893 9.20406 4.10877 5.00119 4.00602C4.72513 3.99928 4.5 4.22351 4.5 4.49965C4.5 6.54813 4.5 14.3034 4.5 16.597C4.5 16.8731 4.72515 17.09 5.00114 17.099C9.20405 17.2364 10.8999 19.0998 12 20.5M12 6.90909C13.1001 5.50893 14.7959 4.10877 18.9988 4.00602C19.2749 3.99928 19.5 4.21847 19.5 4.49461C19.5 6.78447 19.5 14.3064 19.5 16.5963C19.5 16.8724 19.2749 17.09 18.9989 17.099C14.796 17.2364 13.1001 19.0998 12 20.5M12 6.90909L12 20.5"
5+
stroke="#000000" stroke-linejoin="round" />
6+
<path
7+
d="M19.2353 6H21.5C21.7761 6 22 6.22386 22 6.5V19.539C22 19.9436 21.5233 20.2124 21.1535 20.0481C20.3584 19.6948 19.0315 19.2632 17.2941 19.2632C14.3529 19.2632 12 21 12 21C12 21 9.64706 19.2632 6.70588 19.2632C4.96845 19.2632 3.64156 19.6948 2.84647 20.0481C2.47668 20.2124 2 19.9436 2 19.539V6.5C2 6.22386 2.22386 6 2.5 6H4.76471"
8+
stroke="#000000" stroke-linejoin="round" />
69
</svg>
710
</template>

‎src/components/icons/IconEcosystem.vue

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/components/icons/IconGetStarted.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1"
3+
xmlns="http://www.w3.org/2000/svg">
4+
<defs></defs>
5+
<line class="cls-1" x1="9.14" y1="6.27" x2="9.14" y2="1.5" />
6+
<line class="cls-1" x1="14.86" y1="6.27" x2="14.86" y2="1.5" />
7+
<line class="cls-1" x1="8.18" y1="10.09" x2="4.36" y2="10.09" />
8+
<line class="cls-1" x1="19.64" y1="10.09" x2="15.82" y2="10.09" />
9+
<path class="cls-1"
10+
d="M20.59,10.09h0A8.6,8.6,0,0,0,12,1.5h0a8.6,8.6,0,0,0-8.59,8.59h0a1.9,1.9,0,0,0-1.88,2.23,2,2,0,0,0,2,1.59h17a2,2,0,0,0,2-1.59A1.9,1.9,0,0,0,20.59,10.09Z" />
11+
<path class="cls-1"
12+
d="M4.36,13.91H19.64a0,0,0,0,1,0,0v1A7.64,7.64,0,0,1,12,22.5h0a7.64,7.64,0,0,1-7.64-7.64v-1A0,0,0,0,1,4.36,13.91Z" />
13+
</svg>
14+
</template>
15+
16+
<style scoped>
17+
.cls-1 {
18+
fill: none;
19+
stroke: #9F9F9F;
20+
stroke-miterlimit: 10;
21+
stroke-width: 1.91px;
22+
}</style>

‎src/components/icons/IconSupport.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
2+
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
33
<path
4-
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
5-
/>
4+
d="M4.42602 12.9469L10.1622 19.1217C11.1546 20.1899 12.8454 20.1899 13.8378 19.1217L19.574 12.9469C21.4753 10.9002 21.4753 7.58179 19.574 5.53505C17.6726 3.48832 14.5899 3.48832 12.6885 5.53505V5.53505C12.3168 5.93527 11.6832 5.93527 11.3115 5.53505V5.53505C9.4101 3.48832 6.32738 3.48832 4.42602 5.53505C2.52466 7.58178 2.52466 10.9002 4.42602 12.9469Z"
5+
stroke-width="2" />
66
</svg>
77
</template>

‎src/components/icons/IconTooling.vue

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,7 @@
1-
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
21
<template>
3-
<svg
4-
xmlns="http://www.w3.org/2000/svg"
5-
xmlns:xlink="http://www.w3.org/1999/xlink"
6-
aria-hidden="true"
7-
role="img"
8-
class="iconify iconify--mdi"
9-
width="24"
10-
height="24"
11-
preserveAspectRatio="xMidYMid meet"
12-
viewBox="0 0 24 24"
13-
>
2+
<svg width="20" height="20" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
143
<path
15-
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
16-
fill="currentColor"
17-
></path>
4+
d="M31.449 6.748c-0.337-0.155-0.737-0.096-1.017 0.152l-5.041 4.528-4.551-4.669 4.506-5.204c0.245-0.283 0.305-0.673 0.152-1.016s-0.489-0.553-0.86-0.553h-0.271c-2.785 0-7.593 0.239-9.739 2.417l-0.433 0.43c-2.29 2.337-2.697 6.168-1.49 9.081l-11.54 11.778c-1.556 1.578-1.556 4.135 0 5.713l1.409 1.428c0.778 0.788 1.798 1.183 2.818 1.183s2.040-0.395 2.817-1.183l11.71-11.804c1.107 0.599 2.625 0.989 3.899 0.989 2.043 0 3.98-0.824 5.454-2.32l0.427-0.433c2.331-2.364 2.296-7.416 2.306-9.638 0.001-0.378-0.216-0.721-0.554-0.878zM28.302 15.906l-0.371 0.433c-1.117 1.134-2.578 1.677-4.114 1.677-0.76 0-1.784-0.143-2.476-0.431-0.625-0.259-1.206-0.634-1.725-1.107l-12.818 12.925c-0.376 0.382-0.876 0.592-1.408 0.592s-1.032-0.21-1.409-0.592l-1.408-1.427c-0.777-0.788-0.777-2.070-0.001-2.857l12.524-12.777c-0.42-0.611-0.706-1.278-0.877-1.968h-0.001c-0.482-1.95-0.201-4.644 1.313-6.189l0.431-0.435c1.298-1.317 4.67-1.707 6.537-1.822l-3.668 4.236c-0.328 0.379-0.311 0.95 0.038 1.309l5.798 5.948c0.352 0.362 0.92 0.383 1.299 0.047l4.082-3.676c-0.122 1.98-0.506 4.856-1.748 6.115z">
5+
</path>
186
</svg>
197
</template>

‎src/router/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ const router = createRouter({
1010
component: HomeView
1111
},
1212
{
13-
path: '/about',
14-
name: 'about',
13+
path: '/run',
14+
name: 'run',
1515
// route level code-splitting
1616
// this generates a separate chunk (About.[hash].js) for this route
1717
// which is lazy-loaded when the route is visited.
18-
component: () => import('../views/AboutView.vue')
18+
component: () => import('../views/RunView.vue')
1919
}
2020
]
2121
})

‎src/views/AboutView.vue renamed to ‎src/views/RunView.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
<template>
2-
<div class="about">
3-
<h1>This is an about page</h1>
2+
<div class="run">
3+
<h1>Experiment Output</h1>
4+
<p>
5+
[Loop through the results]
6+
</p>
47
</div>
58
</template>
69

710
<style>
811
@media (min-width: 1024px) {
9-
.about {
12+
.run {
1013
min-height: 100vh;
1114
display: flex;
15+
flex-direction: column;
1216
align-items: center;
1317
}
1418
}

0 commit comments

Comments
 (0)