Skip to content

Commit 3bc73d0

Browse files
pwizlameganelachenyderrickmehaffy
authored
New Quick Start Guide (#288)
* Add code-switcher vuepress plugin * Create POC of code-switcher plugin usage * Remove code-switcher plugin, add copy-code plugin - code-switcher plugin is not compatible with screenshots inside "tabs". - copy-code plugin is ready to be used but not configured yet * Update integration links to form a 3x3 flex layout * Add first version of Quick Start Guide rewrite * Step 1 (installation) is written for both paths * Steps 2 & 3 are just outlines for now * Current Quick Start Guide file has not been deleted yet, but renamed * Added first screenshots * Add meta tags * Add first version of Step 2 for Starters path * Remove unnecessary edit icon screenshot * Customize CSS * 💄 Lint & reword parts of the Starters path * Add first version of Step 2 for Hands-on path * Restore integration links look * Delete old quick start guide files and create a 3-step, 3-file QSG * Update frontmatter title of some files for proper "next/prev" buttons * Use 'Content-Types Builder' in all dev docs for consistency * Update wording for consuming API intro in hands-on path * WIP: Create IntegrationLinksAlt for an alternate look * Improve draft * Fix some formatting * Reword some parts * Add a few links * Improve CSS for InstallLinkAlt components * Update wording & links in integration guides * Add link to starters in step 3 for starters path * Rename quick-start-step1.md back to quick-start.md to avoid breaking links * Fix sidebar links to consider quick-start-step1 file renaming * Group the 3 steps back into a unique file * Highlight path buttons & create new Requirements style * Delete intermediate congrats * Add more margin below new Requirements block * Replace NPX by NPM in code group titles * Title case UI elements * Add more margin above path buttons * Fix links to quick start guide featured in integrations guide * Rework steps 1 & 2 of Starters path * Fix step 2 links in integration guides * Fix misnaming Step vs. Part * Rework Step 3 of starters path * Add more CSS customizations * Rework introduction * Rework part 1 of Starters path * Rework part 2 of Starters path * Rework part 3 of Starters path * Slightly reword congratulations conclusion of Starters path * Add consistency to step naming * Replace Slack by Discord * Rework Hands-on path * Rename image files (step → part) * Update images * Improve again Starters path * Improve again Hands-on path * Experiment with alternate callout styles * Fix missing uppercase * Fine-tune CSS * Tone down "congrats" callouts * Add "use your API" as a final step * Simplify "To go further" sections * Include going to the UI section as a first step in procedures * 💄 Clean up CSS * 💄 Lint * Adjust viewbox of some integration guide logos so they fit better * Update wording and link for intro of integration guides * Restore meta-title for FAQ * Fix wrong file for Permissions screenshot * Be more explicit in tip about server not running * Add link to Gatsby blog starter * Switch order for npm / yarn * Remove mention of creating your own category from the CM Because you can actually can't 🤷 * Remove emoji in 'Choose an author and a category…' paragraph * Fix (again 😅) wrong screenshot for Users & Permissions * Fix "Draft" not being a button * Fix bullet points & structure in requirements Co-authored-by: meganelacheny <[email protected]> * Enhance sentence about using Gatsby starter Co-authored-by: meganelacheny <[email protected]> * Remove '+' from button names * Replace 'dialog' by 'window' * Improve sentence about being prompted for 'Quick Start' in terminal * Replace 'left-hand menu' with 'main navigation' * Update wording: frontend → front end, backend → back end * Rename Parts A, B… instead of 1, 2… To avoid confusion between parts and steps. * Use hyphenated 'front-end' and 'back-end' when appropriate See https://css-tricks.com/poll-results-front-end-front-end/ * Update formatting + add many-to-many icon * Remove capitalization for "admin panel" * Replace "dropdown" with "drop-down list" * Improve Starters path * Add @vuepress/back-to-top plugin https://v1.vuepress.vuejs.org/plugin/official/plugin-back-to-top.html As a solution to a suggestion from Maeva. * Improve Hands-on path * Update path buttons design * Update InstallLinkAlt button design * Fix InstallLinkAlt button border * 💄 Add some tiny improvements * temp fix for vercel * temp fix for vercel patch 2 * Fix code groups not rendering properly * Embed code-groups in <ClientOnly> component Not rendering code-blocks seems to be a SSR issue. Using [`ClientOnly`](https://vuepress.vuejs.org/guide/using-vue.html#browser-api-access-restrictions) could force render the embedded components on the client and possibly fix it. * Update Nuxt logo * Adapt to latest Gatsby starter release * Switch to card-style tabs to prevent SSR rendering issues of code-groups Once [this issue]( vuejs/vuepress#2711) with VuePress is fixed, we might be able to use the prettier code-groups again :-) * Center Next.js logo * Replace "requirements" by "prerequisites" * Remove unnecessary occurences of "just" It would imply that it's easy, and this is something to avoid in the documentation :-) * Tinker with SVG logo attributes to better align them * Reduce Ruby + Flutter logo sizes * Reverting temp fix for Vercel preview Co-authored-by: meganelacheny <[email protected]> Co-authored-by: Derrick Mehaffy <[email protected]>
1 parent 794a006 commit 3bc73d0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+2056
-143
lines changed

