A Configurable Portfolio-style Jekyll Theme for Writers

Plainwhite

Simplistic jekyll portfolio-style theme for writers.

Installation on Github Pages

Add this line to your site's _config.yml:

remote_theme: samarsault/plainwhite-jekyll

Installation

Add this line to your Jekyll site's Gemfile:

gem "plainwhite"

And add this line to your Jekyll site's _config.yml:

theme: plainwhite

And then execute:

$ bundle

Or install it yourself as:

$ gem install plainwhite

Usage

The "plainwhite" key in _config.yml is used to customize the theme data.

plainwhite:
  name: Adam Denisov
  tagline: Developer. Designer
  date_format: "%b %-d, %Y"

  social_links:
    twitter: samarsault
    github: samarsault
    linkedIn: in/samarsault # format: locale/username

Updating Placeholder Image

The placeholder portfolio image can be replaced by the desired image by placing it as assets/portfolio.png in your jekyll website, or by changing the following line in _config.yaml

plainwhite:
  portfolio_image:  "assets/portfolio.png" # the path from the base directory of the site to the image to display (no / at the start)

To use a different image for dark mode, e.g. with different colors that work better in dark mode, add a portfolio_image_dark entry in addition to the portfolio_image.

plainwhite:
  portfolio_image:      "assets/portfolio.png"
  portfolio_image_dark: "assets/portfolio_dark.png"

Comments (Disqus)

Comments on posts can be enabled by specifying your disqus_shortname under plainwhite in _config.yml. For example,

plainwhite:
  disqus_shortname: games

Google Analytics

It can be enabled by specifying your analytics id under plainwhite in _config.yml

plainwhite:
  analytics_id: "< YOUR ID >"

Sitemap

It can be toggled by the following line to under plainwhite in _config.yml

plainwhite:
  sitemap: true

Excerpts

Excerpts can be enabled by adding the following line to your _config.yml

show_excerpts: true

Layouts

Home
Page
Post

Navigation

Navigation can be enabled by adding the following line to your _config.yml

plainwhite:
  navigation:
    - title: My Work
      url: "/my-work"
    - title: Resume
      url: "/resume"

Mobile

By default, Plainwhite places the sidebar (logo, name, tagline etc.) above the content on mobile (narrow screens). To condense it (moving some things to the bottom of the page and making the rest smaller) so it takes up less space, add the following to your _config.yml:

plainwhite:
  condensed_mobile:
    - home
    - post
    - page

This chooses which layouts (types of page) should be condensed on mobile screens. E.g. if you want everything but the landing page to be condensed, remove home from the list. This option does not affect rendering on wider screens.

Dark mode

Dark mode can be enabled by setting the dark_mode flag in your _config.yml

The website will check the OS preferred color scheme and set the theme accordingly, the preference will then be saved in a cookie

plainwhite:
  dark_mode: true

plainwhite dark theme previe

Multiline tagline

Tagline can be multiline in this way

plainwhite:
  tagline: |
  First Line. 

  Second Line. 

  Third Line.

Search-bar

Search-bar can be enabled by adding the following line to config.yml

plainwhite:
  search: true

Search is powered by Simple-Jekyll-Search Jekyll plugin. A search.json containing post meta and contents will be generated in site root folder. Plugin JavaScript will then match for posts based on user input. More info and search.json customization documentation can be found in plugin repository.

Base URL

You can specify a custom base URL (eg. example.com/blog/) by adding the following line to _config.yaml. Note that there is no trailing slash on the URL.

baseurl: "/blog"

Language

You can set the lang attribute of the <html> tag on your pages by changing the following line in _config.yml:

plainwhite:
  html_lang: "en"

See here for a full list of available language codes

Demo: samarsault.com

plainwhite theme preview

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/samarsault/plainwhite-jekyll. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Development

To set up your environment to develop this theme, run bundle install.

Your theme is setup just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

When your theme is released, only the files in _layouts, _includes, _sass and assets tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in plainwhite.gemspec accordingly.

More themes

Texture

Download Details:

Author: Samarsault
Source Code: https://github.com/samarsault/plainwhite-jekyll
License: MIT license

#jekyll #theme

What is GEEK

Buddha Community

A Configurable Portfolio-style Jekyll Theme for Writers

React Native Dev

1652543820

Background Fetch for React Native Apps

react-native-background-fetch

Background Fetch is a very simple plugin which attempts to awaken an app in the background about every 15 minutes, providing a short period of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs.

There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible — you will never receive an event faster than 15 minutes. The operating-system will automatically throttle the rate the background-fetch events occur based upon usage patterns. Eg: if user hasn't turned on their phone for a long period of time, fetch events will occur less frequently or if an iOS user disables background refresh they may not happen at all.

