Skip to content
This repository has been archived by the owner on Nov 24, 2021. It is now read-only.

Adding clearer instructions for using the generator #125

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Adding clearer instructions for using the generator #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions content/en/pages/starting.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ block content
.gs-guide__subtitle
p Before you begin, make sure you have <a href="http://nodejs.org/download" target="_blank">Node.js</a> 0.10+ installed and <a href="http://www.mongodb.org/downloads" target="_blank">MongoDB</a> v2.4+ installed and running.
p You'll need a reasonable working knowledge of Javascript to use KeystoneJS, as well as familiarity with basics such as database concepts, and using node / npm etc.

.gs-guide-figure.gs-guide-figure--prerequisites.hidden-xs
//- .text Installed?
.column.nodejs
Expand All @@ -30,24 +30,30 @@ block content
a(href='http://docs.mongodb.org/manual/installation/', target='_blank')
.logo: img(src='/images/getting-started/mongodb-logo.png', alt='MongoDB logo', width=294, height=84)
span.prerequisite See the MongoDB installation guide for how to install MongoDB on your operating system.

.gs-guide-section
.container-sm
.gs-guide__header
h2.gs-guide__title
span.gs-guide__title-count 2
.gs-guide__title-label Commands
h3 Install the generator
p You'll be using the <a href='https://github.com/keystonejs/generator-keystone', target='_blank'>KeystoneJS generator</a> made with <a href='http://yeoman.io/', target='_blank'>Yeoman</a>. In your root directory run:
pre.command-line npm install -g generator-keystone

p You'll be using the <a href='https://github.com/keystonejs/generator-keystone' target='_blank'>KeystoneJS generator</a> made with <a href='http://yeoman.io/' target='_blank'>Yeoman</a>.

p If you don't have Yeoman installed&mdash;or you just want to be sure&mdash;go to your root directory on the command line and run:
pre.command-line npm install -g yo generator-keystone

p If you're sure Yeoman's installed, feel free to omit the <span class='command-line'>yo</span>.

p But remember npm has your back, and it won't do any harm to be safe and run that first command.

h3 Create a folder for your project
p Create your project wherever you want:
pre.command-line mkdir my-test-project

p Than make sure you're in your new project:
pre.command-line cd my-test-project

h3 Run the generator
pre.command-line yo keystone
p The generator will ask you a few questions about what features you'd like to include, then configure and copy all the files you'll need into your project.
Expand Down Expand Up @@ -97,7 +103,7 @@ block content
p For a production/shared environment you may wish to re-run the npm command with the sudo prefix:

pre sudo npm install -g generator-keystone
p For more information, see the <a href='http://foohack.com/2010/08/intro-to-npm/#what_no_sudo', target='_blank'>"What, no sudo?"</a> of the Intro to npm by Isaac Schulueter.
p For more information, see the <a href='http://foohack.com/2010/08/intro-to-npm/#what_no_sudo' target='_blank'>"What, no sudo?"</a> of the Intro to npm by Isaac Schulueter.

h3 What do you mean it couldn't find my Database?
p By default, KeystoneJS will look for a MongoDB server running on localhost on the default port, and connect to it. If you're getting errors related to the MongoDB connection, make sure your MongoDB server is running.
Expand Down
8 changes: 4 additions & 4 deletions content/zh/pages/starting.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ block content
.gs-guide__subtitle
p 开始之前先确保你已经安装了<a href="http://nodejs.org/download" target="_blank">Node.js</a> 0.10+ 和<a href="http://www.mongodb.org/downloads" target="_blank">MongoDB</a> v2.4+。
p 要使用KeystoneJS，你需要掌握合理的Javascript知识，并熟悉数据库概念之类的基础知识，会用 node / npm 等。

.gs-guide-figure.gs-guide-figure--prerequisites.hidden-xs
//- .text Installed?
.column.nodejs
Expand All @@ -30,15 +30,15 @@ block content
a(href='http://docs.mongodb.org/manual/installation/', target='_blank')
.logo: img(src='/images/getting-started/mongodb-logo.png', alt='MongoDB logo', width=294, height=84)
span.prerequisite 查阅MongoDB安装指南了解如何在你的操作系统上安装MongoDB。

