Gordon  Matlala

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

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

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

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

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

Android Setup

react-native >= 0.60

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.

NetworkTypeDescription
BackgroundFetch.NETWORK_TYPE_NONEThis job doesn't care about network constraints, either any or none.
BackgroundFetch.NETWORK_TYPE_ANYThis job requires network connectivity.
BackgroundFetch.NETWORK_TYPE_CELLULARThis job requires network connectivity that is a cellular network.
BackgroundFetch.NETWORK_TYPE_UNMETEREDThis 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_ROAMINGThis 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 NameArgumentsReturnsNotes
configure{FetchConfig}, callbackFn, timeoutFnPromise<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.
statuscallbackFnPromise<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)
finishString taskIdVoidYou 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.
startnonePromise<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

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

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

Download Details:

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

#jekyll #theme 

Gordon  Matlala

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:

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.

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 _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

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

Live Demo

mundana jekyll theme screenshot

Download Details:

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

#jekyll #theme 

Gordon  Matlala

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/

Prologue Theme

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):

  1. 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.
  2. 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