:new: Background Fetch now provides a scheduleTask method for scheduling arbitrary "one-shot" or periodic tasks.

iOS

There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible — you will never receive an event faster than 15 minutes. The operating-system will automatically throttle the rate the background-fetch events occur based upon usage patterns. Eg: if user hasn't turned on their phone for a long period of time, fetch events will occur less frequently.
scheduleTask seems only to fire when the device is plugged into power.
⚠️ When your app is terminated, iOS no longer fires events — There is no such thing as stopOnTerminate: false for iOS.
iOS can take days before Apple's machine-learning algorithm settles in and begins regularly firing events. Do not sit staring at your logs waiting for an event to fire. If your simulated events work, that's all you need to know that everything is correctly configured.
If the user doesn't open your iOS app for long periods of time, iOS will stop firing events.

Android

The Android plugin provides a HeadlessJS implementation allowing you to continue handling events even after app-termination (see @config enableHeadless)

Installing the plugin

⚠️ If you have a previous version of react-native-background-fetch < 2.7.0 installed into react-native >= 0.60, you should first unlink your previous version as react-native link is no longer required.

$ react-native unlink react-native-background-fetch

With `yarn`

$ yarn add react-native-background-fetch

With `npm`

$ npm install --save react-native-background-fetch

Setup Guides

iOS Setup

`react-native >= 0.60`

Auto-linking Setup

Android Setup

`react-native >= 0.60`

Auto-linking Setup

Example

ℹ️ This repo contains its own Example App. See /example

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  FlatList,
  StatusBar,
} from 'react-native';

import {
  Header,
  Colors
} from 'react-native/Libraries/NewAppScreen';

import BackgroundFetch from "react-native-background-fetch";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      events: []
    };
  }

  componentDidMount() {
    // Initialize BackgroundFetch ONLY ONCE when component mounts.
    this.initBackgroundFetch();
  }

  async initBackgroundFetch() {
    // BackgroundFetch event handler.
    const onEvent = async (taskId) => {
      console.log('[BackgroundFetch] task: ', taskId);
      // Do your background work...
      await this.addEvent(taskId);
      // IMPORTANT:  You must signal to the OS that your task is complete.
      BackgroundFetch.finish(taskId);
    }

    // Timeout callback is executed when your Task has exceeded its allowed running-time.
    // You must stop what you're doing immediately BackgroundFetch.finish(taskId)
    const onTimeout = async (taskId) => {
      console.warn('[BackgroundFetch] TIMEOUT task: ', taskId);
      BackgroundFetch.finish(taskId);
    }

    // Initialize BackgroundFetch only once when component mounts.
    let status = await BackgroundFetch.configure({minimumFetchInterval: 15}, onEvent, onTimeout);

    console.log('[BackgroundFetch] configure status: ', status);
  }

  // Add a BackgroundFetch event to <FlatList>
  addEvent(taskId) {
    // Simulate a possibly long-running asynchronous task with a Promise.
    return new Promise((resolve, reject) => {
      this.setState(state => ({
        events: [...state.events, {
          taskId: taskId,
          timestamp: (new Date()).toString()
        }]
      }));
      resolve();
    });
  }

  render() {
    return (
      <>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
          <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={styles.scrollView}>
            <Header />

            <View style={styles.body}>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>BackgroundFetch Demo</Text>
              </View>
            </View>
          </ScrollView>
          <View style={styles.sectionContainer}>
            <FlatList
              data={this.state.events}
              renderItem={({item}) => (<Text>[{item.taskId}]: {item.timestamp}</Text>)}
              keyExtractor={item => item.timestamp}
            />
          </View>
        </SafeAreaView>
      </>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
});

export default App;

Executing Custom Tasks

In addition to the default background-fetch task defined by BackgroundFetch.configure, you may also execute your own arbitrary "oneshot" or periodic tasks (iOS requires additional Setup Instructions). However, all events will be fired into the Callback provided to BackgroundFetch#configure:

⚠️ iOS:

scheduleTask on iOS seems only to run when the device is plugged into power.
scheduleTask on iOS are designed for low-priority tasks, such as purging cache files — they tend to be unreliable for mission-critical tasks. scheduleTask will never run as frequently as you want.
The default fetch event is much more reliable and fires far more often.
scheduleTask on iOS stop when the user terminates the app. There is no such thing as stopOnTerminate: false for iOS.

