update
This commit is contained in:
30
templates/base.html
Normal file
30
templates/base.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Zola with Tailwind CSS{% endblock %}</title>
|
||||
<link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
|
||||
<script src="{{ get_url(path='js/main.js') }}" defer></script>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="bg-gray-100 min-h-screen flex flex-col min-h-screen">
|
||||
<header>
|
||||
{% include "partials/navigation.html" %}
|
||||
</header>
|
||||
<main>
|
||||
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<div class="px-4 py-6 sm:px-0">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="bg-white shadow mt-auto">
|
||||
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
|
||||
<p class="text-center text-gray-500">
|
||||
© {{ now() | date(format="%Y") }} {{ config.title }}
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
42
templates/index.html
Normal file
42
templates/index.html
Normal file
@@ -0,0 +1,42 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 class="text-2xl font-bold text-gray-900">
|
||||
Welcome to {{ config.title }}
|
||||
</h2>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500">
|
||||
A beautiful site built with Zola and Tailwind CSS.
|
||||
</p>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="prose prose-indigo lg:prose-xl">
|
||||
{% if section.content %}
|
||||
{{ section.content | safe }}
|
||||
{% else %}
|
||||
<p>This is a starter template for your Zola site with Tailwind CSS.</p>
|
||||
<p>Edit the content in <code>content/_index.md</code> to customize this page.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
{% for page in section.pages %}
|
||||
<a href="{{ page.permalink }}" class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 truncate">{{ page.title }}</h3>
|
||||
{% if page.description %}
|
||||
<p class="mt-1 text-sm text-gray-500">{{ page.description }}</p>
|
||||
{% endif %}
|
||||
<div class="mt-4 flex items-center text-sm text-gray-500">
|
||||
<span>{{ page.date | date(format="%B %e, %Y") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
43
templates/page.html
Normal file
43
templates/page.html
Normal file
@@ -0,0 +1,43 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ page.title }} | {{ config.title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<article class="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h1 class="text-3xl font-bold text-gray-900">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
{% if page.date %}
|
||||
<div class="mt-2 flex items-center text-sm text-gray-500">
|
||||
<time datetime="{{ page.date }}">{{ page.date | date(format="%B %e, %Y") }}</time>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="prose prose-indigo lg:prose-xl max-w-none">
|
||||
{{ page.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="mt-8 flex justify-between">
|
||||
{% if page.earlier %}
|
||||
<a href="{{ page.earlier.permalink }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
← {{ page.earlier.title }}
|
||||
</a>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
|
||||
{% if page.later %}
|
||||
<a href="{{ page.later.permalink }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
{{ page.later.title }} →
|
||||
</a>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
51
templates/partials/navigation.html
Normal file
51
templates/partials/navigation.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<nav class="bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="{{ config.base_url }}" class="text-white font-bold text-xl">{{ config.title }}</a>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-10 flex items-baseline space-x-4">
|
||||
<a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Home</a>
|
||||
<a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
<a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
||||
Zola Docs
|
||||
</a>
|
||||
<a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
||||
Tailwind Docs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mr-2 flex md:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!-- Icon when menu is closed -->
|
||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<!-- Icon when menu is open -->
|
||||
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Home</a>
|
||||
<a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
|
||||
<a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Zola Docs</a>
|
||||
<a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Tailwind Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
58
templates/section.html
Normal file
58
templates/section.html
Normal file
@@ -0,0 +1,58 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ section.title }} | {{ config.title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h1 class="text-3xl font-bold text-gray-900">
|
||||
{{ section.title }}
|
||||
</h1>
|
||||
{% if section.description %}
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500">
|
||||
{{ section.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="prose prose-indigo lg:prose-xl">
|
||||
{% if section.content %}
|
||||
{{ section.content | safe }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
{% for page in section.pages %}
|
||||
<a href="{{ page.permalink }}" class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 truncate">{{ page.title }}</h3>
|
||||
{% if page.description %}
|
||||
<p class="mt-1 text-sm text-gray-500">{{ page.description }}</p>
|
||||
{% endif %}
|
||||
<div class="mt-4 flex items-center text-sm text-gray-500">
|
||||
<span>{{ page.date | date(format="%B %e, %Y") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
{% for subsection in section.subsections %}
|
||||
{% set subsection_data = get_section(path=subsection) %}
|
||||
<a href="{{ subsection_data.permalink }}" class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 truncate">{{ subsection_data.title }}</h3>
|
||||
{% if subsection_data.description %}
|
||||
<p class="mt-1 text-sm text-gray-500">{{ subsection_data.description }}</p>
|
||||
{% endif %}
|
||||
<div class="mt-4 flex items-center text-sm text-gray-500">
|
||||
<span>{{ subsection_data.pages | length }} pages</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
31
templates/shortcodes/cta.html
Normal file
31
templates/shortcodes/cta.html
Normal file
@@ -0,0 +1,31 @@
|
||||
{% set title = title | default(value="Call to Action") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set button_text = button_text | default(value="Learn More") %}
|
||||
{% set button_link = button_link | default(value="#") %}
|
||||
{% set bg_color = bg_color | default(value="bg-indigo-100") %}
|
||||
{% set text_color = text_color | default(value="text-indigo-800") %}
|
||||
{% set button_color = button_color | default(value="bg-indigo-600") %}
|
||||
{% set button_text_color = button_text_color | default(value="text-white") %}
|
||||
|
||||
<div class="relative {{ bg_color }} {{ text_color }} rounded-lg shadow-md overflow-hidden my-8">
|
||||
<div class="px-6 py-8 md:p-10 md:flex md:items-center md:justify-between">
|
||||
<div class="md:flex-1">
|
||||
<h3 class="text-2xl font-bold">{{ title }}</h3>
|
||||
{% if description %}
|
||||
<p class="mt-2 text-base">{{ description }}</p>
|
||||
{% endif %}
|
||||
{% if caller %}
|
||||
<div class="mt-4">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if button_text and button_link %}
|
||||
<div class="mt-6 md:mt-0 md:ml-10 md:flex-shrink-0">
|
||||
<a href="{{ button_link }}" class="block w-full md:w-auto rounded-md px-5 py-3 {{ button_color }} {{ button_text_color }} text-base font-medium text-center shadow hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
{{ button_text }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
22
templates/shortcodes/feature_card.html
Normal file
22
templates/shortcodes/feature_card.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{% set title = title | default(value="Feature") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set icon = icon | default(value="") %}
|
||||
{% set bg_color = bg_color | default(value="bg-white") %}
|
||||
{% set hover_color = hover_color | default(value="hover:bg-gray-50") %}
|
||||
|
||||
<div class="relative {{ bg_color }} {{ hover_color }} shadow rounded-lg p-6 transition-all duration-300">
|
||||
{% if icon %}
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
|
||||
<span class="text-xl">{{ icon | safe }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<h3 class="text-lg font-medium text-gray-900">{{ title }}</h3>
|
||||
{% if description %}
|
||||
<p class="mt-2 text-base text-gray-500">{{ description }}</p>
|
||||
{% endif %}
|
||||
{% if caller %}
|
||||
<div class="mt-4">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
35
templates/shortcodes/hero.html
Normal file
35
templates/shortcodes/hero.html
Normal file
@@ -0,0 +1,35 @@
|
||||
{% set title = title | default(value="Welcome") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
{% set bg_color = bg_color | default(value="bg-indigo-600") %}
|
||||
{% set text_color = text_color | default(value="text-white") %}
|
||||
|
||||
<div class="relative {{ bg_color }} {{ text_color }} overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-20">
|
||||
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
|
||||
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
|
||||
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl xl:text-6xl">
|
||||
{{ title }}
|
||||
</h1>
|
||||
{% if subtitle %}
|
||||
<p class="mt-3 text-base sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if button_text and button_link %}
|
||||
<div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
|
||||
<a href="{{ button_link }}" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
{{ button_text }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
|
||||
{% if caller %}
|
||||
{{ caller() }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
46
templates/shortcodes/hero2.html
Normal file
46
templates/shortcodes/hero2.html
Normal file
@@ -0,0 +1,46 @@
|
||||
{% set title = title | default(value="Welcome") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
{% set bg_color = bg_color | default(value="bg-blue-700") %}
|
||||
{% set text_color = text_color | default(value="text-white") %}
|
||||
{% set image = image | default(value="") %}
|
||||
|
||||
<div class="relative {{ bg_color }} {{ text_color }} overflow-hidden">
|
||||
<div class="absolute inset-0 z-0 opacity-20 bg-pattern"></div>
|
||||
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl">
|
||||
{{ title }}
|
||||
</h1>
|
||||
{% if subtitle %}
|
||||
<p class="mt-6 max-w-2xl mx-auto text-xl">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if button_text and button_link %}
|
||||
<div class="mt-10">
|
||||
<a href="{{ button_link }}" class="inline-block px-8 py-3 border border-transparent text-base font-medium rounded-md shadow-sm bg-white text-blue-700 hover:bg-blue-50 sm:px-10">
|
||||
{{ button_text }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if image %}
|
||||
<div class="mt-10 max-w-xl mx-auto">
|
||||
<img src="{{ image }}" alt="Hero image" class="rounded-lg shadow-xl">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if caller %}
|
||||
<div class="mt-8">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bg-pattern {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
21
templates/shortcodes/hero3.html
Normal file
21
templates/shortcodes/hero3.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<div class="fade-in">
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
|
||||
{{ announcement | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-base/7 font-light tracking-wide">{{ subheader }}</p>
|
||||
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance">{{ title }}</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight">{{ subtitle }}</h2>
|
||||
<p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">{{ description }}</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="{{ button1_link }}" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">{{ button1_text }}</a>
|
||||
<a href="{{ button2_link }}" class="text-sm/6 font-semibold hover:text-gray-300">{{ button2_text }} <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user