diff --git a/layouts/base.njk b/layouts/base.njk index 6c12e22..09b4400 100644 --- a/layouts/base.njk +++ b/layouts/base.njk @@ -4,17 +4,19 @@ -
-

SSR Rendering in Nunjucks proof of concept

-
- {% block body %} - {{ content | safe }} - {% endblock %} - {% block footer %} - - - {% endblock %} +
+
+

SSR Rendering in Nunjucks proof of concept

+
+ {% block body %} + {{ content | safe }} + {% endblock %} + {% block footer %} + + + {% endblock %} +
diff --git a/layouts/home.njk b/layouts/home.njk index 97381cc..323a04e 100644 --- a/layouts/home.njk +++ b/layouts/home.njk @@ -1,17 +1,25 @@ {% extends "./base.njk" %} {% block body %} -

Simple Vue Component (Why would you do this?)

-{% vue { component:"HelloWorld" } %} -{% vue { component:"HelloWorld", props: { message: "This is a test" } } %} -{% vue { component:"HelloWorld", props: { message: "Of server rendered Vue components" } } %} -

Todo List

-{% vue { component:"ListComp"} %} -{% vue { component:"ListComp", props: { startlist: [{message:"Render Vue in Nunjucks"}, {message:"???"}, {message:"Profit!"}] } } %} -{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/last_time.mp3" } } %} -{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/generation_y.mp3" } } %} -{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/pretty_shiny_things.mp3" } } %} -
- {{content|safe}} -
+
+

Simple Vue Component (Why would you do this?)

+ {% vue { component:"HelloWorld" } %} + {% vue { component:"HelloWorld", props: { message: "This is a test" } } %} + {% vue { component:"HelloWorld", props: { message: "Of server rendered Vue components" } } %} +
+
+

Todo List

+ {% vue { component:"ListComp"} %} + {% vue { component:"ListComp", props: { startlist: [{message:"Render Vue in Nunjucks"}, {message:"???"}, {message:"Profit!"}] } } %} +
+
+ {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/last_time.mp3" } } %} + {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/generation_y.mp3" } } %} + {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/pretty_shiny_things.mp3" } } %} +
+
+
+ {{content|safe}} +
+
{% endblock %} diff --git a/layouts/partials/header.njk b/layouts/partials/header.njk index c10380f..300fd76 100644 --- a/layouts/partials/header.njk +++ b/layouts/partials/header.njk @@ -6,7 +6,7 @@ {{meta.title}} - + diff --git a/package.json b/package.json index fff7f7a..54ae6c0 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "webpack --env production && eleventy", "compile": "npx eleventy", "start": "npm run devserve", - "devserve": "NODE_ENV=development npx babel-node --presets @babel/preset-env ./serve.js", + "devserve": "webpack --env development && NODE_ENV=development npx babel-node --presets @babel/preset-env ./serve.js", "spritesheet": "node ./svgsprite.js" }, "author": "Matthew Gaffen", diff --git a/serve.js b/serve.js index e485e6c..a27f070 100644 --- a/serve.js +++ b/serve.js @@ -78,7 +78,7 @@ function startServer() { ], fn: (event, file) => { debug(`File changed: ${file}`); - // build_site(false); + build_site(false); } } // { @@ -177,6 +177,7 @@ compiler.hooks.afterCompile.tap("eleventy", params => { } catch (err) { console.error(err); } - build_site(); sync.reload(); }); + +build_site(); diff --git a/src/js/components/ListComp.vue b/src/js/components/ListComp.vue index e9725a8..0bc65d1 100644 --- a/src/js/components/ListComp.vue +++ b/src/js/components/ListComp.vue @@ -2,8 +2,10 @@
  1. -

    {{ item.message }}

    - +
    +

    {{ item.message }}

    + +
@@ -42,5 +44,27 @@ export default { diff --git a/src/scss/base/_base.scss b/src/scss/base/_base.scss index 2b69fe3..8894a0c 100644 --- a/src/scss/base/_base.scss +++ b/src/scss/base/_base.scss @@ -1,7 +1,7 @@ html { font-size: $bodysize; font-family: $body; - color: $dark; + color: $white; } body { @@ -11,6 +11,11 @@ body { text-align: center; } +h1 { + line-height: 1.4em; + color: $red; +} + .site { display: flex; min-height: 100vh; diff --git a/src/scss/settings/_variables.scss b/src/scss/settings/_variables.scss index 718630b..c875159 100644 --- a/src/scss/settings/_variables.scss +++ b/src/scss/settings/_variables.scss @@ -2,36 +2,34 @@ Colours ========================================================================== */ -$black: #000000; -$white: #ffffff; +$black: #1c1c1e; +$white: #e9eade; $link-active: #7393a7; -$dark: #4b4b4b; +$dark: #67696e; +$dark: #575656; $med-dark-grey: #b3b2b2; -$med-grey: #464646; -$med-grey-1: #d2d2d2; -$light-grey-1: #adadad; +$med-grey: #adadad; $light-grey: #ebebeb; -$white-grey-1: #f1f1f1; -$white-grey: #f8f8f8; +$white-grey: #f5f5f5; -$pipa-navy: #030f1f; -$pipa-teal: #00aab7; +$red: #d63939; +$orange: #ed8d44; +$blue: #545eea; -$bg: $white-grey; +$bg: $black; /* ========================================================================== Typography ========================================================================== */ -$small: 12px; -$medium: 18px; +$small: 16px; +$medium: 14px; -$bodysize: $medium; -$bodyline: 1.222; +$bodysize: $small; +$bodyline: 1.5em; -$body: "Roboto", sans-serif; -$title: "Roboto Slab", serif; +$body: "Work Sans", "Arial", sans-serif; /* ========================================================================== Media Queries diff --git a/src/svg/playbutton.svg b/src/svg/playbutton.svg index e121ff7..40e1ccd 100644 --- a/src/svg/playbutton.svg +++ b/src/svg/playbutton.svg @@ -5,5 +5,5 @@ - +