// Step 1:  Configure BackgroundFetch as usual.
let status = await BackgroundFetch.configure({
  minimumFetchInterval: 15
}, async (taskId) => {  // <-- Event callback
  // This is the fetch-event callback.
  console.log("[BackgroundFetch] taskId: ", taskId);

  // Use a switch statement to route task-handling.
  switch (taskId) {
    case 'com.foo.customtask':
      print("Received custom task");
      break;
    default:
      print("Default fetch task");
  }
  // Finish, providing received taskId.
  BackgroundFetch.finish(taskId);
}, async (taskId) => {  // <-- Task timeout callback
  // This task has exceeded its allowed running-time.
  // You must stop what you're doing and immediately .finish(taskId)
  BackgroundFetch.finish(taskId);
});

// Step 2:  Schedule a custom "oneshot" task "com.foo.customtask" to execute 5000ms from now.
BackgroundFetch.scheduleTask({
  taskId: "com.foo.customtask",
  forceAlarmManager: true,
  delay: 5000  // <-- milliseconds
});

API Documentation

Config

Common Options

`@param {Integer} minimumFetchInterval [15]`

The minimum interval in minutes to execute background fetch events. Defaults to 15 minutes. Note: Background-fetch events will never occur at a frequency higher than every 15 minutes. Apple uses a secret algorithm to adjust the frequency of fetch events, presumably based upon usage patterns of the app. Fetch events can occur less often than your configured minimumFetchInterval.

`@param {Integer} delay (milliseconds)`

ℹ️ Valid only for BackgroundFetch.scheduleTask. The minimum number of milliseconds in future that task should execute.

`@param {Boolean} periodic [false]`

ℹ️ Valid only for BackgroundFetch.scheduleTask. Defaults to false. Set true to execute the task repeatedly. When false, the task will execute just once.

Android Options

`@config {Boolean} stopOnTerminate [true]`

Set false to continue background-fetch events after user terminates the app. Default to true.

`@config {Boolean} startOnBoot [false]`

Set true to initiate background-fetch events when the device is rebooted. Defaults to false.

❗ NOTE: startOnBoot requires stopOnTerminate: false.

`@config {Boolean} forceAlarmManager [false]`

By default, the plugin will use Android's JobScheduler when possible. The JobScheduler API prioritizes for battery-life, throttling task-execution based upon device usage and battery level.

Configuring forceAlarmManager: true will bypass JobScheduler to use Android's older AlarmManager API, resulting in more accurate task-execution at the cost of higher battery usage.

let status = await BackgroundFetch.configure({
  minimumFetchInterval: 15,
  forceAlarmManager: true
}, async (taskId) => {  // <-- Event callback
  console.log("[BackgroundFetch] taskId: ", taskId);
  BackgroundFetch.finish(taskId);
}, async (taskId) => {  // <-- Task timeout callback
  // This task has exceeded its allowed running-time.
  // You must stop what you're doing and immediately .finish(taskId)
  BackgroundFetch.finish(taskId);
});
.
.
.
// And with with #scheduleTask
BackgroundFetch.scheduleTask({
  taskId: 'com.foo.customtask',
  delay: 5000,       // milliseconds
  forceAlarmManager: true,
  periodic: false
});

`@config {Boolean} enableHeadless [false]`

Set true to enable React Native's Headless JS mechanism, for handling fetch events after app termination.

📂 index.js (MUST BE IN index.js):

import BackgroundFetch from "react-native-background-fetch";

let MyHeadlessTask = async (event) => {
  // Get task id from event {}:
  let taskId = event.taskId;
  let isTimeout = event.timeout;  // <-- true when your background-time has expired.
  if (isTimeout) {
    // This task has exceeded its allowed running-time.
    // You must stop what you're doing immediately finish(taskId)
    console.log('[BackgroundFetch] Headless TIMEOUT:', taskId);
    BackgroundFetch.finish(taskId);
    return;
  }
  console.log('[BackgroundFetch HeadlessTask] start: ', taskId);

  // Perform an example HTTP request.
  // Important:  await asychronous tasks when using HeadlessJS.
  let response = await fetch('https://reactnative.dev/movies.json');
  let responseJson = await response.json();
  console.log('[BackgroundFetch HeadlessTask] response: ', responseJson);

  // Required:  Signal to native code that your task is complete.
  // If you don't do this, your app could be terminated and/or assigned
  // battery-blame for consuming too much time in background.
  BackgroundFetch.finish(taskId);
}

// Register your BackgroundFetch HeadlessTask
BackgroundFetch.registerHeadlessTask(MyHeadlessTask);

`@config {integer} requiredNetworkType [BackgroundFetch.NETWORK_TYPE_NONE]`

Set basic description of the kind of network your job requires.

If your job doesn't need a network connection, you don't need to use this option as the default value is BackgroundFetch.NETWORK_TYPE_NONE.

