From 3c4ede96df9d7e743305f1acc6b712fbb3eea06e Mon Sep 17 00:00:00 2001 From: Xin Date: Tue, 26 Sep 2023 08:15:31 +0100 Subject: [PATCH] feat: add shortcodes to build Hextra home page (#90) * feat: add feature grid and card shortcodes * feat: add markdown content to hextra home * chore: add button for hextra home * chore: add heading and subtitle * chore: finish moving hextra home to shortcodes * chore: regenerate css * chore: improve hextra home layout shortcodes * chore: update css * chore: decrease button size --- assets/css/compiled/main.css | 25 ++-- exampleSite/content/_index.md | 72 ++++++++++++ exampleSite/hugo_stats.json | 9 +- layouts/hextra-home.html | 116 +------------------ layouts/shortcodes/hextra/feature-card.html | 28 +++++ layouts/shortcodes/hextra/feature-grid.html | 9 ++ layouts/shortcodes/hextra/hero-badge.html | 15 +++ layouts/shortcodes/hextra/hero-button.html | 15 +++ layouts/shortcodes/hextra/hero-headline.html | 9 ++ layouts/shortcodes/hextra/hero-subtitle.html | 9 ++ layouts/shortcodes/icon.html | 6 +- 11 files changed, 181 insertions(+), 132 deletions(-) create mode 100644 layouts/shortcodes/hextra/feature-card.html create mode 100644 layouts/shortcodes/hextra/feature-grid.html create mode 100644 layouts/shortcodes/hextra/hero-badge.html create mode 100644 layouts/shortcodes/hextra/hero-button.html create mode 100644 layouts/shortcodes/hextra/hero-headline.html create mode 100644 layouts/shortcodes/hextra/hero-subtitle.html diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index fad04788..484172fc 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -613,6 +613,9 @@ video { .mb-4 { margin-bottom: 1rem; } +.mb-6 { + margin-bottom: 1.5rem; +} .mb-8 { margin-bottom: 2rem; } @@ -1002,17 +1005,9 @@ video { --tw-bg-opacity: 1; background-color: rgb(254 252 232 / var(--tw-bg-opacity)); } -.bg-gradient-to-b { - background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); -} .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } -.from-gray-800 { - --tw-gradient-from: #1f2937 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} .from-gray-900 { --tw-gradient-from: #111827 var(--tw-gradient-from-position); --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position); @@ -1116,6 +1111,9 @@ video { .pl-\[max\(env\(safe-area-inset-left\)\2c 1\.5rem\)\] { padding-left: max(env(safe-area-inset-left),1.5rem); } +.pr-2 { + padding-right: 0.5rem; +} .pr-4 { padding-right: 1rem; } @@ -1203,6 +1201,9 @@ video { .leading-7 { line-height: 1.75rem; } +.leading-none { + line-height: 1; +} .leading-tight { line-height: 1.25; } @@ -1369,6 +1370,9 @@ video { .duration-200 { transition-duration: 200ms; } +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @@ -3350,11 +3354,6 @@ body { align-items: flex-start; } - .sm\:px-4 { - padding-left: 1rem; - padding-right: 1rem; - } - .sm\:text-xl { font-size: 1.25rem; } diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 4f2c22e5..b7231c35 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -2,3 +2,75 @@ title: Hextra Theme layout: hextra-home --- + +{{< hextra/hero-badge >}} +
+ Free, open source + {{< icon name="arrow-circle-right" attributes="height=14" >}} +{{< /hextra/hero-badge >}} + +
+{{< hextra/hero-headline >}} + Build modern websites with Markdown and Hugo +{{< /hextra/hero-headline >}} +
+ +
+{{< hextra/hero-subtitle >}} + Fast, batteries-included Hugo theme for creating beautiful static websites +{{< /hextra/hero-subtitle >}} +
+ +
+{{< hextra/hero-button text="Get Started" link="docs" >}} +
+ +
+ +{{< hextra/feature-grid >}} + {{< hextra/feature-card + title="Fast and Full-featured" + subtitle="Simple and easy to use, yet powerful and feature-rich." + class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]" + image="images/hextra-doc.webp" + imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80" + style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));" + >}} + {{< hextra/feature-card + title="Markdown is All You Need" + subtitle="Compose with just Markdown. Enrich with Shortcode components." + class="aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]" + image="images/hextra-markdown.webp" + imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80" + style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));" + >}} + {{< hextra/feature-card + title="Full Text Search" + subtitle="Built-in full text search with FlexSearch, no extra setup required." + class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]" + image="images/hextra-search.webp" + imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80" + style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));" + >}} + {{< hextra/feature-card + title="Lightweight as a Feather" + subtitle="No dependency or Node.js is needed to use Hextra. Powered by Hugo, one of *the fastest* static site generators, building your site in just seconds with a single binary." + >}} + {{< hextra/feature-card + title="Reponsive with Dark Mode Included" + subtitle="Looks great on different screen sizes. Built-in dark mode support, with auto-switching based on user's system preference." + >}} + {{< hextra/feature-card + title="Build and Host for Free" + subtitle="Build with GitHub Actions, and host for free on GitHub Pages. Alternatively it can be hosted on any static hosting service." + >}} + {{< hextra/feature-card + title="Multi-Language Made Easy" + subtitle="Create multi-language pages by just adding locales suffix to the Markdown file. Adding i18n support to your site is intuitive." + >}} + {{< hextra/feature-card + title="And Much More..." + icon="sparkles" + subtitle="Syntax highlighting / Table of contents / SEO / RSS / LaTeX / Mermaid / Customizable / and more..." + >}} +{{< /hextra/feature-grid >}} diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index a050296b..eea58b8b 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -40,7 +40,6 @@ "path", "pre", "script", - "section", "span", "strong", "style", @@ -94,7 +93,6 @@ "bg-black/[.05]", "bg-blue-100", "bg-clip-text", - "bg-gradient-to-b", "bg-gradient-to-r", "bg-gray-100", "bg-neutral-50", @@ -228,6 +226,7 @@ "data-[state=selected]:text-primary-600", "decoration-from-font", "duration-200", + "ease-in", "ease-in-out", "filename", "first:mt-0", @@ -246,7 +245,6 @@ "footnote-backref", "footnote-ref", "footnotes", - "from-gray-800", "from-gray-900", "gap-1", "gap-2", @@ -274,6 +272,7 @@ "hamburger-menu", "hextra-card", "hextra-cards", + "hextra-feature-card", "hextra-filetree", "hextra-filetree-folder", "hextra-footer", @@ -320,6 +319,7 @@ "leading-5", "leading-6", "leading-7", + "leading-none", "leading-tight", "left-[24px]", "left-[36px]", @@ -367,6 +367,7 @@ "mb-16", "mb-2", "mb-4", + "mb-6", "mb-8", "md:aspect-[1.1/1]", "md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]", @@ -439,6 +440,7 @@ "pl-[max(env(safe-area-inset-left),1.5rem)]", "placeholder:text-gray-500", "pointer-events-none", + "pr-2", "pr-4", "pr-[calc(env(safe-area-inset-right)-1.5rem)]", "pr-[max(env(safe-area-inset-left),1.5rem)]", @@ -513,7 +515,6 @@ "sm:flex", "sm:grid-cols-2", "sm:items-start", - "sm:px-4", "sm:text-xl", "sm:w-[110%]", "sr-only", diff --git a/layouts/hextra-home.html b/layouts/hextra-home.html index 6a258f9d..0ba7c647 100644 --- a/layouts/hextra-home.html +++ b/layouts/hextra-home.html @@ -1,118 +1,10 @@ {{ define "main" }}
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }} -
-
- -
- Free, open source - {{- partial "utils/icon" (dict "name" "arrow-circle-right" "attributes" "height=14") -}} - -

