Skip to content

Commit 328af7f

Browse files
zdoc01zdoc01
committed
First commit, actually...
1 parent 1b6033a commit 328af7f

File tree

9 files changed

+9015
-0
lines changed

9 files changed

+9015
-0
lines changed

‎dist/Main.js

Lines changed: 8691 additions & 0 deletions
Large diffs are not rendered by default.

‎dist/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Blogger</title>
6+
<script src="Main.js"></script>
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
11+
<body>
12+
</body>
13+
14+
<script>
15+
var app = Elm.Main.fullscreen();
16+
</script>
17+
</html>

‎dist/styles.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.container {
2+
margin: 1em auto;
3+
max-width: 600px;
4+
}
5+
blockquote {
6+
margin: 1em 0;
7+
}
8+
.jumbotron {
9+
margin: 2em auto;
10+
max-width: 400px;
11+
}
12+
.jumbotron h2 {
13+
margin-top: 0;
14+
}
15+
.jumbotron .help-block {
16+
font-size: 14px;
17+
}
18+
textarea {
19+
width: 100%
20+
}
21+
22+
ul.posts {
23+
list-style: none;
24+
margin: 0;
25+
padding: 0;
26+
}
27+
28+
.right {
29+
float: right;
30+
}
31+
32+
.post:hover span.delete-post {
33+
visibility: visible;
34+
}
35+
36+
span.delete-post {
37+
visibility: hidden;
38+
cursor: pointer;
39+
}

‎elm-package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"version": "0.1.0",
3+
"summary": "Build an App in Elm",
4+
"repository": "http://github.com/zdoc01/somegiturl.git",
5+
"license": "MIT",
6+
"source-directories": [
7+
"src",
8+
"dist"
9+
],
10+
"exposed-modules": [],
11+
"dependencies": {
12+
"elm-lang/core": "5.1.1 <= v < 6.0.0",
13+
"elm-lang/html": "2.0.0 <= v < 3.0.0",
14+
"rgrempel/elm-http-decorators": "2.0.0 <= v < 3.0.0"
15+
},
16+
"elm-version": "0.17.0 <= v <= 0.18.0"
17+
}

‎gulpfile.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
var gulp = require('gulp'),
2+
elm = require('gulp-elm'),
3+
gutil = require('gulp-util'),
4+
plumber = require('gulp-plumber'), // replaces pipe method and removes standard onerror handler on error event, which unpipes streams on error by default
5+
connect = require('gulp-connect');
6+
7+
var paths = {
8+
dest: 'dist',
9+
elm: 'src/*.elm',
10+
static: 'src/*.{html,css}'
11+
};
12+
13+
gulp.task('elm-init', elm.init);
14+
15+
// Compile Elm to HTML
16+
gulp.task('elm', ['elm-init'], function() {
17+
return gulp.src(paths.elm)
18+
.pipe(plumber())
19+
.pipe(elm())
20+
.pipe(gulp.dest(paths.dest));
21+
});
22+
23+
// Move static assets to dist
24+
gulp.task('static', function() {
25+
return gulp.src(paths.static)
26+
.pipe(plumber())
27+
.pipe(gulp.dest(paths.dest));
28+
});
29+
30+
// Watch for changes and Compile
31+
gulp.task('watch', function() {
32+
gulp.watch(paths.elm, ['elm']);
33+
gulp.watch(paths.static, ['static']);
34+
});
35+
36+
// local server
37+
gulp.task('connect', function() {
38+
connect.server({
39+
root: 'dist',
40+
port: 3000
41+
});
42+
});
43+
44+
gulp.task('build', ['elm', 'static']);
45+
gulp.task('default', ['connect', 'build', 'watch']);

‎package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "elm-blog",
3+
"version": "1.0.0",
4+
"description": "Blog with an elm front-end",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [
10+
"elm",
11+
"blog"
12+
],
13+
"author": "Zach L.",
14+
"license": "ISC",
15+
"devDependencies": {
16+
"gulp": "^3.9.1",
17+
"gulp-connect": "^5.0.0",
18+
"gulp-elm": "^0.6.1",
19+
"gulp-plumber": "^1.1.0",
20+
"gulp-util": "^3.0.8"
21+
}
22+
}