NetworkType	Description
`BackgroundFetch.NETWORK_TYPE_NONE`	This job doesn't care about network constraints, either any or none.
`BackgroundFetch.NETWORK_TYPE_ANY`	This job requires network connectivity.
`BackgroundFetch.NETWORK_TYPE_CELLULAR`	This job requires network connectivity that is a cellular network.
`BackgroundFetch.NETWORK_TYPE_UNMETERED`	This job requires network connectivity that is unmetered. Most WiFi networks are unmetered, as in "you can upload as much as you like".
`BackgroundFetch.NETWORK_TYPE_NOT_ROAMING`	This job requires network connectivity that is not roaming (being outside the country of origin)

`@config {Boolean} requiresBatteryNotLow [false]`

Specify that to run this job, the device's battery level must not be low.

This defaults to false. If true, the job will only run when the battery level is not low, which is generally the point where the user is given a "low battery" warning.

`@config {Boolean} requiresStorageNotLow [false]`

Specify that to run this job, the device's available storage must not be low.

This defaults to false. If true, the job will only run when the device is not in a low storage state, which is generally the point where the user is given a "low storage" warning.

`@config {Boolean} requiresCharging [false]`

Specify that to run this job, the device must be charging (or be a non-battery-powered device connected to permanent power, such as Android TV devices). This defaults to false.

`@config {Boolean} requiresDeviceIdle [false]`

When set true, ensure that this job will not run if the device is in active use.

The default state is false: that is, the for the job to be runnable even when someone is interacting with the device.

This state is a loose definition provided by the system. In general, it means that the device is not currently being used interactively, and has not been in use for some time. As such, it is a good time to perform resource heavy jobs. Bear in mind that battery usage will still be attributed to your application, and shown to the user in battery stats.

Methods

Method Name	Arguments	Returns	Notes
`configure`	`{FetchConfig}`, `callbackFn`, `timeoutFn`	`Promise<BackgroundFetchStatus>`	Configures the plugin's `callbackFn` and `timeoutFn`. This callback will fire each time a background-fetch event occurs in addition to events from `#scheduleTask`. The `timeoutFn` will be called when the OS reports your task is nearing the end of its allowed background-time.
`scheduleTask`	`{TaskConfig}`	`Promise<boolean>`	Executes a custom task. The task will be executed in the same `Callback` function provided to `#configure`.
`status`	`callbackFn`	`Promise<BackgroundFetchStatus>`	Your callback will be executed with the current `status (Integer)` `0: Restricted`, `1: Denied`, `2: Available`. These constants are defined as `BackgroundFetch.STATUS_RESTRICTED`, `BackgroundFetch.STATUS_DENIED`, `BackgroundFetch.STATUS_AVAILABLE` (NOTE: Android will always return `STATUS_AVAILABLE`)
`finish`	`String taskId`	`Void`	You MUST call this method in your `callbackFn` provided to `#configure` in order to signal to the OS that your task is complete. iOS provides only 30s of background-time for a fetch-event -- if you exceed this 30s, iOS will kill your app.
`start`	`none`	`Promise<BackgroundFetchStatus>`	Start the background-fetch API. Your `callbackFn` provided to `#configure` will be executed each time a background-fetch event occurs. NOTE the `#configure` method automatically calls `#start`. You do not have to call this method after you `#configure` the plugin
`stop`	`[taskId:String]`	`Promise<boolean>`	Stop the background-fetch API and all `#scheduleTask` from firing events. Your `callbackFn` provided to `#configure` will no longer be executed. If you provide an optional `taskId`, only that `#scheduleTask` will be stopped.

Debugging

iOS

🆕 `BGTaskScheduler` API for iOS 13+

⚠️ At the time of writing, the new task simulator does not yet work in Simulator; Only real devices.
See Apple docs Starting and Terminating Tasks During Development
After running your app in XCode, Click the [||] button to initiate a Breakpoint.
In the console (lldb), paste the following command (Note: use cursor up/down keys to cycle through previously run commands):

e -l objc -- (void)[[BGTaskScheduler sharedScheduler] _simulateLaunchForTaskWithIdentifier:@"com.transistorsoft.fetch"]

Click the [ > ] button to continue. The task will execute and the Callback function provided to BackgroundFetch.configure will receive the event.

Simulating task-timeout events

Only the new BGTaskScheduler api supports simulated task-timeout events. To simulate a task-timeout, your fetchCallback must not call BackgroundFetch.finish(taskId):

