Skip to content

Commit

Permalink
Added code block support to the blog (#494)
Browse files Browse the repository at this point in the history 
* update test data to contain a code block

* update test case

* update global css to
    a. allow child components to modify the font family
    b. contain --acm-canvas for code block background (actual color can be updated later)

* added code block support to blog

* make overflow scroll

* some small margin and padding adjustments

* Refator blog body into own component and adjust light mode code background

* Remove commented code
  • Loading branch information
@jaasonw
jaasonw authored Jun 8, 2022
1 parent 66fb72c commit d0c32ca
Show file tree
Hide file tree
Showing 7 changed files with 405 additions and 34 deletions.
36 changes: 36 additions & 0 deletions src/lib/blog/blog-body.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<script lang="ts">
export let data = '';
</script>

<div class="blog-body">
{@html data}
</div>

<style lang="scss">
@import '$lib/blog/syntax-highlight.css';
.blog-body {
text-align: left;
:global(p) {
margin-bottom: 16px;
}
:global(code),
:global(pre) {
font-family: monospace;
font-size: 1.2em;
background-color: var(--acm-canvas);
border-radius: 0.5em;
overflow: auto;
margin: 0.5em 0;
}
:global(pre) {
padding: 16px;
}
:global(code) {
border-radius: 0.3em;
padding: 0.1em 0.5em;
margin: 0 0.3em;
}
}
</style>
271 changes: 271 additions & 0 deletions src/lib/blog/syntax-highlight.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,271 @@
/* Copied and modified from https://github.com/primer/github-syntax-light/blob/master/lib/github-light.css */

/*!
* GitHub Light v0.5.0
* Copyright (c) 2012 - 2017 GitHub, Inc.
* Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
*/

.light {
--color-prettylights-syntax-comment: #6a737d;
--color-prettylights-syntax-constant: #005cc5;
--color-prettylights-syntax-entity: #6f42c1;
--color-prettylights-syntax-storage-modifier-import: #24292e;
--color-prettylights-syntax-entity-tag: #22863a;
--color-prettylights-syntax-keyword: #d73a49;
--color-prettylights-syntax-string: #032f62;
--color-prettylights-syntax-variable: #e36209;
--color-prettylights-syntax-brackethighlighter-unmatched: #b31d28;
--color-prettylights-syntax-invalid-illegal-text: #fafbfc;
--color-prettylights-syntax-invalid-illegal-bg: #b31d28;
--color-prettylights-syntax-carriage-return-text: #fafbfc;
--color-prettylights-syntax-carriage-return-bg: #d73a49;
--color-prettylights-syntax-string-regexp: #22863a;
--color-prettylights-syntax-markup-list: #735c0f;
--color-prettylights-syntax-markup-heading: #005cc5;
--color-prettylights-syntax-markup-italic: #24292e;
--color-prettylights-syntax-markup-bold: #24292e;
--color-prettylights-syntax-markup-deleted-text: #b31d28;
--color-prettylights-syntax-markup-deleted-bg: #ffeef0;
--color-prettylights-syntax-markup-inserted-text: #22863a;
--color-prettylights-syntax-markup-inserted-bg: #f0fff4;
--color-prettylights-syntax-markup-changed-text: #e36209;
--color-prettylights-syntax-markup-changed-bg: #ffebda;
--color-prettylights-syntax-markup-ignored-text: #f6f8fa;
--color-prettylights-syntax-markup-ignored-bg: #005cc5;
--color-prettylights-syntax-meta-diff-range: #6f42c1;
--color-prettylights-syntax-brackethighlighter-angle: #586069;
--color-prettylights-syntax-sublimelinter-gutter-mark: #959da5;
--color-prettylights-syntax-constant-other-reference-link: #032f62;
--color-canvas-subtle: #f6f8fa;
}

.dark {
--color-prettylights-syntax-comment: #8b949e;
--color-prettylights-syntax-constant: #79c0ff;
--color-prettylights-syntax-entity: #d2a8ff;
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
--color-prettylights-syntax-entity-tag: #7ee787;
--color-prettylights-syntax-keyword: #ff7b72;
--color-prettylights-syntax-string: #a5d6ff;
--color-prettylights-syntax-variable: #ffa657;
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
--color-prettylights-syntax-carriage-return-bg: #b62324;
--color-prettylights-syntax-string-regexp: #7ee787;
--color-prettylights-syntax-markup-list: #f2cc60;
--color-prettylights-syntax-markup-heading: #1f6feb;
--color-prettylights-syntax-markup-italic: #c9d1d9;
--color-prettylights-syntax-markup-bold: #c9d1d9;
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
--color-prettylights-syntax-markup-deleted-bg: #67060c;
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
--color-prettylights-syntax-markup-inserted-bg: #033a16;
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
--color-canvas-subtle: #161b22;
}

@media (prefers-color-scheme: light) {
body:not(.dark) {
--color-prettylights-syntax-comment: #6a737d;
--color-prettylights-syntax-constant: #005cc5;
--color-prettylights-syntax-entity: #6f42c1;
--color-prettylights-syntax-storage-modifier-import: #24292e;
--color-prettylights-syntax-entity-tag: #22863a;
--color-prettylights-syntax-keyword: #d73a49;
--color-prettylights-syntax-string: #032f62;
--color-prettylights-syntax-variable: #e36209;
--color-prettylights-syntax-brackethighlighter-unmatched: #b31d28;
--color-prettylights-syntax-invalid-illegal-text: #fafbfc;
--color-prettylights-syntax-invalid-illegal-bg: #b31d28;
--color-prettylights-syntax-carriage-return-text: #fafbfc;
--color-prettylights-syntax-carriage-return-bg: #d73a49;
--color-prettylights-syntax-string-regexp: #22863a;
--color-prettylights-syntax-markup-list: #735c0f;
--color-prettylights-syntax-markup-heading: #005cc5;
--color-prettylights-syntax-markup-italic: #24292e;
--color-prettylights-syntax-markup-bold: #24292e;
--color-prettylights-syntax-markup-deleted-text: #b31d28;
--color-prettylights-syntax-markup-deleted-bg: #ffeef0;
--color-prettylights-syntax-markup-inserted-text: #22863a;
--color-prettylights-syntax-markup-inserted-bg: #f0fff4;
--color-prettylights-syntax-markup-changed-text: #e36209;
--color-prettylights-syntax-markup-changed-bg: #ffebda;
--color-prettylights-syntax-markup-ignored-text: #f6f8fa;
--color-prettylights-syntax-markup-ignored-bg: #005cc5;
--color-prettylights-syntax-meta-diff-range: #6f42c1;
--color-prettylights-syntax-brackethighlighter-angle: #586069;
--color-prettylights-syntax-sublimelinter-gutter-mark: #959da5;
--color-prettylights-syntax-constant-other-reference-link: #032f62;
--color-canvas-subtle: #eef1f3;
}
}

@media (prefers-color-scheme: dark) {
body:not(.light) {
--color-prettylights-syntax-comment: #8b949e;
--color-prettylights-syntax-constant: #79c0ff;
--color-prettylights-syntax-entity: #d2a8ff;
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
--color-prettylights-syntax-entity-tag: #7ee787;
--color-prettylights-syntax-keyword: #ff7b72;
--color-prettylights-syntax-string: #a5d6ff;
--color-prettylights-syntax-variable: #ffa657;
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
--color-prettylights-syntax-carriage-return-bg: #b62324;
--color-prettylights-syntax-string-regexp: #7ee787;
--color-prettylights-syntax-markup-list: #f2cc60;
--color-prettylights-syntax-markup-heading: #1f6feb;
--color-prettylights-syntax-markup-italic: #c9d1d9;
--color-prettylights-syntax-markup-bold: #c9d1d9;
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
--color-prettylights-syntax-markup-deleted-bg: #67060c;
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
--color-prettylights-syntax-markup-inserted-bg: #033a16;
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
--color-canvas-subtle: #161b22;
}
}

.pl-c /* comment, punctuation.definition.comment, string.comment */ {
color: var(--color-prettylights-syntax-comment);
}

.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
.pl-s .pl-v /* string variable */ {
color: var(--color-prettylights-syntax-constant);
}

.pl-e /* entity */,
.pl-en /* entity.name */ {
color: var(--color-prettylights-syntax-entity);
}

.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
.pl-s .pl-s1 /* string source */ {
color: var(--color-prettylights-syntax-storage-modifier-import);
}

.pl-ent /* entity.name.tag, markup.quote */ {
color: var(--color-prettylights-syntax-entity-tag);
}

.pl-k /* keyword, storage, storage.type */ {
color: var(--color-prettylights-syntax-keyword);
}

.pl-s /* string */,
.pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
.pl-sr /* string.regexp */,
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
color: var(--color-prettylights-syntax-string);
}

