Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
381 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,4 +7,5 @@ config/config-prod.json | |
| s.jlongster.com | ||
| sv | ||
| files | ||
| static/css/theme | ||
| static/css/theme | ||
| static/css/jlongster-theme | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,16 @@ | ||
|
|
||
| # jlongster.com | ||
|
|
||
| This is the raw source for my blog, [jlongster.com](http://jlongster.com/). I will fill out this section | ||
| more later, but for now you can read [my post](http://jlongster.com/Presenting-The-Most-Over-Engineered-Blog-Ever) about it. | ||
| This is the raw source for my blog, [jlongster.com](http://jlongster.com/). This is where I experiment with new JavaScript libraries. Read [my post](http://jlongster.com/Presenting-The-Most-Over-Engineered-Blog-Ever) for more information. | ||
|
|
||
| Right now, it supports prerendering a page on the server with React but also letting the client pick up the initial page and render everything within the browser from there (so you could even do page transitions without a full page refresh). I turned it off though, and it now renders everything on the server with a full page refresh, and I will soon be ripping out the client-side rendering. I will tag this version for those interested. | ||
| It's built with react, react-router, redux, and a few other things. It supports server-side rendering with proper HTTP status codes, an admin interface for editing posts, and an API which everything uses. It's a good example project for anything looking for a moderately complex React app. | ||
|
|
||
| Visit the [demo site](http://test.jlongster.com/) to see client-side page transitions in action. You can also see the admin section and try the [markdown editor](http://test.jlongster.com/edit/ulla-nec-dui-vulputate,-ut-facilisis-nulla-pla). | ||
| It does not do inline page updates, meaning it forces a browser refresh for each URL change, but only because my older demos mutate the DOM so I have to do that. A fresh blog could potentially turn on pushState-powered URL changes. | ||
|
|
||
| **I have no intention into making this a platform**. This is my site. I will evolve it for my needs. I *will* make backwards incompatible changes, probably big ones especially in the near future. The database structure will generally stay the same though, since I have already have a lot of content in it. | ||
|
|
||
| I open-sourced this mainly because I thought others could learn a few things from it. Eventually it may become more modular so it's easy to version and use with various modules. | ||
|
|
||
| To get running: | ||
|
|
||
| * `npm install` | ||
| * `gulp run-watch` | ||
| * `cd static/css && ln -s default-theme theme` | ||
| * `gulp run` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| .cm-s-happy-happy-joy-joy-2 { | ||
| font-size: 1em; | ||
| line-height: 1.5em; | ||
| background: #E5E5E5; | ||
| color: #2A2A2A; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .CodeMirror-lines { | ||
| padding: 8px 0; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .CodeMirror-activeline-background { | ||
| background: #F2F8FE73; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .CodeMirror-selected { | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-comment { | ||
| font-size: 16px; | ||
| font-family: Monaco, 'Courier New'; | ||
| color: #858B7C; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-string { | ||
| font-style: italic; | ||
| color: #901A12; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-atom { | ||
| color: null; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-number { | ||
| color: null; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-variable { | ||
| color: #5C3566; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-variable-2 { | ||
| color: #519A58; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-property { | ||
| color: null; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-keyword { | ||
| color: null; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-operator { | ||
| color: null; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .CodeMirror-linenumber { | ||
| color: italic; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| .cm-s-happy-happy-joy-joy-2 { | ||
| font-size: 1em; | ||
| line-height: 1.5em; | ||
| background: #E5E5E5; | ||
| color: #2A2A2A; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .CodeMirror-lines { | ||
| padding: 8px 0; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .CodeMirror-activeline-background { | ||
| background: #F2F8FE73; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .CodeMirror-selected { | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-comment { | ||
| font-size: 16px; | ||
| font-family: Monaco, 'Courier New'; | ||
| color: #858B7C; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-string { | ||
| font-style: italic; | ||
| color: #901A12; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-atom { | ||
| color: null; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-number { | ||
| color: null; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-variable { | ||
| color: #5C3566; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-variable-2 { | ||
| color: #519A58; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-property { | ||
| color: null; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-keyword { | ||
| color: null; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .cm-operator { | ||
| color: null; | ||
| } | ||
| .cm-s-happy-happy-joy-joy-2 .CodeMirror-linenumber { | ||
| color: italic; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
|
|
||
| @import '../editor.less'; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| @import '../main.less'; | ||
|
|
||
| body { | ||
| background-color: #f0f0f0; | ||
| } | ||
|
|
||
| .admin-header, .edit .toolbar { | ||
| background-color: #c0c0c0; | ||
| color: white; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,204 @@ | ||
|
|
||
| body.edit { | ||
| & { | ||
| height: 100%; | ||
| } | ||
|
|
||
| main { | ||
| position: relative; | ||
| } | ||
|
|
||
| .toolbar { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| z-index: 100; | ||
| text-align: center; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .pane-toggler { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| } | ||
|
|
||
| .editor { | ||
| height: 100%; | ||
| width: 100%; | ||
| overflow: auto; | ||
| transform: translateX(calc(~"(100% - 700px) / 2")); | ||
| } | ||
|
|
||
| .editor.mounted { | ||
| transition: transform .5s; | ||
| } | ||
|
|
||
| .editor.uncentered { | ||
| transform: translateX(0); | ||
| } | ||
|
|
||
| .actions { | ||
| position: absolute; | ||
| top: 0; | ||
| padding-top: 7px; | ||
| } | ||
|
|
||
| .actions.left { | ||
| left: 0; | ||
| } | ||
|
|
||
| .actions.right { | ||
| right: 0; | ||
| } | ||
|
|
||
| .pane { | ||
| position: absolute; | ||
| top: 0; | ||
| height: 100%; | ||
| z-index: 600; | ||
| transition: transform .25s; | ||
|
|
||
| & .closer { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| font-size: 14px; | ||
| padding: 0 1em; | ||
| } | ||
| } | ||
|
|
||
| .btn-action { | ||
| font-size: 16px; | ||
| background-color: transparent; | ||
| border: 0; | ||
| color: #999999; | ||
| cursor: pointer; | ||
| margin: .5em .25em; | ||
|
|
||
| &, &:hover, &:active, &:focus { | ||
| padding: 0; | ||
| } | ||
| } | ||
|
|
||
| .btn-action.left { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
|
|
||
| .btn-action.right { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| } | ||
|
|
||
| .toolbar .popout-preview { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| margin: .5em 1em; | ||
| } | ||
|
|
||
| .admin-header { | ||
| display: none; | ||
| } | ||
|
|
||
| .main-wrapper { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .edit-main { | ||
| /* See main.less, `.admin-header, .edit .toolbar` selector for how the | ||
| height of the toolbar is calculated */ | ||
| height: calc(~"100vh - 32px"); | ||
| width: 100%; | ||
| position: relative; | ||
| margin-top: 32px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .edit-main a.settings, .edit-main a.preview { | ||
| position: absolute; | ||
| margin: .5em 1em; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .edit-main a.settings { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
|
|
||
| .edit-main a.preview { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| } | ||
|
|
||
| div.preview { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| transition: width .5s; | ||
| } | ||
|
|
||
| .CodeMirror { | ||
| width: 700px; | ||
| height: 100%; | ||
| } | ||
|
|
||
| /* forms */ | ||
| form.settings { | ||
| height: 100%; | ||
| padding: 1px 1.5em; | ||
| overflow: auto; | ||
| background-color: #c0c0c0; | ||
| } | ||
|
|
||
| .form-field { | ||
| margin: 1em 0; | ||
| } | ||
|
|
||
| .form-field-collapse { | ||
| margin: 0; | ||
| margin-top: -1em; | ||
| } | ||
|
|
||
| .form-field-errors { | ||
| font-size: 14px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .form-field label { | ||
| display: block; | ||
| font-size: 14px; | ||
| padding: 0; | ||
| line-height: 1em; | ||
| } | ||
|
|
||
| .form-field-text input { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .form-field-checkbox label { | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .form-field-checkbox input { | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| .abstract label { | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .abstract textarea { | ||
| display: block; | ||
| width: 100%; | ||
| padding: .5em; | ||
| height: 8em; | ||
| font-size: 14px; | ||
| } | ||
| } |
Oops, something went wrong.