let status = await BackgroundFetch.configure({
  minimumFetchInterval: 15
}, async (taskId) => {  // <-- Event callback.
  // This is the task callback.
  console.log("[BackgroundFetch] taskId", taskId);
  //BackgroundFetch.finish(taskId); // <-- Disable .finish(taskId) when simulating an iOS task timeout
}, async (taskId) => {  // <-- Event timeout callback
  // This task has exceeded its allowed running-time.
  // You must stop what you're doing and immediately .finish(taskId)
  print("[BackgroundFetch] TIMEOUT taskId:", taskId);
  BackgroundFetch.finish(taskId);
});

Now simulate an iOS task timeout as follows, in the same manner as simulating an event above:

e -l objc -- (void)[[BGTaskScheduler sharedScheduler] _simulateExpirationForTaskWithIdentifier:@"com.transistorsoft.fetch"]

Old `BackgroundFetch` API

Simulate background fetch events in XCode using Debug->Simulate Background Fetch
iOS can take some hours or even days to start a consistently scheduling background-fetch events since iOS schedules fetch events based upon the user's patterns of activity. If Simulate Background Fetch works, your can be sure that everything is working fine. You just need to wait.

Android

Observe plugin logs in $ adb logcat:

$ adb logcat *:S ReactNative:V ReactNativeJS:V TSBackgroundFetch:V

