Merge pull request #11 from bensmithett/rename

Rename project from San Blas to Tropical

README.md

@@ -1,14 +1,14 @@
-# [San Blas](https://sanblas.netlify.com/) 🏝
+# [Tropical](https://tropicaljs.netlify.app/) 🏝
 
-This is a [template repo](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/). Click the green "Use this template" button 👆 to get started, or [read the docs](https://sanblas.netlify.com/) to find out more about building static sites with San Blas.
+This is a [template repo](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/). Click the green "Use this template" button 👆 to get started, or [read the docs](https://tropicaljs.netlify.app/) to find out more about building static sites with Tropical.
 
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/bensmithett/sanblas)
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/bensmithett/tropical)
 
 ---
 
-Welcome to your new [San Blas](https://sanblas.netlify.com/) site!
+Welcome to your new [Tropical](https://tropicaljs.netlify.app/) site!
 
 - Install dependencies: `yarn` or `npm install`
 - `yarn start` or `npm start` & visit http://localhost:5000
 
-Explore the `app` folder or [read the docs](https://sanblas.netlify.com/) for more.
+Explore the `app` folder or [read the docs](https://tropicaljs.netlify.app/) for more.

app/build.js

@@ -32,7 +32,7 @@ const shared = {
       loader: 'file-loader',
       options: {
         name: '[path][name].[contenthash].[ext]',
-        publicPath: `${mode === 'production' ? packageJSON.sanblas.siteURL : ''}/`
+        publicPath: `${mode === 'production' ? packageJSON.tropical.siteURL : ''}/`
       }
     }),
 

app/components/README.md

@@ -2,14 +2,14 @@
 
 Components are the building blocks that make up your pages and layouts. They're where you define HTML, CSS and (optionally) client-side JS behaviour. Build them quickly in Storybook, then compose them into pages.
 
-San Blas components are built with 2 opinionated conventions:
+Tropical components are built with 2 opinionated conventions:
 
 - Style with Fela
 - Opt-in client-side JS
 
 ## Style with Fela
 
-San Blas uses [Fela](https://fela.js.org/) for styling components. See the Fela docs and provided examples, but essentially you write CSS-in-JS that looks like inline styles, which Fela translates into optimised atomic classes:
+Tropical uses [Fela](https://fela.js.org/) for styling components. See the Fela docs and provided examples, but essentially you write CSS-in-JS that looks like inline styles, which Fela translates into optimised atomic classes:
 
 ```js
 <button className={css({
@@ -22,7 +22,7 @@ San Blas uses [Fela](https://fela.js.org/) for styling components. See the Fela
 
 ## Opt-in client-side JS
 
-By default, San Blas components are **only prerendered** and have **no client-side JS behaviour**.
+By default, Tropical components are **only prerendered** and have **no client-side JS behaviour**.
 
 For example, by default this button will appear in the page's prerendered HTML, but nothing will happen when it's clicked.
 
@@ -47,6 +47,6 @@ A single React component can be used to both:
 
 In many React-based frameworks, the top-level page component is hydrated along with every component that makes up that page, regardless of whether they all actually have client-side behaviour that requires hydrating.
 
-By contrast, San Blas requires you to **opt specific components in** to hydration (you may of course choose to hydrate your top-level component).
+By contrast, Tropical requires you to **opt specific components in** to hydration (you may of course choose to hydrate your top-level component).
 
 Helpers are provided in `hydration_helpers.js` simplify hydration (though you may hydrate manually in `entry.client.js`).

app/components/welcome_banner/welcome_banner.js

@@ -36,9 +36,9 @@ export default function WelcomeBanner ({ alertMessage }) {
   return (
     <div className={css(styles.root)}>
       <p>
-        Welcome to your <a href='https://github.com/bensmithett/sanblas/'>San Blas</a> site!
+        Welcome to your <a href='https://github.com/bensmithett/tropical/'>Tropical</a> site!
       </p>
-      <img src={island} alt='San Blas islands' className={css(styles.img)} />
+      <img src={island} alt='Guna Yala, Panama' className={css(styles.img)} />
       <p>
         <button
           className={css(styles.button)}

app/entry.client.js

@@ -1,7 +1,7 @@
 /*
 This is the JS file loaded in the browser by all static pages.
 
-⚠️ Client-side JS is totally optional in San Blas! ⚠️
+⚠️ Client-side JS is totally optional in Tropical! ⚠️
 You can delete everything in here if you don't need it.
 
 Or you can run whatever client-side JS you do need:
@@ -10,7 +10,7 @@ Analytics snippets, ReactDOM.render(), fancy graphs, etc...
 
 /*
 ⚛️ Optional:
-Hydrate prerendered React/Fela components using San Blas hydration helpers.
+Hydrate prerendered React/Fela components using Tropical hydration helpers.
 
 If you wrap components in your pages with the asIsland() HOC, the following code
 will hydrate those components with the same props they were rendered with.
@@ -28,7 +28,7 @@ import { hydrateIslands } from './hydration_helpers'
 const felaRenderer = createRenderer()
 rehydrate(felaRenderer)
 
-// Hydrate San Blas islands
+// Hydrate Tropical islands
 import WelcomeBanner from './components/welcome_banner/welcome_banner'
 
 hydrateIslands({

app/entry.prerender.js

@@ -7,7 +7,7 @@ This one...
 - creates a JSON Feed
 - sets up Fela and Helmet so they can be used in pages and components
 
-...but San Blas doesn't care *how* you generate your HTML files. Change this at your leisure!
+...but Tropical doesn't care *how* you generate your HTML files. Change this at your leisure!
 */
 
 import packageJSON from '../package.json'
@@ -131,7 +131,7 @@ function cleanURLPathForPage (sourceFile) {
 }
 
 function buildJSONFeedFile (pageProps) {
-  const { siteURL, feedTitle } = packageJSON.sanblas
+  const { siteURL, feedTitle } = packageJSON.tropical
   const { posts } = pageProps
 
   // A minimal JSON Feed (see https://jsonfeed.org/version/1)

app/hydration_helpers.js

@@ -13,8 +13,8 @@ export function asIsland (componentName, Component, {
 
     return (
       <Island
-        data-sanblas-hydrate-as={componentName}
-        data-sanblas-hydrate-with={hydrationData}
+        data-tropical-hydrate-as={componentName}
+        data-tropical-hydrate-with={hydrationData}
         {...islandProps}
       >
         <Component {...props} />
@@ -26,9 +26,9 @@ export function asIsland (componentName, Component, {
 }
 
 export function hydrateIslands (islands, felaRenderer) {
-  document.querySelectorAll('[data-sanblas-hydrate-as]').forEach(island => {
-    const Component = islands[island.dataset.sanblasHydrateAs]
-    const componentProps = JSON.parse(island.dataset.sanblasHydrateWith)
+  document.querySelectorAll('[data-tropical-hydrate-as]').forEach(island => {
+    const Component = islands[island.dataset.tropicalHydrateAs]
+    const componentProps = JSON.parse(island.dataset.tropicalHydrateWith)
     const element = (
       <RendererProvider renderer={felaRenderer}>
         <Component {...componentProps} />

app/layouts/README.md

@@ -7,7 +7,7 @@ This could include things like:
 - Tags for your `<head>`
 - "Wrapper" divs, or a shared header, footer or sidebar
 
-Unlike Rails, you don't need to directly template your layout's `html`, `head` or `body` tags. Instead, manage those tags with `Helmet` and the San Blas prerender function will put everything in the right place in the final rendered HTML document.
+Unlike Rails, you don't need to directly template your layout's `html`, `head` or `body` tags. Instead, manage those tags with `Helmet` and the Tropical prerender function will put everything in the right place in the final rendered HTML document.
 
 ## Layout props
 

app/pages/index.js

@@ -2,7 +2,7 @@
 
 // Every page should export a `meta` object with at least a title and description.
 export const meta = {
-  title: 'Your San Blas site',
+  title: 'Your Tropical site',
   description: ''
 }
 
@@ -21,7 +21,7 @@ import { WelcomeBannerIsland } from '../components/welcome_banner/welcome_banner
 export default function IndexPage ({ posts }) {
   return (
     <>
-      <WelcomeBannerIsland alertMessage='An yeel itoe' />
+      <WelcomeBannerIsland alertMessage='Hello!' />
       <PostList posts={posts} />
     </>
   )

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "sanblas",
-  "version": "4.0.0",
+  "name": "tropical",
+  "version": "5.0.0",
   "scripts": {
     "start": "concurrently \"node ./app/build.js development\" \"serve\" --kill-others --prefix-colors=yellow.dim,cyan.dim",
     "build": "node ./app/build.js production",
@@ -30,8 +30,8 @@
     "webpack": "^4.41.6",
     "webpack-manifest-plugin": "^2.2.0"
   },
-  "sanblas": {
-    "feedTitle": "Blog Posts on another San Blas site",
+  "tropical": {
+    "feedTitle": "Blog Posts on another Tropical site",
     "siteURL": ""
   }
 }