aytac/Casper
1
0
Fork 0
mirror of https://github.com/spaytac/Casper.git synced 2026-01-21 16:54:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'pre543' into v5.4.3

Browse Source
This commit is contained in:
Aytac Kirmizi 2022-12-15 15:34:07 +01:00
commit 11d5eacc72
39 changed files with 7464 additions and 6950 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.devcontainer/Dockerfile Normal file
View File

@ -0,0 +1,14 @@
# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
ARG VARIANT=16-bullseye
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
# && apt-get -y install --no-install-recommends <your-package-list-here>
# [Optional] Uncomment if you want to install an additional version of node using nvm
# ARG EXTRA_NODE_VERSION=10
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
# [Optional] Uncomment if you want to install more global node modules
# RUN su node -c "npm install -g <your-package-list-here>"

55
.devcontainer/base.Dockerfile Normal file
View File

@ -0,0 +1,55 @@
# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
ARG VARIANT=16-bullseye
FROM node:${VARIANT}
# [Option] Install zsh
ARG INSTALL_ZSH="true"
# [Option] Upgrade OS packages to their latest versions
ARG UPGRADE_PACKAGES="true"
# Install needed packages, yarn, nvm and setup non-root user. Use a separate RUN statement to add your own dependencies.
ARG USERNAME=node
ARG USER_UID=1000
ARG USER_GID=$USER_UID
ARG NPM_GLOBAL=/usr/local/share/npm-global
ENV NVM_DIR=/usr/local/share/nvm
ENV NVM_SYMLINK_CURRENT=true \
PATH=${NPM_GLOBAL}/bin:${NVM_DIR}/current/bin:${PATH}
COPY library-scripts/*.sh library-scripts/*.env /tmp/library-scripts/
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
# Remove imagemagick due to https://security-tracker.debian.org/tracker/CVE-2019-10131
&& apt-get purge -y imagemagick imagemagick-6-common \
# Install common packages, non-root user, update yarn and install nvm
&& bash /tmp/library-scripts/common-debian.sh "${INSTALL_ZSH}" "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" "true" "true" \
# Install yarn, nvm
&& rm -rf /opt/yarn-* /usr/local/bin/yarn /usr/local/bin/yarnpkg \
&& bash /tmp/library-scripts/node-debian.sh "${NVM_DIR}" "none" "${USERNAME}" \
# Configure global npm install location, use group to adapt to UID/GID changes
&& if ! cat /etc/group | grep -e "^npm:" > /dev/null 2>&1; then groupadd -r npm; fi \
&& usermod -a -G npm ${USERNAME} \
&& umask 0002 \
&& mkdir -p ${NPM_GLOBAL} \
&& touch /usr/local/etc/npmrc \
&& chown ${USERNAME}:npm ${NPM_GLOBAL} /usr/local/etc/npmrc \
&& chmod g+s ${NPM_GLOBAL} \
&& npm config -g set prefix ${NPM_GLOBAL} \
&& sudo -u ${USERNAME} npm config -g set prefix ${NPM_GLOBAL} \
# Install eslint
&& su ${USERNAME} -c "umask 0002 && npm install -g eslint" \
&& npm cache clean --force > /dev/null 2>&1 \
# Install python-is-python3 on bullseye to prevent node-gyp regressions
&& . /etc/os-release \
&& if [ "${VERSION_CODENAME}" = "bullseye" ]; then apt-get -y install --no-install-recommends python-is-python3; fi \
# Clean up
&& apt-get autoremove -y && apt-get clean -y && rm -rf /var/lib/apt/lists/* /root/.gnupg /tmp/library-scripts
# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
# && apt-get -y install --no-install-recommends <your-package-list-here>
# [Optional] Uncomment if you want to install an additional version of node using nvm
# ARG EXTRA_NODE_VERSION=10
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
# [Optional] Uncomment if you want to install more global node modules
# RUN su node -c "npm install -g <your-package-list-here>""

32
.devcontainer/devcontainer.json Normal file
View File

@ -0,0 +1,32 @@
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node
{
"name": "Node.js",
"build": {
"dockerfile": "Dockerfile",
// Update 'VARIANT' to pick a Node version: 18, 16, 14.
// Append -bullseye or -buster to pin to an OS version.
// Use -bullseye variants on local arm64/Apple Silicon.
"args": { "VARIANT": "16-bullseye" }
},
// Configure tool-specific properties.
"customizations": {
// Configure properties specific to VS Code.
"vscode": {
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"dbaeumer.vscode-eslint"
]
}
},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "yarn install",
// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
"remoteUser": "node"
}

56
.gitignore vendored
View File

@ -1,28 +1,28 @@
b-cov b-cov
*.seed *.seed
*.log *.log
*.csv *.csv
*.dat *.dat
*.out *.out
*.pid *.pid
*.gz *.gz
pids pids
logs logs
results results
npm-debug.log npm-debug.log
node_modules node_modules
package-lock.json package-lock.json
.idea/* .idea/*
*.iml *.iml
projectFilesBackup projectFilesBackup
.DS_Store .DS_Store
dist/ dist/
config.json config.json
changelog.md changelog.md
changelog.md.bk changelog.md.bk

44
LICENSE
View File

@ -1,22 +1,22 @@
Copyright (c) 2013-2022 Ghost Foundation Copyright (c) 2013-2022 Ghost Foundation
Permission is hereby granted, free of charge, to any person Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use, restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following Software is furnished to do so, subject to the following
conditions: conditions:
The above copyright notice and this permission notice shall be The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software. included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE. OTHER DEALINGS IN THE SOFTWARE.

138
README.md
View File

@ -1,69 +1,69 @@
# Casper # Casper
The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper! If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page. The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper! If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.
&nbsp; &nbsp;
![screenshot-desktop](https://user-images.githubusercontent.com/1418797/183329195-8e8f2ee5-a473-4694-a813-a2575491209e.png) ![screenshot-desktop](https://user-images.githubusercontent.com/1418797/183329195-8e8f2ee5-a473-4694-a813-a2575491209e.png)
&nbsp; &nbsp;
# First time using a Ghost theme? # First time using a Ghost theme?
Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes. Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/themes/) which explains every possible Handlebars helper and template. This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/themes/) which explains every possible Handlebars helper and template.
**The main files are:** **The main files are:**
- `default.hbs` - The parent template file, which includes your global header/footer - `default.hbs` - The parent template file, which includes your global header/footer
- `index.hbs` - The main template to generate a list of posts, usually the home page - `index.hbs` - The main template to generate a list of posts, usually the home page
- `post.hbs` - The template used to render individual posts - `post.hbs` - The template used to render individual posts
- `page.hbs` - Used for individual pages - `page.hbs` - Used for individual pages
- `tag.hbs` - Used for tag archives, eg. "all posts tagged with `news`" - `tag.hbs` - Used for tag archives, eg. "all posts tagged with `news`"
- `author.hbs` - Used for author archives, eg. "all posts written by Jamie" - `author.hbs` - Used for author archives, eg. "all posts written by Jamie"
One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example: One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:
- `page-about.hbs` - Custom template for an `/about/` page - `page-about.hbs` - Custom template for an `/about/` page
- `tag-news.hbs` - Custom template for `/tag/news/` archive - `tag-news.hbs` - Custom template for `/tag/news/` archive
- `author-ali.hbs` - Custom template for `/author/ali/` archive - `author-ali.hbs` - Custom template for `/author/ali/` archive
# Development # Development
Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory: Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:
```bash ```bash
# install dependencies # install dependencies
yarn install yarn install
# run development server # run development server
yarn dev yarn dev
``` ```
Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically. Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site. The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
```bash ```bash
# create .zip file # create .zip file
yarn zip yarn zip
``` ```
# PostCSS Features Used # PostCSS Features Used
- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser. - Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
- [Color Mod](https://github.com/jonathantneal/postcss-color-mod-function) - [Color Mod](https://github.com/jonathantneal/postcss-color-mod-function)
# SVG Icons # SVG Icons
Casper uses inline SVG icons, included via Handlebars partials. You can find all icons inside `/partials/icons`. To use an icon just include the name of the relevant file, eg. To include the SVG icon in `/partials/icons/rss.hbs` - use `{{> "icons/rss"}}`. Casper uses inline SVG icons, included via Handlebars partials. You can find all icons inside `/partials/icons`. To use an icon just include the name of the relevant file, eg. To include the SVG icon in `/partials/icons/rss.hbs` - use `{{> "icons/rss"}}`.
You can add your own SVG icons in the same manner. You can add your own SVG icons in the same manner.
# Copyright & License # Copyright & License
Copyright (c) 2013-2022 Ghost Foundation - Released under the [MIT license](LICENSE). Copyright (c) 2013-2022 Ghost Foundation - Released under the [MIT license](LICENSE).

2
assets/built/casper.js.map
View File

File diff suppressed because one or more lines are too long

2
assets/built/global.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/global.css.map
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

1200
assets/css/global.css
View File

File diff suppressed because it is too large Load Diff

BIN
assets/js/casper-aytac.zip Normal file
View File

Binary file not shown.

228
assets/js/infinite-scroll.js
View File

@ -1,114 +1,114 @@
/* eslint-env browser */ /* eslint-env browser */
/** /**
* Infinite Scroll * Infinite Scroll
* Used on all pages where there is a list of posts (homepage, tag index, etc). * Used on all pages where there is a list of posts (homepage, tag index, etc).
* *
* When the page is scrolled to 300px from the bottom, the next page of posts * When the page is scrolled to 300px from the bottom, the next page of posts
* is fetched by following the the <link rel="next" href="..."> that is output * is fetched by following the the <link rel="next" href="..."> that is output
* by {{ghost_head}}. * by {{ghost_head}}.
* *
* The individual post items are extracted from the fetched pages by looking for * The individual post items are extracted from the fetched pages by looking for
* a wrapper element with the class "post-card". Any found elements are appended * a wrapper element with the class "post-card". Any found elements are appended
* to the element with the class "post-feed" in the currently viewed page. * to the element with the class "post-feed" in the currently viewed page.
*/ */
(function (window, document) { (function (window, document) {
if (document.documentElement.classList.contains('no-infinite-scroll')) return; if (document.documentElement.classList.contains('no-infinite-scroll')) return;
// next link element // next link element
var nextElement = document.querySelector('link[rel=next]'); var nextElement = document.querySelector('link[rel=next]');
if (!nextElement) { if (!nextElement) {
return; return;
} }
// post feed element // post feed element
var feedElement = document.querySelector('.post-feed'); var feedElement = document.querySelector('.post-feed');
if (!feedElement) { if (!feedElement) {
return; return;
} }
var buffer = 300; var buffer = 300;
var ticking = false; var ticking = false;
var loading = false; var loading = false;
var lastScrollY = window.scrollY; var lastScrollY = window.scrollY;
var lastWindowHeight = window.innerHeight; var lastWindowHeight = window.innerHeight;
var lastDocumentHeight = document.documentElement.scrollHeight; var lastDocumentHeight = document.documentElement.scrollHeight;
function onPageLoad() { function onPageLoad() {
if (this.status === 404) { if (this.status === 404) {
window.removeEventListener('scroll', onScroll); window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onResize); window.removeEventListener('resize', onResize);
return; return;
} }
// append contents // append contents
var postElements = this.response.querySelectorAll('article.post-card'); var postElements = this.response.querySelectorAll('article.post-card');
postElements.forEach(function (item) { postElements.forEach(function (item) {
// document.importNode is important, without it the item's owner // document.importNode is important, without it the item's owner
// document will be different which can break resizing of // document will be different which can break resizing of
// `object-fit: cover` images in Safari // `object-fit: cover` images in Safari
feedElement.appendChild(document.importNode(item, true)); feedElement.appendChild(document.importNode(item, true));
}); });
// set next link // set next link
var resNextElement = this.response.querySelector('link[rel=next]'); var resNextElement = this.response.querySelector('link[rel=next]');
if (resNextElement) { if (resNextElement) {
nextElement.href = resNextElement.href; nextElement.href = resNextElement.href;
} else { } else {
window.removeEventListener('scroll', onScroll); window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onResize); window.removeEventListener('resize', onResize);
} }
// sync status // sync status
lastDocumentHeight = document.documentElement.scrollHeight; lastDocumentHeight = document.documentElement.scrollHeight;
ticking = false; ticking = false;
loading = false; loading = false;
} }
function onUpdate() { function onUpdate() {
// return if already loading // return if already loading
if (loading) { if (loading) {
return; return;
} }
// return if not scroll to the bottom // return if not scroll to the bottom
if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) { if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
ticking = false; ticking = false;
return; return;
} }
loading = true; loading = true;
var xhr = new window.XMLHttpRequest(); var xhr = new window.XMLHttpRequest();
xhr.responseType = 'document'; xhr.responseType = 'document';
xhr.addEventListener('load', onPageLoad); xhr.addEventListener('load', onPageLoad);
xhr.open('GET', nextElement.href); xhr.open('GET', nextElement.href);
xhr.send(null); xhr.send(null);
} }
function requestTick() { function requestTick() {
ticking || window.requestAnimationFrame(onUpdate); ticking || window.requestAnimationFrame(onUpdate);
ticking = true; ticking = true;
} }
function onScroll() { function onScroll() {
lastScrollY = window.scrollY; lastScrollY = window.scrollY;
requestTick(); requestTick();
} }
function onResize() { function onResize() {
lastWindowHeight = window.innerHeight; lastWindowHeight = window.innerHeight;
lastDocumentHeight = document.documentElement.scrollHeight; lastDocumentHeight = document.documentElement.scrollHeight;
requestTick(); requestTick();
} }
window.addEventListener('scroll', onScroll, {passive: true}); window.addEventListener('scroll', onScroll, {passive: true});
window.addEventListener('resize', onResize); window.addEventListener('resize', onResize);
requestTick(); requestTick();
})(window, document); })(window, document);