- Build modern websites  - with Markdown and Hugo -

-

- Fast, batteries-included Hugo theme - for creating beautiful static websites. -

-
- {{- $docsURL := "docs" | relURL -}} - - Get Started - -
-
-
-

What's in Hextra?

-
- {{ template "hextra-feature-card" (dict - "title" "Fast and Full-featured" - "subtitle" "Simple and easy to use, yet powerful and feature-rich. " - "class" "aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]" - "image" "images/hextra-doc.webp" - "imageClass" "top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80" - "style" "background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));" - ) - }} - {{ template "hextra-feature-card" (dict - "title" "Markdown is All You Need" - "subtitle" "Compose with just Markdown. Enrich with Shortcode components." - "class" "aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]" - "image" "images/hextra-markdown.webp" - "imageClass" "top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80" - "style" "background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));" - ) - }} - {{ template "hextra-feature-card" (dict - "title" "Full Text Search" - "subtitle" "Built-in full text search with FlexSearch, no extra setup required." - "class" "aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]" - "image" "images/hextra-search.webp" - "imageClass" "top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80" - "style" "background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));" - ) - }} - {{ template "hextra-feature-card" (dict - "title" "Lightweight as a Feather" - "subtitle" "No dependency or Node.js is needed to use Hextra. Powered by Hugo, one of *the fastest* static site generators, building your site in just seconds with a single binary." - ) - }} - {{ template "hextra-feature-card" (dict - "title" "Reponsive with Dark Mode Included" - "subtitle" "Looks great on different screen sizes. Built-in dark mode support, with auto-switching based on user's system preference." - ) - }} - {{ template "hextra-feature-card" (dict - "title" "Build and Host for Free" - "subtitle" "Build with GitHub Actions, and host for free on GitHub Pages. Alternatively it can be hosted on any static hosting service." - ) - }} - {{ template "hextra-feature-card" (dict - "title" "Multi-Language Made Easy" - "subtitle" "Create multi-language pages by just adding locales suffix to the Markdown file. Adding i18n support to your site is intuitive." - ) - }} - {{ template "hextra-feature-card" (dict - "title" "And Much More..." - "subtitle" "Syntax highlighting / Table of contents / SEO / RSS / LaTeX / Mermaid / Customizable / and more..." - ) - }} -
-
+
+
+ {{ .Content }} +
{{ end }} - -{{- define "hextra-feature-card" -}} - {{- $title := .title -}} - {{- $subtitle := .subtitle -}} - {{- $class := .class -}} - {{- $image := .image -}} - {{- $imageClass := .imageClass -}} - {{- $style := .style -}} - - -
-
-

