initial commit

assets/index.php

@@ -0,0 +1 @@
+<?php // Silence is golden

embed-block-for-github.php

@@ -0,0 +1,144 @@
+<?php
+/**
+ * @link              https://jeanbaptisteaudras.com
+ * @since             0.1
+ * @package           GitHub Embed Block
+ *
+ * Plugin Name:       GitHub Embed Block
+ * Plugin URI:        https://jeanbaptisteaudras.com/embed-block-for-github-gutenberg-wordpress/
+ * Description:       Easily embed GitHub repositories in Gutenberg Editor.
+ * Version:           0.1
+ * Author:            audrasjb
+ * Author URI:        https://jeanbaptisteaudras.com
+ * License:           GPL-2.0+
+ * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
+ * Text Domain:       embed-block-for-github
+ */
+
+// If this file is called directly, abort.
+if ( ! defined( 'WPINC' ) ) {
+	die;
+}
+
+function ebg_embed_repository( $attributes ) {
+
+	$github_url = trim( $attributes['github_url'] );
+
+	if ( '' === trim( $github_url ) ) {
+		$content = '<p>Use the Sidebar to add the URL of the GitHub Repository to embed.</p>';
+	} else {
+		if ( filter_var( $github_url, FILTER_VALIDATE_URL ) ) {
+			if ( strpos( $github_url, 'https://github.com/' ) === 0 ) {
+				if ( get_transient( '_ebg_repository_' . sanitize_title_with_dashes( $github_url ) ) ) {
+					$data = json_decode( get_transient( '_ebg_repository_' . sanitize_title_with_dashes( $github_url ) ) );
+					$content = '
+<div class="ebg-br-wrapper">
+	<img class="ebg-br-header-logo" src="' . plugin_dir_url( __FILE__ ) . '/images/github.svg" alt="' . esc_html__( 'GitHub Card', 'embed-block-for-github' ) . '" />
+	<div class="ebg-br-avatar">
+		<img class="ebg-br-header-avatar" src="' . $data->owner->avatar_url . '" alt="" width="150" height="150" />
+	</div>
+	<div class="ebg-br-main">
+		<p class="ebg-br-title">
+			<strong><a target="_blank" rel="noopener noreferrer" href="' . $data->html_url . '">' . $data->name . ' <span class="screen-reader-text">(' . esc_html__( 'this link opens in a new window', 'embed-block-for-github' ) . ')</span></a></strong>
+			<em>by <a target="_blank" rel="noopener noreferrer" href="' . $data->owner->html_url . '">' . $data->owner->login . ' <span class="screen-reader-text">(' . esc_html__( 'this link opens in a new window', 'embed-block-for-github' ) . ')</span></a></em>
+		</p>
+		<p class="ebg-br-description">' . $data->description . '</p>
+		<p class="ebg-br-footer">
+			<span class="ebg-br-subscribers">
+				<img src="' . plugin_dir_url( __FILE__ ) . '/images/subscribe.svg" alt="" /> 
+				' . $data->subscribers_count . ' ' . esc_html__( 'Subscribers', 'embed-block-for-github' ) . '
+			</span>
+			<span class="ebg-br-watchers">
+				<img src="' . plugin_dir_url( __FILE__ ) . '/images/watch.svg" alt="" /> 
+				' . $data->watchers_count . ' ' . esc_html__( 'Watchers', 'embed-block-for-github' ) . '
+			</span>
+			<span class="ebg-br-forks">
+				<img src="' . plugin_dir_url( __FILE__ ) . '/images/fork.svg" alt="" /> 
+				' . $data->forks_count . ' ' . esc_html__( 'Forks', 'embed-block-for-github' ) . '
+			</span>
+			<a target="_blank" rel="noopener noreferrer" class="ebg-br-link" href="' . $data->html_url . '">' . esc_html__( 'Check out this repository on GitHub.com', 'embed-block-for-github' ) . ' <span class="screen-reader-text">(' . esc_html__( 'this link opens in a new window', 'embed-block-for-github' ) . ')</span></a>
+		</p>
+	</div>
+</div>
+					';
+				} else {
+					$slug = str_replace( 'https://github.com/', '', $github_url );
+					$request = wp_remote_get( 'https://api.github.com/repos/' . $slug );
+					$body = wp_remote_retrieve_body( $request );
+					$data = json_decode( $body );
+					if ( ! is_wp_error( $response ) ) {
+						set_transient( '_ebg_repository_' . sanitize_title_with_dashes( $github_url ), json_encode( $data ) );
+						$content = '
+<div class="ebg-br-wrapper">
+	<img class="ebg-br-header-logo" src="' . plugin_dir_url( __FILE__ ) . '/images/github.svg" alt="' . esc_html__( 'GitHub Card', 'embed-block-for-github' ) . '" />
+	<div class="ebg-br-avatar">
+		<img class="ebg-br-header-avatar" src="' . $data->owner->avatar_url . '" alt="" width="150" height="150" />
+	</div>
+	<div class="ebg-br-main">
+		<p class="ebg-br-title">
+			<strong><a target="_blank" rel="noopener noreferrer" href="' . $data->html_url . '">' . $data->name . ' <span class="screen-reader-text">(' . esc_html__( 'this link opens in a new window', 'embed-block-for-github' ) . ')</span></a></strong>
+			<em>by <a target="_blank" rel="noopener noreferrer" href="' . $data->owner->html_url . '">' . $data->owner->login . ' <span class="screen-reader-text">(' . esc_html__( 'this link opens in a new window', 'embed-block-for-github' ) . ')</span></a></em>
+		</p>
+		<p class="ebg-br-description">' . $data->description . '</p>
+		<p class="ebg-br-footer">
+			<span class="ebg-br-subscribers">
+				<img src="' . plugin_dir_url( __FILE__ ) . '/images/subscribe.svg" alt="" /> 
+				' . $data->subscribers_count . ' ' . esc_html__( 'Subscribers', 'embed-block-for-github' ) . '
+			</span>
+			<span class="ebg-br-watchers">
+				<img src="' . plugin_dir_url( __FILE__ ) . '/images/watch.svg" alt="" /> 
+				' . $data->watchers_count . ' ' . esc_html__( 'Watchers', 'embed-block-for-github' ) . '
+			</span>
+			<span class="ebg-br-forks">
+				<img src="' . plugin_dir_url( __FILE__ ) . '/images/fork.svg" alt="" /> 
+				' . $data->forks_count . ' ' . esc_html__( 'Forks', 'embed-block-for-github' ) . '
+			</span>
+			<a target="_blank" rel="noopener noreferrer" class="ebg-br-link" href="' . $data->html_url . '">' . esc_html__( 'Check out this repository on GitHub.com', 'embed-block-for-github' ) . ' <span class="screen-reader-text">(' . esc_html__( 'this link opens in a new window', 'embed-block-for-github' ) . ')</span></a>
+		</p>
+	</div>
+</div>
+						';
+					} else {
+						$content = '<p>' . esc_html__( 'No information available. Please check your URL.', 'embed-block-for-github' ) . '</p>';
+					}
+				}
+			} else {
+				$content = '<p>' . esc_html__( 'Use the Sidebar to add the URL of the GitHub Repository to embed.', 'embed-block-for-github' ) . '</p>';
+			}
+		} else {
+			$content = '<p>' . esc_html__( 'Use the Sidebar to add the URL of the GitHub Repository to embed.', 'embed-block-for-github' ) . '</p>';
+		}
+	}
+
+	return $content;
+}
+function ebg_enqueue_scripts() {
+	wp_register_script(
+		'ebg-repository-editor',
+		plugins_url( 'repository-block.js', __FILE__ ),
+		array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
+		filemtime( plugin_dir_path( __FILE__ ) . 'repository-block.js' )
+	);
+	wp_register_style(
+		'ebg-repository-editor',
+		plugins_url( 'repository-block.css', __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . 'repository-block.css' )
+	);
+	wp_register_style(
+		'ebg-repository',
+		plugins_url( 'repository-block.css', __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . 'repository-block.css' )
+	);
+	register_block_type( 'embed-block-for-github/repository', array(
+		'editor_script'   => 'ebg-repository-editor',
+		'editor_style'    => 'ebg-repository-editor',
+		'style'           => 'ebg-repository',
+		'render_callback' => 'ebg_embed_repository',
+		'attributes'      => array(
+			'github_url' => array( 'type' => 'string' ),
+		),
+	) );
+}
+add_action( 'init', 'ebg_enqueue_scripts' );

images/index.php

@@ -0,0 +1 @@
+<?php // Silence is golden

index.php

@@ -0,0 +1 @@
+<?php // Silence is golden

readme.txt

@@ -0,0 +1,33 @@
+=== Embed Block for GitHub ===
+Contributors: audrasjb, whodunitagency
+Donate link: https://www.paypal.me/audrasjb
+Tags: GitHub, embed, block, Gutenberg, bloc, gist, git, repository, card
+Requires at least: 5.2
+Tested up to: 5.3
+Stable tag: 0.1
+Requires PHP: 5.6
+License: GPLv2
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+Easily embed GitHub repositories in Gutenberg Editor.
+
+== Description ==
+
+This plugin adds a GitHub Repository Embed Block to the Block Editor.
+
+== Screenshots ==
+
+1. Insert GiHub Repo Block.
+1. Embed your GitHub Repositories in your Post content.
+2. Integrates well with your theme stylesheet.
+
+== Installation ==
+
+1. Install the plugin and activate.
+2. Go to the editor and choose GitHub Repo block.
+3. Add the URL of the repository and see the magic happen.
+
+== Changelog ==
+
+= 0.1 =
+* Plugin initial commit. Works fine :)

repository-block.css

@@ -0,0 +1,102 @@
+.ebg-br-wrapper {
+	position: relative;
+	display: flex;
+	margin: 1em 0 1.5em 0;
+	padding: 1em;
+	border: 1px solid #eee;
+	border-radius: .5em;	
+	font-family: 'Helvetica Neue', arial, sans-serif !important;
+	color: #333;
+}
+.ebg-br-wrapper .ebg-br-header-logo {
+	position: absolute;
+	top: 0.5em;
+	right: 0.5em;
+	width: 20px;
+	height: 20px;
+}
+.ebg-br-wrapper .ebg-br-avatar {
+	display: inline-block;
+	margin: 0 1em 0 0;
+	min-width: 150px;
+}
+.ebg-br-wrapper .ebg-br-header-avatar {
+	max-width: 150px;
+	border-radius: 50%;
+}
+.ebg-br-wrapper .ebg-br-header {
+	margin: 0;
+	padding: 0;
+	font-size: 1em;
+	text-transform: uppercase;
+}
+.ebg-br-wrapper .ebg-br-avatar .ebg-br-header-avatar {
+}
+.ebg-br-wrapper .ebg-br-main {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+}
+.ebg-br-wrapper .ebg-br-title {
+	margin: 0;
+	padding: 0;
+	font-size: 1em;
+	line-height: 1.2em;
+}
+.ebg-br-wrapper .ebg-br-title strong {
+	display: block;
+}
+.ebg-br-wrapper .ebg-br-title em {
+	display: block;
+	font-size: 0.7em;	
+}
+.ebg-br-wrapper .ebg-br-title a {
+}
+.ebg-br-wrapper .ebg-br-title a:hover, .ebg-br-title a:focus, ebg-br-title a:active {
+}
+.ebg-br-wrapper .ebg-br-description {
+	margin: .5em 0 0;
+	padding: 0;
+	font-size: 0.8em;
+	line-height: 1.2em;
+}
+.ebg-br-wrapper .ebg-br-footer {
+	margin: .5em 0 0;
+	padding: 0;
+	font-size: 0.7em;
+	line-height: 1.2em;
+}
+.ebg-br-wrapper .ebg-br-subscribers img {
+	position: relative;
+	top: 2px;
+	width: 16px;	
+	height: 16px;
+}
+.ebg-br-wrapper .ebg-br-watchers img {
+	position: relative;
+	top: 2px;
+	width: 16px;	
+	height: 16px;
+}
+.ebg-br-wrapper .ebg-br-forks img {
+	position: relative;
+	top: 2px;
+	width: 16px;	
+	height: 16px;
+}
+.ebg-br-wrapper .ebg-br-link {
+	display: block;
+	margin: .5em 0 0;	
+}
+.ebg-br-wrapper .screen-reader-text {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  word-wrap: normal !important;
+}