12
assets/js/lib/imagesloaded.pkgd.min.js vendored
View File

File diff suppressed because one or more lines are too long

178
assets/js/lib/jquery.fitvids.js
View File

@ -1,89 +1,89 @@
/*jshint browser:true */ /*jshint browser:true */
/*! /*!
* FitVids 1.3 * FitVids 1.3
* *
* *
* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation * Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation
* This is an unofficial release, ported by John O'Nolan * This is an unofficial release, ported by John O'Nolan
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ * Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the MIT license * Released under the MIT license
* *
*/ */
;(function( $ ){ ;(function( $ ){
'use strict'; 'use strict';
$.fn.fitVids = function( options ) { $.fn.fitVids = function( options ) {
var settings = { var settings = {
customSelector: null, customSelector: null,
ignore: null ignore: null
}; };
if(!document.getElementById('fit-vids-style')) { if(!document.getElementById('fit-vids-style')) {
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
var head = document.head || document.getElementsByTagName('head')[0]; var head = document.head || document.getElementsByTagName('head')[0];
var css = '.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}'; var css = '.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
var div = document.createElement("div"); var div = document.createElement("div");
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>'; div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
head.appendChild(div.childNodes[1]); head.appendChild(div.childNodes[1]);
} }
if ( options ) { if ( options ) {
$.extend( settings, options ); $.extend( settings, options );
} }
return this.each(function(){ return this.each(function(){
var selectors = [ var selectors = [
'iframe[src*="player.vimeo.com"]', 'iframe[src*="player.vimeo.com"]',
'iframe[src*="youtube.com"]', 'iframe[src*="youtube.com"]',
'iframe[src*="youtube-nocookie.com"]', 'iframe[src*="youtube-nocookie.com"]',
'iframe[src*="kickstarter.com"][src*="video.html"]', 'iframe[src*="kickstarter.com"][src*="video.html"]',
'object', 'object',
'embed' 'embed'
]; ];
if (settings.customSelector) { if (settings.customSelector) {
selectors.push(settings.customSelector); selectors.push(settings.customSelector);
} }
var ignoreList = '.fitvidsignore'; var ignoreList = '.fitvidsignore';
if(settings.ignore) { if(settings.ignore) {
ignoreList = ignoreList + ', ' + settings.ignore; ignoreList = ignoreList + ', ' + settings.ignore;
} }
var $allVideos = $(this).find(selectors.join(',')); var $allVideos = $(this).find(selectors.join(','));
$allVideos = $allVideos.not('object object'); // SwfObj conflict patch $allVideos = $allVideos.not('object object'); // SwfObj conflict patch
$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video. $allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
$allVideos.each(function(){ $allVideos.each(function(){
var $this = $(this); var $this = $(this);
if($this.parents(ignoreList).length > 0) { if($this.parents(ignoreList).length > 0) {
return; // Disable FitVids on this video. return; // Disable FitVids on this video.
} }
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width')))) if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
{ {
$this.attr('height', 9); $this.attr('height', 9);
$this.attr('width', 16); $this.attr('width', 16);
} }
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(), var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
aspectRatio = height / width; aspectRatio = height / width;
if(!$this.attr('name')){ if(!$this.attr('name')){
var videoName = 'fitvid' + $.fn.fitVids._count; var videoName = 'fitvid' + $.fn.fitVids._count;
$this.attr('name', videoName); $this.attr('name', videoName);
$.fn.fitVids._count++; $.fn.fitVids._count++;
} }
$this.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%'); $this.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
$this.removeAttr('height').removeAttr('width'); $this.removeAttr('height').removeAttr('width');
}); });
}); });
}; };
// Internal counter for unique video names. // Internal counter for unique video names.
$.fn.fitVids._count = 0; $.fn.fitVids._count = 0;
// Works with either jQuery or Zepto // Works with either jQuery or Zepto
})( window.jQuery || window.Zepto ); })( window.jQuery || window.Zepto );

