diff --git a/README.md b/README.md index ce755c7..d247e6a 100644 --- a/README.md +++ b/README.md @@ -1,90 +1,11 @@ -

Hugo PaperMod | Demo

+# PaperModX -

☄️ Fast | ☁️ Fluent | 🌙 Smooth | 📱 Responsive

-
+PaperModX is a forked version of [PaperMod](https://github.com/adityatelange/hugo-PaperMod), +it aims at adding new features and improving code quality, +makes it easier to read and modify by anyone with basic knowledge of Hugo and HTML. -> Hugo PaperMod is a theme based on [hugo-paper](https://github.com/nanxiaobei/hugo-paper). -> The goal of this project is to add more features and customization to the og theme. - -The [demo](https://adityatelange.github.io/hugo-PaperMod/) includes a lot of documentation about Installation, Features with a few more stuff. Make sure you visit it, to get an awesome hands-on experience and get to know about the features ... - -**ExampleSite** can be found here: [exampleSite](https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite). Demo is built up with [exampleSite](https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite) as source. - -[![Minimum Hugo Version](https://img.shields.io/static/v1?label=min-HUGO-version&message=0.83.0&color=blue&logo=hugo)](https://github.com/gohugoio/hugo/releases/tag/v0.83.0) -[![Build GH-Pages](https://github.com/adityatelange/hugo-PaperMod/workflows/Build%20GH-Pages/badge.svg)](https://github.com/adityatelange/hugo-PaperMod/deployments/activity_log?environment=github-pages) -[![GitHub](https://img.shields.io/github/license/adityatelange/hugo-PaperMod)](https://github.com/adityatelange/hugo-PaperMod/blob/master/LICENSE) -[![hugo-papermod](https://img.shields.io/badge/Hugo--Themes-@PaperMod-blue)](https://themes.gohugo.io/themes/hugo-papermod/) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=adityatelange_hugo-PaperMod&metric=alert_status)](https://sonarcloud.io/dashboard?id=adityatelange_hugo-PaperMod) -![code-size](https://img.shields.io/github/languages/code-size/adityatelange/hugo-PaperMod) - ---- - -

- Mockup image -

- ---- - -## Features/Mods 💥 - -- Uses Hugo's asset generator with pipelining, fingerprinting, bundling and minification by default. -- 3 Modes: - - [Regular Mode.](https://github.com/adityatelange/hugo-PaperMod/wiki/Features#regular-mode-default-mode) - - [Home-Info Mode.](https://github.com/adityatelange/hugo-PaperMod/wiki/Features#home-info-mode) - - [Profile Mode.](https://github.com/adityatelange/hugo-PaperMod/wiki/Features#profile-mode) -- Table of Content Generation (newer implementation). -- Archive of posts. -- Social Icons (home-info and profile-mode) -- Social-Media Share buttons on posts. -- Menu location indicator. -- Multilingual support. (with language selector) -- Taxonomies -- Cover image for each post (with Responsive image support). -- Light/Dark theme (automatic theme switch a/c to browser theme and theme-switch button). -- SEO Friendly. -- Multiple Author support. -- Search Page with Fuse.js -- Other Posts suggestion below a post -- Breadcrumb Navigation -- Code Block Copy buttons -- No webpack, nodejs and other dependencies are required to edit the theme. - -Read Wiki For More Details => **[PaperMod - Features](https://github.com/adityatelange/hugo-PaperMod/wiki/Features)** - ---- - -## Install/Update 📥 - -Read Wiki For More Details => **[PaperMod - Installation](https://github.com/adityatelange/hugo-PaperMod/wiki/Installation)** - ---- - -## Social-Icons/Share-Icons 🖼️ - -Read Wiki For More Details => **[PaperMod-Icons](https://github.com/adityatelange/hugo-PaperMod/wiki/Icons)** - ---- - -## FAQs / How To's Guide 🙋 - -Read Wiki For More Details => **[PaperMod-FAQs](https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs)** - ---- - -## Release Changelog - -Release ChangeLog has info about stuff added: **[Releases](https://github.com/adityatelange/hugo-PaperMod/releases)** - ---- - -## [Pagespeed Insights (100% ?)](https://pagespeed.web.dev/report?url=https://adityatelange.github.io/hugo-PaperMod/) - ---- - -## Special Thanks 🌟 - -- [**Highlight.js**](https://github.com/highlightjs/highlight.js) -- [**Fuse.js**](https://github.com/krisk/fuse) -- [**Feather Icons**](https://github.com/feathericons/feather) -- [**Simple Icons**](https://github.com/simple-icons/simple-icons) -- **All Contributors and Supporters** +Features and changes: +- Table of Contents (ToC) floating on the side +- InstantClick integration +- Social icons from [Simple Icons](https://simpleicons.org/) +- Opinionated UI enhancements diff --git a/assets/css/common/footer.css b/assets/css/common/footer.css index 5addb1e..b0dc264 100644 --- a/assets/css/common/footer.css +++ b/assets/css/common/footer.css @@ -58,3 +58,8 @@ #theme-toggle:focus { outline: 0; } + +/* InstantClick css */ +#instantclick-bar { + background: var(--tertiary); +} diff --git a/assets/css/common/header.css b/assets/css/common/header.css index 3cd070e..4c8de8f 100644 --- a/assets/css/common/header.css +++ b/assets/css/common/header.css @@ -67,10 +67,12 @@ body:not(.dark) #sun { #menu a { font-size: 16px; + font-weight: 500; + color: var(--secondary); } #menu .active { - font-weight: 500; + color: var(--primary); border-bottom: 2px solid currentColor; } diff --git a/assets/css/common/main.css b/assets/css/common/main.css index 50022ac..22dc39c 100644 --- a/assets/css/common/main.css +++ b/assets/css/common/main.css @@ -1,3 +1,4 @@ +/* for home and other pages */ .main { position: relative; min-height: calc(100vh - var(--header-height) - var(--footer-height)); @@ -5,6 +6,10 @@ margin: auto; padding: var(--gap); } +/* for post page */ +.main.post { + max-width: calc(var(--post-width) + var(--gap) * 2); +} .page-header h1 { font-size: 40px; diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css index b9b9709..8730e88 100644 --- a/assets/css/common/post-single.css +++ b/assets/css/common/post-single.css @@ -69,8 +69,7 @@ font-size: 12px; } -.post-content a, -.toc a:hover { +.post-content a { box-shadow: 0 1px 0; } @@ -263,20 +262,26 @@ border-radius: var(--radius); padding: 0.4em; } +@media screen and (min-width: 1000px) { + .toc.side { + position: fixed; + right: 30px; + top: 100px; + width: 300px; + font-size: .9em; + z-index: 1; + } +} .dark .toc { background: var(--entry); } .toc details summary { - cursor: zoom-in; + cursor: pointer; margin-inline-start: 20px; } -.toc details[open] summary { - cursor: zoom-out; -} - .toc .details { display: inline; font-weight: 500; @@ -290,6 +295,12 @@ .toc li ul { margin-inline-start: var(--gap); } +.toc li a.active { + box-shadow: 0 2px 0 var(--secondary); +} +.toc a:hover { + text-decoration: underline; +} .toc summary:focus { outline: 0; diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css index fd0c5ee..955b7e4 100644 --- a/assets/css/core/theme-vars.css +++ b/assets/css/core/theme-vars.css @@ -1,8 +1,9 @@ :root { --gap: 24px; --content-gap: 20px; - --nav-width: 1024px; + --nav-width: 960px; --main-width: 720px; + --post-width: 800px; --header-height: 60px; --footer-height: 60px; --radius: 8px; diff --git a/assets/js/instantclick.js b/assets/js/instantclick.js new file mode 100644 index 0000000..a2539d8 --- /dev/null +++ b/assets/js/instantclick.js @@ -0,0 +1,13 @@ +/* InstantClick 3.1.0 | (C) 2014 Alexandre Dieulot | http://instantclick.io/license */ +var InstantClick=function(d,e){function w(a){var b=a.indexOf("#");return 0>b?a:a.substr(0,b)}function z(a){for(;a&&"A"!=a.nodeName;)a=a.parentNode;return a}function A(a){var b=e.protocol+"//"+e.host;if(!(b=a.target||a.hasAttribute("download")||0!=a.href.indexOf(b+"/")||-1+new Date-500||(a=z(a.target))&&A(a)&&x(a.href)}function N(a){G>+new Date-500||(a=z(a.target))&&A(a)&&(a.addEventListener("mouseout",T),H?(O=a.href,l=setTimeout(x,H)):x(a.href))}function U(a){G=+new Date;(a=z(a.target))&&A(a)&&(D?a.removeEventListener("mousedown", +M):a.removeEventListener("mouseover",N),x(a.href))}function V(a){var b=z(a.target);!b||!A(b)||1p.readyState)&&0!=p.status){q.ready=+new Date-q.start;if(p.getResponseHeader("Content-Type").match(/\/(x|ht|xht)ml/)){var a=d.implementation.createHTMLDocument("");a.documentElement.innerHTML=p.responseText.replace(//gi,"");y=a.title; +u=a.body;var b=t("receive",r,u,y);b&&("body"in b&&(u=b.body),"title"in b&&(y=b.title));b=w(r);h[b]={body:u,title:y,scrollY:b in h?h[b].scrollY:0};for(var a=a.head.children,b=0,c,g=a.length-1;0<=g;g--)if(c=a[g],c.hasAttribute("data-instant-track")){c=c.getAttribute("href")||c.getAttribute("src")||c.innerHTML;for(var e=E.length-1;0<=e;e--)E[e]==c&&b++}b!=E.length&&(F=!0)}else F=!0;m&&(m=!1,P(r))}}function L(a){d.body.addEventListener("touchstart",U,!0);D?d.body.addEventListener("mousedown",M,!0):d.body.addEventListener("mouseover", +N,!0);d.body.addEventListener("click",V,!0);if(!a){a=d.body.getElementsByTagName("script");var b,c,g,e;i=0;for(j=a.length;i+new Date-(q.start+q.display)||(l&&(clearTimeout(l),l=!1),a||(a=O),v&&(a==r||m))||(v=!0,m=!1,r=a,F=u=!1,q={start:+new Date},t("fetch"), +p.open("GET",a),p.send())}function P(a){"display"in q||(q.display=+new Date-q.start);l||!v?l&&r&&r!=a?e.href=a:(x(a),C.start(0,!0),t("wait"),m=!0):m?e.href=a:F?e.href=r:u?(h[k].scrollY=pageYOffset,m=v=!1,K(y,u,r)):(C.start(0,!0),t("wait"),m=!0)}var I=navigator.userAgent,S=-1b;b++)a[b]+"Transform"in h.style&&(k=a[b]+"Transform");var c="transition";if(!(c in h.style))for(b=0;3>b;b++)a[b]+"Transition"in +h.style&&(c="-"+a[b].toLowerCase()+"-"+c);a=d.createElement("style");a.innerHTML="#instantclick{position:"+(Q?"absolute":"fixed")+";top:0;left:0;width:100%;pointer-events:none;z-index:2147483647;"+c+":opacity .25s .1s}.instantclick-bar{background:#29d;width:100%;margin-left:-100%;height:2px;"+c+":all .25s}";d.head.appendChild(a);Q&&(m(),addEventListener("resize",m),addEventListener("scroll",m))},start:a,done:e}}(),R="pushState"in history&&(!I.match("Android")||I.match("Chrome/"))&&"file:"!=e.protocol; +return{supported:R,init:function(){if(!k)if(R){for(var a=arguments.length-1;0<=a;a--){var b=arguments[a];!0===b?J=!0:"mousedown"==b?D=!0:"number"==typeof b&&(H=b)}k=w(e.href);h[k]={body:d.body,title:d.title,scrollY:pageYOffset};for(var b=d.head.children,c,a=b.length-1;0<=a;a--)c=b[a],c.hasAttribute("data-instant-track")&&(c=c.getAttribute("href")||c.getAttribute("src")||c.innerHTML,E.push(c));p=new XMLHttpRequest;p.addEventListener("readystatechange",W);L(!0);C.init();t("change",!0);addEventListener("popstate", +function(){var a=w(e.href);a!=k&&(a in h?(h[k].scrollY=pageYOffset,k=a,K(h[a].title,h[a].body,!1,h[a].scrollY)):e.href=e.href)})}else t("change",!0)},on:function(a,b){B[a].push(b)}}}(document,location); diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 3d13f07..edd7809 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -14,7 +14,7 @@ {{- end -}} " id="top"> {{- partialCached "header.html" . .Page -}} -
+
{{- block "main" . }}{{ end }}
{{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d76058f..4e348be 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -4,11 +4,11 @@ {{ site.Copyright | markdownify }} {{- else }} © {{ now.Year }} {{ site.Title }} - {{- end }} - + {{- end -}} + Powered by Hugo & - PaperMod + PaperMod {{- end }} @@ -24,6 +24,7 @@ {{- partial "extend_footer.html" . }} {{- if (not site.Params.disableScrollToTop) }} @@ -133,3 +137,68 @@ }); {{- end }} + +{{- if (and (eq .Kind "page") (.Param "ShowToc") (.Param "TocSide")) }} + +{{- end }} + +{{- /* InstantClick.js */}} +{{- if (.Param "EnableInstantClick") }} +{{- $instantclick := slice (resources.Get "js/instantclick.js") | resources.Concat "assets/js/instantclick.js" | minify }} + + +{{- end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index b921452..99d33ae 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -102,6 +102,15 @@ {{ end -}} +{{- /* Misc */}} +{{- if hugo.IsProduction | or (eq site.Params.env "production") }} +{{- template "_internal/google_analytics.html" . }} +{{- end -}} +{{- template "partials/templates/opengraph.html" . }} +{{- template "partials/templates/twitter_cards.html" . }} +{{- template "partials/templates/schema_json.html" . }} + +{{- partial "extend_head.html" . }} - -{{- partial "extend_head.html" . -}} - -{{- /* Misc */}} -{{- if hugo.IsProduction | or (eq site.Params.env "production") }} -{{- template "_internal/google_analytics.html" . }} -{{- template "partials/templates/opengraph.html" . }} -{{- template "partials/templates/twitter_cards.html" . }} -{{- template "partials/templates/schema_json.html" . }} -{{- end -}} diff --git a/layouts/partials/svg.html b/layouts/partials/svg.html index 0583736..a1b598e 100644 --- a/layouts/partials/svg.html +++ b/layouts/partials/svg.html @@ -191,6 +191,8 @@ d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"> +{{- else if (eq $icon_name "github-simple") -}} +GitHub {{- else if (eq $icon_name "gitlab") -}} @@ -394,6 +396,8 @@ +{{- else if (eq $icon_name "rss-simple") -}} +RSS {{- else if (eq $icon_name "serverfault") -}} +{{- else if (eq $icon_name "telegram-simple") -}} +Telegram {{- else if (eq $icon_name "twitch") -}} @@ -481,6 +487,8 @@ d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"> +{{- else if (eq $icon_name "twitter-simple") -}} +Twitter {{- else if (eq $icon_name "unsplash") -}} +{{- else if (eq $icon_name "pinboard-simple") -}} +Pinboard {{- else if $icon_name -}} diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html index d9b8b23..02a61e9 100644 --- a/layouts/partials/toc.html +++ b/layouts/partials/toc.html @@ -1,7 +1,7 @@ {{- $headers := findRE "(.|\n])+?" .Content -}} {{- $has_headers := ge (len $headers) 1 -}} {{- if $has_headers -}} -
+
{{- i18n "toc" | default "Table of Contents" }}