{"id":18833899,"url":"https://github.com/almonk/splash-pages-1","last_synced_at":"2025-04-14T04:32:12.046Z","repository":{"id":32498874,"uuid":"36079577","full_name":"almonk/splash-pages-1","owner":"almonk","description":"Splash Pages for https://gocardless.com","archived":false,"fork":false,"pushed_at":"2015-05-22T15:25:13.000Z","size":12989,"stargazers_count":0,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-03-27T18:52:52.391Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/almonk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-22T15:25:56.000Z","updated_at":"2017-01-11T12:31:23.000Z","dependencies_parsed_at":"2022-09-15T13:01:59.946Z","dependency_job_id":null,"html_url":"https://github.com/almonk/splash-pages-1","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/almonk%2Fsplash-pages-1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/almonk%2Fsplash-pages-1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/almonk%2Fsplash-pages-1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/almonk%2Fsplash-pages-1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/almonk","download_url":"https://codeload.github.com/almonk/splash-pages-1/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248821875,"owners_count":21166976,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T02:04:31.920Z","updated_at":"2025-04-14T04:32:07.037Z","avatar_url":"https://github.com/almonk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Splash Pages for gocardless.com\n===============================\n\nSee [How we built the new gocardless.com](https://gocardless.com/blog/how-we-built-the-new-gocardless.com/).\n\n### Install \u0026 run\n\n##### Prerequisites:\n\n- Node.js (or io.js): `brew install node`\n\n##### Dependencies\n\n```\nnpm install\n```\n\n##### Running\n\n```\nnpm start\n```\n\nVisit:\n\n```\nhttp://localhost:4402\n```\n\n##### Testing\n\n```\nnpm test\n```\n\nThis will run ESLint, Unit Tests and E2E tests.\n\n__Note__: the first time you run the tests, they will be slow. This is because of the transpilation that Babel has to do. Every subsequent run should be much quicker, as Babel caches aggresively.\n\n### What is JSX?\n\nJSX looks a bit like HTML but it's just a shorthand for writing JavaScript functions that turn into HTML.\n\n##### Syntax highlighting `jsx`\n\n- Sublime Text: https://github.com/babel/babel-sublime (make the it default for `.js` and `.json` and disable the `JavaScript` package by adding it in `ignored_packages`)\n\n##### Transform process\n\nTo see HTML turn into JSX, write some HTML and see it turn into JSX: https://facebook.github.io/react/html-jsx.html\n\nTo see JSX turn into JavaScript, write some JSX in the render function: https://facebook.github.io/react/jsx-compiler.html\n\n##### Learn more\n\n- JSX syntax: https://facebook.github.io/react/docs/displaying-data.html#jsx-syntax\n\n- JSX in depth: https://facebook.github.io/react/docs/jsx-in-depth.html\n\n- JSX Gotchas: https://facebook.github.io/react/docs/jsx-gotchas.html\n\n##### HTML to JSX\n\nhttps://facebook.github.io/react/html-jsx.html\n\n### Content\n\n##### Imports\n\nImport paths are relative from the file you are in and exclude `.js`.\n\nFor example, importing the `Message` component from `app/pages/home/home.js`:\n\n```js\nimport Message from '../../components/message/message';\n```\n\n##### Routes\n\nRoutes are defined in `app/router/routes.js`.\n\nTo add a new page import the page component and add it to the config:\n\n```js\nimport Home from '../pages/home/home';\n\nvar config = Immutable.fromJS([\n  [Home, { name: 'home' }, {\n    'en-GB': {\n      path: '/'\n    }\n  }]\n]);\n```\n\n##### Path prefixed with locale\n\nAll paths are prefixed with a lowercase locale except for the default locale (en-GB).\n\n##### Route options\n\nRoutes are constructed with an array: `[PageComponent, { route options }, { .. locale options .. }, [optional nested routes]]`\n\nImport the `PageComponent` from pages, this is the component that gets rendered when the page is visited.\n\nRoute options require `name`, use when linking to pages `\u003cLink to=\"page_name\" /\u003e.\n\nTo add a page for `en-GB`, `en-IE`, and `fr-FR`:\n\n```js\nimport Pricing from '../pages/pricing/pricing';\n\nvar config = Immutable.fromJS([\n  [Pricing, { name: 'pricing' }, {\n    'en-GB': {\n      path: '/pricing'\n    },\n    'en-IE': {\n      path: '/pricing'\n    },\n    'fr-FR': {\n      path: '/tarifs'\n    },\n  }]\n]);\n```\n\nResulting paths for `Pricing`: `/pricing`, `/en-ie/pricing`, `/fr-fr/tarifs`.\n\nThe `Pricing` component is then responsible for rendering the right content for each locale (see Translation).\n\n##### Links\n\nLinks can be generated given the page `name` value from the route config with the `Link` component.\n\n```jsx\nimport Link from '../../components/link/link';\n\nexport default class Home extends React.Component {\n  displayName = 'Home'\n\n  render() {\n    return (\n      {/* Turns into a \u003ca href=\"/\"\u003eHome\u003c/a\u003e */}\n      \u003cLink to='home'\u003eHome\u003c/Link\u003e\n    );\n  }\n}\n```\n\n### Translations\n\n##### Strings\n\nString translations are defined in `app/messages/{language-[region]}.js`.\n\nIf a string is defined in a language only file (`en.js`) it will be available\nfor all regions with that lang (e.g. (`en-GB.js`).\n\nRe-defining the string in the region specific file will override the language only string.\n\nFor example, given the following strucutre in `en.js`, and visiting a url for any english language locale:\n\n```js\nexport default {\n  features: {\n    explainer: 'Simple recurring payments',\n  },\n}\n```\n\nRender the string using the `Message` component:\n\n```jsx\nimport Message from '../../components/message/message';\n\nexport default class Home extends React.Component {\n  displayName = 'Home'\n\n  render() {\n    return (\n      {/* Renders `Simple recurring payments` */}\n      \u003cMessage message='features.explainer' /\u003e\n    );\n  }\n}\n```\n\nDefine an override for Ireland in `en-IE.js`:\n\n```js\nexport default {\n  features: {\n    explainer: 'Recurring payments',\n  },\n}\n```\n\n##### Blocks of HTML\n\nWhen you need to swap out larget pieces of content you can use the `Translation` component.\n\n```jsx\nimport Translation from '../../components/translation/translation';\n\nexport default class Home extends React.Component {\n  displayName = 'Home'\n\n  render() {\n    return (\n      \u003cTranslation locales='en'\u003e\n        Shown when visiting urls with `en-GB` locale or any `en-` locale (e.g. /pricing)\n      \u003c/Translation\u003e\n\n      \u003cTranslation locales='fr'\u003e\n        Shown when visiting urls with `fr-FR` or `fr-BE` locale (e.g. /fr-fr/tarifs or /fr-be/tarifs)\n      \u003c/Translation\u003e\n    );\n  }\n}\n```\n\n### SVG icons\n\nSVGs are generated React Components, use them like any other component.\n\n```jsx\nimport CheckmarkIcon from '../../icons/svg/checkmark';\n\nclass Header extends React.Component {\n  displayName = 'Header'\n\n  render() {\n    return (\n      \u003cCheckmarkIcon className='u-fill-dark-green u-margin-Ls u-pull-end u-inline' alt='✓' /\u003e\n    );\n  }\n}\n```\n\n##### Generating SVG components\n\nIf you're adding or editing an svg, edit the file in `public/` and run the generate script.\n\n`./script/generators/render-icons`\n\n### Assets\n\nCSS: `app/css/`\nImages: `public/images/`\nStatic app: `app/public/`\n\n### Troubleshooting\n\n1. `npm start` fails  \n    Try running `npm install`. Packages might be out of date.\n\n2. Changes are not happening  \n   There might be an exception in your code, check the running terminal or your chrome inspector console.\n\n3. Prospect forms are broken  \n   You need to run the gocardless app at: `gocardless.dev:3000`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falmonk%2Fsplash-pages-1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falmonk%2Fsplash-pages-1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falmonk%2Fsplash-pages-1/lists"}