The online presence of Liferay's Design Teams!
Designed in Figma, built with Gatsby, powered by Netlify.
Skip down to Starting Phresh for a step-by-step guide.
Warning: This project only works with Node v12. You can use NVM to install Node v14 by nvm install 14
, then you can follow these steps:
Install Dependencies
npm install
Start up the dev server
npm run dev
Your favorite browser should open automatically showing the site at http://0.0.0.0:localhost:7777
!
your.local.ip:7777
โ usually this will be something like 192.168.1.160:7777
โ the command line prompt will specify your address.See the Contributing Guidelines for what to do after you make some improvements!
N.B. Our site requires API keys to be fully built โ while we're working on making it easy for anyone to contribute to, there are some technical limitations that we've run into. As a result, either you won't be able to build the site locally or some sections of the site will be missing. This should not affect your ability to make edits to content. Please reach out to Paul Hanaoka if you need keys.
Work and submit pull requests from the master
branch.
Note: The Dev
branch is no longer being actively used โย the use-case for it is no longer necessary thanks to Netlify's Deploy Previews.
Currently live on dev.liferay.design. This is our pre-production environment, best not to send pull requests to it unless there's a special scenario.
Currently live on liferay.design, don't work on Production as your pull request typically won't get accepted.
We save "versions" of the site as branches — v1 (for example) was the first ever version of the site.
TODO: deploy old versions on subdomains.
This contains the scripts that make the site magically appear when new work gets pulled into the repo — real developers made this for us, and we generally don't touch it.
The src folder is where all the code is that gets compiled into a public
folder which gets rendered onto the interwebs at our domain. We roughly follow atomic design principles.
Where all of our react components live — atoms, molecules, organisms, templates, and theme.
This is where 98.3% of the site content lives — markdown is a lot easier to write than html ๐ค.
This is new experimental territory to render react components in md files, so you will propbably run into some quirks!
.md
to .mdx
class
to className
and style=""
to style={{}}
)---
title: 'Markdown File Title'
---
<div className="aspect-ratio card-item-first" style={{background: "url('/images/logos/liferay-logo.png') center/cover"}}>
<Icon name="keyboardArrowDown" />
</div>
.mdx
file syntax highlighting you can download the "Mdx" extension and follow their instructions - Don't put an extra line break between markup as it will think it will print out the literal markup for some reasonSurprise surprise, this is where the code for the main pages of liferay.design lives.
Stylesheets and other theme-related files.
generateIcons.js
will take any svg in the static / images / icons
folder and add it to the icons
component.
This is where we store all the... you guessed it, images! There's probably a better way to do this, so please help us out.
A quick look at the top-level files and directories you'll see in a Gatsby project.
.
โโโ node_modules
โโโ src
โโโ .env.development
โโโ .gitignore
โโโ .prettierrc
โโโ gatsby-browser.js
โโโ gatsby-config.js
โโโ gatsby-node.js
โโโ LICENSE
โโโ package-lock.json
โโโ package.json
โโโ README.md
/node_modules
: The directory where all of the modules of code that your project depends on (npm packages) are automatically installed./src
: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser), like your site header, or a page template. โSrcโ is a convention for โsource codeโ..env.development
: This is where we keep tokens, API keys, and other secret stuff that is needed to build certain areas of the site. For the time being, please reach out to Paul and he will share any keys with you manually..gitignore
: This file tells git which files it should not track / not maintain a version history for. You most likely won't need to edit it..prettierrc
: This is a configuration file for a tool called Prettier, which is a tool to help keep the formatting of your code consistent.gatsby-browser.js
: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.gatsby-config.js
: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins youโd like to include, etc. (Check out the config docs for more detail).gatsby-node.js
: This file is where Gatsby expects to find any usage of the Gatsby node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.LICENSE
: Gatsby is licensed under the MIT license.package-lock.json
(See package.json
below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You wonโt change this file directly).package.json
: A manifest file for Node.js projects, which includes things like metadata (the projectโs name, author, etc). This manifest is how npm knows which packages to install for your project.README.md
: A text file containing useful reference information about your project.
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
To dive straight into code samples head to our documentation. In particular, check out the โGuidesโ, API reference, and โAdvanced Tutorialsโ sections in the sidebar.
See our GitHub Setup Guide
Pushing work to any of the branches will automagically build the site
You can check the progress of current and past builds by checking our Netlify Deploys page.