diff --git a/src/app/configs/app.config.ts b/src/app/configs/app.config.ts index 823be93..0433560 100644 --- a/src/app/configs/app.config.ts +++ b/src/app/configs/app.config.ts @@ -3,6 +3,7 @@ import { env } from '@extollo/lib' export interface ColorPalette { displayName: string background: string + textVariant: 'light' | 'dark' backgroundOffset: string backgroundOffset2: string hero: string @@ -27,6 +28,7 @@ export default { colors: { lostInTheStars: { displayName: "Lost in the Stars", + textVariant: 'light', background: '#4a113c', backgroundOffset: 'rgba(178, 127, 170, 0.1)', backgroundOffset2: 'rgba(178, 127, 170, 0.2)', @@ -43,6 +45,7 @@ export default { }, tanOrangeAndRed: { displayName: "Tan, Orange, & Red", + textVariant: 'dark', background: '#f8e4bf', backgroundOffset: 'rgb(243, 210, 147, 0.4)', backgroundOffset2: 'rgb(111, 71, 46, 0.15)', @@ -59,6 +62,7 @@ export default { }, blueAndTan: { displayName: "Blue & Tan", + textVariant: 'light', background: '#052653', backgroundOffset: 'rgba(27, 111, 145, 0.3)', backgroundOffset2: 'rgba(127, 167, 158, 0.15)', @@ -75,6 +79,7 @@ export default { }, teals: { displayName: "Teals", + textVariant: 'dark', background: '#c6c2b9', backgroundOffset: 'rgba(150, 171, 162, 0.3)', backgroundOffset2: 'rgba(150, 171, 162, 0.7)', @@ -91,6 +96,7 @@ export default { }, redAndGold: { displayName: "Red & Gold", + textVariant: 'light', background: '#510c00', backgroundOffset: 'rgba(111, 42, 30, 0.4)', backgroundOffset2: 'rgba(111, 42, 30, 1)', @@ -107,6 +113,7 @@ export default { }, mashGreen: { displayName: "M*A*S*H Green", + textVariant: 'light', background: '#202318', backgroundOffset: 'rgba(46, 41, 22, 0.5)', backgroundOffset2: 'rgb(105, 75, 1, 0.3)', @@ -123,6 +130,7 @@ export default { }, purpleAndWhite: { displayName: "Purple & White", + textVariant: 'light', background: '#6669aa', backgroundOffset: 'rgba(152, 155, 220, 0.4)', backgroundOffset2: 'rgba(81, 84, 143, 0.6)', @@ -139,6 +147,7 @@ export default { }, americana: { displayName: "Americana", + textVariant: 'dark', background: '#f6f4f3', backgroundOffset: 'rgba(120, 153, 185, 0.1)', backgroundOffset2: 'rgba(120, 153, 185, 0.2)', @@ -155,6 +164,7 @@ export default { }, ubuntu: { displayName: "Ubuntu", + textVariant: 'light', background: '#333333', backgroundOffset: 'rgba(51, 51, 51, 0.4)', backgroundOffset2: 'rgba(51, 51, 51, 0.6)', @@ -171,6 +181,7 @@ export default { }, mintMono: { displayName: "Mint Mono", + textVariant: 'light', background: '#6b9080', backgroundOffset: 'rgba(164, 195, 178, 0.2)', backgroundOffset2: 'rgba(51, 51, 51, 0.6)', @@ -187,6 +198,7 @@ export default { }, abyss: { displayName: "Abyss", + textVariant: 'light', background: '#010A19', backgroundOffset: 'rgba(1, 10, 25, 0.2)', backgroundOffset2: 'rgba(1, 10, 25, 0.6)', @@ -203,6 +215,7 @@ export default { }, blackIsBack: { displayName: 'Black Is The New Black', + textVariant: 'dark', background: '#e4e4e4', backgroundOffset: 'rgba(188, 188, 188, 0.2)', backgroundOffset2: 'rgba(188, 188, 188, 0.6)', @@ -219,6 +232,7 @@ export default { }, noir: { displayName: "Noir", + textVariant: 'light', background: '#2a333f', backgroundOffset: 'rgba(56, 53, 60, 0.3)', backgroundOffset2: 'rgb(45, 80, 96, 0.2)', diff --git a/src/app/http/controllers/Home.controller.ts b/src/app/http/controllers/Home.controller.ts index 7dd810a..75a8297 100644 --- a/src/app/http/controllers/Home.controller.ts +++ b/src/app/http/controllers/Home.controller.ts @@ -10,7 +10,7 @@ import { file, Application, make, - Valid, Logging, api, Session, + Valid, Logging, api, Session, plaintext, } from '@extollo/lib' import {WorkItem} from '../../models/WorkItem.model' import {FeedPost} from '../../models/FeedPost.model' @@ -156,6 +156,32 @@ export class Home extends Controller { .catch(e => this.logging.error(e)) } + public getThemeCSSFile() { + let key = String(this.request.input('themeKey') || '') + if ( key.endsWith('.css') ) key = key.substring(0, key.length - 4) + const themes = this.config.get('app.colors') as Record + const themeKeys = Object.keys(themes) + const theme = themes[key] || themes[themeKeys[0]] + const themeCSS = ` + /* Theme: ${theme.displayName} */ + :root { + --c-background: ${theme.background}; + --c-background-offset: ${theme.backgroundOffset}; + --c-background-offset-2: ${theme.backgroundOffset2}; + --c-hero: ${theme.hero}; + --c-font: ${theme.font}; + --c-font-muted: ${theme.fontMuted}; + --c-box: ${theme.box}; + --c-link: ${theme.link}; + --c-noise-size: ${theme.noiseSize}; + --c-line-1: ${theme.line1}; + --c-line-2: ${theme.line2}; + --c-line-3: ${theme.line3}; + } + ` + return plaintext(themeCSS).contentType('text/css') + } + public getThemeCSS(): any { const themes = this.config.get('app.colors') as Record const themeKeys = Object.keys(themes) @@ -178,12 +204,23 @@ export class Home extends Controller { --c-line-3: ${theme.line3}; } ` + + const themeStylesheets = themeKeys + .filter(key => key !== themeName) + .map(key => ({ + key, + displayName: themes[key].displayName, + url: `/theme/${key}.css`, + })) + return { themeName, - themeCSS, + themeCSS: '', themeDisplayName: theme.displayName, themeKeys, + themeStylesheets, themeRecord: theme, + textIsLight: theme.textVariant === 'light', } } } diff --git a/src/app/http/controllers/MarkMark.controller.ts b/src/app/http/controllers/MarkMark.controller.ts new file mode 100644 index 0000000..3861c16 --- /dev/null +++ b/src/app/http/controllers/MarkMark.controller.ts @@ -0,0 +1,50 @@ +import {appPath, Controller, Inject, Injectable, plaintext, view} from '@extollo/lib' +import {Home} from './Home.controller' +import * as marked from 'marked' +import {MarkMarkService} from '../../services/MarkMark.service' + +@Injectable() +export class MarkMark extends Controller { + @Inject() + protected readonly markmark!: MarkMarkService + + public welcome() { + const home = this.make(Home) + return view('markmark:welcome', { + ...home.getThemeCSS(), + title: 'MarkMark (v1.0)', + }) + } + + private cachedStandard?: string + + public async standard() { + if ( !this.cachedStandard ) { + const path = appPath('resources', 'markmark', 'standard.md') + const content = await path.read() + this.cachedStandard = marked.marked(content) + } + + const home = this.make(Home) + return view('markmark:standard', { + ...home.getThemeCSS(), + title: 'Spec: MarkMark (v1.0)', + contentHtml: this.cachedStandard, + }) + } + + public async linksHtml() { + const home = this.make(Home) + return view('links', { + ...home.getThemeCSS(), + title: 'Bookmarks', + contentHtml: await this.markmark.getLinksHTML(), + }) + } + + public async linksMarkMark() { + return plaintext(await this.markmark.getLinksMM()) + .contentType('text/markdown;variant=markmark') + } + +} diff --git a/src/app/http/routes/app.routes.ts b/src/app/http/routes/app.routes.ts index 0907159..8eaceae 100644 --- a/src/app/http/routes/app.routes.ts +++ b/src/app/http/routes/app.routes.ts @@ -10,6 +10,7 @@ import {ValidContactForm} from '../middlewares/parameters/ValidContactForm.middl import {RateLimit} from '../middlewares/RateLimit.middleware' import {SiteTheme} from '../middlewares/SiteTheme.middleware' import {Blog} from '../controllers/Blog.controller' +import {MarkMark} from '../controllers/MarkMark.controller' Route.endpoint('options', '**') .handledBy(() => api.one({})) @@ -98,6 +99,7 @@ Route .calls(Snippets, snippets => snippets.viewSnippet) Route.any('/go/:short') + .pre(SiteTheme) .calls(GoLinks, go => go.launch) Route.get('/favicon.ico') @@ -126,6 +128,27 @@ Route .calls(Feed, feed => feed.json) .alias('feed.json') }) + + Route.group('/markmark', () => { + Route.get('/') + .pre(SiteTheme) + .calls(MarkMark, m => m.welcome) + + Route.get('/standard') + .pre(SiteTheme) + .calls(MarkMark, m => m.standard) + }) + + Route.get('/theme/:themeKey') + .pre(SiteTheme) + .calls(Home, h => h.getThemeCSSFile) + + Route.get('/links') + .pre(SiteTheme) + .calls(MarkMark, m => m.linksHtml) + + Route.get('/links.mark.md') + .calls(MarkMark, m => m.linksMarkMark) }) .pre(SessionAuthMiddleware) .pre(PageView) diff --git a/src/app/resources/assets/main-70s.css b/src/app/resources/assets/main-70s.css index d5840e5..2d30ad7 100644 --- a/src/app/resources/assets/main-70s.css +++ b/src/app/resources/assets/main-70s.css @@ -452,6 +452,12 @@ footer.theme-stats li { color: var(--c-font-muted); } +.inline-markmark-logo { + height: 16pt; + margin-bottom: -3px; + opacity: 0.75; +} + .button-links { margin: 20px; } diff --git a/src/app/resources/assets/markmark-dark.svg b/src/app/resources/assets/markmark-dark.svg new file mode 100644 index 0000000..d33ac94 --- /dev/null +++ b/src/app/resources/assets/markmark-dark.svg @@ -0,0 +1,63 @@ + + + + + + +