How to start
You’ll need to have Node 14 or later version on your local development machine. We recommend using the latest LTS version. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.
npx create-one-page-website my-page cd my-page npm start
You can now start to code with your prefered IDE. Default template is the one that is used to produce the current page. For more information about the syntax please read the documentation below.
What do you mean by "optimized" ?
Intersection Observer, WebP support and srcset/sizes attributes, Lazy Loading, Triggering animations when your element is visible, ES module modern build with legacy build fallback ... All this concepts can be boring or tiring to implement. You've got a lot of heavy frameworks, libraries that deal with this issues but could impact Core Web Vitals even if they tried to improve them.
Create one-page website deals with all this common patterns by providing several components that use minimal footprint. For example "cow-visible" component is used like this :
<cow-visible className="MyClass"> <some-html /> </cow-visible>
will be transpiled like this
<div class="MyClass is-visible">
<some-html />
</div> where the "is-visible" class is added when the div become visible.
For more information and to see all the components available, see the documentation below
Documentation
<cow-visible />
Generate a div tag with the className provided. Intersection Observer is set on this element, when it's trigger the first time the "is-visible" class is added once and for all.
How you write it :
<cow-visible className="MyClass"> <some-html /> </cow-visible>
How it's transpiled :
<div data-ref="cow-visible" class="MyClass is-visible">
<some-html />
</div> Attributes available :
| attributes | values | default | comments |
|---|---|---|---|
| className | ex: MyClass | none | class that will be set on the transpiled element |
| tag | ex: section | div | if you want a specific tag instead of a div |
<cow-image />
Generate all the rendition (webp and jpg) for your picture and a picture tag with the className provided, all the srcsets you need and an Intersection Observer to lazy load the image.
How you write it :
<cow-image src="../img/documentation.jpg" alt="image" className="Documentation" ></cow-image>
How it's transpiled :
<picture data-ref="cow-image" class="Documentation__image">
<source
data-srcset="/documentation.375.90b59e55.webp 375w, /documentation.640.08286bba.webp 640w, /documentation.750.31aa2d43.webp 750w, /documentation.1024.f9135dfb.webp 1024w, /documentation.1280.c46dab29.webp 1280w, /documentation.2048.67d6900e.webp 2048w, /documentation.2560.0c4e8c86.webp 2560w"
type="image/webp"
sizes="100vw"
<source
data-srcset="/documentation.375.46ad57a5.jpg 375w, /documentation.640.a8004b9d.jpg 640w, /documentation.750.f2c391fd.jpg 750w, /documentation.1024.08a97bec.jpg 1024w, /documentation.1280.257e7cd4.jpg 1280w, /documentation.2048.8cc2f84a.jpg 2048w, /documentation.2560.7ab49884.jpg 2560w"
type="image/jpeg" sizes="100vw"
<img
src="/documentation.24.b22a355c.png"
data-src="/documentation.375.46ad57a5.jpg"
alt="image">
<noscript>
<img
src="/documentation.375.46ad57a5.jpg" alt="image">
</noscript>
</picture>
Attributes available :
| attributes | values | default | comments |
|---|---|---|---|
| className | ex: "MyClass" | none | class attribute that will be set on the transpiled element |
| alt | ex: "My Picture" | none | alt attribute that will be set on the transpiled element |
| src | ex: "../img/documentation.jpg" | none | raw source of the picture that you want to use. Try to get a large/good quality picture with a ratio that corresponding to your needs |
| sizes | ex: "100vw" or ["100vw", "50vw", "33vw"] | 100vw | sizes attribute that will be set on the transpiled element, multiple values use breakpoints configured in your posthtml.config.js file |
| fetchpriority | ex: "high" | none | fetchpriority attribute that will be set on the transpiled element (see this web.dev article) and remove lazyloading mecanism |
<cow-inline-svg />
Generate an inline version of a svg file.
How you write it :
<cow-inline-svg src="../img/cow.svg" className="Example" ></cow-inline-svg>
How it's transpiled :
<svg class="Example">...your svg</svg>
Attributes available :
| attributes | values | default | comments |
|---|---|---|---|
| className | ex: "MyClass" | none | class attribute that will be set on the transpiled element |
| src | ex: "../img/my.svg" | none | path of your svg |
<cow-manifest-favicon />
Generate a manifest and all favicon/manifest link tags
How you write it :
<cow-manifest-favicon src="../img/at-least-512x521-favicon.png" ></cow-manifest-favicon>
How it's transpiled :
<link href="/up_/.cow-temp/manifest.webmanifest" rel="manifest"> <link href="/favicon.05986af7.ico" rel="shortcut icon"> <link href="/favicon192x192.d2361344.png" rel="icon" sizes="192x192"> <link href="/favicon192x192.d2361344.png" rel="apple-touch-icon">
Attributes available :
| attributes | values | default | comments |
|---|---|---|---|
| src | ex: "../img/favicon.png" | none | path of your favicon png (at least a 512x512 png image) |
<cow-serviceworker />
Add a service worker to your one-page website.
How you write it :
<cow-serviceworker></cow-serviceworker>