{{ $title }}

-

{{ $subtitle | markdownify }}

-
- {{- with $image -}} - {{ $title }} - {{- end -}} -
-{{- end -}} diff --git a/layouts/shortcodes/hextra/feature-card.html b/layouts/shortcodes/hextra/feature-card.html new file mode 100644 index 00000000..9ba4e1b7 --- /dev/null +++ b/layouts/shortcodes/hextra/feature-card.html @@ -0,0 +1,28 @@ +{{- $title := .Get "title" -}} +{{- $subtitle := .Get "subtitle" -}} +{{- $class := .Get "class" -}} +{{- $image := .Get "image" -}} +{{- $imageClass := .Get "imageClass" -}} +{{- $style := .Get "style" -}} +{{- $icon := .Get "icon" -}} + + +
+
+

+ {{ with $icon -}} + + {{- partial "utils/icon.html" (dict "name" . "attributes" "height=1.5rem") -}} + + {{ end -}} + {{ $title }} +

+

{{ $subtitle | markdownify }}

+
+ {{- with $image -}} + {{ $title }} + {{- end -}} +
diff --git a/layouts/shortcodes/hextra/feature-grid.html b/layouts/shortcodes/hextra/feature-grid.html new file mode 100644 index 00000000..5782602f --- /dev/null +++ b/layouts/shortcodes/hextra/feature-grid.html @@ -0,0 +1,9 @@ +{{- $style := .Get "style" -}} + + +
+ {{ .Inner }} +
diff --git a/layouts/shortcodes/hextra/hero-badge.html b/layouts/shortcodes/hextra/hero-badge.html new file mode 100644 index 00000000..5bea54c3 --- /dev/null +++ b/layouts/shortcodes/hextra/hero-badge.html @@ -0,0 +1,15 @@ +{{- $link := .Get "link" -}} +{{- $external := hasPrefix $link "http" -}} +{{- $href := cond (hasPrefix $link "/") ($link | relURL) $link -}} +{{- $class := .Get "class" }} +{{- $style := .Get "style" -}} + + + + {{ .Inner | markdownify }} + diff --git a/layouts/shortcodes/hextra/hero-button.html b/layouts/shortcodes/hextra/hero-button.html new file mode 100644 index 00000000..5ec51a34 --- /dev/null +++ b/layouts/shortcodes/hextra/hero-button.html @@ -0,0 +1,15 @@ +{{- $link := .Get "link" -}} +{{- $text := .Get "text" -}} +{{- $style := .Get "style" -}} + +{{- $external := hasPrefix $link "http" -}} +{{- $href := cond (hasPrefix $link "/") ($link | relURL) $link -}} + + + {{- $text -}} + diff --git a/layouts/shortcodes/hextra/hero-headline.html b/layouts/shortcodes/hextra/hero-headline.html new file mode 100644 index 00000000..e0b157ce --- /dev/null +++ b/layouts/shortcodes/hextra/hero-headline.html @@ -0,0 +1,9 @@ +{{- $style := .Get "style" -}} + + +

+ {{ .Inner | markdownify }} +

diff --git a/layouts/shortcodes/hextra/hero-subtitle.html b/layouts/shortcodes/hextra/hero-subtitle.html new file mode 100644 index 00000000..813ef03d --- /dev/null +++ b/layouts/shortcodes/hextra/hero-subtitle.html @@ -0,0 +1,9 @@ +{{- $style := .Get "style" -}} + + +

+ {{ .Inner | markdownify }} +

diff --git a/layouts/shortcodes/icon.html b/layouts/shortcodes/icon.html index 3c9b569d..59740d16 100644 --- a/layouts/shortcodes/icon.html +++ b/layouts/shortcodes/icon.html @@ -1,9 +1,9 @@ {{- $name := .Get "name" | default (.Get 0) -}} -{{- $icon := index site.Data.icons (.Get 0) -}} -{{- $attributes := "height=1em"}} +{{- $icon := index site.Data.icons $name -}} +{{- $attributes := .Get "attributes" | default "height=1em"}} {{- if not $icon -}} - {{ errorf "icon %q not found" (.Get 0) }} + {{ errorf "icon %q not found" $name }} {{- end -}} {{- $icon = replaceRE "