├── .babelrc ├── .gitignore ├── .netlify └── state.json ├── README.md ├── content ├── blog │ ├── how-to-share-a-screenshot-of-the-page.md │ ├── visiting-goa.md │ └── wanderlust.md └── images │ ├── cyclist.md │ └── lighthouse.md ├── netlify.toml ├── package.json ├── preact.config.js ├── prerender-urls.js ├── src ├── assets │ ├── brett-jordan-1329359-unsplash.jpg │ ├── cody-black-nm89mzvar5i-unsplash.jpg │ ├── favicon.ico │ ├── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ └── mstile-150x150.png │ ├── lucas-ludwig-dh2ztme9kni-unsplash.jpg │ ├── profile.jpg │ └── quotes.svg ├── components │ ├── app.js │ └── header │ │ ├── index.js │ │ └── style.css ├── crawler │ └── index.js ├── index.js ├── manifest.json ├── routes │ ├── blog │ │ ├── formatted-code-block.js │ │ ├── index.js │ │ └── style.css │ ├── blogs │ │ ├── index.js │ │ └── style.css │ ├── contact-success │ │ ├── index.js │ │ └── style.css │ ├── contact │ │ ├── index.js │ │ └── style.css │ ├── home │ │ ├── index.js │ │ └── style.css │ └── notfound │ │ ├── index.js │ │ └── style.css ├── static │ ├── admin.html │ ├── config.yml │ └── preview.css ├── style │ └── index.css └── template.html ├── tests ├── __mocks__ │ ├── browserMocks.js │ └── fileMocks.js └── header.test.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "presets": [ 5 | ["preact-cli/babel", { "modules": "commonjs" }] 6 | ] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | /build 3 | /*.log 4 | 5 | package-lock.json -------------------------------------------------------------------------------- /.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "7ae42434-edff-45ba-ba1d-ffbf86110acd" 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # blog 2 | 3 | ## CLI Commands 4 | 5 | ``` bash 6 | # install dependencies 7 | yarn 8 | 9 | # serve with hot reload at localhost:8080 10 | yarn dev 11 | 12 | # build for production with minification 13 | yarn build 14 | 15 | # run tests with jest and preact-render-spy 16 | yarn test 17 | ``` 18 | 19 | For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md). 20 | 21 | Note: When pre-rendering, your module as components are executed in a Node.js environment, where most Web APIs are not available. To account for this, wrap that code in a check like `if (typeof window !== 'undefined')`. 22 | Do not add `preact build --no-prerender` to the build command as it will prevent blog posts from rendering. 23 | -------------------------------------------------------------------------------- /content/blog/how-to-share-a-screenshot-of-the-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to share a screenshot of the page 3 | date: 2019-09-07T05:42:28.441Z 4 | subtitle: If you have ever built an application which needs to take a screenshot of itself, then this blog tells you how to do the same for web. 5 | cover: /assets/cody-black-nm89mzvar5i-unsplash.jpg 6 | tags: 'technology, javascript' 7 | --- 8 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales neque sodales ut etiam sit amet nisl purus in. Nunc sed augue lacus viverra vitae congue eu. At augue eget arcu dictum varius. Et ligula ullamcorper malesuada proin. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Mauris in aliquam sem fringilla ut morbi tincidunt. In vitae turpis massa sed elementum tempus egestas. Neque gravida in fermentum et sollicitudin ac orci phasellus. Nibh praesent tristique magna sit amet purus gravida. Nibh sed pulvinar proin gravida hendrerit. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. A iaculis at erat pellentesque adipiscing commodo elit at. At varius vel pharetra vel turpis nunc eget lorem. Ultrices in iaculis nunc sed augue. Senectus et netus et malesuada fames ac turpis egestas. 9 | 10 | Neque vitae tempus quam pellentesque nec nam aliquam sem. Praesent tristique magna sit amet. Blandit massa enim nec dui nunc. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Mauris augue neque gravida in fermentum et sollicitudin ac. Arcu risus quis varius quam quisque id diam vel. Tortor aliquam nulla facilisi cras fermentum. Sit amet tellus cras adipiscing. Convallis aenean et tortor at risus viverra adipiscing. Porttitor eget dolor morbi non. Cras pulvinar mattis nunc sed blandit libero volutpat sed. Et leo duis ut diam quam. Accumsan sit amet nulla facilisi. Leo urna molestie at elementum eu facilisis sed odio morbi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum sed. Eros in cursus turpis massa tincidunt dui ut ornare. Vel fringilla est ullamcorper eget nulla facilisi. Nec nam aliquam sem et tortor. Eu consequat ac felis donec. 11 | 12 | Quis enim lobortis scelerisque fermentum dui faucibus. Pulvinar sapien et ligula ullamcorper malesuada proin. Commodo nulla facilisi nullam vehicula ipsum. Facilisis gravida neque convallis a cras semper. Duis convallis convallis tellus id interdum velit laoreet id donec. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Justo donec enim diam vulputate ut pharetra. Elementum integer enim neque volutpat. Est velit egestas dui id ornare. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Justo nec ultrices dui sapien eget mi proin sed libero. Egestas erat imperdiet sed euismod nisi porta. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Cursus in hac habitasse platea dictumst quisque sagittis. Amet consectetur adipiscing elit pellentesque habitant morbi. 13 | 14 | Morbi tempus iaculis urna id volutpat lacus. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Amet risus nullam eget felis. Sit amet purus gravida quis blandit. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Scelerisque viverra mauris in aliquam sem fringilla ut. Fringilla urna porttitor rhoncus dolor purus. Id velit ut tortor pretium viverra suspendisse potenti nullam. Dignissim convallis aenean et tortor at risus viverra adipiscing at. Donec enim diam vulputate ut. Mauris a diam maecenas sed enim ut sem. 15 | 16 | Fames ac turpis egestas integer eget aliquet nibh praesent. Magna fringilla urna porttitor rhoncus dolor. Mauris commodo quis imperdiet massa tincidunt nunc. Enim sed faucibus turpis in eu mi bibendum. Bibendum enim facilisis gravida neque convallis. Proin fermentum leo vel orci. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Ac felis donec et odio. Mauris a diam maecenas sed enim ut sem viverra aliquet. Sollicitudin nibh sit amet commodo nulla facilisi. 17 | -------------------------------------------------------------------------------- /content/blog/visiting-goa.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Visiting Goa 3 | date: 2019-09-07T05:43:53.681Z 4 | tags: 'travel, india, goa' 5 | --- 6 | Lorem ipsum dolor sit amet, mei in iracundia comprehensam, dicit phaedrum ea vis. Ei purto iusto quo, nonumy honestatis usu no. Eam at lorem audire eligendi. Modus iriure dignissim has in, sed ut liber dicit mediocritatem. Et sed harum graecis, vitae admodum mel et, iracundia referrentur an sea. 7 | 8 | At usu tale everti philosophia, consequat gloriatur voluptatum mel cu. Ea quo tota modus debet, ad vitae consetetur conclusionemque usu. Nam cu eripuit luptatum. At posse nemore persequeris per. Mea ut aeterno vivendo, quodsi aeterno dissentiunt te cum. 9 | 10 | Vim id expetenda instructior, eu dolorem temporibus vis. Delenit voluptua id eum, nobis accumsan complectitur pri ut. Eu est enim quaeque lobortis, et tale essent fabulas cum. Eu ornatus debitis nec, paulo dicam dicunt pro ea, ad eam posse nusquam. Ne quis interesset comprehensam has, ex aperiam verterem tincidunt eum. Modus vitae viderer vim cu, id nec ferri fastidii. 11 | 12 | Ex legendos mandamus periculis vim, suscipit fabellas ne vim. At adhuc dicant mea, vix ea quidam voluptatum ullamcorper. Ex sea dicit theophrastus, ne sint offendit sit, wisi consequat sit ne. Sed labores utroque consectetuer no, an his inani expetenda ocurreret. Quaestio efficiantur mea ne. 13 | 14 | Tale noster timeam mea ut, etiam mnesarchum usu ne, cu sit quot ridens vulputate. Minim error qui ne, causae eruditi senserit pro ex. Epicurei qualisque ea duo, pro ei posse offendit, ad nam habeo melius. An nam brute vivendum, at vim amet sonet cotidieque. Cu debitis abhorreant nam, mel ut quot explicari. 15 | -------------------------------------------------------------------------------- /content/blog/wanderlust.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Wanderlust 3 | date: 2019-08-27T18:44:24.217Z 4 | tags: 'travel, philosophy, hobby' 5 | --- 6 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem #accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 7 | 8 | ## Heading 1 9 | 10 | ![](/assets/brett-jordan-1329359-unsplash.jpg) 11 | 12 | ## Heading 2 13 | 14 | Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 15 | 16 | ```js 17 | navigator.serviceWorker.register('/sw.js').then(reg => { 18 | reg.onupdatefound = () => { 19 | const w = reg.installing; 20 | w.onstatechange = () => { 21 | if (w.state === 'installed' && navigator.serviceWorker.controller) { 22 | // probably best to avoid reloading if someone has clicked 23 | if (hasInteracted) showUpdateToast(); 24 | 25 | location.reload(); 26 | } 27 | }; 28 | }; 29 | }); 30 | 31 | // if you want the bit on line 7 32 | let hasInteracted = false; 33 | addEventListener('click', () => { hasInteracted = true; }); 34 | ``` 35 | 36 | Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 37 | -------------------------------------------------------------------------------- /content/images/cyclist.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Cyclist 3 | date: 2019-08-27T18:55:16.273Z 4 | photo: /assets/brett-jordan-1329359-unsplash.jpg 5 | --- 6 | Cyclist through a city 7 | -------------------------------------------------------------------------------- /content/images/lighthouse.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lighthouse 3 | date: 2019-10-10T23:57:09.340Z 4 | photo: /assets/lucas-ludwig-dh2ztme9kni-unsplash.jpg 5 | --- 6 | A light house captured from the shore 7 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | 2 | [build] 3 | command = "yarn build" 4 | publish = "build" 5 | [build.environment] 6 | YARN_VERSION = "1.9.4" 7 | YARN_FLAGS = "--no-ignore-optional" -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "blog", 4 | "description": "Preact's netlify CMS template", 5 | "version": "0.1.3", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "per-env", 9 | "start:production": "npm run -s serve", 10 | "start:development": "npm run -s dev", 11 | "build": "preact build --prerenderUrls ./prerender-urls.js", 12 | "dev": "preact watch --prerender --prerenderUrls ./prerender-urls.js", 13 | "lint": "eslint src", 14 | "test": "jest" 15 | }, 16 | "eslintConfig": { 17 | "extends": "eslint-config-synacor" 18 | }, 19 | "eslintIgnore": [ 20 | "build/*" 21 | ], 22 | "devDependencies": { 23 | "eslint": "^4.9.0", 24 | "eslint-config-synacor": "^2.0.2", 25 | "esm": "^3.2.25", 26 | "glob": "^7.1.4", 27 | "jest": "^21.2.1", 28 | "jest-preset-preact": "^1.0.0", 29 | "markdown": "^0.5.0", 30 | "per-env": "^1.0.2", 31 | "preact-cli": "^3.0.1", 32 | "preact-render-spy": "^1.2.1", 33 | "react-syntax-highlighter": "^12.2.1", 34 | "webpack-bundle-analyzer": "^3.4.1" 35 | }, 36 | "dependencies": { 37 | "@preact/prerender-data-provider": "^3.0.1", 38 | "imagemin-mozjpeg": "^8.0.0", 39 | "imagemin-webpack-plugin": "^2.4.2", 40 | "markdown-to-jsx": "^6.11.4", 41 | "preact": "^10.4.6", 42 | "preact-cli-plugin-netlify": "^1.6.0", 43 | "preact-render-to-string": "^5.1.10", 44 | "preact-router": "^3.0.1", 45 | "parse-md": "^2.0.4" 46 | }, 47 | "jest": { 48 | "preset": "jest-preset-preact" 49 | }, 50 | "bugs": { 51 | "url": "https://github.com/preactjs/preact-netlify/issues" 52 | }, 53 | "homepage": "https://github.com/preactjs/preact-netlify#readme", 54 | "keywords": [ 55 | "preact", 56 | "netlify" 57 | ], 58 | "repository": { 59 | "type": "git", 60 | "url": "git+https://github.com/preactjs/preact-netlify.git" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /preact.config.js: -------------------------------------------------------------------------------- 1 | const netlifyPlugin = require('preact-cli-plugin-netlify'); 2 | const ImageminPlugin = require('imagemin-webpack-plugin').default; 3 | const imageminMozjpeg = require('imagemin-mozjpeg'); 4 | 5 | module.exports = (config, env) => { 6 | netlifyPlugin(config); 7 | env.production && !env.ssr && config.plugins.push(new ImageminPlugin({ 8 | from: './build/assets/**', 9 | pngquant: { 10 | quality: '60' 11 | }, 12 | plugins: [ 13 | imageminMozjpeg({ 14 | quality: 50, 15 | progressive: true 16 | }) 17 | ] 18 | })); 19 | return config; 20 | }; 21 | -------------------------------------------------------------------------------- /prerender-urls.js: -------------------------------------------------------------------------------- 1 | const { generateFileList } = require('./src/crawler'); 2 | const { join } = require('path'); 3 | const fs = require('fs'); 4 | const parseMD = require('parse-md').default; 5 | 6 | const [blogs] = generateFileList(join(__dirname, 'content')).nodes; 7 | module.exports = () => { 8 | const pages = [ 9 | { 10 | url: '/', 11 | seo: { 12 | cover: '/assets/profile.jpg' 13 | } 14 | }, 15 | { url: '/contact/' }, 16 | { url: '/contact/success' } 17 | ]; 18 | 19 | // adding blogs list posts page 20 | pages.push({ 21 | url: '/blogs/', 22 | data: blogs 23 | }); 24 | 25 | // adding all blog pages 26 | pages.push(...blogs.edges.map(blog => { 27 | let data; 28 | if (blog.format === 'md') { 29 | const { content } = parseMD(fs.readFileSync(join('content', 'blog', blog.id), 'utf-8')); 30 | data = content; 31 | } else { 32 | data = fs.readFileSync(join('content', 'blog', blog.id), 'utf-8').replace(/---(.*(\r)?\n)*---/, ''); 33 | } 34 | return { 35 | url: `/blog/${blog.id}`, 36 | seo: blog.details, 37 | data: { 38 | details: blog.details, 39 | content: data 40 | } 41 | }; 42 | })); 43 | 44 | return pages; 45 | }; 46 | -------------------------------------------------------------------------------- /src/assets/brett-jordan-1329359-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/brett-jordan-1329359-unsplash.jpg -------------------------------------------------------------------------------- /src/assets/cody-black-nm89mzvar5i-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/cody-black-nm89mzvar5i-unsplash.jpg -------------------------------------------------------------------------------- /src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/favicon.ico -------------------------------------------------------------------------------- /src/assets/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /src/assets/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/assets/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /src/assets/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/icons/favicon-16x16.png -------------------------------------------------------------------------------- /src/assets/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/icons/favicon-32x32.png -------------------------------------------------------------------------------- /src/assets/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/icons/mstile-150x150.png -------------------------------------------------------------------------------- /src/assets/lucas-ludwig-dh2ztme9kni-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/lucas-ludwig-dh2ztme9kni-unsplash.jpg -------------------------------------------------------------------------------- /src/assets/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs/preact-netlify/4170cbbd05d0d5c3f1ddc497473c15ca82dcffda/src/assets/profile.jpg -------------------------------------------------------------------------------- /src/assets/quotes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-closequote 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/app.js: -------------------------------------------------------------------------------- 1 | import { h, Component } from 'preact'; 2 | import { Router } from 'preact-router'; 3 | import { Provider } from '@preact/prerender-data-provider'; 4 | import Header from './header'; 5 | 6 | // Code-splitting is automated for routes 7 | import Home from '../routes/home'; 8 | import Blogs from '../routes/blogs'; 9 | import Blog from '../routes/blog'; 10 | import Contact from '../routes/contact'; 11 | import ContactSuccess from '../routes/contact-success'; 12 | import NotFoundPage from '../routes/notfound'; 13 | 14 | export default class App extends Component { 15 | 16 | /** Gets fired when the route changes. 17 | * @param {Object} event "change" event from [preact-router](https://github.com/preactjs/preact-router) 18 | * @param {string} event.url The newly routed URL 19 | */ 20 | handleRoute = e => { 21 | this.currentUrl = e.url; 22 | }; 23 | 24 | render(props) { 25 | return ( 26 | 27 |
28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 | 39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/header/index.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { Link } from 'preact-router/match'; 3 | import style from './style'; 4 | 5 | const Header = () => ( 6 |
7 |

Jane Doe

8 | 12 |
13 | ); 14 | 15 | export default Header; 16 | -------------------------------------------------------------------------------- /src/components/header/style.css: -------------------------------------------------------------------------------- 1 | .header { 2 | height: 100px;; 3 | } 4 | 5 | .header h1 { 6 | float: left; 7 | margin: 0; 8 | padding: 0 15px; 9 | font-size: 40px; 10 | line-height: 100px; 11 | font-weight: 400; 12 | font-family: 'Courgette', 'Helvetica Neue', arial, sans-serif;; 13 | color: #FFC107; 14 | } 15 | 16 | .header nav { 17 | float: right; 18 | font-size: 100%; 19 | } 20 | 21 | .header nav a { 22 | display: inline-block; 23 | height: 56px; 24 | line-height: 100px; 25 | margin: 0 15px; 26 | min-width: 50px; 27 | text-align: center; 28 | background: rgba(255,255,255,0); 29 | text-decoration: none; 30 | color: #333; 31 | will-change: background-color; 32 | transition-property: color; 33 | transition-duration: 300ms; 34 | text-transform: uppercase; 35 | position: relative; 36 | } 37 | 38 | .header nav a:hover, 39 | .header nav a:active, 40 | .header nav a.active { 41 | color: #FFC107; 42 | } 43 | 44 | .header nav a:after { 45 | content: ''; 46 | width: 0%; 47 | border-bottom: 3px solid #FFC107; 48 | position: absolute; 49 | bottom: -12px; 50 | left: 0; 51 | transition-duration: width; 52 | transition-duration: 300ms; 53 | 54 | } 55 | 56 | .header nav a:hover:after, .header nav a.active:after { 57 | width: 70% 58 | } 59 | 60 | @media all and (max-width: 728px) { 61 | .header h1{ 62 | font-size: 2rem; 63 | } 64 | .header nav a{ 65 | line-height: 100px; 66 | margin: 0 8px; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/crawler/index.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const { join, sep } = require('path'); 3 | const parseMD = require('parse-md').default; 4 | 5 | function getExtensionFromFilename(fileName) { 6 | return fileName.substr(fileName.lastIndexOf('.') + 1); 7 | } 8 | 9 | function getDetails(format, data) { 10 | const formatNormalised = format.toLowerCase(); 11 | 12 | switch (formatNormalised) { 13 | case 'md': 14 | case 'markdown': { 15 | const { metadata } = parseMD(data); 16 | return metadata; 17 | } 18 | 19 | case 'json': { 20 | return JSON.parse(data); 21 | } 22 | 23 | default: { 24 | console.error('File format not recognised'); 25 | } 26 | } 27 | } 28 | 29 | function getPreview(data) { 30 | const { content } = parseMD(data); 31 | let preview = content.replace(/---(.*(\r)?\n)*---/, '').replace(/\[.*\]\(.*\)/g, '').replace(/(\r)?\n/,''); 32 | preview = preview.substr(0, (preview.indexOf('\n') -1)); 33 | return preview.length < 500? preview : preview.substr(0, 500); 34 | } 35 | 36 | function getFolders(source) { 37 | const isDirectory = source => fs.lstatSync(source).isDirectory(); 38 | const isAValidFile = source => !fs.lstatSync(source).isDirectory() && source.endsWith('.md'); 39 | const getAllListings = source => 40 | fs.readdirSync(source).map(name => join(source, name)); 41 | let allContent = getAllListings(source); 42 | const edges = allContent.filter(isAValidFile).map(file => { 43 | const data = fs.readFileSync(file, 'utf-8'); 44 | const id = file.substr(file.lastIndexOf(sep) + 1); 45 | const format = getExtensionFromFilename(id); 46 | return { 47 | id, 48 | format, 49 | path: file, 50 | details: getDetails(format, data), 51 | preview: getPreview(data) 52 | }; 53 | }); 54 | const nodes = allContent.filter(isDirectory).map(dir => getFolders(dir)); 55 | const result = { 56 | id: source.substr(source.lastIndexOf(sep) + 1) 57 | }; 58 | if (nodes.length) { 59 | result.nodes = nodes; 60 | } 61 | if (edges.length) { 62 | result.edges = edges; 63 | } 64 | return result; 65 | } 66 | 67 | function generateFileList(src) { 68 | return getFolders(src); 69 | } 70 | 71 | module.exports = { 72 | generateFileList 73 | }; 74 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './style'; 2 | import App from './components/app'; 3 | 4 | export default App; 5 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blog", 3 | "short_name": "blog", 4 | "start_url": "/", 5 | "display": "standalone", 6 | "orientation": "portrait", 7 | "background_color": "#fff", 8 | "theme_color": "#673ab8", 9 | "icons": [ 10 | { 11 | "src": "/assets/icons/android-chrome-192x192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "/assets/icons/android-chrome-512x512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /src/routes/blog/formatted-code-block.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { useState } from 'preact/hooks'; 3 | 4 | import { vs } from 'react-syntax-highlighter/dist/esm/styles/prism'; 5 | import style from './style.css'; 6 | 7 | export function FormattedCodeBlock(props) { 8 | const [component, setComponent] = useState(null); 9 | if (component) { 10 | return component; 11 | } 12 | if (!props.class) { 13 | return ({props.children}); 14 | } 15 | throw new Promise(resolve => { 16 | let language = null; 17 | const highlighter = import('react-syntax-highlighter/dist/esm/prism-light'); 18 | let languageSyntax; 19 | switch (props.class) { 20 | case 'lang-js': 21 | language = 'javascript'; 22 | languageSyntax = import('react-syntax-highlighter/dist/esm/languages/prism/javascript'); 23 | break; 24 | case 'lang-html': 25 | language = 'html'; 26 | languageSyntax = import('react-syntax-highlighter/dist/esm/languages/prism/markup'); 27 | break; 28 | case 'lang-css': 29 | language = 'css'; 30 | languageSyntax = import('react-syntax-highlighter/dist/esm/languages/prism/css'); 31 | break; 32 | case 'lang-ts': 33 | language = 'typescript'; 34 | languageSyntax = import('react-syntax-highlighter/dist/esm/languages/prism/typescript'); 35 | break; 36 | default: 37 | language = 'markdown'; 38 | languageSyntax = import('react-syntax-highlighter/dist/esm/languages/prism/markdown'); 39 | break; 40 | } 41 | Promise.all([highlighter, languageSyntax]).then(values => { 42 | const [SyntaxHighlighter, languageHighlighter] = values.map(m => m ? m.default: null); 43 | getFormattedCodeBlock(SyntaxHighlighter, languageHighlighter, language, setComponent, resolve, props); 44 | }); 45 | }); 46 | } 47 | 48 | function getFormattedCodeBlock(SyntaxHighlighter, languageHighlighter, language, setState, resolve, props) { 49 | language && SyntaxHighlighter.registerLanguage(language, languageHighlighter); 50 | setState( 51 | 52 | {props.children} 53 | 54 | ); 55 | resolve(); 56 | } 57 | -------------------------------------------------------------------------------- /src/routes/blog/index.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { Suspense } from 'preact/compat'; 3 | import { usePrerenderData } from '@preact/prerender-data-provider'; 4 | import Markdown from 'markdown-to-jsx'; 5 | import { FormattedCodeBlock } from './formatted-code-block'; 6 | 7 | import style from './style'; 8 | 9 | const blogs = (props) => { 10 | const [data, isLoading] = usePrerenderData(props); 11 | return ( 12 |
13 | {getBlogBody(data, isLoading)} 14 |
15 | ); 16 | }; 17 | 18 | function CodeBlock(props) { 19 | const fallback = 
{props.children}
; 20 | if (typeof window === 'undefined') { 21 | return (fallback); 22 | } 23 | return ( 24 | 25 | 26 | 27 | ); 28 | } 29 | 30 | function InlineImage({ alt, title, src }) { 31 | return ( 32 |
33 | {alt} 34 | {title && {title}} 35 |
36 | ); 37 | } 38 | 39 | function getBlogBody(data, isLoading) { 40 | if (isLoading) { 41 | return ( 42 |
43 |

 

44 |   45 |
46 |
47 |
48 |
49 |
50 |
51 | ); 52 | } 53 | 54 | if (data && data.data) { 55 | const { details, content } = data.data; 56 | return ( 57 |
58 |

{details.title}

59 | { details.subtitle && {details.subtitle} } 60 | { details.cover &&
} 61 |
62 | { content } 73 |
74 |
75 | ); 76 | } 77 | } 78 | 79 | export default blogs; 80 | -------------------------------------------------------------------------------- /src/routes/blog/style.css: -------------------------------------------------------------------------------- 1 | .blogcontainer { 2 | max-width: 728px; 3 | width: 100%; 4 | margin: 0 auto 10em; 5 | line-height: 1.6rem; 6 | } 7 | 8 | .blogtitle { 9 | font-size: 2.2rem; 10 | font-weight: 400; 11 | margin-bottom: 8px; 12 | line-height: 1; 13 | } 14 | 15 | .blogbody { 16 | font-size: 1.1rem; 17 | } 18 | 19 | .blogbody img { 20 | max-width: 100%; 21 | } 22 | 23 | .blogbody a { 24 | color: #000; 25 | text-decoration: underline; 26 | } 27 | 28 | .blogbody pre code { 29 | display: block; 30 | max-width: 100%; 31 | color: rgb(57, 58, 52); 32 | font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 33 | direction: ltr; 34 | text-align: left; 35 | white-space: pre; 36 | word-spacing: normal; 37 | word-break: normal; 38 | font-size: 0.95em; 39 | line-height: 1.2em; 40 | tab-size: 4; 41 | hyphens: none; 42 | overflow-x: scroll; 43 | } 44 | 45 | code.inline { 46 | display: inline; 47 | max-width: none; 48 | background: #ddd; 49 | padding: 0px 4px; 50 | } 51 | 52 | .blogbody pre pre { 53 | max-width: 100%; 54 | overflow: scroll; 55 | color: rgb(57, 58, 52); 56 | font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier; 57 | direction: ltr; 58 | text-align: left; 59 | white-space: pre; 60 | word-spacing: normal; 61 | word-break: normal; 62 | font-size: 0.95em; 63 | line-height: 1.2em; 64 | tab-size: 4; 65 | hyphens: none; 66 | padding: 1em; 67 | margin: 0.5em 0px; 68 | overflow: auto; 69 | border: 1px solid rgb(221, 221, 221); 70 | background-color: white; 71 | } 72 | 73 | .blogsubtitle { 74 | color: #aaa; 75 | display: block; 76 | text-align: left; 77 | font-size: 1.2rem; 78 | margin-bottom: 2rem; 79 | } 80 | 81 | .blogcover { 82 | height: 30vh; 83 | background-size: cover; 84 | background-color: #eee; 85 | background-position: center; 86 | } 87 | 88 | .loadingPlaceholder .blogtitle { 89 | height: 24px; 90 | } 91 | 92 | .loadingPlaceholder .blogsubtitle { 93 | height: 18px; 94 | } 95 | 96 | .loadingBody { 97 | height: 12px; 98 | margin-bottom: 8px; 99 | } 100 | 101 | .loadingBody:nth-child(1) { 102 | width: 90%; 103 | } 104 | 105 | .loadingBody:nth-child(3) { 106 | width: 65%; 107 | } 108 | 109 | .inlineImageContainer{ 110 | display: flex; 111 | flex-direction: column; 112 | justify-content: center; 113 | align-items: center; 114 | width: 80%; 115 | margin: 32px auto; 116 | } 117 | 118 | .inlineImage { 119 | max-width: 100%; 120 | } 121 | 122 | .inlineImageTitle { 123 | font-size: 0.8rem; 124 | margin-top: 8px; 125 | color: #777; 126 | } 127 | -------------------------------------------------------------------------------- /src/routes/blogs/index.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { Link } from 'preact-router'; 3 | import { usePrerenderData } from '@preact/prerender-data-provider'; 4 | import style from './style'; 5 | 6 | const blogs = (props) => { 7 | const [data, isLoading] = usePrerenderData(props); 8 | return ( 9 |
10 |

My Blogs

11 | { getBlogsListing(data, isLoading) } 12 |
13 | ); 14 | }; 15 | 16 | function getBlogsListing(data, isLoading) { 17 | if (isLoading) { 18 | return ( 19 |
20 |

 

21 |
 
22 |
 
23 |
 
24 |
25 | ); 26 | } 27 | if (data && data.data) { 28 | const { data: blogs } = data; 29 | return ( 30 | <> 31 | {blogs.edges.map(blog => ( 32 | 33 |
34 |

{blog.details.title}

35 |
36 | { 37 | (blog.details.tags.substr(1, blog.details.tags.length - 2).split(',') || []).map(tag => {tag}) 38 | } 39 |
40 |

41 | {blog.preview} 42 |

43 |
44 | 45 | ))} 46 | 47 | ); 48 | } 49 | } 50 | 51 | export default blogs; 52 | -------------------------------------------------------------------------------- /src/routes/blogs/style.css: -------------------------------------------------------------------------------- 1 | .pageBlogs { 2 | padding: 0 5%; 3 | } 4 | 5 | .pageTitle { 6 | position: relative; 7 | display: inline-block; 8 | font-weight: 500; 9 | font-family: serif; 10 | } 11 | 12 | .pageTitle:after { 13 | position: absolute; 14 | bottom: -5px; 15 | left: 0px; 16 | content: ''; 17 | width: 75%; 18 | border-bottom: 2px solid #FFC107; 19 | } 20 | 21 | h2 { 22 | font-weight: 400; 23 | font-size: 24px; 24 | margin: 16px 0 12px 0; 25 | } 26 | 27 | .tag { 28 | padding: 4px 8px; 29 | margin-left: 8px; 30 | text-transform: lowercase; 31 | background-color: #ffdd037c; 32 | border-radius: 5px; 33 | color: #999; 34 | font-size: 12px; 35 | } 36 | 37 | .tag:first-child { 38 | margin-left: 0px; 39 | } 40 | 41 | .preview { 42 | width: 50%; 43 | line-height: 1.3; 44 | color: #666; 45 | max-height: 80px; 46 | overflow: hidden; 47 | text-overflow: ellipsis; 48 | } 49 | 50 | .loadingPlaceholder .blogtitle { 51 | height: 24px; 52 | } 53 | 54 | .loadingPlaceholder .loadingBody { 55 | height: 12px; 56 | margin-bottom: 8px; 57 | } 58 | 59 | .loadingPlaceholder .loadingBody:nth-child(2) { 60 | width: 90%; 61 | } 62 | 63 | .loadingPlaceholder .loadingBody:nth-child(3) { 64 | width: 80%; 65 | } 66 | 67 | .loadingPlaceholder .loadingBody:nth-child(4) { 68 | width: 65%; 69 | } 70 | 71 | @media all and (max-width: 728px) { 72 | .preview { 73 | width: 100%; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/routes/contact-success/index.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import style from './style'; 3 | 4 | const photographs = (props) => { 5 | return ( 6 |
7 |

Thanks! I'll be in touch soon.

8 |
9 | ); 10 | }; 11 | 12 | export default photographs; 13 | -------------------------------------------------------------------------------- /src/routes/contact-success/style.css: -------------------------------------------------------------------------------- 1 | .pageContact { 2 | padding: 0 5%; 3 | } 4 | 5 | .pageTitle { 6 | position: relative; 7 | display: inline-block; 8 | font-weight: 500; 9 | } 10 | 11 | .pageTitle:after { 12 | position: absolute; 13 | bottom: -5px; 14 | left: 0px; 15 | content: ''; 16 | width: 75%; 17 | border-bottom: 2px solid #FFC107; 18 | } -------------------------------------------------------------------------------- /src/routes/contact/index.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import style from './style'; 3 | 4 | const photographs = (props) => { 5 | return ( 6 |
7 |

Contact me

8 |
9 |

10 |

Hi!
11 |
If you are interested in my work and are looking to contact me for a contract please use the following form to contact me.
12 |
 
13 |
Cheers 🍻
14 |

15 |
16 | 17 |

18 | 19 |

20 |

21 | 22 |

23 |

24 |