diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/css/styles.css | 9 | ||||
| -rw-r--r-- | src/html/bread.html | 115 | ||||
| -rw-r--r-- | src/index.js | 52 | ||||
| -rw-r--r-- | src/photo/back.jpg | bin | 0 -> 1181073 bytes | |||
| -rw-r--r-- | src/server.js | 16 |
5 files changed, 90 insertions, 102 deletions
diff --git a/src/css/styles.css b/src/css/styles.css index 4ac97ca..4b77273 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -24,7 +24,7 @@ img { } .card { - margin: 3em; + margin: 1em; padding: 2%; border: 1px solid #aaaaaa; /* width: 400px; */ @@ -35,9 +35,7 @@ img { .card img { width: 100%; padding: 2%; - /* display: inline; */ - /* margin-left: auto; - margin-right: 3em; */ + } .feed { @@ -86,6 +84,5 @@ img { .date { font-style: italic; - margin-left: 2em; - margin-top: 1em; + margin: 0em; }
\ No newline at end of file diff --git a/src/html/bread.html b/src/html/bread.html index 15194c5..37abee8 100644 --- a/src/html/bread.html +++ b/src/html/bread.html @@ -5,109 +5,36 @@ <title>Mark's Kitchen - Bread</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> - <link rel="stylesheet" type="text/css" href="css/styles.css"> + <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"> + <link rel="stylesheet" type="text/css" href="/css/styles.css"> + <script src="https://cdn.jsdelivr.net/npm/vue"></script> + <script> + window.onload = function () { + fetch(new Request('/posts.json')).then(response => response.json()) + .then(response => { + var feed = new Vue({ + el: '.feed', + data: { posts: response.data } + }) + }); + } + + </script> </head> <body> - <!-- <div class="container"> --> <div> - <br> <h1>Bread</h1> Some highlights (and lowlights) of breadmaking <div class="feed"> - <div class="card"> - <p class="card-text">A good looking loaf. Made a batch of 3 the next day, which took a toll on my - banneton, leaving a lot of residue.</p> - <div class="card-img"> - <img src="photo/pretty.jpg"> - </div> - <br> - <p class="date">Dec 4, 2018</p> - </div> - <div class="card"> - <p class="card-text">Made some pizza crust, it was delicious. The dough was awfully thick, probably - shouldn't have used it all.</p> - <div class="card-img"> - <img src="photo/pizza1.jpg"> - <img src="photo/pizza2.jpg"> - </div> - <br> - <p class="date">Nov 21, 2018</p> - </div> - <div class="card"> - <p class="card-text">Another nice no-knead recipie</p> - <div class="card-img"> - <img src="photo/good1.jpg"> - <img src="photo/good2.jpg"> - </div> - <br> - <p class="date">Nov 16, 2018</p> - </div> - <div class="card"> - <p class="card-text">Tried to make something more sandwich-y. 4 hour warm proof with wheat, rye, - and corn flours. A bit dense, but not bad.</p> - <div class="card-img"> - <img src="photo/wheat.jpg"> - </div> - <br> - <p class="date">Sep 30, 2018</p> - </div> - <div class="card"> - <p class="card-text">A twist on normal beer bread, using hard cider.</p> - <div class="card-img"> - <img src="photo/cider.jpg"> - </div> - <br> - <p class="date">Sep 30, 2018</p> - </div> - <div class="card"> - <p class="card-text">I wanted to try the NY Times no knead recipie. Bread turned out delicious. - Will try to tranfer to a loaf shape next time for slices.</p> - <div class="card-img"> - <img src="photo/nyt1.jpg"> - <img src="photo/nyt2.jpg"> - </div> - <br> - <p class="date">Sep 27, 2018</p> - </div> - <div class="card"> - <p class="card-text">First time using a banneton, beautiful shape. Tried a different knead style - too. Rye-AP mix</p> - <div class="card-img"> - <img src="photo/ban1.jpg"> - <img src="photo/ban2.jpg"> - </div> - <br> - <p class="date">Sep 19, 2018</p> - </div> - <div class="card"> - <p class="card-text">Severely messed up the recipie this time. Tried to double to get two loafs, - both turned out flat.</p> - <div class="card-img"> - <img src="photo/flat1.jpg"> - <img src="photo/flat2.jpg"> - </div> - <br> - <p class="date">Aug 30, 2018</p> - </div> - <div class="card"> - <p class="card-text">Used more white flour this time</p> - <div class="card-img"> - <img src="photo/white-1.jpg"> - <img src="photo/white-2.jpg"> - </div> - <br> - <p class="date">Aug 16, 2018</p> - </div> - <div class="card"> - <p class="card-text">First sourdough, mainly wheat</p> + <div class="card" v-for="post in posts"> + <p class="card-text">{{ post.description }}</p> <div class="card-img"> - <img src="photo/first-1.jpg"> - <img src="photo/first-2.jpg"> + <span v-for="image in post.images"> + <a v-bind:href="image"><img v-bind:src="image"></a> + </span> </div> - <br> - <p class="date">Aug 9, 2018</p> + <p class="date">{{ post.createdAt.substring(0,10) }}</p> </div> </div> </div> diff --git a/src/index.js b/src/index.js index 767acb5..1dd00a0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,54 @@ const server = require('./server'); -server.setUpRoutes(); +const Sequelize = require('sequelize'); +const fs = require('fs'); +const path = require('path'); + +const dbCreds = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json'))).database; + +const database = new Sequelize(dbCreds.database, dbCreds.user, dbCreds.password, { + logging(str) { + console.debug(`DB:${str}`); + }, + dialectOptions: { + charset: 'utf8mb4', + multipleStatements: true, + }, +// host: dbCreds.host, + dialect: 'mysql', + pool: { + max: 5, + min: 0, + idle: 10000, + }, +}); + +database.authenticate().then(() => { + console.debug(`database connection successful: ${dbCreds.database}`); +}, (e) => console.log(e)); + +async function sync(alter, force, callback) { + await database.sync({ alter, force, logging: console.log }); +} + +function setUpModels(){ + const models = { + "posts": database.define('posts', { + description: { + type: Sequelize.STRING, + allowNull: false, + }, + }), + "pictures": database.define('pictures', { + source: { type: Sequelize.TEXT, allowNull: false}, + }) + } + models.pictures.belongsTo(models.posts); + return models; +} + +const models = setUpModels(); +sync(); + +server.setUpRoutes(models); server.listen(); diff --git a/src/photo/back.jpg b/src/photo/back.jpg Binary files differnew file mode 100644 index 0000000..9e8511e --- /dev/null +++ b/src/photo/back.jpg diff --git a/src/server.js b/src/server.js index a487af5..c94a91c 100644 --- a/src/server.js +++ b/src/server.js @@ -9,7 +9,7 @@ function listen(){ server.listen(port, () => console.info(`Listening on port ${port}!`)); } -function setUpRoutes(){ +function setUpRoutes(models){ server.get('/', (req, res) => res.sendFile(__dirname + "/html/index.html")) server.get('/bread', (req, res) => res.sendFile(__dirname + "/html/bread.html")); server.get('/essay', (req, res) => res.sendFile(__dirname + "/html/essay.html")); @@ -18,6 +18,20 @@ function setUpRoutes(){ request(`http://localhost:8000?${req.url.split("?")[1]}`, function(error, response, body) { }); }) + server.get('/posts.json', async (req, res, next) => { + try { + var posts = await models.posts.findAll(); + posts = posts.map(x => x.get({ plain: true })); + for (const post of posts) { + const images = await models.pictures.findAll({ attributes: ["source"], where: { postId: post.id } }).map(x => x.source); + post.images = images; + } + res.status(200).send({ success: true, data: posts }); + next(); + } catch (e) { + res.status(400).send({ success: false, error: e.message }); + } + }) server.get('/favicon.ico', (req, res) => res.sendFile(__dirname + "/icon/favicon.ico")) |