.gs-guide-section
.container-sm
.gs-guide__header
h2.gs-guide__title
span.gs-guide__title-count 2
.gs-guide__title-label 命令
h3 安装生成器
p 你将要使用由<a href='http://yeoman.io/', target='_blank'>Yeoman</a>制作的<a href='https://github.com/keystonejs/generator-keystone', target='_blank'>KeystoneJS 生成器</a>。在根目录运行：
p 你将要使用由<a href='http://yeoman.io/' target='_blank'>Yeoman</a>制作的<a href='https://github.com/keystonejs/generator-keystone' target='_blank'>KeystoneJS 生成器</a>。在根目录运行：
pre.command-line npm install -g generator-keystone

h3 给项目创建一个文件夹
Expand Down Expand Up @@ -97,7 +97,7 @@ block content
p 在生产/共享环境中，你可能希望带着sudo前缀重新运行npm命令：

pre sudo npm install -g generator-keystone
p 要了解更多信息，请参阅Isaac Schulueter写的Intro to npm中的<a href='http://foohack.com/2010/08/intro-to-npm/#what_no_sudo', target='_blank'>"什么, 没sudo?"</a>章节。
p 要了解更多信息，请参阅Isaac Schulueter写的Intro to npm中的<a href='http://foohack.com/2010/08/intro-to-npm/#what_no_sudo' target='_blank'>"什么, 没sudo?"</a>章节。

h3 你说找不到我的数据库是什么意思？
p 默认情况下，KeystoneJS会在localhost的默认端口下连接运行中的MongoDB服务器。如果你遇到跟MongoDB连接相关的错误，请确保MongoDB服务器运行着。
Expand Down
80 changes: 44 additions & 36 deletions public/styles/site/docs.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ h1 {
// font-weight: 200;
line-height: 36px;
margin: 0 0 40px;

& + h2 {
margin-top: 50px;
}
Expand Down Expand Up @@ -93,7 +93,7 @@ h2:first-child {
.anchor i, .anchor span {
display: inline-block;
}
}
}
}
}

