vjeantet / hugo-theme-docport Goto Github PK

License: MIT License

CSS 0.06% HTML 50.43% JavaScript 20.44% SCSS 29.07%

hugo-theme-docport's Introduction

Hugo docPort Theme

DocPort, a professional documentation theme built for Hugo. it provides a simple navigation, automatic search engine, a high level of configuration and a bunch of shortcodes crafted for documentation (attachment, presentations, child pages, notice, alerts, diagrams...).

This project is actively being maintained, and integrate easily with netlify CMS for static content authoring without leaving the browser.

Demo

Visit the theme documentation to see what is going on. It is actually built with this theme.

Quick Start

Add the repository into your Hugo Project repository as a submodule, git submodule add https://github.com/vjeantet/hugo-theme-docport.git themes/hugo-theme-docport.
Configure your config.toml. You may the prepared one for this theme. The config.toml inside the exampleSite is also a good reference.
Build your site with hugo server and see the result at http://localhost:1313/.

More on instalation methods exist, see more information in the live demo website

Documentation

DocPort has its own user guide https://docport.netlify.app

License

DocPort is licensed under the MIT license, see the LICENSE.md file for details.

Maintenance

This theme is maintained by its author Valère JEANTET with the help from these awesome contributors.

Credits

Many thanks to

@matcornic for its inspiration and OpenSource spirit ! . See his great theme Hugo Learn Theme
all docdock theme contributors and forkers.

This theme is mainly based on their work !

hugo-theme-docport's People

Contributors

Stargazers

Watchers

hugo-theme-docport's Issues

about nav

Are there any options to achieve this effect?

Tip on navigation is always $pagetitle

How to move search bar to different place?

Hi,

Now the search bar is placed at top of the left menu,

I want to put search bar at the top the page, something like this,

How to implement this?

Thank you

Docs: Bug in text about "sidebar-after" & "sidebar-before"

Bug in the documentation found (see link below). The the folder names for the (left) sidebar menu are wrong. The following strings spells the folder names wrong.

// Wrong:
Create a _index.md page in _layout/_sidepage-after folder.

// Correct:
Create a _index.md page in _layout/sidebar-before folder.
Create a _index.md page in _layout/sidebar-after folder.

I spent hours trying to make the sidebars working due to error in documentation.

Affected page:
https://docport.netlify.app/content-and-customization/02-navigation-search/menu/

// RIL

Badge rendered as plain text

Copied badge page content in example site to my page.

All the badge text rendered to plain text.

Background color

Hi! How to change backgroud solor of site? hugo -D overrides index.html file.

Provide steps for migration from docdock

Hello,

According to your experience @vjeantet, what are the mandatory steps/adaptations we will have to do to migrate a full dockdock site to docport ?

Thanks for any light about this.

Hide « jump to section » when hide_toc is true

Expand shortcode breaks inside of an excerpt

I tested a few other shortcodes and those seemed to work.

    {{% excerpt %}}

    {{%expand "Test title" %}}Test contents{{% /expand%}}
        
    blah

    {{% panel %}}this is a panel text{{% /panel %}}

    {{< tabs >}}
        
    {{% tab "PHP" %}} 
    This is how we do a Hello world with php 
    ```php
        <?php 
        Print "Hello, World!";
        ?>
    ```
    {{% /tab %}}

    {{< tab "Golang" >}} 
    This is how we do a Hello world with go
    ```go
        package main
        import "fmt"
        func main() {
            fmt.Println("hello world")
        }	
    ```
    {{< /tab >}}

    {{< tab "Java" >}} 
    This is how we do a Hello world with java
    ```java
        class HelloWorld {
            public static void main(String[] args) {
                System.out.println("Hello, World!"); 
            }
        }
    ```
    {{< /tab >}}

    {{< /tabs >}}

    {{% /excerpt %}}

	    <div class="expand">
    <div class="expand-label" style="cursor: pointer;" onclick="$h = $(this);$h.next('div').slideToggle(100,function () {$h.children('i').attr('class',function () {return $h.next('div').is(':visible') ? 'fas fa-chevron-down' : 'fas fa-chevron-right';});});">
        <i style=";" class="fas fa-chevron-right"></i>
        <span>
<pre><code>    Test title
    
    &lt;/span&gt;
&lt;/div&gt;
&lt;div class="expand-content" style="display: none;"&gt;Test contents&lt;/div&gt;
</code></pre>
</span></div>
<p>blah</p>
<div class="card "><div class="card-body">
    <p class="card-text">this is a panel text</p>
  </div></div>
<div class="tabs"><input type="radio" name="tabs-2" id="tabs-2-0" checked="checked">
  <label for="tabs-2-0">PHP</label>
  <div class="tab"><p>This is how we do a Hello world with php</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:2;-o-tab-size:2;tab-size:2"><code class="language-php" data-lang="php">    <span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> 
    <span style="color:#66d9ef">Print</span> <span style="color:#e6db74">"Hello, World!"</span>;
    <span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010">