Simulate a background-fetch event on a device (insert <your.application.id>) (only works for sdk 21+:

$ adb shell cmd jobscheduler run -f <your.application.id> 999

For devices with sdk <21, simulate a "Headless JS" event with (insert <your.application.id>)

$ adb shell am broadcast -a <your.application.id>.event.BACKGROUND_FETCH

Download Details:
Author: transistorsoft
Source Code: https://github.com/transistorsoft/react-native-background-fetch
License: MIT license

#react #reactnative #mobileapp #javascript

Gordon Matlala

1667309968

A Configurable Portfolio-style Jekyll Theme for Writers

Plainwhite

Simplistic jekyll portfolio-style theme for writers.

Installation on Github Pages

Add this line to your site's _config.yml:

remote_theme: samarsault/plainwhite-jekyll

Installation

Add this line to your Jekyll site's Gemfile:

gem "plainwhite"

And add this line to your Jekyll site's _config.yml:

theme: plainwhite

And then execute:

$ bundle

Or install it yourself as:

$ gem install plainwhite

Usage

The "plainwhite" key in _config.yml is used to customize the theme data.

plainwhite:
  name: Adam Denisov
  tagline: Developer. Designer
  date_format: "%b %-d, %Y"

  social_links:
    twitter: samarsault
    github: samarsault
    linkedIn: in/samarsault # format: locale/username

Updating Placeholder Image

The placeholder portfolio image can be replaced by the desired image by placing it as assets/portfolio.png in your jekyll website, or by changing the following line in _config.yaml

plainwhite:
  portfolio_image:  "assets/portfolio.png" # the path from the base directory of the site to the image to display (no / at the start)

To use a different image for dark mode, e.g. with different colors that work better in dark mode, add a portfolio_image_dark entry in addition to the portfolio_image.

plainwhite:
  portfolio_image:      "assets/portfolio.png"
  portfolio_image_dark: "assets/portfolio_dark.png"

Comments (Disqus)

Comments on posts can be enabled by specifying your disqus_shortname under plainwhite in _config.yml. For example,

plainwhite:
  disqus_shortname: games

Google Analytics

It can be enabled by specifying your analytics id under plainwhite in _config.yml

plainwhite:
  analytics_id: "< YOUR ID >"

Sitemap

It can be toggled by the following line to under plainwhite in _config.yml

plainwhite:
  sitemap: true

Excerpts

Excerpts can be enabled by adding the following line to your _config.yml

show_excerpts: true

Layouts

Home
Page
Post

Navigation

Navigation can be enabled by adding the following line to your _config.yml

plainwhite:
  navigation:
    - title: My Work
      url: "/my-work"
    - title: Resume
      url: "/resume"

Mobile

plainwhite:
  condensed_mobile:
    - home
    - post
    - page

Dark mode

Dark mode can be enabled by setting the dark_mode flag in your _config.yml

The website will check the OS preferred color scheme and set the theme accordingly, the preference will then be saved in a cookie

plainwhite:
  dark_mode: true

plainwhite dark theme previe

Multiline tagline

Tagline can be multiline in this way

plainwhite:
  tagline: |
  First Line. 

  Second Line. 

  Third Line.

Search-bar

Search-bar can be enabled by adding the following line to config.yml

plainwhite:
  search: true

Base URL

You can specify a custom base URL (eg. example.com/blog/) by adding the following line to _config.yaml. Note that there is no trailing slash on the URL.

baseurl: "/blog"

Language

You can set the lang attribute of the <html> tag on your pages by changing the following line in _config.yml:

plainwhite:
  html_lang: "en"

See here for a full list of available language codes

Demo: samarsault.com

plainwhite theme preview

Contributing

Development

To set up your environment to develop this theme, run bundle install.

More themes

Texture

Download Details:

Author: Samarsault
Source Code: https://github.com/samarsault/plainwhite-jekyll
License: MIT license

#jekyll #theme

Gordon Matlala

1666711620

Jekyll-theme-yat: Jekyll Theme for Elegant Writers

JEKYLL YAT THEME

Jekyll theme for elegant writers.

Built with ❤︎ by jeffreytse and contributors

Hey, nice to meet you, you found this Jekyll theme. Here the YAT (Yet Another Theme) is a modern responsive theme. It's quite clear, clean and neat for writers and posts. If you are an elegant writer and focus on content, don't miss it.

Features

Support beautiful Night Mode.
Modern responsive web design.
Full layouts home, post, tags, archive and about.
Uses font awesome 5 for icons.
Beautiful page banner with image and video.
Beautiful Syntax Highlight using highlight.js.
RSS support using Jekyll Feed gem.
Optimized for search engines using Jekyll Seo Tag gem.
Sitemap support using Jekyll Sitemap gem.
Complex and flexible table support using Jekyll Spaceship gem.
MathJAX and LaTeX optional support using Jekyll Spaceship gem.
Media (Youtube, Spotify, etc.) support using Jekyll Spaceship gem.
Diagram (PlantUML, Mermaid) support using Jekyll Spaceship gem.
Google Translation support.
New post tag support.

Also, visit the Live Demo site for the theme.

Installation

There are three ways to install:

As a gem-based theme.
As a remote theme (GitHub Pages compatible).
Forking/directly copying all of the theme files into your project.

Gem-based Theme Method

Add this line to your Jekyll site's Gemfile:

gem "jekyll-theme-yat"

And add this line to your Jekyll site's _config.yml:

theme: jekyll-theme-yat

And then execute:

$ bundle

Or install it yourself as:

$ gem install jekyll-theme-yat

Remote Theme Method with GitHub Pages

Remote themes are similar to Gem-based themes, but do not require Gemfile changes or whitelisting making them ideal for sites hosted with GitHub Pages.

To install:

Add this line to your Jekyll site's Gemfile:

gem "github-pages", group: :jekyll_plugins

And add this line to your Jekyll site's _config.yml:

# theme: owner/name --> Don't forget to remove/comment the gem-based theme option
remote_theme: "jeffreytse/jekyll-theme-yat"

And then execute:

$ bundle

GitHub Pages without limitation

GitHub Pages runs in safe mode and only allows a set of whitelisted plugins/themes. In other words, the third-party gems will not work normally.

To use the third-party gem in GitHub Pages without limitation:

Here is a GitHub Action named jekyll-deploy-action for Jekyll site deployment conveniently. 👍

Usage

Add or update your available layouts, includes, sass and/or assets.

Development

To set up your environment to develop this theme, run bundle install.

When your theme is released, only the files in _data, _layouts, _includes, _sass and assets tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in jekyll-theme-yat.gemspec accordingly.

Contributing

Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.

You can start by opening an issue describing the problem that you're looking to resolve and we'll go from there.

Screenshots

demo-screenshot

BANNER

demo-screenshot

Download Details:

Author: jeffreytse
Source Code: https://github.com/jeffreytse/jekyll-theme-yat
License: MIT license

#jekyll #theme #blog #website

Gordon Matlala

1666699680

Mundana-theme-jekyll: Mundana Is A Free Jekyll Theme, Medium Styled

Jekyll Theme - Mundana by WowThemes.net

Documentation

How to install & use

Contribute to Mundana repository

In the top-right corner of this page, click Fork.

Clone a copy of your fork on your local, replacing YOUR-USERNAME with your Github username.

git clone https://github.com/YOUR-USERNAME/mundana-theme-jekyll.git

Create a branch:

git checkout -b <my-new-feature-or-fix>

Make necessary changes and commit those changes:

git add .

git commit -m "new feature or fix"

Push changes, replacing <add-your-branch-name> with the name of the branch you created earlier at step #3. :

git push origin <add-your-branch-name>

Submit your changes for review. Go to your repository on GitHub, you'll see a Compare & pull request button. Click on that button. Now submit the pull request.

That's it! Soon I'll be merging your changes into the master branch of this project. You will get a notification email once the changes have been merged. Thank you for your contribution.

Live Demo

Download Details:

Author: Wowthemesnet
Source Code: https://github.com/wowthemesnet/mundana-theme-jekyll
License: MIT license

#jekyll #theme

Gordon Matlala

1667313807

A Jekyll Version Of The "Prologue" Theme By HTML5 UP

⚠️ Unmaintained ⚠️

Prologue - Jekyll Theme

This is Prologue, a simple, single page responsive site template from HTML5 UP, now available as a blog-aware Jekyll theme from Chris Bobbe. It features a clean, minimalistic design and a sticky sidebar with navigation-linked scrolling.

Demo: https://chrisbobbe.github.io/jekyll-theme-prologue/

Added Features

Blogging and multi-page features you expect from Jekyll
Compatible with GitHub Pages
Formspree.io contact form integration - just add your email to the _config.yml and it works!
Build your homepage with custom scrolly sections in the _sections folder
Set a cover photo for any section (not just the first), with alt text for screen readers and SEO
Add your social profiles easily in _config.yml.
Automatic search engine optimization (SEO) meta tags based on info you provide in _config.yml and frontmatter
Google Analytics built-in; just put your Tracking ID in _config.yml as google_analytics
Custom 404 page (called 404.html; to activate, move it to your project directory).

Installation

There are two ways to get started (choose one):

Install the jekyll-theme-prologue gem. Instructions are in the Jekyll docs. After running bundle install, you can find the theme files by running open $(bundle show jekyll-theme-prologue). A sample working _config.yml file ships with the gem; if you want to activate it, move it to your project's root directory. It will do nothing until you move it there, replacing the default _config.yml file.
Fork or clone the GitHub repository. If you want to use GitHub Pages, create a branch named gh-pages, and replace theme: jekyll-theme-prologue with remote_theme: chrisbobbe/jekyll-theme-prologue in the provided _config.yml (GitHub Pages now supports open-source themes on GitHub).

Next, make sure that url and base_url are set for your own website in _config.yml. For local testing, make them both blank. Add a photo avatar to your project, then set avatar: path/to/your/avatar.jpg in _config.yml; for example, avatar: assets/images/avatar.jpg (48x48 pixels works best). Poke around the sample _config.yml file to see how you can add your social profiles.

Build your homepage

Your _config.yml file must include the following line or your homepage won't work: collections: [sections]. This tells Jekyll to look in the _sections folder (which you will create) for your content and render it all on one page.

Create a _sections folder in your project's root directory and start adding content to your homepage. Set a cover photo in any of the sections by adding cover-photo: path/to/photo.jpg and cover-photo-alt: your alt text here to the section's frontmatter. Sample content is provided in the GitHub repository.

All new sections should be added as html or Markdown documents in the _sections folder. The following section variables can be set with frontmatter:

title (required)
order (required; orders the sequence of sections on the page. Example: 1)
cover-photo (optional; sets a background image for the section. Example: assets/images/banner.jpg)
cover-photo-alt (required if using a cover photo. Describes the photo for screen readers and SEO; e.g. "Dome of Light art installation, Kaohsiung, Taiwan")
icon (optional; see Font Awesome for icon codes. Example: fa-github)
icon-style (optional; "solid" is default, "regular" for outline style icons, or "brands" for logos)
auto-header (optional; "use-title" is default, "none" for no header, or custom header text)
hide (optional; if true, the section won't appear)

Start blogging!

Jekyll has great resources to get you started writing blog posts. Check out this Jekyll Docs page first. When you've written a post or two, copy the following into a new file in your project directory called blog.html, and you'll see a link to your blog from the homepage:

---
layout: blog
title: My Blog
---

-- and that's it!

Add a page

To add a page, just make a new .html or .md file in your project directory. There's an example called reading-list provided with the GitHub repository. Add this frontmatter:

---
title: My New Page
layout: page
---

You can also set these page variables in the frontmatter, if you want:

subtitle
order (orders links in the nav menu, e.g. 1)
icon (optional; see Font Awesome for icon codes. Example: fa-github)
icon-style (optional; "solid" is default, "regular" for outline style icons, or "brands" for logos)
hide (optional; if true, a link won't appear in the nav menu. All this does is remove the nav link; your page will still be served to anyone who has the URL.)

This same set of frontmatter variables (including title) can also be set in index.md and blog.html. You may want to give them titles, or hide the homepage link with hide: true if the homepage is the only page.

For advanced SEO, this theme also lets you add permalink (see Jekyll Docs), robots (string, e.g. "noindex, nofollow"), and canonical (boolean; true is default) to any page or post.

Contributing

Please feel free to submit issues and feature requests!

Credits

Thanks to @andrewbanchich for his many Jekyll adaptations of HTML5 UP's elegant themes, which helped and inspired me, and of course many thanks to HTML5 UP.

Original README from HTML5 UP:

Prologue by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)


This is Prologue, a simple, single page responsive site template. It features a
clean, minimalistic design and a sticky sidebar with navigation-linked scrolling.

Demo content images* are courtesy of the ridiculously talented Felicia Simion. Check out
more of her amazing work over at deviantART:

http://ineedchemicalx.deviantart.com/

(* = Not included! Only meant for use with my own on-site demo, so please do NOT download
and/or use any of Felicia's work without her explicit permission!)

Demo banner images* courtesy of Unsplash, a radtastic collection of CC0 (public domain)
images you can use for pretty much whatever.

(* = Not included)

AJ
aj@lkn.io | @ajlkn

PS: Not sure how to get that contact form working? Give formspree.io a try (it's awesome).


Credits:

    Demo Images:
        Felicia Simion (ineedchemicalx.deviantart.com)
        Unsplash (unsplash.com)

    Icons:
        Font Awesome (fortawesome.github.com/Font-Awesome)

    Other
        jQuery (jquery.com)
        html5shiv.js (@afarkas @jdalton @jon_neal @rem)
        CSS3 Pie (css3pie.com)
        background-size polyfill (github.com/louisremi)
        Respond.js (j.mp/respondjs)
        jquery.scrolly (@ajlkn)
        jquery.scrollzer (@ajlkn)
        Skel (skel.io)

Download Details:

Author: Chrisbobbe
Source Code: https://github.com/chrisbobbe/jekyll-theme-prologue
License: View license

#jekyll #theme #blog #portfolio

A Configurable Portfolio-style Jekyll Theme for Writers

Plainwhite

Installation on Github Pages

Installation

Usage

Demo: samarsault.com

Contributing

Development

More themes

Download Details:

What is GEEK

Buddha Community

Background Fetch for React Native Apps

react-native-background-fetch

iOS

Android

Installing the plugin

With yarn

With npm

Setup Guides

iOS Setup

react-native >= 0.60

Android Setup

react-native >= 0.60

Example

Executing Custom Tasks

⚠️ iOS:

Config

Common Options

@param {Integer} minimumFetchInterval [15]

@param {Integer} delay (milliseconds)

@param {Boolean} periodic [false]

Android Options

@config {Boolean} stopOnTerminate [true]

@config {Boolean} startOnBoot [false]

@config {Boolean} forceAlarmManager [false]

@config {Boolean} enableHeadless [false]

@config {integer} requiredNetworkType [BackgroundFetch.NETWORK_TYPE_NONE]

@config {Boolean} requiresBatteryNotLow [false]

@config {Boolean} requiresStorageNotLow [false]

@config {Boolean} requiresCharging [false]

@config {Boolean} requiresDeviceIdle [false]

Methods

Debugging

iOS

🆕 BGTaskScheduler API for iOS 13+

Simulating task-timeout events

Old BackgroundFetch API

Android

A Configurable Portfolio-style Jekyll Theme for Writers

Plainwhite

Installation on Github Pages

Installation

Usage

Demo: samarsault.com

Contributing

Development

More themes

Download Details:

Jekyll-theme-yat: Jekyll Theme for Elegant Writers

JEKYLL YAT THEME

Features

Installation

Gem-based Theme Method

Remote Theme Method with GitHub Pages

GitHub Pages without limitation

Usage

Development

Contributing

Screenshots

BANNER

Download Details:

Mundana-theme-jekyll: Mundana Is A Free Jekyll Theme, Medium Styled

Jekyll Theme - Mundana by WowThemes.net

Documentation

Contribute to Mundana repository

Live Demo

Download Details:

A Jekyll Version Of The "Prologue" Theme By HTML5 UP

Download Details:

With `yarn`

With `npm`

`react-native >= 0.60`

`react-native >= 0.60`

`@param {Integer} minimumFetchInterval [15]`

`@param {Integer} delay (milliseconds)`

`@param {Boolean} periodic [false]`

`@config {Boolean} stopOnTerminate [true]`

`@config {Boolean} startOnBoot [false]`

`@config {Boolean} forceAlarmManager [false]`

`@config {Boolean} enableHeadless [false]`

`@config {integer} requiredNetworkType [BackgroundFetch.NETWORK_TYPE_NONE]`

`@config {Boolean} requiresBatteryNotLow [false]`

`@config {Boolean} requiresStorageNotLow [false]`

`@config {Boolean} requiresCharging [false]`

`@config {Boolean} requiresDeviceIdle [false]`

🆕 `BGTaskScheduler` API for iOS 13+

Old `BackgroundFetch` API