krasenslavov

// _columns.scss
@mixin columns($uid: column, $gap: 16px, $columns: 12) {
  @for $i from 1 through $columns {
    .#{$uid}-#{$i} {  
      margin: 0 $gap;
      width: 100% / $columns * $i;
    }
    .#{$uid}-offset-#{$i} {
      margin-left: 100% / $columns * $i;
    }

krasenslavov

// _margin.scss
@mixin margin($uid: margin, $unit: px, $step: 10, $from: 0, $through: 3) {
  $base: (
    '': '',
    't': '-top',
    'r': '-right',
    'b': '-bottom',
    'l': '-left',
    'x': ('-left', '-right'),
    'y': ('-top', '-bottom')

krasenslavov

// _object.scss
@mixin object($uid: object) {
  $fit: (
    '-contain': contain,
    '-cover': cover,
    '-fill': fill,
    '-none': none,
    '-scale-down': scale-down
  );
  @each $prop, $value in $fit {

krasenslavov

<?php

  add_action('publish_post', function ($post_id) {

    global $wpdb;

    $api_key = 'GENERATED_ACCESS_TOKEN';
    $api_url = 'https://api-ssl.bitly.com/v4/bitlinks';

    $data = array(

krasenslavov

<?php

  remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);

  add_action('wp_head', function() {

    global $post;

    $short_url = get_post_meta($post->ID, 'bitly_url', true);

krasenslavov

<?php

  add_action('manage_posts_columns', function($columns) {

    $columns['bitly_url'] = 'Bitly URL';
    return $columns;
  }, 10, 1);

  add_action('manage_posts_custom_column', function($column, $post_id) {

krasenslavov

<?php
/**
  Plugin Name:  Blogger Cards 
  Plugin URI:   https://ctrls.dev/
  Description:  Create blogger cards plugin using WordPress and Web Compoments.
  Version:      0.0.1
  Author:       Krasen Slavov
  Author URI:   https://krasenslavov.com/
  License:      GNU General Public License, version 2
  License URI:  https://www.gnu.org/licenses/gpl-2.0.html

krasenslavov

<?php $bloggers = get_users(['role__in' => ['author', 'subscriber']]);?>

<div class="grid">
  <?php foreach($bloggers as $user):?>
    <user-card name="<?php echo $user->display_name;?>" avatar="<?php echo get_avatar_url($user->ID, array('size' => 512));?>">
      <div slot="email"><?php echo $user->user_email;?></div>
      <div slot="url"><?php echo $user->user_url;?></div>
      <div slot="bio"><?php echo $user->user_description;?></div>
    </user-card>
  <?php endforeach;?>

krasenslavov

:root {
  --primary: #0073aa;
  --white: #ffffff;
  --lightgrey: #f2f1f1;
}
.grid {
  align-items: flex-start;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));

krasenslavov

<?php

  $options  = [
    'parent'      => '',
    'name'        => 'Child Theme',
    'description' => 'Enter child theme description...',
    'screenshot'  => '',
    'bootstrap'   => false
  ];