repository-block.js

@@ -0,0 +1,83 @@
+( function (blocks, editor, components, i18n, element ) {
+
+	var el = wp.element.createElement
+	var registerBlockType = wp.blocks.registerBlockType
+	var BlockControls = wp.editor.BlockControls
+	var AlignmentToolbar = wp.editor.AlignmentToolbar
+	var MediaUpload = wp.editor.MediaUpload
+	var InspectorControls = wp.editor.InspectorControls
+	var TextControl = components.TextControl
+	var ServerSideRender = components.ServerSideRender
+	var withState = wp.compose.withState
+
+	var github_icon = 
+		el( 'svg' , 
+			{
+			},
+			el( 	'path', 
+			{
+				'd': 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'
+			}
+			)
+		)
+
+	registerBlockType( 'embed-block-for-github/repository', {
+	title: i18n.__( 'GitHub Repo' ),
+	description: i18n.__( 'A block to embed a GitHub Repository.' ),
+	icon: github_icon,
+	keywords: [ i18n.__( 'github' ), i18n.__( 'repository' ), i18n.__( 'repo' ) ],
+	category: 'embed',
+	attributes: {
+		github_url: {
+	    		type: 'string',
+		},
+	},
+
+	edit: function ( props ) {
+		var attributes = props.attributes
+		var github_url = props.attributes.github_url
+
+		return [
+			el( 'div', { className: 'components-block-description' },
+				el( ServerSideRender, {
+					block: 'embed-block-for-github/repository',
+					attributes: props.attributes
+				} )
+			),
+			el(
+				InspectorControls,
+				{ key: 'inspector' },
+				el(
+					components.PanelBody, {
+						title: i18n.__( 'GitHub Repository' ),
+						className: 'block-github-repository',
+						initialOpen: true
+					},
+					el(
+						TextControl, {
+							type: 'text',
+							label: i18n.__( 'Enter the URL of the GitHub Repository' ),
+							value: github_url,
+							onChange: function ( new_url ) {
+								props.setAttributes( { github_url: new_url } )
+							}
+						}
+					),
+				)
+			),			
+		]
+	},
+
+	save: () => {
+		return null
+	}
+
+})
+
+})(
+	window.wp.blocks,
+	window.wp.editor,
+	window.wp.components,
+	window.wp.i18n,
+	window.wp.element
+)