epubjs

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html><html xmlns:epub="http://www.idpf.org/2007/ops" xmlns="http://www.w3.org/1999/xhtml"><head><title>Quick Start Guide</title><link rel="stylesheet" type="text/css" href="epub.css"/></head><body data-type="book"><section data-type="chapter" epub:type="chapter" data-pdf-bookmark="Chapter 2. Quick Start Guide"><div class="chapter" id="idm794208"> <h1><span class="label">Chapter 2. </span>Quick Start Guide</h1> <p>Welcome to the Atlas Beta! Here are the most important things you need to know to get started.</p> <section data-type="sect1" data-pdf-bookmark="Your Projects"><div class="sect1" id="idm765808"> <h1>Your Projects</h1> <p>When you sign into Atlas for the first time, you start off with a clean slate. The first thing you’ll want to do is create a new project by clicking the “New Project” button, or import an existing project from GitHub by clicking “Import from GitHub.”</p> <figure><div class="figure"><img alt="Alt Text" class="icontentsimagesgitlab-new-or-importpng" src="assets/GITLAB-new-or-import.png"/> <h6><span class="label">Figure 2-1. </span>Click the New Project or Import from GitHub buttons to start writing.</h6> </div></figure> <section data-type="sect2" data-pdf-bookmark="Creating a New Project"><div class="sect2" id="idm499824"> <h2>Creating a New Project</h2> <p>When you click the blue “New Project” button, you’ll get taken to a page where you can define the title and description for your project, and choose a project template to pre-populate your new repository with some skeleton files based on the kind of project you’re making. Learn more about project templates here.</p> <p>Click “Create!”, and Atlas will add a new repository to your Atlas account, pre-populated with skeleton files based on the project template you chose.</p> </div></section> <section data-type="sect2" data-pdf-bookmark="Importing from GitHub"><div class="sect2" id="idm490176"> <h2>Importing from GitHub</h2> <p>If you have an existing project in <a href="http://github.com">GitHub</a> that you want to import into Atlas, you can use the “Import from GitHub” tool. Click this button, authorize Atlas to access your GitHub account, and then you’ll see a list of your existing GitHub projects.</p> <figure><div class="figure"><img alt="Alt Text" class="icontentsimagesgitlab-authorize-githubpng" src="assets/GITLAB-authorize-github.png"/> <h6><span class="label">Figure 2-2. </span>Before you can import a project from GitHub, you need to allow Atlas to access your GitHub account.</h6> </div></figure> <p>Click the “Import” button to the right of the project you want to add to Atlas. Atlas will let you know if it was able to successfully import your files, and will give you a link to get started writing and building. </p> <figure><div class="figure"><img alt="Alt Text" class="icontentsimagesgitlab-successful-importpng" src="assets/GITLAB-successful-import.png"/> <h6><span class="label">Figure 2-3. </span>Once a project is successfully imported, click the link to start editing.</h6> </div></figure> </div></section> <p>Once you have some projects in Atlas, every time you sign in, you’ll see all your existing or imported projects listed here on the Projects page.</p> <p>Select a project from the list and you’ll be taken to the project dashboard, where you’ll see a list of all files in the project, and have access to the <a data-original-title="" data-type="xref" title="" href="#building_in_atlas">“Building”</a>.</p> <div data-type="warning" epub:type="warning"> <h1>A Warning About Split Source</h1> <p>When you import a project from GitHub into Atlas, you are essentially creating a copy of the files, that you will be maintaining separately from the files in GitHub. If you want to keep both sets of files up to date, you’ll need to add your repositories as a remote on a local checkout. <a data-original-title="" data-type="xref" title="" href="#syncinggithub">???</a>.</p> </div> </div></section> <section data-type="sect1" data-pdf-bookmark="The Project Dashboard"><div class="sect1" id="idm538672"> <h1>The Project Dashboard</h1> <p><strong>The project dashboard is your landing page for each project.</strong> It lists all the files and folders in your repo, and lets you manage collaborators, define settings for the different output formats, view past builds and trigger new builds (more on building <a data-type="xref" href="#building_in_atlas">“Building”</a>).</p> <figure><div class="figure"><img alt="Alt Text" class="icontentsimagesgitlab-tabspng" src="assets/GITLAB-tabs.png"/> <h6><span class="label">Figure 2-4. </span>Click a heading to open up the different tabs on your project dashboard. <em>Dashboard</em> shows you all your files and folders and create new builds; <em>Access</em> is where you manage collaborators or access the <a data-original-title="" data-type="xref" title="" href="#localgit">???</a>; <em>Builds</em> is where you can see all the details for your past builds; and <em>Settings</em> is where you define how your builds should look for each format. </h6> </div></figure> <p>From the project dashboard, your next steps will likely be either to start writing or to build your project. <strong>Click a file in your Files pane at left to open it in the editor.</strong> For more about building, <a data-type="xref" href="#building_in_atlas">“Building”</a>.</p> </div></section> <section data-type="sect1" data-pdf-bookmark="Writing and Editing"><div class="sect1" id="idp146000"> <h1>Writing and Editing</h1> <p><strong>The Atlas editor has <a data-original-title="" data-type="xref" title="" href="ch03.html#editingenvironments">“Editing Environments”</a></strong>: the Visual Editor and the Code Editor. The Visual Editor is an online authoring environment similar to a word processor, with a formatting toolbar for tagging and styling your content. Documents created in the Visual Editor are stored as <a href="http://en.wikipedia.org/wiki/HTML5">HTML5</a>. The Code Editor allows you to view and edit the underlying HTML5 markup for your document. You can toggle back and forth between the Visual and Code Editors, and changes you make in either mode will immediately be reflected in the other.</p> <p>While <strong>HTML5 is the default markup language for Atlas content</strong>, Atlas also supports documents written in<strong style="line-height: 1.5em;"> <a data-original-title="" data-type="xref" title="" href="ch10.html#markdownref">Chapter 10</a>, <a href="http://www.methods.co.nz/asciidoc/">AsciiDoc</a>, and <a href="http://www.docbook.org/">DocBook XML</a></strong><span style="line-height: 1.5em;">. All three of these formats can be edited using the Code Editor.</span></p> <p>In both writing modes, you can <strong>navigate among your files using the Files menu</strong> to the left of the screen, <strong>create and delete files</strong> <strong>and folders</strong>,<strong> <a data-original-title="" data-type="xref" title="" href="ch05.html#addingimages">“Adding Images”</a></strong>, <strong>save your project</strong> (top-right button in the editor, or use the keyboard shortcut ⌘-s/Ctrl+s) and even attach a <strong>custom commit message</strong> to each save (hover over the Save button to open the commit message dialog box).</p> </div></section> <section data-type="sect1" data-pdf-bookmark="Creating a New File"><div class="sect1" id="idm487680"> <h1>Creating a New File</h1> <p>You can create new files and folders right from the project dashboard: scroll to the bottom of your file listing, and you’ll see buttons for creating either a new file or folder. You can also create new files and folders from within the editor: open the Files menu, and click the New File button at bottom left. Give your file a name, and hit Enter. </p> <p>You can also organize your files into folders. To add a folder, click the New Folder button (next to the New File button). You can then click the folder name in the Files menu to open the folder and create new files within it.</p> <div data-type="warning" epub:type="warning"> <h1>Warning</h1> <p>You can’t currently organize your files within Atlas. If you want to move existing files into a folder, you need to do that outside of Atlas using <a data-original-title="" data-type="xref" title="" href="#localgit">???</a>.</p> </div> </div></section> <section data-type="sect1" data-pdf-bookmark="Building"><div class="sect1" id="building_in_atlas"> <h1>Building</h1> <p>When you’re finished writing, it’s time to build your project so you can share it with the world. <strong>Atlas lets you export your project in <a data-original-title="" data-type="xref" title="" href="ch06.html#outputformats">“Output Formats”</a></strong>: <a data-original-title="" data-type="xref" title="" href="ch06.html#formatspdf">“PDF”</a>, <a data-original-title="" data-type="xref" title="" href="ch06.html#formatsepub">“EPUB”</a>, <a data-original-title="" data-type="xref" title="" href="ch06.html#formatsmobi">“MOBI”</a>, and <a data-original-title="" data-type="xref" title="" href="ch06.html#formatshtml">“HTML”</a>.</p> <p>The first time you build, you’ll need to choose what formats to build, and what files and settings you want to apply to each format. You’ll do this on the<strong> Settings tab</strong> of the project dashboard.</p> <p>Every format has <a data-original-title="" data-type="xref" title="" href="ch06.html#building">Chapter 6</a> you can choose. Two options that are common for all formats are:</p> <ul> <li>Create a<strong> table of contents</strong> in your built project, based on your section headings. <a data-type="xref" href="ch06.html#toc">“Table of Contents”</a>.</li> <li>Collect all index tags you’ve added and create an <strong>alphabetical index</strong> in your built project. <a data-type="xref" title="" href="ch06.html#index">“Index”</a>.</li> </ul> <p>Choose a theme for your project (more on that next). Then at the bottom of the Build Settings page, <strong>choose which files to add to the build</strong>, drag the files into the correct order, and then save your settings. Then hop back to the Dashboard, and start your build. If the build is successful, you’ll get a link to download the file. If it fails, you’ll get information about what went wrong (the usual culprit is markup errors)<span style="line-height: 1.5em;">.</span></p> <figure><div class="figure"><img alt="Alt Text" class="icontentsimagesquickbuildspng" src="assets/quickbuilds.png"/> <h6><span class="label">Figure 2-5. </span>The Builds menu on the project dashboard allows you to quickly trigger a build using your previously defined settings.</h6> </div></figure> </div></section> <section data-type="sect1" data-pdf-bookmark="Themes and Design"><div class="sect1" id="idm2224"> <h1>Themes and Design</h1> <p>All of the Atlas output formats (PDF, EPUB, MOBI, and HTML) are powered by <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>, the standard styling language for the Web. You can write <a data-original-title="" data-type="xref" title="" href="ch07.html#cssthemes">“Themes”</a>, that can be used for multiple projects, by multiple people, or you can just add <a data-original-title="" data-type="xref" title="" href="ch07.html#csscustomizations">“Customizing Your Project Styles”</a> for your specific project.</p> <p><strong>To apply a theme to your project</strong>, choose one of the default themes on the Build Settings page, or add a link to your own custom theme.</p> <figure><div class="figure"><img alt="Alt Text" class="icontentsimagesthemepng" src="assets/theme.png"/> <h6><span class="label">Figure 2-6. </span>Add a design to your project on the Build Settings page.</h6> </div></figure> </div></section> <section data-type="sect1" data-pdf-bookmark="Building Locally with the API"><div class="sect1" id="idm582864"> <h1>Building Locally with the API</h1> <p>Atlas gives you the option to <strong>build locally on the command line</strong>, <a data-type="xref" href="ch09.html#atlas-api">Chapter 9</a>. (Note that you’ll still need an internet connection for this to work.) This is great if you prefer to work locally using your own text editor but still want to see the final output.</p> </div></section> <section data-type="sect1" data-pdf-bookmark="Finding Help"><div class="sect1" id="idm673536"> <h1>Finding Help</h1> <p>For more details on any of the above topics, or for more advanced information, <strong><a data-original-title="" href="http://atlasdocs.oreilly.com/" title="">check out the Atlas documentation</a></strong>. If you’re stuck, have specific questions about the app, or just general ideas for improvement, you can contact the Atlas team at <a data-original-title="" href="mailto:atlas@oreilly.com?subject=Atlas%20Feedback" title="">atlas@oreilly.com</a>.</p> </div></section> </div></section></body></html>