Skip to content

Commit

Permalink
New Quick Start Guide (#288)
Browse files Browse the repository at this point in the history
* 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 <megane.lacheny@strapi.io>

* Enhance sentence about using Gatsby starter

Co-authored-by: meganelacheny <megane.lacheny@strapi.io>

* 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 <megane.lacheny@strapi.io>
Co-authored-by: Derrick Mehaffy <derrickmehaffy@gmail.com>
  • Loading branch information
3 people committed Jun 23, 2021
1 parent 794a006 commit 3bc73d0
Show file tree
Hide file tree
Showing 47 changed files with 2,056 additions and 143 deletions.
19 changes: 9 additions & 10 deletions docs/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -131,9 +131,9 @@ const sidebar = {
['/developer-docs/latest/development/plugins/documentation', 'API Documentation'],
['/developer-docs/latest/development/plugins/email', 'Email'],
['/developer-docs/latest/development/plugins/graphql', 'GraphQL'],
['/developer-docs/latest/development/plugins/i18n', 'Internationalization (i18n)'],
['/developer-docs/latest/development/plugins/i18n', 'Internationalization (i18n)'],
['/developer-docs/latest/development/plugins/upload', 'Upload'],
['/developer-docs/latest/development/plugins/users-permissions', 'Users & Permissions']
['/developer-docs/latest/development/plugins/users-permissions', 'Users & Permissions'],
],
sidebarDepth: 1,
},
Expand Down Expand Up @@ -335,18 +335,12 @@ const sidebar = {
collapsable: false,
title: 'Plugins',
children: [
[
'/user-docs/latest/plugins/introduction-to-plugins',
'Introduction to plugins',
],
['/user-docs/latest/plugins/introduction-to-plugins', 'Introduction to plugins'],
[
'/user-docs/latest/plugins/installing-plugins-via-marketplace',
'Installing plugins via the Marketplace',
],
[
'/user-docs/latest/plugins/strapi-plugins',
'List of Strapi plugins',
],
['/user-docs/latest/plugins/strapi-plugins', 'List of Strapi plugins'],
],
},
{
Expand Down Expand Up @@ -397,6 +391,11 @@ module.exports = {
siteTitle: (_, $site) => $site.title,
title: $page => $page.title,
},
'vuepress-plugin-code-copy': {
color: '#ffffff',
successText: 'Copied to clipboard!',
},
'@vuepress/back-to-top': {},
},
head: [
[
Expand Down
109 changes: 109 additions & 0 deletions docs/.vuepress/theme/global-components/InstallLinkAlt.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<template>
<router-link :to="link" class="install-link install-link--alt">
<span class="install-link__container">
<span class="icon__wrapper">
<slot name="icon" />
</span>
<span class="title__wrapper">
<p class="title"><slot name="title" /></p>
<!-- <p class="description"><slot name="description" /></p> -->
</span>
</span>

</router-link>
</template>

<script>
export default {
name: 'InstallLinkAlt',
props: {
link: {
type: String,
required: true
}
}
}
</script>

<style lang="scss" scoped>
.install-link {
background-color: #f8f8f8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #2c3e50;
padding: 16px;
border-radius: 50%;
width: 40px;
height: 40px;
margin: 16px 0; // You'd normally do layout margins etc from the parent, but seeing the parent
// is a markdown file, that's a bit annoying
text-decoration: none !important;
transition: border-color ease-out .2s;
&:after {
content:'';
position: absolute;
width: 72px;
height: 72px;
border-radius: 50%;
border: solid 1px #bbbbba;
}
&__container {
display: flex;
flex-direction: column;
height: 40px;
}
.icon__wrapper {
flex-shrink: 0;
width: 40px;
height: 40px;
margin-left: auto;
margin-right: auto;
transition: all ease-out .2s;
& ::v-deep svg {
width: 100%;
height: auto;
}
}
.title {
margin-top: 12px;
text-align: center;
&__wrapper {
opacity: 0;
transition: opacity ease-out .2s;
}
}
.description {
font-size: 12px;
margin: 0;
}
&:hover {
&:after {
border-color: #007EFF;
border-width: 2px;
}
.title__wrapper {
opacity: 1;
}
.title {
text-decoration: none;
}
.icon__wrapper {
width: 40px;
height: 44px;
}
}
}
</style>
39 changes: 20 additions & 19 deletions docs/.vuepress/theme/global-components/IntegrationLinks.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<div class="integration-links">
<!-- React -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/react.html"
>
Expand Down Expand Up @@ -39,7 +39,7 @@
</div>

<!-- Vue -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/vue-js.html"
>
Expand Down Expand Up @@ -69,7 +69,7 @@
</div>

<!-- Angular -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/angular.html"
>
Expand Down Expand Up @@ -120,7 +120,7 @@
</div>

<!-- Next.js -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/next-js.html"
>
Expand Down Expand Up @@ -172,7 +172,7 @@
</div>

<!-- Nuxt.js -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/nuxt-js.html"
>
Expand Down Expand Up @@ -202,7 +202,7 @@
</div>

<!-- GraphQL -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/graphql.html"
>
Expand Down Expand Up @@ -341,7 +341,7 @@
</div>

<!-- Gatsby -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/gatsby.html"
>
Expand Down Expand Up @@ -370,7 +370,7 @@
</div>

<!-- Gridsome -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/gridsome.html"
>
Expand Down Expand Up @@ -424,7 +424,7 @@
</div>

<!-- Jekyll -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/jekyll.html"
>
Expand Down Expand Up @@ -497,7 +497,7 @@
</div>

<!-- 11ty -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/11ty.html"
>
Expand Down Expand Up @@ -532,7 +532,7 @@
</div>

<!-- Svelte -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/svelte.html"
>
Expand Down Expand Up @@ -574,7 +574,7 @@
</div>

<!-- Sapper -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/sapper.html"
>
Expand Down Expand Up @@ -616,7 +616,7 @@
</div>

<!-- Ruby -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/ruby.html"
>
Expand Down Expand Up @@ -1273,7 +1273,7 @@
</div>

<!-- Python -->
<div>
<div class="install-link__wrapper">
<InstallLink
link="/developer-docs/latest/developer-resources/content-api/integrations/python.html"
>
Expand Down Expand Up @@ -1313,7 +1313,7 @@
</div>

<!-- Dart -->
<div>
<div class="install-link__wrapper">
<InstallLink link="/developer-docs/latest/developer-resources/content-api/integrations/dart.html">
<template #icon>
<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>
Expand All @@ -1326,7 +1326,7 @@
</div>

<!-- Flutter -->
<div>
<div class="install-link__wrapper">
<InstallLink link="/developer-docs/latest/developer-resources/content-api/integrations/flutter.html">
<template #icon>
<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>
Expand All @@ -1339,7 +1339,7 @@
</div>

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

<!-- PHP -->
<div>
<div class="install-link__wrapper">
<InstallLink link="/developer-docs/latest/developer-resources/content-api/integrations/php.html">
<template #icon>
<svg preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 250 135" xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -1392,6 +1392,7 @@
</div>
</div>
</template>

<script>
import InstallLink from './InstallLink.vue';
Expand Down

0 comments on commit 3bc73d0

Please sign in to comment.