feat: added wip callout feature

components/WipCallout.tsx

@@ -0,0 +1,39 @@
+/**
+ * The WipCallout function renders a custom callout component with optional context text for
+ * displaying maintenance messages.
+ * @param {Props}  - The code snippet you provided is a React component named `WipCallout` that
+ * renders a special callout message. The component takes an optional prop `context` of type string,
+ * which can be used to customize the message displayed in the callout.
+ * @returns The WipCallout component is being returned, which is a React element representing a
+ * custom callout with a message. The message displayed depends on the value of the `context` prop
+ * passed to the component. If `context` is provided, it will display the provided context message. If
+ * `context` is not provided, it will display a default maintenance message.
+ */
+import type { ReactElement } from 'react';
+interface Props {
+  context?: string;
+}
+export function WipCallout({ context }: Props): ReactElement {
+  return (
+    <div className="custom-callouts nx-w-full nx-mt-6 nx-flex nx-justify-center nx-items-center nx-bg-white dark:nx-bg-black">
+      <div className="nx-w-full  nx-px-4 nx-text-center nx-font-medium nx-text-sm nx-text-left">
+        {context ? (
+          context
+        ) : (
+          <div className="nx-text-left">
+            Please do not rely on the content of this page as it is currently
+            undergoing maintenance. Code samples and solutions may not function
+            as expected. Please check back for an update or{' '}
+            <a
+              href="https://github.com/ethereum-optimism/docs/issues"
+              className="callout-link"
+            >
+              signup to help us revise this page
+            </a>
+            . We welcome your contribution! ❤️
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

content/OpProposerDescriptionShort.md

@@ -0,0 +1 @@
+`op-proposer` is the service that submits the output roots to the L1. This is to enable trustless execution of L2-to-L1 messaging and creates the view into the L2 state from the L1's perspective.

content/index.js

@@ -0,0 +1 @@
+export { default as OpProposerDescriptionShort } from './OpProposerDescriptionShort.md'

messages/WipMsg.md

@@ -0,0 +1,3 @@
+Please **do not rely** on the content of this page as it is currently undergoing maintenance. **Code samples and solutions may not function as expected.** Please check back for an update or [signup to help us revise this
+page](https://github.com/ethereum-optimism/docs/labels/tutorial). We welcome
+your contribution! ❤️

next-sitemap.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next-sitemap').IConfig} */
 module.exports = {
-  siteUrl: process.env.SITE_URL || 'https://snazzy-hamster-4e1647.netlify.app/',
+  siteUrl: process.env.SITE_URL || 'https://docs.optimism.io/',
   generateRobotsTxt: true, // (optional)
   generateIndexSitemap: true,
   // ...other options

notes/content-reuse.md

@@ -0,0 +1,45 @@
+# Content Reuse
+
+Content reuse is when you reuse the same piece of content in various places. It means that technical writers don't have to re-write text many times, and it means that the original piece of copy should be easy to locate so that it can be used as often as needed. When changes are made to that original piece of text, it will then be automatically changed wherever else that piece of text is used, which saves a lot of time.
+
+## Content Directory
+
+The content directory contains markdown files that can be imported across the nextra website.
+
+## How to Write Reusable Content
+
+Create a `.md` file in the `/content` directory.
+
+### How to Use a Single Reusable Content Components
+
+1. Import it at the top of `.mdx` file:
+
+```
+import DescriptionShort from '@/content/DescriptionShort.md' 
+```
+
+1. Use it within the file
+
+```
+Text before
+
+<OpProposerDescriptionShort />
+
+Text after
+```
+
+### How to Use a Multiple Reusable Content Components
+
+1. You can create a `index.js` file in the `content` directories and export 
+the components like this:
+
+```
+export { default as ComponentA } from './ComponentA.md'
+export { default as ComponentB } from './ComponentB.md'
+```
+
+1. Import it at the top of `.mdx` file:
+
+```
+import {ComponentA, ComponentB} from '@/content/index.js' 
+```

notes/wip-callout.md

@@ -0,0 +1,37 @@
+## Wip Callout: Rendering Custom Maintenance Messages
+
+The WipCallout component is a React functional component designed to render custom callouts for displaying messages about the page. This feature allows you to provide users with important information, including optional context text that makes it dynamic and reusable.
+
+## Directory
+
+You can find the WipCallout component in the `/components` directory.
+
+## Behavior
+
+When imported into a page, this component renders a message at the top of the nested page. It also sticks to the top when scrolling, ensuring users don't miss the important information. To add a different message, simply pass the `context` prop with your intended message.
+
+## How to Use Wip Callout
+
+1. Import it into your `.mdx` file:
+
+```typescript
+import { WipCallout } from '@/components/WipCallout';
+```
+
+2. Use it within the file
+
+```typescript
+<WipCallout /> // with default message
+
+<WipCallout context="this tutorial is outdated" /> // with custom message
+
+// with a custom `.md` file
+import WipMsg from "@/message/WipMsg.md" //import the md file
+
+<WipCallout context={<WipMsg/>} />  // with custom message
+
+```
+
+## Maintenance
+
+Maintenance of this feature is straightforward. As a simple React component, you can find it located in the `/components` directory. Additionally, the relevant styling for this component can be found in the global CSS file at `/styles/global.css`.