{"compiledSource":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n h2: \"h2\",\n a: \"a\",\n svg: \"svg\",\n path: \"path\",\n p: \"p\",\n div: \"div\",\n blockquote: \"blockquote\",\n span: \"span\",\n circle: \"circle\",\n line: \"line\",\n strong: \"strong\",\n ul: \"ul\",\n li: \"li\",\n ol: \"ol\",\n pre: \"pre\",\n code: \"code\",\n h3: \"h3\",\n h4: \"h4\",\n img: \"img\",\n iframe: \"iframe\",\n em: \"em\",\n br: \"br\"\n }, _provideComponents(), props.components), {Callout} = _components;\n if (!Callout) _missingMdxReference(\"Callout\", true);\n return _jsxs(_Fragment, {\n children: [_jsxs(_components.h2, {\n id: \"introduction\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#introduction\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Introduction\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"The purpose of the Publication process is to ensure that Datopian’s content production is informative, regularly scheduled and a good representation of the work we do.\"\n }), \"\\n\", _jsx(_components.div, {\n children: _jsxs(_components.blockquote, {\n className: \"callout\",\n style: {\n borderLeftColor: \"#00b8d4\"\n },\n children: [\"\\n\", _jsxs(_components.div, {\n className: \"callout-title info\",\n style: {\n backgroundColor: \"#00b8d41a\"\n },\n children: [_jsx(_components.span, {\n style: {\n color: \"#00b8d4\"\n },\n className: \"callout-icon\",\n children: _jsxs(_components.svg, {\n xmlns: \"http://www.w3.org/2000/svg\",\n width: \"16\",\n height: \"16\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"2\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n className: \"lucide-info\",\n children: [_jsx(_components.circle, {\n cx: \"12\",\n cy: \"12\",\n r: \"10\"\n }), _jsx(_components.line, {\n x1: \"12\",\n y1: \"16\",\n x2: \"12\",\n y2: \"12\"\n }), _jsx(_components.line, {\n x1: \"12\",\n y1: \"8\",\n x2: \"12.01\",\n y2: \"8\"\n })]\n })\n }), _jsx(_components.strong, {\n children: \"Info\"\n })]\n }), \"\\n\", _jsx(_components.div, {\n className: \"callout-content\",\n style: {},\n children: _jsxs(_components.p, {\n children: [\"It's important that you read \", _jsx(_components.a, {\n href: \"content-writing\",\n children: \"The Writing Process\"\n }), \" prior to follow these instructions.\"]\n })\n }), \"\\n\"]\n })\n }), \"\\n\", _jsxs(_components.h2, {\n id: \"checklist\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#checklist\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Checklist\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Ensure published content - including language, links, image accreditation etc. - is accurate.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Share with either @yoanapopova or @lucasb for review.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Where the article is based on a client interview or case study, liaise with the client to ensure there is a common understanding around the publication content and that the material to be published has client approval.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Publish the content on Datopian’s blog.\"\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"Update \", _jsx(_components.a, {\n href: \"https://docs.google.com/spreadsheets/d/1fa6cxSnqyMMheIvpgWwYiDS6T-n5NFKDAT-txWRjVHc/edit#gid=1559121169\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Content Publication Master Spreadsheet\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.li, {\n children: \"Add new key terms to the glossary.\"\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"Post-publication client engagement including:\", \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Informing the client of the publication.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Sending them the links to the various channels that the article has been published on.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Thanking them for their input.\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(Callout, {\n children: [_jsxs(_components.h2, {\n id: \"quick-manual\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#quick-manual\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Quick Manual\"]\n }), _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Preparation\"\n }), \": Upload your post images to the proper folder in order to use them within the posted content.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Blog\"\n }), \":\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"public/assets/images/blog/YYYY-MM-DD-your-blog-post-name/your-image.jpg\\n\"\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/public/assets/images/blog\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Link to the folder\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Case Study\"\n }), \":\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"public/assets/images/case-studies/YYYY-MM-DD-your-blog-post-name/your-image.jpg\\n\"\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/public/assets/images/case-studies\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Link to the folder\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Data Portal\"\n }), \":\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"public/assets/images/pages/data-portals/your-image.jpg\\n\"\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/public/assets/images/pages/data-portals/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Link to the folder\"\n })\n }), \"\\n\", _jsx(_components.div, {\n children: _jsxs(_components.blockquote, {\n className: \"callout\",\n style: {\n borderLeftColor: \"#448aff\"\n },\n children: [\"\\n\", _jsxs(_components.div, {\n className: \"callout-title note\",\n style: {\n backgroundColor: \"#448aff1a\"\n },\n children: [_jsx(_components.span, {\n style: {\n color: \"#448aff\"\n },\n className: \"callout-icon\",\n children: _jsxs(_components.svg, {\n xmlns: \"http://www.w3.org/2000/svg\",\n width: \"16\",\n height: \"16\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"2\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n className: \"lucide-pencil\",\n children: [_jsx(_components.line, {\n x1: \"18\",\n y1: \"2\",\n x2: \"22\",\n y2: \"6\"\n }), _jsx(_components.path, {\n d: \"M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z\"\n })]\n })\n }), _jsx(_components.strong, {\n children: \"Note\"\n })]\n }), \"\\n\", _jsx(_components.div, {\n className: \"callout-content\",\n style: {\n borderRight: \"1px solid #448aff33\",\n borderBottom: \"1px solid #448aff33\"\n },\n children: _jsx(_components.p, {\n children: \"If the blog post you are about to publish is in Google Docs and contains images, you need to extract them in advance so that you can upload them to the relevant folder. To extract images from a Google Doc, download the document as a zipped web page and then extract the file. The extracted folder contains an \\\"images\\\" subfolder, where you'll find all the embedded images ready for upload to the GitHub repository. See ### Extracting Images from Google Doc file[#extracting-images-from-google-doc-file] for detailed steps.\"\n })\n }), \"\\n\"]\n })\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Author pictures\"\n }), \": Also make sure that the author’s picture is included in this folder:\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"public/assets/images/team/Name-Surname.jpg\\n\"\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/public/assets/images/team/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Link to the folder\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The content publisher author's image should be at 1:1 aspect ratio proportions, as they are displayed in the portal within circular containers. It shall have a \", _jsx(_components.strong, {\n children: \".jpg\"\n }), \" extension.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Create a new file\"\n }), \":\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"3.1 \", _jsx(_components.strong, {\n children: \"Create New Blog Post\"\n })]\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Navigate to the \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/content/blog\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Blog folder\"\n })]\n }), \"\\n\", _jsx(_components.li, {\n children: \"On the right side of the page, click the button “Add file” and select “Create New File”.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Name the file using the naming convention your-blog-post-title.md (Example: new-ways-to-use-open-data.md). Ensure to add the .md extension. This is the file you will use to create your article.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Tip: For efficiency, consider copying the content from an existing blog post and pasting it into your new markdown file. You can then simply replace the metadata and the text with your own content.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"3.2 \", _jsx(_components.strong, {\n children: \"Create a New Case Study\"\n })]\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Navigate to the \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/content/showcase/case-studies\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Case Studies folder\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.li, {\n children: \"On the right side of the page, click the button “Add file” and select “Create New File”.\\nName the file using the naming convention case-study-post-title.md (Example: a-case-study-of-value.md). Ensure to add the .md extension. This is the file you will use to create your case study.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Tip: Streamline the process by using an existing case study as a template. Copy all its content and paste it into your new markdown file. Replace the metadata and text with your own.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"3.3 \", _jsx(_components.strong, {\n children: \"Adding a Portal to \\\"Portals we've built\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"Navigate to the \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/content/showcase/case-studies\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Data Portals folder\"\n }), \".\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"On the right side of the page, click the button “Add file” and select “Create New File”.\\nName the file using the naming convention data-portal-title.md (Example: data-portal-title.md). Ensure to add the .md extension. This is the file you will use to create your data portal\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Open the data-portals.jsx file located at components/showcase/.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Inside this file, you should see a JavaScript object within the DataPortals() function. 5. The portals array holds the objects representing the Data Portals.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"To add a new Data Portal, firstly, upload your portal image to the //public/assets/images/data-portals folder. Create a new folder using the same convention as the filename and other folders in this directory.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Add a new entry to the portals array of objects in the format:\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"{\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" title: \\\"Data Portal Title\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" image: \\\"/assets/images/data-portals/data-portal-title/portal-image.png\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" href: \\\"https://portal-address.org/\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" description: \\\"Data Portal X makes access easier for data etc etc\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"},\\n\"\n })]\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"To add a portal in the More Portals section, which don’t have a individual page, skip the file creation process above, and just add a new entry in the object “morePortals” from the DataPortals component.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Tip: You can streamline this process by copying the content from an existing data portal and pasting it into your new markdown file. You can then simply replace the metadata and text with your own.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Editing metadata\"\n }), \": Refer to the \", _jsx(_components.a, {\n href: \"#adding-metadata\",\n children: \"Adding Metadata\"\n }), \" section for more details.\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"---\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"layout: blogPost\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"title: Your blog post title\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"seotitle: Alternative title for search engines\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"created: yyyy-mm-dd\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"authors:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Author 1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Author 2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"avatarUrl:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - /assets/images/team/Author-1.jpg\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - /assets/images/team/Author-2.jpg\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"categories:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - category 1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - category 2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"tags: featured1, featured2, featured3, event, useful\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"image: /assets/images/blog/image-name.jpg\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"---\\n\"\n })]\n })\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Adding Images\"\n }), \": To enhance the visual appeal and understanding of your blog post, you may wish to add images. Here's how you can do it:\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"5.1. \", _jsx(_components.strong, {\n children: \"Adding a Featured Image\"\n }), \": The featured image, often the first image that readers see, is added to the metadata. Make sure this image is related to your blog post's topic and is engaging for readers.\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"image: /assets/images/blog/YYYY-MM-DD-your-blog-post-name/image-name.jpg\\n\"\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"5.2. \", _jsx(_components.strong, {\n children: \"Adding Post Images\"\n }), \": You can add images within your blog post content as well. Insert the following code wherever you want to add an image:\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"[Alt text for screen readers](/path/to/image.jpg \\\"Optional title\\\")\\n\"\n })\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.code, {\n children: \"Alt text for screen readers\"\n }), \": This text will be displayed if the image cannot be loaded and aids in accessibility for screen readers.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.code, {\n children: \"/path/to/image.jpg\"\n }), \": Replace this with the actual path where your image is stored.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.code, {\n children: \"Optional title\"\n }), \": This text will be displayed when readers hover over your image. While optional, it can be used to provide additional context or description about the image.\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Adding Custom Components\"\n }), \": To make your blog post more interactive and engaging, you can include built-in components alongside the markdown syntax. You don't need coding expertise to accomplish this; just follow the steps below.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"To add a component, simply place the component within your markdown (.md) file in the following format:\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"

(Actual content goes here)

\\n\"\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"We currently provide three custom components that you can use in both blog posts and case studies:\"\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Callout Component\"\n }), \": This component is typically used to highlight significant information within your post. To use the Callout component, follow the format below:\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"(Place your highlighted content here)\\n\"\n })\n })\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Quote Component\"\n }), \": This component is for incorporating quotes in your post. To use the Quote component, follow this format:\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"(Insert quote here)\\n\"\n })\n })\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Zoom Component\"\n }), \": This component is used to provide desktop zoom capabilities to determined image. The Zoom component should be used in the following way:\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n })\n })\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\"]\n })]\n }), \"\\n\", _jsxs(_components.h2, {\n id: \"posting-on-the-blog\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#posting-on-the-blog\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Posting on the Blog\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Blog posting necessitates familiarity with GitHub and Visual Studio Code. If you haven’t already downloaded Visual Studio Code, you can find it \", _jsx(_components.a, {\n href: \"https://code.visualstudio.com/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"here\"\n }), \". Working with this software requires you to do some basic coding, but you by no means need to be a programmer to learn how. Basic coding knowledge is sufficient to work with these platforms. Simply follow the steps below! We recommend looking at how other articles have been coded at each coding step to make sure you understand how to apply the instructions.\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"navigating-and-editing-content-within-our-github-repository\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#navigating-and-editing-content-within-our-github-repository\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Navigating and Editing content within our GitHub Repository\"]\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"Open the \", _jsx(_components.a, {\n href: \"https://gitlab.com/datopian/core/datopian.com\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"repository\"\n }), \" on GitHub. Click on the blue ‘clone’ button and copy the second URL.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Open Visual Studio Code and go to the Terminal tab at the top → select ‘New Terminal’. The terminal is the part of the software where you write instructions.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"In the terminal, type in \", _jsx(_components.code, {\n children: \"git clone\"\n }), \" followed by the copied link, like this: \", _jsx(_components.code, {\n children: \"git clone https://github.com/datopian/next.datopian.com.git\"\n }), \". Press Enter on your keyboard.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"In the explorer tab on the left, find the blog folder (\", _jsx(_components.code, {\n children: \"content/blog/\"\n }), \") and right-click on it. Select New File. Name the file using the naming convention \", _jsx(_components.code, {\n children: \"your-blog-post-title.md\"\n }), \" (Example: new-ways-to-use-open-data.md). Do not forget to add \", _jsx(_components.code, {\n children: \".md\"\n }), \". This is the file you will use to create your article.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Now you need to upload your blog post (thumbnail/main image included) images to the blog folder. To do this, save the pictures to your device and name them (using dashes to separate words instead of spaces) and drag and drop it to the blog images folder in Visual Studio Code.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Now you need to upload any other photos for your blog post to Visual Studio Code. Staying in the explorer tab, go to \\\"Public → Assets → Image → Blog → YYYY-MM-DD-your-blog-post.md \\\". Save the images you need to your laptop and drag and drop these into this folder (there should be lots of images already there).\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"adding-metadata\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#adding-metadata\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Adding Metadata\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Frontmatter is a tool that allows us to specify metadata at the top of our markdown files. We use a very specific syntax for this header, and then we write our actual content below it.\"\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Go back to your-blog-post-title.md file and add the following code to the document (this should stay at the top of the document):\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Fill out the relevant information. It should now look something like this:\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"---\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"layout: blogPost\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"title: Your blog post title\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"seotitle: Alternative title for search engines\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"created: yyyy-mm-dd\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"authors:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Author 1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Author 2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"avatarUrl:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - /assets/image/team/Author-1.jpg\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - /assets/image/team/Author-2.jpg\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"categories:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - category 1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - category 2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"date: yyyy-mm-dd\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"tags: featured1, featured2, featured3, event, useful\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"image: /assets/img/blog/image-name.jpg\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"---\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"(Actual markdown blog content goes here)\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.strong, {\n children: \"blogPost\"\n }), \" layout is used for \", _jsx(_components.strong, {\n children: \"Blog Posts.\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"All the metadata above is required for the blog post to display properly, with a few important standards:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"title\"\n }), \": This is your blog post title\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"seotitle\"\n }), \": This is an alternative title that will provide search engine optimization (SEO) crawlers additional keywords. The idea of this field is to be different from the article default title.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"image\"\n }), \": This represents the main image (featured image) of the blog post and the image that displays when the content is shared on social media. Should be an URL to the image path, e.g. \", _jsx(_components.code, {\n children: \"/public/assets/images/blog/YYYY-MM-DD-your-blog-post/your-image.png\"\n })]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"authors\"\n }), \", \", _jsx(_components.strong, {\n children: \"avatarUrl\"\n }), \" and \", _jsx(_components.strong, {\n children: \"categories\"\n }), \" are required fields, formatted as \", _jsx(_components.strong, {\n children: \"lists\"\n }), \". Lists can have multiple values. The respective field values must respect this syntax (e.g. for authors):\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"authors:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Author 1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Author 2\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"avatarUrl\"\n }), \" is the author's image address, that refers by default to \\\"/public/assets/images/team/Your-Name-And-Surnames.jpg\\\". You should upload the author image to that folder if it's not already available.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.strong, {\n children: \"categories\"\n }), \" field is meant to be populated by one or more of these pre-set categories:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Company News\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Team & Culture\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Open Data\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"CKAN\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"PortalJS\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Data\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Data Management\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Frictionless Data\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Open Source\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Useful Tools\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.strong, {\n children: \"tags\"\n }), \" field is the only optional field. When populated, should receive any of these values:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"featured1\"\n }), \", \", _jsx(_components.strong, {\n children: \"featured2\"\n }), \", or \", _jsx(_components.strong, {\n children: \"featured3\"\n }), \" to feature the blog post on the site's \", _jsx(_components.strong, {\n children: \"Featured Blog Posts\"\n }), \" section.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"useful\"\n }), \" to display the blog post in the \", _jsx(_components.strong, {\n children: \"Useful Tools\"\n }), \" section.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"event\"\n }), \" to feature the blog post in the \", _jsx(_components.strong, {\n children: \"Featured Event\"\n }), \" section of the portal.\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Without a tag, the blog post will appear as a normal blog post in the list as the last one, ordered by date.\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"formatting\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#formatting\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Formatting\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"The blog post content should be written in markdown and have a .md extension. If it's inside of the blog folder along with other blog posts and has the correct extension and metadata, your blog will be automatically detected and published properly on the blog.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"For more instructions in Markdown syntax, please follow \", _jsx(_components.a, {\n href: \"https://www.datopian.com/playbook/markdown\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"this link\"\n }), \".\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"custom-components\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#custom-components\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Custom components\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"We have built-in React (Javascript JSX) components that can empower your blog post along with the markdown syntax. It's simple to add a component to the blog post, you don't need to know coding to do this.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"To add a component, you just need to use the component inside of the MD file, like this:\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"(Actual content goes here)\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n })]\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"We have three custom components that can be used both for blog posts and case studies. They are:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"Callout\"\n }), \" component, that should be used in the middle of the document like this:\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"(Actual content goes here)\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"Quote\"\n }), \" component, that should be used in the middle of the document like this:\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"(Actual quote goes here)\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"Zoom component\"\n }), \", that should be used in the middle of the document like this:\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n })\n })\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"adding-links\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#adding-links\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Adding Links\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Note: The process of adding links (standard and image links) to articles as described below is standard Markdown syntax. It's a widely used format and isn't specific to our system. Therefore, if you ever need more detailed information or help with other Markdown functionalities, we recommend referring to our \", _jsx(_components.a, {\n href: \"/playbook/markdown\",\n children: \"Markdown guide\"\n }), \". This guide provides detailed instructions and examples on how to use Markdown, including how to add lists, tables, code blocks, emphasis, and more.\"]\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"adding-standard-links\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#adding-standard-links\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Adding Standard Links\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"To add a standard link in Markdown, use the following syntax:\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"[Anchor text](URL)\\n\"\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Here's an example: \"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"[Datopian]([https://www.datopian.com](https://www.datopian.com))\\n\"\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"In the rendered Markdown, this will appear as: \", _jsx(_components.a, {\n href: \"https://www.datopian.com\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Datopian\"\n }), \". When this link is clicked, it will lead to the Datopian homepage.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Internal links can be added with \", _jsx(_components.strong, {\n children: \"\\\"/\\\"\"\n }), \" at the beginning of the link.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Example: \", _jsx(_components.code, {\n children: \"[CKAN](/solutions/ckan)\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"External links should be added with proper \", _jsx(_components.strong, {\n children: \"https://\"\n }), \" protocol at the beginning of the link.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Example: \", _jsx(_components.code, {\n children: \"[My Link](https://www.linkdomain.com/something)\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"This verification will also ensure that all the external links are added with the \", _jsx(_components.code, {\n children: \"target=\\\"blank\\\"\"\n }), \" property applied, ensured that all external links open in a new tab.\"]\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"anchor-text\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#anchor-text\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Anchor text\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The publisher is encourajed to provide anchor texts for all links in order to comply with the \", _jsx(_components.a, {\n href: \"https://developer.mozilla.org/docs/Glossary/SEO\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"SEO\"\n }), \" best practices.\"]\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"links-connections\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#links-connections\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Links Connections\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Making links to existing pages and articles in your portal makes it better connected and powerful for \", _jsx(_components.a, {\n href: \"https://developer.mozilla.org/docs/Glossary/SEO\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"SEO\"\n }), \". You can find smart keywords within the article and link them to actual information resource from the Datopian Portal.\"]\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"adding-images-as-links\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#adding-images-as-links\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Adding Images as Links\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"You can also turn an image into a hyperlink. Here's the syntax:\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"[![Alternative text](Image URL)](URL)\\n\"\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Here's an example: \"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"[![Datopian logo]([https://www.datopian.com/assets/images/layout/datopian-logotype.png](https://www.datopian.com/assets/images/layout/datopian-logotype.png))](https://www.datopian.com/)\\n\"\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"In the rendered Markdown, it will display an image that, when clicked, leads to the specified URL. In this case, clicking on the Datopian logo will lead to the Datopian homepage.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Please note that the \\\"Alternative text\\\" is a description of the image that gets displayed when the image cannot be loaded, and it is essential for accessibility.\"\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"extracting-images-from-google-doc-file\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#extracting-images-from-google-doc-file\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Extracting Images from Google Doc file\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"There might be instances where developers deliver the article in a Google Doc format, with embedded images. If you're a content publisher tasked with posting the blog post, you can follow the steps detailed below in order to extract the images from the\"\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Open the Google Doc blog post\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"From the top menu, select \\\"File\\\".\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"In the dropdown that appears, hover over \\\"Download\\\", this will open another side menu.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"From this side menu, select \\\"Web Page (.html, zipped)\\\". This action will download a .zip file of the entire document, including the images, to your local drive.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Navigate to the location of the downloaded .zip file on your local drive and extract it.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Once extracted, open the resultant folder. Inside you'll find a folder labeled \\\"images\\\". This folder contains all the images that were embedded in the Google Doc.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Now, you can proceed with uploading these images to the appropriate folder in the GitHub repository.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"embedding-videos\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#embedding-videos\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Embedding videos\"]\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"how-to-embed-a-youtube-video\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#how-to-embed-a-youtube-video\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"How to embed a YouTube video\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Embedding a YouTube video in a Markdown (.md) file is straightforward. Below are step-by-step instructions:\"\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Go to the YouTube video you want to embed.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Below the video, click the \\\"Share\\\" button.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"In the Share options, click \\\"Embed\\\".\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"A new window will open displaying the HTML embed code for the video. It will look something like this:\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n })\n })\n }), \"\\n\", _jsxs(_components.ol, {\n start: \"5\",\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Copy the entire iframe code and paste it at the location in your file where you want the video to appear. The resulting Markdown document will look something like this:\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"# My Markdown File\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"Here's an interesting video I found:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"I hope you find it as interesting as I do.\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n })]\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Note: Be sure to replace VIDEO_ID with the specific ID of the video you are trying to embed. Also, some Markdown renderers, such as the one used on GitHub, may not support HTML or specific HTML tags, such as iframe. Check the platform where you plan to display your Markdown file to ensure that it supports the HTML you're using.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"On Github\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Github supports embedding videos with \", _jsx(_components.strong, {\n children: \".mp4\"\n }), \" or \", _jsx(_components.strong, {\n children: \".mov\"\n }), \" extensions.\"]\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Go to the YouTube video you want to embed.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"In your GitHub Markdown file, drag and drop the video to the code editor. Check in the 'preview' tab it's style within the rendered markdown content.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"how-to-embed-certain-timeframes-of-youtube-videos\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#how-to-embed-certain-timeframes-of-youtube-videos\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"How to embed certain timeframes of YouTube videos\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Sometimes, you might want to include a certain clip from a youtube video in your article to demonstrate a point.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"There are a few ways to embed a certain timeframe of a youtube video clip into a web page/ blog post. One option is to embed the whole video and simply set it up to start from a particular time when you hit play. Ie. when you click on the 'Play' button you are instantly directed to the part of the video starting at 2:33 minutes. This option isn't ideal because the viewer doesn't know at which point they should stop watching the video (and might be put off watching it if it is too long).\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Another option is to crop the video using an online video cropping tool and then embed only the desired timeframe. This is arguably the best option and the one we will focus on here.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"In order to do this, just follow these simple steps:\"\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Copy the URL of the youtube video in question\\nin our example we will use the URL of \", _jsx(_components.a, {\n href: \"https://youtu.be/1NZBxte_gnw\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"'Introducing CKAN' video\"\n }), \".\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"Go to \", _jsx(_components.a, {\n href: \"https://streamable.com/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Streamable\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.li, {\n children: \"Paste the copied URL into the input field and click on 'Go'.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Pick the time frame that you want by moving the little white circles to the wanted seconds and click on 'Create video'.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"In our example we want to crop it from 03:01 - 04:28.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.img, {\n src: \"https://i.imgur.com/fCwlg9t.png\",\n alt: \"\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n start: \"5\",\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Click on 'Embed' and copy the code that appears in the pop up window. Select \\\"Fixed size\\\".\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.img, {\n src: \"https://i.imgur.com/oNMYENL.png\",\n alt: \"\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n start: \"6\",\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Voila!\\nPaste in on your web page/ blog post and you are good to go.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.div, {\n style: {\n position: \"relative\",\n paddingBottom: \"56.25%\"\n },\n children: _jsx(_components.iframe, {\n style: {\n position: \"absolute\",\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\"\n },\n src: \"https://www.youtube.com/embed/1NZBxte_gnw\",\n allowFullScreen: true,\n frameBorder: \"0\",\n allow: \"accelerometer autoplay clipboard-write encrypted-media gyroscope picture-in-picture\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.em, {\n children: \"Here's an example, taken from an introductory CKAN video featuring Anuar Ustayev:\"\n })\n }), \"\\n\", _jsx(\"iframe\", {\n src: \"https://streamable.com/e/hhs6ld\",\n width: \"560\",\n height: \"315\",\n frameborder: \"0\",\n allowfullscreen: true\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Click \", _jsx(_components.a, {\n href: \"https://www.youtube.com/watch?v=1NZBxte_gnw\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"here\"\n }), \" to watch the full video.\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"image-requirements\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#image-requirements\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Image Requirements\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The content publisher author's image should have a \", _jsx(_components.strong, {\n children: \"1:1\"\n }), \" aspect ratio proportions, as they are displayed in the portal within circular containers.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"All the other image containers of the portal are made to render images with a \", _jsx(_components.strong, {\n children: \"16:9\"\n }), \" aspect ratio. That gives us standard resolutions such as \", _jsx(_components.strong, {\n children: \"1280x720\"\n }), \" or \", _jsx(_components.strong, {\n children: \"1920x1080\"\n }), \" recommended for main article images. It can be any resolution, though, as long as it’s calculated for \", _jsx(_components.strong, {\n children: \"16:9\"\n }), \" aspect ratio.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"For the images inside of the article content, any resolution is accepted. But you should be cautious: Depending on the resolution of the image, it would be very tall and that can be an issue. Images that have a huge height should be dimensioned prior to posting them in the blog, having the ease of reading in mind.\"\n }), \"\\n\", _jsxs(_components.h2, {\n id: \"creating-a-case-study\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#creating-a-case-study\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Creating a Case Study\"]\n }), \"\\n\", _jsx(_components.div, {\n children: _jsxs(_components.blockquote, {\n className: \"callout\",\n style: {\n borderLeftColor: \"#00b8d4\"\n },\n children: [\"\\n\", _jsxs(_components.div, {\n className: \"callout-title info\",\n style: {\n backgroundColor: \"#00b8d41a\"\n },\n children: [_jsx(_components.span, {\n style: {\n color: \"#00b8d4\"\n },\n className: \"callout-icon\",\n children: _jsxs(_components.svg, {\n xmlns: \"http://www.w3.org/2000/svg\",\n width: \"16\",\n height: \"16\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"2\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n className: \"lucide-info\",\n children: [_jsx(_components.circle, {\n cx: \"12\",\n cy: \"12\",\n r: \"10\"\n }), _jsx(_components.line, {\n x1: \"12\",\n y1: \"16\",\n x2: \"12\",\n y2: \"12\"\n }), _jsx(_components.line, {\n x1: \"12\",\n y1: \"8\",\n x2: \"12.01\",\n y2: \"8\"\n })]\n })\n }), _jsx(_components.strong, {\n children: \"Info\"\n })]\n }), \"\\n\", _jsx(_components.div, {\n className: \"callout-content\",\n style: {},\n children: _jsxs(_components.p, {\n children: [\"The process of creating a case study has many similarities to that of \", _jsx(_components.a, {\n href: \"#posting-on-the-blog\",\n children: \"Posting on the blog\"\n }), \". Therefore, we recommend you familiarize yourself with that section before starting a case study. However, publishing a case study also requires some specific steps. We'll detail these steps below.\"]\n })\n }), \"\\n\"]\n })\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"navigating-and-editing-content-within-our-github-repository-1\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#navigating-and-editing-content-within-our-github-repository-1\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Navigating and Editing content within our GitHub Repository\"]\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Creating a New Case Study File\"\n }), \": Start with Visual Studio open. Navigate to the explorer tab on the left. Find the case-studies \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/content/showcase/case-studies/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"folder\"\n }), \" (\", _jsx(_components.code, {\n children: \"content/showcase/case-studies\"\n }), \") and right-click on it. Select \", _jsx(_components.strong, {\n children: \"New File\"\n }), \". Name the file using the naming convention case-study-post-title.md (Example: a-case-study-of-value.md). This is the file you will use to create your case study.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Uploading Case Study Images\"\n }), \": Case studies are often accompanied by specific images (including a thumbnail or main image). You need to upload your images to the case-studies folder. To do this, save the pictures to your device using a descriptive name with dashes between words in place of spaces (for example: case-study-thumbnail.jpg). Once named and saved, create a folder inside of the \", _jsx(_components.code, {\n children: \"case-studies\"\n }), \" \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/public/assets/images/case-studies/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"image folder\"\n }), \" (\", _jsx(_components.code, {\n children: \"public/assets/images/case-studies\"\n }), \") with the naming convention of \", _jsx(_components.code, {\n children: \"YYYY-MM-DD-your-case-study-title.md\"\n }), \". Then, drag and drop them into your case study folder images folder in Visual Studio Code. Drag and drop the saved images into this folder.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Adding Additional Images\"\n }), \": You may want to include other photos or visuals in your case study. To do this, first, save the necessary images on your device. Next, in the explorer tab, go to your case study post \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/public/assets/images/case-studies/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"image folder\"\n }), \" going to \\\"Public → Assets → Image → Case-Studies → YYYY-MM-DD-your-case-study-title\\\".\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"adding-metadata-1\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#adding-metadata-1\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Adding Metadata\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Metadata is an essential part of setting up your case study for proper display and categorization. Below is a template for the metadata of a case study:\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"---\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"layout: article\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"title: Your case study title\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"seotitle: Alternative case study title for search engines\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"description: \\\"Case study description\\\"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"image: /assets/img/blog/image-name.jpg\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"created: yyyy-mm-dd\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"authors:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Author 1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Author 2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"avatarUrl:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - /assets/image/team/Author-1.jpg\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - /assets/image/team/Author-2.jpg\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"industries:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - category 1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - category 2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"regions:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Americas\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"services:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Data Engineering\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - CKAN Development\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"tech:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - tech1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - tech2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"usecases:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Internal Data Management\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"brief: Resolution component brief\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"problem: Resolution component problem\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"need: Resolution component need\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"solution: Resolution component solution\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"providers: \\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Service provider 1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Service provider 2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"client: Key facts component client\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"period: Key facts component work period\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"work: Key facts component product link\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"website: 1 \\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"---\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"(Actual markdown blog content goes here)\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.strong, {\n children: \"article\"\n }), \" layout is specifically used for \", _jsx(_components.strong, {\n children: \"Case Studies\"\n }), \".\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"authors\"\n }), \", \", _jsx(_components.strong, {\n children: \"avatarUrl\"\n }), \", \", _jsx(_components.strong, {\n children: \"industries\"\n }), \", \", _jsx(_components.strong, {\n children: \"regions\"\n }), \", \", _jsx(_components.strong, {\n children: \"services\"\n }), \", \", _jsx(_components.strong, {\n children: \"usecases\"\n }), \", \", _jsx(_components.strong, {\n children: \"tech\"\n }), \" and \", _jsx(_components.strong, {\n children: \"providers\"\n }), \" should be formatted as \", _jsx(_components.em, {\n children: \"lists\"\n }), \". Lists can have multiple values. The syntax should be as follows (e.g. for services):\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"services:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Data Engineering\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - CKAN Development\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.strong, {\n children: \"industries\"\n }), \" field should be populated by one or more of these pre-set values:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Education\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Energy\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"CKAN\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Government/Public Sector\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"International Organization\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Non-profit/NGO\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Pharma/Biotechnology\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Public Health\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Smart Cities\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.strong, {\n children: \"usecases\"\n }), \" field should be populated by one or more of these pre-set values:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Data Catalog\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Internal Data Management\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Open Data Portal\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.strong, {\n children: \"services\"\n }), \" field should be populated by one or more of these pre-set values:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"CKAN Development\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"CKAN Consultancy\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"CKAN Features\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"CKAN Hosting & Support\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Data Engineering\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Data Strategy\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Digital Transformation\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Open Data Portal\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"UX/UI Design\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.strong, {\n children: \"regions\"\n }), \" field should be populated by one or more of these pre-set values:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Americas\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Europe\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Global\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"providers\"\n }), \", \", _jsx(_components.strong, {\n children: \"client\"\n }), \", \", _jsx(_components.strong, {\n children: \"period\"\n }), \" and \", _jsx(_components.strong, {\n children: \"work\"\n }), \" fields are used in the Key Facts component and are optional, but \", _jsx(_components.strong, {\n children: \"strongly recommended\"\n }), \". You may include at least one of those fields for the Key Facts component to appear in the top of the case study with the available information. Their content should have the following:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"providers: Service providers that executed the work (supports Markdown syntax). This is a list.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"client: Client name with optional link (supports Markdown syntax)\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"period: Project period\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"work: Final product link, or Client's website in the case of undisclosed product(supports Markdown syntax)\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"services: No need to include if they are already present as a list.\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.strong, {\n children: \"website\"\n }), \" field is meant to be provided \", _jsx(_components.strong, {\n children: \"only\"\n }), \" if we have the Key Facts' \", _jsx(_components.strong, {\n children: \"work\"\n }), \" field link pointing to the Client's website instead of the final product. This is useful when the final product is undisclosed by Client's criteria. If you want to display the final product, just \", _jsx(_components.strong, {\n children: \"ignore this field\"\n }), \". If you want to hide the final product but point to the Client's website, just add this field as show below:\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"code-highlight\",\n children: _jsx(_components.span, {\n className: \"code-line\",\n children: \"website: 1\\n\"\n })\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"brief\"\n }), \", \", _jsx(_components.strong, {\n children: \"problem\"\n }), \", \", _jsx(_components.strong, {\n children: \"need\"\n }), \" and \", _jsx(_components.strong, {\n children: \"solution\"\n }), \" fields are used in the Resolution component and are optional, but \", _jsx(_components.strong, {\n children: \"strongly recommended\"\n }), \". All These fields support markdown syntax. If either one of these fields is missing, the component won't appear in the case study. Their content should have the following:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"brief: Case study brief context of the case\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"problem: Actual problem needed to be solved by Datopian\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"need: Client needs based on the case context and/or agreements\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"solution: Solution provided by the Datopian in the work resolution\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"formatting-1\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#formatting-1\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Formatting\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"When preparing a Case Study, there are specific formatting standards to follow. To better understand this format, we recommend opening an existing case study file within the case-studies folder.\"\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"additional-tips-for-frontmatter-syntax\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#additional-tips-for-frontmatter-syntax\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Additional tips for Frontmatter Syntax\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Frontmatter metadata syntax is very sensible. If a field has wrong syntax, the Flowershow render may misbehave. Here we have some tips to field types:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"String, or key: little or big text that supports markdown depending on the field.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"List, or array: List of strings.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"All field types can be either surrounded by double quotes at both edges. Let's see some examples:\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"string: This is valid text.\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"string: \\\"This is also valid text. We encourage double quotes, mainly if the text is long or needs Markdown syntax within it. Only a few string fields support markdown, though.\\\"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"string: \\\"This is valid text as I'm not closing the doublequote.\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"list:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Item 1 is valid.\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - \\\"Item 2 is also valid, and also support double quotes, but don't support Markdown syntax.\\\"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Item 3 is invalid because I don't have double quotes at both edges\\\"\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"paths-and-urls\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#paths-and-urls\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Paths and Urls\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Relative paths (for assets contained within the Datopian repository, mainly on the public folder) can be added for example, in the case of images. An initial slash is required for the adress to work. We can see an example below:\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"image: /assets/images/valid-url.png\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"image: \\\"/assets/images/valid-url.png\\\"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"image: assets/images/invalid-url.png\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"key-facts-component\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#key-facts-component\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Key Facts Component\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"The custom 'Key Facts' component provides the reader with the crucial information related to the case study. It will appear in the top of the case study if you provide the needed metadata in the frontmatter section:\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"providers: \\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - provider1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - provider2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"client: Client name with optional link (supports Markdown syntax)\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"period: Project period\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"work: Final product link, or Client's website in the case of undisclosed product(supports Markdown syntax)\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"services: No need to include if they are already present.\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"resolution-component\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#resolution-component\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Resolution Component\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Every case study needs a Resolution component, which provides a summary of the project, the problem faced, the client's needs, and the solution provided. Provide it in the Frontmatter metadata and format it as follows:\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"brief: Case study brief context of the case\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"problem: Actual problem needed to be solved by Datopian\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"need: Client needs based on the case context and/or agreements\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"solution: Solution provided by the Datopian in the work resolution\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"main-technologies--tools-used-section\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#main-technologies--tools-used-section\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/public/assets/icons/tech\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Main Technologies & Tools Used Section\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Here, we need to provide a list of the main technologies and tools used in the project. The available techs are displayed inside of the \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/public/assets/icons/tech\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"tech icons folder\"\n }), \" in the private website repository. Insert them in Frontmatter metadata as the following:\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"tech:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - tech1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - tech2\\n\"\n })]\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"To add a new technology from your case studies:\"\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Add an image to the \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/public/assets/icons/tech\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"tech icons folder\"\n }), \" with PNG format and case sensitive technology name.\"]\n }), \"\\n\", _jsx(_components.li, {\n children: \"Update your case study frontmatter with the proper technology name in the list, as the example above.\"\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"After the changes, the actual website deployment will be built again. Your new technology should appear in the \", _jsx(_components.strong, {\n children: \"Main Technologies & Tools Used Section\"\n }), \".\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"tags-field\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#tags-field\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Tags field\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The tags field is optional and can be applied in any markdown page for Datopian website search indexing purposes. It's built so the user can add any tag that won't appear anywhere in the site, but can be used in the Search feature. This field should be provided as a \", _jsx(_components.strong, {\n children: \"list\"\n }), \" and formatted as the following:\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"tags: \\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - tag1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - tag2\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"custom-components-1\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#custom-components-1\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Custom components\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Please refer to the Posting on the blog \", _jsx(_components.a, {\n href: \"#custom-components\",\n children: \"custom components\"\n }), \" section for further details.\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"image-requirements-1\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#image-requirements-1\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Image Requirements\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Please refer to \", _jsx(_components.a, {\n href: \"#image-requirements\",\n children: \"Posting on the Blog: Image Requirements\"\n }), \" for further details.\"]\n }), \"\\n\", _jsxs(_components.h2, {\n id: \"adding-a-portal-to-portals-weve-built\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#adding-a-portal-to-portals-weve-built\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Adding a Portal to \\\"Portals we've built\\\"\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"navigating-and-editing-content-within-our-github-repository-2\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#navigating-and-editing-content-within-our-github-repository-2\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Navigating and Editing content within our GitHub Repository\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"To add a new portal to the \", _jsx(_components.a, {\n href: \"https://datopian.com/showcase/data-portals\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"Data portals we've built\"\n }), \" page:\"]\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"to-add-a-featured-portal\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#to-add-a-featured-portal\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"To add a Featured Portal\"]\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Create a new Data Portal file\"\n }), \": Start with Visual Studio open. Navigate to the explorer tab on the left. Find the data-portals \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/content/showcase/data-portals/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"folder\"\n }), \" (\", _jsx(_components.code, {\n children: \"content/showcase/data-portals\"\n }), \") and right-click on it. Select \", _jsx(_components.strong, {\n children: \"New File\"\n }), \". Name the file using the naming convention data-portal-title.md (Example: your-data-portal-title.md). This is the file you will use to create your data portal.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Uploading Data Portal Images\"\n }), \": Data Portals are often accompanied by specific images (including a thumbnail or main image). You need to upload your images to the data-portals folder. To do this, save the pictures to your device using a descriptive name with dashes between words in place of spaces (for example: your-portal-thumbnail.png). Once named and saved, create a folder inside of the \", _jsx(_components.code, {\n children: \"data-portals\"\n }), \" \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/public/assets/images/data-portals/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"image folder\"\n }), \" (\", _jsx(_components.code, {\n children: \"public/assets/images/data-portals\"\n }), \") with the naming convention of \", _jsx(_components.code, {\n children: \"data-portal-title\"\n }), \". Then, drag and drop them into your data portal images folder in Visual Studio Code. Drag and drop the saved images into this folder.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Adding Additional Images\"\n }), \": You may want to include other photos or visuals in your case study. To do this, first, save the necessary images on your device. Next, in the explorer tab, go to \\\"Public → Assets → Image →Data-Portals→ your-data-portal\\\".\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"With Visual Studio open, in the explorer tab on the left, find the components/showcase/data-portals.jsx file and double-click it. Inside this file, you should see a JavaScript object within the DataPortals() function:\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"export function DataPortals() {\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" const portals =[\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"{\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" \\ttitle: \\\"Data Portal Title\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" \\timage: \\\"/assets/images/data-portals/your-portal-title/portal-image.png\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" \\thref: \\\"https://portal-address.org/\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" \\tdescription: \\\"Data Portal X makes access easier for data etc etc\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"},\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"{\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" \\ttitle: \\\"Another Data Portal\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" \\timage: \\\"/assets/images//data-portals/your-portal-title/dept.ed_.gov_-1024x467.png\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" \\thref: \\\"https://data.ed.gov/\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" \\tdescription: \\\"Data.ed.gov centralizes access to the Department of Education's open data, featuring a custom frontend built on CKAN, enabling users to explore public data, documentation, and APIs.\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"},\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"{...}\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"]\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"return(\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"{...}\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \")}\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Here, \", _jsx(_components.strong, {\n children: \"portals\"\n }), \" is an array of objects, each representing a Data Portal that will be displayed in the gallery grid.\"]\n }), \"\\n\", _jsxs(_components.ol, {\n start: \"5\",\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"To add a new Data Portal, add a new entry to the \", _jsx(_components.strong, {\n children: \"portals\"\n }), \" array of objects, such as:\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \" {\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" title: \\\"Data Portal Title\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" image: \\\"/assets/images/data-portals/your-portal-title/portal-image.png\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" href: \\\"https://portal-address.org/\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" description: \\\"Data Portal X makes access easier for data etc etc\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"},\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.ol, {\n start: \"6\",\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"To add a new Data Portal, add a new entry to the \", _jsx(_components.strong, {\n children: \"portals\"\n }), \" array of objects, such as:\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \" {\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" title: \\\"Data Portal Title\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" image: \\\"/assets/images/data-portals/your-portal-title/portal-image.png\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" href: \\\"https://portal-address.org/\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" description: \\\"Data Portal X makes access easier for data etc etc\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"},\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"to-add-a-portal-in-more-portals-section\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#to-add-a-portal-in-more-portals-section\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"To add a portal in “More Portals” section\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"1 - Read the instructions in the above section. Create the folder in the \", _jsx(_components.a, {\n href: \"https://github.com/datopian/next.datopian.com/tree/main/content/showcase/data-portals/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n children: \"data portals folder\"\n }), \" using the convention ‘your-portal-title’ in the folder’s name. Upload a thumbinal for your portal there. You don’t need to create a .md file for this.\"]\n }), \"\\n\", _jsxs(_components.ol, {\n start: \"2\",\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"To add a new Data Portal, add a new entry to the \", _jsx(_components.strong, {\n children: \"morePortals\"\n }), \" array of objects, such as:\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \" {\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" title: \\\"Data Portal Title\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" image: \\\"/assets/images/data-portals/your-portal-title/portal-image.png\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" href: \\\"https://portal-address.org/\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" description: \\\"Data Portal X makes access easier for data etc etc\\\",\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"},\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"adding-metadata-2\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#adding-metadata-2\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Adding Metadata\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Metadata is an essential part of setting up your data portal for proper display and categorization. Below is a template for the Frontmatter metadata of a data portal:\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"---\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"layout: showcase\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"title: Your data portal title\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"seotitle: Alternative title for search engines\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"image: /assets/images/data-portals/image-name0.png\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"images:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - /assets/images/data-portals/image-name1.png\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - /assets/images/data-portals/image-name2.png\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"description: Your description text\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"features:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Description of feature 1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Description of feature 2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"services:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Description of service 1\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Description of service 2\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"impact: Description of resulted impact of the project\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"---\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"(Actual markdown blog content goes here)\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \"\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.strong, {\n children: \"showcase\"\n }), \" layout is specifically used for \", _jsx(_components.strong, {\n children: \"Data Portals\"\n }), \".\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"All of the fields above are required. \", _jsx(_components.strong, {\n children: \"images\"\n }), \", \", _jsx(_components.strong, {\n children: \"features\"\n }), \" and \", _jsx(_components.strong, {\n children: \"services\"\n }), \" should be formatted as lists. Lists can have multiple values. The syntax should be as follows (e.g. for services):\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsxs(_components.code, {\n className: \"code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line\",\n children: \"services:\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - Data Engineering: Description of this service within the project\\n\"\n }), _jsx(_components.span, {\n className: \"code-line\",\n children: \" - CKAN Development: Description of this service within the project\\n\"\n })]\n })\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"image-requirements-2\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#image-requirements-2\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Image Requirements\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Please refer to \", _jsx(_components.a, {\n href: \"#image-requirements\",\n children: \"Posting on the Blog: Image Requirements\"\n })]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"search\",\n children: [_jsx(_components.a, {\n className: \"heading-link\",\n href: \"#search\",\n children: _jsx(_components.svg, {\n xmlns: \"http:www.w3.org/2000/svg\",\n fill: \"#ab2b65\",\n viewBox: \"0 0 20 20\",\n className: \"w-5 h-5\",\n children: _jsx(_components.path, {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z\"\n })\n })\n }), \"Search\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The majority of the metadata fields for Case Studies, Blog Posts and Data Portals are used as \", _jsx(_components.strong, {\n children: \"keyword\"\n }), \" and \", _jsx(_components.strong, {\n children: \"keyword lists\"\n }), \" for the Datopian website Search feature. Therefore, although many of the fields are optional, we encourage the content publisher to embed as many metadata is feasible to ensure that we have the search feature to be as thorough as possible.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Here we have a list of properties that are used by content pages that are being read by the Search feature:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Case Studies:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"title\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"seotitle\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"description\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"industries\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"regions\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"usecases\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"services\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"description\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"brief\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"problem\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"need\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"resolution\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"providers\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"client\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"work\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"period\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"tech\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"tags\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Blog Posts:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"title\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"seotitle\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"description (automatically fetched)\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"tags\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Data Portals:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"title\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"seotitle\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"description\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"features\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"services\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"impact\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"tags\"\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.div, {\n children: _jsxs(_components.blockquote, {\n className: \"callout\",\n style: {\n borderLeftColor: \"#00bfa6\"\n },\n children: [\"\\n\", _jsxs(_components.div, {\n className: \"callout-title tip\",\n style: {\n backgroundColor: \"#00bfa61a\"\n },\n children: [_jsx(_components.span, {\n style: {\n color: \"#00bfa6\"\n },\n className: \"callout-icon\",\n children: _jsx(_components.svg, {\n xmlns: \"http://www.w3.org/2000/svg\",\n width: \"16\",\n height: \"16\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"2\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n className: \"lucide-flame\",\n children: _jsx(_components.path, {\n d: \"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"\n })\n })\n }), _jsx(_components.strong, {\n children: _jsx(_components.p, {\n children: \"Check also\"\n })\n })]\n }), \"\\n\", _jsx(_components.div, {\n className: \"callout-content\",\n style: {},\n children: _jsxs(_components.p, {\n children: [_jsx(_components.a, {\n href: \"content-writing\",\n children: \"The Writing Process\"\n }), _jsx(_components.br, {}), \"\\n\", _jsx(_components.a, {\n href: \"content-broadcasting\",\n children: \"The Broadcasting Process\"\n })]\n })\n }), \"\\n\"]\n })\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{},"scope":{"title":"The Publication Process","layout":"playbook"}}