Skip to content

Commit

Permalink
Docs/dark mode v2 (#1233)
Browse files Browse the repository at this point in the history
* docs: Enable dark mode and other CSS changes

* docs: Fix underline LatestUpdates component

* docs: dark mode v2

* docs: Fix Dark Mode Docsearch

* docs: update announcementBar and thumbnail
  • Loading branch information
carolinamenezes authored Apr 22, 2022
1 parent 9c63a27 commit 7bccc3a
Show file tree
Hide file tree
Showing 65 changed files with 702 additions and 651 deletions.
2 changes: 1 addition & 1 deletion docs/docs/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ sidebar_position: 3

---

:::note
:::info
This guide is for intermediate to advanced developers. For a comprehensive intro to FastStore, head to our [getting started tutorial](/tutorials/fundamentals/0)!
:::

Expand Down
8 changes: 4 additions & 4 deletions docs/docs/reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ FastStore encapsulates the following three main packages:

<FastStorePackages>

[ ![](/img/faststore-ui.png) **FastStore UI** A React component library of basic UI primitives built on Atomic Design. FastStore UI complies with accessibility standards and is compatible with any CSS framework and preprocessor.](/reference/ui/get-started-faststore-ui)
[ <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="currentColor" stroke-linejoin="miter" stroke-miterlimit="10"><polyline points="44 21 44 4 4 4 4 44 21 44"></polyline> <line data-cap="butt" x1="45" y1="45" x2="29" y2="29" stroke-linecap="butt" stroke="#f71963"></line> <polyline points="29 44 29 29 44 29" stroke="#f71963"></polyline></g></svg> **FastStore UI** A React component library of basic UI primitives built on Atomic Design. FastStore UI complies with accessibility standards and is compatible with any CSS framework and preprocessor.](/reference/ui/get-started-faststore-ui)

[ ![](/img/faststore-sdk.png) **FastStore SDK** An extensible state management library, compatible with Google Analytics 4, that handles all meaningful states an ecommerce store might have, such as, cart and user session states.](/reference/sdk/faststore-sdk)
[ <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 32 32"><g stroke-linecap="square" stroke-width="1" stroke-miterlimit="10" fill="none" stroke="currentColor" stroke-linejoin="miter" class="nc-icon-wrapper" transform="translate(0.5 0.5)"><polyline points="2 6.5 9 10 16 6.5" data-cap="butt" stroke-linecap="butt"></polyline><line x1="9" y1="10" x2="9" y2="18.5" data-cap="butt" stroke-linecap="butt"></line><polygon points="16 6.5 9 2.999 2 6.5 2 15 9 18.5 16 15 16 6.5"></polygon><polyline points="16 6.5 23 10 30 6.5" data-cap="butt" stroke-linecap="butt"></polyline><line x1="23" y1="10" x2="23" y2="18.5" data-cap="butt" stroke-linecap="butt"></line><polygon points="30 6.5 23 2.999 16 6.5 16 15 23 18.5 30 15 30 6.5"></polygon><polyline points="9 18.5 16 22 23 18.5" data-cap="butt" stroke-linecap="butt" stroke="#f71963"></polyline><line x1="16" y1="22" x2="16" y2="30.5" data-cap="butt" stroke-linecap="butt" stroke="#f71963"></line><polygon points="23 18.5 16 14.999 9 18.5 9 27 16 30.5 23 27 23 18.5" stroke="#f71963"></polygon></g></svg> **FastStore SDK** An extensible state management library, compatible with Google Analytics 4, that handles all meaningful states an ecommerce store might have, such as, cart and user session states.](/reference/sdk/faststore-sdk)

[ ![](/img/faststore-api.png) **FastStore API** A GraphQL API layer between your store and your favorite ecommerce platform.](/reference/api/faststore-api)
[ <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="currentColor" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><path d="M14.2,26a14,14,0,1,1,19.6,0"></path><circle cx="24" cy="16" r="6"></circle><circle cx="24" cy="29" r="3" stroke="#f71963"></circle><circle cx="24" cy="43" r="3" stroke="#f71963"></circle><circle cx="13" cy="40" r="3" stroke="#f71963"></circle><line x1="24" y1="32" x2="24" y2="40" data-cap="butt" stroke-linecap="butt" stroke="#f71963"></line><polyline points="13 37 13 33 21 29" data-cap="butt" stroke-linecap="butt" stroke="#f71963"></polyline><circle cx="35" cy="40" r="3" stroke="#f71963"></circle><polyline points="35 37 35 33 27 29" data-cap="butt" stroke-linecap="butt" stroke="#f71963"></polyline></g></svg> **FastStore API** A GraphQL API layer between your store and your favorite ecommerce platform.](/reference/api/faststore-api)

</FastStorePackages>

Expand All @@ -46,7 +46,7 @@ If you check FastStore repository on GitHub, you'll also find some Gatsby-specif

<IconGrid>

[ ![](/img/github.png) **GitHub** Star and watch our GitHub repository for future updates.](https://github.com/vtex/faststore)
[ <svg xmlns="http://www.w3.org/2000/svg" width="510" height="510" viewBox="0 0 30 30" fill="var(--ifm-color-black)"> <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path></svg> **GitHub** Star and watch our GitHub repository for future updates.](https://github.com/vtex/faststore)

[ ![](/img/youtube.png) **Office hours** Join our Office Hours to chat directly with FastStore developers.](https://www.youtube.com/playlist?list=PLCO3mIyiWj2bkzFzS1N9XLX_iwk0BpO-V)

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/tutorials.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import CardGrid from "@site/src/components/CardGrid/CardGrid"

[ ![](/img/logo.svg) **Integrating storefronts with VTEX Headless CMS** *Integrate your storefront project with *VTEX Headless CMS*, a headless content management system.* ](/tutorials/cms-overview)

[ ![](/img/Nextjs_Logo.svg) **Creating storefronts with FastStore and Next.js** *Coming soon.* ](./)
[ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="m22.43.01-.73.07C14.88.69 8.5 4.37 4.45 10.02A23.75 23.75 0 0 0 .22 20.51a18.3 18.3 0 0 0-.22 3.5c0 1.78.02 2.17.22 3.49A24.1 24.1 0 0 0 21.7 47.94c.73.08 3.87.08 4.6 0a24.22 24.22 0 0 0 8.65-2.53c.4-.2.49-.27.43-.31-.03-.03-1.8-2.4-3.9-5.24l-3.84-5.19-4.81-7.11a688.2 688.2 0 0 0-4.84-7.12c-.02 0-.04 3.16-.05 7.02-.02 6.76-.02 7.04-.1 7.2a.85.85 0 0 1-.42.42c-.15.08-.28.1-.99.1h-.81l-.22-.15a.88.88 0 0 1-.31-.34l-.1-.2.01-9.42.02-9.4.14-.19c.08-.1.24-.22.35-.29.19-.09.27-.1 1.08-.1.95 0 1.11.04 1.36.31.07.08 2.68 4 5.8 8.72l9.46 14.34 3.8 5.76.2-.13c1.7-1.1 3.5-2.68 4.92-4.32a23.89 23.89 0 0 0 5.65-12.27c.2-1.32.22-1.7.22-3.5 0-1.78-.02-2.17-.22-3.49A24.1 24.1 0 0 0 26.37.07c-.45-.04-3.55-.1-3.94-.06zm9.82 14.52a.95.95 0 0 1 .48.55c.03.12.04 2.73.03 8.61v8.44l-1.5-2.28-1.49-2.28v-6.14c0-3.96.02-6.19.05-6.3a.96.96 0 0 1 .46-.59c.2-.1.26-.1 1-.1.7 0 .82 0 .97.09z" fill="var(--ifm-color-black)"/></svg> **Creating storefronts with FastStore and Next.js** *Coming soon.* ](./)

</CardGrid>
<br/>
Expand Down
6 changes: 3 additions & 3 deletions docs/docs/tutorials/cms-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: cms-overview
pagination_prev: null
---

import StepCard from "@site/src/components/StepCard/StepCard"
import CardGrid from "@site/src/components/CardGrid/CardGrid"

# Overview

Expand All @@ -13,7 +13,7 @@ import StepCard from "@site/src/components/StepCard/StepCard"

> This tutorial is designed for those who prefer to learn by doing. For a deeper understanding of the concepts in this section, you can check the [Concepts](/conceptual-guides) section. Instead, if you want to solve real-world issues, check our [How-to guides](/how-to-guides).
<StepCard home>
<CardGrid>

[ **0. Introducing the VTEX Headless CMS** Discover the advantages of integrating your FastStore project with a CMS and get to know the VTEX Headless CMS.](/tutorials/cms/0)

Expand All @@ -27,4 +27,4 @@ import StepCard from "@site/src/components/StepCard/StepCard"

[**5. Promoting your changes** Promote your changes to production after integrating your project with the VTEX Headless CMS.](/tutorials/cms/5)

</StepCard>
</CardGrid>
6 changes: 3 additions & 3 deletions docs/docs/tutorials/cms-storecomponents/Overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ id: overview
pagination_next: tutorials/cms-storecomponents/0
---

import StepCard from "@site/src/components/StepCard/StepCard"
import CardGrid from "@site/src/components/CardGrid/CardGrid"


# Overview
Expand All @@ -19,7 +19,7 @@ This tutorial is intended for those who started their FastStore project with the

> This tutorial is designed for those who prefer to learn by doing. For a deeper understanding of the concepts in this section, you can check the [Concepts](/conceptual-guides) section. Instead, if you want to solve real-world issues, check our [How-to guides](/how-to-guides).
<StepCard home>
<CardGrid>

[ **0. Introducing the VTEX Headless CMS** Discover the advantages of integrating your FastStore project with a CMS and get to know the VTEX Headless CMS.](./0)

Expand All @@ -37,4 +37,4 @@ This tutorial is intended for those who started their FastStore project with the

[**7. Adapting the `views` components** Adapt your storefront components to consume data from our Headless CMS.](./7)

</StepCard>
</CardGrid>
6 changes: 3 additions & 3 deletions docs/docs/tutorials/gatsby-overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
id: gatsby-overview
---

import StepCard from "@site/src/components/StepCard/StepCard"
import CardGrid from "@site/src/components/CardGrid/CardGrid"

# Overview

Expand All @@ -12,7 +12,7 @@ import StepCard from "@site/src/components/StepCard/StepCard"

> This tutorial is designed for those who prefer to learn by doing. For a deeper understanding, you can check the [Concepts](/conceptual-guides) section. Instead, if you want to solve real-world issues, check our [How-to guides](/how-to-guides).
<StepCard home>
<CardGrid>

[ **0. Introducing Gatsby** Learn everything you need to know about Gatsby before your start building your storefront.](/tutorials/gatsby/1)

Expand All @@ -22,4 +22,4 @@ import StepCard from "@site/src/components/StepCard/StepCard"

[**3. Understanding the project structure** Learn all the naming conventions necessary to organize your FastStore + Gatsby project.](/tutorials/gatsby/4)

</StepCard>
</CardGrid>
26 changes: 15 additions & 11 deletions docs/docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,16 @@ module.exports = {
},
colorMode: {
defaultMode: 'light',
disableSwitch: true,
disableSwitch: false,
respectPrefersColorScheme: false
},
announcementBar: {
id: 'support_us',
content:
`📢 <span style="color:#F71963; background-color:#FFF3F6; padding:0.5em; margin:0.3em; border-radius:5px; font-weight: bold" >NEW</span> <strong>VTEX Developers</strong> - YouTube channel with live demos, code walkthroughs, and interviews for developers. <a style="color:#F71963" href="https://www.youtube.com/channel/UCReNhDqLOVL4edqENJ4k7Fg">Subscribe now</a>`,
textColor: "#142032",
isCloseable: false,
`📢 <span style="color:var(--ifm-color-rebel-pink); background-color:var(--ifm-tag-highlight); padding:0.5em; margin:0.3em; border-radius:5px; font-weight: bold" >NEW</span> <strong>VTEX Developers</strong> - YouTube channel with live demos, code walkthroughs, and interviews for developers. <a style="color:var(--ifm-link-color)" href="https://www.youtube.com/channel/UCReNhDqLOVL4edqENJ4k7Fg">Subscribe now</a>`,
textColor: "var(--ifm-color-details)",
backgroundColor: "var(--ifm-background-color)",
isCloseable: true,
},
navbar: {
title: 'FastStore',
Expand Down Expand Up @@ -104,13 +105,15 @@ module.exports = {
{
href: 'https://community.vtex.com/',
label: 'Community',
},
{
href: 'https://github.com/vtex/faststore',
label: 'GitHub',
},
}
],
},
{
href: 'https://github.com/vtex/faststore',
position: 'right',
className: 'header-github-link',
'aria-label': 'GitHub repository',
},
],
},
algolia: {
Expand Down Expand Up @@ -179,13 +182,14 @@ module.exports = {
copyright: `Copyright © ${new Date().getFullYear()} FastStore Docs, Inc. Built with Docusaurus.`,
},
prism: {
theme: require('prism-react-renderer/themes/nightOwlLight')
theme: require('prism-react-renderer/themes/nightOwlLight'),
darkTheme: require('prism-react-renderer/themes/dracula')
},
},

presets: [
[
'@docusaurus/preset-classic',
'@docusaurus/preset-classic',
{
gtag: {
trackingID: 'GTM-PKST2NM',
Expand Down
157 changes: 84 additions & 73 deletions docs/src/components/CardGrid/CardGrid.module.css
Original file line number Diff line number Diff line change
@@ -1,76 +1,87 @@
/* Cards with icons */
.homeGrid > * {
@apply relative m-0 border;
border-radius: var(--ifm-pagination-nav-border-radius);;
@apply relative m-0 border border-border;
border-radius: var(--ifm-pagination-nav-border-radius);
}

.homeGrid a {
@apply block;
color: var(--ifm-font-color-base);
padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
padding-left: 98px;
}

.homeGrid a:active,
.homeGrid a:hover {
@apply no-underline;
}

.homeGrid a:active strong,
.homeGrid a:hover strong {
@apply no-underline text-rebelPink;
}

.homeGrid a img,
.homeGrid a svg {
@apply absolute border-0 bg-transparent rounded-none top-5 left-6 h-12 w-12;
box-shadow: none;
}

.cardGrid a strong,
.homeGrid a strong {
@apply block mb-2;
color: var(--ifm-color-label);
}

/* Plain cards without icons */
.cardGrid > * {
margin: 0;
position: relative;
}

.cardGrid a {
color: inherit;
display: block;
padding: 30px 30px;
@apply border-border rounded border;
}

.cardGrid a:active,
.cardGrid a:hover {
@apply no-underline;
}

.cardGrid a:active strong,
.cardGrid a:hover strong{
@apply text-rebelPink;
}

.cardGrid a strong {
@apply block mb-2;
}

/* Make grids responsive*/
@media only screen and (min-width: 1240px) {
.cardGrid,
.homeGrid {
@apply grid;
grid-template-columns: 1fr 1fr;
gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
}

.homeGrid a {
@apply block text-text;
padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
padding-left: 98px;
}

.homeGrid > *:active,
.homeGrid > *:hover {
@apply border-secondary
}
.homeGrid a:active,
.homeGrid a:hover {
@apply no-underline;
}

.homeGrid a img {
@apply absolute border-0 bg-transparent rounded-none top-5 left-6 h-12 w-12;
box-shadow: none;
}

.cardGrid a strong,
.homeGrid a strong {
@apply block mb-2;
color: var(--ifm-color-label);
}

/* Plain cards without icons */
.cardGrid > * {
@apply m-0 border rounded-md;
}
.cardGrid a {
@apply block;
color: inherit;
padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
}

.cardGrid > *:active,
.cardGrid > *:hover {
@apply border;
}

.cardGrid a:active,
.cardGrid a:hover {
@apply no-underline;
}

/* Make grids responsive*/
@media only screen and (min-width: 1240px) {
.cardGrid,
.homeGrid {
@apply grid;
grid-template-columns: 1fr 1fr;
gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
}
}

/* Add spacing between grids and sections */
h2 + .cardGrid,
h2 + .homeGrid {
margin-top: var(--ifm-spacing-vertical);
}

.cardGrid + h2,
.homeGrid + h2 {
@apply pt-5;
}

.homeGrid > p {
margin-top: var(--ifm-spacing-vertical) !important;
}
}

/* Add spacing between grids and sections */
h2 + .cardGrid,
h2 + .homeGrid {
margin-top: var(--ifm-spacing-vertical);
}

.cardGrid + h2,
.homeGrid + h2 {
@apply pt-5;
}

.cardGrid > p,
.homeGrid > p {
margin-top: var(--ifm-spacing-vertical) !important;
}
4 changes: 2 additions & 2 deletions docs/src/components/DocStructure/DocStructure.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ let docs = [

const DocStructure = () => {
return (
<section className="pt-20 border-t sm:pl-10 sm:border-l sm:pt-0 sm:border-t-0">
<section className="pt-20 border-t border-border sm:pl-10 sm:border-l sm:pt-0 sm:border-t-0">
<h3 className="mb-6 inline-block text-2xl font-VTEXRegular font-extralight align-middle">
Explore our documentation
</h3>
Expand All @@ -41,7 +41,7 @@ const DocStructure = () => {
className="focus:no-underline hover:no-underline"
to={useBaseUrl(item.url)}
>
<h4 className="block font-black text-text hover:text-primary">{item.title}</h4>
<h4 className="block font-black text-text hover:text-rebelPink">{item.title}</h4>
<p className="text-details">{item.description}</p>
</Link>
))}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const DocUpdate = () => {
<h3 className="inline-block mr-3 text-2xl font-VTEXRegular font-extralight align-middle">
Documentation Updates
</h3>
<p className="inline-block px-2 rounded-full bg-pink-50 text-primary">
<p className="inline-block px-2 rounded-full bg-tagHighlight text-rebelPink">
{totalUpdates}
</p>
</div>
Expand Down Expand Up @@ -83,7 +83,7 @@ const DocUpdate = () => {
<p className="inline-block align-middle uppercase py-1 px-2 bg-code rounded-lg text-xs ml-3">{item.menu}</p>
</div>

<div className='pl-4 border-l ml-2 mb-4'>
<div className='pl-4 border-l border-border ml-2 mb-4'>
<a className='text-lg font-bold text-text hover:no-underline' href={item.path}>{item.category}</a>
<p className="text-details mb-2">{item.diffDays} days ago</p>
{item.docs.map((docItem, j) => (
Expand All @@ -108,4 +108,4 @@ const DocUpdate = () => {
return <div>{comp}</div>
}

export default DocUpdate
export default DocUpdate
Loading

1 comment on commit 7bccc3a

@vercel
Copy link

@vercel vercel bot commented on 7bccc3a Apr 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.