.pl-v /* variable */,
.pl-smw /* sublimelinter.mark.warning */ {
color: var(--color-prettylights-syntax-variable);
}

.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
}

.pl-ii /* invalid.illegal */ {
color: var(--color-prettylights-syntax-invalid-illegal-text);
background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
}

.pl-c2 /* carriage-return */ {
color: var(--color-prettylights-syntax-carriage-return-text);
background-color: var(--color-prettylights-syntax-carriage-return-bg);
}

.pl-c2::before /* carriage-return */ {
content: '^M';
}

.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
font-weight: bold;
color: var(--color-prettylights-syntax-string-regexp);
}

.pl-ml /* markup.list */ {
color: var(--color-prettylights-syntax-markup-list);
}

.pl-mh /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms /* meta.separator */ {
font-weight: bold;
color: var(--color-prettylights-syntax-markup-heading);
}

.pl-mi /* markup.italic */ {
font-style: italic;
color: var(--color-prettylights-syntax-markup-italic);
}

.pl-mb /* markup.bold */ {
font-weight: bold;
color: var(--color-prettylights-syntax-markup-bold);
}

.pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
color: var(--color-prettylights-syntax-markup-deleted-text);
background-color: var(--color-prettylights-syntax-markup-deleted-bg);
}

.pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
color: var(--color-prettylights-syntax-markup-inserted-text);
background-color: var(--color-prettylights-syntax-markup-inserted-bg);
}

