Skip to content

Commit

Permalink
Pico 3.0 Compatibility and Improvements
Browse files Browse the repository at this point in the history 
- Added compatibility for the upcoming Pico 3.0, as well as various other improvements.
- "Single" template is no longer required.  Layout switches automatically when not on the `index` page.
  - This will unfortunately mean existing users will need to remove the `Template:` property from their metadata, but it simplifies the user experience going forward.
- Reflowed file indentation and did a general clean up of code.
- New `pico-theme.yml` for Pico 2.0+, defines metadata properties and prevents Pico from relying on PicoDeprecated when using theme.
- Page images only displayed if they are defined. (Prevents broken image on non-modal 404 page).
- Refined modal 404 page to match regular pages better.
- Removed HTML from sample `intro.md`.
- Probably other changes and refinements I've forgotten to list.
  • Loading branch information
@mayamcdougall
mayamcdougall committed Feb 25, 2022
1 parent 7b61352 commit e505161
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 150 deletions.
10 changes: 5 additions & 5 deletions content-sample/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ Tagline: Best Flat File CMS
Description: We're expert to create beautiful design & smart technology
Form: https://api.formbucket.com/f/buk_JUzic5YM0OlLvGRe1viZoE5O
Social:
linkedin : https://tn.linkedin.com/in/MohamedSafouanBesrour
bitcoin : https://tipybit.com/besrour
github : https://github.com/BesrourMS
instagram: https://www.instagram.com/besrourms
---
linkedin: https://tn.linkedin.com/in/MohamedSafouanBesrour
bitcoin: https://tipybit.com/besrour
github: https://github.com/BesrourMS
instagram: https://www.instagram.com/besrourms
---
7 changes: 4 additions & 3 deletions content-sample/intro.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
Title: Intro
Image: https://source.unsplash.com/random/960x320
Template: single
Nav: 1
---
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my <a href="#work">awesome work</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.</p>

Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my [awesome work](#work).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.
254 changes: 148 additions & 106 deletions dimension/index.twig
View file
Original file line number Diff line number Diff line change
@@ -1,106 +1,148 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>{{ site_title }}{% if meta.tagline %} - {{ meta.tagline|striptags }}{% endif %}</title>
{% if meta.description %}
<meta name="description" content="{{ meta.description|striptags }}" />
{% endif %}
{% if current_page %}
<link rel="canonical" href="{{ current_page.url }}" />
{% endif %}
<link rel='dns-prefetch' href='//maxcdn.bootstrapcdn.com' />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,600;1,300;1,600&display=swap" >
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="{{ theme_url }}/assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="{{ theme_url }}/assets/css/ie9.css" /><![endif]-->
<noscript><link rel="stylesheet" href="{{ theme_url }}/assets/css/noscript.css" /></noscript>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name" : "{{ site_title }}",
"url" : "{{ base_url }} "
}
</script>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="logo">
<span class="icon fa-{{ meta.icon }}"></span>
</div>
<div class="content">
<div class="inner">
<h1>{{ site_title }}</h1>
<p>{{ meta.description }}</p>
</div>
</div>
<nav>
<ul>
{% for page in pages|sort_by([ 'meta', 'nav' ]) if page.meta.template == "single" and not page.hidden %}
<li><a href="#{{ page.id | replace({'/':'-'}) }}">{{ page.title }}</a></li>
{% endfor %}
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<div id="main">
{% for page in pages|sort_by([ 'meta', 'nav' ]) if page.meta.template == "single" and not page.hidden %}
<article id="{{ page.id | replace({'/':'-'}) }}">
<h2 class="major">{{ page.title }}</h2>
<span class="image main"><img src="{{ page.meta.image | url }}" alt="{{ page.title }}" /></span>
<p>{{ page.id|content }}</p>
</article>
{% endfor %}
<!-- Contact -->
<article id="contact">
<h2 class="major">Contact</h2>
<form method="post" {% if meta.form %} action="{{ meta.form|url }}" {% endif %} >
<div class="field half first">
<label for="name">Name</label>
<input type="text" name="name" id="name" required />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="email" name="email" id="email" required />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4" required></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="special" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
<ul class="icons">
{% for icon, link in meta.social %}
<li><a href="{{ link|url }}" class="icon fa-{{ icon }}"><span class="label">{{ icon }}</span></a></li>
{% endfor %}
</ul>
</article>
<article id="404">
<h2>Sorry page not found</h2>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<p class="copyright">&copy; {{ "now"|date("Y") }} {{ site_title }}. Design: <a href="https://html5up.net">HTML5 UP</a> | Powered By: <a href="https://besrourms.github.io" target="_blank">Mohamed Safouan Besrour</a></p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="{{ theme_url }}/assets/js/jquery.min.js"></script>
<script src="{{ theme_url }}/assets/js/skel.min.js"></script>
<script defer src="{{ theme_url }}/assets/js/util.min.js"></script>
<script defer src="{{ theme_url }}/assets/js/main.js"></script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
{% if current_page.id == "index" %}
{% set is_front_page = true %}
{% endif %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>
{% if is_front_page %}
{{ site_title }}{% if meta.tagline %} - {{ meta.tagline|striptags }}{% endif %}
{% else %}
{{ meta.title }} | {{ site_title }}
{% endif %}
</title>
{% if meta.description %}
<meta name="description" content="{{ meta.description|striptags }}">
{% endif %}
{% if current_page %}
<link rel="canonical" href="{{ current_page.url }}">
{% endif %}
<link rel='dns-prefetch' href='//maxcdn.bootstrapcdn.com'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,600;1,300;1,600&display=swap">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ theme_url }}/assets/css/main.css">
<!--[if lte IE 9]><link rel="stylesheet" href="{{ theme_url }}/assets/css/ie9.css"><![endif]-->
<noscript><link rel="stylesheet" href="{{ theme_url }}/assets/css/noscript.css"></noscript>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "{{ site_title }}",
"url": "{{ base_url }} "
}
</script>
</head>
<body>

