1.1.28 • Published 4 years ago

@luciannojunior/gatsby-theme-lodge v1.1.28

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

gatsby-theme-lodge

Gatsby theme for building beautiful and customisable landing pages for Freemasons's Lodges. (about Freemasonry)

Built with :heart: for Brazilian Lodge "Acácia da Borborema" nº 41.

It uses gatsby-transformer-pages-json for building the site with full customization.

WIP ALERT: I'm still building this architecture and it will change overtime. The page creation is stil being done in the theme side but we will probably overcome this issue and move it to the plugin.

Install

yarn add @luciannojunior/gatsby-theme-lodge

How to use

In your gatsby-config.js:

module.exports = {
  plugins: [`@luciannojunior/gatsby-theme-lodge`],
}

Configuration

Most of this theme's customization happens in pages.json file, that is created automatically on your site's data folder (you can change this with contentPath option). This file must follow this pattern:

{
  "pages": {
    "home": {
      "homepage": true,
      "component": "Home",
      "props": {
        "landing": {
          "landingText": {
            "lodgeName": "Regeneração Campinense nº 02",
        ...
    },
   "o-que-e-maconaria": {
      "component": "Maconaria"
    },
    ...
  },
  "menu": [
    {
      "page": "home",
      "value": "Início"
    },
    ...
  ],
}

}

Pages

The pages objects declares which pages will be created in the Gatsbys site.

  • A simple slugify heuristic is used using the page's name, which is described by the key provided (i.e: "o-que-e-maconaria" will create a page in the /o-que-e-maconaria path).
  • The component provided will be resolved from gatsby-theme-lodge/src/components and rendered within the created page. We will provide default components to be used and you can also providing your own components using Component Shadowing.
  • You should provide a homepage boolean attribute as true to the home page of you site, so we will build this page's path in / (or in the basePath provided to themes's settings)

Menu

  • The menu array describes how the Menu component will show the items. It must reference pages by its name, or provide a path to a external URL.

Components

Home

  • Default Home component. It composes some different components of that page (Landing, Cards, Location and Gallery).

Configuration:

Prop nameTypeDescription
landingObjectLanding component configuration (see Landing)
cardsObjectCards component configuration (see Cards)
locationObjectLocation component configuration (see Location)
galleryObjectGallery component configuration (see Gallery)

Landing

  • Wraps a video background (or image background for mobile users) and displays a couple of information about the Lodge.

Configuration:

Prop nameTypeDescription
landingTextObjectDescribes the informations displayed in the Landing component (see LandingText)

LandingText

  • Displays an animated set of texts to describe the Lodge

Configuration:

Prop nameTypeDescriptionExample
locationStringTextual address of the LodgeSituada na Rua Siqueira Campos, Campina Grande - PB
lodgeNameStringName of the LodgeRegeneração Campinense nº 02
meetingsStringWhen do the Lodge's meetings happen?quartas-feiras às 19:00hrs

Cards

  • Displays four content cards with links to site's page (static links for now).

Configuration:

Prop nameTypeDescription
historiaCardEntryCheck EntryType below.
diretoriaCardEntryCheck EntryType below.
veneraveisCardEntryCheck EntryType below.
filantropiaCardEntryCheck EntryType below.

CardEntry

Prop nameTypeDescriptionExample
titleStringTitle of the cardO que é Maçonaria?
pathStringPath that will be used to the title link/o-que-e-maconario
textStringContent of the carFree text.

Location

  • Displays info about the Lodge's location and a Google Maps iframe to that adress.

Configuration:

Prop nameTypeDescriptionExample
addressStringAddress of the LodgeRua Siqueira Campos, 1020 - Campina Grande - PB
addressLinkStringLink that will be attached to the address displayedhttps://goo.gl/maps/QdaPBrDC7ZqodP7RA
gMapsUrlStringURL to Google Maps IframeGet it on Google Maps
titleStringTitle to the address iframe--

Gallery

  • Slideshow that loops a set of pictures (that should be provided inside static/images folder).

Configuration:

Prop nameTypeDescriptionExample
picturesString[][]Array of tuples describing the name of the file and the respective alternative text[['1', 'Alternative text 1'], ['2', 'Alternative Text 2']]

WIP

1.1.28

4 years ago

1.1.27

4 years ago

1.1.26

4 years ago

1.1.25

4 years ago

1.1.24

4 years ago

1.1.23

4 years ago

1.1.22

4 years ago

1.1.21

4 years ago

1.1.19

4 years ago

1.1.18

4 years ago

1.1.17

4 years ago

1.1.20

4 years ago

1.1.16

4 years ago

1.1.15

4 years ago

1.1.14

4 years ago

1.1.13

4 years ago

1.1.12

4 years ago

1.1.11

4 years ago

1.1.10

4 years ago

1.1.9

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.2.0

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago