Skip to content
Permalink
Browse files

Add WP editor edits and Reads templates starter

  • Loading branch information
emdecr committed Feb 12, 2020
1 parent f5b861f commit 1e473dc5c6d656b428a65317d8cad04c9d8154f2
@@ -264,9 +264,46 @@ blockquote + p {
/* line-height: 1.5; */
}

/* Projects */
/* PROJECTS */
.large-asterisk {
color: #2196f3;
font-weight: bold;
font-size: 1rem;
}

/* READS - annotations */
.content.reads .annotation {
margin-bottom: 1rem;
}

.content.reads .annotation {
position: relative;
}

.content.reads .annotation-text span {
background: #bbdefb;
}

@media (prefers-color-scheme: dark) {
.content.reads .annotation-text span {
background: #1976d2;
}
}

.annotation-body {
font-family: "input-mono", monospace;
font-size: 0.8rem;
background: #3d3d3d;
background: #bbdefb;
padding: 1rem;
position: absolute;
width: 300px;
right: calc(-300px + -2rem);
top: 1rem;
}

@media (prefers-color-scheme: dark) {
.annotation-body {
background: #1976d2;
}
}
@@ -0,0 +1,85 @@
<template>
<main>
<nuxt-link to="/reads" class="back">
<span>
<i class="material-icons">trending_flat</i>Back to Reads Index
</span>
</nuxt-link>
<div class="container">
<h1 v-html="single.title.rendered"></h1>
<p class="subtitle mono" v-if="meta._project_subtitle != ''" v-html="meta._project_subtitle"></p>
</div>
<div class="content reads" v-html="single.content.rendered"></div>
<nuxt-link to="/reads" class="back">
<span>
<i class="material-icons">trending_flat</i>Back to Reads Index
</span>
</nuxt-link>
</main>
</template>

<script>
import { helper } from "~/plugins/helper.js";
export default {
async fetch({ store }) {
await store.dispatch("content/getReads");
},
head() {
return {
title:
"Emily Dela Cruz | Reads | " +
helper.removeTags(this.single.title.rendered)
};
},
computed: {
reads() {
return this.$store.getters["content/getReads"];
},
single() {
return this.$store.getters["content/getReads"].filter(
p => p.slug == this.$route.params.slug
)[0];
},
meta() {
return this.single.meta_box;
}
}
};
</script>

<style lang="scss" scoped>
main {
max-width: 1000px;
margin: 0 auto;
}
.back {
display: inline-block;
margin-bottom: 4rem;
}
.back span {
display: flex;
align-items: center;
}
i {
transform: rotate(180deg);
margin-right: 0.5rem;
}
.container {
max-width: 650px;
// margin: 0 auto;
}
.subtitle {
margin: 1rem 0;
}
.content {
max-width: 650px;
padding: 2rem 0;
// margin: 0 auto;
}
</style>
No changes.
No changes.
@@ -4,6 +4,7 @@ export const state = () => ({
pages: [],
posts: null,
projects: null,
reads: null,
shelf: null,
wpShelf: null,
fullShelf: null
@@ -27,6 +28,9 @@ export const mutations = {
setProjects(state, payload) {
state.projects = payload;
},
setReads(state, payload) {
state.reads = payload;
},
setShelf(state, payload) {
state.shelf = payload;
},
@@ -182,6 +186,21 @@ export const actions = {
// console.log("Github error:" + error);
});
}
},
async getReads({ state, commit, dispatch }) {
if (state.reads == null) {
await this.$axios
.$get(
process.env.CMS_API_URL +
"wp-json/wp/v2/read?per_page=50&order=asc&_embed"
)
.then(function(response) {
commit("setReads", response);
})
.catch(function(error) {
console.log(error);
});
}
}
};

@@ -210,6 +229,9 @@ export const getters = {
getMusic(state) {
return state.music;
},
getReads(state) {
return state.reads;
},
getGithub(state) {
if (state.github != null) {
var cut = state.github.slice(0, 5);
@@ -0,0 +1,3 @@
.highlighter {
background-color: #ffff66;
}
@@ -19,4 +19,6 @@
// Enable Thumbnails
add_theme_support('post-thumbnails');

// Load in custom editor styles and fxns
require_once('includes/functions/editor.php');
?>
@@ -0,0 +1,36 @@
<?php
// Load in custom css for the editor
function custom_editor_styles() {
add_editor_style( get_template_directory_uri() . '/dist/css/editor.css');
}

add_action( 'admin_init', 'custom_editor_styles' );

// Add downdown button to editor
function add_style_select_button($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}

add_filter('mce_buttons_2', 'add_style_select_button');

// Add custom styles to the WordPress editor
function my_mce_before_init_insert_formats( $init_array ) {

$style_formats = array(
// These are the custom styles
array(
'title' => 'Highlight',
'inline' => 'span',
'classes' => 'highlight',
'wrapper' => true,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );

return $init_array;

}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
@@ -17,7 +17,7 @@ function mb_annotation_callback( $attributes, $is_preview = false, $post_id = nu
$class .= " align{$attributes['align']}";
}
?>
<div id="<?= $id ?>" class="<?= $class ?>" style="background-color: <?= mb_get_block_field( 'background_color' ) ?>">
<div id="<?= $id ?>" class="<?= $class ?>">
<div class="annotation-text">
<?php mb_the_block_field( 'annotation_text' ) ?>
</div>

0 comments on commit 1e473dc

Please sign in to comment.
You can’t perform that action at this time.