Expand All @@ -113,11 +113,11 @@ h2:first-child {
.list-unstyled();
margin-bottom: 2em;
padding-left: 1.5em;

> li {
margin-bottom: .5em;
padding-left: 1.5em;

> ul {
margin-bottom: .5em;
margin-top: .5em;
Expand All @@ -142,7 +142,7 @@ h2:first-child {
// Options list
// a light dash in place of the regular bullet
.docs-content ul.options {

> li {
margin-bottom: .75em;
padding-left: 2em;
Expand All @@ -167,7 +167,7 @@ h2:first-child {
.docs-content ol.fancy-list,
.docs-content ul.fancy-list {
padding-left: 0;

> li {
counter-increment: list;
list-style: none;
Expand Down Expand Up @@ -208,35 +208,35 @@ h2:first-child {
height: 100%;
color: #5797DF;
}

}


// content
.docs-content {
padding: @grid-gutter-width 0 100px;
position: relative;

@media (min-width: @screen-sm-min) {

&:after {
background-color: @gray-lighter;
content: "";
width: 1px;

position: absolute;
top: 0;
left: -@grid-gutter-width;
bottom: 0;
right: 0;
}
}

@media (min-width: @screen-lg-min) {
padding-left: 5%;
padding-right: 5%;
}

blockquote {
font-size: @font-size-base;
}
Expand All @@ -251,7 +251,7 @@ h2:first-child {
margin-top: 0;
padding-bottom: 30px;
padding-top: 30px;

h1,
p,
a {
Expand All @@ -266,7 +266,7 @@ h2:first-child {
}
a {
border-bottom: 1px dotted white;

&:hover {
border-bottom-style: solid;
text-decoration: none;
Expand All @@ -275,7 +275,7 @@ h2:first-child {
@media (min-width: @screen-sm-min) {
padding-bottom: 60px;
padding-top: 60px;

p {
font-weight: 100;
letter-spacing: 0.02em;
Expand All @@ -289,7 +289,7 @@ h2:first-child {
.page-breadcrumbs {
padding-bottom: 10px;
padding-top: 10px;

h1 {
font-size: 24px;
margin: 0;
Expand All @@ -311,7 +311,7 @@ h2:first-child {
border-bottom: 1px solid @gray-lighter;
line-height: 1;
padding: 1em 0;

p {
margin: 0;
}
Expand Down Expand Up @@ -343,7 +343,7 @@ span.subMethod {
padding-left: 1em;
padding-top: 20px;
position: relative;

&:before {
content: "Note";
color: #ccc;
Expand All @@ -362,7 +362,7 @@ span.subMethod {
margin-top: 2em;
padding: 25px 15px;
position: relative;

&:before {
content: "Warning";
color: #aaa;
Expand All @@ -381,7 +381,7 @@ span.subMethod {
margin-top: 2em;
padding: 25px 15px;
position: relative;

&:before {
content: "Caution";
color: #aaa;
Expand All @@ -400,7 +400,7 @@ span.subMethod {
margin-top: 2em;
padding: 25px 15px;
position: relative;

&:before {
content: "Note";
color: #aaa;
Expand Down Expand Up @@ -440,7 +440,15 @@ pre.command-line:before {
content: "\0024\0020"; // "$ "
}


span.command-line {
background-color: @pre-bg;
border: 1px solid @pre-border-color;
border-radius: @border-radius-base;
color: @pre-color;
padding: 5px;
font-family: @font-family-monospace;
font-size: @font-size-medium;
}

// Pager
.simple-pager {
Expand All @@ -449,7 +457,7 @@ pre.command-line:before {
margin-top: 80px;
padding: 15px 0;
text-align: center;

.next {
float: right;
}
Expand Down Expand Up @@ -492,36 +500,36 @@ ul.list li {
.code-header {
.border-top-radius( 4px );
border: 1px solid darken(@navbar-default-bg, 10%);

color: @gray;
margin: 20px 0 0;
padding: 15px;

p {
font-size: @font-size-small;
margin: 0;
& + p {
margin: 15px 0 0;
}
}

h4 {
color: mix(black, @brand-primary, 50%);
font-size: @font-size-small + 2;
font-weight: 400;
margin: 0;

& + p {
margin: 15px 0 0;
}
}

&.addGitHubLink {
@media (max-width: @screen-sm-min) {
font-size:11px;
}
}

// so you can use PRE on it's own
& + pre {
border-radius: 0 0 4px 4px;
Expand Down Expand Up @@ -568,11 +576,11 @@ code.default-value {
margin-top: 2em;
margin-right: @grid-gutter-width;
padding: 0;

display: table;
table-layout: fixed;
width: 100%;

li {
display: table-cell;
text-align: center;
Expand All @@ -586,7 +594,7 @@ code.default-value {
line-height: 2em;
padding-left: .5em;
padding-right: .5em;

&:hover {
// background-color: @gray-lighter;
color: @text-color;
Expand All @@ -612,7 +620,7 @@ code.default-value {
padding: 0;
position: relative;
z-index: 2;

ul {
list-style: none;
margin: 0;
Expand All @@ -626,7 +634,7 @@ code.default-value {
color: @text-color;
display: block;
padding: 5px 5px 5px 0;

&:hover,
&:active,
&:focus {
Expand All @@ -650,10 +658,10 @@ code.default-value {
color: @gray-light;
margin-top: 20px;
text-transform: uppercase;

a {
color: @gray-light;

&:hover {
color: @link-color;
}
Expand Down
1 change: 1 addition & 0 deletions public/styles/variables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@

@font-size-base: 15px;
@font-size-large: ceil(@font-size-base * 1.25); // ~18px
@font-size-medium: ceil(@font-size-base * 0.93333333333); // ~14px
@font-size-small: ceil(@font-size-base * 0.85); // ~12px

@line-height-base: 1.428571429; // 20/14
Expand Down