From e9fdad795309d1b081d129a043c2f44e8fbf7371 Mon Sep 17 00:00:00 2001 From: Alexa spalato Date: Wed, 8 Nov 2023 13:41:07 +0100 Subject: [PATCH] feat: add Storyblok example --- storyblok/.env-example | 1 + storyblok/.eslintrc.js | 4 ++ storyblok/.gitignore | 8 ++++ storyblok/README.md | 12 +++++ storyblok/app/components/Feature.tsx | 11 +++++ storyblok/app/components/Grid.tsx | 13 +++++ storyblok/app/components/Page.tsx | 11 +++++ storyblok/app/components/Teaser.tsx | 11 +++++ storyblok/app/root.tsx | 69 +++++++++++++++++++++++++++ storyblok/app/routes/$.tsx | 36 ++++++++++++++ storyblok/app/routes/_index.tsx | 1 + storyblok/package.json | 30 ++++++++++++ storyblok/public/favicon.ico | Bin 0 -> 16958 bytes storyblok/remix.config.js | 11 +++++ storyblok/remix.env.d.ts | 2 + storyblok/sandbox.config.json | 7 +++ storyblok/tsconfig.json | 22 +++++++++ 17 files changed, 249 insertions(+) create mode 100644 storyblok/.env-example create mode 100644 storyblok/.eslintrc.js create mode 100644 storyblok/.gitignore create mode 100644 storyblok/README.md create mode 100644 storyblok/app/components/Feature.tsx create mode 100644 storyblok/app/components/Grid.tsx create mode 100644 storyblok/app/components/Page.tsx create mode 100644 storyblok/app/components/Teaser.tsx create mode 100644 storyblok/app/root.tsx create mode 100644 storyblok/app/routes/$.tsx create mode 100644 storyblok/app/routes/_index.tsx create mode 100644 storyblok/package.json create mode 100644 storyblok/public/favicon.ico create mode 100644 storyblok/remix.config.js create mode 100644 storyblok/remix.env.d.ts create mode 100644 storyblok/sandbox.config.json create mode 100644 storyblok/tsconfig.json diff --git a/storyblok/.env-example b/storyblok/.env-example new file mode 100644 index 00000000..9fd18022 --- /dev/null +++ b/storyblok/.env-example @@ -0,0 +1 @@ +STORYBLOK_PREVIEW_TOKEN="your-token" \ No newline at end of file diff --git a/storyblok/.eslintrc.js b/storyblok/.eslintrc.js new file mode 100644 index 00000000..2061cd22 --- /dev/null +++ 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 new file mode 100644 index 00000000..325fa1b3 --- /dev/null +++ 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 new file mode 100644 index 00000000..b96112e9 --- /dev/null +++ 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 new file mode 100644 index 00000000..344802ce --- /dev/null +++ b/storyblok/app/components/Feature.tsx @@ -0,0 +1,11 @@ +import { storyblokEditable } from "@storyblok/react"; + +const Feature = ({ blok }) => { + return ( +
+

{blok.name}

+
+ ); +}; + +export default Feature; \ No newline at end of file diff --git a/storyblok/app/components/Grid.tsx b/storyblok/app/components/Grid.tsx new file mode 100644 index 00000000..b5838167 --- /dev/null +++ b/storyblok/app/components/Grid.tsx @@ -0,0 +1,13 @@ +import { storyblokEditable, StoryblokComponent } from "@storyblok/react"; + +const Grid = ({ blok }) => ( + +); + +export default Grid; \ No newline at end of file diff --git a/storyblok/app/components/Page.tsx b/storyblok/app/components/Page.tsx new file mode 100644 index 00000000..d6baed6b --- /dev/null +++ b/storyblok/app/components/Page.tsx @@ -0,0 +1,11 @@ +import { storyblokEditable, StoryblokComponent } from "@storyblok/react"; + +const Page = ({ blok }) => ( +
+ {blok.body.map((nestedBlok) => ( + + ))} +
+); + +export default Page; \ No newline at end of file diff --git a/storyblok/app/components/Teaser.tsx b/storyblok/app/components/Teaser.tsx new file mode 100644 index 00000000..207f0f77 --- /dev/null +++ b/storyblok/app/components/Teaser.tsx @@ -0,0 +1,11 @@ +import { storyblokEditable } from "@storyblok/react"; + +const Teaser = ({ blok }) => { + return ( +
+ {blok.headline} +
+ ); +}; + +export default Teaser; \ No newline at end of file diff --git a/storyblok/app/root.tsx b/storyblok/app/root.tsx new file mode 100644 index 00000000..f05794e6 --- /dev/null +++ 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() + return ( + + + + + + + +