PVR/gokarna
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add gitignore and static icons :beach: (#70)

Browse Source 
* Add gitignore and static icons

* Add social icons bar

* Add more social icons, fix styling for header

* Fix dark theme bug

* Remove AWS icon

* Add math typesetting to readme features

* Templatize social icons

* Add documentation and fix menu icon

* Add more icons in example site

* Fix lang in code blocks

* Fix codeblocks lang and use twitch icon

* Reduce spacing around and between social icons

* Fix icon sizing

* Hard code width and height

* Fix language in code blocks

* Update language

* Update Readme

* Add screenshot

* Update screenshots

Co-authored-by: Yash Mehrotra <yashmehrotra95@gmail.com>
This commit is contained in:
Avijit Gupta
2021-09-07 15:16:58 +02:00
committed by GitHub
parent 90f49861ad
commit 808cd0ffb9
42 changed files with 146 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
exampleSite/content/posts/theme-documentation-advanced.md
View File

@@ -11,7 +11,7 @@ Gokarna is an opinionated theme with a focus on minimalism and simplicity.
## Content Types
This theme supports two types of content types: `post` and `page`. To specify them, you need to add them in your markdown metadata.
This theme supports two types of content types: `post` and `page`. To specify them, you need to add them in your markdown metadata.
### Post
@@ -54,20 +54,54 @@ The `weight` attribute can be added in the markdown metadata for `post` types. W
2. Show recent posts on home page if the value is set to `recent`
3. Do not show anything if the variable is unset or an empty string.
## Icons in header
## Icons
Gokarna supports popular social media icons (Github, Linkedin, Twitter, StackOverflow, Dribbble, etc.) out of the box. See full list of supported icons [here](https://github.com/526avijitgupta/gokarna/tree/main/static/icons).
We have used [feather](https://feathericons.com) as our icons library. Here is an example of how to add custom icons in the header:
### Icons on homepage
To display icons on the homepage, simply update the `socialIcons` config param with a list of name and url of each icon. The specified `name` should exactly match one of the names from [here](https://github.com/526avijitgupta/gokarna/tree/main/static/icons).
If you want to add more icons, you can download the svg directly from [here](https://simpleicons.org/) and place them in your local icons directory (`/static/icons/`)
```toml
[params]
socialIcons = [
{name = "twitter", url = "https://example.com"},
{name = "linkedin", url = "https://example.com"},
{name = "stackoverflow", url = "https://example.com"},
]
```
Preview:
![Icons on homepage Preview](/images/theme-documentation-advanced/icons-homepage-preview.png "Icons on homepage Preview")
### Icons in header
[Feather](https://feathericons.com) icons has a comprehensive list of icons which are more general purpose and not limited to social media.
Therefore, we use feather as an additional source of icons. Here is an example of how to add custom icons in the header using feather:
```toml
[[menu.main]]
identifier = "github"
url = "https://github.com"
weight = 3
# We use feather-icons
# Using feather-icons
pre = "<span data-feather='github'></span>"
```
The same icon in this case could also be added without feather:
```toml
[[menu.main]]
identifier = "github"
url = "https://www.buymeacoffee.com/"
weight = 3
# Without using feather-icons
pre = "<img class='svg-inject' src='/icons/github.svg' />"
```
## Custom Head HTML
The goal of this feature is to give the user more control over the theme. It's functioning is very straightforward - "You can inject any HTML you want in the `<head>` tag" . This may seem simple at first, but it opens up a lot of possibilities.
@@ -92,7 +126,7 @@ We preferred privacy friendly tools like [Umami](https://umami.is/) & [Fathom An
Giving users the freedom to add anything in the HTML via config.toml seemed like an elegant way to solve the problem.
```markdown
```toml
[params]
customHeadHTML = """
<script async defer data-website-id="website-id" src="https://analytics.example.com/script.js"></script>
@@ -103,7 +137,7 @@ Giving users the freedom to add anything in the HTML via config.toml seemed like
Katex is a math typesetting library for the web which lets you write beautiful equations. To use it, add the javascript as mentioned in [their documentation](https://katex.org/docs/browser.html) in our `params.customHeadHTML`.
```markdown
```toml
[params]
customHeadHTML = """
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous">