diff --git a/exampleSite/content/_index.en.md b/exampleSite/content/_index.en.md new file mode 100644 index 0000000000..375520a270 --- /dev/null +++ b/exampleSite/content/_index.en.md @@ -0,0 +1,42 @@ +--- +title: "Learn Theme for Hugo" +--- + +# Hugo learn theme + +[Hugo-theme-learn](http://github.com/matcornic/hugo-theme-learn) is a theme for [Hugo](https://gohugo.io/), a fast and modern static website engine written in Go. Where Hugo is often used for blogs, this theme is **fully designed for documentation**. + +This theme is a partial porting of the [Learn theme](http://learn.getgrav.org/) of [Grav](https://getgrav.org/), a modern flat-file CMS written in PHP. + +{{% notice tip %}}Learn theme works with a _page tree structure_ to organize content : All contents are pages, which belong to other pages. [read more about this]({{%relref "content-organisation/_index.md"%}}) +{{% /notice %}} + +![Screenshot](https://github.com/matcornic/hugo-theme-learn/raw/master/images/screenshot.png?width=50pc&classes=shadow) + +## Main features + +* [Automatic Search]({{%relref "search/_index.md" %}}) +* [Multi languages]() +* **Unlimited menu levels** +* Automatic next/prev buttons to navigate through menu entries +* [Image resizing, shadow...]({{%relref "shortcodes/image.md" %}}) +* [Attachments files]({{%relref "shortcodes/attachments.md" %}}) +* [List child pages]({{%relref "shortcodes/children/_index.md" %}}) +* [Mermaid diagram]({{%relref "shortcodes/mermaid.md" %}}) (flowchart, sequence, gantt) +* [Buttons]({{%relref "shortcodes/button.md" %}}), [Tip/Note/Info/Warning boxes]({{%relref "shortcodes/notice.md" %}}), [Expand]({{%relref "shortcodes/expand.md" %}}) +* [customizable look and feel]({{%relref "content-organisation/customize-style/_index.md"%}}), [theme variants]({{%relref "content-organisation/customize-style/theme-variants.md"%}}) + + +## Contribute to this documentation +Feel free to update this content, just click the **Edit this page** link displayed on top right of each page, and pullrequest it + +{{% notice info %}} +Your modification will be deployed automatically when merged. +{{% /notice %}} + +## Documentation website +This current documentation has been statically generated with Hugo with a simple command : `hugo -t hugo-theme-learn` -- source code is [available here at GitHub](https://github.com/matcornic/hugo-theme-learn) + +{{% notice note %}} +Automatically published and hosted thanks to [Netlify](https://www.netlify.com/). Read more about [Automated HUGO deployments with Netlify](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/) +{{% /notice %}} \ No newline at end of file diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.fr.md similarity index 66% rename from exampleSite/content/_index.md rename to exampleSite/content/_index.fr.md index 47ec7cfa6e..8dd29ba511 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.fr.md @@ -2,4 +2,4 @@ title: "Learn Theme for Hugo" --- -# Hugo learn theme +# Thème Hugo learn diff --git a/exampleSite/content/basics/_index.md b/exampleSite/content/basics/_index.en.md similarity index 100% rename from exampleSite/content/basics/_index.md rename to exampleSite/content/basics/_index.en.md diff --git a/exampleSite/content/basics/_index.fr.md b/exampleSite/content/basics/_index.fr.md new file mode 100644 index 0000000000..386bf19ac8 --- /dev/null +++ b/exampleSite/content/basics/_index.fr.md @@ -0,0 +1,12 @@ +--- +title: Démarrage +weight: 5 +pre: "1. " +chapter: true +--- + +### Chapitre 1 + +# Démarrage + +Découvrez comment utiliser ce thème Hugo et apprenez en les concepts diff --git a/exampleSite/content/basics/configuration.md b/exampleSite/content/basics/configuration.md deleted file mode 100644 index 91537c805f..0000000000 --- a/exampleSite/content/basics/configuration.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -date: 2016-04-09T16:50:16+02:00 -title: Configuration -weight: 20 ---- - -## Site configuration - -On top of [Hugo global configuration](https://gohugo.io/overview/configuration/), **Hugo-theme-learn** lets you define the following parameters : - -```toml -[params] - # Prefix URL to edit current page. Useful to give opportunity to people to create merge request for your doc. - # See the config.toml file from this documentation site to have an example. - editURL = "" - # Author of the site, will be used in meta information - author = "" - # Description of the site, will be used in meta information - description = "" - # Shows a checkmark for visited pages on the menu. Default to false - showVisitedLinks = false - # Automatically generates prev and next arrows - autoNav = false - # Activate search. Don't forget to generate the JSON index file (go check get started page) - search = false -``` - -{{% notice tip %}} -Assets are based on the `baseurl` of the site. So, don't forget to configure yours in the `config.toml` file. Absolutely needed for Github pages like http://userid.github.io/project. -{{% /notice %}} - -## Style customization - -**Hugo-theme-learn** has been built to be as configurable as possible by defining multiple [partials](https://gohugo.io/templates/partials/) - -In `themes/hugo-theme-learn/layouts/partials/`, you will find all the partials defined for this theme. If you need to overwrite something, don't change the code directly. Instead [follow this page](https://gohugo.io/themes/customizing/). You'd create a new partial in the `layouts/partials` folder of your local project. This partial will have the priority. - -This theme defines the following partials : - -- *header*: the header of the content page (contains the breadcrumbs) -- *style*: CSS imports, in case you want to override the style -- *footer*: the footer of the content page (contains the arrows) -- *script*: Javacript includes, in case you want to add Javascript on top of provided ones -- *favicon*: the favicon -- *logo*: the logo, on top left hand corner. -- *meta*: HTML meta tags, if you want to change default behavior -- *toc*: table of contents - -### Change the logo - -Create a new file in `layouts/partials/` named `logo.html`. Then write any HTML you want. -You could use an `img` HTML tag and reference an image created under the *static* folder, or you could paste a SVG definition ! - -{{% notice note %}} -The size of the logo will adapt automatically -{{% /notice %}} - -### Change the favicon - -If your favicon is a png, just drop off your image in your local `static/images/` folder and names it `favicon.png` - -If you need to change this default behavior, create a new file in `layouts/partials/` named `favicon.html`. Then write something like this: - -```html - -``` - -### Change default colors - -To change default colors, you will have to add a new css file. In order to do that : - -1. Create a css file in your local `static/css/` folder -2. Create a partial HTML in your local `layouts/partials/` named `style.html` and add the following line - -```html - -``` - -Then, create CSS in the new file, overwriting default behavior. Don't panic, we give you, just below, colors that are commonly changed. - -```css -/* background behind the logo*/ -#header { - background: ; - border-color: ; -} - -/* Background color of the menu */ -#sidebar { - background-color: ; -} - -/* Background color of the menu, when clicked */ -#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { - background-color: ; -} - -/* Color of all links, including arrows to get to previous and next pages */ -a { - color: ; -} -a:hover { - color: ; -} -``` diff --git a/exampleSite/content/basics/configuration/_index.en.md b/exampleSite/content/basics/configuration/_index.en.md new file mode 100644 index 0000000000..79d00114b0 --- /dev/null +++ b/exampleSite/content/basics/configuration/_index.en.md @@ -0,0 +1,244 @@ +--- +date: 2016-04-09T16:50:16+02:00 +title: Configuration +weight: 20 +--- + +## Global site parameters + +On top of [Hugo global configuration](https://gohugo.io/overview/configuration/), **Hugo-theme-learn** lets you define the following parameters in your `config.toml` (here, values are default). + +Note that some of these parameters are explained in details in other sections of this documentation. + +```toml +[params] + # Prefix URL to edit current page. Will display an "Edit this page" button on top right hand corner of every page. + # Useful to give opportunity to people to create merge request for your doc. + # See the config.toml file from this documentation site to have an example. + editURL = "" + # Author of the site, will be used in meta information + author = "" + # Description of the site, will be used in meta information + description = "" + # Shows a checkmark for visited pages on the menu + showVisitedLinks = false + # Disable search function. It will hide search bar + disableSearch = false + # Javadcript and CSS cache are automatically busted when new version of site is generated. + # Set this to true to disable this behavior (some proxies don't handle well this optimization) + disableAssetsBusting = false + # Set this to true to disable copy-to-clipboard button for inline code. + disableInlineCopyToClipBoard = false + # A title for shortcuts in menu is set by default. Set this to true to disable it. + disableShortcutsTitle = false + # Order sections in menu by "weight" or "title". Default to "weight" + ordersectionsby = "weight" + # Change default color scheme with a variant one. Can be "red", "blue", "green". + themeVariant = "" +``` + +## Activate search + +If not already present, add the follow lines in the same `config.toml` file. + +```toml +[outputs] +home = [ "HTML", "RSS", "JSON"] +``` + +Learn theme uses the last improvement available in hugo version 20+ to generate a json index file ready to be consumed by lunr.js javascript search engine. + +> Hugo generate lunrjs index.json at the root of public folder. +> When you build the site with hugo server, hugo generates it internally and of course it don’t show up in the filesystem + + +## Style customization + +**Hugo-theme-learn** has been built to be as configurable as possible by defining multiple [partials](https://gohugo.io/templates/partials/) + +In `themes/hugo-theme-learn/layouts/partials/`, you will find all the partials defined for this theme. If you need to overwrite something, don't change the code directly. Instead [follow this page](https://gohugo.io/themes/customizing/). You'd create a new partial in the `layouts/partials` folder of your local project. This partial will have the priority. + +This theme defines the following partials : + +- *header*: the header of the content page (contains the breadcrumbs). _Not meant to be overridden_ +- *custom-header*: custom headers in page. Meant to be overridden when adding CSS imports. Don't forget to include `style` HTML tag directive in your file +- *footer*: the footer of the content page (contains the arrows). _Not meant to be overridden_ +- *custom-footer*: custom footer in page. Meant to be overridden when adding Javacript. Don't forget to include `javascript` HTML tag directive in your file +- *favicon*: the favicon +- *logo*: the logo, on top left hand corner. +- *meta*: HTML meta tags, if you want to change default behavior +- *menu*: left menu +- *menu-footer*: footer of the the left menu +- *search*: search box +- *toc*: table of contents + +### Change the logo + +Create a new file in `layouts/partials/` named `logo.html`. Then write any HTML you want. +You could use an `img` HTML tag and reference an image created under the *static* folder, or you could paste a SVG definition ! + +{{% notice note %}} +The size of the logo will adapt automatically +{{% /notice %}} + +### Change the favicon + +If your favicon is a png, just drop off your image in your local `static/images/` folder and names it `favicon.png` + +If you need to change this default behavior, create a new file in `layouts/partials/` named `favicon.html`. Then write something like this: + +```html + +``` + +### Change default colors + +**Hugo Learn theme** let you choose between 3 native color scheme variants, but feel free to add one yourself ! Default color scheme is based on [Grav Learn Theme](https://learn.getgrav.org/). + +#### Red variant + +```toml +[params] + # Change default color scheme with a variant one. Can be "red", "blue", "green". + themeVariant = "red" +``` + +![Red variant](/basics/configuration/images/red-variant.png?width=60%) + +#### Blue variant + +```toml +[params] + # Change default color scheme with a variant one. Can be "red", "blue", "green". + themeVariant = "blue" +``` + +![Blue variant](/basics/configuration/images/blue-variant.png?width=60%) + +#### Green variant + +```toml +[params] + # Change default color scheme with a variant one. Can be "red", "blue", "green". + themeVariant = "green" +``` + +![Green variant](/basics/configuration/images/green-variant.png?width=60%) + +#### 'Yours‘ variant + +First, create a new CSS file in your local `static/css` folder prefixed by `theme` (e.g. with _mine_ theme `static/css/theme-mine.css`). Copy the following content and modify colors in CSS variables. + +```css + +:root{ + + --MAIN-TEXT-color:#323232; /* Color of text by default */ + --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */ + --MAIN-LINK-color:#1C90F3; /* Color of links */ + --MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */ + --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */ + + --MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */ + --MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */ + + --MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */ + --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */ + + --MENU-SECTIONS-ACTIVE-BG-color:#20272b; /* Background color of the active section and its childs */ + --MENU-SECTIONS-BG-color:#252c31; /* Background color of other sections */ + --MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */ + + --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */ + --MENU-SECTION-HR-color: #20272b; /* Color of
separator in menu */ + +} + +body { + color: var(--MAIN-TEXT-color) !important; +} + +textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { + border-color: none; + box-shadow: none; +} + +h2, h3, h4, h5 { + color: var(--MAIN-TITLES-TEXT-color) !important; +} + +a { + color: var(--MAIN-LINK-color); +} + +.anchor { + color: var(--MAIN-ANCHOR-color); +} + +a:hover { + color: var(--MAIN-LINK-HOVER-color); +} + +#sidebar ul li.visited > a .read-icon { + color: var(--MENU-VISITED-color); +} + +#body a.highlight:after { + display: block; + content: ""; + height: 1px; + width: 0%; + -webkit-transition: width 0.5s ease; + -moz-transition: width 0.5s ease; + -ms-transition: width 0.5s ease; + transition: width 0.5s ease; + background-color: var(--MAIN-HOVER-color); +} +#sidebar { + background-color: var(--MENU-SECTIONS-BG-color); +} +#sidebar #header-wrapper { + background: var(--MENU-HEADER-BG-color); + color: var(--MENU-SEARCH-BOX-color); + border-color: var(--MENU-HEADER-BORDER-color); +} +#sidebar .searchbox { + border-color: var(--MENU-SEARCH-BOX-color); + background: var(--MENU-SEARCH-BG-color); +} +#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { + background: var(--MENU-SECTIONS-ACTIVE-BG-color); +} +#sidebar .searchbox * { + color: var(--MENU-SEARCH-BOX-ICONS-color); +} + +#sidebar a { + color: var(--MENU-SECTIONS-LINK-color); +} + +#sidebar a:hover { + color: var(--MENU-SECTIONS-LINK-HOVER-color); +} + +#sidebar ul li.active > a { + background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); + color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important; +} + +#sidebar hr { + border-color: var(--MENU-SECTION-HR-color); +} +``` + +Then, set the `themeVariant` value with the name of your custom theme file. That's it ! + +```toml +[params] + # Change default color scheme with a variant one. Can be "red", "blue", "green". + themeVariant = "mine" +``` \ No newline at end of file diff --git a/exampleSite/content/basics/configuration/images/blue-variant.png b/exampleSite/content/basics/configuration/images/blue-variant.png new file mode 100644 index 0000000000..1797d47c6b Binary files /dev/null and b/exampleSite/content/basics/configuration/images/blue-variant.png differ diff --git a/exampleSite/content/basics/configuration/images/green-variant.png b/exampleSite/content/basics/configuration/images/green-variant.png new file mode 100644 index 0000000000..68d6158e88 Binary files /dev/null and b/exampleSite/content/basics/configuration/images/green-variant.png differ diff --git a/exampleSite/content/basics/configuration/images/red-variant.png b/exampleSite/content/basics/configuration/images/red-variant.png new file mode 100644 index 0000000000..3964f698a5 Binary files /dev/null and b/exampleSite/content/basics/configuration/images/red-variant.png differ diff --git a/exampleSite/content/basics/installation.md b/exampleSite/content/basics/installation.md deleted file mode 100644 index a2bed31d3b..0000000000 --- a/exampleSite/content/basics/installation.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Getting started -weight: 15 ---- - -{{% expand "Oulala" %}} - -The following steps are here to help you initialize your new website. If you don't know Hugo at all, we strongly suggest you to train by following this [great documentation for beginners](https://gohugo.io/overview/quickstart/). -{{% /expand %}} - -## Flowchart example -{{%expand "Show code ..."%}} - {{}} - graph LR; - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] - {{}} -{{%/expand%}} - -{{}} -graph LR; - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] -{{< /mermaid >}} - -{{< mermaid >}} -sequenceDiagram - participant Alice - participant Bob - Alice->>John: Hello John, how are you? - loop Healthcheck - John->John: Fight against hypochondria - end - Note right of John: Rational thoughts
prevail... - John-->Alice: Great! - John->Bob: How about you? - Bob-->John: Jolly good! -{{< /mermaid >}} - -## Create your project - -Hugo provides a `new` command to create a new website. - -``` -hugo new site -``` - -## Install the theme - -Install the **Hugo-theme-learn** theme by following [this documentation](https://gohugo.io/themes/installing/) - -The theme's repository is: https://github.com/matcornic/hugo-theme-learn.git - -## Basic configuration - -When building the website, you can set a theme by using `--theme` option. We suggest you to edit your configuration file and set the theme by default. Example with `config.toml` format. - -```toml -theme = "hugo-theme-learn" -``` - -## Create your first chapter page - -**Hugo-theme-learn** provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command - -``` -# _index.md files are considered as chapters -hugo new --kind chapter basics/_index.md -``` - -## Create your first content pages - -Then, create content pages inside the previous chapter. Here are two ways to create content in the chapter : - -``` -hugo new basics/first-content.md -hugo new basics/second-content/index.md -``` - -## Enable search functionality - -As the index generation is not yet supported by Hugo ([PR #1853](https://github.com/spf13/hugo/pull/1853)), -we decided to use `lunr` index. -As soon as the generation of the index will be supported by hugo, we will use the official format. - -So to use the `search` functionality, you just have to put a `lunr` index which respects this format : -```json -[ - { - "uri": "/docs/01-start/index", - "title": "Get started", - "content": "\n\nGet started\n\nAll you need to know...\n", - "tags": ["start", "intro"] - }, - ... -] -``` - -into a `static/json/search.json` file in your hugo project. - -And set `search = true` in your config.toml - -To generate your lunr index, you can see this project https://github.com/gwleclerc/lunr-hugo which parse your markdown files and extract toml and yaml headers to create index with corresponding format. - -In order to generate the index of your static site launch the following comand after installing `lunr-hugo` using `npm` -``` - lunr-hugo -i "/**/*.md" -o static/json/search.json -l
-``` - -## Launching the website - -Launch the following command - -``` -hugo serve -``` - -Go to `http://localhost:1313/basics` - -If you are curious, at the home page (http://localhost:1313/), you should see an empty homepage. It's because this theme does not really provide a default homepage. - -You typically have 2 choices : - -1. Create an [overview homepage](https://gohugo.io/templates/homepage/) for your project. Write an `index.html` file in *layouts/* folder. -2. Create a redirection to one your documentation page. Either by: - 1. Configuring your server to automatically redirect homepage to one your documentation page - *Recommended* - 2. Creating an empty html page with the following code in the head tag : - - ```html - - ``` diff --git a/exampleSite/content/basics/installation/_index.en.md b/exampleSite/content/basics/installation/_index.en.md new file mode 100644 index 0000000000..a90081ef44 --- /dev/null +++ b/exampleSite/content/basics/installation/_index.en.md @@ -0,0 +1,100 @@ +--- +title: Installation +weight: 15 +--- + +The following steps are here to help you initialize your new website. If you don't know Hugo at all, we strongly suggest you to train by following this [great documentation for beginners](https://gohugo.io/overview/quickstart/). + +## Create your project + +Hugo provides a `new` command to create a new website. + +``` +hugo new site +``` + +## Install the theme + +Install the **Hugo-theme-learn** theme by following [this documentation](https://gohugo.io/themes/installing/) + +The theme's repository is: https://github.com/matcornic/hugo-theme-learn.git + +Alternatively, you can [download the theme as .zip](https://github.com/matcornic/hugo-theme-learn/archive/master.zip) file and extract it in the themes directory + +## Basic configuration + +When building the website, you can set a theme by using `--theme` option. We suggest you to edit your configuration file and set the theme by default. By the way, add requirements for search functionnality to be enabled. + +```toml +# Change the default theme to be use when building the site with Hugo +theme = "hugo-theme-learn" + +# For search functionnality +[outputs] +home = [ "HTML", "RSS", "JSON"] +``` + +## Create your first chapter page + +Chapters are pages containg other child pages. It has a special layout style and usually just contains a _chapter name_, the _title_ and a _brief abstract_ of the section. + +``` +### Chapter 1 + +# Basics + +Discover what this Hugo theme is all about and the core-concepts behind it. +``` + +renders as + +![A Chapter](/basics/installation/images/chapter.png?classes=shadow&width=60%) + +**Hugo-theme-learn** provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command + +``` +hugo new --kind chapter basics/_index.md +``` + +By opening the given file, you should see the property `chapter=true` on top, meaning this page is a _chapter_. + +## Create your first content pages + +Then, create content pages inside the previous chapter. Here are two ways to create content in the chapter : + +``` +hugo new basics/first-content.md +hugo new basics/second-content/_index.md +``` + +Feel free to edit thoses files by adding some sample content and replacing `title` value in the beginning of the files. + +## Launching the website locally + +Launch the following command: + +``` +hugo serve +``` + +Go to `http://localhost:1313` + +You should notice three things: + +1. You have a left **Basics** menu, containing two submenus with names equals to `title` properties in previously created files. +2. The main content of the page explains you to add a new `_index.md` file at the root of the `content` folder. Do it and you have your homepage. +3. With `hugo serve` command, the page refresh as soon as you save a file. Neat ! + +## Build the website + +When your site is ready to deploy, launch the following command: + +``` +hugo +``` + +A `public` folder has been generated, containing all statics content and assets for your website. It can now be deployed on any web server ! + +{{% notice note %}} +This website can be automatically published and hosted with [Netlify](https://www.netlify.com/) (Read more about [Automated HUGO deployments with Netlify](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/)). Alternatively, you can use [Github pages](https://gohugo.io/hosting-and-deployment/hosting-on-github/) +{{% /notice %}} \ No newline at end of file diff --git a/exampleSite/content/basics/installation/images/chapter.png b/exampleSite/content/basics/installation/images/chapter.png new file mode 100644 index 0000000000..103a88e476 Binary files /dev/null and b/exampleSite/content/basics/installation/images/chapter.png differ diff --git a/exampleSite/content/basics/requirements/_index.md b/exampleSite/content/basics/requirements/_index.en.md similarity index 57% rename from exampleSite/content/basics/requirements/_index.md rename to exampleSite/content/basics/requirements/_index.en.md index 99db4e5798..b6d5b38507 100755 --- a/exampleSite/content/basics/requirements/_index.md +++ b/exampleSite/content/basics/requirements/_index.en.md @@ -6,6 +6,6 @@ disableToc: true Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements. -Just download [Hugo](https://gohugo.io/getting-started/installing/) binary for your OS (Windows, Linux, Mac) : it's that simple. +Just download latest version of [Hugo binary (> 0.25)](https://gohugo.io/getting-started/installing/) for your OS (Windows, Linux, Mac) : it's that simple. ![Magic](/basics/requirements/images/magic.gif?classes=shadow) diff --git a/exampleSite/content/basics/requirements/_index.fr.md b/exampleSite/content/basics/requirements/_index.fr.md index f8feac4803..6e07374002 100755 --- a/exampleSite/content/basics/requirements/_index.fr.md +++ b/exampleSite/content/basics/requirements/_index.fr.md @@ -6,6 +6,6 @@ disableToc: true Grâce à la simplicité d'Hugo, cette page est vide car il n'y a quasi pas de prérequis pour utiliser le thème. -Téléchargez le binaire [Hugo](https://gohugo.io/getting-started/installing/) pour votre Système d'exploitation (Windows, Linux, Mac) : et c'est tout ! +Téléchargez la dernière version du [binaire Hugo (> 0.25)](https://gohugo.io/getting-started/installing/) pour votre Système d'exploitation (Windows, Linux, Mac) : et c'est tout ! ![Magic](/basics/requirements/images/magic.gif?classes=shadow) diff --git a/exampleSite/content/basics/what-is-this-hugo-theme/_index.md b/exampleSite/content/basics/what-is-this-hugo-theme/_index.md deleted file mode 100755 index 5af9d8b3e9..0000000000 --- a/exampleSite/content/basics/what-is-this-hugo-theme/_index.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: What is this Hugo theme ? -weight: 5 -disableToc: true ---- - -**Hugo-theme-learn** is a theme for [Hugo](https://gohugo.io/), a fast and modern static website engine written in Go. Where Hugo is often used for blogs, this theme is fully designed for **technical documentation**. - -This theme is a partial porting of the [Learn theme](http://learn.getgrav.org/) of [Grav](https://getgrav.org/), a modern flat-file CMS written in PHP. - -This current documentation has been statically generated with Hugo with a simple command : `hugo -t hugo-theme-learn` - -![Grav Overview](images/grav-overview.png?width=60%) diff --git a/exampleSite/content/basics/what-is-this-hugo-theme/images/grav-overview.png b/exampleSite/content/basics/what-is-this-hugo-theme/images/grav-overview.png deleted file mode 100644 index 74224a8025..0000000000 Binary files a/exampleSite/content/basics/what-is-this-hugo-theme/images/grav-overview.png and /dev/null differ diff --git a/exampleSite/content/cont/archetypes.md b/exampleSite/content/cont/archetypes.md index d9a07cc8ee..77c80d6f09 100644 --- a/exampleSite/content/cont/archetypes.md +++ b/exampleSite/content/cont/archetypes.md @@ -7,7 +7,7 @@ Using the command: `hugo new [relative new content path]`, you can start a conte It is pre-configured skeleton pages with default front matter. Please refer to the documentation for types of page to understand the differences. -## Chapter +## Chapter {#archetypes-chapter} To create a Chapter page, run the following commands diff --git a/exampleSite/content/cont/i18n.md b/exampleSite/content/cont/i18n.md new file mode 100644 index 0000000000..183823eaf8 --- /dev/null +++ b/exampleSite/content/cont/i18n.md @@ -0,0 +1,5 @@ +--- +date: 2016-04-09T16:50:16+02:00 +title: Multi-languages - i18n +weight: 100 +--- \ No newline at end of file diff --git a/exampleSite/content/cont/pages/_index.md b/exampleSite/content/cont/pages/_index.md index 9a5d225c5c..262a8345cf 100644 --- a/exampleSite/content/cont/pages/_index.md +++ b/exampleSite/content/cont/pages/_index.md @@ -1,6 +1,6 @@ --- date: 2016-04-09T16:50:16+02:00 -title: Pages +title: Pages organization weight: 5 --- diff --git a/exampleSite/content/contributing/_index.md b/exampleSite/content/contributing/_index.md deleted file mode 100644 index 8a8e35f17c..0000000000 --- a/exampleSite/content/contributing/_index.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -date: 2016-04-09T16:58:30+02:00 -title: Contributing -disableToc: true -pre: "3. " -weight: 15 ---- - -To help the world be a better place, you could : - -- Contribute to this doc by using *Edit this page* link. -- Contribute to [Hugo](https://gohugo.io/), the static website generator which this theme is for -- Contribute to [Grav](https://getgrav.org/), the flat file CMS of which this theme is from (Thanks to MIT license) -- Contribute to the [Hugo-theme-learn](https://github.com/matcornic/hugo-theme-learn) theme itself - -## Contributors - -Thanks to them - -{{% ghcontributors "https://api.github.com/repos/matcornic/hugo-theme-learn/contributors?per_page=100" %}} - -## TODO - -- Handling videos -- Add optional button to create doc issue (like github) diff --git a/exampleSite/content/credits.en.md b/exampleSite/content/credits.en.md new file mode 100644 index 0000000000..83823bb8ca --- /dev/null +++ b/exampleSite/content/credits.en.md @@ -0,0 +1,28 @@ +--- +title: Credits +disableToc: true +--- + +## Contributors + +Thanks to them for make Open Source Software a better place ! + +{{% ghcontributors "https://api.github.com/repos/matcornic/hugo-theme-learn/contributors?per_page=100" %}} + +And a special thanks to [@vjeantet](https://github.com/vjeantet) for his work on [docdock](https://github.com/vjeantet/hugo-theme-docdock), a fork of hugo-theme-learn. + +## Packages and libraries +* [mermaid](https://knsv.github.io/mermaid) - generation of diagram and flowchart from text in a similar manner as markdown +* [font awesome](http://fontawesome.io/) - the iconic font and CSS framework +* [jQuery](https://jquery.com) - The Write Less, Do More, JavaScript Library +* [lunr](https://lunrjs.com) - Lunr enables you to provide a great search experience without the need for external, server-side, search services... +* [horsey](https://bevacqua.github.io/horsey/) - Progressive and customizable autocomplete component +* [clipboard.js](https://zenorocha.github.io/clipboard.js) - copy text to clipboard +* [highlight.js](https://highlightjs.org) - Javascript syntax highlighter +* [modernizr](https://modernizr.com) - A JavaScript toolkit that allows web developers to use new CSS3 and HTML5 features while maintaining a fine level of control over browsers that don't support + +## Tooling + +* [Netlify](https://www.netlify.com) - Continuous deployement and hosting of this documentation +* [Hugo](https://gohugo.io/) + diff --git a/exampleSite/content/credits.fr.md b/exampleSite/content/credits.fr.md new file mode 100644 index 0000000000..3716eddeae --- /dev/null +++ b/exampleSite/content/credits.fr.md @@ -0,0 +1,28 @@ +--- +title: Crédits +disableToc: true +--- + +## Contributeurs + +Merci à eux de rendre le monde Open Source meilleur ! + +{{% ghcontributors "https://api.github.com/repos/matcornic/hugo-theme-learn/contributors?per_page=100" %}} + +Et a grand merci à [@vjeantet](https://github.com/vjeantet) pour son travail sur [docdock](https://github.com/vjeantet/hugo-theme-docdock), un fork de _hugo-theme-learn_. + +## Packages et librairies +* [mermaid](https://knsv.github.io/mermaid) - géneration de diagrames et graphiques à partir de texte similaire à Markdown +* [font awesome](http://fontawesome.io/) - Le framework de polices iconiques +* [jQuery](https://jquery.com) - La plus connue des librairies Javascript +* [lunr](https://lunrjs.com) - Lunr fournit des fonctions de recherche sans service externe +* [horsey](https://bevacqua.github.io/horsey/) - Autocomplétion de composants (utiliser pour les suggestions de recherche) +* [clipboard.js](https://zenorocha.github.io/clipboard.js) - Copier le texte dans le presse-papier +* [highlight.js](https://highlightjs.org) - Mise en valeur de syntaxes +* [modernizr](https://modernizr.com) - Une boite à outil Javascript qui permet aux développeurs d'utiliser les dernières fonctionnalités de CSS et HTML5, même sur de vieux navigateurs. + +## Outils + +* [Netlify](https://www.netlify.com) - Déploiement continue et hébergement de cette documentation +* [Hugo](https://gohugo.io/) + diff --git a/exampleSite/content/showcase.en.md b/exampleSite/content/showcase.en.md new file mode 100644 index 0000000000..b6d5e0a7a1 --- /dev/null +++ b/exampleSite/content/showcase.en.md @@ -0,0 +1,10 @@ +--- +title: Showcase +disableToc: true +--- + +#### [TAT](https://ovh.github.io/tat/overview/) by OVH +![TAT image](/images/showcase/tat.png?width=50%) + + + diff --git a/exampleSite/content/showcase.fr.md b/exampleSite/content/showcase.fr.md new file mode 100644 index 0000000000..14ce4ece29 --- /dev/null +++ b/exampleSite/content/showcase.fr.md @@ -0,0 +1,10 @@ +--- +title: Vitrine +disableToc: true +--- + +#### [TAT](https://ovh.github.io/tat/overview/) par OVH +![TAT image](/images/showcase/tat.png?width=50%) + + + diff --git a/exampleSite/static/css/theme-mine.css b/exampleSite/static/css/theme-mine.css new file mode 100644 index 0000000000..56bb3bf570 --- /dev/null +++ b/exampleSite/static/css/theme-mine.css @@ -0,0 +1,104 @@ + +:root{ + + --MAIN-TEXT-color:#323232; /* Color of text by default */ + --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */ + --MAIN-LINK-color:#599a3e; /* Color of links */ + --MAIN-LINK-HOVER-color:#3f6d2c; /* Color of hovered links */ + --MAIN-ANCHOR-color: #599a3e; /* color of anchors on titles */ + + --MENU-HEADER-BG-color:#74b559; /* Background color of menu header */ + --MENU-HEADER-BORDER-color:#9cd484; /*Color of menu header border */ + + --MENU-SEARCH-BG-color:#599a3e; /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BOX-color: #84c767; /* Override search field border color */ + --MENU-SEARCH-BOX-ICONS-color: #c7f7c4; /* Override search field icons color */ + + --MENU-SECTIONS-ACTIVE-BG-color:#1b211c; /* Background color of the active section and its childs */ + --MENU-SECTIONS-BG-color:#222723; /* Background color of other sections */ + --MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */ + + --MENU-VISITED-color: #599a3e; /* Color of 'page visited' icons in menu */ + --MENU-SECTION-HR-color: #18211c; /* Color of
separator in menu */ + +} + +body { + color: var(--MAIN-TEXT-color) !important; +} + +textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { + border-color: none; + box-shadow: none; +} + +h2, h3, h4, h5 { + color: var(--MAIN-TITLES-TEXT-color) !important; +} + +a { + color: var(--MAIN-LINK-color); +} + +.anchor { + color: var(--MAIN-ANCHOR-color); +} + +a:hover { + color: var(--MAIN-LINK-HOVER-color); +} + +#sidebar ul li.visited > a .read-icon { + color: var(--MENU-VISITED-color); +} + +#body a.highlight:after { + display: block; + content: ""; + height: 1px; + width: 0%; + -webkit-transition: width 0.5s ease; + -moz-transition: width 0.5s ease; + -ms-transition: width 0.5s ease; + transition: width 0.5s ease; + background-color: var(--MAIN-HOVER-color); +} +#sidebar { + background-color: var(--MENU-SECTIONS-BG-color); +} +#sidebar #header-wrapper { + background: var(--MENU-HEADER-BG-color); + color: var(--MENU-SEARCH-BOX-color); + border-color: var(--MENU-HEADER-BORDER-color); +} +#sidebar .searchbox { + border-color: var(--MENU-SEARCH-BOX-color); + background: var(--MENU-SEARCH-BG-color); +} +#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { + background: var(--MENU-SECTIONS-ACTIVE-BG-color); +} +#sidebar .searchbox * { + color: var(--MENU-SEARCH-BOX-ICONS-color); +} + +#sidebar a { + color: var(--MENU-SECTIONS-LINK-color); +} + +#sidebar a:hover { + color: var(--MENU-SECTIONS-LINK-HOVER-color); +} + +#sidebar ul li.active > a { + background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); + color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important; +} + +#sidebar hr { + border-color: var(--MENU-SECTION-HR-color); +} + diff --git a/exampleSite/static/images/showcase/tat.png b/exampleSite/static/images/showcase/tat.png new file mode 100644 index 0000000000..8a44830c63 Binary files /dev/null and b/exampleSite/static/images/showcase/tat.png differ diff --git a/layouts/partials/custom-footer.html b/layouts/partials/custom-footer.html index 11b8334937..9bb0f48505 100644 --- a/layouts/partials/custom-footer.html +++ b/layouts/partials/custom-footer.html @@ -1 +1,5 @@ - + diff --git a/layouts/partials/custom-header.html b/layouts/partials/custom-header.html index bafd3f2f45..294af29145 100644 --- a/layouts/partials/custom-header.html +++ b/layouts/partials/custom-header.html @@ -1 +1,5 @@ - + \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 734dd347d0..fe5c83425c 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -69,8 +69,6 @@ - + {{ partial "custom-footer.html" . }}