diff options
Diffstat (limited to 'themes/docsy/userguide/content')
25 files changed, 1996 insertions, 0 deletions
diff --git a/themes/docsy/userguide/content/en/_index.html b/themes/docsy/userguide/content/en/_index.html new file mode 100644 index 000000000..9a7e7000d --- /dev/null +++ b/themes/docsy/userguide/content/en/_index.html @@ -0,0 +1,45 @@ ++++ +title = "Docsy" +linkTitle = "Docsy" + ++++ + +{{< blocks/cover title="Welcome to Docsy!" image_anchor="top" height="full" color="orange" >}} +<div class="mx-auto"> + <a class="btn btn-lg btn-primary mr-3 mb-4" href="{{< relref "/about" >}}"> + Learn More <i class="fas fa-arrow-alt-circle-right ml-2"></i> + </a> + + <a class="btn btn-lg btn-secondary mr-3 mb-4" href="https://github.com/google/docsy"> + Download <i class="fab fa-github ml-2 "></i> + </a> + <p class="lead mt-5">A Hugo theme for creating great technical documentation sites</p> + <div class="mx-auto mt-5"> + {{< blocks/link-down color="info" >}} + </div> +</div> +{{< /blocks/cover >}} + + +{{% blocks/lead color="primary" %}} +Docsy is a theme for the Hugo static site generator that's specifically designed for technical documentation sets. Our aim is to help you get a working documentation site up and running as easily as possible, so you can concentrate on creating great content for your users. +{{% /blocks/lead %}} + +{{< blocks/section color="dark" type="features">}} +{{% blocks/feature icon="fa-lightbulb" title="See Docsy in action!" url="/docs/examples/" %}} +As well as our example site, there's a growing number of projects using Docsy for their doc sites. +{{% /blocks/feature %}} + + +{{% blocks/feature icon="fab fa-github" title="Contributions welcome!" url="https://github.com/google/docsy" %}} +We do a [Pull Request](https://github.com/google/docsy/pulls) contributions workflow on **GitHub**. New users are always welcome! +{{% /blocks/feature %}} + + +{{% blocks/feature icon="fab fa-twitter" title="Follow us on Twitter!" url="https://twitter.com/docsydocs" %}} +Find out about new features and how our users are using Docsy. +{{% /blocks/feature %}} + + +{{< /blocks/section >}} + diff --git a/themes/docsy/userguide/content/en/about/_index.md b/themes/docsy/userguide/content/en/about/_index.md new file mode 100644 index 000000000..3b2d6bd3a --- /dev/null +++ b/themes/docsy/userguide/content/en/about/_index.md @@ -0,0 +1,138 @@ +--- +title: About Docsy +linkTitle: About +menu: + main: + weight: 10 +layout: docs +--- + +{{% blocks/cover title="About Docsy" height="auto" %}} + +Docsy is a pre-configured Hugo theme that provides the core features and behaviors needed to create a technical documentation site. Use Docsy to set up your documentation website, including an optional Blog section, and then spend your time focusing on authoring technical content. Depending on how you choose to configure Docsy and whether you use a hosting service that supports continuous builds, you can even just add your Markdown or HTML content file into a folder on your source repository, and then sit back while it automatically gets added to your site - complete with updated menus. + +Read on to find out more, or visit our [documentation](/docs/) to get started! +{{% /blocks/cover %}} + +{{% blocks/section type="section" color="primary" %}} +## So what’s a technical documentation site? + +A technical documentation site is a website that your users can visit to find the documentation for your technical project. Your documentation set contains all the information you think your users might need to engage with your project, from overviews that help them understand what the project is for, to instructions for specific tasks. Depending on the size of the project, a documentation set can be a page or two or an entire “book” with different types of information. + +**Most users don’t want to have to spend much time looking at docs - they want to try your great project!** So how do you make sure your technical documentation set gives users what they need to easily understand your project and get things done? We think a good technical documentation set should be: + +* **Reliable**: Is it true? +* **Comprehensive**: Does it have all the information your target users might need? +* **Well-organized and navigable**: Can the user find the information they need? Are similar types of information (all the information about a feature, all your reference information) grouped together? + +If you have users around the world, you might also want to provide your content in multiple languages, and if you have an open source project, you’ll probably want your users to be able to contribute to the docs. + +Once you have your content, you use a technical documentation site to publish your technical documentation set online for your users. In addition to your documentation, your site might also contain material like contact information, a blog, or information about how to contribute to the project. +{{% /blocks/section %}} + +{{% blocks/section type="section" color="white" %}} +## How does Docsy help? + +Particularly when working with open source projects, it can be difficult to figure out how to turn all your product knowledge into a website that helps and engages your users. **Enter Docsy!** + +Docsy gives you a theme for the [Hugo](https://gohugo.io/) static site generator, an established open source tool that builds ready-to-serve websites from a set of theme and content files. The Docsy theme provides you with useful stuff for a technical documentation site that *isn’t* your own content: + +<table> + <tr> + <td><strong>Page layouts optimized for different content types</strong> + </td> + <td>Navigation, page menus, headers, landing pages, blog snippets, feedback links - you just provide the content. + </td> + </tr> + <tr> + <td><strong>Autogenerated navigation</strong> + </td> + <td>Organize your docs in logical folders and get instantly updated navigation to help your users find them. + </td> + </tr> + <tr> + <td><strong>Language switchers</strong> + </td> + <td>Builds on Hugo’s multi-language support to make it easy to create a site in multiple languages. + </td> + </tr> + <tr> + <td><strong>Feedback, contribution, and contact links</strong> + </td> + <td>Let your users file issues and edit docs with a single click, or follow contact links to join you on Slack, Twitter, or mailing lists. + </td> + </tr> + <tr> + <td><strong>Custom shortcodes</strong> + </td> + <td>Reusable snippets of HTML you can use to create alerts, image boxes, landing page blocks, and more. + </td> + </tr> + <tr> + <td><strong>Easy customization</strong> + </td> + <td>Use the theme as-is for a basic, clean design, or update a file or two to get your own look. + </td> + </tr> + <tr> + <td><strong>Simple previews and deployment</strong> + </td> + <td>Because Docsy is a Hugo theme, you get all the advantages of building with Hugo - simple, fast local previews, and, depending on your deployment options, continuous deployment from Github or other Git providers. + </td> + </tr> +</table> + +### Simple authoring and publishing + +Author your content in the Markdown or HTML and then immediately test it with Hugo's local server. Once you are ready to +publish, add that content to your project and deploy it to your site using any of Hugo’s supported options. +[Learn more...](/docs/deployment/) + +### Built-in integration with common tools + +The Docsy template currently includes built-in integration with the following tools: + +* [**GitHub**](https://github.com): Get in-page links directly to your GitHub repo and provide your users with a + convenient pathway to providing feedback, opening issues, and even suggesting changes through Pull Requests. +* [**Google Analytics**](https://analytics.google.com/analytics/web/): Easily connect your Google Analytics account to your + site. +* [**Google Custom Search**](https://cse.google.com/cse/): Use Google Custom Search for in-site search queries, or + configure your site to search the web. +* [**Algolia Docsearch**](https://community.algolia.com/docsearch/): Let your users search your site with Algolia Docsearch. + +### Make it your own + +You can configure the Docsy theme as much or as little as you like, anything from changing the colours and images to adding your own type of page layout. [Learn more...](docs/adding-content/lookandfeel/) + +### Get organized + +We believe a well-organized documentation set can really help your users find the information they need, when they need it - whether it’s a “Hello World” tutorial when they’re starting out or a single core task they need to do to finish a complicated app. We also believe that having well-organized docs help you create comprehensive docs, as it’s easier to see when you’re missing something important. [Learn more...](/docs/best-practices/organizing-content/) + +Docsy also provides autogenerated site navigation based on how you organize your source files, so once you’ve organized your docs in folders in Github or other source control, you’ve got menus for your users to quickly reach the doc they need. [Learn more...](/docs/adding-content/navigation/) + + +### Keep up to date + +Spend time setting up your technical documentation site once, and then focus on what you do best. We work closely with +the Hugo team and have individuals actively maintaining the Docsy theme. You can easily get and +apply Docsy updates to your site, as well as open feature requests to improve the +template, or even add new behaviors. [Learn more...](/docs/updating/) + + +### Focus on great content + +Because Docsy helps you create and serve a well-organized, navigable technical documentation set, it frees you up to create and maintain great reliable, comprehensive content that your users can enjoy and trust. +{{% /blocks/section %}} +{{% blocks/section type="section" color="primary" %}} +## What's next for Docsy? + +Docsy is an open source project and we love getting patches and contributions to make Docsy and its docs even better. We hope to continue to make improvements to the theme along with the Docsy community. + +Visit our [Issues](https://github.com/google/docsy/issues) to see what we're currently working on. If there's something you'd like to see in Docsy, please create an issue yourself - or assign yourself an issue if you'd like to fix or add something! See our [contribution guidelines](/docs/contribution-guidelines/) for more information. + +You can find out how to update your site to the latest version of Docsy in [Keeping the theme up to date](/docs/updating/). +{{% /blocks/section %}} + + + + diff --git a/themes/docsy/userguide/content/en/about/featured-background.jpg b/themes/docsy/userguide/content/en/about/featured-background.jpg Binary files differnew file mode 100644 index 000000000..c9d8846dd --- /dev/null +++ b/themes/docsy/userguide/content/en/about/featured-background.jpg diff --git a/themes/docsy/userguide/content/en/community/_index.md b/themes/docsy/userguide/content/en/community/_index.md new file mode 100644 index 000000000..cdade1630 --- /dev/null +++ b/themes/docsy/userguide/content/en/community/_index.md @@ -0,0 +1,8 @@ +--- +title: Community +menu: + main: + weight: 40 +--- + +<!--add blocks of content here to add more sections to the community page --> diff --git a/themes/docsy/userguide/content/en/docs/Adding content/Shortcodes/index.md b/themes/docsy/userguide/content/en/docs/Adding content/Shortcodes/index.md new file mode 100644 index 000000000..53e2a686d --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Adding content/Shortcodes/index.md @@ -0,0 +1,234 @@ +--- +title: "Docsy Shortcodes" +linkTitle: "Docsy Shortcodes" +date: 2017-01-05 +weight: 5 +description: > + Use Docsy's Hugo shortcodes to quickly build site pages. +resources: +- src: "**spruce*.jpg" + params: + byline: "Photo: Bjørn Erik Pedersen / CC-BY-SA" +--- + +Rather than writing all your site pages from scratch, Hugo lets you define and use [shortcodes](https://gohugo.io/content-management/shortcodes/). These are reusable snippets of content that you can include in your pages, often using HTML to create effects that are difficult or impossible to do in simple Markdown. Shortcodes can also have parameters that let you, for example, add your own text to a fancy shortcode text box. As well as Hugo's [built-in shortcodes](https://gohugo.io/content-management/shortcodes/), Docsy provides some shortcodes of its own to help you build your pages. + +## Shortcode blocks + +The theme comes with a set of custom **Page Block** shortcodes that can be used to compose landing pages, about pages, and similar. + +These blocks share some common parameters: + +height +: A pre-defined height of the block container. One of `min`, `med`, `max`, `full`, or `auto`. Setting it to `full` will fill the Viewport Height, which can be useful for landing pages. + +color +: The block will be assigned a color from the theme palette if not provided, but you can set your own if needed. You can use all of Bootstrap's color names, theme color names or a grayscale shade. Some examples would be `primary`, `white`, `dark`, `warning`, `light`, `success`, `300`, `blue`, `orange`. This will become the **background color** of the block, but text colors will adapt to get proper contrast. + +### blocks/cover + +The **blocks/cover** shortcode creates a landing page type of block that fills the top of the page. + +```html +{{</* blocks/cover title="Welcome!" image_anchor="center" height="full" color="primary" */>}} +<div class="mx-auto"> + <a class="btn btn-lg btn-primary mr-3 mb-4" href="{{</* relref "/docs" */>}}"> + Learn More <i class="fas fa-arrow-alt-circle-right ml-2"></i> + </a> + <a class="btn btn-lg btn-secondary mr-3 mb-4" href="https://example.org"> + Download <i class="fab fa-github ml-2 "></i> + </a> + <p class="lead mt-5">This program is now available in <a href="#">AppStore!</a></p> + <div class="mx-auto mt-5"> + {{</* blocks/link-down color="info" */>}} + </div> +</div> +{{</* /blocks/cover */>}} +``` + +Note that the relevant shortcode parameters above will have sensible defaults, but is included here for completeness. + +{{% alert title="Hugo Tip" %}} +> Using the bracket styled shortcode delimiter, `>}}`, tells Hugo that the inner content is HTML/plain text and needs no further processing. Changing the delimiter to `%}}` means Hugo will treat the content as Markdown. You can use both styles in your pages. +{{% /alert %}} + + +| Parameter | Default | Description | +| ---------------- |------------| ------------| +| title | | The main display title for the block. | +| image_anchor | | +| height | | See above. +| color | | See above. + + +To set the background image, place an image with the word "background" in the name in the page's [Page Bundle](/docs/adding-content/content/#page-bundles). For example, in our the example site the background image in the home page's cover block is [`featured-background.jpg`](https://github.com/google/docsy-example/tree/master/content/en), in the same directory. + +{{% alert title="Tip" %}} +If you also include the word **featured** in the image name, e.g. `my-featured-background.jpg`, it will also be used as the Twitter Card image when shared. +{{% /alert %}} + +For available icons, see [Font Awesome](https://fontawesome.com/icons?d=gallery&m=free). + +### blocks/lead + +The **blocks/lead** block shortcode is a simple lead/title block with centred text and an arrow down pointing to the next section. + +```go-html-template +{{%/* blocks/lead color="dark" */%}} +TechOS is the OS of the future. + +Runs on **bare metal** in the **cloud**! +{{%/* /blocks/lead */%}} +``` + +| Parameter | Default | Description | +| ---------------- |------------| ------------| +| height | | See above. +| color | | See above. + +### blocks/section + +The **blocks/section** shortcode is meant as a general-purpose content container. It comes in two "flavors", one for general content and one with styling more suitable for wrapping a horizontal row of feature sections. + +The example below shows a section wrapping 3 feature sections. + + +```go-html-template +{{</* blocks/section color="dark" */>}} +{{%/* blocks/feature icon="fa-lightbulb" title="Fastest OS **on the planet**!" */%}} +The new **TechOS** operating system is an open source project. It is a new project, but with grand ambitions. +Please follow this space for updates! +{{%/* /blocks/feature */%}} +{{%/* blocks/feature icon="fab fa-github" title="Contributions welcome!" url="https://github.com/gohugoio/hugo" */%}} +We do a [Pull Request](https://github.com/gohugoio/hugo/pulls) contributions workflow on **GitHub**. New users are always welcome! +{{%/* /blocks/feature */%}} +{{%/* blocks/feature icon="fab fa-twitter" title="Follow us on Twitter!" url="https://twitter.com/GoHugoIO" */%}} +For announcement of latest features etc. +{{%/* /blocks/feature */%}} +{{</* /blocks/section */>}} +``` + +| Parameter | Default | Description | +| ---------------- |------------| ------------| +| height | | See above. +| color | | See above. +| type | | Specify "section" if you want a general container, omit this parameter if you want this section to contain a horizontal row of features. + +### blocks/feature + +```go-html-template + +{{%/* blocks/feature icon="fab fa-github" title="Contributions welcome!" url="https://github.com/gohugoio/hugo" */%}} +We do a [Pull Request](https://github.com/gohugoio/hugo/pulls) contributions workflow on **GitHub**. New users are always welcome! +{{%/* /blocks/feature */%}} + +``` + +| Parameter | Default | Description | +| ---------------- |------------| ------------| +| title | | The title to use. +| url | | The URL to link to. +| icon | | The icon class to use. + + +### blocks/link-down + +The **blocks/link-down** shortcode creates a navigation link down to the next section. It's meant to be used in combination with the other blocks shortcodes. + +```go-html-template + +<div class="mx-auto mt-5"> + {{</* blocks/link-down color="info" */>}} +</div> +``` + +| Parameter | Default | Description | +| ---------------- |------------| ------------| +| color | info | See above. + +## Shortcode helpers + +### alert + +The **alert** shortcode creates an alert block that can be used to display notices or warnings. + +```go-html-template +{{%/* alert title="Warning" color="warning" */%}} +This is a warning. +{{%/* /alert */%}} + +``` + +Renders to: + +{{% alert title="Warning" color="warning" %}} +This is a warning. +{{% /alert %}} + +| Parameter | Default | Description | +| ---------------- |------------| ------------| +| color | primary | One of the theme colors, eg `primary`, `info`, `warning` etc. + +### pageinfo + +The **pageinfo** shortcode creates a text box that you can use to add banner information for a page: for example, letting users know that the page contains placeholder content, that the content is deprecated, or that it documents a beta feature. + +```go-html-template +{{%/* pageinfo color="primary" */%}} +This is placeholder content. +{{%/* /pageinfo */%}} + +``` + +Renders to: + +{{% pageinfo color="primary" %}} +This is placeholder content +{{% /pageinfo %}} + +| Parameter | Default | Description | +| ---------------- |------------| ------------| +| color | primary | One of the theme colors, eg `primary`, `info`, `warning` etc. + + +### imgproc + +The **imgproc** shortcode finds an image in the current [Page Bundle](/docs/adding-content/content/#page-bundles) and scales it given a set of processing instructions. + + +```go-html-template +{{</* imgproc spruce Fill "400x450" */>}} +Norway Spruce Picea abies shoot with foliage buds. +{{</* /imgproc */>}} +``` + +{{< imgproc spruce Fill "400x450" >}} +Norway Spruce Picea abies shoot with foliage buds. +{{< /imgproc >}} + +The example above has also a byline with photo attribution added. When using illustrations with a free license from [WikiMedia](https://commons.wikimedia.org/) and simlilar, you will in most situations need a way to attribute the author or licensor. You can add metadata to your page resources in the page front matter. The `byline` param is used by convention in this theme: + + +```yaml +resources: +- src: "**spruce*.jpg" + params: + byline: "Photo: Bjørn Erik Pedersen / CC-BY-SA" +``` + + +| Parameter | Description | +| ----------------: |------------| +| 1 | The image filename or enough of it to identify it (we do Glob matching) +| 2 | Command. One of `Fit`, `Resize` or `Fill`. See [Image Processing Methods](https://gohugo.io/content-management/image-processing/#image-processing-methods). +| 3 | Processing options, e.g. `400x450`. See [Image Processing Options](https://gohugo.io/content-management/image-processing/#image-processing-methods). + +### swaggerui + +The `swaggerui` shortcode can be placed anywhere inside a `swagger` layout; it renders [Swagger UI](https://swagger.io/tools/swagger-ui/) using any OpenAPI YAML or JSON file as source, which can be hosted anywhere (for example, the root `/static` folder of Hugo). + +```go-html-template +{{</* swaggerui src="/openapi/openapi.yaml" */>}} +``` + +You can customize Swagger UI's look and feel by overriding Swagger's CSS or by editing and compiling a [Swagger UI dist](https://github.com/swagger-api/swagger-ui) yourself and replace `themes/docsy/static/css/swagger-ui.css`. diff --git a/themes/docsy/userguide/content/en/docs/Adding content/Shortcodes/spruce.jpg b/themes/docsy/userguide/content/en/docs/Adding content/Shortcodes/spruce.jpg Binary files differnew file mode 100644 index 000000000..8ba2188b5 --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Adding content/Shortcodes/spruce.jpg diff --git a/themes/docsy/userguide/content/en/docs/Adding content/_index.md b/themes/docsy/userguide/content/en/docs/Adding content/_index.md new file mode 100644 index 000000000..05ee95343 --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Adding content/_index.md @@ -0,0 +1,7 @@ +--- +title: "Content and Customization" +linkTitle: "Content and Customization" +weight: 3 +description: > + How to add content to and customize your Docsy site. +--- diff --git a/themes/docsy/userguide/content/en/docs/Adding content/content.md b/themes/docsy/userguide/content/en/docs/Adding content/content.md new file mode 100644 index 000000000..3b981dada --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Adding content/content.md @@ -0,0 +1,287 @@ +--- +title: "Adding Content" +linkTitle: "Adding Content" +weight: 1 +description: > + Add different types of content to your Docsy site. +--- + +So you've got a new Hugo website with Docsy, now it's time to add some content! This page tells you how to use the theme to add and structure your site content. + +## Content root directory + +You add content for your site under the **content root directory** of your Hugo site project - either `content/` or a [language-specific](/docs/language/) root like `content/en/`. The main exception here is static files that you don't want built into your site: you can find out more about where you add these below in [Adding static content](#adding-static-content). The files in your content root directory are typically grouped in subdirectories corresponding to your site's sections and templates, which we'll look at in [Content sections and templates](#content-sections-and-templates). + +You can find out more about Hugo directory structure in [Directory Structure Explained](https://gohugo.io/getting-started/directory-structure/#directory-structure-explained). + +## Content sections and templates + +Hugo builds your site pages using the content files you provide plus any templates provided by your site's theme. These templates (or *"layouts"* in Hugo terminology) include things like your page's headers, footers, navigation, and links to stylesheets: essentially, everything except your page's specific content. The templates in turn can be made up of *partials*: little reusable snippets of HTML for page elements like headers, search boxes, and more. + +Because most technical documentation sites have different sections for different types of content, the Docsy theme comes with the [following templates](https://github.com/google/docsy/tree/master/layouts) for top-level site sections that you might need: + +* [`docs`](https://github.com/google/docsy/tree/master/layouts/docs) is for pages in your site's Documentation section. +* [`blog`](https://github.com/google/docsy/tree/master/layouts/blog) is for pages in your site's Blog. +* [`community`](https://github.com/google/docsy/tree/master/layouts/community) is for your site's Community page. + +It also provides a [default "landing page" type of template](https://github.com/google/docsy/tree/master/layouts/_default) with the site header and footer, but no left nav, that you can use for any other section. In this site and our example site it's used for the site [home page](/) and the [About](/about/) page. + +Each top-level **section** in your site corresponds to a **directory** in your site content root. Hugo automatically applies the appropriate **template** for that section, depending on which folder the content is in. For example, this page is in the `docs` subdirectory of the site's content root directory `content/en/`, so Hugo automatically applies the `docs` template. You can override this by explicitly specifying a template or content type for a particular page. + +If you've copied the example site, you already have appropriately named top-level section directories for using Docsy's templates, each with an index page ( `_index.md` or `index.html`) page for users to land on. These top-level sections also appear in the example site's [top-level menu](/docs/adding-content/navigation/#top-level-menu). + +### Custom sections + +If you've copied the example site and *don't* want to use one of the provided content sections, just delete the appropriate content subdirectory. Similarly, if you want to add a top-level section, just add a new subdirectory, though you'll need to specify the layout or content type explicitly in the [frontmatter](#page-frontmatter) of each page if you want to use any existing Docsy template other than the default one. For example, if you create a new directory `content/en/`**`amazing`** and want one or more pages in that custom section to use Docsy's `docs` template, you add `layout: docs` to the frontmatter of each page: + +```yaml +--- +title: "My amazing new section" +weight: 1 +layout: docs +description: > + A special section with a docs layout. +--- +``` + +Alternatively, create your own page template for your new section in your project's `layouts` directory based on one of the existing templates. + +You can find out much more about how Hugo page layouts work in [Hugo Templates](https://gohugo.io/templates/). The rest of this page tells you about how to add content and use each of Docsy's templates. + +## Page frontmatter + +Each page file in a Hugo site has metadata frontmatter that tells Hugo about the page. You specify page frontmatter in TOML, YAML, or JSON (our example site and this site use YAML). Use the frontmatter to specify the page title, description, creation date, link title, template, menu weighting, and even any resources such as images used by the page. You can see a complete list of possible page frontmatter in [Front Matter](https://gohugo.io/content-management/front-matter/). + +For example, here's the frontmatter for this page: + +``` +--- +title: "Adding Content" +linkTitle: "Adding Content" +weight: 1 +description: > + How to add content to your Docsy site. +--- +``` + +The minimum frontmatter you need to provide is a title: everything else is up to you! (though if you leave out the page weight your [navigation](/docs/adding-content/navigation) may get a little disorganized). + + +## Page contents and markup + +By default you create pages in a Docsy site as simple [Markdown or HTML files](https://gohugo.io/content-management/formats/) with [page frontmatter](#page-frontmatter), as described above. Hugo currently uses [BlackFriday](https://github.com/russross/blackfriday) as its default Markdown parser. + +In addition to your marked-up text, you can also use Hugo and Docsy's [shortcodes](/docs/adding-content/shortcodes): reusable chunks of HTML that you can use to quickly build your pages. Find out more about shortcodes in [Docsy Shortcodes](/docs/adding-content/shortcodes). + +{{% alert title="Note" color="info" %}} +Hugo also supports adding content using other markups using [external parsers as helpers](https://gohugo.io/content-management/formats/#additional-formats-through-external-helpers). For example, you can add content in RST using `rst2html` as an external parser (though be aware this does not support all flavors of RST, such as Sphinx RST). Similarly, you can use `asciidoctor` to parse Asciidoc files, or `pandoc` for other formats. + +External parsers may not be suitable for use with all deployment options, as you'll need to install the external parser and run Hugo yourself to generate your site (so, for example, you won't be able to use [Netlify's continuous deployment feature](/docs/deployment/#deployment-with-netlify)). In addition, adding an external parser may cause performance issues building larger sites. +{{% /alert %}} + +### Working with links + +Hugo and Blackfriday let you specify links using normal Markdown syntax, though remember that you need to specify links relative to your site's root URL, and that relative URLs are left unchanged by Hugo in your site's generated HTML. + +Alternatively you can use Hugo's helper [`ref` and `relref` shortcodes](https://gohugo.io/content-management/cross-references/) for creating internal links that resolve to the correct URL. However, be aware this means your links will not appear as links at all if a user views your page outside your generated site, for example using the rendered Markdown feature in GitHub's web UI. + +You can find (or add!) tips and gotchas for working with Hugo links in [Hugo Tips](/docs/best-practices/site-guidance). + +### Content style + +We don't mandate any particular style for your page contents. However, if you'd like some guidance on how to write and format clear, concise technical documentation, we recommend the [Google Developer Documentation Style Guide](https://developers.google.com/style/), particularly the [Style Guide Highlights](https://developers.google.com/style/highlights). + +## Page bundles + +You can create site pages as standalone files in their section or subsection directory, or as folders where the content is in the folder's index page. Creating a folder for your page lets you [bundle](https://gohugo.io/content-management/page-bundles/) images and other resources together with the content. + +You can see examples of both approaches in this and our example site. For example, the source for this page is just a standalone file `/content/en/docs/adding-content.md`. However the source for [Docsy Shortcodes](/docs/adding-content/shortcodes/) in this site lives in `/content/en/docs/adding-content/shortcodes/index.md`, with the image resource used by the page in the same `/shortcodes/` directory. In Hugo terminology, this is called a *leaf bundle* because it's a folder containing all the data for a single site page without any child pages (and uses `index.md` without an underscore). + +You can find out much more about managing resources with Hugo bundles in [Page Bundles](https://gohugo.io/content-management/page-bundles/). + +## Adding docs and blog posts + +The template you'll probably use most often is the [`docs` template](https://github.com/google/docsy/blob/master/layouts/docs/baseof.html) (as used in this page) or the very similar [`blog` template](https://github.com/google/docsy/blob/master/layouts/blog/baseof.html). Both these templates include: + +* a left nav +* GitHub links (populated from your site config) for readers to edit the page or create issues +* a page menu + +as well as the common header and footer used by all your site's pages. Which template is applied depends on whether you've added the content to the `blog` or `docs` content directory. You can find out more about how the nav and page menu are created in [Navigation and Search](/docs/adding-content/navigation/). + +### Organizing your documentation + +While Docsy's top-level sections let you create site sections for different types of content, you may also want to organize your docs content within your `docs` section. For example, this site's `docs` section directory has multiple subdirectories for **Getting Started**, **Content and Customization**, and so on. Each subdirectory has an `_index.md` (it could also be an `_index.html`), which acts as a section index page and tells Hugo that the relevant directory is a subsection of your docs. + +Docsy's `docs` layout gives you a left nav pane with an autogenerated nested menu based on your `docs` file structure. Each standalone page or subsection `_index.md` or `_index.html` page in the `docs/` directory gets a top level menu item, using the link name and `weight` metadata from the page or index. + +To add docs to a subsection, just add your page files to the relevant subdirectory. Any pages that you add to a subsection in addition to the subsection index page will appear in a submenu (look to the left to see one in action!), again ordered by page `weight`. Find out more about adding Docsy's navigation metadata in [Navigation and Search](/docs/adding-content/navigation/) + +If you've copied the example site, you'll already have some suggested subdirectories in your `docs` directory, with guidance for what types of content to put in them and some example Markdown pages. You can find out more about organizing your content with Docsy in [Organizing Your Content](/docs/organizing/). + +#### Docs section landing pages + +By default a docs section landing page (the `_index.md` or `_index.html` in the section directory) uses a layout that adds a formatted list of links to the pages in the section, with their frontmatter descriptions. The [Content and Customization](/docs/adding-content/) landing page in this site is a good example. + +To display a simple bulleted list of links to the section's pages instead, specify `simple_list: true` in the landing page's frontmatter: + +``` +--- +title: "Simple List Page" +simple_list: true +weight: 20 +--- +``` + +To display no links at all, specify `no_list: true` in the landing page's frontmatter: + +``` +--- +title: "No List Page" +no_list: true +weight: 20 +--- +``` + +### Organizing your blog posts + +Docsy's `blog` layout also gives you a left nav menu (like the `docs` layout), and a list-type index page for your blog that's applied to `/blog/_index.md` and automatically displays snippets of all your recent posts in reverse chronological order. + +To create different blog categories to organize your posts, create subfolders in `blog/`. For instance, in our [example site](https://github.com/google/docsy-example/tree/master/content/en/blog) we have `news` and `releases`. Each category needs to have its own `_index.md` or `_index.html` landing page file specifying the category title for it to appear properly in the left nav and top-level blog landing page. Here's the index page for `releases`: + +``` +--- +title: "New Releases" +linkTitle: "Releases" +weight: 20 +--- +``` + +To add author and date information to blog posts, add them to the page frontmatter: + +``` +--- +date: 2018-10-06 +title: "Easy documentation with Docsy" +linkTitle: "Announcing Docsy" +description: "The Docsy Hugo theme lets project maintainers and contributors focus on content, not on reinventing a website infrastructure from scratch" +author: Riona MacNamara +resources: +- src: "**.{png,jpg}" + title: "Image #:counter" + params: + byline: "Photo: Riona MacNamara / CC-BY-CA" +--- +``` + +If you've copied the example site and you don't want a blog section, or want to link to an external blog instead, just delete the `blog` subdirectory. + + +## Working with top-level landing pages. + +Docsy's [default page template](https://github.com/google/docsy/blob/master/layouts/docs/baseof.html) has no left nav and is useful for creating a home page for your site or other "landing" type pages. + +### Customizing the example site pages + +If you've copied the example site, you already have a simple site landing page in `content/en/_index.html`. This is made up of Docsy's provided Hugo shortcode [page blocks](/docs/adding-content/shortcodes). + +To customize the large landing image, which is in a [cover](#blocks-cover) block, replace the `content/en/featured-background.jpg` file in your project with your own image (it can be called whatever you like as long as it has `background` in the file name). You can remove or add as many blocks as you like, as well as adding your own custom content. + +The example site also has an About page in `content/en/about/_index.html` using the same Docsy template. Again, this is made up of [page blocks](/docs/adding-content/shortcodes), including another background image in `content/en/about/featured-background.jpg`. As with the site landing page, you can replace the image, remove or add blocks, or just add your own content. + +### Building your own landing pages + +If you've just used the theme, you can still use all Docsy's provided [page blocks](/docs/adding-content/shortcodes) (or any other content you want) to build your own landing pages in the same file locations. + +## Adding a community page + +The `community` landing page template has boilerplate content that's automatically filled in with the project name and community links specified in `config.toml`, providing your users with quick links to resources that help them get involved in your project. The same links are also added by default to your site footer. + +```toml +[params.links] +# End user relevant links. These will show up on left side of footer and in the community page if you have one. +[[params.links.user]] + name = "User mailing list" + url = "https://example.org/mail" + icon = "fa fa-envelope" + desc = "Discussion and help from your fellow users" +[[params.links.user]] + name ="Twitter" + url = "https://example.org/twitter" + icon = "fab fa-twitter" + desc = "Follow us on Twitter to get the latest news!" +[[params.links.user]] + name = "Stack Overflow" + url = "https://example.org/stack" + icon = "fab fa-stack-overflow" + desc = "Practical questions and curated answers" +# Developer relevant links. These will show up on right side of footer and in the community page if you have one. +[[params.links.developer]] + name = "GitHub" + url = "https://github.com/google/docsy" + icon = "fab fa-github" + desc = "Development takes place here!" +[[params.links.developer]] + name = "Slack" + url = "https://example.org/slack" + icon = "fab fa-slack" + desc = "Chat with other project developers" +[[params.links.developer]] + name = "Developer mailing list" + url = "https://example.org/mail" + icon = "fa fa-envelope" + desc = "Discuss development issues around the project" +``` + +If you're creating your own site and want to add a page using this template, add a `/community/_index.md` file in your content root directory. If you've copied the example site and *don't* want a community page, just delete the `/content/en/community/` directory in your project repo. + +## Adding static content + +You may want to serve some non-Hugo-built content along with your site: for example, if you have generated reference docs using Doxygen, Javadoc, or other doc generation tools. + +To add static content to be served "as-is", just add the content as a folder and/or files in your site's `static` directory. When your site is deployed, content in this directory is served at the site root path. So, for example, if you have added content at `/static/reference/cpp/`, users can access that content at `http://{server-url}/reference/cpp/` and you can link to pages in this directory from other pages at `/reference/cpp/{file name}`. + +You can also use this directory for other files used by your project, including image files. You can find out more about serving static files, including configuring multiple directories for static content, in [Static Files](https://gohugo.io/content-management/static-files/). + +## RSS feeds + +Hugo will, by default, create an RSS feed for the home page and any section. For the main RSS feed you can control which sections to include by setting a site param in your `config.toml`. This is the default configuration: + +```toml +rss_sections = ["blog"] +``` +To disable all RSS feeds, add the following to your `config.toml`: + +```toml +disableKinds = ["RSS"] +``` + +## Sitemap + +Hugo creates a `sitemap.xml` file for your generated site by default: for example, [here's the sitemap](/sitemap.xml) for this site. + +You can configure the frequency with which your sitemap is updated, your sitemap filename, and the default page priority in your `config.toml`: + +```toml +[sitemap] + changefreq = "monthly" + filename = "sitemap.xml" + priority = 0.5 +``` + +To override any of these values for a given page, specify it in page frontmatter: + +```yaml +--- +title: "Adding Content" +linkTitle: "Adding Content" +weight: 1 +description: > + Add different types of content to your Docsy site. +sitemap: + priority: 1.0 +--- +``` + +To learn more about configuring sitemaps, see [Sitemap Template](https://gohugo.io/templates/sitemap-template/). + diff --git a/themes/docsy/userguide/content/en/docs/Adding content/feedback.md b/themes/docsy/userguide/content/en/docs/Adding content/feedback.md new file mode 100644 index 000000000..62df817cf --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Adding content/feedback.md @@ -0,0 +1,133 @@ +--- +title: "Analytics and User Feedback" +date: 2019-06-05 +weight: 7 +description: > + Add Google Analytics tracking to your site, use the "was this page helpful?" widget data, disable the widget on a single + page or all pages, and change the response text. +--- + +## Adding Analytics + +The Docsy theme contains built-in support for [Google Analytics](https://analytics.google.com/analytics/web/) via Hugo's [internal template](https://gohugo.io/templates/internal/#google-analytics), which is included in the theme. Once you set Analytics up as described below, usage information for your site (such as page views) is sent to your Google Analytics account. + +### Setup + +1. Ensure you have [set up a Google Analytics property](https://support.google.com/analytics/answer/1042508) for your site: this gives you an Analytics ID to add to your config, which Docsy in turn adds to all your site's pages. +1. Open `config.toml`. +1. Enable Google Analytics by setting the Tracking ID property to your site's Analytics ID. + + [services.googleAnalytics] + id = "UA-00000000-0" + +1. Save and close `config.toml`. +1. Ensure that your site is built with `HUGO_ENV="production"`, as Docsy only adds Analytics tracking to production-ready sites. You can specify this variable as a command line flag to Hugo: + + ``` + $ env HUGO_ENV="production" hugo + ``` + + Alternatively, if you're using Netlify, you can specify it as a Netlify [deployment setting](https://www.netlify.com/docs/continuous-deployment/#build-environment-variables) in `netlify.toml` or the Netlify UI, along with the Hugo version. + + +## User Feedback + +By default Docsy puts a "was this page helpful?" feedback widget at the bottom of every +documentation page, as shown in Figure 1. + +<figure> + <img src="/images/feedback.png" + alt="The user is presented with the text 'Was this page helpful?' followed + by 'Yes' and 'No' buttons."/> + <figcaption>Figure 1. The feedback widget, outlined in red</figcaption> +</figure> + +After clicking **Yes** the user should see a response like Figure 2. You can configure the +response text in `config.toml`. + +<figure> + <img src="/images/yes.png" + alt="After clicking 'Yes' the widget responds with 'Glad to hear it! + Please tell us how we can improve.' and the second sentence is a link which, + when clicked, opens GitHub and lets the user create an issue on the + documentation repository."/> + <figcaption> + Figure 2. An example <b>Yes</b> response + </figcaption> +</figure> + +### How is this data useful? + +When you have a lot of documentation, and not enough time to update it all, you can use the +"was this page helpful?" feedback data to help you decide which pages to prioritize. In general, +start with the pages with a lot of pageviews and low ratings. "Low ratings" in this context +means the pages where users are clicking **No** --- the page wasn't helpful --- more often than +**Yes** --- the page was helpful. You can also study your highly-rated pages to develop hypotheses +around why your users find them helpful. + +In general, you can develop more certainty around what patterns your users find helpful or +unhelpful if you introduce isolated changes in your documentation whenever possible. For example, +suppose that you find a tutorial that no longer matches the product. You update the instructions, +check back in a month, and the score has improved. You now have a correlation between up-to-date +instructions and higher ratings. Or, suppose you study your highly-rated pages and discover that +they all start with code samples. You find 10 other pages with their code samples at the bottom, +move the samples to the top, and discover that each page's score has improved. Since +this was the only change you introduced on each page, it's more reasonable to believe that +your users find code samples at the top of pages helpful. The scientific method, applied to +technical writing, in other words! + +### Setup + +1. Open `config.toml`. +1. Ensure that Google Analytics is enabled, as described [above](#setup). +1. Set the response text that users see after clicking **Yes** or **No**. + + [params.ui.feedback] + enable = true + yes = 'Glad to hear it! Please <a href="https://github.com/USERNAME/REPOSITORY/issues/new">tell us how we can improve</a>.' + no = 'Sorry to hear that. Please <a href="https://github.com/USERNAME/REPOSITORY/issues/new">tell us how we can improve</a>.' +1. Save and close `config.toml`. + +### Access the feedback data + +This section assumes basic familiarity with Google Analytics. For example, you should know how +to check pageviews over a certain time range and navigate between accounts if you have access to +multiple documentation sites. + +1. Open Google Analytics. +1. Open **Behavior** > **Events** > **Overview**. +1. In the **Event Category** table click the **Helpful** row. Click **view full report** if + you don't see the **Helpful** row. +1. Click **Event Label**. You now have a page-by-page breakdown of ratings. + +Here's what the 4 columns represent: + +* **Total Events** is the total number of times that users clicked *either* **Yes** or **No**. +* **Unique Events** provides a rough indication of how frequenly users are rating your pages per + session. For example, suppose your **Total Events** is 5000, and **Unique Events** is 2500. + This means that you have 2500 users who are rating 2 pages per session. +* **Event Value** isn't that useful. +* **Avg. Value** is the aggregated rating for that page. The value is always between 0 + and 1. When users click **No** a value of 0 is sent to Google Analytics. When users click + **Yes** a value of 1 is sent. You can think of it as a percentage. If a page has an + **Avg. Value** of 0.67, it means that 67% of users clicked **Yes** and 33% clicked **No**. + +[events]: https://developers.google.com/analytics/devguides/collection/analyticsjs/events +[PR]: https://github.com/google/docsy/pull/1/files + +The underlying Google Analytics infrastructure that stores the "was this page helpful?" data is +called [Events][events]. See [docsy pull request #1][PR] to see exactly +what happens when a user clicks **Yes** or **No**. It's just a `click` event listener that +fires the Google Analytics JavaScript function for logging an Event, disables the **Yes** and +**No** buttons, and shows the response text. + +### Disable feedback on a single page + +Add `hide_feedback: true` to the page's front matter. + +### Disable feedback on all pages + +Set `params.ui.feedback.enable` to `false` in `config.toml`: + + [params.ui.feedback] + enable = false diff --git a/themes/docsy/userguide/content/en/docs/Adding content/iconsimages.md b/themes/docsy/userguide/content/en/docs/Adding content/iconsimages.md new file mode 100644 index 000000000..b54aeecd7 --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Adding content/iconsimages.md @@ -0,0 +1,75 @@ +--- +title: "Logos and Images" +linkTitle: "Logos and Images" +date: 2017-01-05 +weight: 6 +description: > + Add and customize logos, icons, and images in your project. +--- + +## Add your logo + +Add your project logo as `assets/icons/logo.svg` in your project. This overrides the default Docsy logo in the theme. If you don't want a project logo, set `navbar_logo` to `false` (or delete the variable) in your `config.toml`: + +``` +navbar_logo = false +``` + +If you decide at a later stage that you'd like to add a logo to your navbar, you can set the parameter to `true`: + +``` +navbar_logo = true +``` + +{{% alert title="Tip" %}} +Your logo is included in the default Docsy navbar as an inline SVG with the following CSS styling (from [`_nav.scss`](https://github.com/google/docsy/blob/master/assets/scss/_nav.scss)): + +``` +svg { + display: inline-block; + margin: 0 10px; + height: 30px; +} +``` + +To ensure your logo displays correctly, you may want to resize it, ensure it doesn't have height and width attributes so that its size is fully responsive, or override the default styling with your own CSS. +{{% /alert %}} + +## Add your favicons + +The easiest way to do this is to create a set of favicons via http://cthedot.de/icongen (which lets you create a huge range of icon sizes and options from a single image) and/or https://favicon.io/, and put them in your site project's `static/favicons` directory. This will override the default favicons from the theme. + +Note that https://favicon.io/ doesn't create as wide a range of sizes as Icongen but *does* let you quickly create favicons from text: if you want to create text favicons you can use this site to generate them, then use Icongen to create more sizes (if necessary) from your generated `.png` file. + +If you have special favicon requirements, you can create your own `layouts/partials/favicons.html` with your links. + +## Add images + +### Landing pages + +Docsy's [`blocks/cover` shortcode](/docs/adding-content/shortcodes/#blocks-cover) make it easy to add large cover images to your landing pages. The shortcode looks for an image with the word "background" in the name inside the landing page's [Page Bundle](https://gohugo.io/content-management/page-bundles/) - so, for example, if you've copied the example site, the landing page image in `content/en/_index.html` is `content/en/featured-background.jpg`. + +You specify the preferred display height of a cover block container (and hence its image) using the block's `height` parameter. For a full viewport height, use `full`: + +```html +{{</* blocks/cover title="Welcome to the Docsy Example Project!" image_anchor="top" height="full" color="orange" */>}} +... +{{</* /blocks/cover */>}} +``` + +For a shorter image, as in the example site's About page, use one of `min`, `med`, `max` or `auto` (the actual height of the image): + +```html +{{</* blocks/cover title="About the Docsy Example" image_anchor="bottom" height="min" */>}} +... +{{</* /blocks/cover */>}} +``` + +### Other pages + +To add inline images to other pages, use the [`imgproc` shortcode](/docs/adding-content/shortcodes/#imgproc). Alternatively, if you prefer, just use regular Markdown or HTML images and add your image files to your project's `static` directory. You can find out more about using this directory in [Adding static content](/docs/adding-content/content/#adding-static-content). + +## Images used on this site + +Images used as background images in this site are in the [public domain](https://commons.wikimedia.org/wiki/User:Bep/gallery#Wed_Aug_01_16:16:51_CEST_2018) and can be used freely. The porridge image in the example site is by <a href="https://pixabay.com/users/iha31-560629/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=531209">iha31</a> from <a href="https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=531209">Pixabay</a> + diff --git a/themes/docsy/userguide/content/en/docs/Adding content/lookandfeel.md b/themes/docsy/userguide/content/en/docs/Adding content/lookandfeel.md new file mode 100644 index 000000000..d104805dd --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Adding content/lookandfeel.md @@ -0,0 +1,127 @@ +--- +title: "Look and Feel" +linkTitle: "Look and Feel" +date: 2017-01-05 +weight: 2 +description: > + Customize colors, fonts, and more for your site. +--- + +By default, a site using Docsy has the theme's default fonts, colors, and general look and feel. However, if you want your own color scheme (and you probably will!) you can very easily override the theme defaults with your own project-specific values - Hugo will look in your project files first when looking for information to build your site. Also because Docsy uses Bootstrap 4 and SCSS for styling, you can override just single values in its special SCSS project variables file, or do more serious customization by creating your own versions of entire SCSS files. + +## Color palette and other styles + +To quickly change your site's colors, add SCSS variable project overrides to `assets/scss/_variables_project.scss`. A simple example changing the primary and secondary color to two shades of purple: + +```scss +$primary: #390040; +$secondary: #A23B72; +``` + +* See `assets/scss/_variables.scss` in the theme for color variables etc. that can be set to change the look and feel. +* Also see available variables in Bootstrap 4: https://getbootstrap.com/docs/4.0/getting-started/theming/ and https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss + +The theme has features suchs as rounded corners and gradient backgrounds enabled by default. These can also be toggled in your project variables file: + +```scss +$enable-gradients: true; +$enable-rounded: true; +$enable-shadows: true; +``` + +{{% alert title="Tip" %}} +PostCSS (autoprefixing of CSS browser-prefixes) is not enabled when running in server mode (it is a little slow), so Chrome is the recommended choice for development. +{{% /alert %}} + +Also note that any SCSS import will try the project before the theme, so you can -- as one example -- create your own `_assets/scss/_content.scss` and get full control over how your Markdown content is styled. + +## Fonts + +The theme uses [Open Sans](https://fonts.google.com/specimen/Open+Sans) as its primary font. To disable Google Fonts and use a system font, set this SCSS variable in `assets/scss/_variables_project.scss`: + +```scss +$td-enable-google-fonts: false; +``` + +To configure another Google Font: + +```scss +$google_font_name: "Open Sans"; +$google_font_family: "Open+Sans:300,300i,400,400i,700,700i"; +``` + +Note that if you decide to go with a font with different weights (in the built-in configuration this is `300` (light), `400` (medium) and `700` (bold)), you also need to adjust the weight related variables, i.e. variables starting with `$font-weight-`. + +## CSS utilities + +For documentation of available CSS utility classes, see the [Bootstrap Documentation](https://getbootstrap.com/). This theme adds very little on its own in this area. However, we have added some some color state CSS classes that can be useful in a dynamic context: + +* `.-bg-<color>` +* `.-text-<color>` + +You can use these classes, for example, to style your text in an appropriate color when you don't know if the `primary` color is dark or light, to ensure proper color contrast. They are also useful when you receive the color code as a [shortcode](/docs/adding-content/shortcodes/) parameter. + +The value of `<color>` can be any of the color names, `primary`, `white`, `dark`, `warning`, `light`, `success`, `300`, `blue`, `orange` etc. + +When you use `.-bg-<color>`, the text colors will be adjusted to get proper contrast: + +```html +<div class="-bg-primary p-3 display-4">Background: Primary</div> +<div class="-bg-200 p-3 display-4">Background: Gray 200</div> +``` + +<div class="-bg-primary p-3 display-4 w-75">Background: Primary</div> +<div class="-bg-200 p-3 display-4 mb-5 w-50 w-75">Background: Gray 200</div> + +`.-text-<color>` sets the text color only: + +```html +<div class="-text-blue pt-3 display-4">Text: Blue</div> +``` + +<div class="-text-blue pt-3 display-4">Text: Blue</div> + +## Customizing templates + +### Add code to head or before body end + +If you need to add some code (CSS import or similar) to the `head` section on every page, add a partial to your project: + +``` +layouts/partials/hooks/head-end.html +``` + +And add the code you need in that file. Your partial code is automatically included at the end of the theme partial [head.html](https://github.com/google/docsy/blob/master/layouts/partials/head.html) (the [theme version](https://github.com/google/docsy/blob/master/layouts/partials/head.html) of `head-end.html` is empty): + + +Similar, if you want to add some code right before the `body` end, create your own version of the following file: + +``` +layouts/partials/hooks/body-end.html +``` + +Any code in this file is included automatically at the end of the theme partial [`scripts.html`](https://github.com/google/docsy/blob/master/layouts/partials/head.html). + +Both `head.html` and `scripts.html` are then used to build Docsy's [base page layout](https://github.com/google/docsy/blob/master/layouts/_default/baseof.html), which is used by all the other page templates: + +```html +<!doctype html> +<html lang="{{ .Site.Language.Lang }}" class="no-js"> + <head> + {{ partial "head.html" . }} + </head> + <body class="td-{{ .Kind }}"> + <header> + {{ partial "navbar.html" . }} + </header> + <div class="container-fluid td-default td-outer"> + <main role="main" class="td-main"> + {{ block "main" . }}{{ end }} + </main> + {{ partial "footer.html" . }} + </div> + {{ partialCached "scripts.html" . }} + </body> +</html> +``` + diff --git a/themes/docsy/userguide/content/en/docs/Adding content/navigation.md b/themes/docsy/userguide/content/en/docs/Adding content/navigation.md new file mode 100644 index 000000000..bf355385c --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Adding content/navigation.md @@ -0,0 +1,177 @@ +--- +title: "Navigation and Search" +date: 2017-01-05 +weight: 3 +description: > + Customize site navigation and search for your Docsy site. +--- + +## Top-level menu + +The top level menu (the one that appears in the top navigation bar for the entire site) uses your site's [`main` menu](https://gohugo.io/content-management/menus/). All Hugo sites have a `main` menu array of menu entries, accessible via the `.Site.Menus` site variable and populatable via page front matter or your site's `config.toml`. + +To add a page or section to this menu, add it to the site's `main` menu in either `config.toml` or in the destination page's front matter (in `_index.md` or `_index.html` for a section, as that's the section landing page). For example, here's how we added the Documentation section landing page to the main menu in this site: + +```yaml +--- +title: "Docsy Documentation" +linkTitle: "Documentation" +menu: + main: + weight: 20 +--- +``` + +The menu is ordered from left to right by page `weight`. So, for example, a section index or page with `weight: 30` would appear after the Documentation section in the menu, while one with `weight: 10` would appear before it. + +If you want to add a link to an external site to this menu, add it in `config.toml`, specifying the `weight`. + +```yaml +[[menu.main]] + name = "GitHub" + weight = 50 + url = "https://github.com/google/docsy/" +``` + +### Adding a version drop-down + +Depending on your project's releases and versioning, you may want to let your users access "old" versions of your site (how you deploy your archived sites is up to you) to read about previous versions of your project. + +If you add some `[params.versions]` in `config.toml`, the Docsy theme adds a version selector drop down to the top-level menu. You specify a URL and a name for each version you would like to add to the menu, as in the following example: + +``` +# Add your release versions here +[[params.versions]] + version = "master" + url = "https://master.kubeflow.org" + +[[params.versions]] + version = "v0.2" + url = "https://v0-2.kubeflow.org" + +[[params.versions]] + version = "v0.3" + url = "https://v0-3.kubeflow.org" +``` + +(don't forget to add your current version so users can navigate back!) + +The default version drop-down menu title is `Releases`. To change this, change the `version_menu` parameter in `config.toml`: + +``` +version_menu = "Releases" +``` + + +### Adding a language drop-down + +If you configure more than one language in `config.toml`, the Docsy theme adds a language selector drop down to the top-level menu. Selecting a language takes the user to the translated version of the current page, or the home page for the given language. + +You can find out more in [Multi-language support](/docs/language/). + +## Section menu + +The section menu, as shown in the left side of the `docs` section, is automatically built from the `content` tree. Like the top-level menu, it is ordered by page or section index `weight` (or by page creation `date` if `weight` is not set), with the page or index's `Title`, or `linkTitle` if different, as its link title in the menu. If a section subfolder has pages other than `_index.md` or `_index.html`, those pages will appear as a submenu, again ordered by `weight`. For example, here's the metadata for this page showing its `weight` and `title`: + +```yaml +--- +title: "Navigation and Search" +linkTitle: "Navigation and Search" +date: 2017-01-05 +weight: 3 +description: > + Customize site navigation and search for your Docsy site. +--- +``` + +To hide a page or section from the menu, set `toc_hide: true` in front matter. + +By default, the section menu will show the current section fully expanded all the way down. This may make the left nav too long and difficult to scan for bigger sites. Try setting site param `ui.sidebar_menu_compact = true` in `config.toml`. + +## Breadcrumb navigation + +Breadcrumb navigation is enabled by default. To disable breadcrumb navigation, set site param `ui.breadcrumb_disable = true` in `config.toml`. + +## Configure GCSE search + +By default Docsy uses a [Google Custom Search Engine](https://cse.google.com/cse/all) to search your site. To enable this feature, you'll first need to make sure that you have built a public production version of your site, as otherwise your site won't be crawled and indexed. + +### Setting up site search + +1. Deploy your site and ensure that it's built with `HUGO_ENV="production"`, as Google will only crawl and index Docsy sites built with this setting (you probably don't want your not-ready-for-prime-time site to be searchable!). You can specify this variable as a command line flag to Hugo: + + ``` + $ env HUGO_ENV="production" hugo + ``` + + Alternatively, if you're using Netlify, you can specify it as a Netlify [deployment setting](https://www.netlify.com/docs/continuous-deployment/#build-environment-variables) in `netlify.toml` or the Netlify UI, along with the Hugo version. It may take a day or so before your site has actual search results available. +2. Create a Google Custom Search Engine for your deployed site by clicking **New search engine** on the [Custom Search page](https://cse.google.com/cse/all) and following the instructions. Make a note of the ID for your new search engine. +3. Add any further configuration you want to your search engine using the **Edit search engine** options. In particular you may want to do the following: + + * Select **Look and feel**. Change from the default **Overlay** layout to **Results only**, as this option means your search results are embedded in your search page rather than appearing in a separate box. Click **Save** to save your changes. + * Edit the default result link behavior so that search results from your site don't open in a new tab. To do this, select **Search Features** - **Advanced** - **Websearch Settings**. In the **Link Target** field, type "\_parent". Click **Save** to save your changes. + +{{% alert title="Tip" %}} +Your site search results should show up within a couple of days. If it takes longer than that, you can manually request that your site is indexed by [submitting a sitemap through the Google Search Console](https://support.google.com/webmasters/answer/183668?hl=en). +{{% /alert %}} + +### Adding the search page + +Once you have your search engine set up, you can add the feature to your site: + +1. Ensure you have a Markdown file in `content/en/search.md` (and one per other languages if needed) to display your search results. It only needs a title and `layout: search`, as in the following example: + + ``` + --- + title: Search Results + layout: search + --- + ``` + +1. Add your Google Custom Search Engine ID to the site params in `config.toml`. You can add different values per language if needed. + + ``` + # Google Custom Search Engine ID. Remove or comment out to disable search. + gcs_engine_id = "011737558837375720776:fsdu1nryfng" + ``` + +### Disabling GCSE search + +If you don't specify a Google Custom Search Engine ID for your project, the search box won't appear in your site. If you're using the default `config.toml` from the example site and want to disable search, just comment out or remove the relevant line. + +### Disabling the sidebar search box + +By default, the search box appears in both the top navigation bar and at the top of the sidebar left navigation pane. If you don't want the sidebar search box, set `sidebar_search_disable` to `true` in `config.toml`: + +``` +sidebar_search_disable = true +``` + +## Configure Algolia DocSearch + +As an alternative to GCSE, you can use [Algolia DocSearch](https://community.algolia.com/docsearch/) with this theme. Algolia DocSearch is free for public documentation sites. + +### Sign up for Algolia DocSearch + +Complete the form at [https://community.algolia.com/docsearch/#join-docsearch-program](https://community.algolia.com/docsearch/#join-docsearch-program). + +If you are accepted to the program, you will receive the JavaScript code to add to your documentation site from Algolia by email. + +### Adding Algolia DocSearch + +1. Enable Algolia DocSearch in `config.toml`. + + ``` + # Enable Algolia DocSearch + algolia_docsearch = true + ``` + +2. Remove or comment out any GCSE ID in `config.toml` as you can only have one type of search enabled. See [Disabling GCSE search](#disabling-gcse-search). + +3. Disable the sidebar search in `config.toml` as this is not currently supported for Algolia DocSearch. See [Disabling the sidebar search box](#disabling-the-sidebar-search-box). + +3. Add the JavaScript code provided to you by Algolia to the head and body of every page on your site. See [Add code to head or before body end](/docs/adding-content/lookandfeel/#add-code-to-head-or-before-body-end) for details. + +4. Update the `inputSelector` field in the body end Javascript with the appropriate CSS selector (e.g. `.td-search-input` to use the default CSS from this theme). + +When you've completed these steps the Algolia search should be enabled on your site. Search results are displayed as a drop-down under the search box, so you don't need to add any search results page. diff --git a/themes/docsy/userguide/content/en/docs/Adding content/repository-links.md b/themes/docsy/userguide/content/en/docs/Adding content/repository-links.md new file mode 100644 index 000000000..72eb3058d --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Adding content/repository-links.md @@ -0,0 +1,47 @@ +--- +title: "Repository Links" +linkTitle: "Repository Links" +weight: 8 +description: > + Help your users interact with your source repository. +--- + +The Docsy [docs and blog layouts](/docs/adding-content/content/#adding-docs-and-blog-posts) include links for readers to edit the page or create issues for your docs or project via your site's source repository. The current generated links for each docs or blog page are: + +* **Edit this page**: Brings the user to an editable version of the page content in their fork (if available) of your docs repo. If the user doesn't have a current fork of your docs repo, they are invited to create one before making their edit. The user can then create a pull request for your docs. +* **Create documentation issue**: Brings the user to a new issue form in your docs repo with the name of the current page as the issue's title. +* **Create project issue** (optional): Brings the user to a new issue form in your project repo. This can be useful if you have separate project and docs repos and your users want to file issues against the project feature being discussed rather than your docs. + +This page shows you how to configure these links using your `config.toml` file. + +Currently Docsy supports only GitHub repository links "out of the box". If you are using another repository such as Bitbucket and would like generated repository links, feel free to [add a feature request or update our theme](/docs/contribution-guidelines/). + +## Link configuration + +There are three variables you can configure in `config.toml` to set up links: + +### `github_repo` + +The URL for your site's source repository. This is used to generate the **Edit this page** and **Create documentation issue** links. + +```toml +github_repo = "https://github.com/google/docsy" +``` + +### `github_subdir` (optional) + +Specify a value here if your content directory is not in your repo's root directory. For example, this site is in the `userguide` subdirectory of its repo. Setting this value means that your edit links will go to the right page. + +```toml +github_subdir = "userguide" +``` + +### `github_project_repo` (optional) + +Specify a value here if you have a separate project repo and you'd like your users to be able to create issues against your project from the relevant docs. The **Create project issue** link appears only if this is set. + +```toml +github_project_repo = "https://github.com/google/docsy" +``` + + diff --git a/themes/docsy/userguide/content/en/docs/Best practices/_index.md b/themes/docsy/userguide/content/en/docs/Best practices/_index.md new file mode 100644 index 000000000..fb1ee788d --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Best practices/_index.md @@ -0,0 +1,8 @@ +--- +title: "Best Practices" +weight: 9 +description: > + Optional guidance and recommendations about organizing, authoring, and managing your technical documentation. +--- + +Use this section to learn about some of the best practices around creating technical documentation with Docsy. diff --git a/themes/docsy/userguide/content/en/docs/Best practices/organizing-content.md b/themes/docsy/userguide/content/en/docs/Best practices/organizing-content.md new file mode 100644 index 000000000..3a2ba3f17 --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Best practices/organizing-content.md @@ -0,0 +1,56 @@ +--- +title: "Organizing Your Content" +linkTitle: "Organizing Your Content" +weight: 9 +description: > + Optional guidance and recommendations on how to organize your documentation site. +--- + +If you have a look at our [Example Site](https://example.docsy.dev/about/), you'll see that we've organized +the Documentation section into a number of subsections, each with some recommendations about what you might put +in that section. + +## Do I need to use this structure? + +Absolutely not! The site structure in the Example Site was created to meet the needs of large docsets for large +products with lots of features, potential tasks, and reference elements. For a simpler docset (like this one!), +it's fine to just structure your docs around specific features that your users need to know about. Even for larger +documentation sets, you may find that the structure isn't useful "as is", or that you don't need to use all the +section types. + +We do recommend that (as we've done here) you provide at least: + +* An **Overview** of the product (either on the docs landing page or a separate Overview page) that tells the user + why they should be interested in your project. +* A **Getting Started** page. +* Some **Examples**. + +You may also want to create some tasks/how-tos for your project's features. Feel free to copy this Docsy user guide +site or even just the docs section instead if you like this simpler structure better. + +{{% alert title="Tip" %}} +If you want to copy this guide, be aware that its [source files](https://github.com/google/docsy/tree/master/userguide) are *inside* the Docsy theme repo, and so it doesn't have its own `themes/` directory: instead, we run `hugo server --themesDir ../..` to use Docsy from its parent directory. You may want to either copy the site and [add a `themes/` directory with Docsy](/docs/getting-started/#option-2-use-the-docsy-theme-in-your-own-site), or just copy the `docs/` folder into your existing site's content root. +{{% /alert %}} + +[Learn more about how Hugo and Docsy use folders and other files to organize your site](/docs/adding-content/content/#organizing-your-documentation). + +## Why this structure? + +We based the Example Site structure on our own experiences creating (and using) large documentation sets for +different types of project and on user research carried out on some of our bigger sites. In user studies we saw that +users cared most about and immediately looked for a Get Started or Getting Started section +(so they could, well, get started), and some examples to explore and copy, so we made those into prominent top-level doc +sections in our site. Users also wanted to find "recipes" that they could easily look up to perform specific tasks and +put together to create their own applications or projects, so we suggest that you add this kind of content as Tasks. +Other content types such as conceptual docs, reference docs, and end-to-end tutorials are less important for all doc sets, +particularly for smaller projects. We emphasize in our Example Site that these sections are optional. + +We hope to improve the Example Site structure further as we learn more about how users interact with technical +documentation, particularly for Open Source projects. + +## Writing style guide + +This guide and the example site just address how to organize your documentation content into pages and sections. For some g +uidance on how to organize and write the content in each page, we recommend the +[Google Developer Documentation Style Guide](https://developers.google.com/style/), particularly the +[Style Guide Highlights](https://developers.google.com/style/highlights). diff --git a/themes/docsy/userguide/content/en/docs/Best practices/site-guidance.md b/themes/docsy/userguide/content/en/docs/Best practices/site-guidance.md new file mode 100644 index 000000000..ff8a66364 --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Best practices/site-guidance.md @@ -0,0 +1,41 @@ +--- +title: "Hugo Content Tips" +linkTitle: "Hugo Content Tips" +weight: 9 +description: > + Tips for authoring content for your Docsy-themed Hugo site. +--- + +Docsy is a theme for the [Hugo](https://gohugo.io/) static site +generator. If you're not already familiar with Hugo and, in particular, its version of Markdown, this page provides some +useful tips and potential gotchas for adding and editing content for your site. Feel free to add your own! + +## Nested lists + +Hugo currently uses the [Blackfriday](https://github.com/russross/blackfriday) Markdown processor, which can be +sensitive when it come to content that's deeply nested in a list. In particular, be aware that +[this known issue](https://github.com/russross/blackfriday/issues/329) can surface if or when you have multiple authors and +other contributors who might mix 'tabs' and 'spaces' when indenting lists, or fail to indent properly. + +An additional factor here is that because GitHub uses a different Markdown processor, GitHub markdown and the editor UI may +render some nested lists properly, while Blackfriday might render that same content poorly. For example, the count in a +numbered list might restart, or your nested content within a list is not indented +(shows as a peer element instead of a nested child element). You may want to recommend in your contribution guidelines +([as we do](/docs/contribution-guidelines/#contributing-to-these-docs)) that contributors preview their content with Hugo +(or use Netlify's preview feature for PRs if that's your chosen deployment tool) to ensure their content renders correctly +with Blackfriday. + +{{% alert title="Tip" %}} +[Per comments on the known issue](https://github.com/russross/blackfriday/issues/329#issuecomment-277602856), some +users have found that using 4 spaces instead of a 'tab' results in consistent behavior. For example, consider +configuring your local editor to use 4 spaces when the **Tab** key is pressed. +{{% /alert %}} + +## Linking + +By default, regular relative URLs in links are left unchanged by Hugo (they're still relative links in your site's generated HTML), hence some hardcoded relative links like `[relative cross-link](../../peer-folder/sub-file.md)` might behave unexpectedly compared to how they work on your local file system. You may find it helpful to use some of Hugo's built-in [link shortcodes](https://gohugo.io/content-management/cross-references/#use-ref-and-relref) to avoid broken links in your generated site. For example a `{< ref "filename.md" >}` link in Hugo will actually +find and automatically link to your file named `filename.md`. + +Note, however, that `ref` and `relref` links don't work with `_index` or `index` files (for example, this site's [content landing page](`/docs/adding-content/`)): you'll need to use regular Markdown links to section landing or other index pages. Specify these links relative to the site's root URL, for example: `/docs/adding-content/`. + +[Learn more about linking](/docs/adding-content/content/#working-with-links). diff --git a/themes/docsy/userguide/content/en/docs/Contribution guidelines/_index.md b/themes/docsy/userguide/content/en/docs/Contribution guidelines/_index.md new file mode 100644 index 000000000..94038607a --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Contribution guidelines/_index.md @@ -0,0 +1,107 @@ +--- +title: "Contribution Guidelines" +linkTitle: "Contribution Guidelines" +weight: 9 +description: > + How to contribute to Docsy +--- + +Docsy is an open source project and we love getting patches and contributions to make Docsy and its docs even better. + +## Contributing to Docsy + +The Docsy theme itself lives in <https://github.com/google/docsy>. + +### Contributor License Agreement + +Contributions to this project must be accompanied by a Contributor License +Agreement. You (or your employer) retain the copyright to your contribution; +this simply gives us permission to use and redistribute your contributions as +part of the project. Head over to <https://cla.developers.google.com/> to see +your current agreements on file or to sign a new one. + +You generally only need to submit a CLA once, so if you've already submitted one +(even if it was for a different project), you probably don't need to do it +again. + +### Code reviews + +All submissions, including submissions by project members, require review. We +use GitHub pull requests for this purpose. Consult +[GitHub Help](https://help.github.com/articles/about-pull-requests/) for more +information on using pull requests. + +### Previewing your changes + +As Docsy is a theme rather than a site, you can't serve the theme directly to check your changes work. Instead use your updated local theme in a local copy of the Docsy example site (copy or make your changes in the `themes/docsy` directory) and [preview](/docs/deployment/) from there. Alternatively, clone the [Docsy theme repo](https://github.com/google/docsy) and test your changes in a local copy of this site, as described [below](#previewing-your-changes-locally). + +### Community guidelines + +This project follows +[Google's Open Source Community Guidelines](https://opensource.google.com/conduct/). + +### Creating issues + +Alternatively, if there's something you'd like to see in Docsy (or if you've found something that isn't working the way you'd expect), but you're not sure how to fix it yourself, please create an [issue](https://github.com/google/docsy/issues). + +## Contributing to these docs + +This user guide is, like our example site, a Docsy site that uses the Hugo static site generator. We welcome updates to the docs! + +We use [Netlify](https://www.netlify.com/) to manage the deployment of the site and provide previews of doc updates. The instructions here assume you're familiar with basic GitHub workflows. + +### Quick start with Netlify + +1. Fork the [Docsy repo](https://github.com/google/docsy) on GitHub: this site's files live in the `userguide` subdirectory. +1. Make your changes and send a pull request (PR). +1. If you're not yet ready for a review, add "WIP" to the PR name to indicate + it's a work in progress. (**Don't** add the Hugo property + "draft = true" to the page front matter, because that prevents the + auto-deployment of the content preview described in the next point.) +1. Wait for the automated PR workflow to do some checks. When it's ready, + you should see a comment like this: **deploy/netlify — Deploy preview ready!** +1. Click **Details** to the right of "Deploy preview ready" to see a preview + of your updates. +1. Continue updating your doc and pushing your changes until you're happy with + the content. +1. When you're ready for a review, add a comment to the PR, and remove any + "WIP" markers. + +### Updating a single page + +If you've just spotted something you'd like to change while using the docs, Docsy has a shortcut for you: + +1. Click **Edit this page** in the top right hand corner of the page. +1. If you don't already have an up to date fork of the project repo, you are prompted to get one - click **Fork this repository and propose changes** or **Update your Fork** to get an up to date version of the project to edit. The appropriate page in your fork is displayed in edit mode. +1. Follow the rest of the [Quick start with Netlify](#quick-start-with-netlify) process above to make and preview your changes. + + +### Previewing your changes locally + +If you want to run your own local Hugo server to preview your changes as you work: + +1. Follow the instructions in [Getting started](/docs/getting-started) to install Hugo and any other tools you need. +1. Fork the [Docsy](https://github.com/google/docsy) repo into your own project, then create a local copy using `git clone`. Don’t forget to use `--recurse-submodules` or you won’t pull down some of the code you need to generate a working site. + + ``` + git clone --recurse-submodules --depth 1 https://github.com/google/docsy.git + ``` + +1. Change to the `userguide` directory and run the following Hugo command to build the site and start the Hugo server. + Note that you need the `themesDir` flag because the site files are inside the theme repo. + + ``` + cd userguide + hugo server --themesDir ../.. + ``` + + By default your site will be available at http://localhost:1313/. Now that you're serving your site locally, Hugo will watch for changes to the content and automatically refresh your site. + +1. Continue with the usual GitHub workflow to edit files, commit them, push the + changes up to your fork, and create a pull request. + +### Creating an issue + +If there's something you'd like to see in the docs, but you're not sure how to fix it yourself, please create an issue in [this repository](wherever it goes). You can also create an issue about a specific page by clicking the **Create Issue** button in the top right hand corner of the page. + + diff --git a/themes/docsy/userguide/content/en/docs/Deployment/_index.md b/themes/docsy/userguide/content/en/docs/Deployment/_index.md new file mode 100644 index 000000000..671652321 --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Deployment/_index.md @@ -0,0 +1,49 @@ +--- +title: "Previews and Deployment" +linkTitle: "Previews and Deployment" +weight: 7 +description: > + Deploying your Docsy site. +--- + +There are multiple possible options for deploying a Hugo site, including Netlify, Firebase Hosting, Bitbucket with Aerobatic, and more; you can read about them all in [Hosting and Deployment](https://gohugo.io/hosting-and-deployment/). Hugo also makes it easy to deploy your site locally for quick previews of your content. + +## Serving your site locally + +Depending on your deployment choice you may want to serve your site locally during development to preview content changes. To serve your site locally: + +1. Ensure you have an up to date local copy of your site files cloned from your repo. Don't forget to use `--recurse-submodules` or you won't pull down some of the code you need to generate a working site. + + ``` + git clone --recurse-submodules --depth 1 https://github.com/my/example.git + ``` + + {{% alert title="Note" color="primary" %}} +If you've just added the theme as a submodule in a local version of your site and haven't committed it to a repo yet, you must get local copies of the theme's own submodules before serving your site. + + git submodule update --init --recursive + {{% /alert %}} + +1. Ensure you have the tools described in [Installation and Prerequisites](#installation-and-prerequisites) installed on your local machine, including `postcss-cli` (you'll need it to generate the site resources the first time you run the server). +1. Run the `hugo server` command in your site root. By default your site will be available at http://localhost:1313/. + +Now that you're serving your site locally, Hugo will watch for changes to the content and automatically refresh your site. If you have more than one local git branch, when you switch between git branches the local website reflects the files in the current branch. + +## Deployment with Netlify + +We recommend using [Netlify](https://www.netlify.com/) as a particularly simple way to serve your site from your Git provider (GitHub, GitLab, or BitBucket), with [continuous deployment](https://www.netlify.com/docs/continuous-deployment/), previews of the generated site when you or your users create pull requests against the doc repo, and more. Netlify is free to use for Open Source projects, with premium tiers if you require greater support. + +Follow the instructions in [Host on Netlify](https://gohugo.io/hosting-and-deployment/hosting-on-netlify/) to set up a Netlify account (if you don't have one already) and authorize access to your GitHub or other Git provider account. Once you're logged in: + +1. Click **New site from Git**. +1. Click your chosen Git provider, then choose your site repo from your list of repos. +1. In the **Deploy settings** page: + 1. For your **Build command**, specify `cd themes/docsy && git submodule update -f --init && cd ../.. && hugo`. You need to specify this rather than just `hugo` so that Netlify can use the theme's submodules. + 1. Click **Show advanced**. + 1. In the **Advanced build settings** section, click **New variable**. + 1. Specify `HUGO_VERSION` as the **Key** for the new variable, and `0.53` or later as its **Value**. +1. Click **Deploy site**. + +If you have an existing deployment you can view and update the relevant information by selecting the site from your list of sites in Netlify, then clicking **Site settings** - **Build and deploy**. Ensure that **Ubuntu Xenial 16.04** is selected in the **Build image selection** section - if you're creating a new deployment this is used by default. You need to use this image to run the extended version of Hugo. + + diff --git a/themes/docsy/userguide/content/en/docs/Examples/_index.md b/themes/docsy/userguide/content/en/docs/Examples/_index.md new file mode 100644 index 000000000..5d5684da1 --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Examples/_index.md @@ -0,0 +1,27 @@ +--- +title: "Examples" +weight: 8 +description: > + Some examples of Docsy in action! +--- + +One of the best ways to see what Docsy can do, and learn how to configure a site with it, is to see some real projects. In addition to our provided Docsy Example Project, there are several live sites already using the theme. Please add your own examples once you've got a production site up and running with Docsy! + +## Docsy theme examples + +Example sites that have low to no customization: + +| Site | Repo (if public) | +|---|---| +| [This Docsy documentation site](/docs) | https://github.com/google/docsy | +| ["Goldydocs" - a Docsy example site](https://example.docsy.dev) | https://github.com/google/docsy-example | +| https://www.kubeflow.org/ | https://github.com/kubeflow/website | +| https://agones.dev/site/ | https://github.com/GoogleCloudPlatform/agones/tree/master/site | + +## Customized Docsy examples + +Example sites that include a moderate to high amount of customization: + +| Site | Repo (if public) | +|---|---| +| [Knative](https://knative.dev) | https://github.com/knative/docs and https://github.com/knative/website | diff --git a/themes/docsy/userguide/content/en/docs/Getting started/_index.md b/themes/docsy/userguide/content/en/docs/Getting started/_index.md new file mode 100755 index 000000000..27de436f2 --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Getting started/_index.md @@ -0,0 +1,260 @@ + +--- +title: "Getting Started" +linkTitle: "Getting Started" +weight: 2 +date: 2018-07-30 +description: > + This page tells you how to get started with the Docsy theme, including installation and basic configuration. +--- + + +## Prerequisites and installation + +### Install Hugo + +You need a [recent **extended** version](https://github.com/gohugoio/hugo/releases) (we recommend version 0.53 or later) of [Hugo](https://gohugo.io/) to do local builds and previews of sites (like this one) that use Docsy. If you install from the release page, make sure to get the `extended` Hugo version, which supports [SCSS](https://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html); you may need to scroll down the list of releases to see it. + +For comprehensive Hugo documentation, see [gohugo.io](https://gohugo.io/). + +#### Linux + +Do **not** use `sudo apt-get install hugo`, as it currently doesn't get you the `extended` version. + +If you've already installed Hugo, check your version: + +``` +hugo version +``` +If the result is `v0.52` or earlier, or if you don't see `Extended`, you'll need to install the latest version. + +1. Go to the [Hugo releases](https://github.com/gohugoio/hugo/releases) page. +2. In the most recent release, scroll down until you find a list of + **Extended** versions. +3. Download the latest extended version (`hugo_extended_0.5X_Linux-64bit.tar.gz`). +4. Create a new directory: + + mkdir hugo + +5. Extract the files you downloaded to `hugo`. + +6. Switch to your new directory: + + cd hugo + +7. Install Hugo: + + sudo install hugo /usr/bin + +#### macOS + +Install Hugo using [Brew](https://gohugo.io/getting-started/installing/#homebrew-macos). + +### Install PostCSS + +To build or update your site's CSS resources, you also need [`PostCSS`](https://postcss.org/) to create the final assets. If you need to install it, you must have a recent version of [NodeJS](https://nodejs.org/en/) installed on your machine so you can use `npm`, the Node package manager. By default `npm` installs tools under the directory where you run `npm install`: + +``` +sudo npm install -D --save autoprefixer +sudo npm install -D --save postcss-cli +``` + +Note that versions of `PostCSS` later than 5.0.1 will not load `autoprefixer` if installed [globally](https://flaviocopes.com/npm-packages-local-global/), you must use a local install. + +## Using the theme + +To use the Docsy Hugo theme, you have a couple of options: + +* **Copy and edit the source for the [Docsy example site](https://github.com/google/docsy-example).** This approach gives you a skeleton structure for your site, with top-level and documentation sections and templates that you can modify as necessary. The example site uses Docsy as a [Git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules), so it's easy to [keep up to date](#keeping-the-theme-up-to-date). +* **Build your own site using the Docsy theme.** Specify the [Docsy theme](https://github.com/google/docsy) like any other [Hugo theme](https://gohugo.io/themes/) when creating or updating your site. With this option, you'll get Docsy look and feel, navigation, and other features, but you'll need to specify your own site structure. + +### Option 1: Clone the Docsy example site + +The [Example Site](https://example.docsy.dev) gives you a good starting point for building your docs site and is +pre-configured to use the Docsy theme as a Git submodule. You can clone the Example Site either by: + +* [Using the GitHub UI](#using-the-github-ui) +* [Using the command line](#using-the-command-line) + +#### Using the GitHub UI + +<!--This is the simplest approach, as the Docsy example site repo is a [template repository](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/). To create your own copy of the Docsy example site repo: + +1. Go to the [repo page](https://github.com/google/docsy-example) and click **Use this template**. + +1. Type your chosen name for your new repository in the **Repository name** field. You can also add an optional **Description**. + +1. Click **Create repository from template** to create your new repository. Congratulations, you now have a Docsy site repo! + +1. To test your copied site locally with Hugo, or make local edits, you'll also need to make a local copy of your new repository. To do this, use `git clone`, replacing `https://github.com/my/example.git` with your repo's web URL (don't forget to use `--recurse-submodules` or you won't pull down some of the code you need to generate a working site): + + <pre> + git clone --recurse-submodules --depth 1 <em>https://github.com/my/example.git</em> + </pre> + +You can now edit your local versions of the site's source files. To preview your site, go to your site root directory and run `hugo server`. By default, your site will be available at http://localhost:1313/. To push changes to your new repo, go to your site root directory and use `git push`.--> + +Note that the following approach [forks](https://help.github.com/en/articles/fork-a-repo) our repo and so creates a connection in GitHub between your project repo and the Docsy example site project repo - our project will be the "upstream" version of your site project: + +1. In the [the Docsy example site's GitHub repo](https://github.com/google/docsy-example), click **Fork** and follow the prompts. +1. Rename your new fork: + 1. Click **Settings**, and type a new name in the **Repository name** field. + 1. Click **Rename** to save your changes. +1. Get the web URL for cloning your site repo by clicking **Clone or download** on its main repo page. +1. Make your own local working copy of your repo using `git clone`, replacing `https://github.com/my/example.git` with your repo's web URL: + + <pre> + git clone --recurse-submodules --depth 1 <em>https://github.com/my/example.git</em> + </pre> + +You can now edit your local versions of the site's source files. To preview your site, go to your site root directory and run `hugo server`. By default, your site will be available at http://localhost:1313/. To push changes to your new repo, go to your site root directory and use `git push`. + + +#### Using the command line + +To copy the example site: + +1. Make a local working copy of the example site directly using `git clone`: + + git clone https://github.com/google/docsy-example.git + +1. Switch to the root of the cloned project, for example: + + cd docsy-example + +1. Get local copies of the project submodules so you can build and run your site locally: + + git submodule update --init --recursive + +1. Build your site: + + hugo server + +1. Preview your site in your browser at: http://localhost:1313/. You can use `Ctrl + c` to stop the Hugo server whenever you like. + +1. Now that you have a site running, you can push it to a new repository: + + 1. [Create a new repository in GitHub](https://help.github.com/en/articles/create-a-repo) + for your site with your chosen repo name. For clarity you may also want to rename the root + directory (`docsy-example`) of your working copy to match, though everything will still + work even if you don't. + + 1. Configure + [`origin`](https://help.github.com/en/articles/configuring-a-remote-for-a-fork) + in your project. From your site's root directory, set the URL for `origin` to your new + repo (otherwise you'll be trying to push changes to `google/docsy` rather than to your repo): + + git remote set-url origin https://github.com/MY-SITE/EXAMPLE.git + + + 1. Verify that your remote is configured correctly by running: + + git remote -v + + + 1. Push your Docsy site to your repository: + + git push -u origin master + +### Option 2: Use the Docsy theme in your own site + +Specify the [Docsy theme](https://github.com/google/docsy) like any other Hugo theme when creating or updating your site. This gives you all the theme-y goodness but you'll need to specify your own site structure. You can either use the theme as a submodule (our recommended approach for easy updates), or just clone the theme into your project's `themes` subdirectory. + +Whichever approach you use, for simplicity we recommend copying and editing our [example site configuration](#configuring-your-site) for your project, or you may get Hugo errors for missing parameters and values when you try to build your site. + +#### Using the Docsy theme as a submodule + +Adding Docsy as a Git submodule is our recommended approach for using the theme, as it means your project +always refers to the Docsy repo version at your chosen revision, rather than you having your own copy in +your repo that may result in merge conflicts when you try to update it. This is the approach used by our +[example project](https://github.com/google/docsy-example). + + +To create a new Hugo site project and then add the Docs theme as a submodule, run the following commands from your project's root directory. + +```shell +hugo new site myproject +cd myproject +git init +git submodule add https://github.com/google/docsy.git themes/docsy +echo 'theme = "docsy"' >> config.toml +git submodule update --init --recursive +``` + +To add the Docsy theme to an existing site, run the following commands from your project's root directory: + +``` +git submodule add https://github.com/google/docsy.git themes/docsy +echo 'theme = "docsy"' >> config.toml +git submodule update --init --recursive +``` + +#### Cloning the Docsy theme to your project's `themes` subdirectory + +If you don't want to use a submodules (for example, if you want to customize and maintain your own copy of the theme directly, or your deployment choice requires you to include a copy of the theme in your repository), you can clone the theme into your project. + + + + +To clone Docsy into your project's `theme` folder, run the following commands from your project's root directory: + +``` +cd themes +git clone https://github.com/google/docsy +``` + +For more information, see [Install and Use Themes](https://gohugo.io/themes/installing-and-using-themes/#install-a-single-theme) on the [Hugo](https://gohugo.io) site. + +#### Preview your site + +To build and preview your site locally: + +``` +cd myproject +hugo server +``` + +By default, your site will be available at http://localhost:1313/. + +## Basic site configuration + +Site-wide configuration details and parameters are defined in your project's `config.toml` file. These include your chosen Hugo theme (Docsy, of course!), project name, community links, Google Analytics configuration, and Markdown parser parameters. See the examples with comments in [`config.toml` in the example project](https://github.com/google/docsy-example/blob/master/config.toml) for how to add this information. **We recommend copying this `config.toml` and editing it even if you're just using the theme and not copying the entire Docsy example site**. + +The Docsy example site comes with some defaults you may want to remove or customize straight away: + +### Internationalization + +The Docsy example site supports content in English and Norwegian. You can find out more about how Docsy supports multi-language content in [Multi-language support](/docs/language/_index.md). + +If you don't intend to translate your site to Norwegian, you can remove the language switcher by removing the following lines from `config.toml`: + +``` +[languages.no] +title = "Docsy" +description = "Docsy er operativsystem for skyen" +languageName ="Norsk" +contentDir = "content/no" +``` + +To remove the translated source files, delete the `docsy-example/content/no` directory. + +### Search + +By default, the Docsy example site uses its own [Google Custom Search Engine](https://cse.google.com/cse/all). To disable site search, delete or comment out the following lines: + +``` +# Google Custom Search Engine ID. Remove or comment out to disable search. +gcs_engine_id = "011737558837375720776:fsdu1nryfng" +``` + +To use your own Custom Search Engine, replace the value in the `gcs_engine_id` with the ID of your own search engine. + + +## What's next? + +* [Add content and customize your site](/docs/adding-content/) +* Get some ideas from our [Example Site](https://github.com/google/docsy-example) and other [Examples](/docs/examples/). +* [Publish your site](/docs/deployment/). + + + diff --git a/themes/docsy/userguide/content/en/docs/Language/_index.md b/themes/docsy/userguide/content/en/docs/Language/_index.md new file mode 100644 index 000000000..6c522471a --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Language/_index.md @@ -0,0 +1,60 @@ +--- +title: "Multi-language Support" +linkTitle: "Multi-language Support" +weight: 7 +description: > + Support multiple languages in your site. +--- + +If you'd like to provide site content in multiple languages, the Docsy theme and Hugo make it easy to both add your translated content and for your users to navigate between language versions. + +## Content and configuration + +To add content in multiple languages, you first need to define the available languages in a `languages` section in your site configuration. Each language can have its own language-specific configuration. For example, the Docsy Example Site config specifies that it provides content in English and Norwegian, and that the language version visitors will see by default is English: + +```toml +contentDir = "content/en" +defaultContentLanguage = "en" +defaultContentLanguageInSubdir = false +... +[languages] +[languages.en] +title = "Docsy" +description = "Docsy does docs" +languageName ="English" +# Weight used for sorting. +weight = 1 +[languages.no] +title = "Docsy" +description = "Docsy er operativsystem for skyen" +languageName ="Norsk" +contentDir = "content/no" +time_format_default = "02.01.2006" +time_format_blog = "02.01.2006" +``` + +Any setting not defined in a `[languages]` block will fall back to the global value for that setting: so, for example, the content directory used for the site above will be `content/en` unless the user selects the Norwegian language option. + +Once you've updated your site config, you create a content root directory for each language version in your source repo, such as `content/en` for English text, and add your [content](/docs/adding-content/content/) as usual. See the [Hugo Docs](https://gohugo.io/content-management/multilingual) on multi-language support for more information. + +{{% alert title="Tip" %}} +If there's any possibility your site might be translated into other languages, consider creating your site with your content in a language-specific subdirectory, as it means you don't need to move it if you add another language. +{{% /alert %}} + +For adding multiple language versions of other site elements such as button text, see the [internationalization bundles](#internationalization-bundles) section below. + +## Selecting a language + +If you configure more than one language in `config.toml`, the Docsy theme adds a language selector drop down to the top-level menu. Selecting a language takes the user to the translated version of the current page, or the home page for the given language. + +## Internationalization bundles + +All UI strings (text for buttons etc.) are bundled inside `/i18n` in the theme, with a `.toml` file for each language. + +If your chosen language isn't currently in the theme and you create your own `.toml` file for all the common UI strings (for example, if you translate the UI text into Japanese and create a copy of `en.toml` called `jp.toml`), we recommend you do this **in the theme** rather than in your own project, so it can be reused by others. Any additional strings or overridden values can be added to your project's `/i18n` folder. + +{{% alert title="Hugo Tip" %}} +Run `hugo server --i18n-warnings` when doing translation work, as it will give you warnings on what strings are missing. +{{% /alert %}} + + diff --git a/themes/docsy/userguide/content/en/docs/Updating/_index.md b/themes/docsy/userguide/content/en/docs/Updating/_index.md new file mode 100644 index 000000000..f7f33d708 --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/Updating/_index.md @@ -0,0 +1,60 @@ +--- +title: "Updating Docsy" +linkTitle: "Updating Docsy" +weight: 8 +description: > + Keeping the theme up to date. +--- + +We hope to continue to make improvements to the theme [along with the Docsy community](/docs/contribution-guidelines/). +If you have cloned the example site (or are otherwise using the theme as a submodule), you can update the Docsy theme +yourself. + +Updating Docsy means that your site will build using the latest version of Docsy at `HEAD` and include +all the new commits or changes that have been merged since the point in time that you initially added the Docsy +submodule, or last updated. Updating won't affect any modifications that you made in your own project to +[override the Docsy look and feel](/docs/adding-content/lookandfeel/), as your overrides +don't modify the theme itself. For details about what has changed in the theme, see the list of +[Docsy commits](https://github.com/google/docsy/commits/master). + +Depending on how you chose to use Docsy, follow the corresponding steps to update the theme: + +## Update a Docsy submodule + +If you are using the Docsy theme as a submodule in your project (for example, if you've copied our example site), you update the submodule: + +1. Navigate to the root of your local project, then run: + + git submodule update --remote + + +1. Add and then commit the change to your project: + + git add themes/ + git commit -m "Updating theme submodule" + + +1. Push the commit to your project repo. For example, run: + + git push origin master + + +## Update your Docsy clone + +If you [cloned the Docsy theme](/docs/getting-started/#cloning-the-docsy-theme-to-your-projects-themes-subdirectory) into +the `themes` folder in your project, then you use the `git pull` command: + +1. Navigate to the `themes` directory in your local project: + + cd themes + +1. Ensure that `origin` is set to `https://github.com/google/docsy.git`: + + git remote -v + +1. Update your local clone: + + git pull origin master + +If you have made any local changes to the cloned theme, you must manually resolve any merge conflicts. + diff --git a/themes/docsy/userguide/content/en/docs/_index.md b/themes/docsy/userguide/content/en/docs/_index.md new file mode 100755 index 000000000..ff67eb7dc --- /dev/null +++ b/themes/docsy/userguide/content/en/docs/_index.md @@ -0,0 +1,45 @@ + +--- +title: "Welcome to Docsy" +linkTitle: "Documentation" +menu: + main: + weight: 20 +--- + +Welcome to the Docsy theme user guide! This guide shows you how to get started creating technical documentation sites using Docsy, including site customization and how to use Docsy's blocks and templates. + +## What is Docsy? + +Docsy is a theme for the [Hugo](https://gohugo.io/) static site generator that's specifically designed for technical +documentation sets and has a lot of best practices built in. Use Docsy to get a working and reliable documentation +site up and running fast, and then get back to focusing on great content for your users. +[Learn more about Docsy](/about). + +In addition to the theme itself, we provide an [example site](https://github.com/google/docsy-example) that uses lots of Docsy features and has a useful skeleton site structure (with advice for what to put in it!) for a large technical documentation set. You can copy the entire site and edit it for your own projects, or just explore the site and its source to see what Docsy can do. The site you're currently reading also uses Docsy and is a useful example of a smaller Docsy docset: feel free to copy it or borrow from it if it suits your needs better than the "big" example. + +Docsy itself does **not** provide: + +* **Source hosting and management**: Our theme and site source files live on [GitHub](https://github.com/), which is the simplest approach for most projects. However, you can also keep your project files in [GitLab](https://about.gitlab.com/), [BitBucket](https://bitbucket.org/product), locally, or wherever you like. Be aware that where your source files live may affect the Docsy features you can use (such as letting users file documentation issues) and site deployment options. +* **Site deployment**: You can find out about deployment options in [Previews and Deployment](./deployment/). This site uses [Netlify](https://www.netlify.com/). + +Docsy also doesn't actually generate your site's HTML files: that's Hugo's job! Hugo takes your Markdown or HTML doc source files and Docsy's theme files and builds them into a static site for deployment. You can find out more about Hugo and how it works in the [Hugo documentation](https://gohugo.io/documentation/). + +## Is Docsy for me? + +Docsy is particularly useful for medium to large technical documentation sets with 20+ pages of docs and/or multiple types of docs and pages: tutorials, reference documentation, blog posts, community pages, and so on. + +If you have a smaller project with only a couple of pages of documentation and hence simpler navigation needs, Docsy may be too heavyweight a solution for you. Instead, consider: + +* A simpler Hugo or Jekyll theme: find out what's available in Github Pages' [built-in Jekyll options](https://pages.github.com/themes/) and the [Hugo theme gallery](https://themes.gohugo.io/). +* A good README file that tells users what your project does and links to some examples. + +If you have a very large documentation project, our example site structure may not be sufficient either, though you can still use our theme, possibly with heavier customization. + +If you'd like to use Docsy's layouts but prefer to use Jekyll, [vsoch](https://github.com/vsoch) has created a [Docsy Jekyll port](https://github.com/vsoch/docsy-jekyll) that includes many of Docsy's features (though as this is a separate project it won't be automatically updated along with Docsy). + +## Ready to get started? + +Find out how to build and serve your first site in [Getting Started](./getting-started/). Or visit the [example site](https://example.docsy.dev) and [its repo](https://github.com/google/docsy-example) and start exploring! + + diff --git a/themes/docsy/userguide/content/en/featured-background.jpg b/themes/docsy/userguide/content/en/featured-background.jpg Binary files differnew file mode 100644 index 000000000..c9d8846dd --- /dev/null +++ b/themes/docsy/userguide/content/en/featured-background.jpg diff --git a/themes/docsy/userguide/content/en/search.md b/themes/docsy/userguide/content/en/search.md new file mode 100644 index 000000000..4cde3a93d --- /dev/null +++ b/themes/docsy/userguide/content/en/search.md @@ -0,0 +1,5 @@ +--- +title: Search Results +layout: search +--- + |
