remix-run · alexadark · Nov 8, 2023
diff --git a/storyblok/.env-example b/storyblok/.env-example
@@ -0,0 +1 @@
+STORYBLOK_PREVIEW_TOKEN="your-token"
diff --git a/storyblok/.eslintrc.js b/storyblok/.eslintrc.js
@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};
diff --git a/storyblok/.gitignore b/storyblok/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
+localhost-key.pem
+localhost.pem
diff --git a/storyblok/README.md b/storyblok/README.md
@@ -0,0 +1,12 @@
+# Storyblok example
+
+This is an example showing a basic integration of Remix with [Storyblok](https://storyblok.com).
+
+## Example
+
+This example shows how to integrate Storyblok in a Remix application, so we can manage the content of our project inside a Headless CMS.we can enable a live preview of the content that's created, using Storyblok's Visual Editor.
+
+## Related Links
+- [Storyblok](https://storyblok.com)
+- here is the [documentation](https://www.storyblok.com/tp/headless-cms-remix) to get started
+- Remix tech hub in Storyblok [here](https://www.storyblok.com/tc/remix)
diff --git a/storyblok/app/components/Feature.tsx b/storyblok/app/components/Feature.tsx
@@ -0,0 +1,11 @@
+import { storyblokEditable } from "@storyblok/react";
+
+const Feature = ({ blok }) => {
+  return (
+    <div {...storyblokEditable(blok)} key={blok._uid} className="w-full p-12 bg-[#f7f6fd] rounded-[5px] text-center">
+      <h3 className="text-2xl text-[#1d243d] font-bold"> {blok.name} </h3>
+    </div>
+  );
+};
+
+export default Feature;
diff --git a/storyblok/app/components/Grid.tsx b/storyblok/app/components/Grid.tsx
@@ -0,0 +1,13 @@
+import { storyblokEditable, StoryblokComponent } from "@storyblok/react";
+
+const Grid = ({ blok }) => (
+  <ul {...storyblokEditable(blok)} key={blok._uid} className="container mx-auto grid md:grid-cols-3 gap-12 my-12 place-items-center">
+    {blok.columns.map((blok) => (
+      <li key={blok._uid}>
+        <StoryblokComponent blok={blok} />
+      </li>
+    ))}
+  </ul>
+);
+
+export default Grid;
diff --git a/storyblok/app/components/Page.tsx b/storyblok/app/components/Page.tsx
@@ -0,0 +1,11 @@
+import { storyblokEditable, StoryblokComponent } from "@storyblok/react";
+
+const Page = ({ blok }) => (
+  <main {...storyblokEditable(blok)} key={blok._uid} className="px-4">
+    {blok.body.map((nestedBlok) => (
+      <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
+    ))}
+  </main>
+);
+
+export default Page;
diff --git a/storyblok/app/components/Teaser.tsx b/storyblok/app/components/Teaser.tsx
@@ -0,0 +1,11 @@
+import { storyblokEditable } from "@storyblok/react";
+
+const Teaser = ({ blok }) => {
+  return (
+    <div {...storyblokEditable(blok)} key={blok._uid} className="py-32 text-6xl text-[#50b0ae] font-bold text-center">
+      {blok.headline}
+    </div>
+  );
+};
+
+export default Teaser;
diff --git a/storyblok/app/root.tsx b/storyblok/app/root.tsx
@@ -0,0 +1,69 @@
+import { json, type MetaFunction } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "@remix-run/react";
+import { storyblokInit, apiPlugin } from "@storyblok/react";
+import Feature from "./components/Feature";
+import Grid from "./components/Grid";
+import Page from "./components/Page";
+import Teaser from "./components/Teaser";
+
+
+const isServer = typeof window === "undefined";
+
+const accessToken = isServer
+  ? process.env.STORYBLOK_PREVIEW_TOKEN
+  : //@ts-ignore
+    window.env.STORYBLOK_PREVIEW_TOKEN;
+
+export async function loader() {
+  return json({env: process.env.STORYBLOK_PREVIEW_TOKEN})
+}
+
+const components = {
+  feature: Feature,
+  grid: Grid,
+  teaser: Teaser,
+  page: Page,
+};
+
+storyblokInit({
+  accessToken,
+  use: [apiPlugin],
+  components,
+});
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "New Remix App",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+export default function App() {
+  const {env} = useLoaderData<typeof loader>()
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.env = ${JSON.stringify(env)}`,
+          }}
+        />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/storyblok/app/routes/$.tsx b/storyblok/app/routes/$.tsx
@@ -0,0 +1,36 @@
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+
+import {
+  getStoryblokApi,
+  useStoryblokState,
+  StoryblokComponent,
+} from "@storyblok/react";
+
+export default function Page() {
+  let story = useLoaderData();
+  story = useStoryblokState(story);
+
+  return (
+    <>
+      <StoryblokComponent blok={story.content} />
+    </>
+  )
+};
+
+export const loader = async ({ params, preview = false }) => {
+  let slug = params["*"] ?? "home";
+  let blogSlug = params["*"] === "blog/" ? "blog/home" : null;
+
+  let sbParams = {
+    version: "draft"
+  };
+
+  if (preview) {
+    sbParams.version = "draft"
+    sbParams.cv = Date.now()
+  };
+
+  let { data } = await getStoryblokApi().get(`cdn/stories/${blogSlug ? blogSlug : slug}`, sbParams);
+  return json(data?.story, preview);
+};
diff --git a/storyblok/app/routes/_index.tsx b/storyblok/app/routes/_index.tsx
@@ -0,0 +1 @@
+export { default, loader } from "./$";
diff --git a/storyblok/package.json b/storyblok/package.json
@@ -0,0 +1,30 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "start": "remix-serve build",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/node": "^1.19.3",
+    "@remix-run/react": "^1.19.3",
+    "@remix-run/serve": "^1.19.3",
+    "@storyblok/react": "^2.4.7",
+    "isbot": "^3.6.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^1.19.3",
+    "@remix-run/eslint-config": "^1.19.3",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.27.0",
+    "typescript": "^4.8.4"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}
diff --git a/storyblok/public/favicon.ico b/storyblok/public/favicon.ico
diff --git a/storyblok/remix.config.js b/storyblok/remix.config.js
@@ -0,0 +1,11 @@
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
+  ignoredRouteFiles: ["**/.*"],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
+};
diff --git a/storyblok/remix.env.d.ts b/storyblok/remix.env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node" />
diff --git a/storyblok/sandbox.config.json b/storyblok/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "hardReloadOnChange": true,
+  "template": "remix",
+  "container": {
+    "port": 3000
+  }
+}
diff --git a/storyblok/tsconfig.json b/storyblok/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}