projects/fipamothemekit
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

updated template to handle file, style fixes

Browse source
This commit is contained in:
are0h 2022-03-20 14:58:27 -07:00
parent fd4ff2ea52
commit a66377e597
7 changed files with 352 additions and 312 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -6,6 +6,7 @@ dist
.DS_Store .DS_Store
*.sublime-project *.sublime-project
*.sublime-workspace *.sublime-workspace
*.code-workspace
assets assets
vendor vendor

165
engine/ThemeEngine.php
View file

@ -7,132 +7,151 @@ class ThemeEngine
public $data = []; public $data = [];
public $loader; public $loader;
public $twig; public $twig;
public function __construct(string $themePath, string $themeAssetPath) public function __construct(string $themePath, string $themeAssetPath)
{ {
$var = []; $var = [];
$this->themePath = $themePath; $this->themePath = $themePath;
$this->themeAssetPath = $themeAssetPath; $this->themeAssetPath = $themeAssetPath;
$path = explode("/", $themeAssetPath); $path = explode('/', $themeAssetPath);
$this->themeFolder = $path[4]; $this->themeFolder = $path[4];
$this->settings = json_decode( $this->settings = json_decode(
file_get_contents("./data/settings.json"), file_get_contents('./data/settings.json'),
true true
); );
$this->posts = json_decode(file_get_contents("./data/posts.json"), true); $this->posts = json_decode(file_get_contents('./data/posts.json'), true);
$this->archives = json_decode( $this->archives = json_decode(
file_get_contents("./data/archives.json"), file_get_contents('./data/archives.json'),
true true
); );
$this->loader = new \Twig\Loader\FilesystemLoader( $this->loader = new \Twig\Loader\FilesystemLoader(
$themePath . "/" . $path[4] $themePath.'/'.$path[4]
); );
$this->twig = new \Twig\Environment($this->loader, []); $this->twig = new \Twig\Environment($this->loader, []);
$this->router($_SERVER["REQUEST_URI"]); $this->router($_SERVER['REQUEST_URI']);
} }
public function router(string $request) public function router(string $request)
{ {
$pageInfo = [ $pageInfo = [
"keywords" => $this->settings["keywords"], 'keywords' => $this->settings['keywords'],
"description" => $this->settings["description"], 'description' => $this->settings['description'],
"image" => $this->themeAssetPath . "/assets/images/global/default-bg.jpg", 'image' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
]; ];
$featureList = explode(",", $this->posts["feature"]); $featureList = explode(',', $this->posts['feature']);
$fileList = explode(",", $this->posts["files"]); $fileList = explode(',', $this->posts['files']);
$images = []; $images = [];
$files = []; $files = [];
foreach ($featureList as $file) { foreach ($featureList as $file) {
$item = trim($file); $item = trim($file);
$ext = pathinfo($item, PATHINFO_EXTENSION); $ext = pathinfo($item, PATHINFO_EXTENSION);
if ($item != null || $item != "") { if ($item != null || $item != '') {
array_push($images, ["file" => $item, "type" => trim($ext)]); array_push($images, ['file' => $item, 'type' => trim($ext)]);
} }
} }
foreach ($fileList as $file) { foreach ($fileList as $file) {
$item = trim($file); $item = trim($file);
$ext = pathinfo($item, PATHINFO_EXTENSION); $ext = pathinfo($item, PATHINFO_EXTENSION);
if ($item != null || $item != "") { if ($item != null || $item != '') {
array_push($files, ["file" => $item, "type" => trim($ext)]); array_push($files, ['file' => $item, 'type' => trim($ext)]);
} }
} }
$menu = $this->settings["menu"]; $menu = $this->settings['menu'];
switch ($request) { switch ($request) {
case "/": case '/':
$recent = $this->posts["recent_posts"]; $recent = $this->posts['recent_posts'];
$featured = $this->posts["featured_posts"]; $featured = $this->posts['featured_posts'];
$template = "index.twig"; $template = 'index.twig';
$content = $this->posts["index-content"]; $content = $this->posts['index-content'];
$pageOptions = [ $pageOptions = [
"debug" => true, //for theme kit 'debug' => true, // for theme kit
"theme" => $this->themeFolder, //for theme kit 'theme' => $this->themeFolder, // for theme kit
"title" => "This is Fipamo", 'title' => 'This is Fipamo',
"dynamicRender" => $this->settings["dynamicRender"], 'dynamicRender' => $this->settings['dynamicRender'],
"background" => 'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
$this->themeAssetPath . "/assets/images/global/default-bg.jpg", 'recent' => $recent,
"recent" => $recent, 'featured' => $featured,
"featured" => $featured, 'info' => $pageInfo,
"info" => $pageInfo, 'menu' => $menu,
"menu" => $menu, 'content' => $content,
"content" => $content, 'media' => $images,
'files' => $files,
]; ];
break; break;
case "/page": case '/page':
$content = $this->posts["content"]; $content = $this->posts['content'];
$meta = $this->posts["meta"]; $meta = $this->posts['meta'];
$template = $request . ".twig"; $template = $request.'.twig';
$pageOptions = [ $pageOptions = [
"debug" => true, //for theme kit 'debug' => true, // for theme kit
"theme" => $this->themeFolder, //for theme kit 'theme' => $this->themeFolder, // for theme kit
"title" => "Page Title", 'title' => 'Page Title',
"dynamicRender" => $this->settings["dynamicRender"], 'dynamicRender' => $this->settings['dynamicRender'],
"background" => 'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
$this->themeAssetPath . "/assets/images/global/default-bg.jpg", 'content' => $content,
"content" => $content, 'meta' => $meta,
"meta" => $meta, 'info' => $pageInfo,
"info" => $pageInfo, 'menu' => $menu,
"menu" => $menu, 'media' => $images,
"media" => $images, 'files' => $files,
"files" => $files,
]; ];
break; break;
case "/tags": case '/tags':
$tags = $this->settings["tag_list"]; $tags = $this->settings['tag_list'];
$template = $this->themeFolder . "/tags.twig"; $template = 'tags.twig';
$pageOptions = [ $pageOptions = [
"debug" => true, //for theme kit 'debug' => true, // for theme kit
"theme" => $this->themeFolder, //for theme kit 'theme' => $this->themeFolder, // for theme kit
"title" => "Pages Tagged as Tag", 'title' => 'Pages Tagged as Tag',
"dynamicRender" => $this->settings["dynamicRender"], 'dynamicRender' => $this->settings['dynamicRender'],
"background" => 'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
$this->themeAssetPath . "/assets/images/global/default-bg.jpg", 'tag_list' => $tags,
"tag_list" => $tags, 'info' => $pageInfo,
"info" => $pageInfo, 'menu' => $menu,
"menu" => $menu, 'media' => $images,
'files' => $files,
]; ];
break; break;
case "/archive": case '/archive':
$archive = $this->archives; $archive = $this->archives;
$template = $this->themeFolder . "/archive.twig"; $template = 'archive.twig';
$pageOptions = [ $pageOptions = [
"debug" => true, //for theme kit 'debug' => true, // for theme kit
"theme" => $this->themeFolder, //for theme kit 'theme' => $this->themeFolder, // for theme kit
"title" => "Archive", 'title' => 'Archive',
"dynamicRender" => $this->settings["dynamicRender"], 'dynamicRender' => $this->settings['dynamicRender'],
"background" => 'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
$this->themeAssetPath . "/assets/images/global/default-bg.jpg", 'archives' => $archive['archives'],
"archives" => $archive, 'info' => $pageInfo,
"info" => $pageInfo, 'menu' => $menu,
"menu" => $menu, 'media' => $images,
'files' => $files,
]; ];
break; break;
default: default:
http_response_code(404); set_error_handler(function ($errno, $errstr, $errfile, $errline) {
require __DIR__ . "/views/404.php"; // throw new \ErrorException($errstr, $errno, 0, $errfile, $errline);
$error = $errstr;
});
$template = 'error.twig';
$pageOptions = [
'debug' => true, // for theme kit
'theme' => $this->themeFolder, // for theme kit
'title' => 'Uh oh',
'dynamicRender' => $this->settings['dynamicRender'],
'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
'info' => $pageInfo,
'content' => "Uh Oh, so there's a problem.",
'menu' => $menu,
'media' => $images,
'files' => $files,
];
break; break;
} }

29
src/themes/theme-fipamo-default/fipamo-default/page.twig
View file

@ -14,12 +14,36 @@
<div class="page"> <div class="page">
<p>{{content | raw}}</p> <p>{{content | raw}}</p>
<div> <div>
<div class="page_files">
<div class="page_doc">
<strong>Files</strong><br/>
{% for doc in files %}
{% if doc.type != "mp3" %}
{% set path = doc.file|split('/') %}
<a href="{{doc.file}}">{{path[6]}}</a>
{% endif %}
{% endfor %}
</div>
<div class="page_sounds">
<strong>Sounds</strong><br/>
{% for doc in files %}
{% if doc.type == "mp3" %}
<audio controls>
<source src="{{doc.file}}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
{% endif %}
{% endfor %}
</div>
</div>
<br/>
{{meta['who']}} dropped this {{ meta['when'] }}<br /> {{meta['who']}} dropped this {{ meta['when'] }}<br />
<strong>tags: </strong> <strong>tags: </strong>
{% for tag in meta['tags'] %} {% for tag in meta['tags'] %}
{% if dynamicRender is defined %} {% if dynamicRender is defined %}
{% if dynamicRender == 'false' %} {% if dynamicRender == 'true' %}
<a href="{{ "/tags/"~tag.slug }}">{{ tag.label }}</a> <a href="{{ "/tags/"~tag.slug }}">{{ tag.label }}</a>
{% else %} {% else %}
<a href="{{ "/tags/"~tag.slug~".html" }}">{{ tag.label }}</a> <a href="{{ "/tags/"~tag.slug~".html" }}">{{ tag.label }}</a>
@ -28,6 +52,7 @@
<a href="{{ "/tags/"~tag.slug~".html" }}">{{ tag.label }}</a> <a href="{{ "/tags/"~tag.slug~".html" }}">{{ tag.label }}</a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</article> </article>

6
src/themes/theme-fipamo-default/styles/_forms.sass
View file

@ -2,7 +2,7 @@ form
display: inline-block display: inline-block
a a
color: $primary color: $primary
p p
background: $tertiary background: $tertiary
color: $primary color: $primary
padding: 5px padding: 5px
@ -36,7 +36,7 @@ button, input[type=submit]
cursor: pointer cursor: pointer
border: 0 border: 0
padding: 10px 0 5px 0 padding: 10px 0 5px 0
@include object_transitions(.3s) transition: all 0.3s linear
select select
font: 14px $baseType font: 14px $baseType
@ -63,5 +63,3 @@ select
:-ms-input-placeholder :-ms-input-placeholder
font: 25px $baseType font: 25px $baseType
color: $white color: $white

9
src/themes/theme-fipamo-default/styles/_mixins.sass
View file

@ -1,16 +1,9 @@
@mixin text-drop-shadow($rgb_value, $opacity, $offsetX, $offsetY, $blur) @mixin text-drop-shadow($rgb_value, $opacity, $offsetX, $offsetY, $blur)
text-shadow: $offsetX $offsetY $blur rgba($rgb_value, $opacity) text-shadow: $offsetX $offsetY $blur rgba($rgb_value, $opacity)
@mixin object-transitions($rate)
-moz-transition: all $rate linear
-webkit-transition: all $rate linear
-o-transition: all $rate linear
transition: all $rate linear
@mixin background-opacity($rgb_value, $opacity) @mixin background-opacity($rgb_value, $opacity)
background: rgba($rgb_value, $opacity) background: rgba($rgb_value, $opacity)
@mixin custom-header($weight, $size, $line_height, $color) @mixin custom-header($weight, $size, $line_height, $color)
font: $weight $size/$line_height $bodyTypeSans font: $weight $size/$line_height $bodyTypeSans
color: $color color: $color

449
src/themes/theme-fipamo-default/styles/_structure.sass
View file

@ -6,240 +6,245 @@ html
overflow: hidden overflow: hidden
font: 400 1.2em/1.4em $baseType font: 400 1.2em/1.4em $baseType
body body
background: $white background: $white
margin: 0 margin: 0
padding: 0 padding: 0
perspective: 1px perspective: 1px
transform-style: preserve-3d transform-style: preserve-3d
height: 100% height: 100%
width: 100%
overflow-y: scroll
overflow-x: hidden
a
color: $primary
text-decoration: none
border-bottom: 1px solid $highlight
//@include object-transitions(.2s)
&:hover
border-bottom: 1px solid $secondary
code
background: $black
color: $highlight
border-radius: 3px
padding: 3px
pre
background: $black
color: $highlight
border-radius: 3px
padding: 3px
code
color: $secondary
background: none
svg.icons
width: 25px
fill: $white
header
background: $primary
height: 90%
width: 100%
border-top: $white 3px solid
#media
width: 100% width: 100%
height: 90% overflow-y: scroll
position: absolute overflow-x: hidden
.slide
@include object-transitions(.7s)
width: 100%
height: 100%
position: absolute
.hide
opacity: 0
.show
opacity: 1
video
width: 100%
height: 100%
object-fit: cover
nav
width: 97%
margin: 10px auto
z-index: 1000
position: relative
color: $primary
.left,.right
width: 50%
display: inline-block
vertical-align: top
.left
a.logo-link
border-bottom: none
margin: 0 0 20px 0
display: block
#logo
width: 50px
border-bottom: none
.right
text-align: right
a.menu-link
background: $secondary
margin-bottom: 4px
padding: 3px
border-radius: 2px
display: inline-block
font-size: 0.8em
border-bottom: none
&:hover
background: $secondary
a
color: $primary
text-decoration: none
border-bottom: 1px solid $highlight
//@include object-transitions(.2s)
&:hover
border-bottom: 1px solid $secondary
.container code
z-index: 2 background: $black
background: $white color: $highlight
line-height: 30px border-radius: 3px
font-weight: lighter padding: 3px
width: 100%
//padding 40px pre
color: $black background: $black
article color: $highlight
position: relative border-radius: 3px
width: 80% padding: 3px
height: 80% code
max-width: 840px color: $secondary
//min-height 500px background: none
background: $white
vertical-align: top svg.icons
color: $black width: 25px
margin: 0 auto fill: $white
//.index, .page
//margin 30px header
.index, .page background: $primary
padding: 0 0 15px 0 height: 90%
img width: 100%
display: block border-top: $white 3px solid
#media
width: 100% width: 100%
h1 height: 90%
position: absolute
.slide
transition: all 0.7s linear
width: 100%
height: 100%
position: absolute
.hide
opacity: 0
.show
opacity: 1
video
width: 100%
height: 100%
object-fit: cover
nav
width: 97%
margin: 10px auto
z-index: 1000
position: relative
color: $primary color: $primary
p .left,.right
font: 300 1.25em/1.6em $baseType width: 50%
//meta datea for page
.meta
font: 500 0.8em/1.3em $baseType
padding: 5px 0 0 0
border-top: 1px solid $primary
background: $white
a
font-size: 0.8em
font-weight: 400
//archive styling
.archive-item
padding: 15px 0 20px 0
span.year
font-size: 1.5em
font-weight: 500
padding: 5px
display: block
color: $primary
.archive-month
display: inline-block display: inline-block
vertical-align: top vertical-align: top
width: 30% .left
padding: 5px a.logo-link
span.month border-bottom: none
color: $secondary margin: 0 0 20px 0
font-size: 1.5em
font-weight: 300
padding: 5px
display: block display: block
section #logo
padding: 0 0 20px 0 width: 50px
background: $primary border-bottom: none
a .right
color: $white text-align: right
.index-lists, .page-title a.menu-link
max-width: 840px background: $secondary
span margin-bottom: 4px
font-size: 2em padding: 3px
color: $secondary border-radius: 2px
font-weight: 400 display: inline-block
width: 80% font-size: 0.8em
margin: 0 auto border-bottom: none
padding: 20px 0 0 0 &:hover
.recent, .featured background: $secondary
display: inline-block
width: 50% .container
z-index: 2
background: $white
line-height: 30px
font-weight: lighter
width: 100%
//padding 40px
color: $black
article
position: relative
width: 80%
height: 80%
max-width: 840px
//min-height 500px
background: $white
vertical-align: top vertical-align: top
label color: $black
background: $black margin: 0 auto
color: $white //.index, .page
font-size: 1.5em //margin 30px
line-height: 1.3 .index, .page
padding: 0 0 15px 0
img
display: block
width: 100%
h1, h2
color: $primary
p
font: 300 1.25em/1.6em $baseType
//meta datea for page
.page_files
.page_doc
a
background: $black
border-radius: 3px
color: $white
padding: 3px
margin: 0 5px 0 0
.meta
font: 500 0.8em/1.3em $baseType
padding: 5px 0 0 0
border-top: 1px solid $primary
background: $white
a
font-size: 0.8em
font-weight: 400
//archive styling
.archive-item
padding: 15px 0 20px 0
span.year
font-size: 1.5em
font-weight: 500
padding: 5px
display: block
color: $primary
.archive-month
display: inline-block
vertical-align: top
width: 30%
padding: 5px
span.month
color: $secondary
font-size: 1.5em
font-weight: 300
padding: 5px
display: block
section
padding: 0 0 20px 0
background: $primary
a
color: $white
.index-lists, .page-title
max-width: 840px
width: 80%
margin: 0 auto
padding: 20px 0 0 0
span
font-size: 2em
footer color: $secondary
background: $white font-weight: 400
padding: 10px width: 80%
color: $primary margin: 0 auto
font-size: 0.8em padding: 20px 0 0 0
font-weight: 600 .recent, .featured
height: 100px display: inline-block
.inner width: 50%
margin: 20px auto vertical-align: top
width: 80% label
max-width: 840px background: $black
a color: $white
color: $secondary font-size: 1.5em
line-height: 1.3
// RESPONSIVE footer
background: $white
padding: 10px
color: $primary
font-size: 0.8em
font-weight: 600
height: 100px
.inner
margin: 20px auto
width: 80%
max-width: 840px
a
color: $secondary
@media only screen and (max-width: 640px) // RESPONSIVE
header
nav
width: 98%
span
font-size: 2.5em
.container
article
.index, .page
.archive-item
.archive-month
width: 45%
@media only screen and (max-width: 480px) @media only screen and (max-width: 640px)
header header
nav nav
width: 96% width: 98%
.container span
article font-size: 2.5em
.index, .page .container
margin: 0 article
p .index, .page
font: 300 1em/1.6em $baseType .archive-item
section .archive-month
.index-lists width: 45%
.recent, .featured
width: 100% !important
@media only screen and (max-width: 480px)
header
nav
width: 96%
.container
article
.index, .page
margin: 0
p
font: 300 1em/1.6em $baseType
section
.index-lists
.recent, .featured
width: 100% !important
@media only screen and (max-width: 375px) @media only screen and (max-width: 375px)
header header
nav nav
width: 95% width: 95%
.container .container
article article
.index, .page .index, .page
margin: 0 margin: 0
p p
font: 300 0.9em/1.7em $baseType font: 300 0.9em/1.7em $baseType
.archive-item .archive-item
.archive-month .archive-month
width: 95% width: 95%

5
src/themes/theme-fipamo-default/styles/_typography.sass
View file

@ -4,7 +4,7 @@ $monoType: "Lucida Console", Monaco, monospace
h1, h2, h3 h1, h2, h3
color: $white color: $white
h1 h1
font-size: 2em font-size: 2em
font-weight: 400 font-weight: 400
@ -12,7 +12,6 @@ h2
font-size: 1.75em font-size: 1.75em
font-weight: 400 font-weight: 400
h3 h3
font-size: 1.5em font-size: 1.5em
font-weight: 300 font-weight: 300