.pl-mc /* markup.changed, punctuation.definition.changed */ {
color: var(--color-prettylights-syntax-markup-changed-text);
background-color: var(--color-prettylights-syntax-markup-changed-bg);
}

.pl-mi2 /* markup.ignored, markup.untracked */ {
color: var(--color-prettylights-syntax-markup-ignored-text);
background-color: var(--color-prettylights-syntax-markup-ignored-bg);
}

.pl-mdr /* meta.diff.range */ {
font-weight: bold;
color: var(--color-prettylights-syntax-meta-diff-range);
}

.pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
color: var(--color-prettylights-syntax-brackethighlighter-angle);
}

.pl-sg /* sublimelinter.gutter-mark */ {
color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
}

.pl-corl /* constant.other.reference.link, string.other.link */ {
text-decoration: underline;
color: var(--color-prettylights-syntax-constant-other-reference-link);
}
13 changes: 2 additions & 11 deletions src/routes/blog/[id].svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import { readingTime } from '$lib/blog/utils';
import { Temporal } from '@js-temporal/polyfill';
import Labels from '$lib/components/blog/labels.svelte';
import BlogBody from '$lib/blog/blog-body.svelte';
export let post: Newsletter;
</script>
Expand Down Expand Up @@ -58,9 +59,7 @@
<Spacing --min="75px" --med="100px" --max="150px" />

<div class="container">
<div class="markdown-body">
{@html post.html}
</div>
<BlogBody data={post.html} />
<Labels data={post.labels} />
<small class="ita">Read as TXT: <a href={`${post.url}.txt`}>{post.url}.txt</a></small>
</div>
Expand Down Expand Up @@ -97,14 +96,6 @@
filter: drop-shadow(0 8px 40px rgba(16, 19, 21, 0.1));
-webkit-filter: drop-shadow(0 8px 40px rgba(16, 19, 21, 0.1));
width: min(1000px, 70vw);
.markdown-body {
text-align: left;
:global(p) {
margin-bottom: 16px;
}
}
}
img {
height: 100%;
Expand Down
5 changes: 2 additions & 3 deletions src/routes/blog/_index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ test('can find the correct page title', () => {
expect(getByText('The official ACM at CSUF blog.')).toBeDefined();
});

test('can render 3 blog posts', () => {
const MAX_POSTS = 3;
test('can render blog posts', () => {
const { container } = render(Blog, { posts: SAMPLE_POSTS });
const actual = container.querySelectorAll('.blog-post').length;
expect(actual).toBe(MAX_POSTS);
expect(actual).toBeGreaterThan(0);
});
100 changes: 82 additions & 18 deletions src/routes/blog/_testdata/posts.ts
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion src/routes/blog/index.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
import { Temporal } from '@js-temporal/polyfill';
import { readingTime } from '$lib/blog/utils';
import Labels from '$lib/components/blog/labels.svelte';
import BlogBody from '$lib/blog/blog-body.svelte';
export let posts: Newsletter[] = [];
</script>
Expand Down Expand Up @@ -57,7 +58,7 @@
</div>
<h2 class="headers">{post.title}</h2>
<div class="markdown-body">
{@html post.html}
<BlogBody data={post.html} />
</div>
<p class="read-time">
{Temporal.Instant.from(post.createdAt).toLocaleString('en-US', {
Expand Down
Loading

1 comment on commit d0c32ca

@vercel
Copy link

@vercel vercel bot commented on d0c32ca Jun 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

acm-csuf-site – ./

acm-csuf-site-ethanthatonekid.vercel.app
acmcsuf.com
acm-csuf-site.vercel.app
acm-csuf-site-git-main-ethanthatonekid.vercel.app

Please sign in to comment.