</span></code></pre></div></div><input type="radio" name="tabs-2" id="tabs-2-1">
  <label for="tabs-2-1">Golang</label>
  <div class="tab"><p>This is how we do a Hello world with go</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:2;-o-tab-size:2;tab-size:2"><code class="language-go" data-lang="go">    <span style="color:#f92672">package</span> <span style="color:#a6e22e">main</span>
    <span style="color:#f92672">import</span> <span style="color:#e6db74">"fmt"</span>
    <span style="color:#66d9ef">func</span> <span style="color:#a6e22e">main</span>() {
        <span style="color:#a6e22e">fmt</span>.<span style="color:#a6e22e">Println</span>(<span style="color:#e6db74">"hello world"</span>)
    }	
</code></pre></div></div><input type="radio" name="tabs-2" id="tabs-2-2">
  <label for="tabs-2-2">Java</label>
  <div class="tab"><p>This is how we do a Hello world with java</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:2;-o-tab-size:2;tab-size:2"><code class="language-java" data-lang="java">    <span style="color:#66d9ef">class</span> <span style="color:#a6e22e">HelloWorld</span> <span style="color:#f92672">{</span>
        <span style="color:#66d9ef">public</span> <span style="color:#66d9ef">static</span> <span style="color:#66d9ef">void</span> <span style="color:#a6e22e">main</span><span style="color:#f92672">(</span>String<span style="color:#f92672">[]</span> args<span style="color:#f92672">)</span> <span style="color:#f92672">{</span>
            System<span style="color:#f92672">.</span><span style="color:#a6e22e">out</span><span style="color:#f92672">.</span><span style="color:#a6e22e">println</span><span style="color:#f92672">(</span><span style="color:#e6db74">"Hello, World!"</span><span style="color:#f92672">);</span> 
        <span style="color:#f92672">}</span>
    <span style="color:#f92672">}</span>
</code></pre></div></div></div>

		
</div>






	 
	<div class="chevrons">
		<a class="next" href="/link/" title="Flows" style="margin-right: 0px;">
            <div>
                <p>Next page</p>
                <label>Flows</label>
            </div>
            <i class="fas fa-arrow-right" style="font-size: 1.7em"></i></a>
	</div>

State Diagram not supported in Mermaid?

I'm not sure if the version of mermaid bundled is just very old or it's some other issue, but trying to make a state diagram doesn't seem to work.

Shortcode columns

add line number and copy button for code blocks, will support?

how custom the article width to 100%?

i want full screen ，but i don't know how to do.

please teach me , thank you.

[Tags/Categories] How are they rendered ?

I'm using Hugo and docport theme for an internal site at my work.
I use to add categories and taxonomies (usually tags) to my pages.
I wonder how they can be used. Is there a way to display the whole list of tags and link each one to the related pages ?
Thanks in advance

Shortcode tabs

请问怎么在markdown文件中添加锚点呢？

.File.BaseFileName on zero object. Wrap it in if or with: {{ with .File }}{{ .BaseFileName }}{{ end }}

dear team,
i am using your awesome docport theme - or at least i am trying :)

i am using the latest build of the docport theme available for download here
i am also using the latest available hugo version which is:
hugo v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192+extended windows/amd64 BuildDate=2023-03-12T11:40:50Z VendorInfo=gohugoio
this issue happens only when using the docport theme - at least i get site builds with other themes

when i run the site build - it terminates with this warning and the output folder stays empty
C:\hugo\sites\quickstart [master +3 ~0 -0 | +7 ~0 -1 !]> hugo
Start building sites …
hugo v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192+extended windows/amd64 BuildDate=2023-03-12T11:40:50Z VendorInfo=gohugoio
WARN 2023/03/20 13:43:28 .File.BaseFileName on zero object. Wrap it in if or with: {{ with .File }}{{ .BaseFileName }}{{ end }}

               | EN

even though the pages and static files seem to be build; they stay empty

the config file i am using looks like this

baseURL = "http://example.org/"
languageCode = "en-us"
title = "MyTitle"
theme = "hugo-theme-docport-master"

DefaultContentLanguage = "en"
pygmentsCodeFences = true
pygmentsStyle = "monokai"

defaultContentLanguageInSubdir= false
enableMissingTranslationPlaceholders = false

# googleanalytics = "UA-123-45"

disableKinds = ["taxonomy", "taxonomyTerm", "category", "RSS"]

# Keep this as is
[outputs]
home = [ "HTML", "RSS", "JSON"]

# Site params
[params]
ordersectionsby = "weight" # ordersectionsby = "title"
disableNavChevron = false # set true to hide next/prev chevron, default is false
menushortcutsnewtab = false # set true to open shortcuts links to a new tab/window

#editURL = "https://github.com/vjeantet/hugo-theme-docport/edit/master/exampleSite/content/"
enableGitInfo = true
color_main = "#ff0000"
color_second = "black"
disableSearch = true


[mediaTypes]
  [mediaTypes."application/netlifyconfig"]
    suffixes = ["yml"]

[outputFormats]
[outputFormats.netlifyyaml]
mediaType = "application/netlifyconfig"
isPlainText = true
isHTML = false
notAlternative = true

[markup.goldmark.renderer]
unsafe = false #was true

# Code highlight configuration
[markup.highlight]
codeFences = true
guessSyntax = true
hl_Lines = ""
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noClasses = true
style = "monokai"
tabWidth = 2

is there anything i have overlooked? i am fairly new to hugo itself, but have basic/intermediate experience with site generators and feel confident, that what i am trying to do is not completely non sense :)

the content of the

please let me know if there are any missing information

cheers and best regards
marc