add console style class

Author: jimboyeah

pages/index.tsx

@@ -7,7 +7,7 @@ import {FrontMetter, MetterKey, getPostSlugs, getPosts} from '../utils/api'
 
 const fields:MetterKey[] = ['slug', 'title', 'date', 'author']
 export async function getStaticProps(context:any){
-  console.log('++++++++++++++++ Home getStaticProps', context);
+  console.log('++++++ Home getStaticProps', context);
   let mdFiles:{[folder:string]:FrontMetter[]} = {};
   let mdTree = getPostSlugs()
   mdFiles[mdTree.folder] = (getPosts(fields, mdTree.list, mdTree.folder))

pages/posts/build.js

@@ -4,31 +4,31 @@ import content from '../../Docs/tutorial-assets.md'
 // let content = 'NOTHING';
 
 Marked.setOptions({
-    renderer: new Renderer(),
-    gfm: true,
-    // tables: true,
-    breaks: false,
-    pedantic: false,
-    sanitize: false,
-    smartLists: true,
-    smartypants: false
+  renderer: new Renderer(),
+  gfm: true,
+  // tables: true,
+  breaks: false,
+  pedantic: false,
+  sanitize: false,
+  smartLists: true,
+  smartypants: false
 });
 // let output = Marked(md, opts)
 // let content = Marked('I am using **__markdown__**.')
 // const content = Marked(marked)
 // window.marked = Marked;
 
 export default function TutorialAssets(props:any){
-    console.log('++++++++++++++++++++++++TutorialAssets', props);
-    return (
-        <Layout><div dangerouslySetInnerHTML={{__html:`${content}`}}></div></Layout>
-    );
+  console.log('++++++ TutorialAssets', props);
+  return (
+    <Layout><div dangerouslySetInnerHTML={{__html:`${content}`}}></div></Layout>
+  );
 }
 export async function getServerSideProps(){
   // Fetch data from external API
   const res = await fetch(`https://github.com/manifest.json`)
   const data = await res.json()
-  console.log('++++++++++++++++++++++++TutorialAssets->getServerSideProps', data.name);
+  console.log('++++++ TutorialAssets->getServerSideProps', data.name);
 
   return {
     props: {

pages/posts/tutorial-assets.tsx

@@ -5,7 +5,7 @@ export default function Catchopt(props:any){
     const Router = useRouter()
     let json = JSON.stringify(Router.query);
     let fallback = Router.isFallback && "FALLBACK";
-    console.log(`-----------------[[...catchopt]].tsx`, fallback, props, Router);
+    console.log(`------ [[...catchopt]].tsx`, fallback, props, Router);
     return (
     <Layout>
     <h3 className="card">Optional Catch-all Routes Test</h3>
@@ -19,7 +19,7 @@ export default function Catchopt(props:any){
 }
 
 export async function getStaticProps(context: any) {
-    console.log("+++++++++++++++Optional Catch-all getStaticProps", context);
+    console.log("++++++ Optional Catch-all getStaticProps", context);
     return {
         props: {
             data: JSON.stringify(context)
@@ -28,7 +28,7 @@ export async function getStaticProps(context: any) {
 }
 
 export async function getStaticPaths(context:any) {
-    console.log("+++++++++++++++Optional Catch-all getStaticPaths", context);
+    console.log("++++++ Optional Catch-all getStaticPaths", context);
     const res = await fetch(`https://github.com/manifest.json`)
     const data = await res.json()
     let locale = context.locale ?? 'zh-CN';

pages/route/[[...catchopt]].tsx

@@ -4,7 +4,7 @@ import {useRouter} from 'next/router'
 export default function Dynamic(props:any){
     const Router = useRouter()
     let json = JSON.stringify(Router.query);
-    console.log("-----------------route [dynamic].tsx", props, json, Router);
+    console.log("------ route [dynamic].tsx", props, json, Router);
     return (
     <Layout>
     <h3 className="card">Dynamic Routes Test</h3>
@@ -14,7 +14,7 @@ export default function Dynamic(props:any){
 }
 
 export async function getStaticProps(context: any) {
-    console.log("+++++++++++++++Dynamic getStaticProps", context);
+    console.log("++++++ Dynamic getStaticProps", context);
     return {
         props: {
             data: JSON.stringify(context)
@@ -23,7 +23,7 @@ export async function getStaticProps(context: any) {
 }
 
 export async function getStaticPaths(context:any) {
-    console.log("+++++++++++++++Dynamic getStaticPaths", context);
+    console.log("++++++ Dynamic getStaticPaths", context);
     let locale = context.locale ?? 'zh-CN';
     let paths = [
         {params:{ locale, dynamic: 'dynamic' }},

pages/route/[dynamic].tsx

@@ -3,7 +3,7 @@ import {useRouter} from 'next/router'
 
 export default function Normal(props:any){
     const Router = useRouter()
-    console.log("-----------------route normal.tsx", props, Router);
+    console.log("------ route normal.tsx", props, Router);
     return (
     <>
     <Layout>
@@ -14,7 +14,7 @@ export default function Normal(props:any){
     )
 }
 // export async function getStaticProps(context: any) {
-//     console.log("+++++++++++++++getStaticcontext", context);
+//     console.log("++++++ getStaticcontext", context);
 //     return {
 //         props: {
 //             data: JSON.stringify(context)

pages/route/normal.tsx

@@ -44,7 +44,7 @@ export default function Markdown({post}: {post: FrontMetter}){
 type Params = { params: { slug: string[]|string } }
 
 export async function getStaticProps({ params }: Params) {
-  console.log("+++++++++++++++[...slug] getStaticProps", params);
+  console.log("++++++[...slug] getStaticProps", params);
   const post = getPostBySlug(params.slug, [
     'title',
     'date',
@@ -78,7 +78,7 @@ export async function getStaticPaths(context:any) {
     )
   })
 
-  console.log("+++++++++++++++[...slug] getStaticPaths", context, JSON.stringify(paths));
+  console.log("++++++[...slug] getStaticPaths", context, JSON.stringify(paths));
   return {
     fallback: false,
     paths,

pages/tutorial/[...slug].tsx

@@ -28,7 +28,7 @@ img {
 pre {
     padding: 0 16px;
     background: darkblue;
-    color: rgb(202, 200, 193) !important;
+    color: rgb(202, 200, 193);
     white-space: break-spaces;
 }
 .bgDarkblue {
@@ -75,6 +75,11 @@ pre {
 }
 
 .normalList { list-style: none; padding: 0; margin: 0;}
+.console { 
+    font-size: 0.7rem;    
+    color: rgb(202, 200, 193) !important;
+    background: darkblue;
+}
 
 .card {
     margin: 1rem;