Diff for: ‎docs/.vuepress/config.js

+9-10
Original file line numberDiff line numberDiff line change
@@ -131,9 +131,9 @@ const sidebar = {
131131
['/developer-docs/latest/development/plugins/documentation', 'API Documentation'],
132132
['/developer-docs/latest/development/plugins/email', 'Email'],
133133
['/developer-docs/latest/development/plugins/graphql', 'GraphQL'],
134-
['/developer-docs/latest/development/plugins/i18n', 'Internationalization (i18n)'],
134+
['/developer-docs/latest/development/plugins/i18n', 'Internationalization (i18n)'],
135135
['/developer-docs/latest/development/plugins/upload', 'Upload'],
136-
['/developer-docs/latest/development/plugins/users-permissions', 'Users & Permissions']
136+
['/developer-docs/latest/development/plugins/users-permissions', 'Users & Permissions'],
137137
],
138138
sidebarDepth: 1,
139139
},
@@ -335,18 +335,12 @@ const sidebar = {
335335
collapsable: false,
336336
title: 'Plugins',
337337
children: [
338-
[
339-
'/user-docs/latest/plugins/introduction-to-plugins',
340-
'Introduction to plugins',
341-
],
338+
['/user-docs/latest/plugins/introduction-to-plugins', 'Introduction to plugins'],
342339
[
343340
'/user-docs/latest/plugins/installing-plugins-via-marketplace',
344341
'Installing plugins via the Marketplace',
345342
],
346-
[
347-
'/user-docs/latest/plugins/strapi-plugins',
348-
'List of Strapi plugins',
349-
],
343+
['/user-docs/latest/plugins/strapi-plugins', 'List of Strapi plugins'],
350344
],
351345
},
352346
{
@@ -397,6 +391,11 @@ module.exports = {
397391
siteTitle: (_, $site) => $site.title,
398392
title: $page => $page.title,
399393
},
394+
'vuepress-plugin-code-copy': {
395+
color: '#ffffff',
396+
successText: 'Copied to clipboard!',
397+
},
398+
'@vuepress/back-to-top': {},
400399
},
401400
head: [
402401
[

Diff for: ‎docs/.vuepress/theme/global-components/InstallLinkAlt.vue

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<template>
2+
<router-link :to="link" class="install-link install-link--alt">
3+
<span class="install-link__container">
4+
<span class="icon__wrapper">
5+
<slot name="icon" />
6+
</span>
7+
<span class="title__wrapper">
8+
<p class="title"><slot name="title" /></p>
9+
<!-- <p class="description"><slot name="description" /></p> -->
10+
</span>
11+
</span>
12+
13+
</router-link>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: 'InstallLinkAlt',
19+
props: {
20+
link: {
21+
type: String,
22+
required: true
23+
}
24+
}
25+
}
26+
</script>
27+
28+
<style lang="scss" scoped>
29+
.install-link {
30+
background-color: #f8f8f8;
31+
display: flex;
32+
flex-direction: column;
33+
align-items: center;
34+
justify-content: center;
35+
color: #2c3e50;
36+
padding: 16px;
37+
border-radius: 50%;
38+
width: 40px;
39+
height: 40px;
40+
margin: 16px 0; // You'd normally do layout margins etc from the parent, but seeing the parent
41+
// is a markdown file, that's a bit annoying
42+
text-decoration: none !important;
43+
transition: border-color ease-out .2s;
44+
45+
&:after {
46+
content:'';
47+
position: absolute;
48+
width: 72px;
49+
height: 72px;
50+
border-radius: 50%;
51+
border: solid 1px #bbbbba;
52+
}
53+
54+
&__container {
55+
display: flex;
56+
flex-direction: column;
57+
height: 40px;
58+
}
59+
60+
.icon__wrapper {
61+
flex-shrink: 0;
62+
width: 40px;
63+
height: 40px;
64+
margin-left: auto;
65+
margin-right: auto;
66+
transition: all ease-out .2s;
67+
68+
& ::v-deep svg {
69+
width: 100%;
70+
height: auto;
71+
}
72+
}
73+
74+
.title {
75+
margin-top: 12px;
76+
text-align: center;
77+
78+
&__wrapper {
79+
opacity: 0;
80+
transition: opacity ease-out .2s;
81+
}
82+
}
83+
84+
.description {
85+
font-size: 12px;
86+
margin: 0;
87+
}
88+
89+
&:hover {
90+
&:after {
91+
border-color: #007EFF;
92+
border-width: 2px;
93+
}
94+
95+
.title__wrapper {
96+
opacity: 1;
97+
}
98+
99+
.title {
100+
text-decoration: none;
101+
}
102+
103+
.icon__wrapper {
104+
width: 40px;
105+
height: 44px;
106+
}
107+
}
108+
}
109+
</style>

Diff for: ‎docs/.vuepress/theme/global-components/IntegrationLinks.vue

+20-19
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<div>
2+
<div class="integration-links">
33
<!-- React -->
4-
<div>
4+
<div class="install-link__wrapper">
55
<InstallLink
66
link="/developer-docs/latest/developer-resources/content-api/integrations/react.html"
77
>
@@ -39,7 +39,7 @@
3939
</div>
4040

4141
<!-- Vue -->
42-
<div>
42+
<div class="install-link__wrapper">
4343
<InstallLink
4444
link="/developer-docs/latest/developer-resources/content-api/integrations/vue-js.html"
4545
>
@@ -69,7 +69,7 @@
6969
</div>
7070

7171
<!-- Angular -->
72-
<div>
72+
<div class="install-link__wrapper">
7373
<InstallLink
7474
link="/developer-docs/latest/developer-resources/content-api/integrations/angular.html"
7575
>
@@ -120,7 +120,7 @@
120120
</div>
121121

122122
<!-- Next.js -->
123-
<div>
123+
<div class="install-link__wrapper">
124124
<InstallLink
125125
link="/developer-docs/latest/developer-resources/content-api/integrations/next-js.html"
126126
>
@@ -172,7 +172,7 @@
172172
</div>
173173

174174
<!-- Nuxt.js -->
175-
<div>
175+
<div class="install-link__wrapper">
176176
<InstallLink
177177
link="/developer-docs/latest/developer-resources/content-api/integrations/nuxt-js.html"
178178
>
@@ -202,7 +202,7 @@
202202
</div>
203203

204204
<!-- GraphQL -->
205-
<div>
205+
<div class="install-link__wrapper">
206206
<InstallLink
207207
link="/developer-docs/latest/developer-resources/content-api/integrations/graphql.html"
208208
>
@@ -341,7 +341,7 @@
341341
</div>
342342

343343
<!-- Gatsby -->
344-
<div>
344+
<div class="install-link__wrapper">
345345
<InstallLink
346346
link="/developer-docs/latest/developer-resources/content-api/integrations/gatsby.html"
347347
>
@@ -370,7 +370,7 @@
370370
</div>
371371

372372
<!-- Gridsome -->
373-
<div>
373+
<div class="install-link__wrapper">
374374
<InstallLink
375375
link="/developer-docs/latest/developer-resources/content-api/integrations/gridsome.html"
376376
>
@@ -424,7 +424,7 @@
424424
</div>
425425

426426
<!-- Jekyll -->
427-
<div>
427+
<div class="install-link__wrapper">
428428
<InstallLink
429429
link="/developer-docs/latest/developer-resources/content-api/integrations/jekyll.html"
430430
>
@@ -497,7 +497,7 @@
497497
</div>
498498

499499
<!-- 11ty -->
500-
<div>
500+
<div class="install-link__wrapper">
501501
<InstallLink
502502
link="/developer-docs/latest/developer-resources/content-api/integrations/11ty.html"
503503
>
@@ -532,7 +532,7 @@
532532
</div>
533533

534534
<!-- Svelte -->
535-
<div>
535+
<div class="install-link__wrapper">
536536
<InstallLink
537537
link="/developer-docs/latest/developer-resources/content-api/integrations/svelte.html"
538538
>
@@ -574,7 +574,7 @@
574574
</div>
575575

576576
<!-- Sapper -->
577-
<div>
577+
<div class="install-link__wrapper">
578578
<InstallLink
579579
link="/developer-docs/latest/developer-resources/content-api/integrations/sapper.html"
580580
>
@@ -616,7 +616,7 @@
616616
</div>
617617

618618
<!-- Ruby -->
619-
<div>
619+
<div class="install-link__wrapper">
620620
<InstallLink
621621
link="/developer-docs/latest/developer-resources/content-api/integrations/ruby.html"
622622
>
@@ -1273,7 +1273,7 @@
12731273
</div>
12741274

12751275
<!-- Python -->
1276-
<div>
1276+
<div class="install-link__wrapper">
12771277
<InstallLink
12781278
link="/developer-docs/latest/developer-resources/content-api/integrations/python.html"
12791279
>
@@ -1313,7 +1313,7 @@
13131313
</div>
13141314

13151315
<!-- Dart -->
1316-
<div>
1316+
<div class="install-link__wrapper">
13171317
<InstallLink link="/developer-docs/latest/developer-resources/content-api/integrations/dart.html">
13181318
<template #icon>
13191319
<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M70.534 69.696L53.988 53.15l.07 119.6.198 5.59c.082 2.63.57 5.598 1.384 8.674l131.104 46.23 32.772-14.52.012-.04L70.534 69.696" fill="#00D2B8"/><path d="M55.64 187.014l.008.008c-.008-.054-.036-.114-.036-.17 0 .056.008.108.028.162zm163.876 31.71l-32.772 14.52-131.096-46.222c2.504 9.608 8.048 20.408 14.014 26.314l42.784 42.54 95.13.124 11.952-37.316-.012.04z" fill="#55DDCA"/><path d="M3.034 130.116c-4.236 4.522-2.132 13.85 4.688 20.722L37.14 180.5l18.5 6.514c-.814-3.076-1.302-6.044-1.384-8.674l-.198-5.59-.07-119.6-50.954 76.966z" fill="#0081C6"/><path d="M187.82 54.686c-3.076-.786-6.026-1.272-8.7-1.356l-5.908-.204-119.224.016 165.556 165.542h.014l14.54-32.804L187.82 54.686" fill="#0079B3"/><path d="M187.67 54.654c.064.014.114.032.156.038l-.006-.006c-.036-.018-.086-.018-.15-.032zm26.448 14.078c-6.008-6.058-16.666-11.564-26.292-14.04l46.272 131.188-14.54 32.804h-.014l35.532-11.348.076-97.416-41.034-41.188z" fill="#00A4E4"/><path d="M181.338 36.298L151.684 6.862c-6.858-6.794-16.19-8.908-20.7-4.684L53.988 53.142l119.224-.016 5.908.204c2.674.084 5.624.57 8.7 1.356l-6.482-18.388z" fill="#00D2B8"/></svg>
@@ -1326,7 +1326,7 @@
13261326
</div>
13271327

13281328
<!-- Flutter -->
1329-
<div>
1329+
<div class="install-link__wrapper">
13301330
<InstallLink link="/developer-docs/latest/developer-resources/content-api/integrations/flutter.html">
13311331
<template #icon>
13321332
<svg enable-background="new 0 0 1999 2474.2" viewBox="0 0 1999 2474.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(380.4042 -380.4175 -53.104 -53.1021 908228.3125 -700059.5)" gradientUnits="userSpaceOnUse" x1="-2115.0029" x2="-2115.0029" y1="1930.7407" y2="1929.7407"><stop offset=".2" stop-opacity=".15"/><stop offset=".85" stop-color="#616161" stop-opacity=".01"/></linearGradient><linearGradient id="b" gradientTransform="matrix(565.291 0 0 -380.9571 1196694.25 743476.5625)" gradientUnits="userSpaceOnUse" x1="-2115.2688" x2="-2114.2688" y1="1946.3563" y2="1946.3563"><stop offset=".2" stop-opacity=".55"/><stop offset=".85" stop-color="#616161" stop-opacity=".01"/></linearGradient><path d="m381 1618-381-381 1237.1-1237h761.9m0 1141.5h-761.9l-285.4 285.4 381 381" fill="#42a5f5" fill-opacity=".8"/><path d="m951.7 2188.8 285.4 285.4h761.9l-666.3-666.3" fill="#0d47a1"/><path d="m571.6 1808.1 380.4-380.5 380.4 380.4-380.4 380.5z" fill="#42a5f5"/><path d="m952 2188.5 380.4-380.4 53.1 53.1-380.4 380.4z" fill="url(#a)"/><path d="m951.7 2188.8 565.3-195.3-184.3-185.7" fill="url(#b)"/></svg>
@@ -1339,7 +1339,7 @@
13391339
</div>
13401340

13411341
<!-- GO -->
1342-
<div>
1342+
<div class="install-link__wrapper">
13431343
<InstallLink link="/developer-docs/latest/developer-resources/content-api/integrations/go.html">
13441344
<template #icon>
13451345
<svg version="1.1" viewBox="0 0 400 544.43" xmlns="http://www.w3.org/2000/svg">
@@ -1360,7 +1360,7 @@
13601360
</div>
13611361

13621362
<!-- PHP -->
1363-
<div>
1363+
<div class="install-link__wrapper">
13641364
<InstallLink link="/developer-docs/latest/developer-resources/content-api/integrations/php.html">
13651365
<template #icon>
13661366
<svg preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 250 135" xmlns="http://www.w3.org/2000/svg">
@@ -1392,6 +1392,7 @@
13921392
</div>
13931393
</div>
13941394
</template>
1395+
13951396
<script>
13961397
import InstallLink from './InstallLink.vue';
13971398

0 commit comments

Comments
 (0)