-
Notifications
You must be signed in to change notification settings - Fork 161
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
11 changed files
with
181 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,118 +1,10 @@ | ||
| {{ define "main" }} | ||
| <div class='mx-auto flex {{ partial "utils/page-width" . }}'> | ||
| {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }} | ||
| <div class="w-full break-words flex flex-col min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-start pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]"> | ||
| <section class="flex max-w-[90rem] flex-col items-start gap-2 px-6 sm:px-4 pt-8 md:pt-12"> | ||
| <a | ||
| href="https://github.com/imfing/hextra" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| class="inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600" | ||
| > | ||
| <div class="w-2 h-2 rounded-full bg-primary-400"></div> | ||
| <span>Free, open source</span> | ||
| {{- partial "utils/icon" (dict "name" "arrow-circle-right" "attributes" "height=14") -}} | ||
| </a> | ||
| <h1 | ||
| class="text-4xl font-bold leading-tight tracking-tighter md:text-5xl mt-6 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400" | ||
| > | ||
| Build modern websites <br class="sm:block hidden" /> | ||
| with Markdown and Hugo | ||
| </h1> | ||
| <p class="mt-4 text-xl text-gray-600 dark:text-gray-400 sm:text-xl"> | ||
| Fast, batteries-included Hugo theme <br class="sm:block hidden" /> | ||
| for creating beautiful static websites. | ||
| </p> | ||
| <div class="mt-8"> | ||
| {{- $docsURL := "docs" | relURL -}} | ||
| <a | ||
| href="{{ $docsURL }}" | ||
| class="font-medium cursor-pointer px-6 py-3 text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 rounded-full text-center mr-2 mb-2 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" | ||
| > | ||
| Get Started | ||
| </a> | ||
| </div> | ||
| </section> | ||
| <section class="flex max-w-[90rem] flex-col items-start gap-2 px-6 sm:px-4 pt-8 pb-8"> | ||
| <h2 class="mt-12 text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-gray-800 to-gray-600 dark:from-gray-100 dark:to-gray-400">What's in Hextra?</h2> | ||
| <div class="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full"> | ||
| {{ 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..." | ||
| ) | ||
| }} | ||
| </div> | ||
| </section> | ||
| <div class="w-full break-words min-h-[calc(100vh-var(--navbar-height))] min-w-0 pb-8 pt-8 md:pt-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-left),1.5rem)]"> | ||
| <div class="flex flex-col items-start"> | ||
| {{ .Content }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {{ end }} | ||
|
|
||
| {{- define "hextra-feature-card" -}} | ||
| {{- $title := .title -}} | ||
| {{- $subtitle := .subtitle -}} | ||
| {{- $class := .class -}} | ||
| {{- $image := .image -}} | ||
| {{- $imageClass := .imageClass -}} | ||
| {{- $style := .style -}} | ||
|
|
||
|
|
||
| <div | ||
| {{ with $style }}style="{{ . | safeCSS }}"{{ end }} | ||
| class="{{ $class }} relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient" | ||
| > | ||
| <div class="relative w-full p-6"> | ||
| <h3 class="text-2xl font-medium leading-6 mb-2">{{ $title }}</h3> | ||
| <p class="text-gray-500 text-sm leading-6">{{ $subtitle | markdownify }}</p> | ||
| </div> | ||
| {{- with $image -}} | ||
| <img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" /> | ||
| {{- end -}} | ||
| </div> | ||
| {{- end -}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" -}} | ||
|
|
||
|
|
||
| <div | ||
| {{ with $style }}style="{{ . | safeCSS }}"{{ end }} | ||
| class="{{ $class }} hextra-feature-card relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient" | ||
| > | ||
| <div class="relative w-full p-6"> | ||
| <h3 class="text-2xl font-medium leading-6 mb-2 flex items-center"> | ||
| {{ with $icon -}} | ||
| <span class="pr-2"> | ||
| {{- partial "utils/icon.html" (dict "name" . "attributes" "height=1.5rem") -}} | ||
| </span> | ||
| {{ end -}} | ||
| <span>{{ $title }}</span> | ||
| </h3> | ||
| <p class="text-gray-500 dark:text-gray-400 text-sm leading-6">{{ $subtitle | markdownify }}</p> | ||
| </div> | ||
| {{- with $image -}} | ||
| <img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" /> | ||
| {{- end -}} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| {{- $style := .Get "style" -}} | ||
|
|
||
|
|
||
| <div | ||
| class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full" | ||
| {{ with $style }}style="{{ . | safeCSS }}"{{ end }} | ||
| > | ||
| {{ .Inner }} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| {{- $link := .Get "link" -}} | ||
| {{- $external := hasPrefix $link "http" -}} | ||
| {{- $href := cond (hasPrefix $link "/") ($link | relURL) $link -}} | ||
| {{- $class := .Get "class" }} | ||
| {{- $style := .Get "style" -}} | ||
|
|
||
|
|
||
| <a | ||
| href="{{ $href }}" | ||
| class="{{ $class }} inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600 transition-all ease-in duration-200" | ||
| {{ with $style }}style="{{ . | safeCSS }}"{{ end }} | ||
| {{ if $external }}target="_blank" rel="noreferrer"{{ end -}} | ||
| > | ||
| {{ .Inner | markdownify }} | ||
| </a> |
Oops, something went wrong.