‎src/Main.elm

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import Html exposing (..)
2+
--import Html.App as Html
3+
import Html.Events exposing (..)
4+
import Html.Attributes exposing (..)
5+
import Regex exposing (..)
6+
7+
8+
main : Program Never Model Msg -- type annotation; 'main' has type 'Program' and should 'Never' expect a flags argument
9+
main =
10+
Html.program { -- start app with record
11+
init = init,
12+
update = update,
13+
{-
14+
'\' begins anon function; '_' is a discarded arg; '->' is the function body;
15+
No concept of null or undefined - expects functions as values so pass anon function
16+
-}
17+
subscriptions = \_ -> Sub.none,
18+
view = view
19+
}
20+
21+
{-
22+
MODEL
23+
* Model type
24+
* Future type annotations can now reference this type
25+
* i.e. 'Something : Model' will now refer to this type
26+
* Expect a record with a 'quote' property that has a string value
27+
-}
28+
29+
type alias Model = {
30+
quote : String,
31+
addingPost : Bool,
32+
posts : List String,
33+
newPostContent : String
34+
}
35+
36+
37+
init : (Model, Cmd Msg) -- returns a tuple with a record and a command for an effect
38+
init =
39+
( Model "" False ["My second post, woot!", "My first post"] "", Cmd.none ) -- instantiate a Model with default values
40+
41+
42+
{-
43+
UPDATE
44+
* messages
45+
-}
46+
47+
type Msg = GetQuote | AddPost | SubmitPost | DeletePost | NewPostChange String -- union type; provides a way to represent types that have unusual structures (not String, Bool, Int, etc.). Says 'type Msg' can be any of these values
48+
49+
formatPost : String -> String
50+
formatPost = Regex.replace All (regex "/\n/g") (\_ -> "<br>")
51+
52+
{-
53+
* update takes a message as an argument and a model argument and returns a tuple
54+
containing a model and a command for an effect with an update message.
55+
* A series of items separate by '->' represent argument types, the last of which is the return type
56+
-}
57+
update : Msg -> Model -> (Model, Cmd Msg)
58+
update msg model =
59+
case msg of
60+
GetQuote ->
61+
-- return a tuple that updates the quote to append "A quote! " to the existing value
62+
-- The syntax for updating properties of a record is: `{ recordName | property = updatedValue, property2 = updatedValue2 }`
63+
({ model | quote = model.quote ++ "A quote! " }, Cmd.none)
64+
AddPost ->
65+
({ model | addingPost = True }, Cmd.none)
66+
SubmitPost ->
67+
({ model | posts = List.append [ model.newPostContent ] model.posts, addingPost = False }, Cmd.none)
68+
DeletePost -> -- how to get index of post?
69+
( model, Cmd.none)
70+
NewPostChange newContent ->
71+
({ model | newPostContent = formatPost newContent }, Cmd.none)
72+
73+
74+
{-
75+
Post View Helpers
76+
-}
77+
renderPostsList : List String -> Html Msg
78+
renderPostsList strings =
79+
ul [ class "posts" ] (List.map renderPost strings)
80+
81+
renderPost : String -> Html Msg
82+
renderPost post =
83+
li [ class "post" ] [
84+
blockquote [] [
85+
text post,
86+
span [ class "label label-danger right delete-post", onClick DeletePost ] [ text "X" ]
87+
]
88+
]
89+
90+
{-
91+
TextArea View Helper
92+
-}
93+
renderTextArea : Model -> Html Msg
94+
renderTextArea model =
95+
if model.addingPost then
96+
textarea [ rows 10, onInput NewPostChange ] []
97+
else
98+
text "" -- empty Html element
99+
100+
101+
renderButtons : Model -> Html Msg
102+
renderButtons model =
103+
if model.addingPost then
104+
button [ class "btn btn-success", onClick SubmitPost ] [ text "Submit" ]
105+
else
106+
button [ class "btn btn-info", onClick AddPost ] [ text "Add a post" ]
107+
108+
{-
109+
VIEW
110+
* A command Cmd is a request for an effect to take place outside of Elm.
111+
* A message Msg is a function that notifies the update method that a command was completed.
112+
* The view needs to return HTML with the message outcome to display the updated UI.
113+
-}
114+
115+
view : Model -> Html Msg -- returns HTML with a message
116+
view model =
117+
div [ class "container" ] [
118+
-- The first list argument passed to each node function contains attribute functions with arguments.
119+
-- The second list contains the contents of the element.
120+
h2 [ class "text-center" ] [ text "Welcome to Blogger!" ],
121+
p [ class "text-center" ] [
122+
renderButtons model
123+
],
124+
renderTextArea model,
125+
div [ class "posts-container" ] [
126+
renderPostsList model.posts
127+
]
128+
]

‎src/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Blogger</title>
6+
<script src="Main.js"></script>
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
11+
<body>
12+
</body>
13+
14+
<script>
15+
var app = Elm.Main.fullscreen();
16+
</script>
17+
</html>

‎src/styles.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.container {
2+
margin: 1em auto;
3+
max-width: 600px;
4+
}
5+
blockquote {
6+
margin: 1em 0;
7+
}
8+
.jumbotron {
9+
margin: 2em auto;
10+
max-width: 400px;
11+
}
12+
.jumbotron h2 {
13+
margin-top: 0;
14+
}
15+
.jumbotron .help-block {
16+
font-size: 14px;
17+
}
18+
textarea {
19+
width: 100%
20+
}
21+
22+
ul.posts {
23+
list-style: none;
24+
margin: 0;
25+
padding: 0;
26+
}
27+
28+
.right {
29+
float: right;
30+
}
31+
32+
.post:hover span.delete-post {
33+
visibility: visible;
34+
}
35+
36+
span.delete-post {
37+
visibility: hidden;
38+
cursor: pointer;
39+
}

0 commit comments

Comments
 (0)