152
author.hbs
View File

@ -1,76 +1,76 @@
{{!< default}} {{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">
<div class="inner posts"> <div class="inner posts">
<div class="post-feed"> <div class="post-feed">
{{#author}} {{#author}}
<section class="post-card post-card-large"> <section class="post-card post-card-large">
{{#if feature_image}} {{#if feature_image}}
<div class="post-card-image-link"> <div class="post-card-image-link">
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="post-card-image" <img class="post-card-image"
srcset="{{img_url feature_image size="s"}} 300w, srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w, {{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w, {{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w" {{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 800px" sizes="(max-width: 1000px) 400px, 800px"
src="{{img_url feature_image size="m"}}" src="{{img_url feature_image size="m"}}"
alt="{{title}}" alt="{{title}}"
/> />
</div> </div>
{{/if}} {{/if}}
<div class="post-card-content"> <div class="post-card-content">
<div class="post-card-content-link"> <div class="post-card-content-link">
{{#if profile_image}} {{#if profile_image}}
<img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" /> <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
{{/if}} {{/if}}
<header class="post-card-header"> <header class="post-card-header">
<h2 class="post-card-title">{{name}}</h2> <h2 class="post-card-title">{{name}}</h2>
</header> </header>
{{#if bio}} {{#if bio}}
<div class="post-card-excerpt">{{bio}}</div> <div class="post-card-excerpt">{{bio}}</div>
{{/if}} {{/if}}
<footer class="author-profile-footer"> <footer class="author-profile-footer">
{{#if location}} {{#if location}}
<div class="author-profile-location">{{location}}</div> <div class="author-profile-location">{{location}}</div>
{{/if}} {{/if}}
<div class="author-profile-meta"> <div class="author-profile-meta">
{{#if website}} {{#if website}}
<a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a> <a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
{{/if}} {{/if}}
{{#if twitter}} {{#if twitter}}
<a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a> <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}} {{/if}}
{{#if facebook}} {{#if facebook}}
<a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a> <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}} {{/if}}
</div> </div>
</footer> </footer>
</div> </div>
</div> </div>
</section> </section>
{{/author}} {{/author}}
{{#foreach posts}} {{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}} {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
</div> </div>
{{pagination}} {{pagination}}
</div> </div>
</main> </main>

72
error-404.hbs
View File

@ -1,37 +1,37 @@
{{!< default}} {{!< default}}
{{!-- {{!--
There are two error files in this theme, one for 404s and one for all other errors. There are two error files in this theme, one for 404s and one for all other errors.
This file is the former, and handles all 404 Page Not Found errors. This file is the former, and handles all 404 Page Not Found errors.
The 404 error is the most common error that a visitor might see, for example when The 404 error is the most common error that a visitor might see, for example when
following a broken link following a broken link
Keep this template as lightweight as you can! Keep this template as lightweight as you can!
--}} --}}
<section class="outer error-content"> <section class="outer error-content">
<div class="inner"> <div class="inner">
<section class="error-message"> <section class="error-message">
<h1 class="error-code">{{statusCode}}</h1> <h1 class="error-code">{{statusCode}}</h1>
<p class="error-description">{{message}}</p> <p class="error-description">{{message}}</p>
<a class="error-link" href="{{@site.url}}">Go to the front page →</a> <a class="error-link" href="{{@site.url}}">Go to the front page →</a>
</section> </section>
</div> </div>
</section> </section>
{{!-- Given that people landing on this page didn't find what they {{!-- Given that people landing on this page didn't find what they
were looking for, let's give them some alternative stuff to read. --}} were looking for, let's give them some alternative stuff to read. --}}
<aside class="read-more-wrap outer"> <aside class="read-more-wrap outer">
<div class="read-more inner"> <div class="read-more inner">
{{#get "posts" include="authors" limit="3" as |more_posts|}} {{#get "posts" include="authors" limit="3" as |more_posts|}}
{{#if more_posts}} {{#if more_posts}}
{{#foreach more_posts}} {{#foreach more_posts}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
{{/if}} {{/if}}
{{/get}} {{/get}}
</div> </div>
</aside> </aside>

148
error.hbs
View File

@ -1,74 +1,74 @@
{{!-- {{!--
There are two error files in this theme, one for 404s and one for all other errors. There are two error files in this theme, one for 404s and one for all other errors.
This file is the latter, and handle all 400/500 errors that might occur. This file is the latter, and handle all 400/500 errors that might occur.
Because 500 errors in particular usuall happen when a server is struggling, this Because 500 errors in particular usuall happen when a server is struggling, this
template is as simple as possible. No template dependencies, no JS, no API calls. template is as simple as possible. No template dependencies, no JS, no API calls.
This is to prevent rendering the error-page itself compounding the issue causing This is to prevent rendering the error-page itself compounding the issue causing
the error in the first place. the error in the first place.
Keep this template as lightweight as you can! Keep this template as lightweight as you can!
--}} --}}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>{{meta_title}}</title> <title>{{meta_title}}</title>
<meta name="HandheldFriendly" content="True" /> <meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" /> <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
</head> </head>
<body> <body>
<div class="site-wrapper"> <div class="site-wrapper">
<header class="site-header no-image"> <header class="site-header no-image">
<div class="site-nav-main outer"> <div class="site-nav-main outer">
<div class="inner"> <div class="inner">
<nav class="site-nav-center"> <nav class="site-nav-center">
{{#if @site.logo}} {{#if @site.logo}}
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}" <a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}"
alt="{{@site.title}}" /></a> alt="{{@site.title}}" /></a>
{{else}} {{else}}
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a> <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
{{/if}} {{/if}}
</nav> </nav>
</div> </div>
</div> </div>
</header> </header>
<main class="outer error-content"> <main class="outer error-content">
<div class="inner"> <div class="inner">
<section class="error-message"> <section class="error-message">
<h1 class="error-code">{{statusCode}}</h1> <h1 class="error-code">{{statusCode}}</h1>
<p class="error-description">{{message}}</p> <p class="error-description">{{message}}</p>
<a class="error-link" href="{{@site.url}}">Go to the front page →</a> <a class="error-link" href="{{@site.url}}">Go to the front page →</a>
</section> </section>
{{#if errorDetails}} {{#if errorDetails}}
<section class="error-stack"> <section class="error-stack">
<h3>Theme errors</h3> <h3>Theme errors</h3>
<ul class="error-stack-list"> <ul class="error-stack-list">
{{#foreach errorDetails}} {{#foreach errorDetails}}
<li> <li>
<em class="error-stack-function">{{{rule}}}</em> <em class="error-stack-function">{{{rule}}}</em>
{{#foreach failures}} {{#foreach failures}}
<p><span class="error-stack-file">Ref: {{ref}}</span></p> <p><span class="error-stack-file">Ref: {{ref}}</span></p>
<p><span class="error-stack-file">Message: {{message}}</span></p> <p><span class="error-stack-file">Message: {{message}}</span></p>
{{/foreach}} {{/foreach}}
</li> </li>
{{/foreach}} {{/foreach}}
</ul> </ul>
</section> </section>
{{/if}} {{/if}}
</div> </div>
</main> </main>
</div> </div>
</body> </body>
</html> </html>

352
gulpfile.js
View File

@ -1,176 +1,176 @@
const {series, watch, src, dest, parallel} = require('gulp'); const {series, watch, src, dest, parallel} = require('gulp');
const pump = require('pump'); const pump = require('pump');
const path = require('path'); const path = require('path');
const releaseUtils = require('@tryghost/release-utils'); const releaseUtils = require('@tryghost/release-utils');
const inquirer = require('inquirer'); const inquirer = require('inquirer');
// gulp plugins and utils // gulp plugins and utils
const livereload = require('gulp-livereload'); const livereload = require('gulp-livereload');
const postcss = require('gulp-postcss'); const postcss = require('gulp-postcss');
const zip = require('gulp-zip'); const zip = require('gulp-zip');
const concat = require('gulp-concat'); const concat = require('gulp-concat');
const uglify = require('gulp-uglify'); const uglify = require('gulp-uglify');
const beeper = require('beeper'); const beeper = require('beeper');
const fs = require('fs'); const fs = require('fs');
// postcss plugins // postcss plugins
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer');
const colorFunction = require('postcss-color-mod-function'); const colorFunction = require('postcss-color-mod-function');
const cssnano = require('cssnano'); const cssnano = require('cssnano');
const easyimport = require('postcss-easy-import'); const easyimport = require('postcss-easy-import');
const REPO = 'TryGhost/Casper'; const REPO = 'TryGhost/Casper';
const REPO_READONLY = 'TryGhost/Casper'; const REPO_READONLY = 'TryGhost/Casper';
const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md'); const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
function serve(done) { function serve(done) {
livereload.listen(); livereload.listen();
done(); done();
} }
const handleError = (done) => { const handleError = (done) => {
return function (err) { return function (err) {
if (err) { if (err) {
beeper(); beeper();
} }
return done(err); return done(err);
}; };
}; };
function hbs(done) { function hbs(done) {
pump([ pump([
src(['*.hbs', 'partials/**/*.hbs']), src(['*.hbs', 'partials/**/*.hbs']),
livereload() livereload()
], handleError(done)); ], handleError(done));
} }
function css(done) { function css(done) {
pump([ pump([
src('assets/css/*.css', {sourcemaps: true}), src('assets/css/*.css', {sourcemaps: true}),
postcss([ postcss([
easyimport, easyimport,
colorFunction(), colorFunction(),
autoprefixer(), autoprefixer(),
cssnano() cssnano()
]), ]),
dest('assets/built/', {sourcemaps: '.'}), dest('assets/built/', {sourcemaps: '.'}),
livereload() livereload()
], handleError(done)); ], handleError(done));
} }
function js(done) { function js(done) {
pump([ pump([
src([ src([
// pull in lib files first so our own code can depend on it // pull in lib files first so our own code can depend on it
'assets/js/lib/*.js', 'assets/js/lib/*.js',
'assets/js/*.js' 'assets/js/*.js'
], {sourcemaps: true}), ], {sourcemaps: true}),
concat('casper.js'), concat('casper.js'),
uglify(), uglify(),
dest('assets/built/', {sourcemaps: '.'}), dest('assets/built/', {sourcemaps: '.'}),
livereload() livereload()
], handleError(done)); ], handleError(done));
} }
function zipper(done) { function zipper(done) {
const filename = require('./package.json').name + '.zip'; const filename = require('./package.json').name + '.zip';
pump([ pump([
src([ src([
'**', '**',
'!node_modules', '!node_modules/**', '!node_modules', '!node_modules/**',
'!dist', '!dist/**', '!dist', '!dist/**',
'!yarn-error.log', '!yarn-error.log',
'!yarn.lock', '!yarn.lock',
'!gulpfile.js' '!gulpfile.js'
]), ]),
zip(filename), zip(filename),
dest('dist/') dest('dist/')
], handleError(done)); ], handleError(done));
} }
const cssWatcher = () => watch('assets/css/**', css); const cssWatcher = () => watch('assets/css/**', css);
const jsWatcher = () => watch('assets/js/**', js); const jsWatcher = () => watch('assets/js/**', js);
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs); const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
const watcher = parallel(cssWatcher, jsWatcher, hbsWatcher); const watcher = parallel(cssWatcher, jsWatcher, hbsWatcher);
const build = series(css, js); const build = series(css, js);
exports.build = build; exports.build = build;
exports.zip = series(build, zipper); exports.zip = series(build, zipper);
exports.default = series(build, serve, watcher); exports.default = series(build, serve, watcher);
exports.release = async () => { exports.release = async () => {
// @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/ // @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/
// require(./package.json) can run into caching issues, this re-reads from file everytime on release // require(./package.json) can run into caching issues, this re-reads from file everytime on release
let packageJSON = JSON.parse(fs.readFileSync('./package.json')); let packageJSON = JSON.parse(fs.readFileSync('./package.json'));
const newVersion = packageJSON.version; const newVersion = packageJSON.version;
if (!newVersion || newVersion === '') { if (!newVersion || newVersion === '') {
console.log(`Invalid version: ${newVersion}`); console.log(`Invalid version: ${newVersion}`);
return; return;
} }
console.log(`\nCreating release for ${newVersion}...`); console.log(`\nCreating release for ${newVersion}...`);
const githubToken = process.env.GST_TOKEN; const githubToken = process.env.GST_TOKEN;
if (!githubToken) { if (!githubToken) {
console.log('Please configure your environment with a GitHub token located in GST_TOKEN'); console.log('Please configure your environment with a GitHub token located in GST_TOKEN');
return; return;
} }
try { try {
const result = await inquirer.prompt([{ const result = await inquirer.prompt([{
type: 'input', type: 'input',
name: 'compatibleWithGhost', name: 'compatibleWithGhost',
message: 'Which version of Ghost is it compatible with?', message: 'Which version of Ghost is it compatible with?',
default: '5.0.0' default: '5.0.0'
}]); }]);
const compatibleWithGhost = result.compatibleWithGhost; const compatibleWithGhost = result.compatibleWithGhost;
const releasesResponse = await releaseUtils.releases.get({ const releasesResponse = await releaseUtils.releases.get({
userAgent: 'Casper', userAgent: 'Casper',
uri: `https://api.github.com/repos/${REPO_READONLY}/releases` uri: `https://api.github.com/repos/${REPO_READONLY}/releases`
}); });
if (!releasesResponse || !releasesResponse) { if (!releasesResponse || !releasesResponse) {
console.log('No releases found. Skipping...'); console.log('No releases found. Skipping...');
return; return;
} }
let previousVersion = releasesResponse[0].tag_name || releasesResponse[0].name; let previousVersion = releasesResponse[0].tag_name || releasesResponse[0].name;
console.log(`Previous version: ${previousVersion}`); console.log(`Previous version: ${previousVersion}`);
const changelog = new releaseUtils.Changelog({ const changelog = new releaseUtils.Changelog({
changelogPath: CHANGELOG_PATH, changelogPath: CHANGELOG_PATH,
folder: path.join(process.cwd(), '.') folder: path.join(process.cwd(), '.')
}); });
changelog changelog
.write({ .write({
githubRepoPath: `https://github.com/${REPO}`, githubRepoPath: `https://github.com/${REPO}`,
lastVersion: previousVersion lastVersion: previousVersion
}) })
.sort() .sort()
.clean(); .clean();
const newReleaseResponse = await releaseUtils.releases.create({ const newReleaseResponse = await releaseUtils.releases.create({
draft: true, draft: true,
preRelease: false, preRelease: false,
tagName: 'v' + newVersion, tagName: 'v' + newVersion,
releaseName: newVersion, releaseName: newVersion,
userAgent: 'Casper', userAgent: 'Casper',
uri: `https://api.github.com/repos/${REPO}/releases`, uri: `https://api.github.com/repos/${REPO}/releases`,
github: { github: {
token: githubToken token: githubToken
}, },
content: [`**Compatible with Ghost ≥ ${compatibleWithGhost}**\n\n`], content: [`**Compatible with Ghost ≥ ${compatibleWithGhost}**\n\n`],
changelogPath: CHANGELOG_PATH changelogPath: CHANGELOG_PATH
}); });
console.log(`\nRelease draft generated: ${newReleaseResponse.releaseUrl}\n`); console.log(`\nRelease draft generated: ${newReleaseResponse.releaseUrl}\n`);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
process.exit(1); process.exit(1);
} }
}; };

108
index.hbs
View File

@ -1,54 +1,54 @@
{{!< default}} {{!< default}}
{{!-- The tag above means: insert everything in this file {{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
<div class="site-header-content outer{{#match @custom.header_style "Left aligned"}} left-aligned{{/match}}{{#unless @custom.show_publication_cover}}{{#match @custom.header_style "Hidden"}} no-content{{/match}}{{/unless}}"> <div class="site-header-content outer{{#match @custom.header_style "Left aligned"}} left-aligned{{/match}}{{#unless @custom.show_publication_cover}}{{#match @custom.header_style "Hidden"}} no-content{{/match}}{{/unless}}">
{{#if @custom.show_publication_cover}} {{#if @custom.show_publication_cover}}
{{#if @site.cover_image}} {{#if @site.cover_image}}
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="site-header-cover" <img class="site-header-cover"
srcset="{{img_url @site.cover_image size="s"}} 300w, srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 600w, {{img_url @site.cover_image size="m"}} 600w,
{{img_url @site.cover_image size="l"}} 1000w, {{img_url @site.cover_image size="l"}} 1000w,
{{img_url @site.cover_image size="xl"}} 2000w" {{img_url @site.cover_image size="xl"}} 2000w"
sizes="100vw" sizes="100vw"
src="{{img_url @site.cover_image size="xl"}}" src="{{img_url @site.cover_image size="xl"}}"
alt="{{@site.title}}" alt="{{@site.title}}"
/> />
{{/if}} {{/if}}
{{/if}} {{/if}}
{{#match @custom.header_style "!=" "Hidden"}} {{#match @custom.header_style "!=" "Hidden"}}
<div class="site-header-inner inner"> <div class="site-header-inner inner">
{{#match @custom.navigation_layout "Logo on cover"}} {{#match @custom.navigation_layout "Logo on cover"}}
{{#if @site.logo}} {{#if @site.logo}}
<img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}"> <img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}">
{{else}} {{else}}
<h1 class="site-title">{{@site.title}}</h1> <h1 class="site-title">{{@site.title}}</h1>
{{/if}} {{/if}}
{{/match}} {{/match}}
{{#if @site.description}} {{#if @site.description}}
<p class="site-description">{{@site.description}}</p> <p class="site-description">{{@site.description}}</p>
{{/if}} {{/if}}
</div> </div>
{{/match}} {{/match}}
</div> </div>
{{!-- The main content area --}} {{!-- The main content area --}}
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">
<div class="inner posts"> <div class="inner posts">
<div class="post-feed"> <div class="post-feed">
{{#foreach posts}} {{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}} {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
</div> </div>
{{pagination}} {{pagination}}
</div> </div>
</main> </main>

6
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "casper", "name": "casper-aytac",
"description": "A clean, minimal default theme for the Ghost publishing platform", "description": "A clean, minimal default theme for the Ghost publishing platform with little modifications by Aytac",
"demo": "https://demo.ghost.io", "demo": "https://aytac.kirmizi.online",
"version": "5.4.3", "version": "5.4.3",
"engines": { "engines": {
"ghost": ">=5.0.0" "ghost": ">=5.0.0"

11
page-tags.hbs Normal file
View File

@ -0,0 +1,11 @@
{{!< default}}
<section class="post-content post-tag-content">
<div class="post-tag-grid">
{{#get 'tags' limit='15' include='count.posts' order='count.posts desc'}}
{{#foreach tags}}
{{> "tag-card"}}
{{/foreach}}
{{/get}}
</div>
</section>

88
page.hbs
View File

@ -1,45 +1,45 @@
{{!< default}} {{!< default}}
{{!-- The tag above means: insert everything in this file {{!-- The tag above means: insert everything in this file
into the {body} tag of the default.hbs template --}} into the {body} tag of the default.hbs template --}}
{{#post}} {{#post}}
{{!-- Everything inside the #post block pulls data from the page --}} {{!-- Everything inside the #post block pulls data from the page --}}
<main id="site-main" class="site-main"> <main id="site-main" class="site-main">
<article class="article {{post_class}}"> <article class="article {{post_class}}">
<header class="article-header gh-canvas"> <header class="article-header gh-canvas">
<h1 class="article-title">{{title}}</h1> <h1 class="article-title">{{title}}</h1>
{{#if feature_image}} {{#if feature_image}}
<figure class="article-image"> <figure class="article-image">
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img <img
srcset="{{img_url feature_image size="s"}} 300w, srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w, {{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w, {{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w" {{img_url feature_image size="xl"}} 2000w"
sizes="(min-width: 1400px) 1400px, 92vw" sizes="(min-width: 1400px) 1400px, 92vw"
src="{{img_url feature_image size="xl"}}" src="{{img_url feature_image size="xl"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
/> />
{{#if feature_image_caption}} {{#if feature_image_caption}}
<figcaption>{{feature_image_caption}}</figcaption> <figcaption>{{feature_image_caption}}</figcaption>
{{/if}} {{/if}}
</figure> </figure>
{{/if}} {{/if}}
</header> </header>
<section class="gh-content gh-canvas"> <section class="gh-content gh-canvas">
{{content}} {{content}}
</section> </section>
</article> </article>
</main> </main>
{{/post}} {{/post}}

2
partials/icons/avatar.hbs
View File

@ -1 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 308 B

After

Width:  |  Height:  |  Size: 309 B

4
partials/icons/fire.hbs
View File

@ -1,3 +1,3 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.49365 4.58752C3.53115 6.03752 2.74365 7.70002 2.74365 9.25002C2.74365 10.6424 3.29678 11.9778 4.28134 12.9623C5.26591 13.9469 6.60127 14.5 7.99365 14.5C9.38604 14.5 10.7214 13.9469 11.706 12.9623C12.6905 11.9778 13.2437 10.6424 13.2437 9.25002C13.2437 6.00002 10.9937 3.50002 9.16865 1.68127L6.99365 6.25002L4.49365 4.58752Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M4.49365 4.58752C3.53115 6.03752 2.74365 7.70002 2.74365 9.25002C2.74365 10.6424 3.29678 11.9778 4.28134 12.9623C5.26591 13.9469 6.60127 14.5 7.99365 14.5C9.38604 14.5 10.7214 13.9469 11.706 12.9623C12.6905 11.9778 13.2437 10.6424 13.2437 9.25002C13.2437 6.00002 10.9937 3.50002 9.16865 1.68127L6.99365 6.25002L4.49365 4.58752Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 538 B

After

Width:  |  Height:  |  Size: 540 B

20
partials/icons/loader.hbs
View File

@ -1,11 +1,11 @@
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" /> c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z"> C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
dur="0.5s" repeatCount="indefinite" /> dur="0.5s" repeatCount="indefinite" />
</path> </path>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 923 B

After

Width:  |  Height:  |  Size: 933 B

8
partials/icons/lock.hbs
View File

@ -1,5 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z" fill="currentColor"></path> <path d="M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z" fill="currentColor"></path>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 932 B

After

Width:  |  Height:  |  Size: 936 B

2
partials/icons/rss.hbs
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 263 B

After

Width:  |  Height:  |  Size: 264 B

38
partials/icons/share-facebook.hbs Normal file
View File

@ -0,0 +1,38 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 485 485" style="enable-background:new 0 0 485 485;" xml:space="preserve">
<g>
<path d="M200.767,400h65.266V242.413h43.798c0,0,4.104-25.428,6.103-53.235h-49.647v-36.264c0-5.416,7.109-12.696,14.153-12.696
h35.564V85h-48.366c-68.478,0-66.872,53.082-66.872,61.009v43.356h-31.771v53.029h31.771V400z"/>
<path d="M0,0v485h485V0H0z M455,455H30V30h425V455z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 642 B

25
partials/icons/share-linkedin.hbs Normal file
View File

@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="1000" viewBox="0 0 1000 1000" xml:space="preserve">
<desc>Created with Fabric.js 3.5.0</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
<g transform="matrix(39.5346 0 0 39.5346 516.0819 516.0819)" id="295699">
<g style="" vector-effect="non-scaling-stroke">
<g transform="matrix(1 0 0 1 -0.5 -0.0005)" id="Layer_1">
<rect style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" x="-11" y="-10.5215" rx="0" ry="0" width="22" height="21.043"/>
</g>
<g transform="matrix(1 0 0 1 1.413 1.9135)" id="Layer_1">
<path style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" transform=" translate(-13.413, -13.9135)" d="M 10.065 18.696 v -6.217 c 0 -1.849 1.499 -3.348 3.348 -3.348 h 0 c 1.849 0 3.348 1.499 3.348 3.348 v 6.217" stroke-linecap="round"/>
</g>
<g transform="matrix(1 0 0 1 -5.761 1.435)" id="Layer_1">
<line style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" x1="0" y1="-5.261000000000001" x2="0" y2="5.261000000000001"/>
</g>
<g transform="matrix(1 0 0 1 -5.761 -5.739)" id="Layer_1">
<circle style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" cx="0" cy="0" r="0.957"/>
</g>
<g transform="matrix(1 0 0 1 -1.935 -1.4345)" id="Layer_1">
<line style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" x1="0" y1="-2.3915000000000006" x2="0" y2="2.3915000000000006"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

9
partials/icons/share-pinterest.hbs Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="1000" viewBox="0 0 1000 1000" xml:space="preserve">
<desc>Created with Fabric.js 3.5.0</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
<g transform="matrix(41.3223 0 0 41.3223 499.9998 499.9998)" id="343141">
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-16, -16)" d="M 5 5 L 5 27 L 27 27 L 27 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 13.513672 25 C 13.765525 24.49367 13.992121 23.971433 14.115234 23.496094 C 14.249234 22.982094 15 20.740234 15 20.740234 C 15.357 21.423234 16.402672 22 17.513672 22 C 20.821672 22 23 19.107078 23 15.330078 C 23 11.710078 20.044234 9 16.240234 9 C 11.508234 9 9 12.174766 9 15.634766 C 9 17.241766 9.8566563 19.241859 11.222656 19.880859 C 11.432656 19.978859 11.540844 19.933422 11.589844 19.732422 C 11.625844 19.580422 11.811578 18.836188 11.892578 18.492188 C 11.919578 18.380188 11.905406 18.287688 11.816406 18.179688 C 11.365406 17.629687 11 16.621688 11 15.679688 C 11 13.259688 12.830172 10.919922 15.951172 10.919922 C 18.643172 10.919922 20.53125 12.755859 20.53125 15.380859 C 20.53125 18.344859 19.236156 20.251953 17.285156 20.251953 C 16.209156 20.251953 15.204984 19.510016 15.458984 18.416016 C 15.766984 17.112016 16.365234 15.705672 16.365234 14.763672 C 16.365234 12.397672 12.998047 12.724859 12.998047 15.880859 C 12.998047 16.849859 13.320313 17.509766 13.320312 17.509766 C 12.257514 22.24839 11.955636 23.282208 12.048828 25 L 7 25 L 7 7 z" stroke-linecap="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

9
partials/icons/share-reddit.hbs Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="1000" viewBox="0 0 1000 1000" xml:space="preserve">
<desc>Created with Fabric.js 3.5.0</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
<g transform="matrix(41.3223 0 0 41.3223 499.9998 499.9998)" id="916324">
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-16, -16)" d="M 5 5 L 5 27 L 27 27 L 27 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 17.058594 8.9941406 C 16.880594 8.9641406 16.704109 9.0817188 16.662109 9.2617188 L 15.798828 13.007812 C 14.128828 13.049812 12.634078 13.601844 11.580078 14.464844 C 11.307078 14.179844 10.926 14 10.5 14 C 9.672 14 9 14.672 9 15.5 C 9 16.172 9.4456875 16.734781 10.054688 16.925781 C 10.022687 17.114781 10 17.305 10 17.5 C 10 19.985 12.686 22 16 22 C 19.314 22 22 19.985 22 17.5 C 22 17.305 21.977312 17.114781 21.945312 16.925781 C 22.554312 16.734781 23 16.172 23 15.5 C 23 14.672 22.328 14 21.5 14 C 21.074 14 20.692922 14.179844 20.419922 14.464844 C 19.431922 13.655844 18.056672 13.117531 16.513672 13.019531 L 17.269531 9.7382812 L 20.039062 10.195312 C 20.132062 10.650313 20.517 11 21 11 C 21.552 11 22 10.552 22 10 C 22 9.448 21.552 9 21 9 C 20.632 9 20.324391 9.2088594 20.150391 9.5058594 L 17.058594 8.9941406 z M 13.091797 15.818359 C 13.694797 15.818359 14.181641 16.305203 14.181641 16.908203 C 14.181641 17.511203 13.693797 18 13.091797 18 C 12.489797 18 12 17.511203 12 16.908203 C 12 16.306203 12.488797 15.818359 13.091797 15.818359 z M 18.908203 15.818359 C 19.511203 15.818359 20 16.306203 20 16.908203 C 20 17.510203 19.511203 18 18.908203 18 C 18.306203 18 17.818359 17.511203 17.818359 16.908203 C 17.818359 16.305203 18.305203 15.818359 18.908203 15.818359 z M 13.472656 19.021484 C 13.562031 19.014609 13.654063 19.042469 13.726562 19.105469 C 14.880562 20.093469 17.117484 20.093469 18.271484 19.105469 C 18.417484 18.980469 18.639625 18.995578 18.765625 19.142578 C 18.891625 19.289578 18.875516 19.510719 18.728516 19.636719 C 18.027516 20.238719 17.033 20.583984 16 20.583984 C 14.967 20.583984 13.973484 20.238719 13.271484 19.636719 C 13.124484 19.510719 13.108375 19.289578 13.234375 19.142578 C 13.297375 19.069078 13.383281 19.028359 13.472656 19.021484 z" stroke-linecap="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

44
partials/icons/share-twitter.hbs Normal file
View File

@ -0,0 +1,44 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 485 485" style="enable-background:new 0 0 485 485;" xml:space="preserve">
<g>
<path d="M85,341.458c28.599,18.34,62.568,29.037,99.065,29.037c118.871,0,183.873-98.473,183.873-183.876
c0-2.799-0.063-5.587-0.186-8.36c12.629-9.111,23.585-20.493,32.249-33.453c-11.59,5.14-24.045,8.616-37.118,10.178
c13.344-8,23.591-20.662,28.415-35.754c-12.488,7.404-26.319,12.785-41.038,15.681c-11.788-12.56-28.584-20.406-47.173-20.406
c-35.688,0-64.626,28.935-64.626,64.623c0,5.065,0.574,9.997,1.677,14.729c-53.71-2.698-101.33-28.424-133.203-67.526
c-5.564,9.547-8.751,20.647-8.751,32.492c0,22.419,11.406,42.201,28.748,53.79c-10.595-0.336-20.56-3.245-29.271-8.084
c-0.006,0.271-0.006,0.541-0.006,0.814c0,31.311,22.278,57.429,51.841,63.368c-5.423,1.474-11.133,2.268-17.027,2.268
c-4.164,0-8.213-0.406-12.161-1.163c8.225,25.676,32.093,44.361,60.373,44.88c-22.119,17.336-49.984,27.668-80.262,27.668
C95.199,342.365,90.056,342.059,85,341.458z"/>
<path d="M0,0v485h485V0H0z M455,455H30V30h425V455z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

156
partials/post-card.hbs
View File

@ -1,78 +1,78 @@
{{!-- This is a partial file used to generate a post "card" {{!-- This is a partial file used to generate a post "card"
which templates loop over to generate a list of posts. --}} which templates loop over to generate a list of posts. --}}
<article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home, paged"}} post-card-large{{/is}}{{/match}}{{#unless access}} post-access-{{visibility}}{{/unless}}"> <article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home, paged"}} post-card-large{{/is}}{{/match}}{{#unless access}} post-access-{{visibility}}{{/unless}}">
{{#if feature_image}} {{#if feature_image}}
<a class="post-card-image-link" href="{{url}}"> <a class="post-card-image-link" href="{{url}}">
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="post-card-image" <img class="post-card-image"
srcset="{{img_url feature_image size="s"}} 300w, srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w, {{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w, {{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w" {{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 800px" sizes="(max-width: 1000px) 400px, 800px"
src="{{img_url feature_image size="m"}}" src="{{img_url feature_image size="m"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
loading="lazy" loading="lazy"
/> />
{{#unless access}} {{#unless access}}
{{^has visibility="public"}} {{^has visibility="public"}}
<div class="post-card-access"> <div class="post-card-access">
{{> "icons/lock"}} {{> "icons/lock"}}
{{#has visibility="members"}} {{#has visibility="members"}}
Members only Members only
{{else}} {{else}}
Paid-members only Paid-members only
{{/has}} {{/has}}
</div> </div>
{{/has}} {{/has}}
{{/unless}} {{/unless}}
</a> </a>
{{/if}} {{/if}}
<div class="post-card-content"> <div class="post-card-content">
<a class="post-card-content-link" href="{{url}}"> <a class="post-card-content-link" href="{{url}}">
<header class="post-card-header"> <header class="post-card-header">
<div class="post-card-tags"> <div class="post-card-tags">
{{#primary_tag}} {{#primary_tag}}
<span class="post-card-primary-tag">{{name}}</span> <span class="post-card-primary-tag">{{name}}</span>
{{/primary_tag}} {{/primary_tag}}
{{#if featured}} {{#if featured}}
<span class="post-card-featured">{{> "icons/fire"}} Featured</span> <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
{{/if}} {{/if}}
</div> </div>
<h2 class="post-card-title"> <h2 class="post-card-title">
{{#unless access}} {{#unless access}}
{{^has visibility="public"}} {{^has visibility="public"}}
{{#unless feature_image}} {{#unless feature_image}}
{{> "icons/lock"}} {{> "icons/lock"}}
{{/unless}} {{/unless}}
{{/has}} {{/has}}
{{/unless}} {{/unless}}
{{title}} {{title}}
</h2> </h2>
</header> </header>
{{#if excerpt}} {{#if excerpt}}
<div class="post-card-excerpt">{{excerpt}}</div> <div class="post-card-excerpt">{{excerpt}}</div>
{{/if}} {{/if}}
</a> </a>
<footer class="post-card-meta"> <footer class="post-card-meta">
<time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
{{#if reading_time}} {{#if reading_time}}
<span class="post-card-meta-length">{{reading_time}}</span> <span class="post-card-meta-length">{{reading_time}}</span>
{{/if}} {{/if}}
{{#if @site.comments_enabled}} {{#if @site.comments_enabled}}
{{comment_count}} {{comment_count}}
{{/if}} {{/if}}
</footer> </footer>
</div> </div>
</article> </article>

28
partials/tag-card.hbs Normal file
View File

@ -0,0 +1,28 @@
<div class="post-tag-grid-item">
<a href='{{ url }}'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="post-tag-grid-item-svg">
{{#if accent_color}}
<rect x="0" y="0" style="fill: {{accent_color}}" class="post-tag-grid-item-svg-first"></rect>
{{else}}
<rect x="0" y="0" class="post-tag-grid-item-svg-first"></rect>
{{/if}}
<foreignObject class="post-tag-grid-item-svg-first-obj">
<div class="post-tag-grid-item-svg-first-obj-text">{{ count.posts }}</div>
</foreignObject>
<rect class="post-tag-grid-item-svg-second"></rect>
<foreignObject class="post-tag-grid-item-svg-second-obj">
<div class="post-tag-grid-item-svg-second-obj-inner">
{{#if accent_color}}
<h2 style="color:{{accent_color}};">{{ name }}</h2>
{{else}}
<h2>{{ name }}</h2>
{{/if}}
{{#if description}}
<p class="post-tag-grid-item-svg-second-obj-description">{{description}}</p>
{{/if}}
</div>
</foreignObject>
</svg>
</a>
</div>

303
post.hbs
View File

@ -1,140 +1,165 @@
{{!< default}} {{!< default}}
{{!-- The tag above means: insert everything in this file {{!-- The tag above means: insert everything in this file
into the {body} tag of the default.hbs template --}} into the {body} tag of the default.hbs template --}}
{{#post}} {{#post}}
{{!-- Everything inside the #post block pulls data from the post --}} {{!-- Everything inside the #post block pulls data from the post --}}
<main id="site-main" class="site-main"> <main id="site-main" class="site-main">
<article class="article {{post_class}} {{#match @custom.post_image_style "Full"}}image-full{{else match @custom.post_image_style "=" "Small"}}image-small{{/match}}"> <article class="article {{post_class}} {{#match @custom.post_image_style "Full"}}image-full{{else match @custom.post_image_style "=" "Small"}}image-small{{/match}}">
<header class="article-header gh-canvas"> <header class="article-header gh-canvas">
<div class="article-tag post-card-tags"> <div class="article-tag post-card-tags">
{{#primary_tag}} {{#primary_tag}}
<span class="post-card-primary-tag"> <span class="post-card-primary-tag">
<a href="{{url}}">{{name}}</a> <a href="{{url}}">{{name}}</a>
</span> </span>
{{/primary_tag}} {{/primary_tag}}
{{#if featured}} {{#if featured}}
<span class="post-card-featured">{{> "icons/fire"}} Featured</span> <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
{{/if}} {{/if}}
</div> </div>
<h1 class="article-title">{{title}}</h1> <h1 class="article-title">{{title}}</h1>
{{#if custom_excerpt}} {{#if custom_excerpt}}
<p class="article-excerpt">{{custom_excerpt}}</p> <p class="article-excerpt">{{custom_excerpt}}</p>
{{/if}} {{/if}}
<div class="article-byline"> <div class="article-byline">
<section class="article-byline-content"> <section class="article-byline-content">
<ul class="author-list"> <ul class="author-list">
{{#foreach authors}} {{#foreach authors}}
<li class="author-list-item"> <li class="author-list-item">
{{#if profile_image}} {{#if profile_image}}
<a href="{{url}}" class="author-avatar"> <a href="{{url}}" class="author-avatar">
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" /> <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
</a> </a>
{{else}} {{else}}
<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a> <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}} {{/if}}
</li> </li>
{{/foreach}} {{/foreach}}
</ul> </ul>
<div class="article-byline-meta"> <div class="article-byline-meta">
<h4 class="author-name">{{authors}}</h4> <h4 class="author-name">{{authors}}</h4>
<div class="byline-meta-content"> <div class="byline-meta-content">
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
{{#if reading_time}} {{#if reading_time}}
<span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span> <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
{{/if}} {{/if}}
</div> </div>
</div> </div>
</section> </section>
</div> </div>
{{#if tags}}
{{#match @custom.post_image_style "!=" "Hidden"}} <div class="post-tags">
{{#if feature_image}} <div class="post-tags-box-label">Tags</div>
<figure class="article-image"> {{#foreach tags}}
{{!-- This is a responsive image, it loads different sizes depending on device <a href="{{url}}">
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} {{#if accent_color}}
<img <span class="post-tag-title" style="color:{{accent_color}};">{{name}}</span>
srcset="{{img_url feature_image size="s"}} 300w, {{else}}
{{img_url feature_image size="m"}} 600w, <span class="post-tag-title" style="color:var(--ghost-accent-color);">{{name}}</span>
{{img_url feature_image size="l"}} 1000w, {{/if}}
{{img_url feature_image size="xl"}} 2000w" </a>
sizes="(min-width: 1400px) 1400px, 92vw" {{/foreach}}
src="{{img_url feature_image size="xl"}}" </div>
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" {{/if}}
/>
{{#if feature_image_caption}} {{#match @custom.post_image_style "!=" "Hidden"}}
<figcaption>{{feature_image_caption}}</figcaption> {{#if feature_image}}
{{/if}} <figure class="article-image">
</figure> {{!-- This is a responsive image, it loads different sizes depending on device
{{/if}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
{{/match}} <img
srcset="{{img_url feature_image size="s"}} 300w,
</header> {{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
<section class="gh-content gh-canvas"> {{img_url feature_image size="xl"}} 2000w"
{{content}} sizes="(min-width: 1400px) 1400px, 92vw"
</section> src="{{img_url feature_image size="xl"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
{{#if comments}} />
<section class="article-comments gh-canvas"> {{#if feature_image_caption}}
{{comments}} <figcaption>{{feature_image_caption}}</figcaption>
</section> {{/if}}
{{/if}} </figure>
{{/if}}
</article> {{/match}}
</main>
</header>
{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
{{#if @site.members_enabled}} <section class="gh-content gh-canvas">
{{#unless @member}} {{content}}
{{#unless @site.comments_enabled}} </section>
{{#if access}}
<section class="footer-cta outer"> <section class="article-share gh-canvas">
<div class="inner"> <h2 class="text-[2.8rem] font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]"><span class="hidden sm:inline">Share </span><span class="capitalize sm:normal-case">this</span></h2>
{{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@custom.email_signup_text}}</h2>{{/if}} <ul>
<a class="footer-cta-button" href="#/portal" data-portal> <li><a href="http://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;" title="Twitter" class="social-share-link">{{> "icons/share-twitter"}}</a></li>
<div class="footer-cta-input">Enter your email</div> <li><a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;" title="Facebook" class="social-share-link">{{> "icons/share-facebook"}}</a></li>
<span>Subscribe</span> <li><a href="http://www.reddit.com/submit?url={{url absolute="true"}}&amp;title={{encode title}}" onclick="window.open(this.href, 'reddit-share', 'width=490,height=530');return false;" title="Reddit" class="social-share-link">{{> "icons/share-reddit"}}</a></li>
</a> <li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{url absolute="true"}}&amp;title={{encode title}}" onclick="window.open(this.href, 'linkedin-share', 'width=490,height=530');return false;" title="LinkedIn" class="social-share-link">{{> "icons/share-linkedin"}}</a></li>
</div> <li><a href="http://pinterest.com/pin/create/button/?url={{url absolute="true"}}&amp;description={{encode title}}" onclick="window.open(this.href, 'pinterest-share', 'width=490,height=530');return false;" title="Pinterest" class="social-share-link">{{> "icons/share-pinterest"}}</a></li>
</section> </ul>
{{/if}} </section>
{{/unless}}
{{/unless}} {{#if comments}}
{{/if}} <section class="article-comments gh-canvas">
{{comments}}
</section>
{{!-- Read more links, just above the footer --}} {{/if}}
{{#if @custom.show_recent_posts_footer}}
{{!-- The {#get} helper below fetches some of the latest posts here </article>
so that people have something else to read when they finish this one. </main>
This query gets the latest 3 posts on the site, but adds a filter to {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
exclude the post we're currently on from being included. --}} {{#if @site.members_enabled}}
{{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}} {{#unless @member}}
{{#unless @site.comments_enabled}}
{{#if more_posts}} {{#if access}}
<aside class="read-more-wrap outer"> <section class="footer-cta outer">
<div class="read-more inner"> <div class="inner">
{{#foreach more_posts}} {{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@custom.email_signup_text}}</h2>{{/if}}
{{> "post-card"}} <a class="footer-cta-button" href="#/portal" data-portal>
{{/foreach}} <div class="footer-cta-input">Enter your email</div>
</div> <span>Subscribe</span>
</aside> </a>
{{/if}} </div>
</section>
{{/get}} {{/if}}
{{/if}} {{/unless}}
{{/unless}}
{{/if}}
{{!-- Read more links, just above the footer --}}
{{#if @custom.show_recent_posts_footer}}
{{!-- The {#get} helper below fetches some of the latest posts here
so that people have something else to read when they finish this one.
This query gets the latest 3 posts on the site, but adds a filter to
exclude the post we're currently on from being included. --}}
{{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}}
{{#if more_posts}}
<aside class="read-more-wrap outer">
<div class="read-more inner">
{{#foreach more_posts}}
{{> "post-card"}}
{{/foreach}}
</div>
</aside>
{{/if}}
{{/get}}
{{/if}}
{{/post}} {{/post}}

92
tag.hbs
View File

@ -1,55 +1,37 @@
{{!< default}} {{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">
<div class="inner posts"> <div class="inner posts">
<div class="post-feed"> <div class="post-feed">
{{#tag}} {{#tag}}
<section class="post-card post-card-large"> <section class="post-card post-card-large">
{{#if feature_image}} <div class="post-card-content">
<div class="post-card-image-link"> <div class="post-card-content-link">
{{!-- This is a responsive image, it loads different sizes depending on device <header class="post-card-header">
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} <h2 class="post-card-title post-card-title-custom">{{name}}</h2>
<img class="post-card-image" </header>
srcset="{{img_url feature_image size="s"}} 300w, <div class="post-card-excerpt">
{{img_url feature_image size="m"}} 600w, {{#if description}}
{{img_url feature_image size="l"}} 1000w, {{description}}
{{img_url feature_image size="xl"}} 2000w" {{/if}}
sizes="(max-width: 1000px) 400px, 800px" ... A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
src="{{img_url feature_image size="m"}}" </div>
alt="{{title}}" </div>
/> </div>
</div> </section>
{{/if}} {{/tag}}
<div class="post-card-content"> {{#foreach posts}}
<div class="post-card-content-link"> {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
<header class="post-card-header"> {{> "post-card"}}
<h2 class="post-card-title">{{name}}</h2> {{/foreach}}
</header>
<div class="post-card-excerpt"> </div>
{{#if description}}
{{description}} {{pagination}}
{{else}}
A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}} </div>
{{/if}} </main>
</div>
</div>
</div>
</section>
{{/tag}}
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
{{pagination}}
</div>
</main>

10770
yarn.lock
View File

File diff suppressed because it is too large Load Diff