Skip to content

Commit

Permalink
Set a specific homepage for the project template
Browse files Browse the repository at this point in the history
  • Loading branch information
@cedricss
cedricss committed Jun 26, 2019
1 parent 24dbb5c commit 1685c7e
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 109 deletions.
32 changes: 16 additions & 16 deletions README.md
View file
Expand Up @@ -47,9 +47,9 @@ In the following documentation, instead of `npm run <command-name>`, you can run
npm run start
```

> ✓ development build and web server with [Parcel](https://parceljs.org/)
> ✓ live reload
> ✓ hot code swapping with [elm-hot](https://github.com/klazuka/elm-hot)
> ✓ development build and web server with [Parcel](https://parceljs.org/)<br/>
> ✓ live reload<br/>
> ✓ hot code swapping with [elm-hot](https://github.com/klazuka/elm-hot)<br/>
- Web page: http://localhost:1234

Expand All @@ -59,9 +59,9 @@ npm run start
npm run build
```

> ✓ production build with [Parcel](https://parceljs.org/)
> ✓ compilation with the Elm `optimize` flag
> ✓ minification with [`terser`](https://github.com/terser-js/terser)
> ✓ production build with [Parcel](https://parceljs.org/)<br/>
> ✓ compilation with the Elm `optimize` flag<br/>
> ✓ minification with [`terser`](https://github.com/terser-js/terser)<br/>
The JS code from Elm is minified with [special flags](https://elm-lang.org/0.19.0/optimize) that work for Elm apps because they have no side-effects (otherwise it would be unreliable to use such flags).

Expand All @@ -75,9 +75,9 @@ To run serverless functions along your Elm app, run:
npm run dev
```

> ✓ development build with [Parcel](https://parceljs.org/)
> ✓ web server with Parcel behind [Netlify Dev](https://www.netlify.com/docs/cli/#netlify-dev-beta)
> ✓ serverless functions on your local machine
> ✓ development build with [Parcel](https://parceljs.org/)<br/>
> ✓ web server with Parcel behind [Netlify Dev](https://www.netlify.com/docs/cli/#netlify-dev-beta)<br/>
> ✓ serverless functions on your local machine<br/>
- Web page: http://localhost:8888
- Serverless function example:
Expand All @@ -90,10 +90,10 @@ npm run dev
npm run deploy
```

> ✓ production build with [Parcel](https://parceljs.org/)
> ✓ compilation with the Elm `optimize` flag
> ✓ minification with [`terser`](https://github.com/terser-js/terser)
> ✓ deployment to a [Netlify](https://www.netlify.com/docs/welcome/) _Live Draft URL_
> ✓ production build with [Parcel](https://parceljs.org/)<br/>
> ✓ compilation with the Elm `optimize` flag<br/>
> ✓ minification with [`terser`](https://github.com/terser-js/terser)<br/>
> ✓ deployment to a [Netlify](https://www.netlify.com/docs/welcome/) _Live Draft URL_<br/>
If you are using Netlify for the first time, run `netlify login` to authenticate (learn more about [Netlify CLI](https://www.netlify.com/docs/cli/)). [Connect a Git repository](https://www.netlify.com/docs/continuous-deployment/) to a Netlify site to keep the two in sync.

Expand All @@ -105,7 +105,7 @@ If this preview looks good, deploy to production.
npm run deploy:prod
```

> ✓ deployment to production with [Netlify](https://www.netlify.com/docs/welcome/)
> ✓ deployment to production with [Netlify](https://www.netlify.com/docs/welcome/)<br/>
### `bonus` Run a live session

Expand All @@ -115,8 +115,8 @@ To share your development session with a coworker, run:
npm run dev:live
```

> ✓ development build with [Parcel](https://parceljs.org/)
> ✓ live session with [Netlify Dev](https://www.netlify.com/docs/welcome/)
> ✓ development build with [Parcel](https://parceljs.org/)<br/>
> ✓ live session with [Netlify Dev](https://www.netlify.com/docs/welcome/)<br/>
## Tailwind and CSS build tools

Expand Down
9 changes: 9 additions & 0 deletions cypress/integration/home.spec.js
View file
@@ -0,0 +1,9 @@
context("Markdown", () => {
beforeEach(() => {
cy.visit("/");
});

it("display the homepage content", () => {
cy.get("[data-test=content]").contains("Elm Batteries Included");
});
});
9 changes: 0 additions & 9 deletions cypress/integration/markdown.spec.js
View file

This file was deleted.

6 changes: 2 additions & 4 deletions index.js
View file
Expand Up @@ -8,8 +8,6 @@ if (module.hot) {
});
}

var flags = {
readme: readFileSync("README.md", "utf-8")
};
const flags = {};

var app = Elm.Main.init({ flags });
const app = Elm.Main.init({ flags });
16 changes: 1 addition & 15 deletions postcss.config.js
View file
Expand Up @@ -23,21 +23,7 @@ const production = {
}
],
content: ["./src/**/*.elm", "index.js"],
whitelist: [
"html",
"body",
"h1",
"h2",
"h3",
"h4",
"pre",
"code",
"a",
"p",
"ul",
"markdown"
],
whitelistPatternsChildren: [/^markdown$/]
whitelist: ["html", "body"]
}),
autoprefixer
]
Expand Down
108 changes: 52 additions & 56 deletions scss/style.scss
View file
Expand Up @@ -8,72 +8,68 @@ body {
-webkit-font-smoothing: antialiased;
}

/*
Style for pages generated from markdown
*/

.markdown {
@apply mx-auto max-w-3xl bg-white py-10 px-12 rounded;
@apply text-gray-700;
@apply leading-relaxed;
h1 {
@apply font-bold text-4xl text-gray-900;
}

h1 {
@apply font-bold text-4xl text-gray-900;
}
h2 {
@apply mt-12;
@apply font-bold text-3xl text-gray-900;
}

h2 {
@apply mt-12;
@apply font-bold text-3xl text-gray-900;
}
h1 + h2 {
@apply mt-3;
}

h1 + h2 {
@apply mt-3;
}
h3 {
@apply mt-6;
@apply border-t-4 border-gray-300 pt-1;
@apply font-bold text-2xl text-gray-800;
}

h3 {
@apply mt-6;
@apply border-t-4 border-gray-300 pt-1;
@apply font-bold text-2xl text-gray-800;
}
h2 + h3 {
@apply mt-2;
}

h2 + h3 {
@apply mt-2;
}
h4 {
@apply mt-2;
@apply font-semibold text-xl text-gray-800;
}

h4 {
@apply mt-2;
@apply font-semibold text-xl text-gray-800;
}
a {
@apply text-blue-600;
}

a {
@apply text-blue-600;
}
pre,
p,
ol,
ul {
@apply my-1;
@apply text-base;
}

pre,
p,
ol,
ul {
@apply my-1;
@apply text-base;
}
ol,
ul {
@apply pl-4;
list-style: disc inside;
}

ol,
ul {
@apply pl-4;
list-style: disc inside;
}
ul ul,
ol ul {
list-style-type: circle;
}

ul ul,
ol ul {
list-style-type: circle;
}
pre {
@apply bg-gray-100 mb-4 p-3 rounded;
}

pre {
@apply bg-gray-100 mb-4 p-3 rounded;
}
code {
@apply bg-gray-100 text-gray-700 text-xs rounded;
padding: 0.2rem 0.4rem;
}

code {
@apply bg-gray-100 text-gray-700 text-xs rounded;
padding: 0.2rem 0.4rem;
}
.content {
@apply mx-auto max-w-4xl bg-white py-10 px-12 rounded;
@apply text-gray-700;
@apply leading-relaxed;
}
37 changes: 28 additions & 9 deletions src/Main.elm
View file
Expand Up @@ -2,14 +2,14 @@ module Main exposing (main)

import Browser
import Browser.Navigation as Nav
import Html exposing (Html, div, h1, text)
import Html.Attributes exposing (attribute, class)
import Html exposing (..)
import Html.Attributes exposing (..)
import Markdown
import Url exposing (Url)


type alias Flags =
{ readme : String }
{}



Expand All @@ -18,7 +18,6 @@ type alias Flags =

type alias Model =
{ key : Nav.Key
, readme : String
, state : State
}

Expand Down Expand Up @@ -59,11 +58,32 @@ view model =

body : Model -> List (Html Msg)
body model =
[ Markdown.toHtml
[ attribute "data-test" "markdown-content"
, class "markdown"
[ div
[ attribute "data-test" "content"
, class "content text-center"
]
[ h1
[]
[ text "Elm Batteries Included" ]
, img
[ src "content_preview.jpg"
, alt "Commands cheat sheet"
]
[]
, p
[]
[ text "Sneak peek of the documentation website, coming soon \u{1F91E}" ]
, p
[ class "font-semibold" ]
[ a
[ href "https://twitter.com/CedricSoulas" ]
[ text "@CedricSoulas" ]
, text " | "
, a
[ href "https://github.com/cedricss/elm-batteries" ]
[ text "github.com/cedricss/elm-batteries" ]
]
]
model.readme
]


Expand Down Expand Up @@ -96,7 +116,6 @@ update msg model =
init : Flags -> Url -> Nav.Key -> ( Model, Cmd Msg )
init flags url key =
( { key = key
, readme = flags.readme
, state = Demo
}
, Cmd.none
Expand Down

0 comments on commit 1685c7e

Please sign in to comment.