<!-- Wrapper -->
<div id="wrapper">
{% if is_front_page %}
<!-- Header -->
<header id="header">
<div class="logo">
<span class="icon fa-{{ meta.icon }}"></span>
</div>
<div class="content">
<div class="inner">
<h1>{{ site_title }}</h1>
<p>{{ meta.description }}</p>
</div>
</div>
<nav>
<ul>
{% for page in pages()|sort_by([ 'meta', 'nav' ]) %}
{% if not page.hidden %}
<li><a href="#{{ page.id|replace({'/':'-'}) }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- Main -->
<div id="main">
{% for page in pages()|sort_by([ 'meta', 'nav' ]) %}
{% if not page.hidden %}
<article id="{{ page.id|replace({'/':'-'}) }}">
<h2 class="major">{{ page.title }}</h2>
{% if page.meta.image %}
<span class="image main">
<img src="{{ page.meta.image|url }}" alt="{{ page.title }}">
</span>
{% endif %}
{{ page.id|content }}
</article>
{% endif %}
{% endfor %}

<!-- Contact -->
<article id="contact">
<h2 class="major">Contact</h2>
<form method="post" {% if meta.form %}action="{{ meta.form|url }}"{% endif %}>
<div class="field half first">
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" required>
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4" required></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="special"></li>
<li><input type="reset" value="Reset"></li>
</ul>
</form>
<ul class="icons">
{% for icon, link in meta.social %}
<li><a href="{{ link|url }}" class="icon fa-{{ icon }}"><span class="label">{{ icon }}</span></a></li>
{% endfor %}
</ul>
</article>
<!-- Modal 404 Content -->
<article id="404">
<h2 class="major">Error 404</h2>
<p>Sorry, that page wasn't found.</p>
</article>
</div>
{% else %}
<!-- Page Content -->
<article>
<h2 class="major">{{ meta.title }}</h2>
{% if meta.image %}
<span class="image main">
<img src="{{ meta.image|url }}" alt="{{ meta.title }}">
</span>
{% endif %}
{{ content }}
</article>
{% endif %}

<!-- Footer -->
<footer id="footer">
<p class="copyright">&copy; {{ "now"|date("Y") }} {{ site_title }}. Design: <a href="https://html5up.net">HTML5 UP</a> | Powered By: <a href="https://besrourms.github.io" target="_blank">Mohamed Safouan Besrour</a></p>
</footer>

</div>

<!-- BG -->
<div id="bg"></div>

<!-- Scripts -->
<script src="{{ theme_url }}/assets/js/jquery.min.js"></script>
<script src="{{ theme_url }}/assets/js/skel.min.js"></script>
<script defer src="{{ theme_url }}/assets/js/util.min.js"></script>
{% if is_front_page %}
<script defer src="{{ theme_url }}/assets/js/main.js"></script>
{% endif %}

</body>
</html>
14 changes: 14 additions & 0 deletions dimension/pico-theme.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
api_version: 3 # Use Pico's latest API version for themes

meta: # Register meta headers used by this theme
Icon: icon
Tagline: tagline
Image: image
Social: social
Nav: nav
Form: form

twig_config: # Twig template engine config
autoescape: html # Let Twig escape variables by default
strict_variables: false # If set to true, Twig will bail out when unset variables are being used
charset: utf-8 # The charset used by Twig templates
36 changes: 0 additions & 36 deletions dimension/single.twig
View file

This file was deleted.

0 comments on commit e505161

Please sign in to comment.