diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..d2609ca
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,17 @@
+{
+ "presets":[
+ "es2015", "react"
+ ],
+ "env": {
+ "development": {
+ "presets": ["es2015", "react", "stage-0"],
+ "plugins": ["transform-runtime"],
+ "presets": ["react-hmre"]
+ }
+ },
+ "env": {
+ "build": {
+ "presets": ["es2015", "react", "stage-0"]
+ }
+ }
+}
diff --git a/.gitignore b/.gitignore
index 5148e52..6c4d523 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,37 +1,7 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
node_modules
-jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
+dist
+public
+*.log
+content
+renders
+data.json
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..cd651e3
--- /dev/null
+++ b/package.json
@@ -0,0 +1,55 @@
+{
+ "name": "portfolio",
+ "version": "1.0.0",
+ "description": "portfolio",
+ "main": "index.js",
+ "scripts": {
+ "build": "NODE_ENV=production babel src --out-dir dist --copy-files && webpack -p --progress --config webpack.prod.config.js",
+ "start": "NODE_ENV=production node ./src/server.js",
+ "dev": "NODE_ENV=development babel-node ./src/server.js --presets es2015,stage-2 ./srcserver.js"
+ },
+ "keywords": [
+ "porfolio",
+ "react"
+ ],
+ "author": "Matúš Námešný",
+ "license": "ISC",
+ "dependencies": {
+ "async": "^2.5.0",
+ "axios": "^0.17.0",
+ "express": "^4.13.4",
+ "front-matter": "^2.2.0",
+ "jsonfile": "^4.0.0",
+ "markdown-it": "^8.4.0",
+ "moment": "^2.19.1",
+ "node-sass": "^4.9.0",
+ "react": "^15.0.1",
+ "react-dom": "^15.0.1",
+ "react-router-dom": "^4.1.1"
+ },
+ "devDependencies": {
+ "babel-cli": "^6.26.0",
+ "babel-core": "^6.7.6",
+ "babel-jest": "*",
+ "babel-loader": "^7.1.4",
+ "babel-plugin-transform-runtime": "^6.7.5",
+ "babel-polyfill": "^6.26.0",
+ "babel-preset-es2015": "^6.6.0",
+ "babel-preset-react": "^6.5.0",
+ "babel-preset-react-hmre": "^1.1.1",
+ "babel-preset-stage-0": "^6.5.0",
+ "babel-register": "^6.7.2",
+ "babel-runtime": "^6.26.0",
+ "css-loader": "^0.28.11",
+ "css-modules-require-hook": "^4.0.6",
+ "file-loader": "^1.1.11",
+ "postcss-loader": "^2.1.4",
+ "sass-loader": "^7.0.1",
+ "style-loader": "^0.21.0",
+ "url-loader": "^0.5.9",
+ "webpack": "^4.7.0",
+ "webpack-cli": "^2.1.2",
+ "webpack-dev-middleware": "^3.1.3",
+ "webpack-hot-middleware": "^2.18.0"
+ }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..f053ebf
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/src/app-client.js b/src/app-client.js
new file mode 100644
index 0000000..a194113
--- /dev/null
+++ b/src/app-client.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {render} from 'react-dom';
+import {BrowserRouter as Router} from 'react-router-dom';
+import {App} from './components';
+
+const AppClient = () => (
+
+
+
+)
+
+window.onload = () => {
+ render(
+ ,
+ document.getElementById('root')
+ );
+};
diff --git a/src/components/About.js b/src/components/About.js
new file mode 100644
index 0000000..dc2a884
--- /dev/null
+++ b/src/components/About.js
@@ -0,0 +1,26 @@
+import React, {Component} from 'react';
+import {Spinner, Header} from '.';
+import '../static/stylesheets/globals.scss';
+import styles from './About.scss';
+import contentStyle from '../static/stylesheets/content.scss';
+
+export default class About extends Component {
+
+ render () {
+ if (this.props.isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+ )
+ }
+}
diff --git a/src/components/About.scss b/src/components/About.scss
new file mode 100644
index 0000000..2ed6ea5
--- /dev/null
+++ b/src/components/About.scss
@@ -0,0 +1 @@
+@import "../static/stylesheets/variables.scss";
diff --git a/src/components/App.js b/src/components/App.js
new file mode 100644
index 0000000..316d82b
--- /dev/null
+++ b/src/components/App.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { Home, NotFoundWrapper } from '.';
+import { MainContainer, PostContainer } from '../containers';
+
+export const App = () => (
+
+
+
+
+
+
+
+);
+
+export default App;
diff --git a/src/components/Blog.js b/src/components/Blog.js
new file mode 100644
index 0000000..b119f76
--- /dev/null
+++ b/src/components/Blog.js
@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import {Spinner, Header} from '.';
+import '../static/stylesheets/globals.scss';
+import styles from './Blog.scss';
+import contentStyle from '../static/stylesheets/content.scss';
+
+export default class Blog extends Component {
+
+ render() {
+ if (this.props.isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ let posts = this.props.posts.map((post) =>
+
+ )
+
+ return (
+
+ );
+ }
+};
diff --git a/src/components/Blog.scss b/src/components/Blog.scss
new file mode 100644
index 0000000..5c85921
--- /dev/null
+++ b/src/components/Blog.scss
@@ -0,0 +1,29 @@
+@import "../static/stylesheets/variables.scss";
+
+.post {
+ display: inline-block;
+ float: left;
+ span {
+ margin-right: 30px;
+ }
+ a {
+ color: $blue;
+ text-decoration: none;
+ text-transform: capitalize;
+ font-family: $font-header;
+ font-size: 1.2em;
+ }
+}
+
+.postsWrapper {
+ margin-top: 20px;
+}
+
+.postHeader {
+ overflow: hidden;
+ padding: 0 5px 0 5px;
+}
+
+.postListItem {
+ margin: 8px;
+}
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..0137c4b
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import '../static/stylesheets/globals.scss';
+import styles from './Header.scss';
+
+export default class Header extends Component {
+
+ render () {
+ return (
+
+
{this.props.header}
+
+ )
+ }
+}
diff --git a/src/components/Header.scss b/src/components/Header.scss
new file mode 100644
index 0000000..197f916
--- /dev/null
+++ b/src/components/Header.scss
@@ -0,0 +1,11 @@
+@import "../static/stylesheets/variables.scss";
+
+.mainHeader {
+ border-left: 5px solid $blue;
+ padding: 5px;
+ margin: 0;
+ text-align: left;
+ h1 {
+ margin: 0;
+ }
+}
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 0000000..f19d729
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import config from '../utils/config.json';
+import '../static/stylesheets/globals.scss';
+import styles from './Home.scss';
+
+export default class Home extends Component {
+
+ render() {
+ let key = 0;
+ const objKeys = Object.keys(config.social);
+
+ const socialLinks = objKeys.map((val) => {
+ const link = (
+
+
+ {val}
+
+ );
+ key += 1;
+ return link;
+ });
+
+ socialLinks.push(
+
+
+ e-mail
+ ,
+ );
+
+ return (
+
+
+
+
{ config.name }
+
+
+ {socialLinks}
+
+
+
+
+
+
+
+
+
Looks like you're lost
+
404 Page not found
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
{this.props.post.published}
+
+
+
+
+
+
+ {this.props.children}
+
+ )
+ }
+}
diff --git a/src/components/Wrapper.scss b/src/components/Wrapper.scss
new file mode 100644
index 0000000..64e7984
--- /dev/null
+++ b/src/components/Wrapper.scss
@@ -0,0 +1,5 @@
+@import "../static/stylesheets/variables.scss";
+
+.centerContent {
+ text-align: center;
+}
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..af0f26a
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,11 @@
+export { default as Home } from './Home';
+export { default as Blog } from './Blog';
+export { default as About } from './About';
+export { default as Post } from './Post';
+export { default as NotFoundPage } from './NotFoundPage';
+export { default as NotFoundWrapper } from './NotFoundWrapper';
+export { default as Spinner } from './Spinner';
+export { default as Header } from './Header';
+export { default as Wrapper } from './Wrapper';
+export { default as Navbar } from './Navbar';
+export { default as App } from './App';
diff --git a/src/containers/MainContainer.js b/src/containers/MainContainer.js
new file mode 100644
index 0000000..b8a71c5
--- /dev/null
+++ b/src/containers/MainContainer.js
@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import axios from 'axios';
+import {About, Blog, Home, Wrapper} from '../components';
+
+export default class BlogContainer extends Component {
+
+ constructor() {
+ super();
+
+ this.state = {
+ isLoadingBlog: true,
+ isLoadingAbout: true,
+ }
+ }
+
+ componentDidMount() {
+ axios.get('/api/about').then((res) => {
+ this.setState({
+ isLoadingAbout: false,
+ about: res.data,
+ });
+ })
+
+ axios.get('/api/blog').then((res) => {
+ this.setState({
+ isLoadingBlog: false,
+ posts: res.data,
+ });
+ })
+ }
+
+ render() {
+ return (
+
+ )
+ }
+}
diff --git a/src/containers/PostContainer.js b/src/containers/PostContainer.js
new file mode 100644
index 0000000..902f099
--- /dev/null
+++ b/src/containers/PostContainer.js
@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import axios from 'axios';
+import {Post, Wrapper, NotFoundPage} from '../components';
+
+export default class PostContainer extends Component {
+ constructor() {
+ super();
+
+ this.state = {
+ isLoading: true,
+ error: false,
+ };
+ }
+
+ componentDidMount() {
+ const url = '/api/post/' + this.props.match.params.postname;
+
+ axios.get(url).then((res) => {
+ if (res.data.error) {
+ this.setState({
+ error: true,
+ });
+ }
+ else {
+ this.setState({
+ error: false,
+ isLoading: false,
+ post: res.data,
+ });
+ }
+ })
+ }
+
+ render() {
+
+ if (this.state.error) {
+ return (
+
+ )
+ }
+
+ return (
+
+
+
+ );
+ }
+}
diff --git a/src/containers/index.js b/src/containers/index.js
new file mode 100644
index 0000000..aeace32
--- /dev/null
+++ b/src/containers/index.js
@@ -0,0 +1,2 @@
+export { default as MainContainer } from './MainContainer';
+export { default as PostContainer } from './PostContainer';
diff --git a/src/server.js b/src/server.js
new file mode 100644
index 0000000..a2558d3
--- /dev/null
+++ b/src/server.js
@@ -0,0 +1,56 @@
+require('babel-register');
+
+var app = new (require('express'))();
+var port = process.env.PORT || 3000;
+
+const sass = require('node-sass');
+
+require('css-modules-require-hook')({
+ generateScopedName: '[name]__[local]___[hash:base64:5]',
+ extensions: ['.scss', '.css'],
+ preprocessCss: (data, filename) => sass.renderSync({
+ data,
+ file: filename,
+ }).css
+});
+
+var fs = require('fs');
+var filename = './src/utils/data.json';
+var dataStub = {"posts": [], "other": []};
+fs.writeFileSync(filename, JSON.stringify(dataStub));
+
+
+// initalize webpack dev middleware if in development context
+if (process.env.NODE_ENV === 'development') {
+ var webpack = require('webpack')
+ var config = require('../webpack.config')
+
+ var devMiddleware = require('webpack-dev-middleware')
+ var hotDevMiddleware = require('webpack-hot-middleware')
+ var compiler = webpack(config)
+ var devMiddlewareConfig = {
+ noInfo: true,
+ stats: {colors: true},
+ publicPath: config.output.publicPath
+ }
+
+ app.use(devMiddleware(compiler, devMiddlewareConfig))
+ app.use(hotDevMiddleware(compiler))
+}
+
+app.use(require('express').static('public'));
+require('./utils/scanner')();
+
+var api = require('./utils/api');
+app.use("/api", api);
+
+var serverRender = require('./utils/serverRender');
+app.get("*", serverRender);
+
+app.listen(port, function(error) {
+ if (error) {
+ console.error(error);
+ } else {
+ console.info("[Server] Listening on port %s", port);
+ }
+})
diff --git a/src/static/images/background-cover-converted.jpg b/src/static/images/background-cover-converted.jpg
new file mode 100644
index 0000000..4647c7b
Binary files /dev/null and b/src/static/images/background-cover-converted.jpg differ
diff --git a/src/static/stylesheets/content.scss b/src/static/stylesheets/content.scss
new file mode 100644
index 0000000..c0235c7
--- /dev/null
+++ b/src/static/stylesheets/content.scss
@@ -0,0 +1,20 @@
+@import "./variables.scss";
+
+.contentWrapper {
+ display: inline-block;
+ overflow: auto;
+ box-sizing: border-box;
+ padding: 20px;
+ a {
+ color: $blue;
+ }
+ width: 100%;
+ @media (min-width: $break-large) {
+ width: 960px;
+ }
+}
+
+.content {
+ box-sizing: border-box;
+ text-align: left;
+}
diff --git a/src/static/stylesheets/globals.scss b/src/static/stylesheets/globals.scss
new file mode 100644
index 0000000..8685502
--- /dev/null
+++ b/src/static/stylesheets/globals.scss
@@ -0,0 +1,17 @@
+@import "./variables.scss";
+
+:global(body, html) {
+ height: 100%;
+}
+
+:global(body) {
+ font-family: $font-paragraph;
+ color: $black;
+ margin: 0;
+}
+
+@for $i from 1 through 6 {
+ :global(h#{$i}) {
+ font-family: $font-header;
+ }
+}
diff --git a/src/static/stylesheets/variables.scss b/src/static/stylesheets/variables.scss
new file mode 100644
index 0000000..6eb5913
--- /dev/null
+++ b/src/static/stylesheets/variables.scss
@@ -0,0 +1,7 @@
+$font-header: 'Open Sans Condensed', sans-serif;
+$font-paragraph: 'Open Sans', sans-serif;
+$white: #fdfdfd;
+$black: #2f2f2f;
+$blue: #144A98;
+$grey: #A9A9A9;
+$break-large: 992px;
diff --git a/src/utils/api.js b/src/utils/api.js
new file mode 100644
index 0000000..87c85b8
--- /dev/null
+++ b/src/utils/api.js
@@ -0,0 +1,50 @@
+const data = require('./data.json');
+const api = require('express').Router();
+const fs = require('fs');
+const path = require('path');
+const config = require('./config.json');
+
+api.get('/blog', (req, res) => {
+ res.json(data.posts);
+});
+
+api.get('/about', (req, res) => {
+ const renderPath = path.join(process.cwd(), '/renders', 'about.html');
+ fs.readFile(renderPath, 'utf8', (err, data) => {
+ if (err) {
+ res.json({
+ error: 404
+ });
+ } else {
+ res.json({
+ body: data,
+ });
+ }
+ });
+});
+
+api.get('/post/:postname', (req, res) => {
+ const postname = req.params.postname;
+ const post = data.posts.find((el) => {
+ return el.filename === postname
+ });
+
+ const renderPath = path.join(process.cwd(), '/renders', postname + '.html');
+ fs.readFile(renderPath, 'utf8', (err, data) => {
+ if (err) {
+ res.json({
+ error: 404
+ });
+ } else {
+ res.json({
+ published: post.published,
+ link: post.link,
+ title: post.title,
+ body: data,
+ });
+ }
+ });
+});
+
+
+module.exports = api;
diff --git a/src/utils/compiler.js b/src/utils/compiler.js
new file mode 100644
index 0000000..0735bb1
--- /dev/null
+++ b/src/utils/compiler.js
@@ -0,0 +1,128 @@
+const MarkdownIt = require('markdown-it');
+const fs = require('fs');
+const path = require('path');
+const moment = require('moment');
+const jsonfile = require('jsonfile');
+const async = require('async');
+const fm = require('front-matter');
+const config = require('../utils/config.json');
+
+/**
+ * Renders file using MarkdownIt
+ */
+function render(file) {
+ const md = new MarkdownIt({html: true});
+ return md.render(file);
+}
+
+/**
+ * Extracts file metadata such as parent directory
+ */
+function fileMetadata(filepath) {
+ const paths = filepath.split('/');
+ const basename = path.basename(filepath);
+
+ const metadata = {
+ basename,
+ filename: basename.substr(0, basename.lastIndexOf('.')),
+ parrent: paths[paths.length - 2],
+ dirname: path.dirname(filepath),
+ };
+
+ return metadata;
+}
+
+/**
+ * Compiles file that is a blog post
+ */
+function compilePost(filepath, data, fileData, callback) {
+ const frontMatter = fm(fileData);
+ const rendered = render(frontMatter.body);
+ const metadata = fileMetadata(filepath);
+
+ let published;
+ if (frontMatter.attributes.date) {
+ published = moment(frontMatter.attributes.date);
+ } else {
+ published = moment();
+ }
+
+ const post = {
+ published: published.format('MMMM DD, YYYY'),
+ filename: metadata.filename,
+ title: frontMatter.attributes.title,
+ link: '/post/' + metadata.filename
+ };
+
+ const renderedpath = path.join(process.cwd(), config.renderPath, `${metadata.filename}.html`);
+
+ fs.writeFile(renderedpath, rendered, (err) => {
+ if (err) callback(err);
+ else callback(null, post);
+ });
+}
+
+/**
+ * Compiles other types of files such as resumes, about me and so on.
+ */
+function compileOther(filepath, data, fileData, callback) {
+
+ const frontMatter = fm(fileData);
+ const rendered = render(frontMatter.body);
+ const metadata = fileMetadata(filepath);
+
+ const post = {
+ filename: metadata.filename
+ }
+
+ const renderedpath = path.join(process.cwd(), config.renderPath, `${metadata.filename}.html`);
+
+ fs.writeFile(renderedpath, rendered, (err) => {
+ if (err) callback(err);
+ else callback(null, post);
+ });
+}
+
+function Compiler(data) {
+ this.data = data;
+}
+
+/**
+ *
+ */
+Compiler.prototype.addFile = function(filepath, isPost, callback) {
+
+ if (isPost) {
+ async.waterfall([
+ fs.readFile.bind(fs, filepath, 'utf8'),
+ compilePost.bind(compilePost, filepath, this.data),
+ ], (err, result) => {
+ if (err) throw err;
+
+ this.data.posts.push(result);
+ console.log("[Compiler] File %s compiled", filepath);
+ callback();
+ });
+ } else {
+ async.waterfall([
+ fs.readFile.bind(fs, filepath, 'utf8'),
+ compileOther.bind(compileOther, filepath, this.data),
+ ], (err, result) => {
+ if (err) throw err;
+
+ this.data.other.push(result);
+ console.log("[Compiler] File %s compiled", filepath);
+ callback();
+ });
+ }
+};
+
+/**
+ * Writes updated data to the data file
+ */
+Compiler.prototype.writeData = function(callback) {
+ const dataPath = path.join(process.cwd(), 'src/utils/data.json');
+ jsonfile.writeFile(dataPath, this.data, callback);
+};
+
+module.exports = Compiler;
diff --git a/src/utils/config.json b/src/utils/config.json
new file mode 100644
index 0000000..4bbce5d
--- /dev/null
+++ b/src/utils/config.json
@@ -0,0 +1,17 @@
+{
+ "title": "Matúš Námešný",
+ "coverimage": "",
+ "name": "Matúš Námešný",
+ "email": "matus@namesny.com",
+ "social": {
+ "twitter": "https://twitter.com/matus_n",
+ "github": "https://github.com/LordMathis",
+ "codepen": "https://codepen.io/LordMathis/",
+ "linkedin": "https://www.linkedin.com/in/mat%C3%BA%C5%A1-n%C3%A1me%C5%A1n%C3%BD-3903b6128/"
+ },
+ "contentPath": "./content",
+ "renderPath": "./renders",
+ "files": [
+ "about.md", "resume.md"
+ ]
+}
diff --git a/src/utils/scanner.js b/src/utils/scanner.js
new file mode 100644
index 0000000..fc07238
--- /dev/null
+++ b/src/utils/scanner.js
@@ -0,0 +1,62 @@
+const fs = require('fs');
+const path = require('path');
+const async = require('async');
+const Compiler = require('./compiler');
+const config = require('./config.json');
+const data = require('./data.json');
+
+module.exports = function() {
+
+ var compiler = new Compiler(data);
+
+ /**
+ * Reads the directory and returns it's content
+ */
+ function readdir(callback) {
+ fs.readdir(config.contentPath, callback);
+ }
+
+ /**
+ * Calls compile on each file in the directory
+ */
+ function compile(files, callback) {
+ console.log("[Scanner] Discovered files: " + files);
+ async.each(files, compileFile, (err) => {
+ if (err) throw err;
+ callback();
+ });
+ }
+
+ /**
+ * Helper function which calls compile in the Compiler module
+ */
+ function compileFile(file, callback) {
+ const filePath = path.join(process.cwd(), config.contentPath, file);
+
+ // config.files contains list of file names which are not considered blog posts
+ if (config.files.indexOf(file) == -1) {
+ compiler.addFile(filePath, true, callback);
+ } else {
+ compiler.addFile(filePath, false, callback);
+ }
+ }
+
+ /**
+ * Writes updated data into the data file
+ */
+ function writeData(callback) {
+ compiler.writeData(callback);
+ }
+
+ /**
+ * Main function. Scans the directory for files and compiles them into html
+ * using the Compiler module
+ */
+ async.waterfall([
+ readdir,
+ compile,
+ writeData
+ ], (err) => {
+ if(err) throw err;
+ });
+}
diff --git a/src/utils/serverRender.js b/src/utils/serverRender.js
new file mode 100644
index 0000000..afe5ede
--- /dev/null
+++ b/src/utils/serverRender.js
@@ -0,0 +1,41 @@
+//import 'babel-polyfill'
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import { StaticRouter as Router } from 'react-router-dom'
+import { App } from '../components/App'
+
+function serverRender(req, res) {
+ let markup = '';
+ let status = 200;
+
+ const context = {}
+ markup = renderToString(
+
+
+ ,
+ );
+
+ return res.status(status).send(renderFullPage(markup));
+}
+
+function renderFullPage(html) {
+ return `
+
+
+
+
+ Matúš Námešný
+
+
+
+
+
+
+ ${process.env.NODE_ENV === 'production' ? html : `
${html}
`}