Create One-page Website

How to start

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" ?

image 1

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

image

<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>