From a66377e5974d8dec4210d81f02e22e4cfbbae234 Mon Sep 17 00:00:00 2001 From: are0h Date: Sun, 20 Mar 2022 14:58:27 -0700 Subject: [PATCH] updated template to handle file, style fixes --- .gitignore | 1 + engine/ThemeEngine.php | 165 ++++--- .../fipamo-default/page.twig | 29 +- .../theme-fipamo-default/styles/_forms.sass | 6 +- .../theme-fipamo-default/styles/_mixins.sass | 9 +- .../styles/_structure.sass | 449 +++++++++--------- .../styles/_typography.sass | 5 +- 7 files changed, 352 insertions(+), 312 deletions(-) diff --git a/.gitignore b/.gitignore index 07ef72e..652af52 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ dist .DS_Store *.sublime-project *.sublime-workspace +*.code-workspace assets vendor diff --git a/engine/ThemeEngine.php b/engine/ThemeEngine.php index 08d7d5b..93809f1 100644 --- a/engine/ThemeEngine.php +++ b/engine/ThemeEngine.php @@ -7,132 +7,151 @@ class ThemeEngine public $data = []; public $loader; public $twig; + public function __construct(string $themePath, string $themeAssetPath) { $var = []; $this->themePath = $themePath; $this->themeAssetPath = $themeAssetPath; - $path = explode("/", $themeAssetPath); + $path = explode('/', $themeAssetPath); $this->themeFolder = $path[4]; $this->settings = json_decode( - file_get_contents("./data/settings.json"), + file_get_contents('./data/settings.json'), 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( - file_get_contents("./data/archives.json"), + file_get_contents('./data/archives.json'), true ); $this->loader = new \Twig\Loader\FilesystemLoader( - $themePath . "/" . $path[4] + $themePath.'/'.$path[4] ); $this->twig = new \Twig\Environment($this->loader, []); - $this->router($_SERVER["REQUEST_URI"]); + $this->router($_SERVER['REQUEST_URI']); } public function router(string $request) { $pageInfo = [ - "keywords" => $this->settings["keywords"], - "description" => $this->settings["description"], - "image" => $this->themeAssetPath . "/assets/images/global/default-bg.jpg", + 'keywords' => $this->settings['keywords'], + 'description' => $this->settings['description'], + 'image' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg', ]; - $featureList = explode(",", $this->posts["feature"]); - $fileList = explode(",", $this->posts["files"]); + $featureList = explode(',', $this->posts['feature']); + $fileList = explode(',', $this->posts['files']); $images = []; $files = []; foreach ($featureList as $file) { $item = trim($file); $ext = pathinfo($item, PATHINFO_EXTENSION); - if ($item != null || $item != "") { - array_push($images, ["file" => $item, "type" => trim($ext)]); + if ($item != null || $item != '') { + array_push($images, ['file' => $item, 'type' => trim($ext)]); } } foreach ($fileList as $file) { $item = trim($file); $ext = pathinfo($item, PATHINFO_EXTENSION); - if ($item != null || $item != "") { - array_push($files, ["file" => $item, "type" => trim($ext)]); + if ($item != null || $item != '') { + array_push($files, ['file' => $item, 'type' => trim($ext)]); } } - $menu = $this->settings["menu"]; + $menu = $this->settings['menu']; switch ($request) { - case "/": - $recent = $this->posts["recent_posts"]; - $featured = $this->posts["featured_posts"]; - $template = "index.twig"; - $content = $this->posts["index-content"]; + case '/': + $recent = $this->posts['recent_posts']; + $featured = $this->posts['featured_posts']; + $template = 'index.twig'; + $content = $this->posts['index-content']; $pageOptions = [ - "debug" => true, //for theme kit - "theme" => $this->themeFolder, //for theme kit - "title" => "This is Fipamo", - "dynamicRender" => $this->settings["dynamicRender"], - "background" => - $this->themeAssetPath . "/assets/images/global/default-bg.jpg", - "recent" => $recent, - "featured" => $featured, - "info" => $pageInfo, - "menu" => $menu, - "content" => $content, + 'debug' => true, // for theme kit + 'theme' => $this->themeFolder, // for theme kit + 'title' => 'This is Fipamo', + 'dynamicRender' => $this->settings['dynamicRender'], + 'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg', + 'recent' => $recent, + 'featured' => $featured, + 'info' => $pageInfo, + 'menu' => $menu, + 'content' => $content, + 'media' => $images, + 'files' => $files, ]; break; - case "/page": - $content = $this->posts["content"]; - $meta = $this->posts["meta"]; - $template = $request . ".twig"; + case '/page': + $content = $this->posts['content']; + $meta = $this->posts['meta']; + $template = $request.'.twig'; $pageOptions = [ - "debug" => true, //for theme kit - "theme" => $this->themeFolder, //for theme kit - "title" => "Page Title", - "dynamicRender" => $this->settings["dynamicRender"], - "background" => - $this->themeAssetPath . "/assets/images/global/default-bg.jpg", - "content" => $content, - "meta" => $meta, - "info" => $pageInfo, - "menu" => $menu, - "media" => $images, - "files" => $files, + 'debug' => true, // for theme kit + 'theme' => $this->themeFolder, // for theme kit + 'title' => 'Page Title', + 'dynamicRender' => $this->settings['dynamicRender'], + 'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg', + 'content' => $content, + 'meta' => $meta, + 'info' => $pageInfo, + 'menu' => $menu, + 'media' => $images, + 'files' => $files, ]; break; - case "/tags": - $tags = $this->settings["tag_list"]; - $template = $this->themeFolder . "/tags.twig"; + case '/tags': + $tags = $this->settings['tag_list']; + $template = 'tags.twig'; $pageOptions = [ - "debug" => true, //for theme kit - "theme" => $this->themeFolder, //for theme kit - "title" => "Pages Tagged as Tag", - "dynamicRender" => $this->settings["dynamicRender"], - "background" => - $this->themeAssetPath . "/assets/images/global/default-bg.jpg", - "tag_list" => $tags, - "info" => $pageInfo, - "menu" => $menu, + 'debug' => true, // for theme kit + 'theme' => $this->themeFolder, // for theme kit + 'title' => 'Pages Tagged as Tag', + 'dynamicRender' => $this->settings['dynamicRender'], + 'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg', + 'tag_list' => $tags, + 'info' => $pageInfo, + 'menu' => $menu, + 'media' => $images, + 'files' => $files, ]; break; - case "/archive": + case '/archive': $archive = $this->archives; - $template = $this->themeFolder . "/archive.twig"; + $template = 'archive.twig'; $pageOptions = [ - "debug" => true, //for theme kit - "theme" => $this->themeFolder, //for theme kit - "title" => "Archive", - "dynamicRender" => $this->settings["dynamicRender"], - "background" => - $this->themeAssetPath . "/assets/images/global/default-bg.jpg", - "archives" => $archive, - "info" => $pageInfo, - "menu" => $menu, + 'debug' => true, // for theme kit + 'theme' => $this->themeFolder, // for theme kit + 'title' => 'Archive', + 'dynamicRender' => $this->settings['dynamicRender'], + 'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg', + 'archives' => $archive['archives'], + 'info' => $pageInfo, + 'menu' => $menu, + 'media' => $images, + 'files' => $files, ]; break; default: - http_response_code(404); - require __DIR__ . "/views/404.php"; + set_error_handler(function ($errno, $errstr, $errfile, $errline) { + // 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; } diff --git a/src/themes/theme-fipamo-default/fipamo-default/page.twig b/src/themes/theme-fipamo-default/fipamo-default/page.twig index 36c9b07..e3f3d53 100644 --- a/src/themes/theme-fipamo-default/fipamo-default/page.twig +++ b/src/themes/theme-fipamo-default/fipamo-default/page.twig @@ -14,12 +14,36 @@

{{content | raw}}

- +
+
+ Files
+ {% for doc in files %} + {% if doc.type != "mp3" %} + {% set path = doc.file|split('/') %} + {{path[6]}} + + {% endif %} + {% endfor %} +
+
+ Sounds
+ {% for doc in files %} + {% if doc.type == "mp3" %} + + {% endif %} + {% endfor %} +
+ +
+
{{meta['who']}} dropped this {{ meta['when'] }}
tags: {% for tag in meta['tags'] %} {% if dynamicRender is defined %} - {% if dynamicRender == 'false' %} + {% if dynamicRender == 'true' %} {{ tag.label }} {% else %} {{ tag.label }} @@ -28,6 +52,7 @@ {{ tag.label }} {% endif %} {% endfor %} +
diff --git a/src/themes/theme-fipamo-default/styles/_forms.sass b/src/themes/theme-fipamo-default/styles/_forms.sass index f44833c..61b8083 100644 --- a/src/themes/theme-fipamo-default/styles/_forms.sass +++ b/src/themes/theme-fipamo-default/styles/_forms.sass @@ -2,7 +2,7 @@ form display: inline-block a color: $primary - p + p background: $tertiary color: $primary padding: 5px @@ -36,7 +36,7 @@ button, input[type=submit] cursor: pointer border: 0 padding: 10px 0 5px 0 - @include object_transitions(.3s) + transition: all 0.3s linear select font: 14px $baseType @@ -63,5 +63,3 @@ select :-ms-input-placeholder font: 25px $baseType color: $white - - diff --git a/src/themes/theme-fipamo-default/styles/_mixins.sass b/src/themes/theme-fipamo-default/styles/_mixins.sass index b3af067..1fa1f68 100644 --- a/src/themes/theme-fipamo-default/styles/_mixins.sass +++ b/src/themes/theme-fipamo-default/styles/_mixins.sass @@ -1,16 +1,9 @@ @mixin text-drop-shadow($rgb_value, $opacity, $offsetX, $offsetY, $blur) 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) background: rgba($rgb_value, $opacity) @mixin custom-header($weight, $size, $line_height, $color) font: $weight $size/$line_height $bodyTypeSans - color: $color \ No newline at end of file + color: $color diff --git a/src/themes/theme-fipamo-default/styles/_structure.sass b/src/themes/theme-fipamo-default/styles/_structure.sass index 39cb781..75c4c1e 100644 --- a/src/themes/theme-fipamo-default/styles/_structure.sass +++ b/src/themes/theme-fipamo-default/styles/_structure.sass @@ -6,240 +6,245 @@ html overflow: hidden font: 400 1.2em/1.4em $baseType -body - background: $white - margin: 0 - padding: 0 - perspective: 1px - transform-style: preserve-3d - 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 + body + background: $white + margin: 0 + padding: 0 + perspective: 1px + transform-style: preserve-3d + height: 100% width: 100% - height: 90% - position: absolute - .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 - + 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 -.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 - color: $black - margin: 0 auto - //.index, .page - //margin 30px - .index, .page - padding: 0 0 15px 0 - img - display: block + 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% - 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 - p - font: 300 1.25em/1.6em $baseType - //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 + .left,.right + width: 50% display: inline-block vertical-align: top - width: 30% - padding: 5px - span.month - color: $secondary - font-size: 1.5em - font-weight: 300 - padding: 5px + .left + a.logo-link + border-bottom: none + margin: 0 0 20px 0 display: block - section - padding: 0 0 20px 0 - background: $primary - a - color: $white - .index-lists, .page-title - max-width: 840px - span - font-size: 2em - color: $secondary - font-weight: 400 - width: 80% - margin: 0 auto - padding: 20px 0 0 0 - .recent, .featured - display: inline-block - width: 50% + #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 + + .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 - label - background: $black - color: $white - font-size: 1.5em - line-height: 1.3 - + color: $black + margin: 0 auto + //.index, .page + //margin 30px + .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 - - -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 - + span + font-size: 2em + color: $secondary + font-weight: 400 + width: 80% + margin: 0 auto + padding: 20px 0 0 0 + .recent, .featured + display: inline-block + width: 50% + vertical-align: top + label + background: $black + color: $white + 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) -header - nav - width: 98% - span - font-size: 2.5em - .container - article - .index, .page - .archive-item - .archive-month - width: 45% + // RESPONSIVE -@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: 640px) + 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) + 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) -header - nav - width: 95% -.container - article - .index, .page - margin: 0 - p - font: 300 0.9em/1.7em $baseType - .archive-item - .archive-month - width: 95% \ No newline at end of file + @media only screen and (max-width: 375px) + header + nav + width: 95% + .container + article + .index, .page + margin: 0 + p + font: 300 0.9em/1.7em $baseType + .archive-item + .archive-month + width: 95% diff --git a/src/themes/theme-fipamo-default/styles/_typography.sass b/src/themes/theme-fipamo-default/styles/_typography.sass index 00a834a..1c2e8b6 100644 --- a/src/themes/theme-fipamo-default/styles/_typography.sass +++ b/src/themes/theme-fipamo-default/styles/_typography.sass @@ -4,7 +4,7 @@ $monoType: "Lucida Console", Monaco, monospace h1, h2, h3 color: $white -h1 +h1 font-size: 2em font-weight: 400 @@ -12,7 +12,6 @@ h2 font-size: 1.75em font-weight: 400 -h3 +h3 font-size: 1.5em font-weight: 300 -